Flash绘制旋转的3D效果菜单动画

   演示:

  ≯全屏显示或下载≮

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

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


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


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


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

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


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

  8、打开库元件面板,右键单击影片剪辑,(CS3选链接、CS4选属性)给元件添加一个绑定类。类名 MenuItem 。图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、完成,测试你的影片。

时间: 2024-10-07 13:29:16

Flash绘制旋转的3D效果菜单动画的相关文章

Flash制作四种3D隧道视觉动画效果

非常复杂的一个动画,如果您有好方法!可以来论坛里法贴.先看效果. 点击这里下载源文件(全屏幕观看效果) 新建立文档,创建影片剪辑元件,首先按照上次做的 齿轮动画的教程画出下面的图形. 使它当一个元件让他动起来.让它旋转. 然后再使用动起来的电影剪辑,再动起来达到3D效果,这里不给大家详细讲解了!具体看源文件吧! 然后截图如下.动画比较复杂. 其它的三种效果就看源文件吧!

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

  本教程着重于代码的编写,版本AS 3.0.只要制作一个旋转的3D球,图形元件的制作不作讲解,请参看有关教程. include "Math2.as" //图片容器 var menu:Sprite=new Sprite(); //使图标移动 menu.x = 300; menu.y = 200; //注册事件侦听器 menu.addEventListener(Event.ENTER_FRAME,moveMenu); this.addChild(menu); //椭圆在x 和y 轴上的截

3d-像这样的安卓3D效果旋转图片菜单怎么实现的

问题描述 像这样的安卓3D效果旋转图片菜单怎么实现的 解决方案 这个安卓源码里面有的,你直接找到Ratation3dAnimation拷贝出来,设置旋转角度就可以了,根本不需要自己写. 解决方案二: 3d开发游戏里面用的比较多.不过看着这实现应该没那么发杂.同问

Flash 3d效果精彩实例--方块扭曲

在Flash中逐帧动画是一种应用很广泛的动画类型,尤其大量的应用在3D领域,本实例就利用逐帧动画技术制作一个方块扭曲的3D效果. 动画效果: 源文件下载>>>>>> 具体制作步骤: 1.启动Flash,新建一个影片,设置影片舞台大小为360px*270px(单位为象素),影片背景色为浅黄色,颜色代码为#FFFFCC. 2.新建一个影片剪辑元件,命名为Cube,进入元件的编辑区后,选择矩形工具,在按下Shift键的同时绘制一个正方形,并设置其轮廓线为黑色,填充色为灰色,颜

Flash遮照创建3D动画视觉效果

创建 基础教程,主要教给大家利用Flash中的遮照实现3D效果动画. 先看效果和源文件. 点击这里下载源文件 首先新建文档,按Ctrl+J修改属性. 导入一幅图片作背景,然后建一新层,然后绘制一条横线和竖线,绘制横线时使用对齐面板. 效果. 再创建一个层,在如下图所示位置绘制一个矩形. 然后按F8转变为元件,类型:图形.然后再第20帧插入一个关键帧,然后调整大小,调到最小. 之后创建补间动画.然后再创建一个图层,绘制一个矩形如下图所示,然后转变为图形元件. 然后再第20帧插入关键帧,把图形调整到

Fireworks和Flash合作旋转文字动画

旋转 想在Flash中制作文字旋转环绕的效果比较麻烦,我们不仅要设定每一个字母的旋转角度,还要把字母排列成圆形,而利用Fireworks把文字附加到路径上的功能和Flash配合起来制作这样一个动画将轻而易举,大大提高工作效率,其制作方法如下. 1.打开Fireworks软件,点"File→New",设置好文件的大小及颜色(一般用Transparent),点击"OK",新建一个Fireworks文件..选择工具箱中的文本工具 ,在绘图区单击,在弹出的Text Edi

iOS动画之向右拉的抽屉3D效果_IOS

首先我们忽略掉3D效果,先要做的是一个右拉的抽屉效果. 总体思路:      1.创建一个ContainerViewController容器控制器,然后把左侧选择菜单的SideMenuViewController,和右侧负责显示内容的MainViewController 添加到ContainerViewController中.      2.给容器控制器ContainerViewController添加一个手势监听,通过修改偏移量完成抽屉效果.      3.设置anchorPoint,给左侧S

Flash 3D旋转和3D位移

核心提示:Flash CS4的3D工具很容易上手.在工具栏里有两个处理3D变形的工具:3D旋转和3D位移. Flash CS4的3D工具很容易上手.在工具栏里有两个处理3D变形的工具:3D旋转和3D位移. 这两个工具都可以切换全局坐标模式和个体坐标模式,上图为个体坐标模式. 另外,也可以通过属性面板和变形面板来调整3D变形的参数.其中值得注意的是灭点(消失点)和相机范围角度(不是焦距)的设置.这两个参数对整个场景内的所有元件,以及嵌套的元件都产生影响.也就是说,一个场景的灭点和相机范围角是唯一的

Flash精彩实例:爆炸效果动画

效果演示: 点击这里下载源文件 制作步骤: 很久以前看到了此篇教程,但是一直保存了其源代码,在网上查了半天没查到该教程,所以只有自己重新给大家做一个教程了! 首先,我们要打开Flash MX 2004.新建一场景动画,CTRL+J打开文档属性面板,设背景为黑色.帧速为24~48(随你高兴了,自己试试不同的帧速,只要自己觉得满意就行.) 1.按住Shift键在主场景中画一无边框正圆(大小在50×50象素左右),打开混色器面板在填充样式中选中放射性填充.将左右两个色块都设为白色,并将其外(右)侧的色