FW MX 2004 Tutorial (6): Animation production

The implementation of the tutorial GIF animation is shown by drawing pictures in different time periods quickly, because the human eye has 0.1 seconds of visual retention, so the image looks like a move. And each picture is called "frame", it is the basic unit that composes the animation. GIF animation for the Web page to add a lot of lively, complex and changeable graphic elements, so GIF animation in the production of web pages are widely used, and even people like the QQ dynamic expression is mostly GIF animation.

Fireworks are a great tool for making GIF animations, and this is part of a look at the animation features of the fireworks MX 2004.

　　1 , making GIF animated

Let's start with a simple five-frame animation example. Randomly draw five objects on the workspace and hold down the SHIFT key to select all objects, as shown in Figure 6-01.

Figure 6-01

Then click the window-Frame command on the menu bar to start the frames panel, as shown in Figure 6-02

Figure 6-02

Clicking the "Assign to Frame" button in the lower-right corner of the frame panel automatically generates a five-frame animation on the frame panel. In this way, a simple animation is done. And this animated object of one to five frames is generated according to the order in which the objects were created. When finished, the animation effect is shown in Figure 6-03.

Figure 6-03

Click the "Add" or "Remove" button in the lower-right corner of the frame panel to add or remove selected frames. The loop button in the lower-left corner of the frames panel sets the number of times the animation will play, as shown in Figure 6-04, which is currently selected as a "perpetual" loop.

Figure 6-04

　　 2 , use of the frames panel

GIF animation in fireworks production can not be separated from the "frame" panel operation, so learn to the "frame" Panel is very important to use.

Renaming a frame: Double-click the frame's name on the frames panel to rename the frame, as shown in Figure 6-05.

Figure 6-05

Frame delay Time: There is a "7" word on the right side of each frame name. These numbers represent the delay time for each frame, where "7" indicates that the frame has a delay of 0.07 seconds. Double-click the place to reset the frame delay, as shown in Figure 6-06.

Figure 6-06

Add Frame: Click the Drop-down menu in the upper-right corner of the frame and history combo panel, as shown in Figure 6-07.

Figure 6-07

Select Add frame to add a new frame to the current animation, as shown in Figure 6-08.

Figure 6-08

Quantity-You can enter the number of frames you want to add directly.
At the beginning--add before the first frame of the animation;
Before the current frame--to be added before the frame is currently selected;
After the current frame--after the currently selected frame is added;
At the end--add after the last frame of the animation;
Re-frame: You can copy the currently selected frame, and the Settings dialog box is the same as the Add Frame dialog box.
Delete Frame: Deletes the currently selected frame.

Copy to frame: Click the item, as shown in Figure 6-09. You can copy an object from a frame to another frame on the canvas. You can also enter a "range" of the copied frames in the dialog box.

Figure 6-09

Spread to frames: This item is the same as the "Assign to Frame" feature described earlier.

　　 3 , use the "onion skins" feature

The Onion skins feature makes it easy to view the contents of frames before and after the currently selected frame in animation. So as to bring convenience to the production of animation.

Click the small arrow button in the lower left corner of the "frame" panel to eject the "onion peel" feature option, as shown in Figure 6-10 and effect figure 6-11.

Figure 6-10

Figure 6-11

Start the custom item to set the number of frames and opacity displayed, as shown in Figure 6-12.

Figure 6-12

Multi-frame editing is an object that allows you to edit multiple frames at the same time, eliminating the hassle of switching back and forth between multiple frames.

　　4 , the use of layers

In the process of drawing objects or graphs in fireworks, it is more time to use the Layers panel to select and Schedule objects. In the animation production, the level of the use of the Board is equally important.