Flash交互設(shè)計-09-AS3.0動畫編程

第9章AS3.0動畫編程動畫是Flash創(chuàng)作的根底，從最初的幀補(bǔ)間動畫到現(xiàn)在的動畫編程，F(xiàn)lash動畫制作走出了一條非常圓滿的道路。ActionScript3.0的動畫編程主要關(guān)注兩方面的情形：一是通過改變顯示對象的屬性創(chuàng)立動畫效果；二是利用Shape類的繪制類進(jìn)行代碼繪制，渲染效果。ActionScript3.0動畫編程要涉及數(shù)學(xué)、物理學(xué)等方面的內(nèi)容非常的多，也比較復(fù)雜。在本章先介紹兩種根本的動畫實現(xiàn)原理并創(chuàng)立簡單的動畫效果。對于數(shù)學(xué)和物理學(xué)的根底知識，那么留到后面的章節(jié)具體詳細(xì)的講述。9.1可視化動畫編程簡介動畫是指控制顯示對象隨著時間不斷的發(fā)生變化，這些變化可能是位置的變動，速度的變化，外觀形狀的改變，顏色透明度的改變等等?？偠灾瑒赢嬁梢詫崿F(xiàn)的形式是紛繁多樣的。借用一句口語“只有想不到，沒有做不到”，只要能夠想到的效果，在Flash中都能夠?qū)崿F(xiàn)。最早版本的Flash中，使用逐幀動畫和補(bǔ)間動畫來實現(xiàn)動畫效果，一個顯示對象放于一個關(guān)鍵幀上，然后插入另一個關(guān)鍵幀，改變第二個關(guān)鍵幀中顯示對象的顯示屬性，然后兩幀之間通過差值計算形成完整的事件軸動畫?？梢暬膭赢嬀幊蹋殡SActionScript腳本語言的出現(xiàn)開始逐漸的興起。從早期ActionScript中的“三幀法”動畫編程，逐步開展到onClipEvent(enterframe)、onEnterFrame循環(huán)事件，ActionScript動畫編程中幀循環(huán)起著至關(guān)重要的作用。9.2動畫編程原理和所有的動畫顯示一樣，F(xiàn)lash的動畫原理也是通過不斷的刷新屏幕，利用每次屏幕上顯示對象位置的不同、大小色彩的變化等產(chǎn)生動畫效果。動畫編程的關(guān)鍵是一定要有變化，而且該變化需要在一定時間內(nèi)來完成。Flash中使用幀頻來控制每秒鐘刷新屏幕的次數(shù)，通過使用的幀頻的范圍在12～60幀每秒，推薦使用的是24幀每秒這樣的一個速度。ActionScript3.0的動畫編程也是同樣的原理，通過不斷的刷新屏幕來實現(xiàn)動畫效果。ActionScript3.0的動畫編程按照實現(xiàn)的方式可以分為兩種：對顯示對象的顯示屬性進(jìn)行控制，調(diào)整每次刷新屏幕時顯示對象的顯示屬性實現(xiàn)動畫效果，這種稱為顯示屬性動畫。利用繪制API在每幀中使用代碼繪制不同的形狀，從而產(chǎn)生的動畫效果，這種稱為代碼繪制動畫。通過編程實現(xiàn)刷新屏幕，ActionScript3.0中提供了兩種方式可供選擇：幀循環(huán)更新：利用Flash本身的幀頻速度，在每次刷新屏幕時改變顯示對象。此方法需要使用事件偵聽器偵聽顯示對象的Event.ENTER_FRAME事件。定時器更新：利用Timer類的定時更新功能，每隔一定的事件使顯示對象改變一次。此方法需要使用事件偵聽器偵聽顯示對象的TimerEvent.TIMER事件。9.3代碼繪制動畫效果代碼繪制動畫效果，就是每幀繪制的圖形有所變化，這樣播放起來就形成了動畫。繪制代碼主要使用Graphics類的繪制API來進(jìn)行繪制。下面創(chuàng)立一個非常流行的電流動畫效果。其實現(xiàn)原理為：首先在水平方向每隔3個像素進(jìn)行繪制，而豎直方向的繪制點可以在一個位置附近隨機(jī)變化，這樣形成一條隨機(jī)彎曲的線條；然后使用幀循環(huán)事件，每幀重新繪制一次，實現(xiàn)線條的隨機(jī)變化，進(jìn)而實現(xiàn)最終的電流效果。9.4改變對象屬性本節(jié)將通過改變舞臺的顯示屬性來實現(xiàn)一系列的動畫效果。這些效果大體分為兩局部：一局部是與運動相關(guān)的動畫，主要是通過修改顯示對象的坐標(biāo)來實現(xiàn)。此局部將會介紹一些物理運動學(xué)的根底知識。另一局部通過改變顯示對象的縮放屬性、旋轉(zhuǎn)屬性和透明度屬性，實現(xiàn)顯示和形狀動畫Ч9.4.1移動物體要實現(xiàn)移動舞臺的效果，只需改變坐標(biāo)屬性即可。修改橫坐標(biāo)可以實現(xiàn)水平運動的效果，修改縱坐標(biāo)可以實現(xiàn)豎直運動的效果。在物理學(xué)中，物體運動的快慢是用速度來描述的。速度反映了物體在單位時間內(nèi)發(fā)生的位移的大小。對于勻速運動的物體，位移的大小等于速度乘以時間。在Flash中，實現(xiàn)物體的運動，運算的原理是：確定速度大小，幀循環(huán)刷新時原來的位置坐標(biāo)加上速度的值。原理主要公式如下：var_vx:Number=水平速度值var_vy:Number=豎直速度值顯示對象.x+=vx顯示對象.y+=vy9.4.2加速運動的物體在物理學(xué)中，物體運動的快慢是用速度來描述的，而速度變化的快慢是用加速度來描述的。加速度反映了物體在單位時間內(nèi)速度變化的快慢。加速度和速度關(guān)系的公式為：v=v+avx+=axvy+=ay9.4.3減速運動的物體物理學(xué)中，簡單的減速運動和加速運動一樣，利用加速度的值來改變速度的值，進(jìn)而實現(xiàn)物體的位置變化。但加速運動加速度為正值，減速運動的加速度為負(fù)值。當(dāng)然，也可以通過速度減去一個正的加速度實現(xiàn)減速運動的效果。減速運動中加速度〔此處按照加速度為正值〕和速度關(guān)系的公式為：v=v-avx-=axvy-=ay9.4.4鼠標(biāo)跟隨緩動效果在Flash中最常見的緩動效果，就是一個顯示對象先快后慢，逐漸的移動到目的地。這也是一個減速運動的過程，不過運動過程中的加速度會發(fā)生改變。二次緩動是最常用的，通過每次前進(jìn)當(dāng)前位置和目標(biāo)位置之間距離的二分之一，如此重復(fù)的操作，知道最后無限的接近目標(biāo)點。但是這樣永遠(yuǎn)無法實現(xiàn)到達(dá)目標(biāo)點，所以一般控制當(dāng)前位置和目標(biāo)位置之間的距離小于1象素時，可以近似認(rèn)為已經(jīng)到達(dá)了目標(biāo)點。二次緩動的計算公式為：dx=目標(biāo)位置.x-當(dāng)前位置.xdy=目標(biāo)位置.y-當(dāng)前位置.yvx=(dx)/2vy=(dy)/29.4.5利用三角函數(shù)實現(xiàn)運動效果數(shù)學(xué)中三角函數(shù)的正弦和余弦函數(shù)是對物體的運動非常有用的函數(shù)。這兩個函數(shù)都具有周期性，其值范圍為-1~1，而且由于周期性，其值能夠在-1~1之間循環(huán)變化。利用這些特點，可以實現(xiàn)顯示對象周期性的往復(fù)運動效果。關(guān)于三角函數(shù)的知識請參見《數(shù)學(xué)和數(shù)字》一章的內(nèi)容。下面的例如利用正弦三角函數(shù)實現(xiàn)小球在平衡位置附近的往復(fù)運動。其實現(xiàn)流程為：創(chuàng)立一個小球→參加場景→創(chuàng)立幀循環(huán)事件處理函數(shù)→利用幀循環(huán)事件，實現(xiàn)小球的運動。使用文檔類：MoveSin，9.4.6縮放動畫效果要實現(xiàn)縮放效果，只需實現(xiàn)不斷修改顯示對象的縮放屬性scaleX和scaleY即可。下面的例如通過修改矩形的scaleY屬性，實現(xiàn)矩形縮放效果。其實現(xiàn)流程為：創(chuàng)立一個小球→參加場景→創(chuàng)立幀循環(huán)事件處理函數(shù)，實現(xiàn)縮放操作→利用幀循環(huán)事件，實現(xiàn)小球的縮放。使用文檔類：Scale，9.4.7旋轉(zhuǎn)動畫效果要實現(xiàn)旋轉(zhuǎn)一個顯示對象的動畫效果，只需要修改rotation屬性即可。下面的例如用一個箭頭來實現(xiàn)鼠標(biāo)跟隨效果，跟隨鼠標(biāo)的箭頭的指向會隨著鼠標(biāo)位置的變化而發(fā)生旋轉(zhuǎn)。其實現(xiàn)流程為：創(chuàng)立一個小球→參加場景→創(chuàng)立幀循環(huán)事件處理函數(shù)，實現(xiàn)旋轉(zhuǎn)效果→利用幀循環(huán)事件，實現(xiàn)小球的旋轉(zhuǎn)。使用文檔類：Rotation，9.4.8淡入淡出動畫效果淡入淡出效果也是Flash動畫制作中最常用的一種技術(shù)，此技術(shù)的實現(xiàn)是通過改變顯示對象的透明度alpha屬性實現(xiàn)的。下面的例如實現(xiàn)小球的淡入淡出效果。創(chuàng)立一個小球→參加場景→創(chuàng)立幀循環(huán)事件處理函數(shù)，實現(xiàn)顯示對象透明度先逐漸增加，當(dāng)透明度為1時逐漸減少，減少到1時再逐漸增加，通過循環(huán)實現(xiàn)淡入淡出效果→利用幀循環(huán)事件，實現(xiàn)小球的淡入淡出。使用文檔類：Alpha，9.5借助Timer類實現(xiàn)動畫效果使用Timer類產(chǎn)生的動畫效果和使用幀循環(huán)ENTER_FRAME事件產(chǎn)生動畫的原理一樣，都是通過間隔一定的時間進(jìn)行一次刷屏來實現(xiàn)動畫效果。上一節(jié)中使用幀循環(huán)事件創(chuàng)立的一切動畫，都可以是Timer類的事件來實現(xiàn)。要注意Timer類的TimerEvent.TIMER事件，可能與Flash的刷屏不同步，會產(chǎn)生延遲現(xiàn)象。所以在使用的時候，需要使用updateAfterEvent()方法強(qiáng)制更新屏幕。使用Timer類實現(xiàn)動畫還有幾個好處：可以利用Timer.stop()方法控制動畫的播放與停止；可以在構(gòu)建Timer對象時控制動畫的刷新次數(shù)，實現(xiàn)預(yù)期動畫效果；可以利用TimerEvent.TIMER_COMPLETE事件，在停止播放時偵聽，從事開始新的動作。9.6Tween類創(chuàng)立動畫效果在ActionScript2.0中內(nèi)建的Tween類都被轉(zhuǎn)移到了ActionScript3.0的fl.transitions包中，用于實現(xiàn)運動、變形等動畫效果。本節(jié)主要介紹常用的運動、變形Tween類。9.6.1Tween類應(yīng)用根底在ActionScript3.0中，使用Tween類，可以通過指定操作目標(biāo)的影片剪輯屬性在一定的幀數(shù)或者時間內(nèi)創(chuàng)立動畫效果，進(jìn)而實現(xiàn)影片剪輯的運動動畫，縮放動畫，淡入淡出動畫等顯示效果。在Tween類中還可以指定緩動方法，從而實現(xiàn)非線形變化效果?！熬弰印笔侵竸赢嬙谶\行期間的速度非線形變化，使動畫顯得更加的形象逼真。Tween類中的緩動方法位于包中，該包提供了多種緩動方法供用戶使用。要利用Tween類創(chuàng)立動畫效果，需要先創(chuàng)立一個Tween對象，使用該對象來指定要控制的顯示對象的屬性要發(fā)生什么樣的變化。創(chuàng)立Tween類對象的方法如下所示。Tween(目標(biāo)對象,目標(biāo)對象的屬性,緩動方式,初始值,結(jié)束值,動畫持續(xù)時間,記時方式);9.6.2運動折返效果返回類實現(xiàn)的動畫是在動畫執(zhí)行的開始端、結(jié)束端或者兩端兼有回返動作，用以模擬溢出動畫效果。執(zhí)行動畫的方法取決于三個緩動函數(shù)：easeIn：在動畫開始時往后運動，然后反向朝目標(biāo)移動。easeOut：在動畫結(jié)束時稍微沖過結(jié)束點，然后倒轉(zhuǎn)方向回來朝著目標(biāo)。easeInOut：在動畫開始時先向后運動，再倒轉(zhuǎn)方向并朝目標(biāo)移動，結(jié)束時沖過目標(biāo)，然后再倒轉(zhuǎn)方向，朝目標(biāo)移動。9.6.3運動回彈效果回彈類實現(xiàn)的動畫是在動畫的起始端，結(jié)束端或者兩端兼有執(zhí)行回彈動畫效果。具體在何端回彈同樣取決于三個緩動函數(shù)?；貜椀拇螖?shù)取決于動畫持續(xù)的時間，持續(xù)的時間越長，回彈的次數(shù)越多。此效果可以實現(xiàn)舞臺中小球跳動的動畫效果。Bounce類的三個回彈函數(shù)效果：easeIn：在動畫開始時以較慢速度開始回彈運動，然后再執(zhí)行時加快運動速度。easeOut：在動畫結(jié)束時以較快速度開始回彈運動，然后再執(zhí)行時減慢運動速度。easeInOut：在動畫開始時緩慢地開始跳動，進(jìn)行加速運動，最后進(jìn)行減速。9.6.4正弦彈性效果Elastic類實現(xiàn)的動畫是在動畫的起始端，結(jié)束端或者兩端兼有執(zhí)行彈性動畫效果，運動方式按照正弦波逐漸衰減進(jìn)行。具體在何端回彈同樣取決于三個緩動函數(shù)。回彈的次數(shù)不受動畫持續(xù)的時間影響。此效果也可以實現(xiàn)舞臺中小球跳動的動畫效果。Elastic類的三個回彈函數(shù)效果，此類和Bounce根本類似，區(qū)別在與彈性采用正弦方式：easeIn：在動畫開始時以較慢速度開始回彈運動，然后再執(zhí)行時加快運動速度。easeOut：在動畫結(jié)束時以較快速度開始回彈運動，然后再執(zhí)行時減慢運動速度。easeInOut：在動畫開始時緩慢地開始跳動，進(jìn)行加速運動，最后進(jìn)行減速。9.6.5Regular和Strong運動效果Regular類實現(xiàn)的動畫是加速運動、減速運動和先加速后減速的動畫效果。具體在方式同樣取決于三個緩動函數(shù)。Regular類的三個回彈函數(shù)效果：easeIn：在動畫開始時做初速度為零的加速運動。easeOut：動畫執(zhí)行勻減速運動，末速度為零。easeInOut：在動畫開始時做初速度為零的加速運動，然后做減速運動，直到速度為零。．線性運動效果None類實現(xiàn)的是一種線形運動的效果，顯示對象一直做運動運動。其方法函數(shù)有四種easeIn()、easeOut()、easeInOut()和easeNone()，這四種方法實現(xiàn)的是相同的效果，在執(zhí)行時都是勻速直線運動。使用時可以任意選擇。9.7TransitionManger創(chuàng)立動畫效果在ActionScript2.0中內(nèi)建的TransitionManger類也被轉(zhuǎn)移到了ActionScript3.0的fl.transitions包中，用于實現(xiàn)頁面切換動畫效果。本節(jié)主要介紹常用的TransitionManger類。9.7.1TransitionManger用法根底TransitionManger類管理了一系列的過渡動畫效果。通過使用這些效果，可以很方便的實現(xiàn)頁面之間的切換操作。TransitionManger類提供了10中不同的切換效果，把這些切換效果應(yīng)用于影片剪輯，就能實現(xiàn)很漂亮的過渡效果。這些類同樣位于fl.transitions包中。要使用TransitionManger類實現(xiàn)過渡動畫效果，需要先創(chuàng)立該類的實例。ActionScript3.0中創(chuàng)立改類的實例的方法有兩種。TransitionManager.start()方法，用法格式如下所示。TransitionManager.start(目標(biāo)影片,過渡對象參數(shù));目標(biāo)影片：指過渡效果作用的影片。注意，只能時影片剪輯實例。過渡對象參數(shù)：對象，包含所有的過渡參數(shù)的集合。對象應(yīng)包含type參數(shù)，該參數(shù)指示要應(yīng)用的過渡效果類。此外，還必須包括該過渡效果類所必需的任何參數(shù)。9.7.2遮簾過渡Blinds效果此過渡實現(xiàn)影片剪輯逐漸消失或逐漸出現(xiàn)的矩形來顯示的過渡動畫效果，類似于百葉窗效果。該過渡對象參數(shù)為：type:Blinds,direction:Transition.IN,duration:2,easing:None.easeNone,numStrips:10,dimension:0;參數(shù)說明：type：指明采用10種過渡效果中的那一種，所有的過渡效果共有參數(shù)。direction：有兩種形式Transition.IN和Transition.OUT，指明過渡動畫的方向，共有參數(shù)。duration：過渡動畫持續(xù)時間，共有參數(shù)。easing：過渡動畫補(bǔ)間效果，fl.transitions或fl.transitions.easing包中的一種效果，共有參數(shù)。numStrips：“遮簾”效果中的遮罩條紋數(shù)，推薦在1～50之間，獨有參數(shù)。dimension：指明遮罩條紋是垂直的(0)還是水平的(1)，獨有參數(shù)。9.7.3淡化過渡Fade效果此過渡實現(xiàn)影片剪輯淡入淡出的動畫效果。該過渡對象參數(shù)為：type:Fade,direction:Transition.IN,duration:9,easing:Strong.easeOut說明：此效果只使用共有參數(shù)，不需要其它參數(shù)。下面的例如在FlashCS3中使用導(dǎo)入一副圖片，然后放入影片剪輯中，放入舞臺，命名為mc，下面的代碼控制mc實現(xiàn)淡入淡出動畫效果。翻開動作面板，輸入下面的代碼：importfl.transitions.*;importfl.transitions.easing.*;TransitionManager.start(mc,{type:Fade,direction:Transition.IN,duration:20,easing:Strong.easeOut});9.7.4飛行過渡Fly效果此過渡實現(xiàn)影片剪輯從指定方向飛入的動畫效果。該過渡對象的對象參數(shù)為：type:Fly,direction:Transition.IN,duration:3,easing:Elastic.easeOut,startPoint:9參數(shù)說明：startPoint：指明起始位置的整數(shù)，范圍1～9，分別為：左上：1、上中：2、右上：3、左中：4、中心：5、右中：6、左下：7、下中：8、右下：9。獨有參數(shù)。下面的例如在FlashCS3中使用導(dǎo)入一副圖片，然后放入影片剪輯中，放入舞臺，命名為mc，下面的代碼控制mc實現(xiàn)飛行過渡動畫效果。翻開動作面板，輸入下面的代碼：importfl.transitions.*;importfl.transitions.easing.*;TransitionManager.start(mc,{type:Fly,direction:Transition.IN,duration:20,easing:Strong.easeOut,startPoint:9});9.7.5光圈過渡Iris效果此過渡實現(xiàn)影片剪輯以縮放的方形或圓形動畫遮罩來顯示動畫效果。該過渡對象參數(shù)為：type:Iris,direction:Transition.IN,duration:2,easing:Strong.easeOut,startPoint:5,shape:Iris.CIRCLE參數(shù)說明：startPoint：指明起始位置的整數(shù)；范圍1～9，分別為：左上：1、上中：2、右上：3、左中：4、中心：5、右中：6、左下：7、下中：8、右下：9。shape：有兩種，為〔方形〕和〔圓形〕的遮罩形狀。9.7.6照片過渡Photo效果此過渡實現(xiàn)影片剪輯對象像放映照片一樣出現(xiàn)或消失的效果。該過渡對象參數(shù)為：type:Photo,direction:Transition.IN,duration:1,easing:None.easeNone說明：此效果只使用共有參數(shù)，不需要其它參數(shù)。下面的例如在FlashCS3中使用導(dǎo)入一副圖片，然后放入影片剪輯中，放入舞臺，命名為mc，下面的代碼控制mc實現(xiàn)照片過渡動畫效果。翻開動作面板，輸入下面的代碼：importfl.transitions.*;importfl.transitions.easing.*;TransitionManager.start(mc,{type:Photo,direction:Transition.IN,duration:10,easing:None.easeNone});9.7.7像素溶解過渡PixelDissolve效果此過渡使用隨機(jī)出現(xiàn)或消失的棋盤圖案矩形來顯示或隱藏影片剪輯對象。該過渡對象參數(shù)為：type:PixelDissolve,direction:Transition.IN,duration:2,easing:Regular.easeIn,xSections:10,ySections:10參數(shù)說明：xSections：指明沿水平軸的遮罩矩形局部的數(shù)目。推薦的范圍1～50。ySections：指明沿垂直軸的遮罩矩形局部的數(shù)目。推薦的范圍1～50。下面的例如在FlashCS3中使用導(dǎo)入一副圖片，然后放入影片剪輯中，放入舞臺，命名為mc，下面的代碼控制mc實現(xiàn)像素溶解動畫效果。翻開動作面板，輸入下面的代碼：importfl.transitions.*;importfl.transitions.easing.*;TransitionManager.start(mc,{type:PixelDissolve,direction:Transition.IN,duration:10,easing:Regular.easeIn,xSections:30,ySections:30});9.7.8旋轉(zhuǎn)過渡Rotate效果此過渡實現(xiàn)影片剪輯旋轉(zhuǎn)動畫效果。該過渡對象參數(shù)為：type:Rotate,direction:Transition.IN,duration:3,easing:Strong.easeInOut,ccw:false,degrees:720參數(shù)說明：ccw：Boolean值：false表示順時針旋轉(zhuǎn)；true表示逆時針旋轉(zhuǎn)。degrees：指明顯示對象要旋轉(zhuǎn)的度數(shù)。推薦范圍1～9999。旋轉(zhuǎn)一周為360度。9.7.9擠壓過渡Squeeze效果此過渡實現(xiàn)水平或垂直縮放影片剪輯對象。過渡對象參數(shù)為：type:Squeeze,direction:Transition.IN,duration:2,easing:Elastic.easeOut,dimen