Flash AS3实例教程:制作旋转的菜单动画

http://www.webjx.com/  2010-01-16 11:45:53  来源:中国教程网论坛 作者:cao4811

Webjx核心提示:AS3.0实例:旋转菜单的制作.

演示:



1、新建一个Flash文件,宽550高400像素,背景为黑色。保存文件。

2、用椭圆工具,画一个边框白色,填充为红色的27*27的圆形。图1:

3、按F8键,把圆形转换成影片剪辑,如下设置:图2。

4、按Ctrl+L组合键,打开库双击Item影片剪辑进入编辑状态。锁定图层1,添加图层2。在圆形的中心添加一个动态文本。图3:

5、在属性面板中命名为“itemText”并输入一个数字,颜色为白色,大小为14至17左右。点击“字符嵌入”按钮,设置如图4:

6、效果。

7、新建一个ActionScript文件,编写一个名为“Item.as”的外部类文件。代码如下:
    package { 

            import flash.display.MovieClip; 

            public dynamic class Item extends MovieClip { 

                    public function Item() { 

                    } 

            } 

    }

保存在fla文件的同一目录下。

8、返回到场景1,在图层1的第一帧输入代码:

//Save the center coordinates of the stage

var centerX:Number = stage.stageWidth / 2;

var centerY:Number = stage.stageHeight / 2;

//The number of items we will have (feel free to change!)

var NUMBER_OF_ITEMS:uint = 15;

//Radius of the menu circle (horizontal and vertical)

var radiusX:Number = 200;

var radiusY:Number = 100;

//Angle difference between the items (in radians)

var angleDifference:Number = Math.PI * (360 / NUMBER_OF_ITEMS) / 180;

//How fast a single circle moves (we calculate the speed

//according to the mouse position later on...)

var angleSpeed:Number = 0;

//Scaling speed of a single circle

var scaleSpeed:Number = 0.0002;

//This vector holds all the items

//(this could also be an array...)

var itemVector:Vector.<Item> = new Vector.<Item>  ;

//This loop creates the items and positions them

//on the stage

for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) {

                 //Create a new menu item

        var item:Item = new Item();

                 //Get the angle for the item (we space the items evenly)

        var startingAngle:Number = angleDifference*i;

                 //Set the x and y coordinates

        item.x = centerX + radiusX * Math.cos(startingAngle);

        item.y = centerY + radiusY * Math.sin(startingAngle);

                  //Save the starting angle of the item.

        //(We have declared the Item class to be dymamic. Therefore,

        //we can create new properties dynamically.)

        item.angle = startingAngle;

                 //Add an item number to the item’s text field

        item.itemText.text = i.toString();

                 //Allow no mouse children

        item.mouseChildren = false;

                 //Add the item to the vector

        itemVector.push(item);

                 //Add the item to the stage

        addChild(item);

}

//We use ENTER_FRAME to animate the items

addEventListener(Event.ENTER_FRAME, enterFrameHandler);

//This function is called in each frame

function enterFrameHandler(e:Event):void {

                 //Calculate the angle speed according to mouse position

        angleSpeed = (mouseX - centerX) / 5000;

                //Loop through the vector

        for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) {

                                   //Save the item to a local variable

                var item:Item = itemVector[i];

                                   //Update the angle

                item.angle += angleSp

                                   //Set the new coordinates

                item.x = centerX + radiusX * Math.cos(item.angle);

                item.y = centerY + radiusY * Math.sin(item.angle);

                                   //Calculate the vertical distance from centerY to the item

                var dy:Number = centerY - item.y;

                                   //Scale the item according to vertical distance

                item.scaleY = (dy / radiusY);

                                   //If we are above centerY, double the y scale

                if (item.y<centerY) {

                        item.scaleY *= 2;

                }

                                   //Set the x scale to be the same as y scale

                item.scaleX = item.scaleY;

                                   //Adjust the alpha according to y scale

                item.alpha = item.scaleY + 1.1;

                  }

}
9、好了,测试影片。

附件下载:菜单.rar
更多