DisDat Designs.com
Fireworks MX - Animation Using Tweening

This is a beginner's Fireworks MX tutorial. Basic knowledge of Fireworks vector shape tools is assumed. Please view the Basic Animation tutorial first if you are unfamiliar with Fireworks animation and frames. This tutorial was written using Windows O/S.

Animation using Tweening

If you are familiar with Macromedia Flash, then you are probably familiar with "tweening." Tweening in Fireworks is similar to Flash in that it automatically creates animation frames built on the differences of two instances of a symbol.

In example, starting with an instance on the top left of your canvas and ending with the instance at the bottom right, FW can create an animation of movement between the two. Other transitions like Opacity/Blending modes, Live Effects, and Transformations can also be used.

You can also Tween more than two Instances. Each Instance will serve as a resting point, or "key frame." Fireworks tweens starting with the instance at the bottom of the canvas and ends with the instance at the top.

The best way to learn about tweening is to jump right in with a simple example.

1. Create a 300x300 canvas and create a circle (75x75) at the top left corner.

circle at top left

2. With the circle selected, press F8 - or choose Modify>Symbol>Convert to Symbol.

convert to symbol

Name the symbol "circle" and check Graphic as the symbol type.

Note: Fireworks can only tween instances of symbols, so that is why it has to be converted. An instance is a copy of a symbol placed on the canvas. If the symbol is changed, any instances will be changed as well.

After an object is converted to a symbol, it will also appear in the Library Panel. What you see on the canvas is an Instance.

3. While the circle instance is selected on the canvas, click Edit>Duplicate. Move the copied instance to the bottom right corner of the canvas.

4. Enlarge the second instance (the one at the bottom right.) I resized mine by changing the width and height dimensions on the Property Inspector. (125x125.)

duplicate circle at bottom

5. Select both instances. Click Modify>Symbol>Tween Instances. Change the Steps to 5 and check Distribute to Frames.

tween instances

Once the tweening takes effect, the larger circle will disappear from your canvas. Don't worry, it's still around, just on the last frame.

6. View the Frames Panel. (Window>Frames.) Wow! Fireworks automatically built an animation to simulate the motion and enlargement of the circle using 5 steps. Each step was distributed on its own frame and inserted between the two instances. There will be a total of seven frames.

Play the animation with VCR controls and test it in the Preview Pane and Browser Preview. Make any adjustments to the timing in the Frames Panel. (See the Basic Animation tutorial for more details if needed.)

Looping is how many times the animation will play when viewed. If you would like to change the looping, click on the icon on the frame panel to edit. The default looping is forever. I changed mine to 20.


Let's add to this animation. You are saving your file regularly, aren't you? Good.

If you would like to save what you have done so far as a separate animation, then save it as a new file name.

7. Activate Frame 7 and select the circle instance. Choose Edit>Clone.

The top object in the Layer Panel is the cloned object/instance. It should still be selected.

Use the Property Inspector, change the opacity of the circle to 0.

change opacity

Optional: Using the Property Inspector, change the dimensions and/or position of the circle.

I changed the size of the cloned instance to 50x50 and changed the x position to 25 and y position to 225.

new position and size

Tip: Just remember, the X position is the horizontal origin. Y is the vertical origin.

8. Select both instances on Frame 7.

Since one of the symbols is now invisible, the easiest way to select them both is to use the Layer Panel. Hold the Shift Key and click both objects.

Click Modify>Symbol>Tween Instances. Set the steps at 10 and check the box for Distribute to Frames. There should be 18 frames at this point.

9. Activate Frame 1. Select the Instance on that frame. Edit>Copy.

10. Activate Frame 18 (the last frame) and choose Edit>Paste. The instance is pasted in the exact original position.

11. Select both Instances, and Tween 5 steps.

12. One more effect I want to show you in this tutorial. In the Library Panel (window>Library), double-click the circle symbol. My circle is red. When the symbol editing window appears, change the Fill to a completely different color. Close the symbol editing window (click on the "x" in top right corner.) Viola! All the instances in your animation have been changed.

You can also add textures, strokes, effects to the symbol. I applied an Ellipse gradient to my symbol.

This animation is very simple and basic. A lot more advanced objects can be tweened. Experiment with this using your own vector objects.

13. Your animation can be exported as an animated GIF (see the Basic Animation tutorial for more details on exporting animation.)

Or better yet, since we are tweening, let's export as a .swf file.

14. Choose File>Export. Type a File Name for your file. Click the Save as Type menu, and choose "Macromedia Flash SWF." Don't click Save yet!

export as swf

15. Click on the Options button.

Choose the options very carefully. Let's go over the settings.

swf optionsFirst off, if you are using solid colors or gradients (no textures or pattern fills), these are fill settings that are available in flash as well, so the Object setting of "Maintain Paths" will work very nicely for your swf file.

If, by chance you are using textures, patterns, or effects on your vector symbol, then you must set the objects to "Maintain Appearance." Otherwise, the objects will be exported with only a solid color fill.

Important Note: When the objects are set for Maintain Appearance, this makes the swf file very large. You should only use this setting when absolutely necessary. Experiment with both settings and decide which will work best for your file.

If you have set Maintain Appearance for your objects, then you might want to adjust the JPEG quality as well, which will help keep the file size down a little.

We are not using text in this particular animation, but if you would like to maintain the editability of the text, or convert the text to vector paths, then choose the appropriate setting. Most times, Maintain Editability would be fine.

Check the "All" radio button for Frames. Note: If you would like to only export certain frames, then choose "From" and type in the frame numbers.

Frame Rate: The smaller the number, the slower the animation. Flash defaults at 12, but that might be too fast. I also noticed some animations look choppier if they play too fast. Experiment with the frame rate.

Once you are satisfied with your SWF settings, click the OK button.

Back to the Export window, click Save.

Test your swf movie, and make sure to check the file size if you have set the objects to Maintain Appearance. If the file is too large, consider using a solid color or gradient for your objects, and export again.

Here is my final SWF movie.

I hope you have enjoyed this tutorial.


Page updated on April 26, 2003

[Home] [Contact debbieT] [Free Backgrounds] [Xhtml & CSS Tutorials]

Copyright © 1999-2010 debbieT & DisDat Designs
Please do not copy or redistribute any graphics or tutorials.
Please do not link to any graphics. Personal use only. Thank you.