Tweening

 < Day Day Up > 



At first glance, tweening looks the same as the motion paths you saw in the Symbols section at the beginning of this chapter. Tweening is a traditional term indicating a starting point and an ending point that you produce; the computer generates the steps in between. (Hence the term tweening.)

Tweening in Fireworks is performed on two or more instances of the same symbol. The same symbol is a key factor, but you can trick it, as you discover in the second exercise.

Note 

The types of tweening available in Fireworks are position, opacity, scale, rotation, and effects. You cannot do shape tweening, which is a gradual changing of one shape into another, where your starting point is one graphic and the ending point another. You can achieve a type of shape tween by using the Transform option and altering a shape by choosing Modify ® Transform ® Skew.

Applying a multiply tween

In this exercise, you do a fade effect by applying a tween with opacity, position, and scale by following these steps:

  1. Open a new document (File ® New). A size of 300 pixels by 300 pixels will work.

  2. Select any one of the drawing tools and draw an object: a circle, star, or something similar.

  3. With the object selected, choose Edit ® Insert ® Convert to Symbol (F8) and choose Graphic symbol. The symbol is added to the library and an instance is in your document, which is indicated by the little arrow in the corner.

  4. For the second symbol, you can press Alt (Option) key. Click and drag a copy to the desired location to produce a duplicate instance and the ending point of the tween.

  5. Select only the ending point instance of the symbol, choose Modify ® Transform ® Scale, and drag one of the corners to increase the size.

  6. To change the opacity, select the starting instance, and in the Layers panel move the opacity slider to 0. This makes the beginning instance invisible and gradually increases to 100 percent at the ending instance.

  7. Shift+select the beginning and ending symbol instances, choose Modify ® Symbol ® Tween Instances, and check Distribute to Frames. In Figure 22-8, you see the Tween Instances dialog box showing the default frames of 10. You can change this. Be sure to check the Distribute to Frames option, which places each in-between instance on its own frame. If you neglect to check this option, all the in-between instances will be in the same frame.


    Figure 22-8: The Tween Instances dialog box

Note 

This exact same effect can be achieved using only one symbol by converting an object to a symbol (F8) and choosing Animation. In the Animate dialog box, set the Opacity to 0-100, alter the scale, and set the direction. You can adjust the direction by adjusting the motion path if you need visual help in setting the direction.

start sidebar
Using Numeric Transform

Transforming the size of an object can produce interesting effects. You can use the Numeric Transform option to change the size of an object frame by frame or to distort the shape. All you have to do to access the Numeric Transform dialog box is select the object you want to transform and choose Modify ® Transform ® Numeric Transform and enter in the parameters you want.

end sidebar

Tween Live Effects

Tweening Live Effects is a method that cannot be produced using the Animated Symbol dialog box. This exercise demonstrates the technique of tweening Live Effects. To tween Live Effects, follow these steps:

  1. Open a new document (File®New). A size of 300 pixels by 300 pixels will work.

  2. Select any one of the drawing tools and draw an object, a circle, star, or something similar.

  3. Convert to a symbol (F8) and drag out another instance of the symbol.

  4. Here is where things start to change. Select the beginning instance and click the + sign in the Property inspector to access the Effects menu. Choose Adjust Color ® Color Fill. Select a color you like but be sure it is different from the ending symbol.

    Note 

    You may be wondering at this point how this can be done, that is, creating tween symbols that are different. You may recall that tweening can only be performed on two instances of the "same" symbol. If you were to try and tween these two instances right now it would not work. To make the two instances the same, the same effect has to be applied to both or all symbols that will be tweened.

  5. Select the ending instance from the Effects menu. Choose Adjust Color ® Color Fill. This is where you fool the symbol into thinking it is the same. The same effect is added; move the opacity slider to 0 and no "visible" effect is applied.

  6. Shift+select the beginning and ending symbol instances, and choose Modify ® Symbol ® Tween Instances. Accept the default frames, check the Distribute to Frames option, and click OK. Play your animation to see the gradual color change.

    Note 

    You can use more than two instances of a symbol when tweening. If you place instances in other locations, the tween follows a path according to the stacking order. The closest to the canvas is the beginning point of the tween. Just remember that when you tween Live Effects, you must apply the effects whether they are invisible or not to every instance. You can make transformations such as width, height, skew, opacity, and blending modes separately to individual instances.



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net