Heather Lomas

Uses of Web Animation

Banner Ads

Banner ads are important when it comes to web animation as they are the first piece of information that a customer sees when they enter a website. By having a banner ad that is outstanding and tells you all the necessary information it then means you can navigate to where you want to go quickly and easily without hassle. In some banner ads many people advertise different products in which they are trying to sell but in others cases they could be selling something larger and more expensive than a t-shirt or a gadget. The website I have used to talk about is the BMW website. This is because it shows you a range of different cars across its banner throughout different slides. The animated banner is set up in a linear form letting you view all the cars and the information to go with them, I have shown this in the screen shot below. As you can see they have to represent each page a little dot within a line of other dots. These dots represent the pages so paying attention to which page is most applicable to u is important. By watching the banner as it continues through all the different cars, BMW are using this as a selling technique without having a video or just simple pictures that may annoy or distract the customer.

Information

Information is a lot like instruction. This is where a website is giving you information that you may find interesting and you may want to know before purchasing the item. In this case I went onto YouTube where the information displayed was beneath the video. By using YouTube I was able to give an example on information as it gives you the necessary parts that you need to know. For example YouTube tells you how many hits a video has had and also tells you when it was uploaded and how many people like and dislike the video. This information is needed for either the creator of the video or in other cases members of the public may want to know for studying a particular video.

Heather Lomas

Promotion

Promoting a website or other device is used on the internet every day. When it comes to promoting something it is important in everyday life. For example anything that is giving you information about a product is promoting a specific thing. Big websites such as Apple who are selling the iPhone ranges every day and other new gadgets they have brought out are a promoting website. They try to sell something every day by even entering the website you are instantly prompted with information about the new IPhone 5 in which they are selling. Promoting websites are also on other websites. They can include adverts and cookies to your computer so that once you have visited the website every other website you visit will come up with adverts down the side of your screen advertising Apple product. This is how a cookie works and Apple can promote their products further.

Entertainment

Entertainment websites are displayed online to entertain you as the used. Entertainment websites can include interactive websites and also games websites. For this point I went onto the Simpson’s website where the entire website is interactive meaning you can interact with it and be involved. The Simpson’s is keeping you entertained with all the different selections on the website and also offers you a clips section where you can keep up to date and watch your favourite clips from the Simpson’s series. The entire website is for your entertainment and with its bright and vibrant colours it is keeping the user interested at all times.

Linear and Interactive

Linear animation is when the animation continues without you being able to stop it. This can be any sort of animation. A linear animation doesn’t have any play, pause or skip options it is just a basic animation that you as the user have no control over. Below I have included a screen shot from the BMW website showing a linear animation that they have used before entering the site. As you can see there is a sky in which the clouds are moving. This is a linear animation as I am unable to stop or pause the animation but instead in just continues until I click away from the site. I think this linear animation is good as it gives you a calm feeling towards the site you are about to enter.

Heather Lomas

An interactive animation on the other hand is the opposite to a linear animation. An interactive animation lets you become more involved as if you are the main controller to the animation. This is used on many websites so that the user gets more involved with the website and it also intrigues the user/customer to stay longer. I have used the Simpsons website as an example of interactive animation in which you can interact with.

In the screen shot below I have shown that within the site there is a range of different places to go. When I clicked upon the icon to show me all the different characters it was then up to me which characters I wanted to view from the cabinet with all the characters initials on. As you can see I selected one and it opened the file right in front of me as if I was doing it. I could then view the characters information as I wished and repeat the process if I wished to see another.

Heather Lomas

Instruction

Instruction is when a website is telling you things that you need to do. This could be anything, from telling you how to fix something or even how to wash something instruction appears across the internet every day. I have used an example from Marks and Spencer’s website in which they are giving information on a product and how to wash it. I chose this as it gives a clear understanding on what instruction is about. By being able to read instructions on a website this is great for when needing help with something.

Animated Interface Elements

An animated interface element is something that you can control yourself. The way it works is you can control the element in which it is working. For example a website that has a range of different methods of viewing a photo can be an animated interface element. This can include the website Marks and Spencer’s have made. On the website they have included images of the products they have on sale. With this they show you different angles of the product with different pictures to represent each angle. I have shown this in the screen shot below. As you can see I have taken a screen print from the website I have chosen and shown you what I am referring too.

Heather Lomas

Development of Animation

Hand Drawn Animation

Hand drawn animation is used to create animations when computers and other animation technology were not around or as advanced. Hand drawn animation was used in the early Disney films such as Mickey Mouse as he started off hand drawn. Hand drawn animation is where a character is drawn on one piece of paper and then on many other pieces of paper or canvas the character is then doing something else, all of these are then put together through a computer and projected as an animation.

Flick Books

Flick books are another way of creating animation. Anyone can make a flick book animation. These are where you can find a simple pad of paper and draw a stick man or other sort of character on the back page. Then by drawing characters on other pages page by page you can then flick through the book and the character will animate through your vision.

Animated Cartoons

Animated cartoons are a way of viewing an animation with cartoons moving into different situaions. Animated cartoons are mainly used to entertain young audiences, these cartoons are usually viewed on children’s TV channels such as nickelodeon and Cbeebies. Cartoons can also be used in films. There are many films around even now where cartoons are being used as the main characters. The way they do this is they film the necessary parts with the real life characters and then afterwards super impose the cartoons into it to make it look like they are part of the film. This attracts many audiences even now.

Graphic Information File Format (gif)

This is a file format that can feature animation. A GIF file format can be used in adverts more than animation. GIFS are used rather a lot in advertising a product or a brand name within the animation.

Heather Lomas

A GIF only supports 256 colours within its colour pallet so this makes it easier on the colour scale but not everyone prefers this as when savings pictures as a GIF files they do not always get supported.

XHTML

HTML has another partner known as XHTML. These two are very similar in the way they work but XHTML is much pickier when it comes to the actual coding. HTML codes are simple and work at all times when the codes are typed correctly. XHTML on the other hand picks out all the problems and doesn't work until they are sorted. This is why most people prefer HTML as it works better with slight mistakes. Tags are the pieces you use on HTML. If you happen to miss closing a tag on HTML it is likely that HTML will close this tag for you and let it go. Whereas XHTML is much more stricter so it won’t let it go and it will ask for corrections. This is why many people just use HTML as it is easier and simple. XHTML is for the more advanced users in HTML who like a challenge. HTML features different documents. HTML is used to create web pages as we already know. HTML also is there as a language also for servers to understand and display on the internet. HTML is pretty much instructions for the servers to know which content they should display. XHTML means you can’t make mistakes.

Animation Techniques

Optical Illusion (Persistence of Vision)

Persistence of vision is commonly known as a way that the human eye continues to see an image for a fraction of a second after it has been removed from the screen or moved onto another image. Persistence of vision is used to create movies and television programs. For the human eye to remember an image that previously has appeared means that the film or video that they are watching becomes fluent and continuous. This is known as a phenomenon that lets us have the ability to create a still image into a continuous moving picture.

Persistence of vision is also a visual form of memory known as ‘Iconic Memory’. Like the picture I have added to this slide, this photo is meant to test your persistence of vision. It is said as a method to do this you should stare into the centre of the image directly on the white dots and stare at it for a number of seconds, usually around 10.

Once you’ve done that you should close your eyes and still be able to see the image. This is a prime example of Persistence of Vision. When it comes to using persistence of Vision within creating animation the frames in which the images are displayed are usually displayed in every two frames of recording. There are also cases such as when you stare at a shining light

Heather Lomas

bulb or the sun. When you view this you then look away and get a permanent blob or smudge across your vision.

Claymation

Claymation is animation used in a clay form. Clay is a very easy substance that can be moulded into anything that is needed. Claymation is an older form of animation that was used before computers and other video technologies came around. Claymation is most popular that I have seen in a series called Wallace and Gromit. Wallace and Gromit were created by Aardman animations who took Claymation to a whole new level. With only a small amount of episodes made overall they used Claymation to create a memorable set of characters and episodes that kept everyone entertained. As well as this Claymation has also been used to create films. Claymation is used in all sorts of media but not as popular these days as there are a lot more computer generated animations about meaning Claymation is decreasing since it takes so long to create and move claymation models.

Stop Motion

Stop Motion Animation is creating animation whilst stopping the frame to move the characters. This type of filming is used in such programs as Wallace and Gromit. To make an animation like this you have to take a sequences of photos or recordings where you set up your characters and objects into a position and then continuously take photos or record the sequences frame by frame as each object/character moves gradually creating an overall stop motion animation. If you have used a camera to record this sequence then when you go through the images at the end you can see how the pictures have created a sequence. Also you will be able to see this in a smoother way by watching it on your video camera. This is an advantage also as you can see how smooth your overall animation is and whether you need to improve the gradual movements. This technique of stop frame animation was used for some of the very first animated cartoons and other such animations that were used for advertising or even shows. Creating stop motion animation is a long and tricky process. It takes a lot of concentration and you have to be focused to pick up from where you left off. When it comes to actually putting a programme together it takes months to put together something that lasts only 30 minutes and when it comes to making a film it can take years.

Computer Generated (Frame Rate, Frames, Key Frames, Onion Skinning, Tweening)

Computer generated animation includes all of the above sections in different modes. All of these are included when creating an animation on the computer and below I am going to go into detail about each one.

Frame rates are used in Macromedia flash. Frame rates are used in the settings and when animating your creation frame rates are basically the speed it takes to view the animation. The average frame rate is around 24 frame rates per second, this leaves enough time on each frame to make the animation flow at a reasonable rate. The higher the frame rates the

Heather Lomas

animation becomes slower as each frame is viewed for longer. The less frame rates per second that you have means that the animation will be much faster and end quicker.

A key frame is used within a timeline to add in other piece of multimedia such as an image of a video. This can also be used to create buttons and other bits of multimedia that need to be included. When it comes to key frames you can use them to link key frames together so that if you want one page to go another it will do so.

Onion skinning is used to create an animation. Using a simple terms such as creating a ball to bounce around a screen using onion skinning comes into account as you can switch on onion skinning to show you the previous position in which the ball was previously. Onion skinning is used to create animation as it is a handy tool to create the perfect animation.

Tweening is used to create motions between key frames. By adding in a motion tween you are allowing the animation to all come together. By having key frames with all the necessary moves on you can then create a tween between each frame that will link them all together to make an animation.

Digital Animation

Vector Animation

Vector animations are created and made up of paths and nodes. These paths and nodes mean that no matter how much you choose to edit the animation by stretching it or resizing it, it will always stay in the same quality and focus. Vector animations are only used within certain programs. This is a vector image file format which is used based on a video file.

Raster (bitmap) Animation

Raster animation is animation that is made up of lots and lots of raster images. The way this works is that raster images are made out of thousands of pixels that hold all different colours and shades to create an image which can then be used in an animation. The only problem with raster animation is that if the animation is viewed in a screen that’s too large for the file, it will then stretch to fit the screen and pixelate.

Compression

There are two sorts of compression, lossy and lossless, both of these are important and below I have gone into detail about each one.

Heather Lomas

Lossy compression is when you get a high quality graphic that then begins losing quality every time you save the image. This is because when you open the graphic it begins to lose data as it compresses. Every time you save it into a smaller file size the graphic becomes more and more compressed. The data that’s lost is the pixels which are needed to keep the quality high. As the pixels reduce the graphic becomes poor and the remaining pixels because more obvious so the quality has been reduced.

Lossless Compression is when you compress a file without the data being lost. Unlike Lossy compression Lossless keeps all the necessary data that is needed when it comes to shrinking a file. When it comes to saving a file Lossless compression then compresses the file where it saves the data but keeps it and nothing is lost. Therefore the quality stays the same no matter what the size of the video is.

File Formats (.fla, .swf, .gif, .mng, .svg)

File formats are important when it comes to exporting a file. Some files have to have a specific format in order for the file to work when exported the file extensions above are short for, flash files, shockwave files, graphic interchange formats, multiple image network graphics and scalable vector graphics. Swf files are commonly used when exporting a presentation into a separate files and flash is used when an animation is created and exported in a viewable video file. Shockwave files are produced from flash and there is a wide majority of animations on the internet that are swf files behind the scenes.

Animation Software and Web Player Plug-ins

Flash

Flash is a program used for creating animation and products. Macromedia Flash as it is also known as is a program that we all use to create animations. Flash has a timeline built in where you can change all the different components within it and then also link them to other buttons and animations.

Director

Director is another way of creating animations. I have used director to create animations but in my opinion I found it very confusing. Director uses a timeline a bit like flash but it is harder to use and get everything into the right format. The problem with director is that you need to ensure everything you do is recorded on the timeline. To create a new page you need to mark it on the timeline. Everything you do is based on a timeline. Once you have completed this animation you can export it into any file format you want but the most popular such as ‘SWF’ is in the options bar.

Flash Player

Heather Lomas

Adobe Flash player is a piece of software just like the others above but in this case you can view the multimedia through it. Adobe flash player is a multimedia viewing program that most commonly runs SWF files that have been created in other Adobe multimedia makers. Adobe flash can be used on mobile phones and is always available as a default setting to run videos.

Shockwave

A shockwave player is needed for any animations that have been created in Director. As I stated above Director is a very fiddly piece of software so knowing that you need a shockwave player to view your overall creation is important. People who have shockwave player are able to view games in 3D and also view interactive videos.

Real Player

Real player is not as popular as the above players. Even though it is within these categories I have never really heard of it. From what I know Real Player is software where you can play recorded media. This can include sound files such as music or speech. It can also play other bits of recorded multimedia such as videos. Real player is compatible with other file extensions such as MP3 and Windows Media Player this means you can use the same files on each program.

Quick Time

Quick Time Multimedia player was created by Apple.inc, apple also created the range of IPods, IPhones and other devices. This is a well-known and trusted company that you know all their products will be acceptable. Quick time player was created to support all the different types of multimedia that is created in Apple software, for example, video, pictures, sound, and other types of software.