Tweening Using Live Effects

Tweening Live Effects cannot be applied to an animated symbol but there is a way around it in Fireworks.

Open a new document with the size of 300 X 300 pixels.

Click the Paint Bucket tool Paint Bucket Tool and select a color for your Auto Shape. Select the Star from the Auto Shape Properties panel.

Star AutoShape

To get a really neat looking shape set the Radius 1 to 10:

Star Radius Set to 10

Drag out your star on the canvas. I choose orange as my fill and set the size at the info panel to 100 X 100:

Star Size

Next we will need to convert it to a symbol. Modify > Symbol > Convert to Symbol:

Convert to Symbol

Name it star and check graphic as type. We will need two symbols in order to tween the object. While holding down the Alt/Opt key click on the star and drag out another copy. Place one star where you want the animation to begin and the second star where you want the star to go. Click on the first star and click the Filters option Filter on Properties Panel on the Properties Panel and select Adjust Color > Color Fill.

Adjust Fill Color

Select a different color. I chose yellow. Click on the second star symbol and adjust the fill color to the same color as you selected for the first star but adjust the opacity from 100% to 0%:

Opacity Setting

By changing both symbols you are tricking Fireworks into thinking that both symbols are the same.

Shift select the beginning and ending symbol instances. Select Modify > Symbol > Tween Instances.

Tween Instances

Accept the default frames and make sure that Distribute to Frames option is checked. Play your animation in the preview window and you will see the gradual color change. Here is my finished product:

At the Optimize Panel choose animated gif as your format:

Animated Gif Filr Format

Color Change Animation

Fireworks 8 Tutorials