Make a simple bird animation with flash

Flash animation in some of the effects can be controlled by the code and generate image completion, such as the effect of this article is to achieve through a section of not complex code to two segments into a group of lifelike birds. Add a picture, absolutely can let you think of "Qianshan birds Fly" verse, see the effect picture shows.

Source File Download: Click here to download (28K, WinZip compressed file)

1. Create a new Flash document, click the Size button in the Properties panel, and open the document Properties panel to set the scene size to 350px x 300px and the frame frequency to 20fps.

2. Press the shortcut key Ctrl+f8 to create a new movie clip symbol named "Picture." Press the shortcut key Ctrl+r Open the import panel to import a picture of the landscape that can cover the scene, see the effect chart.

Figure 1

3. Press the shortcut key ctrl+l to open the library panel and drag the picture component to scene 1. Click the "Picture" component in the scene, press the shortcut key ctrl+k to open the "Align" Panel, tap the "relative to Stage" button, and then click the "left" and "Up" button. This makes it easy for the "picture" component to cover the entire scene.

Figure 2

4. Create a "bird" movie clip symbol. The layer settings for the component are shown in Figure 2. The "left wing" layer and the "right wing" layer make use of the "shape gradient" movement to allow two line segments to simulate the movement of bird wing agitation. The "Onion skins" command can be seen clearly, as shown in Figure 3. In each frame, the segment is only different in angle to produce the effect of motion. To set the angle of the line segment, you can press the shortcut key ctrl+t to open the variants panel for secondary settings.

Figure 3

5. Press the shortcut key ctrl+l to open the library panel. Right-click the bird component in the library, click the link command to open the link Properties panel, as shown in Figure 4, and set as shown in Figure 5. After you define a movie clip symbol by using the link Properties panel, you can invoke the symbol directly from your code without dragging the component to the scene.

Figure 4

Figure 5

6. Back to Scene 1, click the 1th frame of layer 1, press F9 to open the Actions panel and enter the following code:

Bird Animation
damp =. 95;
Numbirds = 30;
For (i=0 i<numbirds; i++) {
Bird = Attachmovie ("Bird", "Bird" +i, i);
bird._x = Math.random () *350+20;
Bird._y = Math.random () *300+20;
BIRD.VX = Math.random () *10-5;
Bird.vy = Math.random () *10-5;
BIRD.K = Math.random () *.0001+.0003;
Bird.gotoandplay (Math.Round (Math.random () *20));
}
Onenterframe = function () {
var totx = 0;
var toty = 0;
For (i=0 i<numbirds; i++) {
Bird = _root["Bird" +i];
Totx + = bird._x;
Toty + = bird._y;
}
AVGX = Totx/numbirds;
Avgy = Toty/numbirds;
For (i=0 i<numbirds; i++) {
Bird = _root["Bird" +i];
BIRD.VX + = (avgx-bird._x) *bird.k;
Bird.vy + = (avgy-bird._y) *bird.k;
BIRD.VX + + math.random ()-.5;
Bird.vy + + math.random ()-.5;
BIRD.VX *= Damp;
Bird.vy *= Damp;
Targangle = Math.atan2 (Bird.vy, BIRD.VX) *180/math.pi;
diff = targangle-bird._rotation;
if (diff<-180) {
diff + + 360;
}
if (diff>180) {
diff-= 360;
}
Bird._rotation + = diff*.2;
Bird._x + = BIRD.VX;
Bird._y + = Bird.vy;
}
}

7. To make the animation more interesting, we add the following code in the above code:

Mouse action
function Drawtopoint () {
for (i=0;i<numbirds;i++) {
bird=_root["Bird" +i];
bird.vx+= (_xmouse-bird._x) *bird.k*100;
bird.vy+= (_ymouse-bird._y) *bird.k*100;
}
}
OnMouseDown = Drawtopoint;

After adding this code, press the shortcut key to ctrl+enter the test. When the mouse clicks on the animation, all the "birds" will fly to the direction of the mouse click, very cool. The whole effect is all designed here.

If you feel the above effect is not good can see related articles: http://www.webjx.com/htmldata/2005-03-02/1109763937.html