Two butterflies flying animation, flash production method

Source: Internet
Author: User
Tags modify reference

  Effect Demo:

Click here to download the source file

  Production steps:

1. Launch Flash MX 2004, "modify"-->> "document" to modify the properties of the document, as shown in the following illustration:

2. Everyone through watching the above animation may have been analyzed, or we go back to see the production method of dragonflies:Flash production of beautiful dragonfly flying effect animation can be observed that dragonflies or butterflies are the body does not move, but only the wings move! So our key is to draw the wings of butterflies! Here we take full advantage of flash provided by the drawing tools! Of course here we should be a new component named Butterfly Wing, behavior is graphics. The specific effect is as follows:

New component named Butterfly Wing 2, behavior is graphic, the effect is as follows:

3. Butterfly wings are drawn well, let's do wing animation, create a new movie symbol, Name: Butterfly animation, behavior: movie clips; we all know that butterflies have two wings (nonsense!). So here we should build 3 layers, the bottom layer, draw the body of the butterfly, above two separate butterfly two wings! The effect is as follows:

Butterfly Body:

Frame 1th, after the combination of the effect:

Frame 3rd, after the combination of the effect: (using the deformation tool adjustment)

Frame 10th, after the combination of the effect:

Frame 13th, after the combination of the effect:

4. The same way to make the 2nd butterfly animation, a new movie symbol, Name: Butterfly animation 2, behavior: movie clips; Of course, the same frame as above, the effect will be worse, the effect is as follows:

Frame 1th, after the combination of the effect:

Frame 4th, after the combination of the effect:

Frame 6th, after the combination of the effect:

Frame 9th, after the combination of the effect:

Butterfly animation is all made!

5. Now we start by quoting the two animations we just made, create a new movie symbol name: reference, behavior: movie clips, then i we build the Butterfly animation from the library dragged out; Create a new symbol name: Reference 2, behavior: Movie clips, drag butterfly animation 2 out of the library.

6. Create a new component name: Auxiliary, behavior: movie clips, draw a small rectangle in the scene. The following figure:

7. Let's go back to the main scene, start the animation, first in Layer 1 to import a picture for background use, and then create a new layer, renamed Butterfly Shadow, then we pull out from the library "reference" and "Reference 2", respectively, set their alpha to 10%, Give them an instance named SHADOW0_MC and SHADOW1_MC, respectively. The following figure:

8. Create a new layer, then the "reference", "Reference 2" and auxiliary drag out, pay attention to the auxiliary to drag two times, put the effect of the following figure:

The reference name instance is then named FLY0_MC, the reference 2 instance is named FLY1_MC, and the secondary instance is named: Transp0, Transp1.

9. Create a new layer renamed action, then press F9 to open the Action panel, enter the following action:

probability = 100;
Scene_width = 500;
Scene_height = 290;
Speed = 0.03;
depth = 15;
MovieClip.prototype.smoothMove = function (speed, TARGETX, targety) {
This._x + + speed* (targetx-this._x);
This._y + + speed* (targety-this._y);
};
MovieClip.prototype.rotateTo = function (Targetx, targety) {
var diffx = targetx-this._x;
var diffy = targety-this._y;
This._rotation = Math.atan2 (Diffy, DIFFX) *180/math.pi;
};
_root.transp0.onenterframe = function () {
if (random (probability) = = 1) {
target0x = random (scene_width);
target0y = random (scene_height);
}
this._visible = 0;
This.smoothmove (Speed, target0x, target0y);
};
_root.transp1.onenterframe = function () {
if (random (probability) = = 1) {
target1x = random (scene_width);
target1y = random (scene_height);
}
this._visible = 0;
This.smoothmove (Speed, target1x, target1y);
};
_root.fly0_mc.onenterframe = function () {
This.smoothmove (Speed, transp0._x, _root.transp0._y);
This.rotateto (_root.transp0._x, _root.transp0._y);
};
_root.fly1_mc.onenterframe = function () {
This.smoothmove (Speed, transp1._x, _root.transp1._y);
This.rotateto (_root.transp1._x, _root.transp1._y);
};
_root.shadow0_mc.onenterframe = function () {
This.smoothmove (Speed, transp0._x, _root.transp0._y+depth);
This.rotateto (_root.transp0._x, _root.transp0._y+depth);
};
_root.shadow1_mc.onenterframe = function () {
This.smoothmove (Speed, transp1._x, _root.transp1._y+depth);
This.rotateto (_root.transp1._x, _root.transp1._y+depth);
};

The animation is finished, press CTRL + ENTER to test the animation! Thank you!



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.