Introduction

Flash is often associated with large, complex animations, such as animated Web page banners, but it can also be used to create small, simple GIF animations that can be inserted into Web pages, PowerPoint presentations, etc. They can be uploaded and placed in CMS Outreach Web pages, just like any other image.

GIFs vs. SWFs

GIFs are useful and easy to use, but they aren't perfect. Sometimes a Flash SWF (ShockWave File) is a better choice. Here are some points to consider:

• SWFs are usually smaller files than animated GIFs. This is no big deal with small animations, but larger animations may be better done as SWFs.
• GIFs are easier to insert in Web pages. GIFs are used just like any other image, but SWFs have to be inserted as objects. In CMS Outreach, this would mean inserting a huge amount of strange text into the HTML code.
• Both GIFs and SWFs are equally easy to export from Flash.

Creating an Animated Image

The hardest part of making a small animated image is planning it out. Think about both the basic image and what part(s) should be animated.

• Where will it be used? This affects:
  • The dimensions of the animated graphic.
  • The maximum filesize allowed (CMS Outreach, for example has a maximum of 100K).
  • Whether you choose a GIF or a SWF (see above).
• Decide in advance what the finished size of the animated graphic will be and set your stage size accordingly.
• Collect any images that will be used in the image.
• Will there be a background image? You may need to design the rest of the graphic around it.
• Think about how the image will animate. This will help you decide what you need to do in Flash.
  • How long will it last? - Most animations should be short (2-3 seconds), but morphing images are often good candidates for longer (4-5 seconds or more) timelines.
  • How many separate objects will be moving? - Each object will need its own layer.
  • How will the layers be ordered? - Which objects will be in front, and which will be behind?

Making a Bubbling Flask

Credit for this idea goes to Ms. Jordan, Science teacher at Northside Alternative Middle School - North. She created a bubbling Erlenmeyer flask for her Science Web page for her campus site. The purpose of this exercise is not to teach you how to make a bubbling flask, but rather to demonstrate how some simpe Flash skills can be brought together to create an attractive and fun animated image.

Step 1: Background Image

Flask The image shown here is a florence flask, found on Wikipedia.org, with the search "Laboratory flask." It is a public domain image (no copyright). The image is in PNG format and is 210 x 386 pixels in size. The small image to the right is a link to the full-sized PNG image.

1. Use File > New to open a new Flash document.
2. In the Properties, click the Size: [ 500 x 400 pixels ] and change the Stage width to 120 pixels and the height to 200 pixels.
3. Click the image to the right and save the image to your computer
4. Select File > Import > Import to Stage... and browse to the flask PNG to place it on the Stage of your Flash document.

Free Transform
5. Choose the Selection Tool (black arrow) and click the flask image to select it.
6. Select Modify > Transform > Free Transform. A dark frame with "handles" will appear around the flask.
7. Use the handles on the corners and sides of the image to resize it to fit the Stage. It may make it easier to Zoom In or Zoom Out ( [Ctrl] + or [Ctrl] - ) as you work to resize the image to the Stage.
8. In the Timeline, double-click the words Layer 1 and change the layer name to Flask.
9. Click Frame 60 of the Flask layer and select Insert > Timeline > Keyframe. This gives us a 5-second animation.
10. Save the file as flask.fla.

Step 2: Add a Bubble

Each bubble in the image is a separate layer. The bubbles will appear to randomly form, drift upward through the "liquid," and rise above it to break.

1. Make a new layer by clicking the Insert Layer icon ( ) in the lower-left corner of the Timeline.
2. Double-click the words Layer 2 and change the layer name to Bubble1.
3. Within the Bubble1 Timeline, right-click at Frame 10 and select Insert Keyframe from the menu that pops up.
4. Leaving the Bubble1 keyframe selected, choose the Oval Tool.
5. In the Properties, click the color picker for Fill color, and use the eyedropper to click the liquid in the flask. This will match the color.
6. Click the color picker for Stroke color, and choose a darker color for the outside of the bubble.
7. Hold down the [Shift] key, and draw a circle in the gray area outside the Stage.
8. Choose the Selection Tool, drag a rectangle over the bubble, and use Modify > Group to group the Stroke and Fill together into one object.
9. Move the bubble to its beginning point near the bottom of the liquid in the flask.
10. Insert a Keyframe at Frame 35 in the Bubble1 layer of the Timeline.
11. With Frame 35 still selected, move the bubble straight upwards to where it will "break," somewhere in the white space above the liquid.
12. Click the Bubble1 Timeline, somewhere between the two keyframes. In the Properties, click the Tween: drop-down menu and select Motion.
13. For the bubble to "break," the frames after Keyframe 35 have to be removed. In the Bubble1 Timeline, highlight Frames 36-60. Right-click one of the highlighted frames and choose Remove Frames from the drop-down menu that appears.
14. Press the [Enter] key to run the animation and watch the bubble form, rise up, and break.
15. Save the file.

Steps 3-5: Add Three More Bubbles

Repeat the process from Step 2 to add three more bubbles. Make sure they form and break at different times from the first bubble. Try to have the bubbles appear to move at the same speed as the first bubble.

Flash MX 2004 bubbling flask Timeline

Step 6: Export the Animation

1. Save the file (as an FLA).
2. Select File > Export > Export Movie.
3. Change the Save as type: to Animated GIF (*.gif), with the filename flask.gif.
4. The Export GIF window will appear. If you want the animation to run just once and stop, type 1 in the Animation: repetitions box. If you leave the zero there, the image will run continuously.

Step 7: Insert the Animated GIF

Place the flask.gif image anywhere you would use a "normal" GIF image, such as in a CMS Outreach page, or a PowerPoint presentation.

Examples:

    flask.fla      flask.gif

The finished project:

Printer-friendly version of this exercise (PDF)