Unit 65 Leeanne Hibbert

Investigate the uses of web animation

Banner Ads

Banner ads are banners on any website which are advertising something in particular. Many banner ads will be advertising the latest deals or offers of their certain products on whatever website the banners also advertising. A website I come across which has a banner ad is the New Look clothes website http://www.new look.com/.

This screenshot above is the banner ad which is on the New Look website. This banner ad as you can see is advertising a £10 offer off shoes and dresses; if you were to click the ‘shop the offer’ then it would direct you to another page. This particular banner will still direct you to a page on the New Look website but other banner ads may even direct you to a complete different website depending entirely on what it is actually advertising, it could even be advertising a new website.

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/

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.

Info

Info

Info

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 its basically promoting all of the shows which are on the cbbc channel as you can play games or do activities on that particular site.

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 see I have pointed to all the promotions on this page just so you can see how much is actually being shown to you.

Unit 65 Leeanne Hibbert

Entertainment

A website which I have come across that is basically full of entertainment is http://www.youtube.com/ this is a website where you can watch or upload videos. These videos can be music videos; movie trailers; programmes or parts of films. This is also a very popular site and is used all around the world, so you can watch videos that are of anything even if the movie or music video 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 single ladies and it gave me a list of different videos of this. I clicked the official music video and now I can watch the whole of this video. Also on the right hand side it gives a list of other related videos so it may be more of Beyoncé’s music or just songs that came out around that time.

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 you

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 have 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.

Sea moves

Clouds move

Unit 65 Leeanne Hibbert

Instruction

Instructions on websites are when they help you do something step by step.

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.

Unit 65 Leeanne Hibbert

This screenshot is once you start of the instruction exercise, as you can see straight away it tells you what to do.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.com

The instructions

Clicking this will make the main show zoom so you can look closer at it

Unit 65 Leeanne Hibbert

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.

Clicking this will make the main shoe black

Unit 65 Leeanne Hibbert

The development of Animation

Task 2: Investigate The development of animation, such as hand drawn (cel) animation; flick books; animated cartoons; animation process, graphic information file format (gif); dynamic hypertext mark-up language (dHTML); extensible hypertext mark-up language (XHTML); Java applets

Hand Drawn animation – hand drawn animation is obviously animation that has been drawn by the human hand. This technique was the dominant form of animation in the cinema until computer animation came about.

Flip Books –A flip book is a book with a series of pictures that gradually move each time you flick a page, this then makes the pictures on that certain page look like they are actually moving. So an example of this say your series of pictures is a horse and each time you flick a page it looks like the horse is galloping, this is a form of hand drawn animation. The first ever flip book appeared in September, 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 were once a common price in Cracker Jack and cereal boxes

Animated 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 short and 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 bitmap image format what was introduced by ‘CompuServe’ in the year of 1987. Since 1987 it has become very popular and used throughout the World Wide Web due to its portability and support. The GIF format supports up to 8 bits per pixel meaning it allows a single image to reference a palette of 256 distinct colours each time, these colours are chosen from the 24-bit RGB colour space. GIF also supports animations and allows a separate palette of 256 colours for each frame.

Dynamic hypertext mark-up language (dHTML) – Dynamic hypertext mark – up language also known as ‘dHTML’ is a term meaning a collection of technologies that are to used together to create animated and interactive websites, by using mark up language , one example of this is HTML. DHTML allows scripting languages to change variable in a web pages definition language. This then effects the look and function of static HTML page content after the page is fully loaded and during the viewing of the page. So there for the ‘dynamic characteristic’ of DHTML is the way it functions whilst the page is being viewed.

Unit 65 Leeanne Hibbert

Animation Techniques

In this task five I am going to be explaining what the different techniques of animation are. I will explain 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 to look like its moving due to the ‘cognitive’ effects of shape position and colour contrasts. Apparent Motion is the most common type of illusory motion and it formed when images are displayed in success 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 motion animation. Every single animated piece either background or character is ‘deformable’ meaning it is made of malleable substance, usually always plasticine clay. Basically all traditional animation is produced in a similar way whether done by stop motion or cel animation. Each still picture or frame is 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 to make a physical object appear to move on its own. The object is moved in small amounts between individually photographed frames, which are then creating the illusion of movement when the series of frames is played continuous. Dolls or clay figures are mostly used in stop motion as it is easier to reposition them. Stop motion animation using plasticine is called clay animation or ‘Claymation’ as I have previously said above. Not all stop motion has figures or models, as many stop motion films can actually involve using humans, house appliances and other things for effect.

Computer generation (frame rate, frames, key frames, onion skinning, tweening) - There are five more important things about computer generation that is highly needed these are listed above so I am going to explain them each in more detail.

Unit 65 Leeanne Hibbert

Frame rate - Also known as frame frequency is the rate at which an imaging device produces unique constant 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 frames per 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 and ending points of any smooth transition. These drawings are known as ‘frames’ because there position in time is measured in frames on a strip of film. A sequence of key frames show the precisely that the viewer will see, where as the position on the key frames on the video, film or animation shows precisely the timing of the movement. This is because only two or three keyframes over 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 and editing movies to see many frames at once. This meant that this way the editor or animator can make decisions on how to change or create another image based on the previous image in that particular sequence. In traditional cartoon animation the individual frames of a movie were first drawn on thin onion skin paper over a light source. The animators would put the previous and then next drawings perfectly beneath the working drawing so that they could draw the ‘in – between’ to give a smooth motion.

Tweening – Tweening which is shot for in-betweening is the process of generating frames between two 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 date animation software enables you to identify specific objects in an image and precisely show how they should change and move during the tweening process.

Unit 65 Leeanne Hibbert

Digital Animation

In this task I will be investigating all of the different types of digital animation. I will be explaining the more 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, .svg

Vector Animation – Vector Animation is a term that is used to refer to animation where motion or art is controlled by vectors rather than pixels. Vector animation allows cleaner and smoother animation simply because images are displayed or resized (if needed) by using mathematical values instead 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 images similar to shapes or photos. Although there are both advantages and disadvantages of using raster based animation. Raster based animation frames are made up of individual pixels; these pixels each contain information about both the colour and brightness of that exact spot on the image. This is similar to pointillism in painting, with the sum of points making up the totality of the frame or picture.

Compression – Image compression may be either lossy or lossless. Lossless compression is used for more archival purposes and often for medical imaging, technical drawings, comics and clip art. This is because the lossy compression methods especially when used at low bit rates introduce ‘compression artifacts’. Whereas Lossy methods are used for more natural images such as photographs 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 of work in a capable way. For example it can refer to the capability of a certain system to increase the total under an increased load when resources (usually hardware) are added.

Unit 65 Leeanne Hibbert

File Formats- File formats are standard ways where in which information is encoded for storage in a computer file. A file format specifies how bits are used to encode information in a digital storage place. File formats can either be published or opened and may be either free or proprietary. Here below 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 you create a flash file in the flash programme you create a new FLA file. This file contains all the elements which make up the finished product, including the graphics, action script code, animation instructions and comments etc. An FLA file does not play or execute so you have to export it to a SWF file, which is what end users see.

SWF – The SWF file format is an adobe flash file format used for multimedia, action script and vector graphics. Currently SWF is the most dominant format for displaying animated vector graphics on the web. It is also used for programmes and is also common for browser games using action script. The term SWF did originally stand for ‘Shock wave file’, but then changed to ‘small web format ‘to stop confusion 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 to 256 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 public graphics file format for animated images. MNG is closely related to PNG image format. When PNG fist started in early 1995 the developers decided not to incorporate support for animation because the majority of PNG developers felt that it was over loading this single file type with both animation and still is a bad design. So then MNG started as an animation support version of PNG. This was released on 31st January 2001.

SVG – The SVG file also referred to as scalable vector graphics is the family of an XML – based file format for two dimensional vector graphics. All popular modern web browsers such as Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera, and have at least some support for SVG . SVG file formats can be searched, scripted, indexed, and if need be compressed. SVG files can also be edited and created in any text editor, although it is easier to create them in drawing programmes like ‘inkscape’.

Unit 65 Leeanne Hibbert

Web Animation Software

In this task I am going to be investigating all of most popular web animation software. I will then explain 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, QuickTime

Flash – 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 flash animations 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 and drawings. Flash contains an ‘object-orientated language’ which is called ‘action script’ and this supports automation meaning via the java script language.

Flash content is displayed on most computer devices and systems, if you are using Adobe flash player, this also doesn’t cost a penny for common web browsers, some mobile phones (not all) and some other electrical devices.

Swish – The programme swish is a flash creation tool that is used to create interactive and cross platform animations, movies and presentations. It is developed by ‘swishzone.com’ and it is based in Sydney Australia. Swish outputs to the SWF format which is under control at the moment by adobe systems.

Swish is basically known to be a much simpler and less costly flash creation tool comparison with adobe 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 motion tweens, vector drawings and symbol editing. Swish also has a number of effects and transitions which makes building certain graphics like buttons, advanced transition effects and interactive flash sites a lot simpler.

Unit 65 Leeanne Hibbert

Amara - Amara is software which allows you to create web animations for a website. It is actually rather easy to use people find, plus this software saves your creations as SWF file format meaning that once your creation has been saved it can be used in any website without having to use any special HTML coding. You don’t even have to have any HTML knowledge to be able to create an animation 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 flash format.

Director – Director also known as ‘adobe director’ is a multimedia programme that is created by macromedia, now part of adobe systems. Director was originally designed for creating animation sequences and also uses both 2D and 3D multimedia projects.

Director has quite a powerful script language and this is named ‘Lingo’, this allows interaction with external files and some windows API’s that has been used to create graphical user interfaces and create applications. Director can export projects for embedding using the ‘shockwave’ plug in, these files have a DCR file extension.

Players – Certain software programmes allow you to listen to music or watch certain films and programmes, there are quite a few of these. I am going to explain five of the most popular used players below.

Flash Player – Flash player also known as ‘adobe flash player’ is software for viewing

multimedia and RIA applications plus streaming video and audio. You will find flash player on a web browser or some mobile phone devices. Flash player runs

SWF files that can be created by the ‘adobe flash’ authoring tool plus a number of macromedia third party tools.

Shockwave – Shockwave player also known as ‘adobe shockwave player’ is Again software programme for viewing multimedia playback. The shockwave player allows you to view interactive web content such as web presentations, games, entertainment and advertisements from your browser.

Unit 65 Leeanne Hibbert

Real player – Real player is a ‘cross platform’ software which is software simply made so that you can play or record. The first version of real player was introduced to the public in April 1995 as ‘real audio player’ this was also one of the first media players that were actually capable of streaming things over the internet.

QuickTime – Quick time is an ‘apple’ software player, again it is a powerful multimedia technology which has a built in media player. Quick time lets you view HD movie trailers, Internet video and personal media in a wide range of file formats. You can also watch them all in remarkable high quality.