Everyday Computing Advanced Computing The Internet At Home Health, Mind & Body Making & Managing Money Sports & Leisure Travel Beyond The Classroom
Building Web Sites
Doing Business Online
Graphics & Animation
Using the Internet
Win a Trip to New York City to see Monty Python's SPAMALOT!
Flash 5 For Dummies

Creating Animation in Flash


Adapted From: Flash 5 For Dummies

When you use Flash to create animation for your Web site, you generally go through several steps of construction. The steps may vary in their order, but in each case, the skills you use are about the same. After you know the basics, you can start getting creative and make your Web site rock.

Following is a typical path to adding animation to an existing Web page:

1. Think about it. Noodle around, maybe make some doodles on a napkin, collect a few ideas, and choose one or all of them.

2. Set up your movie. Flash gives you the tools to choose the size and color of the Stage, the speed of animation (number of frames per second), and other general parameters that affect the entire Flash movie.

3. Add some graphics. You have to decide if you want to create graphics in Flash, create them in another graphics software package, or import existing graphics. Your choice depends partly on how artistic you are, if you have other software available to you, and if you can find the right graphics elsewhere. You can also use a combination of sources, which is a common practice.

4. Lay out your graphics the way you want your animation to start. Here's where you may want to scale, rotate, or otherwise fiddle with your graphics.

5. Add some text. Using Flash is a great way to get terrific text onto your Web site. Add text (also called type); then reshape it, make it transparent (if you don't want to be too obvious), add other effects, and place it where you want it.

6. Organize your text and graphics by using layers. Layers help you keep track of what each graphic and text object does while you organize everything into a powerful, coherent statement. Layers keep your animations from getting entangled, so create as many layers as you need and transfer your existing graphics and text to those layers.

7. Turn a graphic into a symbol and multiply it all over the Stage. Making objects into symbols is also a way to keep them from merging with other objects as they merrily animate. You also can use symbols to keep your file size down, to enable animation, and for interactivity, especially buttons.

8. Design some buttons. You know those buttons that you click on Web sites all the time? The coolest ones are made in Flash. You can even use movie clips to create animated buttons.

9. Animate! You can create your animation frame by frame or let Flash fill in the animation between your first and last frames, which is called tweening. Flash can tween motion, shapes, colors, and transparency, which means that you can create some real magic.

10. Get interactive. You want to start a relationship with your Web viewers so you can create buttons, frames, and symbols that respond to your viewers' actions. This is probably the most complex functionality of Flash.

11. Make it louder! Who wants a quiet Web site? Add sound to your movies or your buttons.

12. Publish your magnum opus. Flash makes it easy to get your movie onto your Web site by creating both the Flash Player (SWF) file and the HTML code for your Web page. Flash has other options, too, so you can publish to other formats if you want.

Before you create graphics and animate them — all that fun stuff — you need to make some decisions about the structure of your entire movie. Making these decisions before you start is best, because changing midway can create problems.

The first step is to decide on your movie's overall parameters, including size, color, and other fundamental settings. Choose Modify --> Movie to open the Movie Properties dialog box.

In the Frame Rate text box, you specify how many frames a Flash movie plays each second. A faster rate allows for smoother animation but increases file size, and therefore download time, on your Web page. Flash's default is 12 frames per second, which is a good starting point. However, changing the frame rate mid-stream changes the rate of all the animation in your movie, which may not give you the results you want.

Use the Dimensions settings to set the size of the Stage. By default, Flash uses a Stage size of 550 pixels wide by 400 pixels high. To determine the proper setting, you need to know how your Flash movie will fit into your Web page or site. The default fits on almost everyone's browser screen. You may, however, want to fit your movie into a small corner of a Web page: for example, placing an animated logo in a top corner of a page. In that case, make the Stage smaller.

You can type the dimensions you want in the Width and Height text boxes, but Flash offers two shortcuts:

  • Click Match Printer to set the Stage size according to the paper size set in the Page Setup dialog box (choose File --> Page Setup). (For the Mac, the Print Margins dialog box, which you access by choosing File --> Print Margins, also affects the paper size.) Flash sets the size of the Stage to the maximum possible area of the paper, minus the margins.
  • Click Match Contents to set the Stage size to the contents of the Stage. Of course, for this to work you need some objects on the Stage. Flash creates a Stage size by placing equal space around all sides of the entire contents of the Stage. If you want to create the smallest possible Stage, place your objects at the top-left corner and then click Match Contents.

You can also set the color of the Stage to create a colored background for your entire Movie. As with other settings, you need to consider the context of the Web page that will contain the Flash movie. For example, you may want to match the color of your Web page's background. If your Flash movie will constitute the entire Web page, set the Stage color to set the Web page background. You can also color the Stage to create a mood for your animation.

To set the Stage color, click the Background Color swatch. Flash opens the Color palette. Click the color you want. Voila! You've colored your world, and you're ready to get rolling with the addition of images, symbols, sound, and more.

Related Articles
Dealing with Imported Graphics
Optimizing Movies for Speed
Printing Your Flash 5 Movie
Animating with Flash Keyframes
Drawing Precisely in Flash
Related Titles
Adobe Creative Suite 3 Design Premium All-in-One Desk Reference For Dummies
Macromedia Flash MX 2004 For Dummies 
Macromedia Studio MX 2004 All-in-One Desk Reference For Dummies
Macromedia Studio 8 All-in-One Desk Reference For Dummies
Macromedia Flash 8 For Dummies