Warning: include(/opt/awn/public_html/mag/banner/mag/java.head.txt): failed to open stream: No such file or directory in /home/awncom5/public_html/mag/issue4.05/4.05pages/calthropflash.php3 on line 12

Warning: include(): Failed opening '/opt/awn/public_html/mag/banner/mag/java.head.txt' for inclusion (include_path='.:/opt/cpanel/ea-php72/root/usr/share/pear') in /home/awncom5/public_html/mag/issue4.05/4.05pages/calthropflash.php3 on line 12

ANIMATION WORLD MAGAZINE - ISSUE 4.5 - AUGUST 1999

How to Animate the Web

by Tom Calthrop

In order to view the images in this article you need to download Flash Player . Follow the three easy steps to install the correct plugin for your system.

Animating on the Web is easy, unlike animating. It's important to realise that animation is a skill-set, whereas the Web is a medium on which you can publish. Although this may appear obvious, it does reveal the reason why Web-based animations have exploded over the past year. Unlike other mediums, the Web is a very inexpensive way to present your work and with a possible audience of 160 million you can propel your ideas onto the screens of the masses. Once more, you control the entire process and don't have to be a computer scientist.

This article will get you on your way to Web animation. It assumes you can animate, have a computer and a connection to the Internet but nothing more.

Catching the Lingo
First some buzzword busting. (Feel free to skip this paragraph if you are familiar with FTP.) The Web is not the Internet. These two are often thought of as the same thing, but they are very different. The Internet is the largest wide area network in the world and the Web, or world wide Web (www), is one of several services that run on the Internet (email and news groups being other examples). Users, or people as they are rarely called, once connected to the Internet launch a browser and look at pages of information on the Web. It's here that they will see your hours of labour. Go and have a look at www.shockrave.com and click the cartoons area where you can see Dilbert, South Park and Peanuts. All these examples are made using a piece of software called Macromedia Flash. This software exports an SWF file (ShockWave Flash) and an HTML (HyperText Markup Language) file for you. SWF is a vector based format which can be played back using a browser with a plug-in (an extension to a browser). The SWF file is inserted into an HTML page. Luckily Flash writes the HTML page for you so you don't have to worry about it. Easy so far, right? The slightly more tricky bit is getting your files onto the Web. You can transfer your files from a local computer to the Web using FTP software (File Transfer Protocol). For the Mac you have software such as Fetch and for the PC, WSftp Pro, both of which are available from the Web (www.shareware.com). You will need your FTP settings for your Web site. If you do not know these, then go to your service provider's home page and check out their help section. This will now allow you to transfer your animations to your Web space.

It's Flash or Bust
The authoring software choice for animation is a simple one. It's called Macromedia Flash (you can download a demo at www.macromedia.com) and the current version, as of August 1999, is V4.0. Flash is currently used for all sorts of Web sites, thus it has tools within it that you will not need at this stage (and may never need). If you are launching it for the first time work your way through Lessons 1 to 8 (from intro to animation). Just follow them and try at this stage not to argue with them by using traditional animation knowledge. The reason for this is simple. Flash uses a combination of a timeline and movie clips. The timeline is simply frame over time as with TV (although TV uses 30 frames per second and Flash's default is 12). Movie clips are clips that play regardless of the timeline. We will look at this in depth later.

For now it's worth looking at how you get your drawings on the screen. Flash has a set of vector based drawing tools which allow you to draw directly on the stage, but learning to draw on screen for a traditional animator can be a large step. The easiest way to make that jump is to buy a tablet (www.wacom.com) which is like a drawing board, but plugged into your computer. The key is that Wacom tablets have a transparent area under which you can slide paper drawings to trace. You then simply draw over them with the electronic pen and your work is in Flash. If you draw in Adobe Illustrator or Macromedia Freehand you can import your drawings directly into Flash.

Once your drawings are within Flash you are ready to animate. If you have followed the Flash tutorials you will have by now experienced many of these features.

Making Pictures Move
To move a drawing of a bird from point A to point B, we first need to make the bird into a movie clip. Highlight the bird and press F8, call it "bird" and click the "movie clip" radio button. Press OK and the bird will now be in your library of movie clips. Place the bird at the starting point on frame one. Further up the timeline, insert a second frame and move the bird to the end point. Return to the first frame and right click (option click on a Mac), then select "Properties," from the dropdown menu. You will see a window with a set of tabs along the top. Select "Tweening." Next select "Motion," from the tweening dropdown menu and press OK. Notice that the timeline is now coloured between the two frames. This indicates that Flash will tween between the two frames. Press ENTER and you will see the bird glide from frame one to your end frame. As you can see the computer does a lot of the hard work for you. There are two issues with this. First, the bird is flying in a straight line and second, it's gliding which not all birds do.

A motion guide can be applied to a tween. In other words, you can draw a line of any shape and make the bird fly around the shape. Where you see "Layer 1," in the timeline, right click and you will see an option called, "Add motion path." On the stage draw a curve. Making sure you're on frame 1, move the bird to be above and snap to the line. Go to the second keyframe and do the same. Press ENTER again and the bird will follow the curve, but is still gliding.

The bird is a movie clip and these are self contained movies themselves. You can edit them and animate them separately. Highlight the bird, and from the edit menu select "Edit selected." This takes you to the library, where all the movie clips are kept. In here you have a second timeline and your bird on frame 1. Enter a keyframe on frame 5 and redraw your bird but with a change to the wings to give the impression of wing movement. Select "Edit movie" from the edit menu to return to the movie. Pressing enter again does not activate the movie clip. To see it we have to preview the movie. Press CTRL ENTER (Apple + ENTER for Macs) and Flash will build the movie for you to preview. Now you will see an animated bird flying gracefully along a curve. For those of you slightly disappointed, the gracefully part comes with practice.

Lastly return to Flash and press F12; Flash will create your SWF file, create your HTML and show you your movie in a browser. Hey, presto! Copy the SWF file and the HTML file up to your Web site and you're on your way to basic animation.

Getting Tricky With It
Why basic? Well, the Web is a truly interactive environment. If you want to put a portfolio of work on the Web to attract employers from more traditional sectors, then great, but if you want to master Web animation you need to think about interaction. This can be very simple, such as the introduction of a game into the story line or for those of you who really want to put things to the test, can be a set of parallel story lines that the viewer can jump around. So, what am I talking about? Start with the scenario that you are animating a story that involved Kenny from South Park dying. For television, you would write for that format ("Kill Kenny, kill Kenny!"), but on the Web you can ask your audience if they want Kenny dead. "Yes or no?" Whatever the answer is leads toward a different conclusion -- Kenny dies or Kenny lives -- and hence, an interactive story line is born. A good formula will allow many people to visit your site and come away with differing conclusions.

Interaction obviously needs to be considered right from the starting point. However, once in Flash you can control what the characters (or anything for that matter) does at any time. Returning to our bird, we can create a button that makes the bird glide at any time or start to flap its wings again. In order to do this you need to read Chapter 10 of the Flash manual, "Creating interactive movies." However, I would not suggest you do this before you get to grips with the basics of Flash.

Flash takes a little practice before you can really produce animations of which you're proud. Always look around the Web for animations that other people have done. Have a look at www.macromedia.com/support/flash for help and regular articles on using Flash and, most importantly, tell people what you're up to. One thing that I can honestly say from my experience is that Web animations are fun to play with and create. Trust me; a little practice and a good idea is all it takes.

Tom Calthrop is Managing Director of London-based smudge.

Note: Readers may contact any Animation World Magazine contributor by sending an e-mail to editor@awn.com.