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, Dreamweaver, and Flash in depth. The choice is entirely up to you.

I do expect you to complete this 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 our 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 café name.

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. By the way, the same holds true for Flash, which makes extensive use of symbols.
  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 put the new instance over to the right side, to designate the end position of our animation.
  5. Then we will have Fireworks create all the in between stages (this is what is called tweening).

Top

Download the file that the following link goes to by right-clicking on the link and then selecting Save Target As... or some other similar command that your browser may have:

StarsBistroPreAnimated.png

Start Fireworks. In Fireworks, use the File menu to open the file you just downloaded.

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, use the View menu to select Magnification -> 100%

Then s elect Layers in the Window menu (or else press F2 on your keyboard, which is a toggle for opening and closing the Layers panel). The Layers panel should open. Have a look at it. You will see that several of the layers have padlock icons. 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.
  2. The Symbol Properties dialog box will open:
    1. Name the symbol Comet.
    2. Select the Type: Graphic.
    3. Click OK.
  3. 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. Using the Pointer tool (the tool that looks like a black arrow in the top left corner of the Toolbar), click and drag on the instance of the comet. Position the comet near the left side of the dark blue background. 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 consisting of two parts, separate circle and tail pieces. Be sure that no part of the comet extends beyond the edges of the blue background.
  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 the 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 that this method of tweening is 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. The next step is VERY important, so don't do anything until you read it...
  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 include the two frames that get generated by default for each of the original positions of the two instances. This means that there will be two additional frames that get created in addition to the 4 that you ask for in this dialog box. 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 of the 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. In the File menu select Image Preview. This will open the Image Preview dialog box.
  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 using a 56 kbps modem.
  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 most of them are now 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.

Thanks!

Top

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