Flash tips How to master shape gradient animation

Tips | gradients | shapes

　　Question 1: When you do shape gradients, why do you want to vectorization the text components?

Solving ideas

Shape Gradient animation is one of the basic Flash animation, in the flash creation of a wide range of applications. Shape gradient animations are done based on shapes, so we have to make sure that the footage that makes the shape gradient animation is graphic. There are two types of graphics in Flash, one is bitmap graphics, the other is vector graphics. Only vector graphics are used to make shape-gradient animations. bitmaps, text, components, and so on are not allowed to make this effect. Only by "separation" to vectorization, we can achieve results. Let's take the text as an example to illustrate the problem.

Specific steps:

1, run FlashMX2004, document properties default.
2, click the Text tool in the toolbar in the scene type "Flash bar" two words. Text color is red, size 96. Use the Align panel to place it in the center of the stage.
3, click "Modify" | "Detach" command two times, or use the keyboard shortcut key combination "Ctrl+b" two times, the text vectorization points. After separation, the document has become a vector graphic. The selected state is converted from the original blue border to white hemp dot like the figure 2.1.14.

　

Figure 2.1.14 Detached text

4, in the timeline frame 30th insert a blank keyframe, in the stage type "FLASH8" static text, and use the alignment panel settings in the center of the stage position.
5, using the same method, the "FALSH8" text separated into vector graphics.
6, click any frame between frame 1th and 30th, and select shape in the Tween option in the following property panel.

Figure 2.1.15 Setting shape gradient animation

7. All frames between frame 1th and 30th of the timeline turn green and have a long arrow. This shows that we have created a shape gradient animation. As shown in Figure 2.1.16.

Figure 2.1.16 Creating a shape gradient animation

8, the test effect, the 1th frame of "flash bar" gradually converted to the 30th frame "FLASH8". At this point, the shape gradient effect is complete and saved. Please refer to the source file Click here to download the source file .

Note--Be sure to press "Ctrl+b" two times, separated into vector graphics to achieve shape gradient effect.

Hint--pressing "ctrl+b" only causes the words in the text to be separated by separate columns.

The timeline for the shape gradient animation is green, while the timeline for moving the gradient animation is blue.

Try it--you can use the vector map to change the shape, so you can not change the color? For example, the 30th frame FLASH8 change to blue, what will be the effect? Friends might as well give it a try.

Analysis-This section is simple, as long as you make sure that the material for the shape gradient is a vector map. In the Flash Forum on this objection to the friends, mostly to forget the bitmap, components, documents, etc. into vector graphics.

Special Notes

In this section shape gradient animation learning, we know the shape gradient animation production process, but also understand the most critical knowledge: to the text (bitmap) using the "ctrl+b" two separation, converted to vector graphics, you can achieve this effect.

Related issues
How do I control the gradient speed of a shape's gradient animation?
First, in the time axis control, reduce the start frame and end frame between the length can achieve effect;
Second, try to put the contents of two key frames in one place.
Can you accurately control the transformation of graphics?
OK. There is a "Add shape hint" feature in FlashMX2004 that we can use to achieve precise control of shape gradients, which we will introduce in detail in the next section.

　　Question 2: How do I add and use a shape gradient cue point?

Solving ideas

In the previous question, we talked about the "Add shape hint" feature in a shape gradient animation. The Add Shape hint feature allows us to accurately control the shape change process and avoid the messy change in the previous problem. By adding corresponding cue points in two keyframes, we can be a bit motionless or change according to our thinking, thus achieving the effect of controlling shape changes.
Specific steps
1, run FlashMX2004, document properties default;
2. Click the Text tool in the toolbar to type a simple "one" static text in frame 1th and separate it into vector graphics. Open the alignment panel so that it is in the center of the stage.
3, in the 30th frame insert Blank keyframe, type "mountain" static text, and separate into vector graphics. Use the Align panel to place it in the middle.
4, create "shape gradient animation" in the property panel to see the effect.
5, the 1th frame of the "one" very messy transition to the 30th frame of the "mountain", which is also the effect of our previous problem implementation.
6, add shape hint point. Click Modify | The Add shape hint command in shape, or press the combination shortcut "Ctrl+shift+h" to add a cue point. After repeated three times, add three cue points. The default name for cue points is a,b,c. The yellow color is present in the first frame. As shown in Figure 2.1.17.

Figure 2.1.7 1th frame shape Cue point

7, respectively use the mouse to put the three tips point to the "one" word of both ends and the middle position.

8, click the 30th frame, in the 30th frame there are three corresponding cue points, but the color is not the same. It turns out that these cue points correspond to both the start and end frames. Drag three green cue points to the vertices of the three vertical bars of the "mountain" word, as shown in Figure 2.1.18.

Figure 2.1.18 30th frame shape Cue point

9, 1th frame and 30th frame of the cue point is to limit the two-frame cue points for the corresponding movement, so as to control the effect of shape gradient.
10, test, found that added shape gradient hint point of change effect is obvious, save. Please refer to the source file Click here to download the source file .

Note-When you add start and end frame shape cue points, be sure to be aware of each other's corresponding positions. The position of the corresponding shape hint point can not be set too far away, otherwise the shape cue point will lose its effect.

Tip-for complex shape gradients, you can use more cue points, and you can add up to 26 shape cue points. Use the magnifying glass tool to precisely lay out the corresponding position of the shape cue point.

A shape hint point is just a production tool, so the shape cue point is not visible when the animation is published.

Tips-For some of the more wide lines, it is best to put the shape hint points on the outside of the line. This can minimize the degree of confusion in the process of change.

　　Give it a try.

We can often see some 3D changes with regular shapes in the source file library of the Flash bar, you know? These effects can also be done by adding a collision cue point. As long as we have the patience, we can make a three-pyramid 3D rotation completely. Friends try.

　　Special Notes

By explaining the problem, we learned how to add a shape cue point technique. Add a shape hint point although it is a relatively simple knowledge, but how flexible use is to rely on their own ingenuity and experience accumulated. Who can imagine using this entry-level technique to make false 3D effects of visual deception? From here we can also feel that the tool in the absence of a human creativity is only a lack of spiritual tools, the human mind attached to this tool becomes art.