Flash MX 2004 Build a realistic lighter

Life in the lighter is everywhere, but, in Flash animation How to achieve a realistic lighter effect? Don't worry, after learning This example, you will know how to make a realistic simulation of the lighter. In the production of the effect of the use of a lot of practical skills and methods, such as frame jump skills, flame, spark production methods; The results also used a number of commonly used control statements, and how to use object methods to control the motion of the film.

First look at the effect:

Click here to download

Design steps:

Open the Flash MX. Press the shortcut key ctrl+j, then set the scene to 450pxx280px, the background is black, 12fps.

First, design components

1. Make the fuselage

Press the shortcut key Ctrl+f8 to create a new graphic symbol named "image." Then in the "image" scene to draw a lighter, or press the shortcut key ctrl+r, import a lighter material, see figure 1.

2. Making Flames

Press the shortcut key Ctrl+f8 to create a new movie clip symbol named "Fire." Before making, let's look at the structure of the inner layer of the flame (Fire) movie clip, Figure 2.

Fig. 2 The layer structure diagram of fire

According to Figure 2, we want to create a new two layer, and then name them separately: "Aperture" layer, "Wei" Layer and "Nei" layer. Then in the front of each layer to empty out 4 frames, the role is to let it appear after the spark, in order to effect real. Select Frame 1th, press the shortcut key F9 Open the Actions panel, and then write the movie clip stop playing Command: Stop ();. The code for frame 16th is:

gotoAndPlay (5);

Design Nei. Nei is actually a piece of blue to do size change shape movement. First, press the shortcut key SHIFT+F9 to open the Color mixer panel and make the settings as shown in Figure 3.

Figure 3 Setting of the Color mixer panel

Figure 3 shows the setting of the right slider, the left slider is black, and the alpha value is 0%.

Click the 5th frame of the "Nei" layer, press F7 to insert a blank frame, and then draw a Nei with a shape such as the lower left figure, the value of the size 8 px X 13.5 px,x axis is-7 for the 0;y axis. Then use the Paint bucket tool to water color, and the Color Change button to select the flame after the color adjustment, the final effect as the bottom right image (this is 400% picture).

　　

Fig. 4 Blue Flame Design

Next, select the 9th, 13, 16 frames by pressing F6 to insert the keyframe, then click the 5th, 9, 13 frame, and then select the Shape command in the Tween Drop-down menu in the Properties panel. Then press the shortcut key Ctrl+i open the Info panel, the size of the 9th frame flame is set to the value of the 8.5 px x px,x axis, the y-axis value is -10.5 px, the 13th frame flame size is set to the 8.5 px x px,x axis, the value of the still 0 px;y axis is-9 px.

Design Wei. Open the Color mixer panel for the settings shown in Figure 5, the Wei effect is shown in Figure 6 (this is 200% picture).

　　

Figure 5 The Color mixer Panel Setup Figure 6 The final effect of Wei

The Wei design method is the same as Nei. Here is the slider set, the 1th slider: White, 0%, 2nd slider: White, 30%, 3rd slider: yellow (#FFFF99), 100%, 4th slider: See Figure 5, 5th slider: White, 80%. This design is to make Wei more layered sense, the effect of more realistic.

The Wei size and position are set with Nei. Just the settings in the Info panel are different. As for frame 5th and frame 16th, the value of the 0 Px;y axis for the 9 px X px,x axis is -20 px. The size of the 9th frame Wei is set to 9 px x px,x axis, the value of 0 px;y axis is -20 px, the 13th frame Wei size is set to 8 px x px,x axis, the value of the Y axis is -20 px.

Design aperture. Open the Color mixer panel as shown in Figure 7, and then draw an ellipse with the circle tool to make it cover Wei, as shown in Figure 8.

　　

Figure 7 Color Mixer Panel Setup Figure 8 aperture relative position

The aperture is the same size as in frame 5th and 16th, and the value of the 0 px;y axis for the PX X px,x axis is -25 px. Again, we simply set the aperture size in frame 9th to the same value as the px,x axis, the value of the 0 px;y axis is -27 px, the aperture size of frame 13th is set to the value of the PX X px,x axis, and the y-axis value is -25 px.

Aperture is designed to achieve the flow of hot air around the flame, so that the flame beat more realistic.

3. Making Sparks

Press the CTRL+VF8 key to create a new movie clip symbol named "Spark." Movie clip symbol "Spark" scene only 1 Layer 4 frames, the 1th frame of the spark size of 1 px X 1 px. This means that the spark can be any shape. The code in frame 1th is: Stop ();. The position and size of the spark in frame 2nd and frame 3rd are shown in Figure 10, figure 11. The white "╬" in the figure is the center point of the scene. The 4th frame is a blank frame, the code in the frame is: gotoandstop (1);.

　　　　

Fig. 9 The layer structure of the spark fig. 10 2 frame sparks Figure 11 3 frame Sparks

In fact, the spark settings in frames 2nd and 3rd are also simple, made up of small segments of white and yellow. So, we can use the line tool to draw a small segment, and then paint the bucket tool to paint. Of course, you can also use a little cyan and red to decorate.

In Flash, the time required to play 1 frames is 0.1 seconds, so the Mars animation only needs 0.3 seconds to play out, so that the use of human visual retention principle can easily achieve the pre-split effect of Mars.

4. Making Gears

Press the CTRL+F8 key to create a new movie clip symbol named "Gear." In the "Gear" scene, first draw a gray circle, and then draw some jagged black and white lines on the ring, as shown in Figure 12. The size of the gear is PX X px. (This is 400% picture)

Fig. 12 Design diagram of gear

Select a good gear, press the shortcut key Ctrl+g it into a picture, then click the 3rd frame, press F6 key to insert a keyframe. Right-click Frame 1th to select the Create Motion tween command. Press ctrl+t key to open the Transform panel, the 3rd frame of the gear angle to 20 degrees, that is, 20 degrees to the right rotation.

Finally, click the 3rd frame, press F9, and then enter the code: Stop ();. In this way, the gear is played once, that is, rotate 20 degrees after the stop, will not keep spinning.

5. Making Liquid Gas

Create a new movie clip symbol named "Fluid". Click the 1th frame in the "Fluid" scene and enter the code: Stop ();. Then click on Frame 5th, press F7 to insert a blank frame, and then draw a picture. The color of the picture is the #ecfff3,alpha value of 20%. The size of the picture is PX X px. The shape is shown in Figure 13.

Figure 13 Lighter Liquid

Click this picture, press the shortcut key ctrl+g to turn it into photos, then point No. 200 frame, press F6 key to insert a keyframe. Right-click Frame 5th to select the Create Motion tween command. Next, click on the No. 200 frame of the picture, open the Info panel, the size of the picture set to 1 px X.

Click the No. 201 frame, press F9, and then enter the code:

SetProperty ("_root.fire", visible, 0);
Set the Visible property of the movie clip symbol fire to 0, that is, the fire movie clip is not visible
gotoAndStop (1);

The main function of this code is to let the liquid gas in the lighter after use, the flame can be automatically extinguished.

6. Import Sound

As the saying goes, flowers still need green leaves to support. A flash animation If there is no music, then the animation will not be angry, but even if only a little music, may be able to play the finishing touches of the effect. So in this design concept, we introduce a gear and flint friction to the animation.

7. Make a button

This button is designed to drag it into the scene later, and then add a piece of code to the button to achieve control over all of the above movies. The effect of this button itself is to implement the button of the lighter to be pressed and the gear rotation event occurs simultaneously. Now let's take a look at the way this button is made.

Press the CTRL+F8 key to create a new button symbol named "Lighter button." Double-click the Layer 1 layer, rename it to the "button" layer, and then create a new layer and name it "Gear" layer.

In the graphic symbol image, intercept the button of the lighter and paste it in the up frame of the button "lighter button" scene, press the F6 key in the down frame to insert the keyframe, press CTRL + The T key opens the transform panel to rotate the lighter button 10 degrees to the right so that the button has the effect of being pressed. Click the down frame, press the shortcut key Ctrl+l Open the library, the sound of the import just dragged to the down frame. Click on the hit frame and draw a rectangle with the rectangular tool (no sideline). This rectangle just covers the lighter button with the gear.

In the library, drag the movie clip symbol "Gear" to the up frame of the "Gear" layer, then click the down frame and press the F6 key to insert the key frame, then click the gear in the up frame scene and press Ctrl+b to break it. Up frame scene of the gear film is broken into a picture, so that the mouse moved to the button, the gear will not rotate, but to wait until the mouse button on the press, down frame "Gear" movie clips will be called, the gears will rotate.

Second, the design scene

1. Build each layer

First, figure 14 to establish the layers, the upper and lower order of the layer can not be reversed, and then drag the corresponding movie clip to the layer 1th frame of the scene. Drag the movie clip "Fire" Into the "Fire" layer. This is mainly for the convenience of design, because we use a blank frame in the 1th frame of the above many movie clips, so when these movie clips are dragged into the scene it will be a small white circle, the selection and editing are cumbersome, put them in their respective layers, then you can choose to edit it by hiding the other layers of the lock.

Fig. 14 The structure of each layer in the main scene

2. Design lighter Layer

The lighter layer is placed on the lighter fuselage, and all we have to do is place the buttons and gears part of the original lighter picture.

3. Design fluid Layer

Drag the movie clip "Fluid" to the scene in the layer and lock the other layer. Select the movie clip (the scene is a small white circle), and then make the settings as shown in Figure 15.

Figure Properties Panel

The design of this layer has two important points, one is to give the movie clip "Fluid" The Entity name "Fluid", the second is the film clip's alpha value set to 44%, increase its transparency, in order to achieve the liquid gas transparent state.

4. Design fire, spark layer

Add the entity name Fire and Spark to the movie clips in the fire layer and spark layer. As for their position relative to the lighter fuselage I don't need to say that everyone should know, what, you don't know, I pour.

5. Design button Layer

The use of lighter button buttons has been mentioned before. Now we drag this button to the scene, click it, press F9 to open the Actions panel, and enter the following code:

On (Press) {//When the left mouse button is pressed, execute the following code
Telltarget ("fluid") {//Call movie entity fluid
gotoAndPlay ("5"); Jump to frame 5th of the movie entity and start playing
}
Telltarget ("Spark") {
gotoAndPlay ("1");
}
SetProperty ("Fire", _visible, 1); Make the Flame movie visible
Telltarget ("Fire") {
gotoAndPlay ("5");
}
}
On (release, rollOut) {//When the left mouse button is released, execute the following code
SetProperty ("Fire", _visible, 0); Make the Flame movie Invisible
Fluid.stop (); Stop the play of the flame movie
}

The above code to achieve the flame, spark, liquid gas control, so as to achieve a realistic film effect. The whole effect is all designed here. If there is anything you don't understand, you can download the source pieces.

Summary of the skills in this case

In the end of the article I used this example, but the article did not mention some of the design techniques to tell you. So that everyone in the design time can be achieved with less effort.

1. When the movie clip is a small white circle, its position in the scene is not good to judge, then we will lock the other layers in the scene, select it and double-click, followed by the Ctrl+enter key test, to see where it is. Then turn off the test, and then use the keypad key to adjust it, so that the design is more labor-saving.

2. When we pick a new object (break state), in the first color mixer panel will not see the status of the colors, then we are selected, click on the Properties panel in the Paint Bucket tool on the right side of the color selection box, After the color selection panel is bounced out and press ESC to cancel, you can see the composition of the object's color in the Colour mixer panel.

3. In the design of the real time to adjust the scale of the scene to make the design more convenient.