Flash makes a beautiful dragonfly menu

Menu

Picture and procedure completely original OH.

The effect is as follows:

Menu Introduction:

The grass is green and there is a little dragonfly on it. When you move your mouse over a button, the Dragonfly quickly flies to you and stops there slowly. When you move the mouse over the menu, the Dragonfly flies home.

First draw a dragonfly, a total of two frames, the first frame wing and the second frame slightly different wings, forming the effect of wing jitter, and convert it into components

Then draw on behalf of the home page, works, diary icon, and its link name named Home,photo,diary,work,music, and in the first frame export

Use a mask to make light across the effect.

Layer 1 is a wide block for the mask, and Layer 3 is the shaded light.

Once done, turn this effect into a component with its link name named Flash and the first frame to export

Make the button in Layer 1 draw a white transparent box, so that users click on the button, and not the point of empty

In Layer 2, build a dynamic text box named txt

Now is the process of making the entire menu, as shown in the following figure

On the bug layer, drag the Dragonfly component that you just painted, put the instance name of the bug BTN layer onto the five button, and then name the instance name as Home,photo,diary,work,music

Draw a few intervals on the interval layer to separate the buttons

Convert the menu you just made to a component, as shown in the following image

The link name is Menu,as 2.0 class for menu, note case.

This is the last move on the FLA file. Back to the main scene. The following figure:

On the BG layer, draw some flowers and make a background to draw a translucent white strip on the line layer, which only decorates the menu. Drag the menu element that you just made on the menu layer. All OK, save it. Behind is the code.

Build a text file, save as menu.as, find the above posts have "link named Menu,as 2.0 Class for menu, note that the case" such a word. By the way, you must name the menu so that it stays consistent with the As 2.0 class menu.

Here is the code in the file

* * Author CC * Date 2006.04 */class Menu {
The instance name of the button is private var home:movieclip; private Var Photo:movieclip; private Var Diary:movieclip; private Var Work:movieclip; private Var Music:movieclip;
Private Var bug:movieclip;//the instance name of the clear Dragonfly
The private var balltween:object;//is used to use the Tween class's pair like private Var depth_1:number; private Var Textinitcolor:number; private Var Textovercolor:number;
constructor function Menu () {textinitcolor = 0x707d37;//text initial color textovercolor = 0xffffff;//mouse over text color depth_1 = 1;//depth Showmenut EXT ();//Set the text content on the edge of the button initbtn ();//All functions in the menu are in this function};
Private Function Showmenutext (): Void {home.txt.text = "home Page"; photo.txt.text = "CC Photo"; diary.txt.text = "CC Diary"; Work.txt.te XT = "CC works"; Music.txt.text = "My Music"; }
Private Function Initbtn (): Void {var ins = this;//to be able to use global variables in functions such as Onrollover set bug._x = home._x;//Set the initial position of the clear Dragonfly, let it stop on top of the bug on the front page. gotoAndStop (1);/Set the initial state of the wings to be static
Put instances of several buttons into an array to save code var Btnarr:array = new Array (home,photo,diary,work,music); for (var i=0;i;//to remove each button sequentially
When the mouse passed the button, the Dragonfly began to fly toward the direction of the button, flew to stop. Mc.onrollover =function () {//When each button passes over the mouse, it is set to its text color Ins.settextcolor (this,ins. Textovercolor); When the mouse passes through the load light across the effect This.attachmovie ("flash", "flash" +2,2);
To stop Ins.ballTween.stop () by the motion of the unfinished Dragonfly flight;
To calculate the distance between the Dragonfly and the current mouse button, the purpose is to achieve the following to realize the Dragonfly turning to the direction of the button var instance:number = this._x-ins.bug._x;
If the Dragonfly is facing to the left, and the button is on the right side of the clear dragonfly, then the Dragonfly face to starboard. if (instance>0 && ins.bug._xscale>0) {Ins.bug._xscale =-ins.bug._xscale;}/Ibid., when the button is to the left of the Dragonfly, make it face to left if ( Instance<0 && ins.bug._xscale<0) {Ins.bug._xscale =-ins.bug._xscale;}
Realize Dragonfly wing flap effect Ins.bug.play ();
Using the Tween class to achieve the flying//strong+easeout of the Dragonfly for deceleration from start to finish//strong+easein for accelerated movement from start to finish var Easetype = Mx.transitions.easing.Strong.easeOut;
The position of the Dragonfly when it begins to fly var begin = ins.bug._x;
The position of the Dragonfly at the end of the var ending = this._x;
Time of flight sharing var = 2;
The specified Flying object is the dragonfly var mc = Ins.bug;
Fly, fly. Ins.balltween = new Mx.transitions.Tween (MC, "_x", Easetype, begin, end, time, true);
When the fly is finished, the Dragonfly wings stop flapping ins.ballTween.onMotionFinished = function () {ins.bug.gotoAndStop (1);}; };
When the mouse leaves the pointed button, the dragonfly flies home mc.onrollout = function () {//Set the color of the word ins.settextcolor (this,ins. Textinitcolor);
Remove light across effects var mcflash:movieclip = this.getinstanceatdepth (2); Mcflash.removemovieclip (); Let the head of the Dragonfly turn to the direction of the first page if (ins.bug._xscale<0) {Ins.bug._xscale =-ins.bug._xscale;}
Stop the Unfinished Flight Action Ins.ballTween.stop ();
Realize Dragonfly wing flap effect Ins.bug.play ();
Start flying, here None adopts a uniform flying var easetype = Mx.transitions.easing.None.easeOut; var begin = ins.bug._x;
Toward the first page of the direction of the fly var end = ins.home._x; var time = 4; var mc = Ins.bug; Ins.balltween = new Mx.transitions.Tween (MC, "_x", Easetype, begin, end, time, true); ins.ballTween.onMotionFinished = function () {ins.bug.gotoAndStop (1);}; }; }
Load each small icon to the left of the text var pichome:movieclip = Home.attachmovie ("Home", "Home" +depth_1,depth_1); var picphoto:movieclip = Photo.attachmovie ("Photo", "photo" +depth_1,depth_1); var picdiary:movieclip = Diary.attachmovie ("Diary", "Diary" +depth_1,depth_1); var picwork:movieclip = Work.attachmovie ("Work", "work" +depth_1,depth_1); var picmusic:movieclip = Music.attachmovie ("Music", "Music" +depth_1,depth_1); Click on each button, the code executed, what you want to do, write yourself casually home.onrelease = function () {}
Photo.onrelease = function () {}
Diary.onrelease = function () {}
Work.onrelease = function () {}
Music.onrelease = function () {}
}//Set the color of the word private Function SetTextColor (mc:movieclip,usecolor:number): Void {var my_fmt = new TextFormat (); My_fmt.color = Usecolor; Mc.txt.setTextFormat (MY_FMT); } }

You can press Ctrl+enter to test it.

Finally, there are many things that need to be changed in this menu. For example, adding the number of buttons in the menu is not convenient. Should provide a good interface with the outside. In addition to the arrangement of buttons, the spacing between them should also be controlled by the program and should be more flexible. I will improve it later and send a tutorial again.