Fireworks animation types and making detailed

I always think that the FW ratio of PS strong place mainly reflected in two points, one is the vector graphics editing mode and bitmap editing mode of the perfect integration, the second is the Pure graphics processing function and GIF animation production function integration. As for the ease of use of the software, I now feel that it is useless to explore the use of the cover because of the operation of a software is entirely dependent on the user's preferences. Continuation of the above two advantages. Graphics mode mixed with this functionality, Adobe was introduced in the PS6, and we threw it out. For the integration of animation processing graphics processing, PS is still a considerable distance away from the FW. Now let's go into the FW to get a closer look at the powerful features of FW in animation and its flexibility and simplicity, and focus on analyzing the forms of animation that can be generated.

Note: In this article only for the software directly generated by the animation effect analysis, do not do hand-frame animation of the discussion.

Hint: There are two kinds of "symbols" in FW that can generate motion and other changes through software built-in instructions. One is "graphical symbol (Graphic symbol)" and the second is "animation symbol (Animation symbol)".

Stepwise Analysis:

Although we can use FW to create a cool animation effect, but it is not a professional production of GIF animation software, so the effect of pure software generation is very simple. Roughly can be divided into the following two categories one is the basic sports category, the second is the special effects of sports categories:

First, the basic sports categories include:

Linear motion: It contains three kinds of motion, vertical, upright and oblique. As shown in Figure 1.
Gradient motion: FW only supports two kinds of gradient movement, one is the size of the gradient movement, the second is the visibility of the gradual movement, visibility refers to the change in transparency, which also includes the movement of the symbol during the rotation. If you want to turn a circle into a rectangle, it's only done in a manual way.


Linear Motion 1 Gradient Movement 2

Gradient Movement 3 Gradient Movement 4
Second, the special effects movement is only one kind of "shade class" animation:

There are two ways to generate masking animations, one of which is to use the shared folders (Share across Frames) feature to create a matte effect, as shown in Figure 5. The second is the real use of the masking function (Paste as mask or Group as mask) to generate a masking animation by the movement of the object being obscured. As shown in Figure 6.


Matte Animation 5 Matte Animation 6

These are the two types of animations that can be generated by FW built-in directives. As long as we are good at using these instructions and adding our ideas, we can create a lot of interesting or cool effects. Let's familiarize ourselves with the process of making these animations.

Note: The following animation production process will be explained in the form of contrast. One of the basic motion animation production we will be through the "graphical symbols" and "animation symbols" to create animation effects of different methods to compare. The production of special effects sports animation we will compare them in two different ways, "Shared Folders" and "masking".

Tip: There are 5 ways to convert and add symbols in FW:

A shortcut to convert the initial vector graphic to symbol (symbol): Select the graphic to press the F8 key.

Second, right click on the graphic, select Convert to symbol in the Drop-down list.

Third, select the graphic, open the Insert menu to select Convert to Symbol ....

To add a new symbol, open insert to select new symbol.

Five, is the shortcut that adds new symbol to press CTRL+F8. In the explanations below, all we use are shortcuts.

Step-by-Step Explanation:

First, the basic animation:

1, the use of "graphical symbols" to create linear motion animation: first draw the graphics you need (for the sake of simplicity, here only rectangular representation). Select the diagram, press the F8 key, and select the first graphic (graphic) in the pop-up dialog box. As shown in Figure 1.

2, select the graphic symbol just converted, press CTRL + C, copy an identical graphic symbol, press CTRL + V again to paste it into the editing area. And the two graphic symbols in the horizontal direction to pull a distance. As shown in Figure 2.

3, hold down the SHIFT key, click the two graphic symbols in the edit area, select the Modify menu to select the tween instances in the Symbol list item (insert an instance between the two), or press the Ctrl+alt+shift+t shortcut key. In the dialog box that pops up, add the number of frames you need in the steps (note that the more frames are inserted, the larger the animation format will be), and check the distribute to Frames below. As shown in Figure 3. OK, press the play in the status bar to preview the simplest linear motion animation.

4, now we look at the use of "animation symbols" to make the process of linear motion. First of all, draw your graphics, the same select it and press F8, but this time we need to select the second item that is: Animation (lively).

5, see it, when you choose to convert the graphic to "animation symbol", FW will automatically pop up a set Animation symbol Movement dialog box. Then the first frames of course is to add the number of hardwood. The second move is responsible for the change of position. Write directly to 180 on it. Which means that the symbol moves horizontally, do you want the symbol to move horizontally in the opposite direction? Then write-180: Yes. The following direction (direction) is used to set the direction of the symbol movement. If you only need the symbol to move in a vertical horizontal direction then you don't have to move it. The next few we will explain in detail in the following explanation. As shown in Figure 4.

6, the use of "graphical symbols" to make gradient motion animation: This time we do a complex point, the size and transparency of the changes in the mix to do. Well, repeat the 1th-2nd step first. Converts a graphic to a symbol and copies one out.

7. Change the size and transparency of any one of these symbols (change is a copy here), the change of transparency is as follows: Select a symbol, open the Layer (layer) panel, will contain the number 100 of the item to 0 can be. As shown in Figure 5.

8, repeat the 3rd step. Then preview the gradient animation.
　　
9, using the "animation symbol" to do the gradient animation: Repeat 第4-5 steps, while in the Settings box to change the following two: Scale to (ratio to ...) Add a number of 200 or pull the roller bar directly. In the opacity (opacity) item, change the following number to 0 or directly pull the roller bar. All right, look at the effect.

10, we have noticed, we have not mentioned the "animation symbol" motion box in the last item, now say, it (rotote rotation) as the name implies is to control the symbol in the movement of the project whether to rotate. Because this action also belongs to the type of gradient, so we don't repeat it, you can try it on your own.

Legend 1 legend 2 legend 3

Legend 4 Legend 5

So far, we have a more complete understanding of the production of basic animation. In the production process, you may also find that "animation symbol" than the "graphic symbol" There is a great convenience, one, animation symbol action settings can be changed at any time is its biggest advantage, as long as we think that a place to deal with the bad, we can always pass Modify――animate―― Settings to change the entire animation. Second, when an animated symbol is selected, we see all the motion connectors for the animation, and we can change the motion direction of the animation by dragging the starting and ending points of the two ends. The above two points are not available as "graphical symbols". But graphic symbols also have its advantages, here do not repeat, on your own to slowly experience slightly, hehe:).

Second, special effects animation:

1, the use of "shared Folders" to achieve the effect of shading: first to do this shared folder. Draw a picture (as shown in Figure 7).

2, the picture is good, open the Level board, double click the layer named "Layer1", in the pop-up dialog box to this layer named "Mask", and then check the following "by all frame sharing." See Figure 8.

3. Create a new layer and drag it down to the mask layer. In this layer to do the animation, we have just learned the basic exercise casually do Oh! But remember that the size of the animation must not exceed the mask layer of the cover. See Figure 9 below.

4. Have you finished your animation? Do it? Then look at the effect of it:

5, the use of real masking to create the animation: First of all, we have to draw a mask of the required two graphics. As shown in Figure 10.

6, after drawing a good graphic, will be obscured by the graphics into "graphic symbols." Remember that the initial graphics are not animated and must be converted into symbols before the shading is applied. Turn on the Modify-mask-combination mask to apply the mask after the conversion. See Figure 11.

7, the application of the mask after we look at the layer panel, you will find that the combination of two graphics in the shade between a chain-like logo, point to open it. See Figure 12.

8, after the serial untie, choose to be obscured by the graphic symbols. Copy and create a new copy at the end of the text, and open the "modify-symbol-insert as an instance" movement between the symbols. See Figure 13.

So far, we've got a more detailed understanding of the types of animations that can be created in FW. The rest is to start your brain and use them to create more vivid effects.

Legend 7 Legend 8 legend 9

Legend 10 Legend 11

Legend 12 Legend 13