Unit 65 task


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Unit 65 task

  1. 1. Unit 65 Leeanne HibbertInvestigate the uses of web animationBanner AdsBanner ads are banners on any website which are advertising something in particular. Many bannerads will be advertising the latest deals or offers of their certain products on whatever website thebanners also advertising. A website I come across which has a banner ad is the New Look clotheswebsite http://www.new look.com/.This screenshot above is the banner ad which is on the New Look website. This banner ad as you cansee is advertising a £10 offer off shoes and dresses; if you were to click the ‘shop the offer’ then itwould direct you to another page. This particular banner will still direct you to a page on the NewLook website but other banner ads may even direct you to a complete different website dependingentirely on what it is actually advertising, it could even be advertising a new website.
  2. 2. Unit 65 Leeanne Hibbert Information Near enough every website will have some type of information added to them, but one that I have come across which seems full of information is the official next website http://www.next.co.uk/InfoInfo Info This screenshot above is taken from the page ‘terms and conditions’ and this page is literally just full of information about anything to do with the next store and website. As you can see the part I have cropped is basically telling you all the information on delivery charges and offers etc.
  3. 3. Unit 65 Leeanne Hibbert Promotion Promotions on websites are either selling or putting something in front of the public’s eye. So it could even be somebody’s online CV because they are promoting themselves. A website that I think is good for promoting things is the cbbc website http://www.bbc.co.uk/cbbc/ this is because itsbasically promoting all of the shows which are on the cbbc channel as you can play games or do activities on that particular site. These 4 buttons are promoting CBBC and BBCBBC ChannelWatch episodes The Shows This screenshot above is just the home page of the cbbc website and already its promoting quite a lot. It shows at the top of the page just to the left the channel that cbbc is on which is ‘bbc’ so straight away it is promoting BBC.As you can seeI have pointed to all the promotions on this page just so you can see how much is actually being shown to you.
  4. 4. Unit 65 Leeanne HibbertEntertainmentA website which I have come across that is basically full of entertainment ishttp://www.youtube.com/ this is a website where you can watch or upload videos. These videos canbe music videos; movie trailers; programmes or parts of films. This is also a very popular site and isused all around the world, so you can watch videos that are of anything even if the movie or musicvideo isn’t out yet in the particular country you’re in at the time you’re on this website.This screenshot above is YouTube. I searched din the search bar for Beyoncé’s music video singleladies and it gave me a list of different videos of this. I clicked the official music video and now I canwatch the whole of this video. Also on the right hand side it gives a list of other related videos so itmay be more of Beyoncé’s music or just songs that came out around that time.
  5. 5. Unit 65 Leeanne Hibbert Linear and interactive animations Linear animations are animations that you have no control over, so basically say you click on a certain page of a website usually if there’s an interactive animation then it will only play when youClouds move roll over the button or click it but once you take your mouse away from it then it will stop. Linear graphics are when you go on a page and the animation will start but you have no control at all, so linear animations you have no control to stop it but interactive you can stop it and you do haveSea moves control. A website that I have a linear animation on is the BMW website http://www.bmw.com/ This banner above is a linear animation as the clouds in the sky and the blue sea move and whatever you do you cannot stop this from happening you have no control. A website that is interactive animation is the Simpson’s website.http://www.thesimpsons.com/ This image above is an interactive animation as you have control over it. The draw is animated and pulls out but the tabs inside that have the characters names do light up when you rollover but once you click them it brings up a book on that character. So again you do have control over these animations as they only move if you click on whatever it is that starts them of.
  6. 6. Unit 65 Leeanne Hibbert Instruction Instructions on websites are when they help you do something step by step.What you willachieve to do This screen shot above is from synergy learning and is an interactive instruction based task. This is showing you how to work with layers. It even gives you a ‘lesson overview’ which means what you will have achieved throughout this exercise. If you click to being this then it will instruct you on the buttons you need to click and exactly what to do to complete the tutorials.The instructions This screenshot is once you start of the instruction exercise, as you can see straight away it tells you what to do.
  7. 7. Unit 65 Leeanne Hibbert Animated interface elements animated interface elements are anything that basically makes the page that you are on change.An example of this is say if you hover your mouse over them then a drop down menu will appear and you can scroll down onto the different options and click them, these will then direct you to a different page. Another example is this screen shot below. This screenshot was taken from the marks and spencer’s website http://www.marksandspencer.comClicking thiswill makethe mainshow zoomso you canlook closerat itClicking thiswill make themain shoeblack This is an animated interface element as you can click on things on this page that will change how you see it now. So anything on a website can be an animated interface element as long as it changes the screen your viewing so basically if you click on something and a box appears up or you hover over something and something else appears these are all animated interface elements.
  8. 8. Unit 65 Leeanne HibbertThe development of AnimationTask 2: Investigate The development of animation, such as hand drawn (cel) animation; flick books;animated cartoons; animation process, graphic information file format (gif); dynamic hypertextmark-up language (dHTML); extensible hypertext mark-up language (XHTML); Java appletsHand Drawn animation – hand drawn animation is obviously animation that has been drawn by thehuman hand. This technique was the dominant form of animation in the cinema until computeranimation came about.Flip Books –A flip book is a book with a series of pictures that gradually move each time you flick apage, this then makes the pictures on that certain page look like they are actually moving. So anexample of this say your series of pictures is a horse and each time you flick a page it looks like thehorse is galloping, this is a form of hand drawn animation. The first ever flip book appeared inSeptember, 1868. It was created by a man named John Barnes Linnett, he named it the ‘kineograph’meaning a moving picture. Flip books are now considered a novelty or toy for children and wereonce a common price in Cracker Jack and cereal boxesAnimated Cartoons- Animated cartoons can be for a film, programmes or even for the computer.They usually feature some kind of story or plot, plus many old animated cartoons may be very shortand last up to five minutes if that. Animated cartoons are also made by the creation of drawings.Although cartoons can use many different types of animation, animated cartoons come under the‘traditional animation’ category.Graphic Information File Format (GIF) – Graphic information file format known as ‘GIF’ is a bitmapimage format what was introduced by ‘CompuServe’ in the year of 1987. Since 1987 it has becomevery popular and used throughout the World Wide Web due to its portability and support. The GIFformat supports up to 8 bits per pixel meaning it allows a single image to reference a palette of 256distinct colours each time, these colours are chosen from the 24-bit RGB colour space. GIF alsosupports animations and allows a separate palette of 256 colours for each frame.Dynamic hypertext mark-up language (dHTML) – Dynamic hypertext mark – up language alsoknown as ‘dHTML’ is a term meaning a collection of technologies that are to used together to createanimated and interactive websites, by using mark up language , one example of this is HTML. DHTMLallows scripting languages to change variable in a web pages definition language. This then effectsthe look and function of static HTML page content after the page is fully loaded and during theviewing of the page. So there for the ‘dynamic characteristic’ of DHTML is the way it functions whilstthe page is being viewed.
  9. 9. Unit 65 Leeanne HibbertAnimation TechniquesIn this task five I am going to be explaining what the different techniques of animation are. I willexplain what the following are and how they work:.The optical illusion of motion (persistence of vision);.Claymation. Stop motion.Computer generation (frame rate, frames, key frames, onion skinning, tweening)Optical illusion of Motion (Persistence of vision) – Optical illusion is when a static image appears tolook like its moving due to the ‘cognitive’ effects of shape position and colour contrasts. ApparentMotion is the most common type of illusory motion and it formed when images are displayed insuccess at a different frame rate such as in a film.Claymation – Claymation also known as clay animation is one of the many forms of stop motionanimation. Every single animated piece either background or character is ‘deformable’ meaning it ismade of malleable substance, usually always plasticine clay. Basically all traditional animation isproduced in a similar way whether done by stop motion or cel animation. Each still picture or frameis recorded on a film or digital media, and then played back very rapidly.Stop Motion - Stop motion which can also be known as stop frame is an animation technique tomake a physical object appear to move on its own. The object is moved in small amounts betweenindividually photographed frames, which are then creating the illusion of movement when the seriesof frames is played continuous. Dolls or clay figures are mostly used in stop motion as it is easier toreposition them. Stop motion animation using plasticine is called clay animation or ‘Claymation’ as Ihave previously said above. Not all stop motion has figures or models, as many stop motion films canactually involve using humans, house appliances and other things for effect.Computer generation (frame rate, frames, key frames, onion skinning, tweening) - There are fivemore important things about computer generation that is highly needed these are listed above so Iam going to explain them each in more detail.
  10. 10. Unit 65 Leeanne HibbertFrame rate - Also known as frame frequency is the rate at which an imaging device produces uniqueconstant images known as frames. This term also applies well to both video and film cameras,motion capture systems and computer graphics. Frame rate is often known and expressed as framesper second (FPS) they are also expressed in ‘progressive scan monitors’ as hertz.Key Frames - Key Frames in film making and animation are a drawing that shows the start andending points of any smooth transition. These drawings are known as ‘frames’ because thereposition in time is measured in frames on a strip of film. A sequence of key frames show theprecisely that the viewer will see, where as the position on the key frames on the video, film oranimation shows precisely the timing of the movement. This is because only two or three keyframesover a second do not create the illusion of movement, the remaining frames are filled with ‘in-betweens’.Onion Skinning - Onion skinning is a graphics term which is used in creating animated cartoons andediting movies to see many frames at once. This meant that this way the editor or animator canmake decisions on how to change or create another image based on the previous image in thatparticular sequence. In traditional cartoon animation the individual frames of a movie were firstdrawn on thin onion skin paper over a light source. The animators would put the previous and thennext drawings perfectly beneath the working drawing so that they could draw the ‘in – between’ togive a smooth motion.Tweening – Tweening which is shot for in-betweening is the process of generating frames betweentwo images to give the appearance that the first image shows smoothly in to the second one.Tweening is the key process in all types of animation, even computer animation. More up to dateanimation software enables you to identify specific objects in an image and precisely show how theyshould change and move during the tweening process.
  11. 11. Unit 65 Leeanne HibbertDigital AnimationIn this task I will be investigating all of the different types of digital animation. I will be explaining themore known types of digital animation, these are listed below:.Vector animation. Raster (bitmap) animation.Compression (file size, download speeds);.Scalability.File formats, e.g. .fla, .swf, .gif, .mng, .svgVector Animation – Vector Animation is a term that is used to refer to animation where motion orart is controlled by vectors rather than pixels. Vector animation allows cleaner and smootheranimation simply because images are displayed or resized (if needed) by using mathematical valuesinstead of stored pixel values. One of the most commonly used vector animation programmes is‘Macromedias Flash’.Raster (bitmap) animation – Raster based animation is created using a lot more detailed imagessimilar to shapes or photos. Although there are both advantages and disadvantages of using rasterbased animation. Raster based animation frames are made up of individual pixels; these pixels eachcontain information about both the colour and brightness of that exact spot on the image. This issimilar to pointillism in painting, with the sum of points making up the totality of the frame orpicture.Compression – Image compression may be either lossy or lossless. Lossless compression is used formore archival purposes and often for medical imaging, technical drawings, comics and clip art. This isbecause the lossy compression methods especially when used at low bit rates introduce‘compression artifacts’. Whereas Lossy methods are used for more natural images such asphotographs of things where minor loss of fidelity is acceptable to achieve a decent bit rate.Scalability - Scalability is the ability of a system, process, or network to handle a growing amount ofwork in a capable way. For example it can refer to the capability of a certain system to increase thetotal under an increased load when resources (usually hardware) are added.
  12. 12. Unit 65 Leeanne HibbertFile Formats- File formats are standard ways where in which information is encoded for storage in acomputer file. A file format specifies how bits are used to encode information in a digital storageplace. File formats can either be published or opened and may be either free or proprietary. Herebelow are a few file formats and information on these.FLA – the FLA file format is known as the ‘master’ document format for Flash projects. When youcreate a flash file in the flash programme you create a new FLA file. This file contains all theelements which make up the finished product, including the graphics, action script code, animationinstructions and comments etc. An FLA file does not play or execute so you have to export it to aSWF file, which is what end users see.SWF – The SWF file format is an adobe flash file format used for multimedia, action script and vectorgraphics. Currently SWF is the most dominant format for displaying animated vector graphics on theweb. It is also used for programmes and is also common for browser games using action script. Theterm SWF did originally stand for ‘Shock wave file’, but then changed to ‘small web format ‘to stopconfusion with a different technology.GIF – The GIF file format is a bitmap image format file which was introduced by CompuServe in 1987.The GIF format supports up to 8 bits per pixel, allowing a single image to reference a palette of up to256 distinct colours. This file format can be used for small animations and low resolution clips.MNG – The MNG file format also referred to as multiple –image network graphics, is a publicgraphics file format for animated images. MNG is closely related to PNG image format. When PNGfist started in early 1995 the developers decided not to incorporate support for animation becausethe majority of PNG developers felt that it was over loading this single file type with both animationand still is a bad design. So then MNG started as an animation support version of PNG. This wasreleased on 31st January 2001.SVG – The SVG file also referred to as scalable vector graphics is the family of an XML – based fileformat for two dimensional vector graphics. All popular modern web browsers such as MozillaFirefox, Internet Explorer 9, Google Chrome, Opera, and have at least some support for SVG . SVGfile formats can be searched, scripted, indexed, and if need be compressed. SVG files can also beedited and created in any text editor, although it is easier to create them in drawing programmeslike ‘inkscape’.
  13. 13. Unit 65 Leeanne HibbertWeb Animation SoftwareIn this task I am going to be investigating all of most popular web animation software. I will thenexplain a list of them in detail. The ones I will be explaining are:.Flash.Swish.Amara.Director.Players e.g. flash player, shockwave, real player, QuickTimeFlash – The programme flash is a macromedia multimedia platform used to add Interactivity,animation and video to web pages. Flash is used mainly for games, advertisements and flashanimations for broadcast. It has just recently been named as a tool for ‘rich internet applications(RIAs). Flash influences vector and raster graphics to provide animation of text, still images anddrawings. Flash contains an ‘object-orientated language’ which is called ‘action script’ and thissupports automation meaning via the java script language.Flash content is displayed on most computer devices and systems, if you are using Adobe flashplayer, this also doesn’t cost a penny for common web browsers, some mobile phones (not all) andsome other electrical devices.Swish – The programme swish is a flash creation tool that is used to create interactive and crossplatform animations, movies and presentations. It is developed by ‘swishzone.com’ and it is based inSydney Australia. Swish outputs to the SWF format which is under control at the moment by adobesystems.Swish is basically known to be a much simpler and less costly flash creation tool comparison withadobe flash, although swish does not support some adobe flash features such as action script 3.0,bitmap drawings and shape tweens. But it does include flash creation features such as motiontweens, vector drawings and symbol editing. Swish also has a number of effects and transitionswhich makes building certain graphics like buttons, advanced transition effects and interactive flashsites a lot simpler.
  14. 14. Unit 65 Leeanne HibbertAmara - Amara is software which allows you to create web animations for a website. It is actuallyrather easy to use people find, plus this software saves your creations as SWF file format meaningthat once your creation has been saved it can be used in any website without having to use anyspecial HTML coding. You don’t even have to have any HTML knowledge to be able to create ananimation within this Amara software.With Amara you can create more than just animations, you can make animated flash slideshows,news tickers, Buttons, menus, banners, virtual tours and flash intros all in this popular adobe flashformat.Director – Director also known as ‘adobe director’ is a multimedia programme that is created bymacromedia, now part of adobe systems. Director was originally designed for creating animationsequences and also uses both 2D and 3D multimedia projects.Director has quite a powerful script language and this is named ‘Lingo’, this allows interaction withexternal files and some windows API’s that has been used to create graphical user interfaces andcreate applications. Director can export projects for embedding using the ‘shockwave’ plug in, thesefiles have a DCR file extension.Players – Certain software programmes allow you to listen to music or watch certain films andprogrammes, there are quite a few of these. I am going to explain five of the most popular usedplayers below.Flash Player – Flash player also known as ‘adobe flash player’ is software for viewingmultimedia and RIA applications plus streaming video and audio. You will find flash player on a webbrowser or some mobile phone devices. Flash player runsSWF files that can be created by the ‘adobe flash’ authoring tool plus a number of macromedia thirdparty tools.Shockwave – Shockwave player also known as ‘adobe shockwave player’ is Again softwareprogramme for viewing multimedia playback. The shockwave player allows you to view interactiveweb content such as web presentations, games, entertainment and advertisements from yourbrowser.
  15. 15. Unit 65 Leeanne HibbertReal player – Real player is a ‘cross platform’ software which is software simply made so that youcan play or record. The first version of real player was introduced to the public in April 1995 as ‘realaudio player’ this was also one of the first media players that were actually capable of streamingthings over the internet.QuickTime – Quick time is an ‘apple’ software player, again it is a powerful multimedia technologywhich has a built in media player. Quick time lets you view HD movie trailers, Internet video andpersonal media in a wide range of file formats. You can also watch them all in remarkable highquality.