Flash CS4 Mouse Switch enlarge interactive menu (figure)

This example describes how to make use of flash CS4 to create the interactive menu of mouse click Switch, mainly use trigonometric knowledge to make the wrapping menu effect, and to control the button in the menu by listening to the button event State, make it switch after the clicked and enlarge to show the center position of the stage.

This example thought and the step: first uses the mask function to make the high light button, then adds the As Code control menu the switching effect.

The results are as follows, click on the small button around to see the interactive demo effect.

　　One, draw the high light button

(1) Create a new 600x300 pixel in Flash, a blank document with a frame frequency of 12fps. Use the Rectangle tool to draw a rectangle that is the same size as the stage, and then set the fill type to radial, the 1th color to (r:0,g:114,b:188), the 2nd color to (r:0,g:0,b:0), and the fill effect as shown in Figure 1.

　　

Figure 1 Production background

(2) Press Ctrl+f8 to create a new movie clip (named button), and then use the Oval tool to draw a circle and set the fill type to "radial", the 1th color to (r:153,g:204,b:51), and the 2nd color standard color (r:0,g : 102,b:51), the fill effect is shown in Figure 2.

　　

Figure 2 Drawing a sphere

(3) Create a new layer and then use the Rectangle tool to draw a rectangular color block, set the fill color to (r:153,g:204,b:51), and then use the Freeform tool to process the effect as shown in Figure 3.

　　

Figure 3 Drawing a rectangular bar

(4) Create a new mask layer, and then copy the button to the layer, then set the layer to the mask layer of the two layers below, as shown in Figure 4.

　　

Figure 4 Creating a mask layer

(5) Create a new button background layer, then copy the button to the layer, adjust the alpha of the 1th color to 10%, and then move the 2nd color marker to the left by some pixels, as shown in Figure 5.

　　

Figure 5 Drawing the button light and shade

(6) Create a new "high light" layer, and then use the Oval tool to draw an ellipse, and set the fill type to "linear", the 1th color is (r:255,g:255,b:255), Alpha is 70%, and the 2nd color label is (r:255,g:255,b:255), Alpha is 50%, the 3rd color is (r:255,g:255,b:255) and Alpha is 0%, as shown in Figure 6.

　　

Figure 6 Drawing button High light

　　second, add as control

(1) Add a symbol class to the button movie clip in the library panel and modify the base class to the Sprite class, as shown in Figure 7.

　　

Figure 7 Adding a component class

(2) Return to "Scene 1", create a new as layer, and then enter code in frame 1th. This example uses the buffering principle, so to import the Tweener class first, the 3rd to 6th line of code is a frequently used programming method, first create a container to store all the objects, facilitate unified control, and then use the for () loop statement to create 12 button symbol class objects (such as the 15th to 20th line of code). (www.3lian.com)

AS3 Code:

import caurina.transitions.tweener;//Imports Tweener class
//Create a container for storing all the created objects in this example
Var Container_mc:sprite = new Sprite ();　　
container_mc.x = STAGE.STAGEWIDTH/2;//positioned at the center of the stage
Container_mc.y = STAGE.STAGEHEIGHT/2;
AddChild (CONTAINER_MC);
var angle:uint=0;//Angle
var r:number = 100;//Circle radius
var _length:uint = 12;//button number
var newx = 0;//click Clicked　　　button x coordinates
var newy = 0;//clicked button y-coordinate
for (var i=0; i<=_length; i++) {
var _mc:sprite = new button ();
_mc.buttonmode = true;
_mc.name = "MC" + I;
_mc.addeventlistener (Mouseevent.click,clickhandler);
Container_mc.addchild (_MC);　　　　
if (i = = _length) {
_mc.x = newx;
_mc.y = Newy;　　　　
//Specifies that this object is not allowed to receive mouse message
_mc.mouseenabled = false;
Tweener.addtween (_MC, {scalex:2, scaley:2, time:1, Transition: "Easeinoutquint"});　　　　
} else {
Angle + =
var radians:number = angle * MATH.PI/180;
Var x:number = Math.Cos (radians) * R;
var y:number = Math.sin (radians) * R;
_mc.x = x;
_mc.y = y;
}

(3) The 22nd to 29th line of code is to use trigonometric functions for precise positioning, first through the for () loop to create _length button objects, and then the angle of increment (angle + + 30), after the known radius and angle, The triangle function can be used to obtain the position of the button coordinates of different angles, the main principle of which is shown in Figure 8. (3lian material)

　　

Fig. 83 Principle of angle function

(4) After the creation of the button sorting schematic diagram and the effect of publishing the movie as shown in Figure 9 and Figure 10, where the coordinate origin in the schematic diagram is the origin of the CONTAINER_MC container.