Ben HendersonInvestigate the uses of web animation unit 65Banner adsBanner adverts are animated gifs that are used to prom...
Ben HendersonLinear and interactive animationsLinear animation is where the animation takes you from start to finish witho...
Ben HendersonEntertainmentWeb animations are usually used by companies or websites solely to attract the viewer’s attentio...
Ben HendersonJava AppletsJava applets are small programs used on web pages to help operate animation. Unlike DHTML javaapp...
Ben HendersonRaster (bitmap) animationRaster (Bitmap) animation is another type of digital animation.Rasteranimation forma...
Upcoming SlideShare
Loading in...5
×

Investigate the uses of web animation

343

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
343
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Investigate the uses of web animation

  1. 1. Ben HendersonInvestigate the uses of web animation unit 65Banner adsBanner adverts are animated gifs that are used to promote and advertise a product. They are usedto attract the viewers’ attention by moving, changing colour, changing images, and making sound sothe viewer of the site will see and be drawn to the banner advert and click on it to learn more about the product/service. They are located on most websites, usually at the sides or along the top of the web page. They are located on most websites and especially popular websites such as social networking sites, eBay, and amazonetc. An example of a banner ad is on the image it is located on the left side of the page and has moving text and images. An advantage of a banner advert is that it is an easyway to grab a viewers attenetion. Although a disadvantage is that viewers of websites usuallyassociate banner ads with unfriendly, virusous sites that could a harm their computer. Animated interface elements Animated interface elements are animated websites or videos thatare completely animated and are usually created in a program such as flash. Animated interface elementsoften uselinear animation and interactive animation or both.www.thesimpsons.comis an example of a completely animated website created almost entirely in flash. An advantage of animated interface elements is that they grab the audience’s attention, and are entertaining to watch more than a simple web page. A disadvantage is that they can take a considerable amount of time to load.
  2. 2. Ben HendersonLinear and interactive animationsLinear animation is where the animation takes you from start to finish without stopping like aregular film, whereas an interactive animation is in stages and the viewer can choose what canhappen. One of the best examples of this iswww.thesimpsons.com. This is because when the website has loaded up it goes into a linear animation showing a short little cartoon to set the theme of the website, which in this case is a careers day at a school. Then it uses interactive animation, in the form of buttons that can direct the web user to various parts of the website that they want. When the user clicks a button it goes into a different linear animation, transporting the user to a different page by showing them via the animation moving into a different room at the school. An advantage of linear animation is that they can be entertaining to watch, but a disadvantage is that you can’t control it. An advantage of interactive animation is that youcan control what happens, but an disadvantage is that they tend to run for a long time, and stopstart.PromotionWeb animations are also used to help promote, products or websites. They often placed on manypopular websites such as Facebook, twitter, amazon, etc.InstructionInstructional animations are used to help people learn, by showing them what to do and explaining how to do it in the animation usually using interactivity. An example here is how to use Macromedia Flash professional 8. The animation takes you through the software showing you what buttons to press and what they do. It is interactive because the animation actually allows you to click the buttons and type sentences into the animation.InformationInformational animations are used to portray information in a user friendly interactive style. This canvary from formal information like what might be used on internet news shows, or informalinformation like what size clothes are on a shopping website.
  3. 3. Ben HendersonEntertainmentWeb animations are usually used by companies or websites solely to attract the viewer’s attention.But websites often use animations for the purpose of entertainment. Websites such aswww.thesimpsons.comare used to entertain the website viewer, raise awareness of the show, andto sell merchandise.It is no a serious, formal websiteInvestigate the development of animationFlick booksFlick books are hand drawn images on a page in a book. Each page is like a frame in animationsoftware. Each image is slightly altered and moved on every page to create the illusion of movementthe pages of the book are flicked through.Animation using DHTMLUsing DHTML isn’t as popular as using the likes of flash for animation but has been largelyrecognised in the past. DHTML or Dynamic Hypertext Mark-up Language can help with the creationof animations and dynamic menus on web pages. The DHTML code is made up of HTML, CSS andJava Script. As versatile as it is in earlier platforms, users running Windows 95 or Windows 98 wontget the smooth animation you hope they would. Even by trying to increase the speed, there is still alimit on how fast you can allow your animation to go with DHTML and therefore how smooth it willplay. Therefore, it is not very cross-platform compatible. However, DHTML animation well workfairly well on all platforms if it is carrying out simple animation such as transitional effects, dropdown menus, wipe effects and other animations with a small duration. Animation using DHTML is aneasy way of making a site interactive for the user without the need of a lot of code and testing.Animation using XHTMLXHTML or Extensible Hypertext Mark-up Language.XHTML is a spinoff of the hypertext mark-uplanguage (HTML) used for creating Web pages. It is based on the HTML 4.0 syntax, but has beenmodified to follow the guidelines of XML, the Extensible Mark-up Language. Therefore, XHTML 1.0 issometimes referred to as HTML 5.0.Because XHTML is "extensible," Web developers can create their own objects and tags for each Webpage they build. This gives the developers more control over the appearance and organization oftheir Web pages. The only requirement is that the custom tags and attributes are defined in adocument type definition (DTD) that is referenced by the XHTML page.
  4. 4. Ben HendersonJava AppletsJava applets are small programs used on web pages to help operate animation. Unlike DHTML javaapplets are quite cross platform compatible. This is because Java interpreters are not available on allplatforms and don’t always agree about what they consider to be proper code. Java applets primarilyare used to provide interactive features to web applications that cannot be provided by HTML, theycreate motion on screen by drawing successive frames at a high speed of around 10 – 20 times persecond.Investigate Animation TechniquesThe optical illusion of motion (persistence of vision)Persistence of vision is where the eye can see an afterimage for a fraction of a second longer thannormal creating the illusion of movement, although if the frame rates (the rate in which frames areplayed) is slower than 10-12 rates you would be able to see each image individually, which wouldmake the animation look jumpy and unprofessional.Stop motionStop motion animation is where you create the illusion of motion, movement of an object by takinga vast series of photographs. These are then usually transferred to a computer program and given aframe rate of 10-12 frames per second (fps) although this can vary. At this speed, when the photosare played one after another together creates the illusion of movement. If the frame rate is anyslower the animation would look unappealing and unprofessional, because it would look like theanimation is “jumping” from frame to frame.ClaymationClay animation or Claymation is a form of stop motion animation. Usually the character or thebackground or both are made of clay. The clay character is sculpted then placed where it needs tobe. Then you take a photograph of the clay character, move it slightly, and take another picture etc.until the animator gets the desired effect.Investigate Digital AnimationVector animationVector animation is a type of digital animation. These vector animations are created on a computerprogram such as flash because this is a vector animation program. Vector animation has thecapability to have cleaner, smoother animations. This is because the images or frames are displayedand can be resized using mathematical values, instead of stored pixel values, like raster (bitmap).The files are a lot smaller as well because the animation program doesn’t have to save the colour ofevery pixel unlike raster images.
  5. 5. Ben HendersonRaster (bitmap) animationRaster (Bitmap) animation is another type of digital animation.Rasteranimation formats stores pixeldata and has to save information about the colour of every pixel in the image. This can take up a lotof memory so the file size is larger and can take a longer time to load. Also if you have to resize animage or frame, the pixels stretch and the image becomes blurry.Investigate Web Animation Software and web playerpluginsFlash and DirectorFlash and Director both use layers and timelines to create animations. Also both programs are vectorbased so animation can load quicker. They both use key frames and tweens to animate between thekey frames. Also they both can export files into a shockwave file, which can be embedded onto mostwebsites.

×