利用Tweener製作動畫 – 廣告看板
依然是Tweener範例清倉，本篇範例大致是搭配Tweener讓目標物移動到指定座標的效果，話不多說看範例吧！
Tweener 橫幅廣告 範例：主要為利用Tweener針對廣告看板進行移動，以下為本範例的程式碼：
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
import caurina.transitions.Tweener; var i:int;//迴圈用變數 var pic:int = 1;//播放張數紀錄變數 var clock;//計時器變數 //按鈕變色與監聽 btnChange(); function btnChange() { for (i=1; i<=4; i++) { this["b" + i].gotoAndStop(1); this["b" + pic].gotoAndStop(2); } } for (i=1; i<=4; i++) { this["b" + i].addEventListener(MouseEvent.CLICK,clickFn); } function clickFn(e:MouseEvent) { clearInterval(clock); clock = setInterval(autoChange,5000); pic = e.currentTarget.name.substr(1,1); bannerChange(); btnChange(); } //計時器設定（每5秒更換） clock = setInterval(autoChange,5000); function autoChange() { pic++; if (pic>4) { pic = 1; } bannerChange(); btnChange(); } //圖片切換函數 function bannerChange() { Tweener.addTween(banner, {x:(pic-1)*-560, time:1, transition:"easeOutQuint"}); } |
Tweener 移動看板 範例：與上面範例大致相同，不過本範例增加了縱向的移動。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import caurina.transitions.Tweener var i var j var targetX var targetY for(i=1;i<=3;i++){ for(j=1;j<=3;j++){ this["b"+i+j].addEventListener(MouseEvent.CLICK,moveFn) } } function moveFn(e:MouseEvent){ targetX=(e.currentTarget.name.substr(2,1)-1)*-450 targetY=(e.currentTarget.name.substr(1,1)-1)*-450 Tweener.addTween(nb, {x:targetX, y:targetY, time:2, transition:"easeOutQuint"}); } |
