2008年10月28日 15:41

【介紹】使用內建 TransitionManager 類別做出轉場特效(附工具)

  要處理MovieClip間的轉換,Flash提供了TransitionManager類別,可以直接套用,做出百頁窗(Blinds)、淡化(Fade)、飛入(Fly)、虹膜縮放(Iris)、照相閃光(Photo)、像素溶解(PixelDissolve)、旋轉(Rotate)、壓縮(Squeeze)、擦去(Wipe)、縮放(Zoom)等十種轉場效果,本文將做一些介紹,並實作了一個小工具,可即時預覽轉場效果,並產生對應的程式碼。

[原始檔下載]

  首先看看實際效果會更容易瞭解TransitionManager的作用,程式中將轉場效果套用在雪景,綠山為不變的背景,除了十種轉換效果(Type)外,還有另外3個基本設定,例如漸進效果(Easing)又分為:Back(迴轉)、Elastic(彈動)、None(無漸進)、Regular(固定)、Strong(增強漸進)等5項漸進方式,和easeIn、easeInOut、easeOut等3種模式,漸進的In和Out指的是發生在動作初期或末期,如:使用彈動效果,easeIn會先彈再移走,easeOut則是移動後再彈動,和方向(Direction)意義略為不同;若Direction設為Transition.IN表示該影格會由外而內,也就是由看不見到看得見,OUT則反之,以淡化為例,就是淡入和淡出的分別;Duration則是執行效果的總時間。
  每一種轉場特效可能又有額外的參數設定,可以設定間距、起始方位、形狀…等,讓效果更具變化。

TransitionManager的程式碼有2種寫法,第一種較簡便使用,但是不能加入事件:
TransitionManager.start(mc1,{type:Fade,direction:Transition.IN});
第二種寫法(mc1為作用目標MovieClip):
var myTM:TransitionManager = new TransitionManager(mc1);
myTM.startTransition({type:Fade, direction:Transition.IN});
加上觸發事件:
myTM.addEventListener("allTransitionsInDone",someHandler);
function someHandler(e:Event):void {
    // do something
}
  需注意的是,"allTransitionsInDone"是對應到Transition.IN,如果是Transition.OUT時,則要改為"allTransitionsOutDone",不知為何找不到代表這2個字串的常數,只能用字串,這樣的話其實不太符合AS3的精神,應該簡單用Event.COMPLETE作代表,本身可以直接判斷輸入的是IN或OUT才對,或許以後會修正吧。


  • esabear 發表於樂多回應(7)引用(0)Flash筆記編輯本文
    樂多分類:網路/3C │昨日人次:1 │累計人次:2349 │標籤:工具,TransitionManager,介紹,flash,ActionScript3
    Ads by Roodo! 

    引用URL

    http://cgi.blog.roodo.com/trackback/7456649

    回應文章
    您好阿:

    這個效果好炫,可以用在我的書本上ㄇ??最近在幫巨匠電腦教案,是否可以先徵求您的同意,使用在我的書籍上,可以補充給同學製作ㄟ??您的網站網址我有會一並port上去書本上,好ㄇ???
    | 檢舉 | Posted by 林志盈 at 2008年12月13日 11:52

    我樂見程式的分享與使用,承蒙您的誇獎,有註明出處的話,當然是歡迎取用:)
    | 檢舉 | Posted by at 2008年12月13日 22:29
    非常感謝,到時候出書,我會奉送一本給您ㄡ。感謝協助
    | 檢舉 | Posted by 林志盈 at 2008年12月17日 13:06
    http://lincyi.pixnet.net/blog

    布落格!歡迎進來玩玩ㄡ
    | 檢舉 | Posted by 林志盈 at 2008年12月17日 13:07

    不用客氣~
    我會更努力分享
    | 檢舉 | Posted by at 2008年12月21日 19:00

    大大你好 請教一下這功能可以用這樣嗎
    http://www.dbox.com/#/1-1?type=serial&var=design

    就是當我按下時 他會淡入新圖 淡初舊圖 這要怎設定 感激了
    | 檢舉 | Posted by 阿光 at 2009年06月14日 09:48

    To 阿光:
    其實就只是略加變化而已

    因為剛好最近有寫到, 所以列程式碼給你
    mc1, mc2 指的是2個相疊的MovieClip, 套套看吧
    //--------------------------------
    import fl.transitions.*;
    import fl.transitions.easing.*;

    mc2.visible = false;

    var myTM1:TransitionManager = new TransitionManager(mc1);
    var myTM2:TransitionManager = new TransitionManager(mc2);
    myTM1.addEventListener("allTransitionsOutDone",someHandler);
    myTM1.startTransition({type:Fade, direction:Transition.OUT});

    function someHandler(e:Event):void {
    mc1.visible = false;
    mc2.visible = true;
    myTM2.startTransition({type:Fade, direction:Transition.IN});
    }
    | 檢舉 | Posted by 熊 at 2009年06月14日 23:18