========================================

這篇要介紹的是比較類似在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了

========================================

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 法奇 的頭像
    法奇

    法奇的帝窩

    法奇 發表在 痞客邦 留言(0) 人氣()