当前位置:首页设计教程Flash AS3制作交互式3D旋转动画效果
Flash AS3制作交互式3D旋转动画效果
°
  • 素材类型: 资源-素材
  • 上传时间:

本例为Flash AS3代码实例教程,教程讲解了通过用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);
}
}

进入论坛参与讨论: http://www.missyuan.com/viewthread.php?tid=419046

下面给出完整代码 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

下面给出完整代码

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<n; 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<iconCount; 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;
}

温馨提示:

文章标题:Flash AS3制作交互式3D旋转动画效果

文章链接:https://www.4tu.cn/design/42297.html

更新时间:2024年09月01日

文章版权声明
1、本网站名称:思图创意
2、本站永久网址:https://www.4tu.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报

本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。

给TA打赏
共{{data.count}}人
人已打赏
设计教程

Flash cs3鼠绘教程:图形元件的同步与不同步

2024-9-1 10:54:00

设计教程

Flash AS教程:用AS3代码表现倾斜角与斜率

2024-9-1 10:54:02

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
今日签到
搜索