Unit 65 – Assignment 1

Task One: Investigate the uses of Web Animation

Banner Ads:This is the banner for the JD sports website. The banner animates as a slide show of four different screens, doing this allows them to express various different bits of advertisements but using less space. The banner slides back and forward depending upon which page or arrow the user clicks on, however it has an automatic setting which the banner

scrolls without the user clicking the arrows, but if the mouse is hovered over the banner it stays on the current one being shown. It is quite a brightly designed animation which suits its purpose as a fashion/clothing website for children up to young adults. It involves the audience by being an interactive banner as it allows the user to navigate through the four banners using the arrow buttons and the page numbers.

Animated Interface Elements:The Topman website contains a navigation row which contains animated interface elements. The menu is organized in different categories ranging from ‘Clothing’ to ‘Shoes’, which when hovered over with the mouse they activate a drop down menu with various links which are relevant to the category. For example, the drop down menu for clothing contains links to more specific clothing items such as T-Shirts, Jackets, etc. The colour scheme for the menu is very basic with just a black background and white writing however this sort of drop down menus doesn’t need to be over complicated as it may confuse the audience and make it harder for them to navigate around the site.

Kyle MckendrickPage 1

Linear and Interactive Animation:An example of linear animation is the intro to the Simpsons website, as soon as you open the web page an animation is activated, showing cut scenes of various characters as if the screen is a television then a blurred screen effect occurs which then fades into the main interactive menu. The intro animation gives you the option to skip it however you cannot pause or mute it. The idea of a linear animation as an

introduction to the site draws the reader in and grabs their attention before viewing the actual site. It’s a very bright animation which is expected from a cartoon program.

An example of interactive animation is also on the Simpsons website, after the linear intro there is a screen with buttons underneath which once clicked on they scroll to various booths which contain different information, one of the booths is a file cabinet with various letters of the alphabet which the user can navigate around to find the character they want to know information about, clicking on the letters activates a draw to open, then you can look through the different character files and when clicked on them a book is opened containing the character profile. The positives of this is that the user can interact with the site differently compared to just navigating through ordinary menus, this keeps the user busy and draws them into the site to make them want to navigate around more to see what else there is.

Promotion:

An example of promotion is the BMW website; they promote the cars using elements of flash with a ‘build your own BMW’ application which allows the user to choose the model of BMW they want and customize it to all the specifications they’d like (colour, leather interior, alloys, etc.) then it gives them a quote on how much this specific model would cost them. This is a successful way to promote BMW and its models to give the user an option to design their own car from scratch so that if they do go down the route of buying on of the cars everything is done specifically to what they want. Another positive of this application is that the user can

Kyle MckendrickPage 2

create various different variations of their BMW model and receive price quotes without the need of ringing up the company and having to keep explaining their specifications over and over again, it saves a lot of hassle and effort for the customer. However the downside is that the aesthetic side of the application is very basic and quite boring, maybe brighter colours may draw the customer’s attention a little more, however sometimes a very

simple design can be a more successful way to advertise.

Instruction:An example of interactive instructive animation is the Flash Synergy Learning application

which explains different stages of creating a flash animation, it allows the user to go at their own pace and whenever they are ready to go to the next stage they can click to do so, instead of a video instruction which would carry on playing and the user would have to keep replaying to get back to the stage they were on. Another good positive about this application is that it replicates the Flash software window and uses different areas as buttons as if the user was actually on Flash which

makes it more realistic. The only negative is that when they point out a tool or menu which you need to click on sometimes the arrow isn’t very visible as it is light blue which doesn’t really stand out compared to the colour of the screen, the image above shows the arrow pointing at the text tool, maybe if it was bigger or a brighter colour the arrows would be a lot more visible to the user.

Information:An example of information animation is again the Simpsons website; it shares various different elements information with us regarding the characters, episodes, air time of the program, etc. the site basically provides the audience with all the information they need to know regarding the cartoon series. The positives of the Simpsons website is that it is a highly

illustrative site splitting all large blocks of text up with images which is more inviting for the audience to read it, nobody would feel tempted to read the text if it was a long page full of

Kyle MckendrickPage 3

block text. A negative of the site is that the navigation system could be quite complex for somebody who isn’t experienced using computers, however for someone who is experienced it is a very unique site which looks good aesthetically. I think they present their information successfully, without letting the audience get bored with random bits of linear information hiding around the site, on the characters section

inbetween switching to file cabinates a linear animation is activated at random showing a character from the show.

Entertainment:Yet again, an example of entertainment animation is the Simpsons website, as it is a cartoon animation series of entertainment the website will be expected to be packed with entertainment which is done in all the random bits of linear animation around the site which are activated at random when navigating around the site. Also there is a section on the site which has recent episodes

available for the audience to access; this is a successful way for drawing in the audience as if they miss an episode on television they will automatically want to visit the website. The only negative to this is that less people will actually tune in on television as they can just watch it on demand when they visit the Simpsons website which would result in less TV viewing figures.

Kyle MckendrickPage 4

Task Two: Investigate the development of animation

Cel Animation:Cel animation is an animation technique where each frame is drawn by hand. The technique was the dominant form of animation in cinema until the invention of computer animation. This technique was developed massively over a long period of time. It all started in 15,000 – 13,000 BC when people painted Paleolithic Paintings on their cave walls, these were the first ever examples of images trying to capture motion. It wasn’t until 65 BC when Roman poet Lucretius

discovered the persistence of vision which is when the retina keeps an image for a short split-second after we actually see an image, it is related to animation by creating an illusion of motion when we see images in fast sequence to one another. We don’t notice the change of images because the persistence of vision fills in the gap between images to create the flow of motion.

After this various different techniques were invented with most of them being developments from the previous technique. Some of these techniques include the Phenakistoscope (1831), the Zoetrope (180 AD; 1834), the Flip book (1868), etc. It wasn’t until the 1990s when

computerized animation took over the cinematic industry which was a much faster and better quality technique in creating animation.

Flip Books:A flip book is a book with a series of images that each has minor changes to the previous drawing on each page, which then eventually the pages would be flipped rapidly to make the images appear to animate by simulating motion. Flip books were very popular with

children; however they can also target adults as novelty products showing humorous animation. Flip books are often used in magazines as a nice little extra, also there is such thing as a digital flip book which would basically be an animation of a book showing a sequence of images. The first ever flip book was invented in 1868 by John Barnes Linnet which at the time he named a kineograph. They are the first technique to employ a sequence of animation in a linear sequence rather than circular.

Animated Cartoons:An animated cartoon is a film which can be shown in the cinema, on the television, computers, etc. They all hold some sort of story and are created using various sequences of drawings. There were various attempts to create animated films and cartoons over the years in the late 1800s, however it wasn’t until 1914 when Gertie the Dinosaur was created by Winsor McCay, this was one of the very first successful animated cartoons. It wasn’t until 1926 until animation actually developed sound as well, My Old Kentucky Home was the first ever animation to use a soundtrack which was created by Max Fleischer. An animated cartoon is always a good idea for a website as it adds a little bit of entertainment compared to the ordinary text based site, an example of a site which uses animation is The Simpsons

Kyle MckendrickPage 5

website which I explained in task one, it introduces the site with a linear animation showing various characters. It may be a good idea to add some sort of animation as an intro to the website however it is hard to do this without over doing it or adding something completely irrelevant to the purpose of the site. As the website I am making is based on travelling around Australia it may be a good idea to use an animation of a kangaroo hopping across the screen greeting the audience to add a little humor. Some sites use random interactive animation to introduce their website, an example of this is the Warehouse Project site, it has a very basic design of images of doves that fade in with lights behind them, with a roll over button in the center of the page which when rolled over a standby button appears inside it for them to click on to navigate to the home page. It is completely irrelevant to a music gig however it does add a nice urban effect to the site.

Animation Process:

XHTML:The purposes of HTML documents are to create web pages and to write a coding language which servers and the internet can understand it in order to display as a working web page. HTML in short, is basically instructions for the different browsers to show specific content on a page. The only different between HTML and XHTML is that XHTML has a more strict coding allowance which means that if you make any mistakes with the coding then the page simply will not work. With HTML, there is more flexibility, which means that if you do make any mistakes, for example, if you forget to close a tag correctly then the web page will still probably work, whereas XHTML coding needs to be perfectly written. XHTML gives the feature of making sure that the coding is perfect and that the site is fully functional in order to be displayed on a web page, also it will allow the site to be much better in terms of search engine ranking.

DHTML:Dynamic HTML is an term for a collection of technologies combined together to create interactive and animated web sites, this is done by using a combination of different coding such as HTML, client-side scripting language and design and presentation coding (CSS). DHTML enables scripting languages to vary in a web page’s definition language, which affects the look and functions of page content; this is after the page has been loaded whilst the user is viewing it. The characteristic of DHTML is the way it functions whilst a page is viewed.

Graphics Interchange Format (GIF):The Graphics Interchange Format (GIF) is a bitmap image format that was founded in 1987 by CompuServe and ever since it has been the main format for images used on the World Wide Web, this is because of its wide support and portability. The format supports up to 8 bits per pixel which means it enables up 256 different colour shades to be available to a single image. These colours are chosen from the RGB colour space which is a 24-bit format. GIF images are most suitable for the World Wide Web as they cover most of the simple graphics such as logos, areas of solid colour (Website layout), etc. These graphics don’t need a massive range of colour as they aren’t built up of many colour shades; they are also a small file size which makes it suitable for the web as they will load fast for the user. GIF

Kyle MckendrickPage 6

format isn’t suitable for any colour photographs or high detailed images as they will require more colour shades in order to build the image without being pixelated.

Because of their small file sizes, GIF format was the first type of animated imagery to be used on the World Wide Web, however these animations were very basic and short, most of them were a loop animation. Another positive about GIF images is that you can have parts as transparent, for example if I had an circular graphic I could make the outer of the circle transparent so that once it is applied online the audience can only see the circular graphic and not the background from around the image. This is something which makes GIF images more suitable for the web as they are good to use for the design of a site, whilst if I was to be using JPEG images, there will be lots of different backgrounds of images around graphics which aren’t meant to be a square or rectangle anyway. Example below:

JPEG Image: GIF Image:

 

Java Applet:A Java applet is a plug in which is used on a web page to help operate animation, they are quite cross platform compatible which makes it unlike DHTML. 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 are mainly used to provide interactive features to web applications that cannot be done with HTML; they support many forms of animation. One thing that all Java applets have in common is that they create motion on screen by drawing frames at a high speed of around 10 – 20 frames per second to show a smoothly running animation. Java applets might be a good idea for my website as I will be displaying some kind of animation.

Kyle MckendrickPage 7

Task 3: Investigate animation techniques

Persistence of vision: ‘Persistence of Vision’ is when the retina keeps an image for a short split-second after we actually see an image, it is related to animation by creating an illusion of motion when we see images in fast sequence to one another. We don’t notice the change of images because the persistence of vision fills in the gap between images to create the flow of motion.

An example of ‘Persistence of vision’ is when we stare at a bright light for a couple of seconds, when we look away

we still see a bright blurred light image which is the retina keeping the image of the light.

Claymation and Stop motion:Stop –frame (Stop-motion) animation is an animation technique used to make objects appear as if they’re moving on their own. The object is moved in small measures between separate a photographed frame, which creates the illusion of movement when all of the frames are played as a flowing sequence.

Clay (Claymation) is one of the most common materials used for stop-frame animation as it is

very easily shaped and can be moved for next frames without complication, however sometimes when moving the clay after each photo there maybe finger prints or dents in which was caused by handling it.

Computer Generated:

A frame is the term for one of many photographic images that are played in an animation sequence. ‘Frame rate’ is the term for how fast the frames are being played, frame rate is mostly measured by how many frames played per second (FPS). You can change the speed of the frame rate to suit your animation but obviously a slow frame rate would expose the space between frames and a really fast frame rate would make it look as if the animation is in ‘fast forward’.

A key frame in animation and filmmaking is a drawing that defines the starting and ending points of any smooth transition. The drawings are called frames because their position in time is measured in frames on a strip of film or timeline. A sequence of keyframes defines which movement the viewer will see, whereas the position of the keyframes on the film,

Kyle MckendrickPage 8

video or animation defines the timing of the movement. Because only two or three keyframes over a second do not create the illusion of movement, the remaining frames are filled with gaps.

Onion skinning is a technique used in creating 2D animated cartoons and editing movies to see several frames at the same time. This way the animator can determine what they are going to do in the current frame based on the past few frames.

In traditional cartoon animation, the individual frames of a movie were drawn on thin onionskin paper over a light box; the animator would have various pages of onionskin

paper underneath each other viewing the other frames whilst editing the top one. This would eventually contribute to making a smooth motion.

Tweening is the process of generating frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the key frames which creates the illusion of motion. A Classic Tween is used to get a smooth motion out of a shape or character, the way it is used is so that there is two key frames spaced apart from each other and the first key from shows the shape on one side of the page whilst the other shows it in a different location around the page. The classic tween helps fill in the gap by creating a smooth movement; this is a really useful tool when creating basic animation or different parts of advanced animation.

A motion tween is a tween that can be used to create movement with a character, the creator can create a path where the character will walk or how they’re going to walk and when the motion tween is activated the character will move in the path it has been assigned.

Investigate Digital Animation:

Vector Animation:

Vector animation is animation that has been built up of different lines, shapes and polygons which effectively work as a mathematical formula. This is what makes vector images different from others as they aren’t built up of pixels like raster images, the fact that they are built up of this special formula allows it to be enlarged without the loss of quality or the event

Kyle MckendrickPage 9

of pixilation, it can be stretched and stretched and it will always appear to be the same. Vector animation is a good aspect to use on a website as you can stretch the size of it to fit whatever on the page, also it could be shown in a certain window size but have an enlarge button for the audience to choose to enlarge it.

Raster Animation:Raster animation is a type of animation that uses raster graphics which are built up of thousands of pixels which all hold different colours and shades to create the image, the amount of shades available is down to the bit depth of the imagery being used. The downside to raster animation is the fact that the more the screen is enlarged the more the animation will pixelate. This is why most animation used is a vector format however for smaller basic animation raster is probably

best to use due to smaller file size. The amount the animation pixelates is depending on the bit depth of the images used, the higher the bit depth the more colour space used, which means the less it will pixelate. The lower the bit depth, the more it will pixelate.

Compression:Fortunately files can be compressed to lower the storage size of it, however the higher the quality of the file the larger the file size is, so you could imagine that if I compress a file then I am going to lose some of the quality. Lossy compression is a data encoding method that compresses files by lowering the quality. A smaller file size is easier to handle with storage, sending, or even sharing over the internet. Some slower computers will take longer to display a file online if it has a large file size. There is a percentage as to what you compress the file down to, for example, if I didn’t want to lose too much of the quality but I wanted to shed a little bit of the file size I would only compress it by about 10%. It is up to the user as to how much the file is compressed.

Lossy compression is most commonly used to compress multimedia data (Audi, video and images), especially for displaying techniques such as streaming media and internet display. Lossless compression is data compression technique that allows the original data to be reconstructed from the compressed data. Lossless compression is used in many applications; one way in which it is used is in a ZIP file.

Low compression (84% less informationThan uncompressed PNG, 9.37 KB)

High compression (98% less information than uncompressed PNG, 1.14 KB)

Kyle Mckendrick Page 10

Scalability:Scalability is where files can be enlarged or contracted to suite a systems light or heavy loads, this is suitable for vector graphics as they can be enlarged because of their build-up of mathematical formula which enables it to be stretched without pixilation. Whilst it wouldn’t be as suitable for Raster graphics as in the event of them being enlarged, they pixelate and loose quality massively due to them being built up of pixels. An example of scalability is YouTube, on their video menus they give the user the option to enlarge to medium or full screen which then makes the video pixel depending on which option is selected.

File Formats:There are various different file formats which can be used for both vector and raster graphics, all of them enable different compression settings which makes them all different in file size. File formats can also determine what software the file should be used in; some of this software includes Adobe Photoshop and Adobe Flash. A file can be saved in various formats, if I was to be using Adobe Flash I would save the file as a ‘.FLA’ which is the main format for flash which allows me to open it and edit it once saved which is what I would do in the process of creating a project. I could also save it as a ‘.SWF’ file which is the shockwave version which would be the final version of the product that can’t be edited. The same would go for Photoshop, I could save a file as a ‘.PSD’ (Photoshop Document) which is an editable document, or I could save it as a ‘.PDF’ (Portable document format) which is the final version.

A ‘.GIF’ (Graphics Interchange Format) file format is used to create a small animation that consists of a sequence of different images which when combined together looks like a moving image.

Kyle Mckendrick Page 11

Kyle Mckendrick Page 12