正在载入……

Attention, Zin 的交互设计之路。

User interface, user experience and interactive design.

« 新娘嫁人了,新郎不是我flash 3d物理引擎收录 »

椭圆运动轨迹3D产品展示效果

代码在此,没做标注,更多的交互效果以及参数请自行修改源文件,有问题请留言,这里仅是一个演示。
原理:利用高中数学的斜切函数中的椭圆方程,然后依赖参数方程使用极坐标对角度进行运算得出每个movieclip所在的x及y值。
关键词:椭圆运动 3D 产品展示 斜切函数 Tween类 Blur效果 attachMovie

//CONFIG
stop();
var btnStr:String = "mc";
var btnNum:Number = 5;
var mcStr:String = "mc";
var mcNum:Number = btnNum;
var rel:Number = 1;
var base:MovieClip = this.roll;
var btnBase:MovieClip = base;
var angStep:Number = Math.round(360/mcNum);
var cx:Number = 0;
var cy:Number = 0;
var ra:Number = 250;
var rb:Number = 20;
var et:Number = 1;
var statMov:Array = [];
import mx.transitions.Tween;
import mx.transitions.easing.*;
import flash.filters.BlurFilter;
/* FUNCTION */
function ellipseMove(mc:MovieClip, x1:Number, y1:Number, a:Number, b:Number, deltaAng:Number, t:Number) {
  var deltaX:Number;
  var deltaY:Number;
  var mcSin:Number;
  var mcCos:Number;
  !mc.ang ? mc.ang=0 : mc.ang=mc.ang;
  deltaAng = deltaAng*Math.PI/180;
  ang = deltaAng+mc.ang;
  angTween = new Tween(mc, "ang", mx.transitions.easing.Strong.easeOut, mc.ang, ang, t, true);
  angTween.onMotionChanged = function() {
    mcSin = Math.sin(mc.ang);
    mcCos = Math.cos(mc.ang);
    deltaY = b*mcSin;
    deltaX = a*mcCos;
    posX = deltaX+x1;
    posY = deltaY+y1;
    mc._x = posX;
    mc._y = posY;
    //mc._y<y1 ? mc._visible=false : mc._visible=true;
    mc.swapDepths(mc._y);
    mc._xscale = mc._yscale=getEffect(mc._y, y1, b, 100, 10);
    mc._alpha = getEffect(mc._y, y1, b, 100, 10);
    var blur:Number = getEffect(mc._y, y1, b, 0, 8);
    mc.filters = [new BlurFilter(blur, blur, 1)];
  };
  angTween.onMotionFinished = function() {
    enBtns(btnBase, btnStr, btnNum);
  };
}
function getEffect(ty:Number, y1:Number, b:Number, max:Number, min:Number):Number {
  var focalLength:Number = 200*b/(max-min);
  var eNum:Number = Math.round((ty-(y1-(max+min)/(max-min)*b))/focalLength*100);
  return eNum;
}
function setEvent(i:Number):Void {
  disBtns(btnBase, btnStr, btnNum);
  if (rel == 1 && i == btnNum) {
    for (j=1; j<=mcNum; j++) {
      ellipseMove(base[mcStr+j], cx, cy, ra, rb, angStep, et);
    }
  } else if (rel == btnNum && i == 1) {
    for (j=1; j<=mcNum; j++) {
      ellipseMove(base[mcStr+j], cx, cy, ra, rb, -angStep, et);
    }
  } else {
    for (j=1; j<=mcNum; j++) {
      ellipseMove(base[mcStr+j], cx, cy, ra, rb, (rel-i)*angStep, et);
    }
  }
  rel = i;
}
function disBtns(base:MovieClip, nameStr:String, n:Number):Void {
  for (i=1; i<=n; i++) {
    base[nameStr+i].enabled = false;
  }
}
function enBtns(base:MovieClip, nameStr:String, n:Number):Void {
  for (i=1; i<=n; i++) {
    base[nameStr+i].enabled = true;
  }
}
function buildBtns(base:MovieClip, nameStr:String, n:Number):Void {
  for (i=1; i<=n; i++) {
    base[nameStr+i].id = i;
    base[nameStr+i].onRelease = function() {
      if (this.id != rel) {
        setEvent(this.id);
      }
    };
  }
}
function buildRoll() {
  for (i=1; i<=mcNum; i++) {
    base.attachMovie("mc", mcStr+i, i, {_x:cx, _y:cy});
    //base[mcStr+i].loader.loadMovie(host+statMov[i]);
    base[mcStr+i].t.text = mcStr+i;
    ellipseMove(base[mcStr+i], cx, cy, ra, rb, (90-angStep)+angStep*i, et);
  }
}
//TESTING
buildRoll();
buildBtns(btnBase, btnStr, btnNum);


下载源文件地址:https://groups.google.com/group/7thparks-stuff/files 请下载ellipse2.fla

欢迎发表看法:

您的讨论更有价值!

控制面板

<< 2008-12 >>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

最近留言