DisDat Designs.com
Fireworks MX - Tweening for Effect Without Animation

This is a beginner's Fireworks MX tutorial. Basic knowledge of Fireworks vector shape tools is assumed. This tutorial was written using Windows O/S.

Tweening Without Animation

If you are unfamiliar with Fireworks Tweening, please view the Tweening Tutorial.

1. Create a Star Shaped object (175x155) on a new 400 x 400 canvas. Add any optional strokes, fills and effects.

My Star dimensions and settings: 175x155, 6 sided, angle 25. I used a custom style, here is the zipped file if you would like to use the same style.

2. With the star object selected, press F-8 ( or choose Modify>Symbol>Convert to Symbol.) Name the symbol, and check Graphic for type. Position the star symbol on the bottom left of canvas.

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.

3. Select the instance on the canvas. Choose Edit>Clone.

4. Keep the cloned copy of the instance selected, and choose Modify>Transform>Numeric Transform. Scale 50%. Move the resized symbol to the top right of the canvas.

On the Layer Panel, drag the smaller instance to the Bottom of the layer.

5. Select both instances. Modify>Symbol>Tween Instances - 10 frames. UNcheck the box next to “Distribute to Frames.”

Your two star instances should now have 10 more instances in between them. Trim canvas. Save the image.

Here is my final image - resized a bit to save room on this page.

stars tweened

Okay, that was too easy, are you ready for something else???

Effective Tweening

1. Create a new canvas, 400x400.

2. In the Library Panel, click Import Symbols from the Options Menu. Navigate to the star.png file you just saved, select the star symbol, then click the Import button.

It will appear in the Library Panel for this new image. Drag two instances of the star symbol from the Library Panel to the canvas.

3. Select both instances. Apply the effect Gaussian Blur of 0.1 to both.

With both instances still selected, apply the effect Adjust Color>Color Fill. Choose a contrasting color, but a setting of 0.

color fill effect

4. Select whichever star is on the bottom of the layer. Edit the Gaussian Blur settings to 8, then edit the Color Fill settings to 100%.

5. With the bottom star instance still selected, adjust the opacity (on Property Inspector) to approximately 25% and resize to 50x50.

property inspector

6. Position both star instances on your canvas. Rememer that the star at the bottom will tween up to the star at the top of the layer.

7. Select both instances, and apply another tweening between the both (without distributing to frames). I used 20 steps for mine.

Each star gradually changes it's blur, color and size setting.

Note: As long as you apply the same effect to both instances, it will include the effect in the tween.

Trim canvas. Save the image. Here is final tweened image:

stars tweened

Let's try another one.

Three Instances Tweened

1. Start a new canvas. Import and drag three star symbols to the canvas. Select all three, and scale 75% (Modify>Transform>Numeric Transform.)

2. As you might have noticed, the placement of a symbol on the layer panel is very important in how objects are tweened together. The object on the top will be the starting point and it will tween to the bottom layer.

Position the first star on the top of the layer panel in the center bottom area of the canvas. The other two stars will go on each side above the first one. #2 on the LEFT, and #3 on the RIGHT. See my example.

3 objects for tween

3. First....

3 stars

4. Next...

3 instances tweened

Here are a couple more details to experiment with.

A New Shape to Tween

I am tired of stars, so let's try a different shape.

experimental tween

I started with a rectangle symbol, using a colorful gradient and a textured stroke, then rotated and/or resized each of the three instances.

The rectangle on the right side of the canvas was moved to the top of the layer panel, and its opacity was adjusted to 40%. This instance was tweened with 10 steps to the bottom right instance. Then the instance was tweened with the top right using 80 steps.

Try some experiments of your own.

Breaking the Symbol

If you would like to make a specific change to only one or two instances, without affecting the main symbol, select the instance. Choose Modify>Symbol>Break Up. Then Modify>Ungroup.

Your instance is back to being a plain ole vector object again.

Here is I worked on using text and tweening. A couple of instances were broken, and new styles were applied. It is kind of a mushed mass, but I think you get the idea. Click the graphic for the full sized example.

text tween

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.