ANIMATION

One of the most interesting component of multimedia components is animation. An unfortunate irony is that animation is a lot easier to enjoy as a passive spectator than it is to create. For many newcomers to web page creation, there's never been a reason to consider learning how to create animation until now. For others, even experienced animators, the web is new territory with different rules, standards, terminology, and tools to understand. The maturing web of today is actually bustling with animation choices - from how to make the content to what tools to use to what delivery methods and file formats to choose from. The web has introduced many new concepts to us, and adding animation to web pages introduces more. Animation, by nature, relies on displaying multiple images. Each image takes its own amount of time to download. This poses a major challenge to animation developers and authors that extends beyond the normal complexities of animation creation and delivery in other mediums. There used to be a much wider disparity between browsers - those that supported certain tags and features over those that didn't. One good thing to say about competition is that the major browsers of today (Netscape Navigator, Microsoft Internet Explorer) support animated GIFs, JavaScript, Java, plug-ins.

Animation File Types
Animated GIF

File Type Binary
Transparency Yes
Maximum number of colors 256
Loses Quality during compressing No
View Any graphics viewer/editor on your system that supports animated GIF
Create/Edit Any animated GIF editor, or graphics package like CorePhoto-Paint.
Web browser support Yes, if browser has built-in animated GIF viewer

Animated GIFs, or for the more technically-inclined, GIF89a's, have been in existence since the late 1980s. The common characteristics of this format you can find in the table on the right. The great news is that all the major web browsers have recently flocked to support the spec, making it possible to include these types of files in web pages without worry of excluding any potential end viewers. The GIF89a file format allows for multiple images to be stored inside a single GIF document. See example of animated GIF.

When displayed within browser software that recognizes the multiple images, the artwork streams in to the web page in a predetermined sequence, creating a slide-show style animation. The file format supports looping (the capability to repeat multiple images indefinitely) and timing delays between frames of artwork. GIFs also support limited masking, meaning that animation's can use the same type of transparency supported by static GIF images. Animated GIFs require no plug-ins and no programming, and don't even require a live web connection, making them perfect for Intranets and testing locally on your machine. Animated GIFs are simple to make, easy to include in HTML, and effortless for your web-viewing audience to see. They are one of the most elegant solutions to web animation and lack only in that they cannot include interactivity or sound.
Do the Assignment 1.8: Animated GIF creation and Assignment 1.9: Inserting Animated GIF to HTML

JavaScript Animation

File Type ASCII
Transparency Yes, if frames are GIF images, No, if frames are JPEG images
Maximum number of colors 256, if frames are GIF images, 16 Millions colors, if frames are JPEG images
View Web browser, which supports JavaScript
Create/Edit Any text compiler
Web browser support Yes, if browser supports JavaScript

JavaScript is a programming language that allows you to add some interactivity to your web pages. The common characteristics of this format you can find in the table on the right. Many people confuse JavaScript with the programming language known as Java. There is no relationship between these two programming languages. JavaScript is a very basic programming language and bears no relationship to the sophisticated and complex language of Java. JavaScript was created by Netscape specifically to expand user interactivity capabilities to web pages and HTML coding.

JavaScript is embedded in HTML pages. Its HTML tags are the "script" tags.
There are many uses of JavaScript. See example of JavaScript with some interactivity.

Java Animation

File Type Binary .class file
Transparency Yes
Maximum number of colors 16 Millions
Loses Quality during compression No, if frames are GIF images, Yes, if frames are JPEG images
View Applet viewer or web browser, which supports Java
Create/Edit Any Java compiler
Web browser support Yes, if browser supports Java

Java has quickly became one of the most renowned programming languages of our time. The common characteristics of this format you can find in the table on the right. People who would have never before considered learning a programming language are clamoring around Java's allure in unprecedented numbers. What's all the hype about, and is Java a good animation delivery medium?

Java's potential benefits are almost as revolutionary as the web itself. Java creates mini-executable-programs (called applets) that promise to be platform independent, compact enough to travel over phone wires, and able to expand on anyone's system regardless of OS, make, or model. Another great thing about Java is the popular big three browsers (Netscape, Microsoft Internet Explorer, and Mosaic) support Java without requiring a plug-in. This, in theory, gives Java high marks for accessibility and compatibility. I know many people who complain that their browsers still choke on Java, so my suspicion is that we'll be waiting a little longer before the hype matches the reality.

Regardless, a lot of people and companies are investing heavily in Java, which assures me that the bugs will eventually get ironed out. Java using allows to create animation with control and sound. With Java you can create frames directly in program, don't need to download it all.
See example of Java Animation.

Macromedia Shockwave / Director

File Type Binary
Transparency Yes
Maximum number of colors 16 Millions
Loses Quality during compression No
View Web browser with Macromedia Shockwave plug-in
Create/Edit Macromedia Director
Web browser support Yes, if browser has Macromedia Shockwave plug-in

Macromedia Director was a popular multimedia authoring system long before the web existed. It boasts a user base of more than 200,000, making it one of the successful interactive authoring tools in history. The common characteristics of this format you can find in the table on the right. Making Director projects interactive involves learning its proprietary scripting language called Lingo. With Lingo, you can make interactive web presentations that include animation, rollovers, and streaming sound. A post-processing tool called Afterburner is incorporated into Director 5.0 or you can free to download it.

Shockwave is the plug-in required to view Director projects on the web. A drawback of this product is that it's hard to create files that are truly compact enough for web delivery. Most end viewers will have to up their ram allocation for browsers to look at most Shockwave content.

Additionally, Lingo has a steep learning curve that is a bit too high for the simple tasks one might want to program for web-based animation delivery. It is a case of existing technology being retrofitted to the web, and the fit is a little tight still. This product is great for people who are already up-to-speed on Director but is a little too difficult and powerful for those who are not. Still, Director allows you to add features to web content that few other tools or solutions can match.

Technical Tips: How to Create Animated .GIFs?
Animated GIFs are created using miscellaneous redactors made for this purpose (see downloads topic in this lesson). Usually animated GIFs are made from a sequence of images. This sequence can be created using standard image editor. To connect the images and get resulting animated GIF special purpose animated gif creator must be used. In addition animated GIF editor allows you to set animation speed for all frames and for each frame individually. Also it has optimize picture feature - it removes unchanging image parts Optimization greatly reduces animated GIF file sizes.

Technical Tips: How to Create Java Animation?
Java is the Internet programming language. Java programs is compiled into applets, which execute in a web browser window (if browser supports Java.) Using Java you can implement animation algorithms like with any other programming language. The animation with Java is very flexible and powerful. All three mentioned Java animation methods in combination provide excellent design as well as interactive educational environment. Of course Java animation includes learning this language and general programming experience.

Technical Tips: How to Create Macromedia Shockwave Animation?
When creating animation - choose the right technology. If animation is very simple - use animated GIFs. If there is a need for more elaborate animation - use Java. In this case upload the picture and downloaded Java program to your web site, edit html file. All other work Java will do itself, depending on the implemented algorithm. All pictures you need also can be generated using Java. Java animation can be enriched with sound, video and other interactive effects. In other case if you need a lot of preprogrammed animation algorithms, sound and special effects, use Macromedia Shockwave. This is very powerful tool to create animation.

Conclusions
Now you know, how to make educational content dynamic. Depending on task and technical possibilities you can choose one or other animation technology like animated GIFs, JavaScript, Java. Following section is about sound. You'll learn how to create and use sound, how to make lessons speak audibly.