Flash AS3制作交互式3D旋转动画效果

   效果演示:

  使图标具有交互性:

  当鼠标单击某个图标时使之旋转,并让图标显示在屏幕的最前面。

  //定义旋转的最终角度

  var endAngle:Number = 90;

  //保存已经旋转的角度

  var tempAngle:Number = 0;

  //保存旋转的状态

  var isRotating:Boolean = true;

  //注册图标的单击事件

  mc.addEventListener(MouseEvent.MOUSE_DOWN,startRotation);

  //定义侦听器函数

  function startRotation(e:MouseEvent):void

  {

  //得到图标

  var currentIcon::MovieClip = e.target;

  //得到图标的角度

  enaAngle = atan2D(currentIcon.y,cosD(currentIcon.angle) * disy);

  //计算旋转的度数

  endAngle = (endAngle > -180&&endAngle < -90) ? - 270 - endAngle:90 - endAngle;

  //单击后旋转,需要注册enterFrame事件侦听器

  menu.addEventListener(Event.ENTER_FRAME,moveMenu);

  }

  每次旋转前要重新初始化旋转角度

  function initAngle(b:Boolean)

  {

  //如果处于旋转状态保存角度

  if (isRotating)

  //保存图标角度

  tempAngle += speed;

  //旋转速度重新设置为0

  speed = 0;

  //设置旋转状态

  isRotating = b;

  }

  修改函数moveMenu():

  function moveMenu(e:Event):void

  {

  var iconCount:int = menu,numChildren;

  var depthArrat:Array = new Array();

  var angle:Number = 360 / iconCount;

  for (var z:int; z < iconCount; z++)

  {

  var mc:MovieClip = menu.getChildAt(z);

  mc.gotoAndStop(z + 1);

  //把图标角度保存在mc的动态属性中

  mc.angle = tempAngle + speed + angle * z;

  mc.x = cosD(mc.angle) * disy;

  mc.y = sinD(mc.angle) * disy;

  depthArray[z] = mc;

  setProp(mc, "alpha");

  setProp(mc, "scaleX", .2, .7);

  setProp(mc, "scaleY", .2, .7);

  }

  arrange(depthArray);

  //利用缓冲公式把图标旋转到endAngle角度

  speed += (endAngle - speed) * .2;

  if (Math.abs(speed - endAngle) < 1)

  {

  //移除事件侦听器

  menu.removeEventListener(Event.ENTER_FRAME,moveMenu);

  initAngle(false);

  }

  }

  下面给出完整代码

  include "Math2.as"

  stage.frameRate = 30;

  var disx:Number = 200;

  var disy:Number = 10;

  var speed:Number = 0;

  var endAngle:Number = 90;

  var tempAngle:Number = 0;

  var isRotating:Boolean = true;

  var menu:Sprite = new Sprite();

  menu.x = 300;

  menu.y = 200;

  menu.addEventListener(Event.ENTER_FRAME,moveMenu);

  this.addChild(menu);

  initMenu(5);

  function initMenu(n:int) {

  for (var i:int; i

  var mc:MovieClip = new IconMenu();

  mc.scaleX = mc.scaleY = .5;

  mc.addEventListener(MouseEvent.MOUSE_DOWN,startRotation);

  menu.addChild(mc);

  }

  }

  function initAngle(b:Boolean) {

  if (isRotating) {

  tempAngle += speed;

  }

  speed = 0;

  isRotating = b;

  }

  function startRotation(e:MouseEvent):void {

  var currentIcon:MovieClip = e.target;

  endAngle = atan2D(currentIcon.y,cosD(currentIcon.angle)*disy);

  endAngle = (endAngle> -180&&endAngle < -90)? -270 - endAngle:90 - endAngle;

  initAngle(true);

  menu.addEventListener(Event.ENTER_FRAME,moveMenu);

  }

  function moveMenu(e:Event):void {

  var iconCount:int = menu.numChildren;

  var depthArray:Array = new Array();

  var angle:Number = 360 / iconCount;

  for (var z:int; z

  var mc:MovieClip = menu.getChildAt(z);

  mc.gotoAndStop(z + 1);

  mc.angle = tempAngle + speed+angle * z;

  mc.x = cosD(mc.angle) * disx;

  mc.y = sinD(mc.angle) * disy;

  depthArray[z] = mc;

  setProp(mc,"alpha");

  setProp(mc,"scaleX",.2,.7);

  setProp(mc,"scaleY",.2,.7);

  }

  arrange(depthArray);

  speed += (endAngle-speed) * .2;

  if (Math.abs(speed - endAngle) < 1) {

  menu.removeEventListener(Event.ENTER_FRAME,moveMenu);

  initAngle(false);

  }

  }

  function arrange(depthArray:Array):void {

  depthArray.sortOn("y", Array.NUMERIC);

  var i:int = depthArray.length;

  while (i--) {

  menu.setChildIndex(depthArray[i], i);

  }

  }

  function setProp(mc:MovieClip,prop:String,n1:Number = .5, n2:Number = 1):void {

  mc[prop] = ((mc.y + 2 * disy) / disy - 1) / 2 * (n2 - n1) + n1;

  }

时间: 2024-11-08 19:28:01

Flash AS3制作交互式3D旋转动画效果的相关文章

Flash AS3制作茶杯震动gif动画效果

 下面小编就为大家介绍Flash AS3制作茶杯震动gif动画效果,教程很不错哦,也很简单,一起来学习吧! 效果如下:(用鼠标指向右侧的茶壶可以看到震动效果) 制作过程如下: 首先准备一个图片当做背景,如下: 然后再建立一个新图层,导入一个茶壶素材,然后把它转变为影片剪辑,之后命名实例名字. 目前存在两个图层,然后我们再新建立一个放置ACTION的图层,代码如下:   代码如下: var coordX:Number = shaker_mc.x;  var coordY:Number = shak

Flash AS3制作个性的旋转圆形网页导航

核心提示:Flash AS3制作个性的旋转圆形网页导航教程. Flash AS3制作个性的旋转圆形网页导航. 1.用矩形工具绘制一个黑色的矩形,转换为MC影片剪辑,打开属性窗口 2.双击这个影片剪辑编辑它,使用文本工具,设置为动态文本,绘制一个区域,设置颜色是白色,命名实例名为abelBtn. 3.回到场景1,删除掉刚刚建立的影片剪辑. 4.我们选择第一帧,然后打开动作面板,输入下面代码,主要是为了导入Tweenlite engine. import com.greensock.*; impor

Android 3D旋转动画效果实现分解

这篇文章主要介绍一下如何实现View的3D旋转效果,实现的主要原理就是围绕Y轴旋转,同时在Z轴方面上有一个深入的缩放. 演示的demo主要有以下几个重点: 1,自定义旋转动画 2,动画做完后,重置ImageView 先看一下程序的运行效果:   1,自定义动画类 这里实现了一个Rotate3dAnimation的类,它扩展了Animation类,重写applyTransformation()方法,提供指定时间的矩阵变换,我们在这个方法里,就可以利用Camera类得得到一个围绕Y轴旋转的matri

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 轴上的截

flash遮罩制作水波荡漾的文字效果

  今天小编为大家分享flash遮罩制作水波荡漾的文字效果,教程真的很不错,很值得大家学习,来看看吧! 遮罩,就好比将下面的图层遮上一块布,然后在这块布上挖出一个洞,露出下面的内容.有意思的是这个洞的形状完全由你设想,可以是形状.可以是线条.也可以是文字--可以是遮罩层的运动,也可以是被遮罩层在运动. 前面用脚本做过一个遮罩实例.这一次是遮罩图层在文字效果方面的应用.利用线性填充色块的运动,使文字产生水波荡漾的效果. 效果图为GIF图片,显示效果较粗糙. 方法/步骤 T键调出文字工具,属性面板中

用Flash 8 制作燃烧的香烟动画(2)

课程标题:用Flash 8 制作燃烧的香烟动画(2) 课程目标:能够运用 Flash 8 绘制物体并掌握 Flash 8 新功能. 课程要点:视频教程教你如何绘制烟灰缸和香烟,以及运用flash 8 的滤镜新功能制作动画效果.本教程共计5节,这是第2节. 观看教程:[全屏观看] (3.54MB) 下载教程:[下载教程] 实例效果预览: 必须安装Flash Player 8.0播放器方能正常观看,[官方下载] 上一节: 用Flash 8 制作燃烧的香烟动画(1) 下一节: 用Flash 8 制作燃

用Flash 8 制作燃烧的香烟动画(1)

课程标题:用Flash 8 制作燃烧的香烟动画(1) 课程目标:能够运用 Flash 8 绘制物体并掌握 Flash 8 新功能. 课程要点:视频教程教你如何绘制烟灰缸和香烟,以及运用flash 8 的滤镜新功能制作动画效果.本教程共计5节,这是第1节. 观看教程:[全屏观看] (858KB) 下载教程:[下载教程] 实例效果预览: 必须安装Flash Player 8.0播放器方能正常观看,[官方下载] 下一节: 用Flash 8 制作燃烧的香烟动画(2)

WPS演示制作课件时添加动画效果的方法

WPS演示制作课件时添加动画效果的方法   创建基本要素:选择两个圆角矩形,对齐后,插入相关图片,然后插入选项按钮 后续步骤+动画设置 1.无关图片:退出--切出; 2.有关图片:出现--切入[与切出方向一致]; 3.加上文字说明; 4.透明后设置飞入动画; 5.将一整串动画选定,触发器:选项1; 6.其他选项按此方法做; 7.最后完成后实验并做少许修改. 这样一个生动活泼,配有动画效果的课堂提纲课件就做好了.

PPT如何制作单词认读动画效果

  PPT制作单词认读动画效果的方法 1.首先制作放入单词的便签.插入--形状--基本形状--折角形.在舞台的横线下拉出一个大小合适的折角形. 2.绘图工具--格式--形状效果--阴影--阴影选项. 3.参数如图设置.参数设置根据舞台大小.所绘图片大小以及各人喜好,图中设置仅供参考. 4.按住Ctrl键拖动该形状,复制出三个,摆放在合适位置. 5.插入--图片,将准备好的PNG图片插入,调整好大小,分别放入一个便签中. 6.插入--文本框--横排文本框,输入单词,字体与阴影设置如图. 7.自定义