Tweening Two Instances

We’ve already tried creating animations using an Instance of a Symbol and Firework’s pre-packaged Animation Commands. The results look impressive but the Commands themselves are somewhat limited.  If you want to create your own simple animations you’ll have to try Tweening two Instances. 

For this example we’ll use the "Animation" text Symbol that we created for the earlier example. Create a new document that’s 300 pixels wide by 200 high and import the "Animation" Symbol into its Library.  To start we’ll need two Instances of the Symbol dragged from the Library Panel into the Document Window. It is important to note that there are certain appearance characteristics that can be animated using Tweened Instances and others that can’t.  You can, for instance, scale and rotate your Instances but you cannot distort them or change their color. We’ll try animating a straightforward change in position with a slight change in scale and rotation. 

Position one of your Instances in the top left hand corner of your Document Window and the other at its bottom right hand corner. Select the Instance in the bottom right corner and navigate your way to Modify/Transform/Scale and use the Transformation Selection Box to make the Instance smaller by 50% or so. Select the Instance in the Upper Left Corner and use the Transformation Options to rotate it about 45 degrees or so. Multiple select both of your Instances.  Your Document Window should look something like this:

In effect, both of our Instances, as they sit on the screen, represent the Key Frames in our Tweened animation. 

Let’s create the animation.  Select Modify/Symbol/Tween Instances from the Menu. A "Tween Instances" dialog box will appear asking you how many steps you would like to use for your animation and whether or not you want to distribute those steps to individual frames. {Click} on the "Distribute to Frames" checkbox so we can see our animation played across individual frames. If this box weren’t checked off our steps would be placed on one frame and our animation wouldn’t work.

{Click} the OK button and Fireworks will create the In-between frames. Take a look at your Frames Panel and you’ll notice that you have 12 frames instead of 10. That’s because the 10 steps are in addition to our two Key frames. If you only want 10 frames of animation you’d have to input 8 into the "Steps" field. Adjust your Onion Markers in the Frames Panel so you can see all of the frames that were created. Fireworks created a smooth transition from one Key Frame to the next.

Use the Animation Controller at the bottom right hand corner of your Document Window to preview your animation. Select Frame 1 and drag and drop the "Mount Fuji", "Sun", and "Travel Text" into the Document Window.  Use your Modify Bar to change the stacking order if it needs to be adjusted.  Add a drop shadow to the "Travel Text" and adjust it if it seems too strong. 

Your first frame should look like this. 

Select Frame 2 and drag and drop the "Flight Text" and "Sun" graphics into it.  Again, use the "finished.png" file as a positioning reference.  The Instance of the "Sun" Symbol has been resized on this frame so use the Transform Tool to or select [CTRL} + T to scale it.  Select [CTRL] + C to make a copy of the "Sun" symbol after you have positioned it.

Select Frame 3 and drop the "10%" symbol into it.  Paste the "Sun" symbol into the document as well by typing [CTRL] + V.  Position it accordingly.

Frame 4 uses the "Sun" Symbol in addition to "Travel Text" and "Address".  Drag these objects into the Frame and position.  Re-apply the blur to the "Address" Symbol.  We now have the four frames of content that are required for our animation. Preview it using the Animation Controller.

You’ll find that the animation plays far too fast for the viewer to read it so you’ll also have to adjust it’s speed. {Click} on the Frames Panel’s Pop Out Menu, select Properties, and adjust the timing of the current frame. When finished, select the other frames and do the same thing. Remember that your viewing audience needs enough time to read the material so set your frame timing accordingly.  Preview your animation by pressing [F12].

If you’re happy with the appearance and performance of your animation you can easily export it by selecting "Animated GIF" from the Export File Format drop down menu in the Optimize Panel.  After you have done this select "File/Export" and navigate your way to a folder in which you want to place the file.  {Click} OK and you now have an animated banner ready for use in an HTML document.

This is a simplistic example of Frame-by-Frame animation.  With a bit of time and creativity you could create animations that involve distinctive movement and interesting color transformations.  For an example of this type of animation check the "exercise" folder in the "chapte011" folder.  Try dissecting the "sun.gif" and "sun.png" files to see how they were built.  Experiment with the Frames Panel and see what you can come up with.