Introduction – Web Animation
This is a short presentation about Web Animation. I’m going to briefly cover the history of animation, different animation types and the different softwares you can use.
The Uses of Animation
We’ve all seen animated adverts on sites, they pop up everywhere. It’s a really effective way of getting a viewers attention, especially if everything on that page is particularly static or still, it stands out really well.
It’s also an effective way of getting as much in that box as possible, as these types of ads tend to alternate between texts to give you more information.
Brief History of Animation – Pt.1
Even though this isn’t animation per-se, its the first example of an attempt to capture movement and motion. This was made in the Paleolithic era nearly 2.6 million ago. The real animation came with this Phenakistoscope, created by Joseph Plateau in 1832.
Brief History of Animation – Pt.2
This is where animation starts to become more familiar to ones we know today. Though these two animations look very different and were made nearly 60 years apart from each-other, they both rely on the exact same principles; repeated drawings layered onto static backgrounds. This was the only way to create animation until the advent of computer art/animation in the 60’s.
Brief History of Animation – Pt.3
If you think about it, every single animation up to this point, nearly one and a half centuries of animation had been 2D, so imagine the impact that 3D had on the animation industry. This piece here is called The Adventures of André and Wally B, and was one of the first 3D animated films ever produced. It was created by a company called The Graphics Group, who would later rebrand themselves as Pixar.
This other image is a still from a short film also from Pixar called Piper, which I personally think is the most beautifully rendered animation yet. This is 30 years of technological progress you can see here.
The computer age didn’t leave 2D animation behind in the slightest. This last image is of Adobe Flash, one of many different programs you can use to create digital 2D animation.
The Science of Animation
All animation, whatever the format or medium relies on frames, and it’s only because of this mechanism in our brain that we are able to experience these seemingly fluid movements. The higher the frames-per-second of course the more fluid the movement looks. Here you can see what a Phenakistoscope looks like when it’s spinning, and when seen through it’s view port.
A frametate is the one thing that has been consistent throughout the entire history of animation.
The Uses of Web Animation – Entertainment
Animation since it’s conception has been used for entertainment, and it’s only been broadened with the internet. Here you can see a page from an animated comic. Like the animated adverts we discussed earlier, animation and movement catches your attention and can really emphasise certain things. This makes it perfect for use in comics and graphic novels.
The one on the right here is an example of an interactive graphic novel. Like the last it has animated elements, but this one allows of the viewer to interact directly with the elements on the page, clicking buttons and dragging objects using animation and effects.
The Uses of Web Animation – Advertisements
If graphic narratives can be interactive, so can adverts. Interactive ads, when moused over, allow the viewer to play a “mini game” of sorts, something normally related to the product. An example of this is this advert for World of Tanks, that allows the viewer to choose an ammo type and a package for a tank.
The icons light up when you mouse over them like you’d expect normally. What ends up happening of course when you select an icon it takes you to the World of Tanks website.
The Uses of Web Animation – Interface Elements
Animation with interfaces is everywhere, and chances are most of the time you don’t even notice it. There is a saying, and it goes “If a UI designer does their job well, its like they’ve done nothing at all” This is the same for UI animation. It’s normally really subtle, like a slight shadow or change of colour when you mouse over an icon, or the way that a dropdown menu animates.
All these little things provide that little bit of extra information and help the viewer understand the UI easier.
Nearly all animated adverts you’ll see on the internet will be Gifs, because they can be loaded quickly, provided they are compressed appropriately. Most interactive adverts use .FLA, which is from Adobe Flash, and requires a Flash-player installed on the machine to view.
Web Animation Software
These different softwares each serve different purposes and for different formats, but they each enable an animation of sorts for the web. Flash, as we’ve discussed is the most common format for creating animated and interactive graphics.
Quicktime is able to provide something called Quicktime VR, which allows the viewing of panoramic photography in the browser, letting the viewer to interactively pan around an image.
Realplayer, though somewhat obsolete and outmoded, has similar capabilities to Flash and Quicktime and is still used. Realplayer allows the playback of videos from websites, and was used by the BBC until recently, though most sites now favour either Flash or HTML5 for video.