我的联盟 作品 招聘 外包 人才  酷站加油 国内 国外 CSS  资源图库 图库 模板 矢量 图标  设计欣赏 界面 LOGO 插画 艺术  网页 平面  专访 名站 竞赛 社区
当前位置:首页 > 网页教程 > Flash教程 > 正文
AS3.0实例:旋转菜单的制作
来源:中国教程网论坛 作者:cao4811 2010年01月19日 15:26 网友评论:1条 点击:
演示:

http://www.68design.net/download/201001/20100115171942218.swf

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

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

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

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

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

6、动画部分的制作已经完成,下面进入as部分。将由代码产生所有的效果

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
上一篇:AS3.0实例:制作转动的星   下一篇:AS2.0 制作切换菜单效果
收藏此页】【打印】【关闭
 相关文章  我要点评
·HTML5最终战胜Flash 或引领新一轮科技革命
·投资者保护主题公益广告网上FLASH征集大赛启动
·Adobe CEO:与苹果的Flash争议已结束
·谷歌将启动Flash内容即时预览
·Flash广告设计要素
·YouTube力挺WebM视频格式 Flash遭受重创
·不同平台下菜单的交互设计探析
·5千/1万元 帅康厨房七宝卡通/Flash大赛

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 设计服务 | 广告服务 | 常见问题 | 网站地图 | 法律声明 | 联系我们
Copyright © 2003-2012 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】