========================================
這篇要介紹的是比較類似在ipad上面,讓圖片搖動的效果
同時會用這篇介紹[AS3]中
除了自定義事件外,另外一種監聽事件傳值的方式
雖然自定義事件是[AS3]常用方法,但是對初學的開發者可能並不是那麼容易理解
這次介紹的方法對初學者相信有很大幫助
========================================
程式流程:首先我會從外部載入圖片,再將圖片置中,然後下達搖動的指令
========================================
//先宣告一些必用的東西
var nowthis = this;
//裝載圖片的容器 var TmpSprite:MovieClip = new MovieClip();
//讀取圖片用的Loader var TmpLoader : Loader = new Loader(); nowthis.addChild(TmpSprite);//這行主要的意思,就是當圖片讀取完成後,執行ImgComplete方法
//並把TmpSprite容器傳入方法內(寫法跟一般監聽式子很不一樣吧) TmpLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,ImgComplete(TmpSprite));
//讀取外部圖片
var TmpURL:URLRequest = new URLRequest('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRVtjawvyqnjGE-Nz2y7yqvBzMYRMOEgO4ZRTHmokbDzmMIZp27'); TmpLoader.load(TmpURL);
//下面的方法是用來執行圖片載入完成後的執行
//可以看到內外有兩個function,外面的方法是用來接監聽式子傳的參數TmpSprite
//裡面的方法是用來回給監聽式子原本該執行的格式 function ImgComplete(req:MovieClip):Function {
//TmpFunction就是原本Complete事件該接的方法形態 var TmpFunction : Function = function(me:Event):void{ var LoaderContent = me.target.loader.content;
//將讀入的圖片平滑化,這樣比較不會出現馬賽克圖 LoaderContent.smoothing=true;
//req就是傳入的圖片容器,把讀取的圖片內容加入容器內 req.addChild(LoaderContent);
//將圖片放在容器的正中央(註冊點移到中央) LoaderContent.x = 0-(LoaderContent.width/2); LoaderContent.y = 0-(LoaderContent.height/2);
//將圖片容器置於場景中央 alignCenter({SpriteWidth:stage.stageWidth,SpriteHeight:stage.stageHeight,target:req});
//紀錄圖片的初始X,Y,Rotation(因為搖動需要一個基準值,我是以起始資料為基準) req['SaveX'] = req.x ; req['SaveY'] = req.y ; req['SaveRotation'] = req.rotation ;
//賦予圖片搖動狀態 req.addEventListener(Event.ENTER_FRAME,ShakeHanlder(100)) };
//將TmpFunction回給COMPLETE監聽式子 return TmpFunction; }
//這裡就是控制圖片的搖動,ShakeInt可以用來改變圖片搖動的感覺
//複雜的數學原理在這邊就不介紹了,有興趣可以自己去翻翻三角函數 function ShakeHanlder(ShakeInt:int):Function { var TmpShakeHanlder : Function=function (me:Event):void{ var tmc = me.currentTarget; tmc.x = Math.sin(uint(Math.random() * ShakeInt)) + tmc['SaveX']; tmc.y = Math.cos(uint(Math.random() * ShakeInt)) + tmc['SaveY']; tmc.rotation = Math.cos(uint(Math.random() * ShakeInt)) + tmc['SaveRotation']; }; return TmpShakeHanlder; }
//將傳入物件置中的方法 function alignCenter(reObject:Object) { var Target:MovieClip = reObject['target']; var SpriteWidth:Number = reObject['SpriteWidth']; var SpriteHeight:Number = reObject['SpriteHeight']; Target.x = (SpriteWidth / 2); Target.y = (SpriteHeight / 2); }
========================================
來看一下效果
由於我用的是ENTER_FRAME所以看起來沒那麼順
想更順一點,可以用tweenLite作,之後會介紹
========================================
FLA格式為CS6
原始檔
========================================
注意事項:
可以自己再添加開啟或是停止的事件
就可以做出像是ipad那種動感的app了
========================================