|
||
|
Vol. 1, No. 30 There really isn't a better way to give your Web site a large dose of easy visual appeal than by using Flash. It's a slick, relatively low-bandwidth approach to animation that's been around for a while and just keeps getting better. Flash's secret to keeping file sizes down — and the key to its unique aesthetic — is vector graphics. While traditional Web image files actually contain pixel-by-pixel maps of the image, the vector method just gives instructions for how to draw a particular image. This means, among other things, that the same image can appear any size, without looking stretched or compressed, and without incurring a larger file size. That way, Flash animations tend to download fast and to run fast. Because Flash animations are run by a browser plug-in and not by the actual browser, they look essentially the same on any platform. What's even better, is that they're pretty darn easy to create. Let's walk through the basics together. You'll need to download and install the free 30-day demo of Flash 4. Flash 4 is only available for Mac and Windows — you users of other operating systems have to find other tools, or lobby Macromedia to support your system. The Flash 4 download is a hefty 10-13 MB, so if you're on a dial-up connection, take the dog for a walk or something while it downloads. The download includes both the authoring tool and the browser plug-in. Loaded and set? Here we go then. Open Flash 4 and select "New" from the File menu to create a new animation. You should see a lot of tempting toolbars spring to life and a blank field in the center. This field is called the stage, and that's where the animation development takes place. The palette to the left should look familiar to you from previous graphics software you have used; it's there to help you draw and edit images for your animation. You can select different styles and colors of brush, magnify the drawing, create shapes, fill areas with color, and so forth. Above the stage is the timeline, which adds the fourth dimension — time — to your creations. The pink line indicates the frame you're currently working on. For each frame, you can add objects and layers and perform various actions on the objects. You can also add frames at any point and adjust the attributes of each frame. You should notice another toolbar or two as well. You can drag around any or all of the toolbars to make your workspace comfortable. Go ahead and do that now. Let's start our first simple animation by drawing an object. (You can also import images from other programs.) Draw a picture of yourself. Grab the Circle tool and make a circle. Imagine that's your face. This circle is Layer 1. Now let's make your face move. You can do this using the process of "tweening." Those of you who are familiar with traditional animation will quickly realize is perhaps the greatest advantage of computer animation. Here's the gist of it: You give the computer two different frames, and the computer automatically draws all of the intermediate frames. This saves the human animator the labor of, say, drawing twenty-thousand frames, each with the moving object in a slightly different position. Here's how to do it: First, make the face into a symbol — that is, an object capable of being tweened. Select the face (by clicking on it with the Arrow tool) and choose "Convert to Symbol" from the Insert menu. Give your face symbol a name, choose Graphic as the symbol type, and click "OK." Now, set up your timeline, and place your face in its original and final positions. Drag the dot in frame 1 of the timeline over to frame 35. That establishes the span of the animation. Choose "Library" from the Window menu to see the symbol we created. Click on the symbol's name to see a picture of it. Now, looking at frame 35, drag that picture onto the stage, somewhere off to the side. Click on frame 1 and drag another copy of the symbol from the Library onto a different part of the stage. Now you've chosen the starting and ending points of our animation. All that remains is to tell Flash to tween it for us. Go to the Insert menu and choose "Create Motion Tween." Finally, select "Play" from the Control menu and watch your masterpiece. Bravissimo! Select "Save" from the File menu and save the movie as a FLA file. To put it on your Web site for the world to see, you'll need to export it (choose "Export" from the File menu) as an SWF file. Upload the SWF file to your site. You can embed it in an HTML page using the EMBED and OBJECT tags. (IE and Netscape disagree about how embedded objects should be handled, so we compromise by giving each browser the tag it likes.) The code will look something like this:
<OBJECT WIDTH="550" HEIGHT="400"> It can get a lot more elaborate if you want to specify additional details of how the browser should handle your movie. See the Resources section below for a link to all the code options. The above code will do the job of putting an animated moving circle on your Web site. There's a great deal more to Flash than this; we've only touched on the very beginning of the basics of getting started. The next step is editing and modifying symbols, and adding additional layers. Play around with it, read some Webmonkey tutorials, and look at other people's animations. Most importantly, have fun! HINTS, POINTERS, AND TIPS 'O THE TRADE: With Flash, for a change, you don't have to worry much about file sizes. Even a complicated twenty-minute Flash movie doesn't take long to download. Worry instead about making your animations as good as possible. You can use Flash to build a snazzy interface for your site. Animation Express did. You can even make an entire site with Flash, but that might be too much. It pays to get a second opinion. RESOURCES: Webmonkey's other Flash resources |
||
|
Subscribe/Unsubscribe
Handcrafted Archive |
