Flash Animation Example: Snow Greeting Card Production

Source: Internet
Author: User
Tags copy final insert
Flash Animation

Effect Introduction:

This is a snow greeting card. Poetic house, Snow, lovely snowman, curl of smoke, shallow footprints and random snowflakes, these constitute a beautiful snow map, but also make this card full of fun. But the greeting card has become slightly more complicated.

  Main application Technology:

The article mainly learn how to design cards and effectively manage a large number of components. Master Greeting Card production scene layout, color application, atmosphere, such as the creation of methods. The key technology in making is the use of random functions to achieve realistic snowflake effect. Learn how to intelligently and rationally use the material to design a work of spirituality and individuality.


Figure 1

Click here to download the source file

  Production steps:

Set the size of the scene to be 400pxx300px, the background is white, frame frequency is 12fps.

  Design components

1. Press the shortcut key Ctrl+f8 Open the Create new symbol panel creates a new movie clip symbol named House.

2. In the "House" component scene, press the shortcut key ctrl+r to open the import panel to import a house background map. To make the reader see clearly, the background color is set to black first. As shown in Figure 2.

Figure 2

3. Press the shortcut key ctrl+b the house picture to scatter, then smoke that section picture, presses the shortcut key ctrl+x to cut down. As shown in Figure 3.

Figure 3

4. Opens the Create new symbol panel creates a new graphic symbol named "Smoke", pressing the shortcut key in the scene of the "smoke" component to paste the smoke picture you just cut into the scene.

5. Double-click the movie clip symbol "House" in the library and go back to its edit scene. Then create a new "smoke" layer, and then open the library, the just made the "smoke" component to "smoke", and adjust its position to the "house" chimney, as shown in Figure 4.

Figure 4

The steps above look like superfluous. In fact, this is the rational use of material skills. This allows you to design a smoke effect without adding a component. The sensation of being angry makes the whole animation not lifeless. below to see the "smoke" of the specific production methods.

6. Hold down the CTRL key while selecting frame 35th of the two layers in the housing component scene and F5 the key. Then select the "Smoke" layer 35th frame, press F6 key to insert keyframes. Right-click the 1th frame of the smoke layer and select the Create motion tween command. As shown in Figure 5.


Figure 5

7. Select the smoke component in frame 1th of the smoke layer, and then use the Freeform tool in the tools panel to shrink the smoke element to a point where it is still on the chimney. The effect of "smoke" here is well designed.

Now, open the library, hold down the CTRL key to select the house and smoke components, and then right-click the shadow selection, select the "Move to new File" command in the pop-up menu, and enter the name of the new Component Management folder in the new Folder pane, "Snow House." As shown in Figure 6.


Figure 6

When designing large animations, such as MTV, we always use folders to manage components. This can be very convenient to manage, invoke and edit components, greatly save design time and improve work efficiency. Therefore, it is recommended that readers in the design of complex animation should be a piece of animation related components into the same folder.

8. The design of other landscapes. First, set the zoom ratio of the scene to 200%. Then grabbed a picture of the snow House on the back of the design to foil the background of the snow. Part of the Blue Line box in Figure 7.


Figure 7

Create a new graphic symbol called "snow" and paste the picture you just cropped into the scene. As shown in.

Figure 8

9. Then create some graphic symbols, then import a snowman, footprints. Snow trees can be intercepted in the "house". All other components are shown in Figure 9.

Figure 9

10. The design of the "text" movie clip element can be arbitrary, and it depends on what the reader wants to say. The key is to be able to and animation side by side, complementary. There is not much to say about the length of the relationship. But note that the text animation design can not be too fancy, as little as possible design text animation, less use a variety of fonts, but also try not to use deformation animation and transparent animation, otherwise it will increase file volume.

11. Design random Snowflakes. This is the difficulty in this example, involves a lot of flash programming knowledge. But it's also a very important part.

Create a new graphic symbol named Snowflake. Set the scene scale to 800%, and then in the snowflake symbol's scene, hold down the SHIFT key to draw a circle with a diameter of 5px by using the Ellipse tool. As shown in Figure 10.

Figure 10

12. Opens the Create new symbol panel creates a new movie clip symbol symbol named "Snow movie", as shown above. Double-click the movie clip symbol symbol "Snow movie" in the library to enter its edit scene. Rename the scene "Layer 1" to the "snowflake" layer, then drag the graphic component "snowflake" from the library to the scene in that layer.

13. Select frame 40th of the Snowflake Layer Press the F6 key to insert the keyframe, then right-click Frame 1th to select Create motion tween, and then select Frame 20th and then insert a keyframe.

14. Right-click the layer and select the Add Boot Layer command from the pop-up menu to create a boot layer for the snowflake layer. Draw a curve in the guide layer, then let the "snowflake" element of frame 1th and 40th be adsorbed at the left end of the curve, and the snowflakes at the 20th frame are adsorbed at the right end of the curve. As shown in Figure 11.


Figure 11

15. Create a new movie clip symbol named "Snow". From the gallery, drag the Snowflake movie component to the "Snow" scene, select Frame 3rd by pressing the F5 key to insert the frame. Click the Snowflake movie in the scene and take an instance name "Snowflake" for the movie clip "Snowflake movie" in the properties panel, as shown in Figure 12.

Figure 12

16. Create a new "script" layer in the "snow" component. As shown in Figure 13. Select the 1th, 2, 3 frames of the layer separately, then press the F7 key to insert the blank Keyframe, and press F9 to open the Actions panel and type the following code:

Figure 13

  The code in frame 1th is as follows:

n is the only depth level of the copied movie clip. Depth level is the stacking order of the copied movie clips, that is, the level of the movie
n = 1;
Variable flakes is used to control the number of snowflakes, which can control the density of snowflakes.
flakes = 100;

  The code in frame 2nd is as follows:

i = 1;
while (i<=flakes) {//Control snow falling speed
this["Snowflake" add i]._y + = Math.random () *2 + 2;
i++;
}
if (n = = flakes) {
n = 1;
} else {
Snowflakesize = Math.random () *30+30; Copy Snowflake Movie
Duplicatemovieclip ("Snowflake", "snowflake" add n, N); Control the falling range of snowflakes
this["Snowflake" Add n]._x = Math.random () *500; Controlling the size of snowflakes
this["Snowflake" add N]._xscale = snowflakesize;
this["Snowflake" add N]._yscale = snowflakesize;
n++;
}

  The code in frame 3rd is as follows:

Make the circuit of the film, so that the film can be played Non-stop
gotoAndPlay (2);

The code is not very much, nor is it difficult to understand. In code, Math.random () is used to produce random numbers that return a value between 0 and 1, but do not include 1. The role of Duplicatemovieclip () is to copy a movie clip. The _x property and the _y property are the coordinates of the movie clip in the scene, which is where they are located in the scene. The _xscale property and the _yscale property are the horizontal and vertical scaling properties of the movie clip. The purpose of this object is to refer to the movie clip instance.

  Design Home View

1. Between the main scenes, let's take a look at all the layers of the main scene and the upper and lower relationships. As shown in Figure 14.

Figure 14

2. Rename the "Layer 1" layer in the main scene to the "background" layer, as shown in Figure 14. Press the shortcut key "Shift+f9" to open the Color mixer panel, as shown in Figure 15.

Figure 15

Then use the "ellipse" tool to pull a circle (no sideline) in the scene and set the width, height, 480px, and 380px of the circle in the Properties panel. The final setting is as follows (the white area is the scene and the scene scaling is 50%). As shown in Figure 6.

Figure 16

3. New "Snow" layer. Open the library, drag the graphic symbol "snow" from the library to the layer, and then drag it with the Transform tool to zoom in, and the final setting is shown in Figure 17.

Figure 17

4. Create a new "landscape" layer. Then drag the "House" component and other components from the library to the corresponding layer in the scene and set their position. The same component can be reused, such as the number of snow in a scene, and can be copied to resize it, as shown in Figure 18. Thus reducing the size of the file.

Figure 18

5. The footprints of the design of a little more cumbersome, but not difficult, more than a few shortcuts ctrl+t open the "deformation" panel to adjust the size and angle of the footprints, so that the time can be twice as much. Drag the movie clip symbol "Snowflake" from the library into the scene.

6. Create a new text layer to place the text movie clip symbol. Then open the library and drag the text movie symbol that the reader has designed for you to the layer.

Now press the shortcut key Ctrl+enter to see the final effect. I believe that after learning this example, the reader will be able to design their favorite greeting card. In the example, the background of the main color adopted pink, its design concept is: Express the enthusiasm of friends or lovers, so, no matter from which point of view, look at this card, you will not feel cold, even if the snow is still down.

In addition, the layout of the scene in greeting cards, such as the size of the tree, the location of the snowman is also fastidious, this will be a lot of readers accumulate experience. The principle of the near big far small, not too close to each other. And the most important thing is how to make full use of the material, design a spiritual, personalized work. I hope the readers will accumulate more experience in this field.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.