AnimateCC二維動(dòng)畫設(shè)計(jì)與制作-第六單元：交互動(dòng)畫制作課件

第六單元：交互動(dòng)畫制作項(xiàng)目五：小游戲制作6.1平臺(tái)、文檔與腳本類型6.2代碼片段的使用6.3對(duì)象的屬性6.4使用animate腳本編寫動(dòng)畫第六單元：交互動(dòng)畫制作項(xiàng)目五：小游戲制作一、不同平臺(tái)與文檔、腳本因?yàn)锳nimateCC可以創(chuàng)建跨平臺(tái)的影片和應(yīng)用，所以在創(chuàng)建文檔的時(shí)候，需要選擇某種文檔類型，不同類型的文檔使用的編輯腳本也不一樣。1.ActionScript3.0平臺(tái)與腳本ActionScript3.0平臺(tái)是面向PC端的創(chuàng)作平臺(tái)，在此平臺(tái)下主要發(fā)布傳統(tǒng)的SWF動(dòng)畫，使用FlashPlayer播放器播放。該平臺(tái)使用的是ActionScript3.0腳本。2一、不同平臺(tái)與文檔、腳本2一、不同平臺(tái)與文檔、腳本2.HTML5Canvas平臺(tái)與腳本HTML5Canvas文檔是AniamteCC支持互聯(lián)網(wǎng)，特別是移動(dòng)互聯(lián)網(wǎng)環(huán)境的一種文檔類型。HTML5是目前非?；鸨男乱淮谋緲?biāo)記語(yǔ)言，Canvas是HTML5中的一個(gè)新元素，它提供了多個(gè)API，可以動(dòng)態(tài)生成及渲染圖形、圖表、圖像及動(dòng)畫，因此它對(duì)創(chuàng)建豐富的交互性HTML5內(nèi)容提供本地支持。這樣我們可以使用傳統(tǒng)的Animate時(shí)間軸、工作區(qū)及工具來(lái)創(chuàng)建內(nèi)容，然后Animate會(huì)自動(dòng)通過(guò)CreateJS生成HTML5網(wǎng)頁(yè)輸出。3一、不同平臺(tái)與文檔、腳本3二、Animate腳本簡(jiǎn)介1.ActionScript3.0ActionScript（簡(jiǎn)稱AS）是Animate前身Flash所使用的腳本語(yǔ)言，在Animate中依然可以使用（在as3文檔類型下）。它可以向應(yīng)用程序添加復(fù)雜的交互性、播放控制和數(shù)據(jù)顯示，其語(yǔ)法特點(diǎn)與javascript相似。2.

CreateJS腳本CreateJS即CreateJS庫(kù)，屬于javascrpit庫(kù)的一種，是一款主要為HTML5游戲開發(fā)的引擎。4二、Animate腳本簡(jiǎn)介4二、Animate腳本簡(jiǎn)介其它語(yǔ)言程序一樣，animate的腳本包括有函數(shù)、方法、屬性、事件、類和語(yǔ)法。3.腳本演示：用鍵盤移動(dòng)的氣球4.一些術(shù)語(yǔ)：（1）實(shí)例名稱：可以給舞臺(tái)上的影片剪輯和按鈕命名，但圖形元件不可以命名。（2）屬性：即舞臺(tái)上對(duì)象的屬性，如坐標(biāo)位置、大小等。（3）值（4）變量（變量名區(qū)分大小寫）（5）事件：具體發(fā)生的一個(gè)操作，如鼠標(biāo)被按下、鍵盤被按下、剪輯被載入等。腳本由事件觸發(fā)，然后影片就可以對(duì)許多事件做出反應(yīng)。5二、Animate腳本簡(jiǎn)介5二、Animate腳本簡(jiǎn)介（6）操作符：=、<、>、+、-、*、/等（7）關(guān)鍵字：語(yǔ)法中具有特殊用途的保留字詞，它們不能用于變量、函數(shù)或標(biāo)簽名稱。（8）變量與常量（9）括號(hào)：大括號(hào)之間的內(nèi)容可能是一組操作，小括號(hào)中的內(nèi)容一般是一個(gè)值。（10）分號(hào)：語(yǔ)句之間用分號(hào)隔開（11）點(diǎn)：一是用來(lái)表示到達(dá)指定時(shí)間軸的目標(biāo)路徑，二是用來(lái)分隔對(duì)象名稱與其屬性或要調(diào)用的方法（12）引號(hào)：一般用來(lái)表示字符串6二、Animate腳本簡(jiǎn)介6二、Animate腳本簡(jiǎn)介（13）注釋：用//表示單行注釋，/*…….*/表示中間的內(nèi)容都為注釋（14）幀標(biāo)簽三、Animate動(dòng)作面板介紹7二、Animate腳本簡(jiǎn)介7四、使用代碼片段添加AS（按鍵盤移動(dòng)小汽球）1.給對(duì)象添加實(shí)例名稱2.給對(duì)象添加代碼片段3.修改代碼片段4.設(shè)置變量記錄移動(dòng)速度5.通過(guò)兩個(gè)按鈕增加或減少速度6.通過(guò)輸入框和按鈕來(lái)改變速度7.控制氣球的移動(dòng)范圍五、使用代碼片段添加HTML5腳本8四、使用代碼片段添加AS（按鍵盤移動(dòng)小汽球）8第六單元：交互動(dòng)畫制作6.2動(dòng)作面板的使用第六單元：交互動(dòng)畫制作6.2動(dòng)作面板的使用一、動(dòng)作面板的結(jié)構(gòu)動(dòng)作面板包含以下兩個(gè)窗格。左側(cè)窗格為“腳本導(dǎo)航器”右側(cè)窗格為“腳本”窗格10一、動(dòng)作面板的結(jié)構(gòu)10二、代碼注釋代碼注釋是代碼中被腳本編譯器忽略的部分。代碼注釋可解釋代碼的操作，讓代碼看上去更易理解，也可以暫時(shí)停用不想刪除的代碼。代碼注釋有兩種形式，即注釋行與注釋塊。注釋行：通過(guò)在代碼行的開頭加上雙斜杠“//”可對(duì)其進(jìn)行注釋。注釋塊：可以對(duì)若干行代碼進(jìn)行注釋，在代碼塊的開頭加上一個(gè)斜杠和一個(gè)星號(hào)“/*”，并在代碼塊的結(jié)尾加上一個(gè)星號(hào)和一個(gè)斜杠“*/”11二、代碼注釋11二、代碼注釋取消注釋：將光標(biāo)置于含有注釋的代碼行中，或者選擇已注釋的代碼塊，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“取消注釋”，或使用快捷鍵Ctrl+Shift+M組合鍵即可取消注釋所選內(nèi)容。12二、代碼注釋12三、使用動(dòng)作碼向?qū)?dòng)作碼向?qū)茿niamteCC新增加的功能，通過(guò)使用“動(dòng)作”面板中的“使用向?qū)砑印边x項(xiàng)，不需要手動(dòng)輸入代碼就可以將交互功能添加到HTML5組件中。要注意的是只有HTML5Canvas文檔才支持動(dòng)作碼向?qū)А?3三、使用動(dòng)作碼向?qū)?3第六單元：交互動(dòng)畫制作6.3代碼片段的使用第六單元：交互動(dòng)畫制作6.3代碼片段的使用一、概念與類型“代碼片段”是AnimateCC預(yù)置的一些功能代碼，它允許用戶直接在腳本窗口添加大量模塊化的腳本代碼，而不需要任何JavaScript或ActionScript3.0方面的知識(shí)，從而使得非編程人員能夠輕松地為影片添加交互功能。代碼片段主要有3類，分別是ActionScript類、HTML5Canvas類和WebGL類，對(duì)應(yīng)于3種不同的文檔類型，即每種文檔類型只能使用對(duì)應(yīng)的代碼片段。每種類型下面又根據(jù)不同的代碼功能進(jìn)行了分類，15一、概念與類型15二、使用代碼片段使用“代碼片段”前，建議首先要對(duì)舞臺(tái)上具有交互功能的元件實(shí)例命名，如按鈕、影片剪輯實(shí)例等，必須要有實(shí)例名稱才能在腳本中調(diào)用。其次，因?yàn)榇a只能放置在關(guān)鍵幀中，為了便于腳本的管理，建議專門建立一個(gè)“Actions”圖層放置腳本。如果沒(méi)有建立，AnimateCC會(huì)在插入代碼片段時(shí)自動(dòng)在其他圖層之上添加一個(gè)“Actions”圖層。16二、使用代碼片段16二、使用代碼片段基本步驟：1.選擇舞臺(tái)上的元件實(shí)例或時(shí)間軸中的幀。2.在“代碼片段”面板中，找到要應(yīng)用的代碼片段，將代碼添加到關(guān)鍵幀上。添加方法有3種：（1）雙擊該代碼片段（2）單擊“添加到當(dāng)前幀”按鈕（3）單擊“復(fù)制到剪貼板”按鈕，然后在動(dòng)作面板腳本窗格粘貼該代碼片段（4）替換與修改添加的代碼17二、使用代碼片段17三、AS動(dòng)作1.單擊轉(zhuǎn)到web頁(yè)（超鏈接）navigateToURL(newURLRequest())?？梢酝ㄟ^(guò)聲明一個(gè)變量來(lái)保存URL地址，如：18三、AS動(dòng)作18關(guān)鍵字解讀：URLRequest：網(wǎng)址請(qǐng)求類；newURLRequest（）:一個(gè)新的網(wǎng)址請(qǐng)求；addEventListener（）：添加事件幀聽器；MouseEvent.CLICK：鼠標(biāo)點(diǎn)擊事件；function：定義一個(gè)方法；navigateToURL（）：導(dǎo)航網(wǎng)址的函數(shù)；19關(guān)鍵字解讀：192.自定義鼠標(biāo)光標(biāo)20關(guān)鍵字解讀：stage：舞臺(tái)對(duì)象；addChild（）：添加子對(duì)象（實(shí)例）到舞臺(tái)Event.ENTER_FRAME：載入幀的事件；stage.mouseX：鼠標(biāo)X坐標(biāo)；stage.mouseY：鼠標(biāo)Y坐標(biāo)；Mouse.hide（）：隱藏鼠標(biāo)；2.自定義鼠標(biāo)光標(biāo)20關(guān)鍵字解讀：3.拖放21關(guān)鍵字解讀：MouseEvent.MOUSE_DOWN：鼠標(biāo)按下事件；MouseEvent.MOUSE_UP：鼠標(biāo)松開事件；startDrag（）：開始拖放；stopDrag（）：停止拖放；3.拖放21關(guān)鍵字解讀：4.播放與停止影片剪輯22關(guān)鍵字解讀：play（）：從當(dāng)前幀播放；stop（）：在當(dāng)前幀停止；mc.play（）：播放mc實(shí)例；mc.stop（）：停止mc實(shí)例；4.播放與停止影片剪輯22關(guān)鍵字解讀：5.顯示與隱藏對(duì)象23boy_mc.visible=false;boy_mc.visible=true;關(guān)鍵字：visible，對(duì)象的可視性屬性。練習(xí)：通過(guò)按鈕控制影片剪輯的播放、停止、顯示與隱藏。5.顯示與隱藏對(duì)象23boy_mc.visible=fa6.單擊以定位（XY坐標(biāo)屬性）24通過(guò)單擊某個(gè)對(duì)象，設(shè)置對(duì)象的xy坐標(biāo)。關(guān)鍵字：x,y,對(duì)象的坐標(biāo)屬性。練習(xí)：通過(guò)按鈕讓氣球回到原點(diǎn)。6.單擊以定位（XY坐標(biāo)屬性）24通過(guò)單擊某個(gè)對(duì)象，設(shè)置對(duì)7.生成隨機(jī)數(shù)25關(guān)鍵字：Math.floor（）：返回小于或等于一個(gè)給定數(shù)字的最大整數(shù)。Math.random（）：返回值0.0~1.0之間的一個(gè)隨機(jī)數(shù)。練習(xí)：制作一個(gè)簡(jiǎn)單的抽獎(jiǎng)器7.生成隨機(jī)數(shù)25關(guān)鍵字：7.生成隨機(jī)數(shù)26關(guān)鍵字：removeEventListener（）：移除幀聽器；int（）：向下取整為最接近的整數(shù)；String（）：將參數(shù)轉(zhuǎn)換為字符串；.text：文本框的文本屬性。7.生成隨機(jī)數(shù)26關(guān)鍵字：8.定時(shí)器27varmytime:Timer=newTimer(1000,60);//間隔一秒，執(zhí)行60次，第二個(gè)參數(shù)不寫的話，表示一直執(zhí)行；mytime.addEventListener(TimerEvent.TIMER,settimers);

//添加監(jiān)聽時(shí)間每次執(zhí)行都運(yùn)行的函數(shù)mytime.addEventListener(TimerEvent.TIMER_COMPLETE,onTimerComplete);

//60次執(zhí)行完成后，執(zhí)行的函數(shù)mytime.start();//啟動(dòng)定時(shí)器8.定時(shí)器27varmytime:Timer=new8.定時(shí)器288.定時(shí)器28四、時(shí)間軸導(dǎo)航1.在此幀處停止或播放stop（）;play（）;以上兩函數(shù)無(wú)參數(shù)。29四、時(shí)間軸導(dǎo)航29四、時(shí)間軸導(dǎo)航2.單擊以轉(zhuǎn)到幀并停止或播放gotoAndStop（參數(shù)）;gotoAndPlay（參數(shù)）;此函數(shù)的參數(shù)為為所轉(zhuǎn)到的幀，可以是幀的編號(hào)，或者幀的標(biāo)簽，如：gotoAndStop(5)；跳到第5幀并停止；gotoAndPlay(“start”)；跳到標(biāo)簽為”start”的幀并開始播放；30四、時(shí)間軸導(dǎo)航30四

、時(shí)間軸導(dǎo)航3.轉(zhuǎn)到下一幀并停止nextFrame();4.轉(zhuǎn)到前一幀并停止prevFrame();以上兩函數(shù)無(wú)參數(shù)。5.轉(zhuǎn)到下一場(chǎng)景并播放MovieClip(this.root).nextScene();或直接寫nextScene();6.轉(zhuǎn)到前一場(chǎng)景并播放MovieClip(this.root).prevScene();或直接寫prevScene();31四、時(shí)間軸導(dǎo)航31四

、時(shí)間軸導(dǎo)航7.跳轉(zhuǎn)到場(chǎng)景并播放gotoAndPlay(5,“scene1”)參數(shù)分別是所轉(zhuǎn)到的幀和場(chǎng)景，scene1是場(chǎng)景名稱。上面一句的意思是跳到scene1場(chǎng)景的第5幀播放。補(bǔ)充：關(guān)于場(chǎng)景。8.練習(xí)：制作時(shí)尚畫冊(cè)要點(diǎn)：用一個(gè)變量記錄當(dāng)前的幀，每按一次下一張，變量加1，按一次上一張，變量減1，并判斷是否到了第1幀或最后1幀。32四、時(shí)間軸導(dǎo)航32五、動(dòng)畫1.用鍵盤箭頭移動(dòng)邏輯解讀2.水平移動(dòng)和垂直移動(dòng)即改變對(duì)象x和y坐標(biāo)。如：mymc.x+=100;mymc.y+=100;3.旋轉(zhuǎn)一次與不斷旋轉(zhuǎn)mymc.rotation+=45;即改變對(duì)象的角度。關(guān)鍵字：rotation，即對(duì)象的旋轉(zhuǎn)角度屬性。不斷旋轉(zhuǎn)可利用Event.ENTER_FRAME事件或定時(shí)器。33五、動(dòng)畫33五、動(dòng)畫4.水平動(dòng)畫移動(dòng)與垂直動(dòng)畫移動(dòng)即不斷改變x和y坐標(biāo)的值，可利用Event.ENTER_FRAME事件或定時(shí)器。如以下代碼，即讓mymc實(shí)例不斷向右移動(dòng)，每1/24秒移動(dòng)10像素。34五、動(dòng)畫34五、動(dòng)畫5.淡入和淡出影片剪輯即不斷對(duì)象的透明度alpha，淡入則alpha越來(lái)越大，淡出則alpha越來(lái)越小。如下圖為淡入。關(guān)鍵字：alpha，即對(duì)象的透明度屬性，范圍為0－1。35五、動(dòng)畫35五、動(dòng)畫6.對(duì)象的屬性和屬性值（1）常用屬性及其取值范圍。36屬性描述取值范圍x水平位置無(wú)窮y垂直位置無(wú)窮rotation旋轉(zhuǎn)無(wú)窮alpha透明度0-1,1表示100%scaleX水平縮放無(wú)窮,1表示100%scaleY垂直縮放無(wú)窮,1表示100%width對(duì)象寬度無(wú)窮height對(duì)象高度無(wú)窮stage.stageWidth舞臺(tái)寬度

stage.stageHeight舞臺(tái)高度

visible可見性true或false五、動(dòng)畫36屬性描述取值范圍x水平位置無(wú)窮y垂直位置無(wú)窮ro五、動(dòng)畫6.對(duì)象的屬性和屬性值（2）給對(duì)象的屬性賦值（3）增加或減少屬性值（4）使用ENTER_FRAME事件修改影片剪輯屬性，如：addEventListener(Event.ENTER_FRAME,xxx)37五、動(dòng)畫37五、動(dòng)畫7.Tween類Tween是AS3中的一種緩動(dòng)類，可以非常方便地為對(duì)象添加緩動(dòng)效果。Tween類包含6種類型：Back、Bounce、Elastic、None、Regular、Strong。每種類型包含三個(gè)方法，分別是：easeIn、easeInOut和easeOut。其中None類型還包含一種easeNone方法。各種方法的運(yùn)動(dòng)類型也有不同。38五、動(dòng)畫38五、動(dòng)畫7.Tween類39類型easeIn()方法easeInOut()方法easeOut()方法Back開始時(shí)往后運(yùn)動(dòng)，然后反向朝目標(biāo)移動(dòng)。開始運(yùn)動(dòng)時(shí)是向后跟蹤，再倒轉(zhuǎn)方向并朝目標(biāo)移動(dòng)，稍微過(guò)沖目標(biāo)，然后再次倒轉(zhuǎn)方向，回來(lái)朝目標(biāo)移動(dòng)。開始運(yùn)動(dòng)時(shí)是朝目標(biāo)移動(dòng)，稍微過(guò)沖，再倒轉(zhuǎn)方向回來(lái)朝著目標(biāo)。Bounce以較慢速度開始回彈運(yùn)動(dòng)，然后在執(zhí)行時(shí)加快運(yùn)動(dòng)速度。緩慢地開始跳動(dòng)，進(jìn)行加速運(yùn)動(dòng)，再進(jìn)行減速。以較快速度開始回彈運(yùn)動(dòng)，然后在執(zhí)行時(shí)減慢運(yùn)動(dòng)速度。Elastic以較慢速度開始運(yùn)動(dòng)，然后在執(zhí)行時(shí)加快運(yùn)動(dòng)速度。緩慢地開始運(yùn)動(dòng)，進(jìn)行加速運(yùn)動(dòng)，再進(jìn)行減速。以較快速度開始運(yùn)動(dòng)，然后在執(zhí)行時(shí)減慢運(yùn)動(dòng)速度。None一種沒(méi)有加速的持續(xù)運(yùn)動(dòng)。同左同左Regular以零速率開始運(yùn)動(dòng)，然后在執(zhí)行時(shí)加快運(yùn)動(dòng)速度。開始運(yùn)動(dòng)時(shí)速率為零，先對(duì)運(yùn)動(dòng)進(jìn)行加速，再減速直到速率為零。以較快速度開始運(yùn)動(dòng)，然后在執(zhí)行時(shí)減慢運(yùn)動(dòng)速度，直至速率為零。Strong以零速率開始運(yùn)動(dòng)，然后在執(zhí)行時(shí)加快運(yùn)動(dòng)速度。開始運(yùn)動(dòng)時(shí)速率為零，先對(duì)運(yùn)動(dòng)進(jìn)行加速，再減速直到速率為零。以較快速度開始運(yùn)動(dòng)，然后在執(zhí)行時(shí)減慢運(yùn)動(dòng)速度，直至速率為零。五、動(dòng)畫39類型easeIn()方法easeInOut()方五、動(dòng)畫7.Tween類Tween類的語(yǔ)法是：varmytween:Tween=newTween(object,property,function,begin,end,duration,useSeconds);

參數(shù)解釋如下:

object:一個(gè)您想要增加Tween動(dòng)作的mc實(shí)例名.

property:該mc的一個(gè)屬性,即為將要添加Tween動(dòng)作的屬性，如”_x”,”rotation”,需用雙引號(hào).

function:easing類的一個(gè)方法，即前面表格提到的6*3種，如Elastic.easeInOut()

begin:屬性開始時(shí)的數(shù)值.

end:屬性結(jié)束時(shí)的數(shù)值.

duration:動(dòng)作持續(xù)的幀數(shù)/時(shí)間.

useSeconds:一個(gè)布爾值,決定是使用幀數(shù)計(jì)時(shí)(為false)還是秒數(shù)計(jì)時(shí)(為true).默認(rèn)為false.40五、動(dòng)畫40五、動(dòng)畫7.Tween類一條Tween類的用法例子如下：varmytween:Tween=newTween(mymc,"rotation",Elastic.easeOut,0,360,5,true);

41五、動(dòng)畫41五、動(dòng)畫8.練習(xí)使用Tween類結(jié)合對(duì)象屬性的應(yīng)用，制作樂(lè)器選擇與運(yùn)動(dòng)的動(dòng)畫，效果見案例。42五、動(dòng)畫42第六單元：交互動(dòng)畫制作項(xiàng)目五：小游戲制作6.1平臺(tái)、文檔與腳本類型6.2代碼片段的使用6.3對(duì)象的屬性6.4使用animate腳本編寫動(dòng)畫第六單元：交互動(dòng)畫制作項(xiàng)目五：小游戲制作一、不同平臺(tái)與文檔、腳本因?yàn)锳nimateCC可以創(chuàng)建跨平臺(tái)的影片和應(yīng)用，所以在創(chuàng)建文檔的時(shí)候，需要選擇某種文檔類型，不同類型的文檔使用的編輯腳本也不一樣。1.ActionScript3.0平臺(tái)與腳本ActionScript3.0平臺(tái)是面向PC端的創(chuàng)作平臺(tái)，在此平臺(tái)下主要發(fā)布傳統(tǒng)的SWF動(dòng)畫，使用FlashPlayer播放器播放。該平臺(tái)使用的是ActionScript3.0腳本。44一、不同平臺(tái)與文檔、腳本2一、不同平臺(tái)與文檔、腳本2.HTML5Canvas平臺(tái)與腳本HTML5Canvas文檔是AniamteCC支持互聯(lián)網(wǎng)，特別是移動(dòng)互聯(lián)網(wǎng)環(huán)境的一種文檔類型。HTML5是目前非?；鸨男乱淮谋緲?biāo)記語(yǔ)言，Canvas是HTML5中的一個(gè)新元素，它提供了多個(gè)API，可以動(dòng)態(tài)生成及渲染圖形、圖表、圖像及動(dòng)畫，因此它對(duì)創(chuàng)建豐富的交互性HTML5內(nèi)容提供本地支持。這樣我們可以使用傳統(tǒng)的Animate時(shí)間軸、工作區(qū)及工具來(lái)創(chuàng)建內(nèi)容，然后Animate會(huì)自動(dòng)通過(guò)CreateJS生成HTML5網(wǎng)頁(yè)輸出。45一、不同平臺(tái)與文檔、腳本3二、Animate腳本簡(jiǎn)介1.ActionScript3.0ActionScript（簡(jiǎn)稱AS）是Animate前身Flash所使用的腳本語(yǔ)言，在Animate中依然可以使用（在as3文檔類型下）。它可以向應(yīng)用程序添加復(fù)雜的交互性、播放控制和數(shù)據(jù)顯示，其語(yǔ)法特點(diǎn)與javascript相似。2.

CreateJS腳本CreateJS即CreateJS庫(kù)，屬于javascrpit庫(kù)的一種，是一款主要為HTML5游戲開發(fā)的引擎。46二、Animate腳本簡(jiǎn)介4二、Animate腳本簡(jiǎn)介其它語(yǔ)言程序一樣，animate的腳本包括有函數(shù)、方法、屬性、事件、類和語(yǔ)法。3.腳本演示：用鍵盤移動(dòng)的氣球4.一些術(shù)語(yǔ)：（1）實(shí)例名稱：可以給舞臺(tái)上的影片剪輯和按鈕命名，但圖形元件不可以命名。（2）屬性：即舞臺(tái)上對(duì)象的屬性，如坐標(biāo)位置、大小等。（3）值（4）變量（變量名區(qū)分大小寫）（5）事件：具體發(fā)生的一個(gè)操作，如鼠標(biāo)被按下、鍵盤被按下、剪輯被載入等。腳本由事件觸發(fā)，然后影片就可以對(duì)許多事件做出反應(yīng)。47二、Animate腳本簡(jiǎn)介5二、Animate腳本簡(jiǎn)介（6）操作符：=、<、>、+、-、*、/等（7）關(guān)鍵字：語(yǔ)法中具有特殊用途的保留字詞，它們不能用于變量、函數(shù)或標(biāo)簽名稱。（8）變量與常量（9）括號(hào)：大括號(hào)之間的內(nèi)容可能是一組操作，小括號(hào)中的內(nèi)容一般是一個(gè)值。（10）分號(hào)：語(yǔ)句之間用分號(hào)隔開（11）點(diǎn)：一是用來(lái)表示到達(dá)指定時(shí)間軸的目標(biāo)路徑，二是用來(lái)分隔對(duì)象名稱與其屬性或要調(diào)用的方法（12）引號(hào)：一般用來(lái)表示字符串48二、Animate腳本簡(jiǎn)介6二、Animate腳本簡(jiǎn)介（13）注釋：用//表示單行注釋，/*…….*/表示中間的內(nèi)容都為注釋（14）幀標(biāo)簽三、Animate動(dòng)作面板介紹49二、Animate腳本簡(jiǎn)介7四、使用代碼片段添加AS（按鍵盤移動(dòng)小汽球）1.給對(duì)象添加實(shí)例名稱2.給對(duì)象添加代碼片段3.修改代碼片段4.設(shè)置變量記錄移動(dòng)速度5.通過(guò)兩個(gè)按鈕增加或減少速度6.通過(guò)輸入框和按鈕來(lái)改變速度7.控制氣球的移動(dòng)范圍五、使用代碼片段添加HTML5腳本50四、使用代碼片段添加AS（按鍵盤移動(dòng)小汽球）8第六單元：交互動(dòng)畫制作6.2動(dòng)作面板的使用第六單元：交互動(dòng)畫制作6.2動(dòng)作面板的使用一、動(dòng)作面板的結(jié)構(gòu)動(dòng)作面板包含以下兩個(gè)窗格。左側(cè)窗格為“腳本導(dǎo)航器”右側(cè)窗格為“腳本”窗格52一、動(dòng)作面板的結(jié)構(gòu)10二、代碼注釋代碼注釋是代碼中被腳本編譯器忽略的部分。代碼注釋可解釋代碼的操作，讓代碼看上去更易理解，也可以暫時(shí)停用不想刪除的代碼。代碼注釋有兩種形式，即注釋行與注釋塊。注釋行：通過(guò)在代碼行的開頭加上雙斜杠“//”可對(duì)其進(jìn)行注釋。注釋塊：可以對(duì)若干行代碼進(jìn)行注釋，在代碼塊的開頭加上一個(gè)斜杠和一個(gè)星號(hào)“/*”，并在代碼塊的結(jié)尾加上一個(gè)星號(hào)和一個(gè)斜杠“*/”53二、代碼注釋11二、代碼注釋取消注釋：將光標(biāo)置于含有注釋的代碼行中，或者選擇已注釋的代碼塊，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“取消注釋”，或使用快捷鍵Ctrl+Shift+M組合鍵即可取消注釋所選內(nèi)容。54二、代碼注釋12三、使用動(dòng)作碼向?qū)?dòng)作碼向?qū)茿niamteCC新增加的功能，通過(guò)使用“動(dòng)作”面板中的“使用向?qū)砑印边x項(xiàng)，不需要手動(dòng)輸入代碼就可以將交互功能添加到HTML5組件中。要注意的是只有HTML5Canvas文檔才支持動(dòng)作碼向?qū)А?5三、使用動(dòng)作碼向?qū)?3第六單元：交互動(dòng)畫制作6.3代碼片段的使用第六單元：交互動(dòng)畫制作6.3代碼片段的使用一、概念與類型“代碼片段”是AnimateCC預(yù)置的一些功能代碼，它允許用戶直接在腳本窗口添加大量模塊化的腳本代碼，而不需要任何JavaScript或ActionScript3.0方面的知識(shí)，從而使得非編程人員能夠輕松地為影片添加交互功能。代碼片段主要有3類，分別是ActionScript類、HTML5Canvas類和WebGL類，對(duì)應(yīng)于3種不同的文檔類型，即每種文檔類型只能使用對(duì)應(yīng)的代碼片段。每種類型下面又根據(jù)不同的代碼功能進(jìn)行了分類，57一、概念與類型15二、使用代碼片段使用“代碼片段”前，建議首先要對(duì)舞臺(tái)上具有交互功能的元件實(shí)例命名，如按鈕、影片剪輯實(shí)例等，必須要有實(shí)例名稱才能在腳本中調(diào)用。其次，因?yàn)榇a只能放置在關(guān)鍵幀中，為了便于腳本的管理，建議專門建立一個(gè)“Actions”圖層放置腳本。如果沒(méi)有建立，AnimateCC會(huì)在插入代碼片段時(shí)自動(dòng)在其他圖層之上添加一個(gè)“Actions”圖層。58二、使用代碼片段16二、使用代碼片段基本步驟：1.選擇舞臺(tái)上的元件實(shí)例或時(shí)間軸中的幀。2.在“代碼片段”面板中，找到要應(yīng)用的代碼片段，將代碼添加到關(guān)鍵幀上。添加方法有3種：（1）雙擊該代碼片段（2）單擊“添加到當(dāng)前幀”按鈕（3）單擊“復(fù)制到剪貼板”按鈕，然后在動(dòng)作面板腳本窗格粘貼該代碼片段（4）替換與修改添加的代碼59二、使用代碼片段17三、AS動(dòng)作1.單擊轉(zhuǎn)到web頁(yè)（超鏈接）navigateToURL(newURLRequest())。可以通過(guò)聲明一個(gè)變量來(lái)保存URL地址，如：60三、AS動(dòng)作18關(guān)鍵字解讀：URLRequest：網(wǎng)址請(qǐng)求類；newURLRequest（）:一個(gè)新的網(wǎng)址請(qǐng)求；addEventListener（）：添加事件幀聽器；MouseEvent.CLICK：鼠標(biāo)點(diǎn)擊事件；function：定義一個(gè)方法；navigateToURL（）：導(dǎo)航網(wǎng)址的函數(shù)；61關(guān)鍵字解讀：192.自定義鼠標(biāo)光標(biāo)62關(guān)鍵字解讀：stage：舞臺(tái)對(duì)象；addChild（）：添加子對(duì)象（實(shí)例）到舞臺(tái)Event.ENTER_FRAME：載入幀的事件；stage.mouseX：鼠標(biāo)X坐標(biāo)；stage.mouseY：鼠標(biāo)Y坐標(biāo)；Mouse.hide（）：隱藏鼠標(biāo)；2.自定義鼠標(biāo)光標(biāo)20關(guān)鍵字解讀：3.拖放63關(guān)鍵字解讀：MouseEvent.MOUSE_DOWN：鼠標(biāo)按下事件；MouseEvent.MOUSE_UP：鼠標(biāo)松開事件；startDrag（）：開始拖放；stopDrag（）：停止拖放；3.拖放21關(guān)鍵字解讀：4.播放與停止影片剪輯64關(guān)鍵字解讀：play（）：從當(dāng)前幀播放；stop（）：在當(dāng)前幀停止；mc.play（）：播放mc實(shí)例；mc.stop（）：停止mc實(shí)例；4.播放與停止影片剪輯22關(guān)鍵字解讀：5.顯示與隱藏對(duì)象65boy_mc.visible=false;boy_mc.visible=true;關(guān)鍵字：visible，對(duì)象的可視性屬性。練習(xí)：通過(guò)按鈕控制影片剪輯的播放、停止、顯示與隱藏。5.顯示與隱藏對(duì)象23boy_mc.visible=fa6.單擊以定位（XY坐標(biāo)屬性）66通過(guò)單擊某個(gè)對(duì)象，設(shè)置對(duì)象的xy坐標(biāo)。關(guān)鍵字：x,y,對(duì)象的坐標(biāo)屬性。練習(xí)：通過(guò)按鈕讓氣球回到原點(diǎn)。6.單擊以定位（XY坐標(biāo)屬性）24通過(guò)單擊某個(gè)對(duì)象，設(shè)置對(duì)7.生成隨機(jī)數(shù)67關(guān)鍵字：Math.floor（）：返回小于或等于一個(gè)給定數(shù)字的最大整數(shù)。Math.random（）：返回值0.0~1.0之間的一個(gè)隨機(jī)數(shù)。練習(xí)：制作一個(gè)簡(jiǎn)單的抽獎(jiǎng)器7.生成隨機(jī)數(shù)25關(guān)鍵字：7.生成隨機(jī)數(shù)68關(guān)鍵字：removeEventListener（）：移除幀聽器；int（）：向下取整為最接近的整數(shù)；String（）：將參數(shù)轉(zhuǎn)換為字符串；.text：文本框的文本屬性。7.生成隨機(jī)數(shù)26關(guān)鍵字：8.定時(shí)器69varmytime:Timer=newTimer(1000,60);//間隔一秒，執(zhí)行60次，第二個(gè)參數(shù)不寫的話，表示一直執(zhí)行；mytime.addEventListener(TimerEvent.TIMER,settimers);

//添加監(jiān)聽時(shí)間每次執(zhí)行都運(yùn)行的函數(shù)mytime.addEventListener(TimerEvent.TIMER_COMPLETE,onTimerComplete);

//60次執(zhí)行完成后，執(zhí)行的函數(shù)mytime.start();//啟動(dòng)定時(shí)器8.定時(shí)器27varmytime:Timer=new8.定時(shí)器708.定時(shí)器28四、時(shí)間軸導(dǎo)航1.在此幀處停止或播放stop（）;play（）;以上兩函數(shù)無(wú)參數(shù)。71四、時(shí)間軸導(dǎo)航29四、時(shí)間軸導(dǎo)航2.單擊以轉(zhuǎn)到幀并停止或播放gotoAndStop（參數(shù)）;gotoAndPlay（參數(shù)）;此函數(shù)的參數(shù)為為所轉(zhuǎn)到的幀，可以是幀的編號(hào)，或者幀的標(biāo)簽，如：gotoAndStop(5)；跳到第5幀并停止；gotoAndPlay(“start”)；跳到標(biāo)簽為”start”的幀并開始播放；72四、時(shí)間軸導(dǎo)航30四

、時(shí)間軸導(dǎo)航3.轉(zhuǎn)到下一幀并停止nextFrame();4.轉(zhuǎn)到前一幀并停止prevFrame();以上兩函數(shù)無(wú)參數(shù)。5.轉(zhuǎn)到下一場(chǎng)景并播放MovieClip(this.root).nextScene();或直接寫nextScene();6.轉(zhuǎn)到前一場(chǎng)景并播放MovieClip(this.root).prevScene();或直接寫prevScene();73四、時(shí)間軸導(dǎo)航31四

、時(shí)間軸導(dǎo)航7.跳轉(zhuǎn)到場(chǎng)景并播放gotoAndPlay(5,“scene1”)參數(shù)分別是所轉(zhuǎn)到的幀和場(chǎng)景，scene1是場(chǎng)景名稱。上面一句的意思是跳到scene1場(chǎng)景的第5幀播放。補(bǔ)充：關(guān)于場(chǎng)景。8.練習(xí)：制作時(shí)尚畫冊(cè)要點(diǎn)：用一個(gè)變量記錄當(dāng)前的幀，每按一次下一張，變量加1，按一次上一張，變量減1，并判斷是否到了第1幀或最后1幀。74四、時(shí)間軸導(dǎo)航32五、動(dòng)畫1.用鍵盤箭頭移動(dòng)邏輯解讀2.水平移動(dòng)和垂直移動(dòng)即改變對(duì)象x和y坐標(biāo)。如：mymc.x+=100;mymc.y+=100;3.旋轉(zhuǎn)一次與不斷旋轉(zhuǎn)mymc.rotation+=45;即改變對(duì)象的角度。關(guān)鍵字：rotation，即對(duì)象的旋轉(zhuǎn)角度屬性。不斷旋轉(zhuǎn)可利用Event.ENTER_FRAME事件或定時(shí)器。75五、動(dòng)畫33五、動(dòng)畫4.水平動(dòng)畫移動(dòng)與垂直動(dòng)畫移動(dòng)即不斷改變x和y坐標(biāo)的值，可利用Event.ENTER_FRAME事件或定時(shí)器。如以下代碼，即讓mymc實(shí)例不斷向右移動(dòng)，每1/24秒移動(dòng)10像素。76五、動(dòng)畫34五、動(dòng)畫5.淡入和淡出影片剪輯即不斷對(duì)象的透明度alpha，淡入則alpha越來(lái)越大，淡出則alpha越來(lái)越小。如下圖為淡入。關(guān)鍵字：alpha，即對(duì)象的透明度屬性，范圍為0－1。77五、動(dòng)畫35五、動(dòng)畫6.對(duì)象的屬性和屬性值（1）常用屬性及其取值范圍。78屬性描述取值范圍x水平位置無(wú)窮y垂直位置無(wú)窮rotation旋轉(zhuǎn)無(wú)窮alpha透明度0-1,1表示100%scaleX水平縮放無(wú)窮,1表示100%scaleY垂直縮放無(wú)窮,1表示100%width對(duì)象寬度無(wú)窮height對(duì)象高度無(wú)窮stage.stageWidth舞臺(tái)寬度

stage.stageHeight舞臺(tái)高度

visible可見性true或false五、動(dòng)畫36屬性描述取值范圍x水平位置無(wú)窮y垂直位置無(wú)窮ro五、動(dòng)畫6.對(duì)象的屬性和屬性值（2）給對(duì)象的屬性賦值（3）增加或減少屬性值（4）使