Creating and Animating a Symbol in Fireworks

Why We Are Doing This

Before we begin I want to mention that I am not expecting you to remember how to do all of the steps in this exercise. What I want is for you to experience how it's done, and that is true for most of the exercises that you will be doing with the Macromedia software. That way you will know what is possible and what the level of difficulty is. You may or may not wish to learn programs like Fireworks and Flash in depth. The choice is entirely up to you.

I do expect you to complete the exercise and send me the results, but not to remember precisely all the steps that you took. I just want you have the sense of accomplishment that you will probably get from having completed this exercise.

Doing these exercises provides you with an up-to-the-minute experience of the latest technology for the creation of Web page content. Images are what made the Web the tremendously popular medium that it is. Knowing your options for how to create Web images and pages will enable you to make intelligent choices as to how to approach a Web project.

Let's get going...

Top

Tweened Animation.

GIF files allow for two things that JPEG files don't: animation and transparency. In this lesson we will learn how to create an animated GIF using Macromedia Fireworks. We will use what are called symbols and tweened animation to help expedite the process. Our animation will make a "comet" fly behind a restaurant name.

You will need the file I send to you by the drop box in order to do this exercise.

You will learn how to do the following:

Your animated GIF should look something like the image below after you've animated it:

Have a look at what the final result would look like if you were to actually add this animation to a page appropriate for it.

This is how we are going to do it:

  1. We will convert the comet that we want to animate into a symbol. The comet we see then becomes an instance (an individual use) of the symbol. The symbol itself resides in the Library.
  2. Then we will position the instance of the comet so that our action will start on the left.
  3. We will get another instance of the same symbol from the file's library.
  4. We will move the new instance over to the right side, to designate the end position.
  5. Then we will have Fireworks create all the in between stages (this is what is called tweening).

Top

Start Fireworks. In Fireworks, use the File menu to open this file that has been sent to you by the drop box:

StarsBistroPreAnimated.png

PNG is the default file format for Fireworks. It stands for Portable Network Graphics. Although it is a superior image format for the Web in may ways, it is not widely used. The type of PNG file that Fireworks uses has the advantage over JPEG and GIF files in that it can retain layers, exporting information, and is lossless, meaning that it uses compression that doesn't lose information. Top

Layers panel

Once the file is opened, select Layers in the Window menu. The Layers panel should open. Have a look at it. You will see that several of the layers have padlock icons on them: I have locked all the layers except the layer with the comet on it. This way you can't inadvertently move items that we don't want moved.

The comet layer should already be selected (blue). If it isn't, just click once on the layer named comet and the layer will turn blue, indicating that it is selected. Top

"Selecting All"

Next, press Ctrl-A on your keyboard to select everything that is available to be selected. This should select the comet and its tail.

Why not just click on the comet to select it? The reason is this: the comet is actually in two pieces (a circle and the comet's tails). Using Ctrl-A (that is, Select All) ensures that all parts of the comet are, in fact, selected.

In Fireworks as well as in many other programs there can be items out of view that you may have intended to include in a selection however because they are out of view you may not notice when they are not selected. Using the Select All command helps to minimize the possibility of that happening. Top

Creating a Symbol and Instances

  1. With the comet selected go to the menu bar and select the following sequence: Modify -> Symbol -> Convert to Symbol. Accept the default setting of Graphic and name the symbol Comet.
  2. Although it looks the same, the comet that you see has now become an instance of a symbol.

An instance is a single use of a symbol. A symbol can be used many times. Flash uses symbols and instances also. Symbols help keep file sizes small, particularly in Flash, and can make your work go faster and easier.

The symbol itself is kept in the library; work is done using instances of symbols. If you change the symbol in the Library then all instances of it will change as well.

  1. Position the comet near the left side of the dark blue image area. Just click and drag it into position. Now that it's an instance, you can be certain that it is a single unit, and no longer separate ball and tail pieces.
  2. Now you will make an additional instance of the comet from the library, which is where symbols are stored. If you haven't already, go to Window -> Library. You should now see the Library panel.
  3. Since the only symbol you have in this file is comet, its name should already be displayed in the Library window and you should see a small representative image of it there as well. Flash has a similar library.
  4. In the Library, click and hold down on the image of the comet, or on its name, and drag your mouse toward your file's image area as you continue to hold down on the mouse button. This will put a new instance of the comet symbol into your file.
  5. You should now have two instances of the comet as part of the Stars Bistro file.
  6. Position the new instance on the far right side of the image. This will be the end position. It is important that you don't switch instances or else your animation will go backwards! In case you are not sure which is which, delete both instances. Then drag out two new instances of the comet symbol from the Library and place the first one on the left side of the image and the second one on the right side.
  7. When positioning the comets, do not allow any part of them to go beyond the edge of the background because those parts will get clipped off when we create the animation.

Top

Using Tweening to Animate Symbols

Now we will create the animation. It's really easy (I hope you think so too!). I'd like to mention now that this method of tweening is somewhat similar to what is called Motion Tweening in Flash. However, in Flash, the user does not select both instances simultaneously.

  1. Using the Pointer tool (the black arrow in the upper left corner of the Tool panel, in the Select section), select the comet instance on the left. It should then have little blue squares in its corners.
  2. Hold down the Shift key and click on the other comet instance.
  3. Now both instances should be selected. You will be able to tell if they are both selected if they both have the little blue squares in their corners.
  4. From the menu bar select Modify -> Symbol -> Tween Instances.
  5. In the Tween Instances dialog box that opens, enable "Distribute to frames". I emphasize this because it is often overlooked! Keep the dialog box open...
  6. Set the number of Steps to 4. The term Steps means Frames. This is a somewhat deceptive amount because it does not count the individual frames generated by default for each of the two instances, meaning two additional frames get created in addition to the 4 that you ask for. Therefore, this entry will actually provide us with a total of 6 frames. A bit confusing, yes?
  7. Click on OK.
  8. You should now see only the first instance of the comet on the left. If that is not the case, then use Ctrl-Z repeatedly to undo your last several steps going back to the time before you added the second instance . Then continue again from there.

That's all there is to animating it. To preview what it looks like, click on the white triangle-arrow on the bottom left side of your file's window. That should play the animation for you. You may want to open the Frames panel to see the frames being cycled through: Window -> Frames

Top

Exporting the File

When you are ready to make your file into a file that can be used on a web page, you will want to Export it. This is not the same as saving the current file, which is a PNG file. (You should be saving the file periodically as you work on it just in case!) We want to generate a GIF file derived from the PNG file.

A GIF file will not retain layers, the export settings, the ability to change the text or colors easily in the future, and the like. However, it is a more standard image file format and will be a much smaller file than the PNG file that we have been working on.

  1. Open the Export Preview dialog box: in the File menu select Export Preview.
  2. In the upper left corner of the dialog box, check that the Options tab is selected.
  3. Make the following settings:
  4. Format: Animated GIF
  5. Palette: WebSnap Adaptive
  6. In the lower left area, there is a drop down menu. It should say: No Transparency
  7. Check that those settings have been made, and if not, change them to what's just been specified.
  8. Check the size of the file that will be exported by looking in the area above the image. The file size should be about 40K. You will also see the estimated download time.
  9. Leave the dialog box open...

Create a Loop

  1. Click on the tab (top left side of dialog box) that says Animation.
  2. The animation export settings section will open.
  3. Near the bottom on the left side of the Animation section are two buttons, one with a straight arrow and the other an arrow in a loop.
  4. Select the latter which will cause the animation to run continuously. Forever. This is how some of those annoying ads you see on Web pages that keep blinking and moving are created (although now many of them are made with Flash).
  5. Leave the dialog box open...

Adjusting the Speed of the Animation

If you've previewed the animation, it happens a little too fast, don't you think? So let's change the speed.

  1. In that same Animation section, you will the see the duration of time that each frame displays in 100ths of a second. They are probably all set to 20/100 (a fifth of a second). We want to change them all to 50/100ths (half a second).
  2. Select Frame 1 by clicking on it. It should appear blue.
  3. Hold down Shift and click on the last frame, which should be Frame 6.
  4. Now all 6 frames should be selected.
  5. In the little box under the stop watch icon near the top of the dialog box, enter the number 50.
  6. Leave the dialog box open...

Complete the Export

  1. Do NOT click on the OK button! All that it will do is to save the settings and return you to the file.
  2. Instead, click on the Export button.
  3. Then, in the following Export dialog box, enter this file the name:
    GIF_yourlastname.gif
  4. Select "Save".
  5. Online students:
    Please send GIF_yourlastname.gif to me via drop box.

Thanks!

Top

Copyright © 2004 Dan Vaughan and its licensors. All rights reserved.