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

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

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

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

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

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

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

stopDrag()方法可以實現(xiàn)停止拖曳影片，這個方法沒有參數(shù)。通過startDrag()方法變?yōu)榭赏蟿拥腟prite將一直保持可拖動狀態(tài)，直到添加stopDrag()方法或另一個Sprite變?yōu)榭赏蟿訝顟B(tài)為止。在同一時間只有一個Sprite是可拖動的。9.1交互式動畫的制作實例練習(xí)——制作望遠鏡效果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文件，包括放映文件。放映文件是可以作為獨立應(yīng)用程序運行（也就是說不需要使用FlashPlayer即可運行）的SWF文件。◎quit：無args參數(shù)，關(guān)閉播放器?！騠ullscreen：args為true或false。為true時，可將FlashPlayer設(shè)置為全屏模式；為false時，可將播放器返回到標(biāo)準(zhǔn)菜單視圖?！騛llowscale：args為true或false。為false時，可設(shè)置播放器始終按SWF文件的原始大小繪制SWF文件，從不進行縮放；為true時，強制將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時，可啟用整個上下文菜單項集合；為false時，將隱藏除“關(guān)于FlashPlayer”和“設(shè)置”外的所有上下文菜單項。◎exec：args為指向應(yīng)用程序的路徑，在放映文件內(nèi)執(zhí)行應(yīng)用程序?！騮rapallkeys：args為true時，可將所有按鍵事件（包括快捷鍵）發(fā)送到FlashPlayer中的onClipEvent(keyDown/keyUp)處理函數(shù)。用法2：要使用fscommand()向Web瀏覽器中的腳本語言（如JavaScript）發(fā)送消息，可以在command和args參數(shù)中傳遞任意兩個參數(shù)。這些參數(shù)可以是字符串或表達式，并在處理或捕獲fscommand()函數(shù)的JavaScript函數(shù)中使用。9.1.2網(wǎng)頁元素控制腳本

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

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

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

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

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

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

鍵盤操作也是Animate用戶交互操作的重要事件。在ActionScript3.0中使用KeyboardEvent類來處理鍵盤操作事件。它有兩種類型的鍵盤事件：KeyboardEvent.KEY_DOWN和KeyboardEvent.KEY_UP?！騅eyboardEvent.KEY_DOWN：定義按下鍵盤按鍵時的事件。◎KeyboardEvent.KEY_UP：定義松開鍵盤按鍵時的事件。注意：在使用鍵盤事件時，要先獲得它的焦點，如果不想指定焦點，可以直接把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)建一個Event對象，其中包含有關(guān)鍵盤事件的特定信息，并將Event對象作為參數(shù)傳遞給事件偵聽器。具體參數(shù)介紹如下。9.1.3鍵盤事件

◎type:String：事件的類型，可能的值為KeyboardEvent.KEY_DOWN和KeyboardEvent.KEY_UP?！騜ubbles:Boolean（default=true）：確定Event對象是否參與事件流的冒泡階段?！騝ancelable:Boolean（default=false）：確定是否可以取消Event對象?！騝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功能鍵。實例練習(xí)——鍵盤響應(yīng)9.2任務(wù)一-----制作菲凡攝影網(wǎng)頁

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

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

9.3.1案例效果分析

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

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