2008年10月28日

【介紹】使用內建 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才對,或許以後會修正吧。


Posted by esabear at 樂多Roodo! │15:41 │回應(7)引用(0)Flash筆記
樂多分類:網路/3C 共同主題:Flash筆記 工具:編輯本文
標籤:工具,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