Ben Henderson

Investigate the uses of web animation unit 65

Banner ads

Banner adverts are animated gifs that are used to promote and advertise a product. They are used to attract the viewers’ attention by moving, changing colour, changing images, and making sound so the 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 amazon etc.

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 easy way to grab a viewers attenetion. Although a disadvantage is that viewers of websites usually associate banner ads with unfriendly, virusous sites that could a harm their computer.

Animated interface elements Animated interface elements are animated websites or videos that are completely animated and are usually created in a program such as flash. Animated interface elements often use linear animation and interactive animation or both. www.thesimpsons.com is 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.

Ben Henderson

Linear and interactive animationsLinear animation is where the animation takes you from start to finish without stopping like a regular film, whereas an interactive animation is in stages and the viewer can choose what can happen. One of the best examples of this is www.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 you

can control what happens, but an disadvantage is that they tend to run for a long time, and stop start.

PromotionWeb animations are also used to help promote, products or websites. They often placed on many popular websites such as Facebook, twitter, amazon, etc.

Instruction Instructional 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 can vary from formal information like what might be used on internet news shows, or informal information like what size clothes are on a shopping website.

EntertainmentWeb animations are usually used by companies or websites solely to attract the

Ben Henderson

viewer’s attention. But websites often use animations for the purpose of entertainment. Websites such as www.thesimpsons.com are used to entertain the website viewer, raise awareness of the show, and to sell merchandise. It is no a serious, formal website

Investigate the development of animation

Flick booksFlick books are hand drawn images on a page in a book. Each page is like a frame in animation software. Each image is slightly altered and moved on every page to create the illusion of movement the 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 largely recognised in the past. DHTML or Dynamic Hypertext Mark-up Language can help with the creation of animations and dynamic menus on web pages. The DHTML code is made up of HTML, CSS and Java Script. As versatile as it is in earlier platforms, users running Windows 95 or Windows 98 won't get the smooth animation you hope they would. Even by trying to increase the speed, there is still a limit on how fast you can allow your animation to go with DHTML and therefore how smooth it will play. Therefore, it is not very cross-platform compatible. However, DHTML animation well work fairly well on all platforms if it is carrying out simple animation such as transitional effects, drop down menus, wipe effects and other animations with a small duration. Animation using DHTML is an easy 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-up language (HTML) used for creating Web pages. It is based on the HTML 4.0 syntax, but has been modified to follow the guidelines of XML, the Extensible Mark-up Language. Therefore, XHTML 1.0 is sometimes referred to as HTML 5.0.Because XHTML is "extensible," Web developers can create their own objects and tags for each Web page they build. This gives the developers more control over the appearance and organization of their Web pages. The only requirement is that the custom tags and attributes are defined in a document type definition (DTD) that is referenced by the XHTML page.

Java AppletsJava applets are small programs used on web pages to help operate animation. Unlike DHTML java applets are quite cross platform compatible. This is because Java interpreters are not available on all platforms and don’t always agree about what they consider to be proper code. Java applets primarily

Ben Henderson

are used to provide interactive features to web applications that cannot be provided by HTML, they create motion on screen by drawing successive frames at a high speed of around 10 – 20 times per second.

Investigate Animation Techniques

The 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 than normal creating the illusion of movement, although if the frame rates (the rate in which frames are played) is slower than 10-12 rates you would be able to see each image individually, which would make the animation look jumpy and unprofessional.

Stop motionStop motion animation is where you create the illusion of motion, movement of an object by taking a vast series of photographs. These are then usually transferred to a computer program and given a frame rate of 10-12 frames per second (fps) although this can vary. At this speed, when the photos are played one after another together creates the illusion of movement. If the frame rate is any slower the animation would look unappealing and unprofessional, because it would look like the animation is “jumping” from frame to frame.

ClaymationClay animation or Claymation is a form of stop motion animation. Usually the character or the background or both are made of clay. The clay character is sculpted then placed where it needs to be. 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 Animation

Vector animationVector animation is a type of digital animation. These vector animations are created on a computer program such as flash because this is a vector animation program. Vector animation has the capability to have cleaner, smoother animations. This is because the images or frames are displayed and 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 of every pixel unlike raster images.

Raster (bitmap) animationRaster (Bitmap) animation is another type of digital animation. Raster animation formats stores pixel data and has to save information about the colour of every pixel in the image. This can take up a lot of memory so the file size is larger and can take a longer time to load. Also if you have to resize an image or frame, the pixels stretch and the image becomes blurry.

Ben Henderson

Investigate Web Animation Software and web player plugins

Flash and DirectorFlash and Director both use layers and timelines to create animations. Also both programs are vector based so animation can load quicker. They both use key frames and tweens to animate between the key frames. Also they both can export files into a shockwave file, which can be embedded onto most websites.