Unit 65 – Assignment 1

Uses and Principles of Web Animation

In reference to web animation, there are many different uses of web animation as a whole. It’s used in almost every single web page available to browse. It covers basic elements on a web page such as banner ads, animated interface elements, instructions, information, entertainment and linear and interactive animations.

Banner Ads:

A banner ad is a common form of advertisement. It’s a large form of advertisement on a website that stretches across the top or down the side of the page. It usually contains a link to the advertiser's website. It is intended to attract potential customers to the owner’s web page through moving images, flashing colours etc. Banner ads are usually more useful than other types of web advertisement that aren’t animated because they include moving elements which are used to gain the attention of the user browsing the page. In addition, these ads are normally inspired by previous web browsing the user has made in the past, because of ‘cookies’ that were made and left on the computer. I personally believe that banner ads are very useful because attract the users attention which’ll cause them to have possible interest in the ad and eventually end up clicking on it.

In the example above, the dresses were motioning upwards showcasing other dresses and in the banner on the left, the dresses were doing the same motion just in an opposite direction. This is effective because of the moving elements; it’ll gain the web users attention.

Animated Interface Elements:

Animated elements exist on web pages to allow the user more options and make the interface more appealing to interact with. They cover elements of icons, buttons, rollover ads and many similar things. An example of how it’s used is when roll over adverts are included into web page. These ads will change colour or rollover certain buttons when the user’s cursor is hovering over the button. By using animated interface elements, the users experience is a

much better one because of the professional impression the web page gives off to them. Personally, by using these elements I think it’ll help leave a good impression in the end user’s mind, therefore allowing them to spread word about the websites good and professional interface, which helps bring attention to the web page, which is essentially what the web page owners want.

In this example, once the cursor hovers over one of the TV series, an enlarging transition occurs and a brief explanation of the show appears, where the user is in the series and buttons to allow the user to rate the show quickly. There is also a slideshow of shots from the episode the user is watching. Not only is this very appealing and allows for a smooth interface for the user, but it has quick button options for the user, so they don’t have to do much to access certain things.

Linear and Interactive Animations

Linear animation is a form of animation where by static picture frames are put into place one after another. The animation illusion is created once all these static images have been played in a viewer programme of some sort in a linear motion. It requires no interactivity from anyone. Interactive animation is an animation that is produced by a computer programme in real time and involves user input to allow to function. The two elements combined mixes both the dynamic and static elements together to create a unique looking animation. These animations do not focus on the advertising element, but they focus on conveying information to the end user. They achieve their purpose of conveying information successfully, because they use very unique elements to create an animation which will be easily remembered by the end user due to its uniqueness. It’s a different way of receiving information on the end users point of view, and it will increase the chance of them remembering the information. Most of these animations are quite unusual and vibrant to help attract attention firstly, to engage the end reader which in turn increases the chance of the user remembering the info.

The example above is a Google Doodle. It is referencing to the Perseid Meteor Shower of 2014. The animation includes a static picture as the background, constellations representing the word ‘Google’ and the animated element comes from a meteor which passes through the animation from the top left hand corner. To convey information about this shower, you must click the play button and if the user wants to know even more information, the static background is clickable and searches the web form more information on the topic. This is a very distinctive way of sharing information and the user will defiantly remember the information.

Promotion

Promotional ads are very straight forward. They are ads created by a business or organisations to create awareness about price cuts, new products/services etc. They are solely to promote and create awareness about something in the business. These can be can be normal picture ads, however most of the time they are animated videos, created on a computer programme. These can be implemented onto web pages, and can also be televised and put onto video platforms like YouTube because of its video format. They are very useful in the sense that another unique way of promoting new ideas and products that the business is creating. Also because they are sometimes televised, it reaches a large amount of people therefore increasing the awareness being created for the business product/service, idea and or price cuts. I believe it’s a useful way of creating awareness because of the large audience its reaches.

This example is promotional ad showcasing a new loan service offered by an organisation called Amigo Loans. They use Claymation in their promotional ad to showcase their new service. This is unique and is bound to create awareness because of how different it is and because of the vast amount of people that’ll see it.

Instruction

Instructional animations are solely made to help solve problems or teach the end user on how to do a certain task. This can range from animations on showing how to cook or showing how to fix a broken phone. They can relate to practically anything. These animations are normally linear because they don’t require a huge amount of input to be made. They are short and straight forward. They have simple colours and visual effects to help teach the end user and aid their viewing pleasure. I believe these animations are useful because of how straight forward they are. They easily help the end user reach solutions for their required tasks.

The example above shows how to craft a paper aeroplane. It shows each step in an animated format. For example, the first image is an animation of the paper folding into two. This is successful in achieving its purpose because it’s fairly straight forward and shows the end user briefly how to complete this step.

Information

These animations include facts that are used in order to convey on information and knowledge to the end user. It is intended to point out important information or to help the user remember the information my making it stand out. Unlike linear and interactive animations, theses animations do not include any user interactivity. It’s simply just an animation that is looped over and over again. I believe that this is not the best way to simply convey information. This is because they are normally very short and won’t be able to convey an amount of information that is sufficient to allow the end user to take it in. Most people will find it annoying at the fact that it’s too short or hasn’t got enough info and therefore may not even pay attention to the animation.

Entertainment

These type of animations are created to amuse, entertain and hold the interest of their audience. All these animations sometimes have different types of animations combined to create a pleasurable piece. By combining different forms, they create something that’s visually pleasing for an audience and will grab the attention of all viewers. Because of this, most animations have morale messages to tell because on top of their sole idea of entertaining an audience, they want to try and bring awareness to something, or teach a good lesson. A majority of entertainment animations are for children, hence why there would be Morales embedded within the animation.

The above is an example of a children’s animated television programme. It uses clay and uses the animation technique of Claymation.

History of Animation

Animation is the method of creating an illusion of motion and the illusion of change through the quick succession of images that include very minimal changes within them. Over the years, there has been many different improvements to help make animation process to be smoother, and look even more fluid.

Hand Drawn

This type of animation technique refers to drawings drawn by an individual in which the individual draws hand drawn images frame by frame. Normally these type of animations were used to convey stories of some sort or deliver a specific message to a desired audience. This method of animation was used by the majority until computer animation was discovered and perfected upon. Although this is such an old method of animation, it’s still used because it allows the animator to have an essential mock-up of the end product. It acts as a plan for the end piece.

The above example shows multiple sketches of Peter Pan. Within these sketches, Peter’s facial expressions and body movements change ever so slightly. However because these sketches will be played in quick succession, it will create the illusion that Peter is actually moving.

Flip Book

A flip book is a book with a series of pictures that vary gradually from one page to the next, so that when the pages are turned rapidly, the pictures appear to animate by simulating motion or some other change. Flip books are often illustrated books for children, but may also be geared towards adults and employ a series of photographs rather than drawings. They are useful in making animations look unique as each picture is hand drawn and a lot of effort is put into each picture frame. It’s an alternative to using digital animations

The above is an example of a simple flip book. The contents of the book include a man falling. By the reader flipping the pages rapidly, it creates the illusion of motion.

Animated Cartoon

This type of animation in similar to flip book animation. The main difference is the factor that pictures are interchanged at a faster rate than being flicked between in the flip book animation. These animations are mostly used for entertainment, and are aimed at children.

The above is an animated cartoon for children. It is an animation on pigeons where they have to find another lost pigeon.

Animation Process

This is the method of creating the animation. It begins with each frame of the animation being drawn out with slight changes within them, to achieve to illusion of motion and movement. The animator may use some techniques such as tweening, to make the animation look smoother as it’s played through. This type of animating is widely used now as most animators use digital software’s to produce their animation.

The above is an example of how frame by frame the contents in the frame change ever so slightly per frame.

Graphic Information File Format (GIF)

GIFs are a lossless format for different types of images that support both animated and static images. Similar to the previous animation types, they involve a rapid switch between different frames. GIFs are mainly used to entertain the end receiver because of its heavy usage in internet jokes. In addition to that, they can be complex and carry messages, add short animations to a webpage, used in sprites in software programmes and are sometimes used in instructional animations.

GIF LINK https://giphy.com/gifs/drooling-Zk9mW5OmXTz9e

The above example is from the tv show ‘The Simpsons’ where one of the characters is drooling. The GIF itself Is quite humorous and conveys no exact message. It’s strictly for entertainment.

Dynamic Hypertext Markup Language (dHTML)

DHTML is a mixture of Web development technologies used to create new and innovative websites. Web pages can include animation, dynamic menus and other interactive elements.

Extensible Hypertext Markup Language (XHTML)

This is very similar to dHTML. It mirrors or versions of the widely used Hypertext Markup Language (HTML), the language in which Web pages are formulated.

Java Applets

An applet is a programme written using java and performed in HTML in an internet browser. They are used to add small and interactive elements to a web page. They are an essentially a programming language for the web which is accessible anywhere. It adds this uniqueness to the web page, therefore resulting in end users enjoying their experience on the page.

The above image is of an applet in which the user has conveyed the message ‘hello, world’ through the programming of the applet

Animation

Optical Illusion of Motion (Persistence of Vision)

Optical illusions are images that confuse people. Various properties of the image are changed to make the images deceive our brains to our brains, such as colour and light. The most common form of optical illusions is where it appears the image is moving whereas really its completely static. Optical illusions are used for many different things, from entertainment to scientific studies of the human brain.

The above is a simple example of n=an optical illusion where it looks as if parts of the image are rotating.

Claymation

Claymation is a form of producing video media using clay models with the help of stop motion. This method of animation was heavily used before the advancement and further understanding animation itself. Now it’s not used as much because its seen as ‘a thing of the past’ meaning its quite old. Regardless of how old it is, Claymation as a whole is very unique compared to the other types of animation,

The above example is a snapshot from tv show ‘Wallace and Gromit’. This show is famous for its use of Claymation.

Stop Motion

Stop Motion involves taking images of each frame to create the illusion that the image is moving. This is how Claymation is made.

This is an example of stop motion.

Computer Generation (Frame Rates, Frames, Key Frames, Onion Skinning, Tweening)

Frame Rates

The speed in which a frame is displayed.

Frames

A single point of an animation.

Key Frames

An area within a timeline that states where the beginning and/or the ending of a transitioning frame.

Onion Skinning:

A tool to help see and edit a numerous amount of frames at the same time.

Tweening:

The transition of two images in a frame to merge smoothly into one image.#

Digital Animation

• Vector Animation

This specific type of animation consists of vectors, instead of pixels. Vectors allow for a much smoother animation, as the picture can be shifted into a various amount of sizes without losing its quality. They usually are viewed in a much lower quality; however, it will be a smooth animation in the end.

These type of animations are basically the opposite of vector animations, as they store and display images, but the animation would be rough and dull in a higher quality than vector animations. Bitmaps are seen as the most basic way of storing and displaying images/animations.

Compression is reducing the actual amount of space a file can consume. This ultimately is crucial for larger files, as it takes them a greater amount of time to load or download from another device.

Download speed: The speed at which data travels from the user’s device to the internet. There are two types of compression, which are: Lossy Compression, which is the class of data coding techniques that use inaccurate approximations and partial data being disposed of to represent the content. These methods are used to reduce data size for storage, handling, and transmitting content. However, Lossless Compression is when the file by not storing repeated data.

When it comes to compression it should be noted that abstracting an exorbitant amount of data from a file, utilizing either compression method, will result in the file no longer working.

Scalability

This is the ability to handle the increasing processes and the possible chance of adapting to the work. When relating scalability to animations, this will concern both the scaling of the file and also increase the file’s frames and layers.

A file format is the standard set for storing data of a file. These come in a wide range for a multitude of purposes. For example, the .pdf format is used for text documents whilst .png is used for images.

FLA:

FLA file formats are the document format for Flash projects.

SWF:

SWF is a file extension for a Shockwave Flash file format. They contain video and vector based animations and sound and are designed for efficient delivery over the web.

MNG:

MNG is a graphics file format for animated images. Its specification is publicly documented and there are free software reference implementations available. In addition, it is closely related to the PNG image format.

SVG:

SVG file formats are an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

Web Animation Software

• Authoring (eg. Flash, Swish)

Authoring when regarding animation, is the process of composing a courseware, web page, or a multimedia application (presentation) with text, sound, still and video pictures, and animation.

Flash:

This is a multimedia software platform used for the production of animations, desktop applications, mobile applications and mobile games.

Swish:

Swish is a program that is used to create Flash animations without using Macromedia’s Flash product. Swish includes tools for creating lines, rectangles, ellipses, curves and motion paths. Once the animation is created, it is exported into the SWF format used by Flash so that it can be viewed by anyone who has Flash Player.

• Players (eg. Flash Player, Shockwave)

Players are initial software which allows the users of a website to view video and audio file without the need to download them.

Flash Player:

Adobe Flash Player is a software for using content created on the Adobe Flash platform, including viewing multimedia and streaming video. Flash Player can run from a web browser as a browser plug-in.

Shockwave:

This is a multimedia platform for building interactive multimedia applications and video games. Most content can be viewed in a web browser on any computer with the Shockwave Player plug-in installed.