Unit 65 – Uses and Principles of web animation

Banner adsMost of the time Banner ads take you to a completely different website, it takes up half the page and also the colours they use on the banner relate to the website. Another reason for a banner is to promote products they sell on the website it attracts people’s attention as soon as they look on the website. It says numbers one to four and they take you to different banners each one will be a different page. Another thing about banners is they keep the logo on the centre the reason they do this is to remind people what website there on.

Animated interface elementHere is a drop down menu; this will help you find what you need on the website for example if you needed trainers, on the drop down menu it would say ‘men’s trainers’ the reason the website use this is because it’s easier to find things. When you hover over ‘men’s’ it goes dark grey the reason they do this is to let the person browsing know what they’re about to look at. The reason Jd are making this so big is because they

don’t have to put loads of other things all over the website they can just have one big drop down menu then they can promote other things on the website.

Linear and interactive animation This is an animated picture, it goes from one slide up to three slides and it doesn’t stop playing so the slides keep changing from slide to slide, the reason they do this is to promote different things on the website, this is called a linear animation

and it is also interactive as they can be clicked onto go to the product on the banner slide.

Instruction

Instruction is quiet simple; all you have to do on a website is follow what they say as you can see on the imagine. You don’t really get these programs it’s mainly for people that need to learn the how to use the program, this is an interactive program because your actually doing it yourself but still following. Using this program is quiet easy it’s like having something on repeat instead of using videos.

Promotion

Information

Information on a website is basically telling you something you needed to know, as you can see by the imagine the JD Sport website is telling the people what they have on the website and also showing what brands they do. The reason they do this is because it’s a lot easier for the person using the website to find what they need and also it doesn’t take up a lot of space on the page if they didn’t do this things would be everywhere so it fills up the whole page but with this it’s like a hidden link and once you click it then it shows you all this.

Entertainment

The website youtube.com is entertainment because it provides millions of different videos of anything you want to watch. YouTube is very useful because you can catch up on TV programs, latest music, and just other important things, it’s not made just for random things, for example if you needed help fixing your phone someone on YouTube would upload a video showing how to do it. YouTube is also interactive because it lets you start and stop.

Task 2: Investigate The development of animationAnimated cartoons; an animated cartoon is a way of viewing a cartoon as a moving image so that you can see the characters of it in different situationsThey are mainly known for being TV shows which children watch and also there are channels devoted to showing them like Cartoon Network and Nickelodeon

dynamic hypertext mark-up language (dHTML); (Dynamic Hypertext Markup Language) is a programme that helps created small animations and dynamic menus on web pages. The DHTML code is made up of Html,CSS and Java script. On this program there is a limit so you can only have your speed at a certain limit.

extensible hypertext mark-up language (XHTML);

"Extensible Hypertext Mark-up Language." The evolution of HTML has essentially stopped. Instead, HTML is being replaced by a new language, called XHTML. XHTML is in many ways similar to HTML, but is designed to work with the new extensible Markup Language, or XML, that will soon serve as the core language for designing all sorts of new Web applications, in which XHTML will be only one of many "languages." But, XHTML is designed to work with these other language, so that different documents, in different languages, can be easily mixed together

Java appletsApplet is java program that can be fixed into HTML pages. Java applets run on the java enables web browsers such as Mozilla and internet explorer. Applet is designed to run remotely on the client browser, so there are some restrictions on it. Applet can't access system resources on the local computer. Applets are used to make the web site more dynamic and entertaining

Task 3: Investigate Animation Techniques

the optical illusion of motion (persistence of vision); Persistence of vision is like a trick on the eye because you see one thing, and then you look away and you can see it,

this is the basics of animation because there is so many techniques to show persistence of vision. A good example of this is the picture you can see in the right hand corner because you look at this for a certain amount of time and then look somewhere else and you can see this image for a certain amount of time.

Claymation;

stop motion; Stop-frame is the techniques used to make stop motion animations, this is done by taking pictures of your characters in the scene and then changing their positions slightly and taking another picture and repeating this until the sequence is completed. This technique is used in the animation world today, for example Wallace and grommet is put tighter using the stop frame technique.

computer generation (frame rate, frames, key frames, onion skinning, tweening)Frame rate is where separate images are put together to make like a one minute video of whatever you took. Once you’ve put this together its like a video clip but it’s the pictures you’ve took put together so it makes it looks like a short film. You can used different software for this and one of them is iMovie you can get this off iMacs

Task 4: Investigate Digital Animation

vector animationVector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon, which are all based on mathematical expressions, to represent images in computer graphics. "Vector", in this context, implies more than a straight line.

raster (bitmap) animation; In computer graphics, a raster graphics image, or bitmap, is a dot matrix data structure representing a generally rectangular grid of pixels, or points of colour, viewable via a monitor, paper, or other display medium. Raster images are stored in image files with varying.

compression (file size, download speeds);

Here is a lossy compression, as you can see the nest quality picture is 90 and the worst quality picture is 1 you can see a big difference between these images and as you can see the file size of ‘quality level: 1’ is only ‘923 bytes’ and the ‘quality level: 90’ file size is ’10,582 bytes’ so as you can see its much bigger and much clearer to look at. If you look carefully you can see ‘quality level: 50’ it’s still a bit fuzzy compare to the first image, not many people tend to use low quality images these days when images are took they are always took by professional cameras so you never really get low quality photos no more.

scalability; Scalability, simply, is about doing what you do in a bigger way. Scaling a web application is all about allowing more people to use your application. If you can’t figure out how to improve performance while scaling out, its okay. And as long as you can scale to handle larger number of users its ok to have multiple single points of failures as well.

file formats, e.g. .fla, .swf, .gif, .mng, .svg

Shock wave file is once you’ve done it on flash then you covert it to a ‘swf’ file. SWF files are often generated from standard Flash (.FLA) files. Once the Flash animation is complete, it is saved as a SWF, which saves all the data in a portable, compressed format. SWF files can be played within a Web browser that includes the Flash plug-in or using the standalone Flash Player.

Task 5

Flash

DirectorDirector is more of an animation platform for 3D Games, although originallybuilt for online animation. The scripting language used is ‘Lingo’, which may motivate some to use this application over others. It supports vector graphics and also 3D interactivity (via shockwave 3D).

Flash PlayerThe Adobe Flash Player is distributed by Macromedia, it is essential in order to run any .swf files in a web browser. The name ‘Player’ defines it allreally; it plays the files that are created by the authoring application. TheFlash Player was originally designed to display 2‐dimensional vector animations, but has also become popular for creating Rich Internet Applications and streaming audio and video.