Web Animation in Interactive Media

Web Animation Article

Welcome back to another enthralling, thrilling, and just generally amazing blog post.

Now, unlike the other 2 blogs, this one wont be wrote during the NFL playoffs, so hopefully, it will have a much more positive demeanor, I digress.

Within this article I will be explaining the key characteristics of web animation technology through ‘detailed’ illustrative, relevant examples and clearly explaining the differences between, for example, banner ads and animated interfaces.

I will also be doing a bit of jargon busting, or explaining some field specific lexis, if you did one year of English Language.

Uses of Web Animation

This isn't actually an advert, just a joke

Now this is a pretty simple question “Where can I find web animation?”, at one point in your life, you must have seen a pop up ad or a banner ad which claims that if you ‘shoot 5 iPod, you win an iPad. Like, right now, go to a questionable website and sit there for 5 seconds and prepare to be bombarded.

Another obvious use of web animation and where to find it, other than advertising (sometimes the advertising is legitimate, honestly), is on flash portals or flash game sites such as Newgrounds or Armor Games.

Here you can find flash games & movies, some of these games are also Java Applets (embedded Java), as Java can be more powerful than Flash.

So we have covered entertainment and advertisement, but there must be more, right?

Well yes, general user interaction, such a the GUI (General User Interface) which allows to navigate a website more smoothly and flow better is a very popular feature of websites these days. For example, the navigation buttons (how you get between pages) could be animated, IE; When you hover over the page name “home” it could change shape into a house. It’s basic stuff like this that can make it a better experience for the user.

What is animation and how do you create animation?

Here is a timeline complied by Animation History Expert Joshua Mosley, this covers the major pinnacles and turning points of Animation.

1824:

Peter Roget presented his paper 'The persistence of vision with regard to moving objects' to the British Royal Society.

1831:

Dr. Joseph Antoine Plateau (a Belgian scientist) and Dr. Simon Rittrer constructed a machine called a phenakitstoscope. This machine produced an illusion of movement by allowing a viewer to gaze at a rotating disk containing small windows; behind the windows was another disk containing a sequence of images. When the disks were rotated at the correct speed, the synchronization of the windows with the images created an animated effect.

1872:

Eadweard Muybridge started his photographic gathering of animals in motion.

1889:

Thomas Edison announced his creation of the kinetoscope which projected a 50ft length of film in approximately 13 seconds.

1892:

Emile Renynaud, combining his earlier invention of the praxinoscope with a projector, opens the Theatre Optique in the Musee Grevin. It displays an animation of images painted on long strips of celluloid.

1910:

Emile Cohl makes En Route the first paper cutout animation. This technique saves time by not having to redraw each new cell, only reposition the paper.

1919:

Pat Sullivan created an American cartoon "Felix the Cat."

1926:

The first feature-length animated film called "El Apostol" is created in Argentina.

1923:

Walt and Roy Disney found Disney Brothers Cartoon Studio.

1923:

Walt Disney extended Max Fleischer's technique of combining live action with cartoon characters in the film "Alice's Wonderland".

1928:

Walt Disney created the first cartoon with synchronized sound called "Steam Boat Willy".

1982:

Tron, MAGI, movie with CG premise

1988:

Willow uses morphing in live action film

1993:

Jurassic Park use of CG for realistic living creatures

1995:

Toy Story first full-length 3D CG feature film

Platforms of Digital Animation

Flash me.

Ahar there, use me to get flash Confucius say.

No, seriously, Adobe Flash (Or Macromedia Flash 8 as i'm still running) is probably the most popular, and accessible (not cheapest, accessible) means of making flash, due to it's rather simplistic nature, and it's ability to be the complete opposite and allowing you to code a physics engine, or something like that! 
All it takes is a creative mind, ability to use frames, a bit of tweening and generally, the ability to draw something.

A frame is simply a still image, frankly, if you think of it as a flip book, a frame is the single piece of paper.
As you can see from this picture, layer 1 (no need to explain here, a layer is literally a collection of frames) contains 20 keyframes, containing a person, probably moving, running at 20 frames per seconds.


But what does all this mean?
So let's break it down.
Every one of these frames contains the image of the person, but every frame the image will be changing, possibly moving the leg or the arm, and if this carried on for 20 frames running at 20 frames per second, you would have a one second loop of a person running, simple.


This couples with the idea of 'Persistence of Vision', in which the brains interpretation of physical motion makes an image being replayed at a high enough speed, creates fluid and smooth movement between an image.


Jargon Busting
Here is a little glossary of Animation terms you make come across in your travels;
Frame Rate ;- Frame Rate or FPS is the rate (speed) of which frames are progressing along a timeline, television you watch is at 25 FPS, the defacto frame rate for animation is 24
Frames ;- A frame (singular) is a still image, and frames are a series of still images, played at a certain FPS to create the illusion of motion
Tweening ;- Tweening, or inbetweening, is the process of the computer generating intermediate frames between two set images, again creating the illusion of motion.
Flash ;- Flash is the program used for creating .swf animations, you can find examples of these everywhere as previously mentioned. Flash is ALSO a plugin for your computer allowing you to watch .swf files on the internet.

Bender Bending Rodriguez, a popular cell shaded character (my favorite robot, ever)

Cell ;- Cel-shaded animation (also known as Cel shading or Toon shading) is a type of rendering designed to make computer graphics appear to be hand-drawn.
Stop Motion ;- Stop motion is pretty much taking a picture, as a frame, then another picture with slight adjustments, and so on and so forth.
Claymation ;- Exactly the same as stop motion, but the 'actors' are all made of clay.
Conclusion


To conclude! As we can see, we use flash in our daily internet lives, whether it's in the form of a .gif you find on a questionable website, or just watching your favorite music video on YouTube, we need flash.
You don't have to be a great drawer, and you don't have to be smart to create something that millions of people can watch (whether they like it or not is a completely different story).