Web animation


Published on

  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Web animation

  1. 1. Web animationWeb animation is used all over the internet for multiple purposes, including advertising, filesharing, streaming videos, browser based games and other animations. Banner ads for example are common in using animation in their advertisement. When hovered over these ads establish a sense of interactivity. There may be a simple game or linear animation. What is more and more common is the use of scrolling banner ads that expand whenhovered over with the mouse. These banner ads are usually tied in with the website they’redisplayed on. In fact most ads are linked in some form or another to the website orwebpage that displays them. For example an article about healthy eating would most likelyhave dieting and health care related banner ads on the page. This happens because theadvertising system you associate your site with (Google, yahoo etc.) will search for keywords and phrases in the content and create an ad connected to this.Websites in general are known to contain some form of animated interface elements. Mostsites would have links connected to images or certain text. Other sites offer animation alongwith these links. Take the official Disney website, for example. Their interface is very userfriendly, using little text and using animation to help the user understand the site page. Itoffers a menu of images that you can scroll through, each expanding when hovered over and linking to a page connected to the image displayed. This is very helpful for children especially to understand. The Simpsons website uses flash animation extremely professionally and effectively. The site must load properly before being accessed as the coding of flash is a little more complicated than a simple website. On the start page there is a selection of other pages to choose from at the bottom of the screen, when clicked on they look as if a button has been pushed in. on the character page there is a unique and child friendly interface that instead of a simple list of characters or series of complicated links the page is displayed like a filing cabinet and the characters are split off into six catagories, A-E, F-H etc. when selecting eachcharacter a new page will appear that will either display a linear animation or begin an
  2. 2. interactive flash game to play.The difference between a linear and interactive animation is the control that the user hasover the animation itself. For example a looping web ad is linear because the user has noreal control over it. Any gif is classed as a linear animation, whereas a YouTube video isinteractive because it offers multiple control elements including pausing and selecting aspecific point in the video. Games are also interactive. The google doodles are great examples of how web animation can be used effectively. Google doodles are short animations, games or interesting logo designs that represent a celebration oranniversary of something on the day that is displayed. For example on the 30 th anniversaryof the ever famous retro game, Pacman, Google decided to recreate the game for theirusers to play on the main page. Any browser based game on the internet is another form ofweb animation, mostly for entertainment purposes.Google has also been known to create interactive doodles where the user can click oncertain places on the page and establish a domino effect of animations. This kind ofanimation is used in games as well in the form of ‘point and clicks’ where the user must clickon items or areas on the screen to begin an animation that will lead the character onto thenext stage of the game.Web animations are typically used, in ads at least, to grab the attention of the user. With somuch going on a single page many ads need to think of something original or at least somekind of bold statement to grab people’s attention. The most common and more annoyingads will flash different bright colours on the screen. Others are known to create a shakingaffect, making it look as if the actual image is vibrating on the page. Another tactic is to usesound to distract the user, causing many people to search frantically on a page trying to findthe ad and its mute button. It’s also very typical that clicking on said button will just lead theuser to a pop up.Games and other systems use animationfor entertainment or to provide learningand information. The BBC bitesizewebpage is dedicated to providelearning for GCSE and A-level students.They have interactive games and videosthat help with learning. For exampleone game requires the user to complete a sentence by dragging and dropping the correctword or phrase into the box.
  3. 3. Cartoons are a form of stop motion animation that uses drawn images to create movement.One of the first full length animations like this was Snow white and the Seven Dwarfsanimated by Disney in 1937. Each frame was hand drawn and snow white was one of thefirst animations to ever use colour. Now-a-days drawn animations aren’t used in films asmuch as before though there are hundreds of cartoons produced every month including hitslike “Phineas and Ferb” and “Adventure Time” which is drawn digitally instead. Flash issoftware that can be used to create drawn animation. Hand drawn animation is veryuncommon for the digital era and is a much more time consuming process than the modernmethods used today.Persistence of vision is an effect on our eyes which makes animation possible. Each imagewe see individually overlaps one another creating the illusion of fluid movement. in lowbudget cartoons usually there is a shared image for every 2 frames, so the same image isshown twice within the animation (usual frame rate of around twenty-four would suggestthat only twelve of those frames were separate images) This is possible without detectionbecause the frame rate is higher than the rate at which we retain an image, which meanswe could not see the flicker between each frame. When depicting fast paced movement theanimation is usually changed to one frame per second as two frames does not adequatelyperceive the movement of the subject.The animation process – task 21. Before anything can be animated there needs to be a story. Animators and Directorscome together to discuss the film and a ‘storyboard’ is made. 2. When the all the pieces of the storyboard are put together you have a complete story. Making this storyboard allows the directors etc. know roughly how long the movie will last and an estimate of how many drawings there are going to be. The storyboard is usually displayed as a timeline on a wall or pin board and goes through several editorials before the set-up is finished.3. The dialogue then needs to be recorded so that the animators know what thecharacters will say before they can animate them in the way they wish.4. Once the dialogue is recorded, sketches need tobe made up of just the characters of the story andthere appearances. At this stage there is no colour,background etc. involved and the sketches are usuallyvery messy. Many films have used around 70,000 plus,individual drawings. (Usually, the best animators onlysketch a few animation drawings and leave gaps in
  4. 4. between for the ‘inbetweener’ that would come along and finish the scenes by drawing inthe animation gaps.)5. A very specialized artist or group create the ‘layouts’ for the film/story. They arecreated on the basis that all the drawing is done. Every element in the layout (background,character position etc.) is drawn on to a sheet of transparent paper (acetate or similar).6. Everything is then put through a process called ‘Line Test’, where a test animation iscarried out (using a computer or video equipment) to make sure the animation is smooth.7. Assuming everything goes to plan, the completed drawings will be sent to the peoplethat ink and paint them.8. The animation is then photographed and captured. This whole process can be reallytroublesome if special effect and/or CG images are used (that very ugly this-is-computer-this-is-not effect you see in many TV shows and even feature films).9. After all the drawings have been filmed, the dialogue is added. Sometimes the film isedited at this step. The film is then released to the public.Gifs are a good example of how animation has been used digitally. Gifs are a file format thatloops a series of images infinitely. They are often used in web ads and as account images onforums and social sites like tumblr.com or deviantart.com. They can be created in softwarelike Photoshop and flash and usually display a short looping animation. They are used onsites and ads to gain attention to certain areas on a page or add to the overall design of awebpage. DHTML is a coding script for HTML used to create animation on webpages usually. Though ill effective when used to create complicated animations like that of flash DHTML still offers a variety of animation possibilities for creating a dynamic and interesting website. It uses three different forms of language to achieve its capabilities. The script allows for a change in variables of an original HTML language. DHTML iscommonly described as using HTML, style sheets and scripts and is also thought of as acombination of HTML, JavaScript, DOM and CSS. Both HTML (Hypertext Mark-up Language)and XHTML (extensible hypertext mark-up language) do very similar jobs in the fact thatthey both following coding in creating a website. However there are a few major differencesbetween the two. One difference which is the main reason why XHTML is much less popularthan the standard HTML is that XHTML is much less forgiving in its coding. Just one simplemistake like missing the </ on the end of a line of coding would render the entire datauseless unless the problem was fixed. It will not work unless there are no mistakes what-so-
  5. 5. ever. That is why XHTML is usually used for search engines as it provides reliable results. Itremoves any errors within the coding or the page meaning that the engine is much moreefficient. XHTML was creating by combining the language of HTML with the rules of XHTML,which is used to design other language using certain tags and attributes to suit the type ofdocument you are writing.HTML and XHTML are very similar but at the same time very different. Both code languagesuse the same predetermined language, their main difference being that HTML is much moreforgiving. With a few odd mistakes the coding can still work to create a website which allowsfor much easier manual coding. The problem with HTML is that the rules are not asapparent as they are in XHTML which allows for no faults. In HTML you can write in lowercase, add extra letters or numbers and the code will still work. There is a wider margin oferror allowed when compared to XHTML. This means that XHTML is much more efficient,allowing for exact coding. With XHTML you know if what you’re doing is right or wrong withHTML you may never know if what you’re writing was the correct code as the coding willstill work regardless. XHTML is a new more efficient version of HTML however HTML is stillthe preferred coding so far as it is less strict and there aren’t any real benefits to switchingto XHTML other than its efficiency when coding. It does not change how the websitesappears to the visitors. The purpose of HTML is to write coding which is understood by theinternet and allows for people to connect to one another through websites and pages. It isbasically instructions for different browsers to show different content for a website.Java applets are programs used on websites to help run and operate an animation. UnlikeDHTML, which is more restricted, Java applets are cross platform compatible and can beused in other languages such as Jython, JRuby, or Eiffel. Java is a fast application and untilrecently was faster than any other for its purpose. Java is able to establish 3D imaging andcomplicated animation. Because of its cross compatibility Java can be executed by browsersfor many platforms, including Microsoft Windows, Unix, Mac OS and Linux. Java applets aretypically used to create web animation that cannot be created using XHTML and haveproven very useful in helping to display programs like word processor or browser games.Task 3Persistence of vision is the act of the eye receiving information (animage) which persists on the eye for usually one twenty-fifth of asecond. Persistence of vision is why stop motion animation is soeffective. The eye only has so long to process each individualimage at a time and so the images merge together as the eye canonly perceive so much of what it sees. It gives the illusion thateach frame is moulded to the next like fluid movement instead ofbeing individual images. It is thought that the reasoning behindthis short gap between one image being seen before the next is avisual form of memory known as ‘iconic memory’ - which is the
  6. 6. idea that there is a section in the brain dedicated to quick, responsible and precise shortterm memory. This thereby allows the brain to retain an image within the brain for longerthan it is shown on screen.The idea of persistence of vision is that each image we see individually overlaps one anothercreating the illusion of fluid movement. in low budget cartoons usually there is a sharedimage for every 2 frames, so the same image is shown twice within the animation (usualframe rate of around twenty-four would suggest that only twelve of those frames wereseparate images) This is possible without detection because the frame rate is higher thanthe rate at which we retain an image, which means we could not see the flicker betweeneach frame. When depicting fast paced movement the animation is usually changed to oneframe per second as two frames does not adequately perceive the movement of thesubject.The first ever creation of stop motion animation was the Phenakitoscope which was asimple circle with images around the sides which rotated causing the illusion of a coupledancing. Stop motion uses persistence of vision and a series of images quickly passing onscreen to create the illusion of movement. Now-a-days our idea of stop motion animationwould be Wallace and Gromit or the night before Christmas, simple clay animations that‘move’ at around 30 frames per second (fps). The usual frame rate when you’re watchingthe TV is usually between 24-30 fps. Clay or model animation uses moulded shapes and morphs them to create movement. There are several kinds of model animation, the most basic form being clay. You create a character and then as you take each frame you move the character slightly at each moment. “Wallace and Gromit” is a famous series that uses Clay models. There are even some frames where themodeller’s fingerprints can be seen in the model.-Flash (computer) animation-Frame is the term given to each image in an animation or film reel (stop frame is the actualimage within the frame itself). Frame rate is the amount of still frames per second within areel of film or animation. Frame rate is used to determine the speed of which each stopframe is seen within a second. Usually the frame rate is around twenty four to thirty inTelevision. This means that twenty four to thirty frames are shown on screen within asecond.
  7. 7. In flash animation, the frame rate is no different. The default FPS is usually 12.0 and can bealtered easily by double clicking on the display and writing in a new frame rate. The moreframes per second the faster the animation will be. In order to create something fluid andaverage speed an animator must find a balance between the frame rate and the amount ofmovement between each frame.Frames are displayed as small rectangle boxes on the timeline at the bottom of flash. Thereare other animation software available and they will most likely use a similar format whendisplaying frames. A key frame is the name of a frame that begins the start and the end ofany smooth transition. A sequence of key frames defines which movement the viewer willsee, whereas the position of the key frames on the film, video or animation defines thetiming of the movement. Because there is no illusion of movement between the frames atransition is created between them, morphing one to the other to create the illusion ofmovement. These frames are known as inbetweens. Thismethod of animation is known as tweening.A less automatic method of animation is to draw eachframe individually. In digital animation there is a toolcalled ‘onion skin’ which can be selected. When it is usedonion skinning displays the last few frames under thecurrent one, making it easier to create a smoothtransitioning animation.Raster images are images that when enlarged or compressed keep to the same number ofpixels within the image. This means that if the image were to be expanded it would losequality and clarity. Lines would become blurred and pixelated.Raster images are stored as file types such as: BMP, JPG, TIF, GIF and PNGBMP: a BMP file is a bitmap file, capable of storing 2D images of unlimited width, height andresolution.TIF: a TIF file is capable of saving with both a lossless format and a lossy format. It is aflexible data format allowing you to customise how the image is saved and compressed.GIF: GIF files are easily portable files that can store up to 8 bit images. It also allowsanimation. GIF files allow lossless data compression. GIFs are usually used for mini emotesand logos on websites.
  8. 8. PNG: PNG is a bitmap file that allows lossless data compression. This means that when the file is downloaded or reloaded and saved, it does not lose any of its original memory after first being saved as a PNG as it follows the path to the original save file.JPG: a JPG file is a common file type used to store images. It allows lossy data compressionwhich means that every time the file is re-opened and saved it will lose some of its originaldata, slowly losing pixels and quality until the image is unrecognisable. The image works tosave memory which is why it is a common file format to use.Raster images can either follow lossy data compression or lossless data compression.Lossless: Lossless data compression is when the file when saved follows the same path asthe original file it was saved with. For example a file might have 2000 x 1000 pixels (in total200,000 pixels) for an image. When saved with lossless compression (PNG..) the file will notlose any of the pixels. This means that the file can be re-opened changed and saved againwithout losing any pixels and therefore any of its original quality. This format is best whenediting a file but does not help in saving memory space.Lossy: lossy data compression works to save memory through compression. When a file issaved with a lossy data format the file will continue to lose quality from the original imageevery time it is opened changed and saved again. This is because some pixels in the imageare taken out and deleted each time the file is re saved. This file format means that editingwould result in a poor quality image but is useful in saving memory and useful as adownloadable file on a website.Raster animation is used for depicting realistic representations of people, animals or places,rather than the more stylized, anime-style animation you might get with vector graphics.Raster animation is also use to create animation for logos and banners based on photos ordrawings.Vector images are images that follow a particular format which allows them to keep thesame quality whatever happens to the image. This allows the possibility for a small image tobe expanded without worrying that the images quality will be lost.Vector images are stored as file types such as: EPS, AI and FLAEPS: EPS files are self-contained files that describe an image or drawing and can be placedwithin a postscript document. They preserve the description data of an image meaning thatthe quality will constantly be the best quality possible.
  9. 9. AI: AI is an Adobe Illustrator file. When saving a drawing, if it is AI it is usually means it isalways the original file. This file can only be opened with Adobe Illustrator.FLA: an FLA file is a file used in flash to save the elements of the flash itself, the editing, theeffects, the frames etc. This file only opens in flash and cannot open in the flash player.Vector imaging works by used lines, curves, pointsand shapes to help mathematically createrepresentations of images in computer graphics. Itrecords the points and shapes and paths etc tokeep an image the same. No loss of pixels orchange in shape. Because of this, vector imagingdoesn’t tend to work very well with colour or awide selection of them. Vector formats are verygood with bold text and shapes mostly and shouldnot be used for detailed 8 bit images or above as itdoes not work. These file formats are known as primitive objects, anything too complex outof the capabilities of mathematical equations within the vector format cannot be made intoa vector imageVector animation often allows cleaner, smoother animation, because images are displayedand/or resized using mathematical values instead of stored pixel values. One of the mostcommonly used vector animation programs is Macromedias Flash.Image optimising is a form of image compression used when trying to shorten the file size(and in turn the download time) of an image for maximum efficiency. Optimisation is usuallyused for websites which need to save as much loading time as possible for the bestbrowsing capability for visitors of their website. A person will on average wait around 7-12seconds for a webpage to load before leaving it. This means that the website needs to useas little time as possible for images on the website to load. So they must optimise theirimages in order to save loading time.Animation software and plugins – task 5Animation can be created with authoring software such as Amara, Swish and Director but needsplug-ins or players in order to run the animation, especially on a website.Authoring packagesSwish –Swish is an authoring package that uses flash technology to create interactive and cross- platform movies, animations, and presentations. The software incorporates flash animation into a simpler and less expensive tool that allows for less complicated building of animation. It includes general Flash creation features such as vector drawing, motion tweens, and symbol editing. It makes building certain Flash elements such as buttons, advanced transition effects, and interactive Flash sites
  10. 10. easier. It does not include some Adobe flash features such as the action script, shape tween andbitmap capabilities. The software uses SWF. File format, just as flash does, but files cannot beopened in the other program as the program cannot open or save .FLA files. Amara – Amara is commonly used for website animation and though it is not as powerful as flash it is one of the most affordable authoring packages. It can be used to create a wide variety of text and photo effects and other animations specifically for websites. It used a .SWF file format that can be used for any kind of website. It is alsocompatible with the .FLA file format making it compatible with Flash. HTML is not needed to createAmara animations and the user would not need any Flash experience in order to know how to usethe software. It is made up of separate applications that are used to carry out certain animationssuch as Banner and Photo animations. Director –Director is a multimedia application authoring platform. It is used mainly for entertainment, used to create 3D animation with the use of Shockwave 3D and multiple outputs as a platform. The software was originally created for online animation and so is easily incorporated into websites. It used Lingo scripting languageand supports Vector graphics.Players Flash player –Adobe flash player is used for displaying several multimedia applications on the internet. It is primarily used to view and play .SWF files online.it was primarily created to view 2D vector graphics but supports both vector and raster graphics, 3D graphics and action script. It also streams both audio and video online. Flash player is a very commonly used player for video sharing sites such as YouTubeand flash animation videos and is popularly used across the world with over 90% connection to allcomputers worldwide. Flash player is also available as a plug in for most web browsers. Googleintegrated the player into its browser distribution. Shockwave –shockwave is used to add animation and interactivity to webpages and though initially created for animation, it is mostly used online to display browser based games which require a very rich graphical environment. It supports 3D animation and is used to help display adobe director applications. The simulation ofreal-world physics or involving significant graphing, charting, or calculations can and sometimes useshockwave. It has a much faster rendering engine than flash but it has only connected to around52% of the world’s computers. It the most used multimedia player until Flash player. UnfortunatelyShockwave cannot be played on Linux or Solaris unless the correct program is installed to runwindows applications. Real player -Real Player is a cross‐platform media player. Real Player supports and plays a number of multimedia formats including MP3, MPEG‐4, QuickTime and Windows Media. It is primarily used to stream online videos and sound. Depending on what browser the user has real player can have multiple capabilities including CD burning, video and audio conversion, transferring files to the Ipod or Zune and videorecording.
  11. 11. Quicktime –originally created for Mac users but available on other computer systems, Quicktime is an extensible multimedia framework capable of handling various formats of digital video, picture, sound, panoramic images and interactivity. It is available for additional download when adding ITunes to your system and iscompletely free to use as all other popular players.