Animate動(dòng)畫設(shè)計(jì)與制作實(shí)例教程-網(wǎng)站應(yīng)用

制作網(wǎng)站通過本章,你應(yīng)該掌握:掌握影片剪輯控制腳本的使用方法；掌握網(wǎng)頁元素控制腳本的使用方法；掌握鍵盤事件的使用方法；掌握攝影網(wǎng)頁、學(xué)院招生網(wǎng)站、產(chǎn)品銷售網(wǎng)站的制作方法。

在網(wǎng)絡(luò)普及的現(xiàn)代社會(huì)，越來越多的企業(yè)或個(gè)人用戶開始制作屬于自己的動(dòng)態(tài)網(wǎng)站。Animate與其他可以制作網(wǎng)頁的動(dòng)畫制作軟件相比，具有更強(qiáng)大的交互性。要想使用Animate制作出美觀的網(wǎng)頁，并使用戶能夠自由控制動(dòng)畫，首先就必須了解ActionScript的基礎(chǔ)知識(shí)，以及如何向影片添加交互性動(dòng)作。9.1交互式動(dòng)畫的制作9.1.1影片剪輯控制

在AnimateCC2019中，可使用ActionScript3.0或JavaScript為動(dòng)畫添加交互性，具體使用哪種取決于所使用的文檔類型，ActionScript3.0提供了相應(yīng)的命令和組件，可以控制“影片剪輯”或“按鈕”實(shí)現(xiàn)超鏈接，讓網(wǎng)頁中的動(dòng)畫對(duì)用戶操作做出響應(yīng)，這些指令可以播放聲音、視頻，也可以跳轉(zhuǎn)到時(shí)間軸各個(gè)圖層對(duì)應(yīng)的幀，可以運(yùn)用ActionScript3.0腳本設(shè)計(jì)交互式導(dǎo)航及網(wǎng)頁，使用組件可以建立類似注冊(cè)類或網(wǎng)上考試類網(wǎng)頁。ActionScript3.0腳本在“動(dòng)作”面板中腳本窗口內(nèi)進(jìn)行編輯，如圖9-1所示，在“動(dòng)作”面板中，可以使用內(nèi)置的“代碼片段”工具簡(jiǎn)化腳本設(shè)計(jì)和編寫，代碼片段中集成了常見的各種事件和功能代碼。選定對(duì)象，直接雙擊相應(yīng)代碼片段即可把代碼添加到編輯框內(nèi)，根據(jù)實(shí)際需要完善修改即可，其調(diào)入可以直接在“動(dòng)作”面板中單擊腳本選項(xiàng)中的快捷工具圖標(biāo)調(diào)入，也可通過在主菜單中執(zhí)行“窗口”>“代碼片段”命令，在打開的對(duì)話框中調(diào)入，如圖要使用ActionScript腳本去控制影片剪輯，必須先為每一個(gè)放在舞臺(tái)上的影片剪輯命名，這就叫做實(shí)例名稱。另外，在給影片剪輯實(shí)例命名時(shí)，通常可以加上后綴_mc，這樣可以在寫代碼時(shí)，有代碼提示，方便代碼的編寫，如boy_mc，circle_mc，point_mc等。9.1交互式動(dòng)畫的制作

在AnimateCC2019中，可使用ActionScript3.0或JavaScript為動(dòng)畫添加交互性，具體使用哪種取決于所使用的文檔類型，ActionScript3.0提供了相應(yīng)的命令和組件，可以控制“影片剪輯”或“按鈕”實(shí)現(xiàn)超鏈接，讓網(wǎng)頁中的動(dòng)畫對(duì)用戶操作做出響應(yīng)，這些指令可以播放聲音、視頻，也可以跳轉(zhuǎn)到時(shí)間軸各個(gè)圖層對(duì)應(yīng)的幀，可以運(yùn)用ActionScript3.0腳本設(shè)計(jì)交互式導(dǎo)航及網(wǎng)頁，使用組件可以建立類似注冊(cè)類或網(wǎng)上考試類網(wǎng)頁。ActionScript3.0腳本在“動(dòng)作”面板中腳本窗口內(nèi)進(jìn)行編輯，如圖9-1所示，在“動(dòng)作”面板中，可以使用內(nèi)置的“代碼片段”工具簡(jiǎn)化腳本設(shè)計(jì)和編寫，代碼片段中集成了常見的各種事件和功能代碼。選定對(duì)象，直接雙擊相應(yīng)代碼片段即可把代碼添加到編輯框內(nèi)，根據(jù)實(shí)際需要完善修改即可，其調(diào)入可以直接在“動(dòng)作”面板中單擊腳本選項(xiàng)中的快捷工具圖標(biāo)調(diào)入，也可通過在主菜單中執(zhí)行“窗口”>“代碼片段”命令，在打開的對(duì)話框中調(diào)入，如圖9.1交互式動(dòng)畫的制作9.1.1影片剪輯控制腳本要使用ActionScript3.0控制影片剪輯，必須先命名放在“舞臺(tái)”上的每個(gè)影片剪輯，即實(shí)例名稱。另外，在給影片剪輯實(shí)例命名時(shí)，通?？梢约由虾缶Y_mc，如boy_mc、circle_mc、point_mc等，這樣可以在寫代碼時(shí)顯示代碼提示，方便代碼的編寫。1．影片剪輯元件的屬性（1）坐標(biāo)：Animate場(chǎng)景中的每個(gè)對(duì)象都有它的坐標(biāo)，坐標(biāo)值以像素為單位。Animate場(chǎng)景的左上角為坐標(biāo)原點(diǎn)，它的坐標(biāo)位置為(0,0)，前一個(gè)表示水平坐標(biāo)，后一個(gè)表示垂直坐標(biāo)。Animate默認(rèn)的場(chǎng)景大小為550像素×400像素，即場(chǎng)景右下角的坐標(biāo)為(550,400)。場(chǎng)景中的每一點(diǎn)分別用X和Y表示x坐標(biāo)值和y坐標(biāo)值。（2）鼠標(biāo)指針位置：利用影片剪輯元件的屬性，不但可以獲得坐標(biāo)位置，還可以獲得鼠標(biāo)指針位置，即鼠標(biāo)指針在影片中的坐標(biāo)位置。表示鼠標(biāo)指針坐標(biāo)屬性的關(guān)鍵字是mouseX和mouseY，其中mouseX代表指針的水平坐標(biāo)位置，mouseY代表指針的垂直坐標(biāo)位置。（3）旋轉(zhuǎn)方向：rotation屬性代表影片剪輯的旋轉(zhuǎn)方向，它是一個(gè)角度值，范圍為?180°～180°，可以是整數(shù)，也可以是浮點(diǎn)數(shù)。如果將它的值設(shè)置在這個(gè)范圍之外，系統(tǒng)會(huì)自動(dòng)將其轉(zhuǎn)換為這個(gè)范圍之間的值。9.1交互式動(dòng)畫的制作（4）可見性：visible屬性即可見性，使用布爾值true（1）或者false（0）表示。為true表示影片剪輯可見，即顯示影片剪輯；為false表示影片剪輯不可見，即隱藏影片剪輯。（5）透明度：alpha屬性決定了影片剪輯的透明程度，范圍為0～100，0代表完全透明，100表示不透明。（6）縮放屬性：影片剪輯的縮放屬性包括橫向縮放scaleX和縱向縮放scaleY。scaleX和scaleY的值代表相對(duì)于“庫”面板中原影片剪輯的橫向尺寸width和縱向尺寸height的百分比，而與場(chǎng)景中影片剪輯實(shí)例的尺寸無關(guān)。（7）尺寸屬性：與scaleX/scaleY值的屬性不同，width和height代表影片剪輯的絕對(duì)寬度和高度，而不是相對(duì)比例。2、絕對(duì)路徑和相對(duì)路徑路徑分為絕對(duì)路徑和相對(duì)路徑，它們的區(qū)別是到達(dá)目標(biāo)對(duì)象的出發(fā)點(diǎn)不同。絕對(duì)路徑是以當(dāng)前主場(chǎng)景（即根時(shí)間軸）為出發(fā)點(diǎn)，以目標(biāo)對(duì)象為結(jié)束點(diǎn)；而相對(duì)路徑則是從發(fā)出指令的對(duì)象所在的時(shí)間軸為出發(fā)點(diǎn)，以目標(biāo)對(duì)象為結(jié)束點(diǎn)。9.1交互式動(dòng)畫的制作實(shí)例練習(xí)——制作飛舞的蜻蜓實(shí)例練習(xí)——制作移動(dòng)的蜜蜂9.1交互式動(dòng)畫的制作實(shí)例練習(xí)——制作飄落的雪花9.1交互式動(dòng)畫的制作4、拖曳影片剪輯

在ActionScript3.0中，startDrag()方法的一般形式如下。publicfunctionstartDrag(lockCenter:Boolean=false,bounds:Rectangle=null):void

該方法允許用戶拖動(dòng)指定的Sprite。Sprite將一直保持可拖動(dòng)，直到通過調(diào)用Sprite.stopDrag()方法來明確停止，或直到將另一個(gè)Sprite變?yōu)榭赏蟿?dòng)為止。在同一時(shí)間只有一個(gè)Sprite是可拖動(dòng)的。lockCenter:Boolean(default=false)：指定是將可拖動(dòng)的Sprite鎖定到鼠標(biāo)位置中央（true），還是鎖定到用戶首次單擊該Sprite時(shí)所在的點(diǎn)上（false）。

bounds:Rectangle(default=null)：相對(duì)于Sprite父級(jí)的坐標(biāo)值，用于指定Sprite約束矩形。

stopDrag()方法可以實(shí)現(xiàn)停止拖曳影片，這個(gè)方法沒有參數(shù)。通過startDrag()方法變?yōu)榭赏蟿?dòng)的Sprite將一直保持可拖動(dòng)狀態(tài)，直到添加stopDrag()方法或另一個(gè)Sprite變?yōu)榭赏蟿?dòng)狀態(tài)為止。在同一時(shí)間只有一個(gè)Sprite是可拖動(dòng)的。9.1交互式動(dòng)畫的制作實(shí)例練習(xí)——制作望遠(yuǎn)鏡效果9.1.2網(wǎng)頁元素控制腳本

1、fscommand()方法該方法用于控制Flash播放器的播放環(huán)境及播放效果。其語法格式如下。publicfunctionfscommand(command,args):void用法1：要使用fscommand()將消息發(fā)送給FlashPlayer，必須使用預(yù)定義的命令和參數(shù)。下面列出fscommand()函數(shù)的command參數(shù)和args參數(shù)（command參數(shù)的值）可以指定的值。這些值控制在FlashPlayer中播放的SWF文件，包括放映文件。放映文件是可以作為獨(dú)立應(yīng)用程序運(yùn)行（也就是說不需要使用FlashPlayer即可運(yùn)行）的SWF文件。◎quit：無args參數(shù)，關(guān)閉播放器?！騠ullscreen：args為true或false。為true時(shí)，可將FlashPlayer設(shè)置為全屏模式；為false時(shí)，可將播放器返回到標(biāo)準(zhǔn)菜單視圖。◎allowscale：args為true或false。為false時(shí)，可設(shè)置播放器始終按SWF文件的原始大小繪制SWF文件，從不進(jìn)行縮放；為true時(shí)，強(qiáng)制將SWF文件縮放到播放器的100%大小。ActionScript3.0中，fscommand()是flash.system包中的方法，getURL是包中的navigateToURL()方法；loadMovie和loadMovieNum全局函數(shù)由flash.display包中的Loader類所替代；loadVariable和loadVariablesNum由包中的URLLoader類所替代。9.1.2網(wǎng)頁元素控制腳本

◎showmenu：args為true時(shí)，可啟用整個(gè)上下文菜單項(xiàng)集合；為false時(shí)，將隱藏除“關(guān)于FlashPlayer”和“設(shè)置”外的所有上下文菜單項(xiàng)。◎exec：args為指向應(yīng)用程序的路徑，在放映文件內(nèi)執(zhí)行應(yīng)用程序?！騮rapallkeys：args為true時(shí)，可將所有按鍵事件（包括快捷鍵）發(fā)送到FlashPlayer中的onClipEvent(keyDown/keyUp)處理函數(shù)。用法2：要使用fscommand()向Web瀏覽器中的腳本語言（如JavaScript）發(fā)送消息，可以在command和args參數(shù)中傳遞任意兩個(gè)參數(shù)。這些參數(shù)可以是字符串或表達(dá)式，并在處理或捕獲fscommand()函數(shù)的JavaScript函數(shù)中使用。9.1.2網(wǎng)頁元素控制腳本

2．navigateToURL()方法navigateToURL()方法位于包中，用于為事件添加超級(jí)鏈接，包括電子郵件鏈接。其語法格式如下。navigateToURL(request,window):void其中，request參數(shù)是一個(gè)URLRequest對(duì)象，用來定義目標(biāo)；window參數(shù)是一個(gè)字符串對(duì)象，用來定義加載的URL窗口是否為新窗口。window參數(shù)的值與HTML中target的值相同，可選值有：_self表示當(dāng)前窗口，_blank表示新窗口，_parent表示父窗口，_top表示頂層窗口。實(shí)例練習(xí)——利用navigateToURL()制作一個(gè)簡(jiǎn)單快速導(dǎo)航9.1.2瀏覽器和網(wǎng)絡(luò)控制命令

3、Loader類Loader類可用于加載SWF文件或圖像（JPG、PNG或GIF）文件。使用load()方法來啟動(dòng)加載。被加載的顯示對(duì)象將作為L(zhǎng)oader對(duì)象的子級(jí)添加。（1）load()方法load()方法語法格式如下。publicfunctionload(request:URLRequest,context:LoaderContext=null):void將SWF、JPEG、漸進(jìn)式JPEG、非動(dòng)畫GIF或PNG文件加載到此Loader對(duì)象的子對(duì)象中。如果加載GIF動(dòng)畫文件，將僅顯示第一幀。由于Loader對(duì)象可以只包含一個(gè)子級(jí)，因此，發(fā)出后續(xù)load()請(qǐng)求將終止先前的請(qǐng)求，如果仍然存在未處理的請(qǐng)求，則會(huì)開始新的加載。◎request:URLRequest：要加載的SWF、JPEG、GIF或PNG文件的絕對(duì)或相對(duì)URL。◎context:LoaderContext(default=null)：LoaderContext對(duì)象，它具有定義下列內(nèi)容的屬性。FlashPlayer是否應(yīng)在加載對(duì)象時(shí)檢查策略文件存在與否。被加載的對(duì)象的ApplicationDomain。加載的對(duì)象的SecurityDomain。9.1.2瀏覽器和網(wǎng)絡(luò)控制命令

（2）unload()方法unload()方法語法格式如下。publicfunctionunload():voidunload()方法可刪除此Loader對(duì)象中使用load()方法加載的子項(xiàng)。4．removeChild()方法和removeChildAt()方法使用removeChild()方法，將影片剪輯實(shí)例名作為參數(shù)，可以將其從“舞臺(tái)”上刪除。如刪除當(dāng)前時(shí)間軸所在“舞臺(tái)”上的影片剪輯實(shí)例myMovieClip，就可以使用語句：this.removeChild(myMovieClip);。也可以使用removeChildAt()方法使用索引號(hào)作為參數(shù)刪除某個(gè)影片剪輯。例如下面的代碼（假設(shè)當(dāng)前“舞臺(tái)”上僅存在一個(gè)影片剪輯實(shí)例）。實(shí)例練習(xí)——加載圖像9.1.2瀏覽器和網(wǎng)絡(luò)控制命令

5．URLLoader類URLLoader類以文本、二進(jìn)制數(shù)據(jù)或URL編碼變量的形式從URL下載數(shù)據(jù)。格式：URLLoader(request:URLRequest=null)作用：創(chuàng)建URLLoader對(duì)象。參數(shù)：request:URLRequest(default=null)是一個(gè)URLRequest對(duì)象，指定要下載的URL。如果省略該參數(shù)，則不開始加載操作。如果已指定參數(shù)，則立即開始加載操作。9.1.2瀏覽器和網(wǎng)絡(luò)控制命令

6．計(jì)時(shí)器、日期、聲音類（1）Timer類Timer類是FlashPlayer計(jì)時(shí)器的接口。可以創(chuàng)建新的Timer對(duì)象，以便按指定的時(shí)間順序運(yùn)行代碼。使用start()方法來啟動(dòng)計(jì)時(shí)器。為timer事件添加事件偵聽器，以便將代碼設(shè)置為按計(jì)時(shí)器間隔運(yùn)行。（2）Date類Date類表示日期和時(shí)間信息。Date()構(gòu)造函數(shù)的作用是構(gòu)造一個(gè)新的Date對(duì)象，該對(duì)象將保存指定的日期和時(shí)間。Date()構(gòu)造函數(shù)使用最多7個(gè)參數(shù)（year、month、…、millisecond）指定日期和時(shí)間。Date()構(gòu)造函數(shù)語法如下。publicfunctionDate(yearOrTimevalue:Object,month:Number,date:Number=1,hour:Number=0,minute:Number=0,second:Number=0,millisecond:Number=0)（3）Sound類使用Sound類可以創(chuàng)建新的Sound對(duì)象、將外部MP3文件加載到該對(duì)象并播放該文件、關(guān)閉聲音流，以及訪問有關(guān)聲音的數(shù)據(jù)，如有關(guān)流中字節(jié)數(shù)和ID3元數(shù)據(jù)的信息?！騍ound()構(gòu)造函數(shù)：創(chuàng)建一個(gè)新的Sound對(duì)象?！騊lay()方法：生成一個(gè)新的SoundChannel對(duì)象來回放該聲音。此方法返回SoundChannel對(duì)象，該對(duì)象可停止聲音并監(jiān)控音量。9.1.2瀏覽器和網(wǎng)絡(luò)控制命令

實(shí)例練習(xí)——利用影片剪輯元件制作一個(gè)簡(jiǎn)單時(shí)鐘9.1.3鍵盤事件

鍵盤操作也是Animate用戶交互操作的重要事件。在ActionScript3.0中使用KeyboardEvent類來處理鍵盤操作事件。它有兩種類型的鍵盤事件：KeyboardEvent.KEY_DOWN和KeyboardEvent.KEY_UP?！騅eyboardEvent.KEY_DOWN：定義按下鍵盤按鍵時(shí)的事件?！騅eyboardEvent.KEY_UP：定義松開鍵盤按鍵時(shí)的事件。注意：在使用鍵盤事件時(shí)，要先獲得它的焦點(diǎn)，如果不想指定焦點(diǎn)，可以直接把stage作為偵聽的目標(biāo)。KeyboardEvent()構(gòu)造函數(shù)語法如下。KeyboardEvent(type:String,bubbles:Boolean=true,cancelable:Boolean=false,charCode:uint=0,keyCode:uint=0,keyLocation:uint=0,ctrlKey:Boolean=false,altKey:Boolean=false,shiftKey:Boolean=false)KeyboardEvent()構(gòu)造函數(shù)可用于創(chuàng)建一個(gè)Event對(duì)象，其中包含有關(guān)鍵盤事件的特定信息，并將Event對(duì)象作為參數(shù)傳遞給事件偵聽器。具體參數(shù)介紹如下。9.1.3鍵盤事件

◎type:String：事件的類型，可能的值為KeyboardEvent.KEY_DOWN和KeyboardEvent.KEY_UP?！騜ubbles:Boolean（default=true）：確定Event對(duì)象是否參與事件流的冒泡階段。◎cancelable:Boolean（default=false）：確定是否可以取消Event對(duì)象?！騝harCode:uint（default=0）：按下或釋放的鍵的字符代碼值，返回的字符代碼值為英文鍵盤值?！騥eyCode:uint（default=0）：按下或釋放的鍵的鍵控代碼值。◎keyLocation:uint（default=0）：按鍵在鍵盤上的位置。◎ctrlKey:Boolean（default=false）：指示是否已激活Ctrl功能鍵?！騛ltKey:Boolean（default=false）：保留以供將來使用（當(dāng)前不受支持）。◎shiftKey:Boolean（default=false）：指示是否已激活Shift功能鍵。實(shí)例練習(xí)——鍵盤響應(yīng)9.2任務(wù)一-----制作菲凡攝影網(wǎng)頁

9.2.1案例效果分析本案例制作一個(gè)攝影機(jī)構(gòu)的網(wǎng)頁，界面采用黑色背景，黑白對(duì)比體現(xiàn)了婚紗攝影機(jī)構(gòu)的專業(yè)化；導(dǎo)航條設(shè)計(jì)簡(jiǎn)潔而實(shí)用，極大地方便客戶了解企業(yè)的產(chǎn)品，進(jìn)行服務(wù)咨詢、技術(shù)支持等；多張作品圖片相互切換，展示了攝影機(jī)構(gòu)精湛的攝影技術(shù)和實(shí)力。靜幀效果如圖9.2.2設(shè)計(jì)思路（1）制作3種不同的“遮罩”元件。（2）依次使用多個(gè)遮罩層，形成多張圖片相互切換的效果。（3）制作網(wǎng)站背景。9.2.4相關(guān)知識(shí)和技能點(diǎn)

使用影片剪輯元件制作“遮罩”圖形；使用遮罩動(dòng)畫制作多張圖片相互切換的效果；使用影片剪輯元件制作百葉窗效果。9.3任務(wù)二------制作平頂山學(xué)院招生網(wǎng)站

9.3.1案例效果分析

本案例為平頂山學(xué)院制作一個(gè)招生網(wǎng)站，網(wǎng)站整體的色調(diào)為深藍(lán)色，襯托校園如天空和大海般的深沉，搭配翠綠色的按鈕圖標(biāo)，使頁面更加醒目。網(wǎng)站通過圖片和文字的結(jié)合，對(duì)學(xué)校簡(jiǎn)介、教學(xué)科研、專業(yè)介紹和招生計(jì)劃等欄目進(jìn)行了展示，效果如圖9.3.2設(shè)計(jì)思路網(wǎng)頁動(dòng)畫分首頁面和二級(jí)頁面，首頁面以學(xué)院校園的圖片為背景，添加上簡(jiǎn)單的文字和學(xué)院標(biāo)識(shí)做成的按鈕，點(diǎn)擊按鈕，便可以進(jìn)入二級(jí)頁面。二級(jí)頁面共分學(xué)校簡(jiǎn)介、教學(xué)科研、專業(yè)介紹和招生計(jì)劃四個(gè)部分，只需點(diǎn)擊每個(gè)部分對(duì)應(yīng)的按鈕，就可以對(duì)其進(jìn)行瀏覽。二級(jí)頁面的構(gòu)成包括文字和圖片，在文字部分添加了滾動(dòng)條，在圖片部分使用補(bǔ)間動(dòng)畫形成了動(dòng)態(tài)效果。9.2.4相關(guān)知識(shí)和技能點(diǎn)

使用文本圖形法制作招生計(jì)劃內(nèi)容，使用loadMovie腳本命令裝載外部SWF文件，使用補(bǔ)間