手机
当前位置:查字典教程网 >网页设计 >Flash教程 >Flash AS3代码绘制旋转的3D立体菜单动画效果
Flash AS3代码绘制旋转的3D立体菜单动画效果
摘要:在这篇教程里,我们将学会如何利用FlashAS3代码绘制旋转的3D立体菜单动画效果,教木马将会根据鼠标决定旋转速度。教程绘制效果非常酷,转发...

在这篇教程里,我们将学会如何利用Flash AS3代码绘制旋转的3D立体菜单动画效果,教木马将会根据鼠标决定旋转速度。教程绘制效果非常酷,转发过来,感兴趣的朋友快点来学习吧。

演示:

绘制步骤:

1、新建Flash文件,设置宽、高属性为 550 × 400 。

2、用圆角矩形工具,画一个 158 × 35的长方形。笔触为8白色,填充色#0 F7E 88。图1:

Flash AS3代码绘制旋转的3D立体菜单动画效果1

3、将长方形转换成名为Menu Item的影片剪辑。设定注册点为中心。图2:

Flash AS3代码绘制旋转的3D立体菜单动画效果2

4、双击舞台上的影片剪辑,进入编辑状态。创建动态文本,在它里面输入需要的本文。图3

Flash AS3代码绘制旋转的3D立体菜单动画效果3

5、在属性面板中输入实例名字menuItemText 。

6、按下字符嵌入按钮,插入下列字型。图4:

Flash AS3代码绘制旋转的3D立体菜单动画效果4

7、切换回主场景1,删除舞台上的影片剪辑,实例将由代码生成。

8、打开库元件面板,右键单击影片剪辑,(CS3选链接、CS4选属性)给元件添加一个绑定类。类名MenuItem 。图5:

Flash AS3代码绘制旋转的3D立体菜单动画效果5

9、选中第1帧,打开动作面板输入代码:

复制代码代码如下://The total number of menu items

const NUMBER_OF_ITEMS:uint = 20;

//This array will contain all the menu items

var menuItems:Array = new Array();

//Set the focal length

var focalLength:Number = 350;

//Set the vanishing point

var vanishingPointX:Number = stage.stageWidth / 2;

var vanishingPointY:Number = stage.stageHeight / 2;

//We calculate the angleSpeed in the ENTER_FRAME listener

var angleSpeed:Number = 0;

//Radius of the circle

var radius:Number = 128;

//Calculate the angle difference between the menu items (in radians)

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

//This loop creates and positions the carousel items

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

//Create a new menu item

var menuItem:MenuItem = new MenuItem();

//Calculate the starting angle for the menu item

var startingAngle:Number = angleDifference * i;

//Set a currentAngle attribute for the menu item

menuItem.currentAngle = startingAngle;

//Position the menu item

menuItem.xpos3D = - radius * Math.cos(menuItem.currentAngle) * 0.5;

menuItem.ypos3D = radius * Math.sin(startingAngle);

menuItem.zpos3D = radius * Math.cos(startingAngle);

//Calculate the scale ratio for the menu item (the further the item -> the smaller the scale ratio)

var scaleRatio = focalLength/(focalLength + menuItem.zpos3D);

//Scale the menu item according to the scale ratio

menuItem.scaleX = menuItem.scaleY = scaleRatio;

//Position the menu item to the stage (from 3D to 2D coordinates)

menuItem.x = vanishingPointX + menuItem.xpos3D * scaleRatio;

menuItem.y = vanishingPointY + menuItem.ypos3D * scaleRatio;

//Assign an initial alpha

menuItem.alpha = 0.3;

//Add a text to the menu item

menuItem.menuItemText.text = Menu item + i;

//We don’t want the text field to catch mouse events

menuItem.mouseChildren = false;

//Assign MOUSE_OVER, MOUSE_OUT and CLICK listeners for the menu item

menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);

menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);

menuItem.addEventListener(MouseEvent.CLICK, itemClicked);

//Add the menu item to the menu items array

menuItems.push(menuItem);

//Add the menu item to the stage

addChild(menuItem);

}

//Add an ENTER_FRAME listener for the animation

addEventListener(Event.ENTER_FRAME, moveCarousel);

//This function is called in each frame

function moveCarousel(e:Event):void {

//Calculate the angle speed according to mouseY position

angleSpeed = (mouseY - stage.stageHeight / 2) * 0.0002;

//Loop through the menu items

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

//Store the menu item to a local variable

var menuItem:MenuItem = (MenuItem)(menuItems[i]);

//Update the current angle of the item

menuItem.currentAngle += angleSpeed;

//Calculate a scale ratio

var scaleRatio = focalLength/(focalLength + menuItem.zpos3D);

//Scale the item according to the scale ratio

menuItem.scaleX=menuItem.scaleY=scaleRatio;

//Set new 3D coordinates

menuItem.xpos3D=- radius*Math.cos(menuItem.currentAngle)*0.5;

menuItem.ypos3D=radius*Math.sin(menuItem.currentAngle);

menuItem.zpos3D=radius*Math.cos(menuItem.currentAngle);

//Update the item’s coordinates.

menuItem.x=vanishingPointX+menuItem.xpos3D*scaleRatio;

menuItem.y=vanishingPointY+menuItem.ypos3D*scaleRatio;

}

//Call the function that sorts the items so they overlap each other correctly

sortZ();

}

//This function sorts the items so they overlap each other correctly

function sortZ():void {

//Sort the array so that the item which has the highest

//z position (= furthest away) is first in the array

menuItems.sortOn(zpos3D, Array.NUMERIC | Array.DESCENDING);

//Set new child indexes for the images

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

setChildIndex(menuItems[i], i);

}

}

//This function is called when a mouse is over an item

function mouseOverItem(e:Event):void {

//Change the alpha to 1

e.target.alpha=1;

}

//This function is called when a mouse is out of an item

function mouseOutItem(e:Event):void {

//Change the alpha to 1

e.target.alpha=0.3;

}

//This function is called when an item is clicked

function itemClicked(e:Event):void {

trace(Item clicked! Add your own logic here.);

}

10、完成,测试你的影片

教程结束,以上就是利用Flash AS3代码绘制旋转的3D立体菜单动画效果过程,希望对大家有所帮助!

【Flash AS3代码绘制旋转的3D立体菜单动画效果】相关文章:

用Flash制作按钮效果

Flash制作卡通人物眨眼动画的方法

Flash教程:制作3D旋转动画效果

FLASH中设置动态文本的半透明效果

Flash制作光影字效果

Flash CS4方块形状的动画特效制作

Flash AS3教程:实现鼠标跟随炫舞线条动画效果

Flash制作飞速旋转效果

Flash实例教程:简单的图片切换特效动画

Flash AS实现的蝌蚪摆尾动画的教程

精品推荐
分类导航