Animate動畫設計與制作實例教程（Animate CC 2019）項目九 制作網(wǎng)站

Animate動畫設計與制作實例教程

（AnimateCC2019）項目九

制作網(wǎng)站項目簡介

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

本項目主要介紹在Animate動畫設計中經(jīng)常用到的函數(shù)和類對象，并通過3個應用范例，講解應用AnimateCC2019制作網(wǎng)站的方法和技巧。通過本項目的學習，讀者可以掌握實現(xiàn)交互動畫的方法，學會使用AnimateCC2019設計、制作網(wǎng)站。學習目標掌握影片剪輯控制腳本的使用方法；掌握網(wǎng)頁元素控制腳本的使用方法；掌握鍵盤事件的使用方法；掌握攝影網(wǎng)頁、學院招生網(wǎng)站、產(chǎn)品銷售網(wǎng)站的制作方法。

ActionScript3.0腳本在“動作”面板中腳本窗口內(nèi)進行編輯，如圖9-1所示，在“動作”面板中，可以使用內(nèi)置的“代碼片段”工具簡化腳本設計和編寫，代碼片段中集成了常見的各種事件和功能代碼。選定對象，直接雙擊相應代碼片段即可把代碼添加到編輯框內(nèi)，根據(jù)實際需要完善修改即可，其調(diào)入可以直接在“動作”面板中單擊腳本選項中的快捷工具圖標調(diào)入，也可通過在主菜單中執(zhí)行“窗口”>“代碼片段”命令，在打開的對話框中調(diào)入，如圖9-2所示。9.1知識準備——交互式動畫的制作

圖9-1

圖9-21．影片剪輯元件的屬性（1）坐標：Animate場景中的每個對象都有它的坐標，坐標值以像素為單位。Animate場景的左上角為坐標原點，它的坐標位置為(0,0)，前一個表示水平坐標，后一個表示垂直坐標。Animate默認的場景大小為550像素×400像素，即場景右下角的坐標為(550,400)。場景中的每一點分別用X和Y表示x坐標值和y坐標值。（2）鼠標指針位置：利用影片剪輯元件的屬性，不但可以獲得坐標位置，還可以獲得鼠標指針位置，即鼠標指針在影片中的坐標位置。表示鼠標指針坐標屬性的關鍵字是mouseX和mouseY，其中mouseX代表指針的水平坐標位置，mouseY代表指針的垂直坐標位置。9.1.1影片剪輯控制腳本（3）旋轉(zhuǎn)方向：rotation屬性代表影片剪輯的旋轉(zhuǎn)方向，它是一個角度值，范圍為?180°～180°，可以是整數(shù)，也可以是浮點數(shù)。如果將它的值設置在這個范圍之外，系統(tǒng)會自動將其轉(zhuǎn)換為這個范圍之間的值。（4）可見性：visible屬性即可見性，使用布爾值true（1）或者false（0）表示。為true表示影片剪輯可見，即顯示影片剪輯；為false表示影片剪輯不可見，即隱藏影片剪輯。（5）透明度：alpha屬性決定了影片剪輯的透明程度，范圍為0～100，0代表完全透明，100表示不透明。（6）縮放屬性：影片剪輯的縮放屬性包括橫向縮放scaleX和縱向縮放scaleY。scaleX和scaleY的值代表相對于“庫”面板中原影片剪輯的橫向尺寸width和縱向尺寸height的百分比，而與場景中影片剪輯實例的尺寸無關。（7）尺寸屬性：與scaleX/scaleY值的屬性不同，width和height代表影片剪輯的絕對寬度和高度，而不是相對比例。2．絕對路徑和相對路徑

路徑分為絕對路徑和相對路徑，它們的區(qū)別是到達目標對象的出發(fā)點不同。絕對路徑是以當前主場景（即根時間軸）為出發(fā)點，以目標對象為結(jié)束點；而相對路徑則是從發(fā)出指令的對象所在的時間軸為出發(fā)點，以目標對象為結(jié)束點。3．載入庫中的影片剪輯

在Animate中，可以從“庫”面板中將影片剪輯拖到“舞臺”上，使它們出現(xiàn)在SWF文件中。當使用ActionScript3.0添加影片剪輯時，實際上是將一個影片實例添加到時間軸上。幀是時間軸的一部分，可以使用“動作”面板將ActionScript3.0代碼與幀關聯(lián)。

用于添加影片剪輯的ActionScript3.0代碼有以下2個。（1）DisplayObjectContainer類

DisplayObjectContainer類是可用作顯示列表中顯示對象容器的所有對象的基類。使用DisplayObjectContainer類可排列顯示列表中的顯示對象。每個DisplayObjectContainer對象都有自己的子級列表，用于組織對象的z軸順序。z軸順序是由前至后，可確定哪個對象繪制在前，哪個對象繪制在后等。（2）addChild()方法格式為：publicfunctionaddChild(child:DisplayObject):DisplayObject

功能：將一個DisplayObject子實例添加到該DisplayObjectContainer實例中。子項將被添加到該DisplayObjectContainer實例中其他子項的前（上）面（要將某子項添加到特定索引位置，應使用addChildAt()方法）。

參數(shù)child:DisplayObject是作為該DisplayObjectContainer實例的子項添加的DisplayObject實例。4．拖曳影片剪輯

在ActionScript3.0中，startDrag()方法的一般形式如下。public

function

startDrag(lockCenter:Boolean

=

false,

bounds:Rectangle

=

null):void

該方法允許用戶拖動指定的Sprite。Sprite將一直保持可拖動，直到通過調(diào)用Sprite.stopDrag()方法來明確停止，或直到將另一個Sprite變?yōu)榭赏蟿訛橹埂Ｔ谕粫r間只有一個Sprite是可拖動的?！騦ockCenter:Boolean：指定是將可拖動的Sprite鎖定到鼠標指針位置中央（true），還是鎖定到用戶首次單擊該Sprite時所在的點上（false）?！騜ounds:Rectangle：相對于Sprite父級的坐標值，用于指定Sprite約束矩形。

stopDrag()方法可以實現(xiàn)停止拖曳影片，這個方法沒有參數(shù)。通過startDrag()方法變?yōu)榭赏蟿拥腟prite將一直保持可拖動狀態(tài)，直到添加stopDrag()方法或另一個Sprite變?yōu)榭赏蟿訝顟B(tài)為止（在同一時間只有一個Sprite是可拖動的）。1．fscommand()方法

該方法用于控制Flash播放器的播放環(huán)境及播放效果。其語法格式如下。public

function

fscommand(command,

args):void2．navigateToURL()方法

navigateToURL()方法位于包中，用于為事件添加超級鏈接，包括電子郵件鏈接。其語法格式如下。navigateToURL(request,window):void9.1.2網(wǎng)頁元素控制腳本3．Loader類

Loader類可用于加載SWF文件或圖像（JPG、PNG或GIF）文件。使用load()方法來啟動加載。被加載的顯示對象將作為Loader對象的子級添加。（1）load()方法

load()方法語法格式如下。public

function

load(request:URLRequest,

context:LoaderContext

=

null):void（2）unload()方法

unload()方法語法格式如下。public

function

unload():void4．removeChild()方法和removeChildAt()方法

使用removeChild()方法，將影片剪輯實例名作為參數(shù)，可以將其從“舞臺”上刪除。如刪除當前時間軸所在“舞臺”上的影片剪輯實例myMovieClip，就可以使用語句：this.removeChild(myMovieClip);。也可以使用removeChildAt()方法使用索引號作為參數(shù)刪除某個影片剪輯。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ù)，則立即開始加載操作。6．計時器、日期、聲音類（1）Timer類

Timer類是FlashPlayer計時器的接口?？梢詣?chuàng)建新的Timer對象，以便按指定的時間順序運行代碼。使用start()方法來啟動計時器。為timer事件添加事件偵聽器，以便將代碼設置為按計時器間隔運行。（2）Date類

Date類表示日期和時間信息。

Date()構(gòu)造函數(shù)的作用是構(gòu)造一個新的Date對象，該對象將保存指定的日期和時間。

Date()構(gòu)造函數(shù)使用最多7個參數(shù)（year、month、…、millisecond）指定日期和時間。

Date()構(gòu)造函數(shù)語法如下。public

function

Date(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文件加載到該對象并播放該文件、關閉聲音流，以及訪問有關聲音的數(shù)據(jù)，如有關流中字節(jié)數(shù)和ID3元數(shù)據(jù)的信息?！騍ound()構(gòu)造函數(shù)：創(chuàng)建一個新的Sound對象?！騊lay()方法：生成一個新的SoundChannel對象來回放該聲音。此方法返回SoundChannel對象，該對象可停止聲音并監(jiān)控音量。

鍵盤操作也是Animate用戶交互操作的重要事件。在ActionScript3.0中使用KeyboardEvent類來處理鍵盤操作事件。

它有兩種類型的鍵盤事件：KeyboardEvent.KEY_DOWN和KeyboardEvent.KEY_UP?！騅eyboardEvent.KEY_DOWN：定義按下鍵盤按鍵時的事件。◎KeyboardEvent.KEY_UP：定義松開鍵盤按鍵時的事件。9.1.3鍵盤事件9.2.1案例效果分析

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

使用影片剪輯元件制作“遮罩”圖形；使用遮罩動畫制作多張圖片相互切換的效果；使用影片剪輯元件制作百葉窗效果。（1）新建一個AnimateCC2019影片文檔，設置舞臺尺寸為800像素×600像素，其他參數(shù)保持默認，保存影片文檔為“菲凡攝影.fla”。（2）執(zhí)行“文件”>“導入”>“導入到庫”命令，將要使用的素材圖片導入“庫”面板中。（3）按Ctrl+F8組合鍵新建圖形元件“百葉”，使用“矩形”工具在“舞臺”上繪制一個矩形條，如圖9-53所示。9.2.4任務實施圖9-53（4）新建影片剪輯元件“百葉動”，將“百葉”圖形元件拖到“舞臺”中，在第18幀添加關鍵幀。調(diào)整第1幀矩形條的寬度，如圖9-54所示，創(chuàng)建傳統(tǒng)補間動畫，如圖9-55所示。新建“圖層2”，在第18幀添加關鍵幀，調(diào)出“動作”面板，輸入圖9-56所示的代碼。圖9-54

圖9-55

圖9-56（5）新建影片剪輯“多個百葉動”，將“百葉動”元件拖到“舞臺”中，多次復制后，效果如圖9-57所示。（6）回到“場景1”，重命名“圖層1”為“背景”，將“菲凡攝影背景.jpg”導入“舞臺”中。調(diào)圖片的位置和大小，在時間軸的第75幀按F5鍵添加幀，效果如圖9-58所示。（7）新建“圖層2”，將“4月天.jpg”圖片拖到“舞臺”中，調(diào)整圖片的大小和位置，效果如圖9-59所示。圖9-57

圖9-58

圖9-59（8）新建“圖層3”，在時間軸第5幀按F6鍵添加關鍵幀，將“1.jpg”素材圖片拖至“舞臺”，位置和大小和“圖層2”中圖像相同，如圖9-60所示。（9）新建圖層“多個百葉窗”，在第5幀添加關鍵幀，將影片剪輯“多個百葉動”拖到“舞臺”中，調(diào)整其位置和大小，使其覆蓋“圖層3”中的圖片，如圖9-61所示。選中該圖層，用鼠標右鍵單擊，在彈出的快捷菜單中選擇“遮罩層”命令，將其設為遮罩層，如圖9-62所示。圖9-60

圖9-61

圖9-62（10）使用同樣的方法制作多個遮罩層，面板效果如圖9-63所示。適當調(diào)整影片剪輯“多個百葉動”的方向和位置，以產(chǎn)生不同的效果，如圖9-64所示。例如，產(chǎn)生的另一種“遮罩”形狀如圖9-65所示。

圖9-63

圖9-64

圖9-65（11）新建圖層“小圖片”，分別將“1.jpg”圖片、“2.jpg”圖片、“3.jpg”圖片拖到“舞臺”中，調(diào)整圖片的大小和位置，如圖9-66所示。（12）最終運行效果如圖9-67所示。（13）按Ctrl+Enter組合鍵測試影片，然后保存文件。圖9-66

圖9-679.3.1案例效果分析

本案例為平頂山學院制作一個招生網(wǎng)站，網(wǎng)站整體的色調(diào)為深藍色，襯托校園如天空和大海般的深沉，搭配翠綠色的按鈕圖標，使頁面更加醒目。網(wǎng)站通過圖片和文字的結(jié)合，對學校簡介、教學科研、專業(yè)介紹和招生計劃等欄目進行了展示，效果如圖9-68所示。9.3任務二——制作平頂山學院招生網(wǎng)站圖9-689.3.2設計思路

網(wǎng)站分為首頁和二級頁面，首頁以學院的圖片為背景，添加簡單的文字和學院標志做成的按鈕，單擊按鈕便可以進入二級頁面。

二級頁面分為學校簡介、教學科研、專業(yè)介紹和招生計劃4個部分，只需單擊每個部分對應的按鈕，就可以對其進行瀏覽。二級頁面由文字和圖片構(gòu)成，在文字部分添加了滾動條，在圖片部分使用傳統(tǒng)補間動畫形成動態(tài)效果。9.3.3相關知識和技能點

使用文本圖形法制作招生計劃內(nèi)容，使用loadMovie腳本命令裝載外部SWF文件，使用傳統(tǒng)補間動畫和遮罩制作滾動文字，使用“變形”面板和形狀補間動畫制作文字轉(zhuǎn)動效果。1．制作“學校簡介”二級頁面2．制作“教學科研”二級頁面3．制作“專業(yè)介紹”二級頁面4．制作“招生計劃”二級頁面5．制作網(wǎng)站主場景9.3.4任務實施9.4.1實訓概述1．網(wǎng)站的制作目的與效果

本實訓的制作效果如圖9-134所示。

該網(wǎng)站的制作目的是對平高電氣公司進行簡單的介紹和宣傳，對平高電氣公司的基本情況、產(chǎn)品、客服承諾和聯(lián)系方式進行介紹。通過瀏覽本動態(tài)式網(wǎng)站，人們能對平高電氣公司有更多的了解。9.4實訓任務——制作平高電氣銷售網(wǎng)站圖9-1342．網(wǎng)站整體風格設計

網(wǎng)站整體顏色為天藍色，色調(diào)高貴淡雅，搭配白色的邊框和黑色的文字，增添網(wǎng)站的正式感。在顯示網(wǎng)站的各個子頁面時，配合有背景音樂，使網(wǎng)站正式中又不失活潑。3．素材收集與處理

網(wǎng)站運用的素材包括文字和圖片，這些內(nèi)容可以在平高電氣公司官網(wǎng)上收集，對于圖片的裁剪和處理，則可以使用Photoshop軟件完成。9.4.2實訓要點（1）本網(wǎng)站分為首頁、產(chǎn)品、展示、客服承諾和聯(lián)系我們5個頁面，在整體布局不變的基礎上，改變每個子頁面的內(nèi)容。在子頁