Flash animation techniques How to master moving gradient animation

Flash Animation | skill | gradient

　　Question 1: I do flash mobile animation, in the timeline above why not the long arrow flag and also did not appear to move animation effect?

　　Solving Ideas

For the inability to achieve a moving gradient effect, this problem is often encountered in the process of making flash for beginners, often baffled. In fact, the root cause of the problem is the difference between the components and graphics. There are three components in Flash, which are graphical components, buttons, and movie clips, all of which can be moved by animation. But the graphics in Flash can not do moving gradient animation, where the figure is the vectorization of graphics. As long as we understand this, the problem will be solved.

　　Specific Steps

1, open Flash MX 2004, document properties default.
2. Click the Oval tool in the toolbar and press the Shift key to draw a red positive circle.
3, click this circle, use the right key or F8 key, open the "Convert to symbol" Panel, convert it to graphic components. Sets the symbol name to "red circle." As shown in Figure 2.1.1.

Figure 2.1.1 Converted to symbols

4, click the 30th frame of the timeline, open the right-click menu, select the "Insert keyframe" command or press the shortcut key F6 insert a keyframe.
5, use the mouse to drag or press the direction of the key to move the "red circle" component to the right side of another position.
6. Select the Create motion tween command by right-clicking any frame between frames 1th and 30th.
All frames between frames 7, 1th and 30th turn blue and have a long arrow, indicating that a move gradient animation effect has been created between frames 1th to 30th. As shown in Figure 2.1.2.

Figure 2.1.2 Creating a motion tween

8, "Control" | "Play" or press "Enter" to test the animation effect.
9, save, complete. (Please refer to the source file Click here to download the source file )

　　Note:

The reason why you can move a gradient animation is because you are converting a drawn vector graphic to a graphic symbol.

　　Tip:

In addition to being able to move gradients, text formatting, group objects, and bitmap pictures can also make a moving gradient effect.
Get into the habit of naming components and naming layers, and making large flash animations makes it easy to find and modify named components or layers.
What we often call "MC" is the abbreviation of English MovieClip, Chinese refers to "movie clip". The significant difference between a movie clip and a graphic symbol is that the movie clip can be named for it to accept the control of Flash ActionScript, and the movie clip can play independently with the timeline.

Skills:

You cannot merge layers in flash like Photoshop, but you can achieve the purpose of merging layers by copying the frame's functionality or by copying the components within the frame.

　　give it a try:

Friends can try using bitmap pictures, documents, group objects to make a moving gradient animation to see how successful.

　　Expert advice:

Through this basic technical problem solving, we mastered the flash moving gradient animation production process, but also clear the production of moving gradient animation object is limited. To make a moving gradient animation, you must be a three component, document, group object, and bitmap picture within Flash. You cannot create a moving gradient animation for a vector graphic picture.

　　Related issues:

Is the gray area outside the stage available as an edit area? Can you see it after release?

The gray area outside the stage can be used as an editing area for Flash animations, and when a component is located in the area, it is not visible after the animation is released.

How do I import a bitmap picture?

You can import the target picture into the Flash MX 2004 stage by clicking File | Import and selecting the "Import to Stage" command. You can also select either import to library or open external library feature. Flash MX 2004 can import the various types of pictures, music, and supported file formats that it supports.

　　Question 2: Can I make the movie clips wrap around a fixed point? How does the speed of rotation change?

　　Solving Ideas :

The rotation of the component is done around the deformation point of the element. Using the "Free deformation tool" to find the deformation point of the element, using the mouse drag to change its position, you can achieve the effect of fixed-point wrapping.

　　Specific Steps

1, Run Flash MX 2004, document properties default.
2, click Insert | new symbol, or press the shortcut key "Ctrl+f8" to open the Create new symbol panel.
3, create a new movie clip called "Square". As shown in Figure 2.1.3.

Figure 2.1.3 Creating a new component

4. After confirmation, enter this film editing area. Click the Rectangle tool for the toolbar, and with the SHIFT key in the keyboard, draw a red square without a border.
5, click the window | design Panel | Align Command, open the Alignment panel, select vertical, horizontal center, and relative to stage commands, so that the square is in the center of the stage.
6, click the "Scene 1" button above the timeline, or return to the scene 1 edit area by returning the machine arrow flag. As shown in Figure 2.1.4.

Figure 2.1.4 Back to Scenario 1

7, click the window | Library command, open the library panel, or press the shortcut key "F11" to drag the "square" movie clip from the library panel to the appropriate location on the stage.
8. Click the "square" movie clip on the stage and select the "Freeform Tool" in the toolbar to change the transformation point of the movie clip. As shown in Figure 2.1.5.

Figure 2.1.5 Show the transformation point of a movie clip

9, now, the film clips are selected in the state, surrounded by 8 adjustment points and a deformation point, using the mouse to drag consciously, the transformation point to move to the outside of the film clip. As shown in Figure 2.1.6.

Figure 2.1.6 Move a movie clip to a transformation point

10, the production of this film clip rotation effect. In frame 30th on the timeline, insert the keyframe.
11. Click the Create motion Tween command in the right mouse button between frames 1th and 30th.
12, click Frame 1th, set the direction of rotation and rotate parameters in the property panel below the stage. As shown in Figure 2.1.7.

Figure 2.1.7 Set 1th frame motion parameters

13, the test, found that the film clip's rotation center is not in the film clip itself, but in the transformation point we just adjust the location, so far, we have completed the movie clip's fixed-point wrapping effect.
14, if you want to speed up the film clip rotation speed, as long as the value of the rotation in the property panel changes or shorten the time axis frame number, can achieve the purpose. (Please refer to the source file Click here to download the source file )

　　Note:

When using the Freeform tool in the stage to change the transformation point of a movie clip, when you use the Align panel to align the component, the movie clip's reference position is the location of the secondary movie clip's center point. Changing the deformation point does not affect the Alignment panel's use. The transformation point coincides with the center point of the movie clip without changing the location of the movie clip's transformation point.

　　Tip:

In this effect, creating a new component uses another method. There is no difference between the two methods in use, and it is recommended that you use the first drawing and then converting to a symbol.
The flexibility to use the knowledge to change the deformation point can produce a variety of effects. By setting the deformation point above and below the component, and then making changes in the size of the component, you will see more directly the effect of the change in the center point.

　　Tips:

When the graphic is not in the center of the component editing area, you can adjust it using the center point of the change element.

　　give it a try:

The same method is used to try to make a point rotation effect and increase effect of a graphic element and a BUTTON element.

　　Special Tips :

Through the solution of this problem, the animation effect after changing the deformation point of the component is understood. This knowledge in the future flash creation of a wide range of applications. For example, make an accurate display of the download byte progress bar. We think of the deformation point as the base point of the element, and any changes to the element are based on this transformation.

　　Expert advice:

In the process of solving this problem, we further consolidate the knowledge of Flash's basic moving gradient animation, and understand how to make the rotation effect. When making a graphic zoom out, you should consider placing the center point where you end up performing. For example, to promote close-up effects with a person's lens, it is recommended that the center point be placed between two eyes, so that it can be of great help in the performance of the person's inner world during the lens movement.