中職Flash CS3動(dòng)畫(huà)設(shè)計(jì)案例教程項(xiàng)目六課件

1、(中職）Flash CS3動(dòng)畫(huà)設(shè)計(jì)案例教程項(xiàng)目六ppt課件項(xiàng)目六 元件與實(shí)例 任務(wù)一星空的制作 任務(wù)二風(fēng)扇按鈕制作 綜合實(shí)訓(xùn)六任務(wù)一星空的制作 教學(xué)目標(biāo) 掌握影片剪輯元件的制作方法，理解使用元件的優(yōu)點(diǎn)。能使用濾鏡來(lái)美化影片剪輯。 教學(xué)難點(diǎn) 庫(kù)面板的使用及元件的嵌套。 教學(xué)重點(diǎn) 1、理解使用元件的優(yōu)點(diǎn)。 2、濾鏡的使用方法。 3、庫(kù)面板的使用。 任務(wù)描述月隱呈現(xiàn)，夜闌人靜；夜色深得不見(jiàn)底，萬(wàn)籟俱靜。 仰望星空，那遠(yuǎn)在蒼穹的星星，斑駁閃爍；在暗夜的岑寂中萬(wàn)般耀眼。現(xiàn)在就讓我們來(lái)創(chuàng)造這一美景吧。任務(wù)預(yù)覽 任務(wù)分析本任務(wù)需要大量的星星，如果用通常的方法一個(gè)一個(gè)繪制，既麻煩，又不易修改。這時(shí)，就需要使用

2、元件來(lái)幫忙。通過(guò)創(chuàng)建一個(gè)星星元件，然后將元件多次放入場(chǎng)景形成多個(gè)實(shí)例。任務(wù)預(yù)覽返回工作步驟運(yùn)行Flash CS3，新建一個(gè)空白文檔（ActionScript 2.0）。在文檔【屬性】面板中修改文檔背景顏色為灰色（“#999999” ），其它參數(shù)值默認(rèn)。修改圖層名稱：將“圖層1”改名為“背景”。使用矩形工具，禁用筆觸顏色，在場(chǎng)景中繪制一矩形。選中該矩形，打開(kāi)【對(duì)齊】面板，相對(duì)于舞臺(tái)垂直、水平對(duì)齊，并匹配高和寬，如圖6-1-2打開(kāi)【顏色】面板，修改該矩形填充為線性漸變填充，漸變填充設(shè)置如下圖所示。并使用“填充漸變”工具改變漸變方向，如下圖所示 圖6-1-4 圖6-1-3至此，星空背景完成，將該層鎖

3、定。新建圖層，將圖層命名為“星星”。點(diǎn)擊“插入”菜單下的“新建元件”命令，彈出“新建元件”對(duì)話框，設(shè)置名稱為“星星”，類型為“影片剪輯”,如下圖所示。點(diǎn)擊確定后進(jìn)入元件編輯狀態(tài)。 選擇工具箱中的“多邊形工具” ，設(shè)置多邊形工具屬性的選項(xiàng)為星型，其它參數(shù)如下圖所示。設(shè)置填充色為“白色”，禁用筆觸顏色，在元件中繪制一個(gè)星星。將其相對(duì)于舞臺(tái)水平、垂直居中對(duì)齊。選中該星星，按【F8】鍵，將其轉(zhuǎn)換為元件，元件名為“star”，類型為影片剪輯。保持舞臺(tái)上的星星為選中狀態(tài)，打開(kāi)【濾鏡】面板，點(diǎn)擊 為其添加模糊濾鏡，參數(shù)如右圖所示。點(diǎn)擊“場(chǎng)景1”回到主場(chǎng)景，按【CTRL+F8】鍵，新建一元件，元件名為“月亮”

4、，類型為“影片剪輯”。選擇橢圓工具，設(shè)置填充顏色為白色，筆觸顏色為黑色，按住Shift鍵在舞臺(tái)上繪制一個(gè)圓。選中邊框線，作適當(dāng)?shù)囊苿?dòng)，如右圖所示，然后刪除不需要的部分，形成月亮圖像。點(diǎn)擊“場(chǎng)景1”回到場(chǎng)景1中。按快捷鍵【CTRL+L】，打開(kāi)【庫(kù)】面板，此時(shí)庫(kù)中有三個(gè)元件，如右圖所示。其中“star”元件嵌套在“星星”元件中。將星星及月亮從庫(kù)拖放到場(chǎng)景1中去，按住【CTRL】鍵，拖放星星，以復(fù)制多個(gè)星星。使用“任意變形工具” 改變星星的大小、及角度。為月亮添加發(fā)光濾鏡，參數(shù)如下圖所示適當(dāng)調(diào)整星星、月亮位置，單擊“文件”“保存”，保存文件為“星空.fla”。按【CTRL+ENTER】測(cè)試影片。相關(guān)

5、知識(shí)與技能元件的類型創(chuàng)建一個(gè)元件時(shí)就要確定元件的類型，F(xiàn)lash中主要有3種元件類型，即圖形元件、影片剪輯和按鈕元件。圖形元件圖形元件 ：可用于創(chuàng)建靜態(tài)圖像，也可用于創(chuàng)建連接到主時(shí)間軸的可重用動(dòng)畫(huà)片段，即圖形元件實(shí)際播放幀數(shù)依賴于主時(shí)間軸。影片剪輯元件影片剪輯 ：用于創(chuàng)建可重用的動(dòng)畫(huà)片段。影片剪輯可獨(dú)立播放，它獨(dú)立于主時(shí)間軸，即使主時(shí)間軸只有一幀，該動(dòng)畫(huà)片段也可循環(huán)播放。按鈕元件按鈕元件 ：可以創(chuàng)建用于響應(yīng)鼠標(biāo)單擊、滑過(guò)或其它動(dòng)作的交互式按鈕?？梢远x與各種按鈕狀態(tài)關(guān)聯(lián)的圖形，然后將動(dòng)作指定給按鈕實(shí)例圖形元件與影片剪輯的區(qū)別：圖形元件與影片剪輯都可以是動(dòng)畫(huà)片段，但它們也有各自的特點(diǎn)：圖形元件的

6、播放依賴于主時(shí)間軸，而影片剪輯完全獨(dú)立于主時(shí)間軸。 圖形元件數(shù)據(jù)結(jié)構(gòu)簡(jiǎn)單，對(duì)播放器的壓力小，而影片剪輯對(duì)播放器壓力大。圖形元件可設(shè)置播放方式，而影片剪輯則需要腳本語(yǔ)句才可實(shí)現(xiàn)。影片剪輯可以設(shè)置濾鏡，圖形元件則不行。影片剪輯可以設(shè)置混合模式，圖形元件則不行。影片剪輯中可使用“運(yùn)動(dòng)時(shí)位圖緩存”功能，而圖形元件則不行。影片剪輯中可在時(shí)間軸上綁定聲音，而圖形元件即使包含了聲音也不會(huì)發(fā)聲。影片剪輯中設(shè)置實(shí)例名稱，且可在實(shí)例上添加動(dòng)作語(yǔ)句，而圖形元件則不行。元件與實(shí)例位于庫(kù)中的元件就像是“后臺(tái)”里的“演員”，從庫(kù)中調(diào)到舞臺(tái)上的元件稱為該元件的實(shí)例，就像是讓演員到舞臺(tái)上去表演。但與現(xiàn)實(shí)不同的是，“演員”從“

7、后臺(tái)”走上舞臺(tái)后，“演員原型”還會(huì)存在。同一元件可以有無(wú)數(shù)個(gè)“實(shí)例”，各個(gè)“實(shí)例”的顏色、方向、大小等可以設(shè)置成與原來(lái)不同的樣式。就像一個(gè)演員可以穿上不同服裝，扮演不同的角色。對(duì)元件的修改會(huì)反映到所有該元件的實(shí)例上去，對(duì)“實(shí)例”的屬性設(shè)置及變形不會(huì)影響其他“實(shí)例”及元件。庫(kù)的基本操作【庫(kù)】面板是存儲(chǔ)和管理在Flash中創(chuàng)建的各種元件和導(dǎo)入文件（包括位圖、聲音、字體及視頻文件）的場(chǎng)所?！皫?kù)”采用了類似Windows組織文件的方式來(lái)組織元件。按【F11】鍵即可打開(kāi)【庫(kù)】面板，主要功能如右圖所示：文檔切換列表：可以在所有打開(kāi)的Flash文檔庫(kù)間進(jìn)行切換。屬性按鈕：修改元件屬性，可用于轉(zhuǎn)換元件類型等。

8、任務(wù)二電風(fēng)扇按鈕制作 教學(xué)目標(biāo) 掌握按鈕元件的制作方法，理解按鈕的四幀所代表的意義。 教學(xué)難點(diǎn) 理解按鈕的四幀所代表的意義。 教學(xué)重點(diǎn) 1、理解按鈕的四幀所代表的意義。 2、變形面板的使用。 3、圖形元件與影片剪輯元件的區(qū)別。 任務(wù)描述 炎炎夏日，來(lái)一臺(tái)電風(fēng)扇扇扇該多愜意??！那么我們就做一臺(tái)電風(fēng)扇吧。這臺(tái)電風(fēng)扇還可以通過(guò)一個(gè)按鈕控制它的開(kāi)關(guān)呢。 任務(wù)分析 制作本任務(wù)，首先我們應(yīng)該掌握基本繪圖工具，學(xué)習(xí)【復(fù)制并應(yīng)用變形】命令，重點(diǎn)去理解按鈕的四幀所代表的意義，為了控制動(dòng)畫(huà)的播放，我們將使用幾條簡(jiǎn)單的腳本語(yǔ)句，該部分將在以后的課程中學(xué)習(xí)。 工作步驟運(yùn)行Flash CS3，新建一個(gè)空白文檔（Acti

9、onScript 2.0）。在【屬性】面板中修改文檔屬性，設(shè)置畫(huà)面尺寸為“800800” ，背景色為“白色”，其它參數(shù)值默認(rèn)。使用“多邊形工具” 繪制一個(gè)五邊形，使用“部分選取工具” 、“錨點(diǎn)轉(zhuǎn)換工具” 調(diào)整錨點(diǎn)的位置及曲率，結(jié)果如右圖所示。該步驟比較繁瑣，需要熟練應(yīng)用各種工具及耐心。選中該圖形，按【F8】鍵將其轉(zhuǎn)換為影片剪輯，命名為“葉片”。選中該葉片，按【Q】鍵打開(kāi)“任意變形工具” ，將中心點(diǎn)移到左下角，按【Ctrl+T】打開(kāi)【變形】面板，設(shè)置旋轉(zhuǎn)角度為“120” ，點(diǎn)擊“復(fù)制并應(yīng)用變形”命令兩次，結(jié)果如右圖所示。選擇這三個(gè)葉片，打開(kāi)【濾鏡】面板，為它們添加“斜角”濾鏡，參數(shù)為默認(rèn)值。保持

10、選中狀態(tài)，按【F8】鍵，將其轉(zhuǎn)換為影片剪輯，命名為“扇葉”。如下圖所示，點(diǎn)擊“編輯元件”按鈕，在下拉菜單中選擇“扇葉”，進(jìn)入“扇葉”元件編輯狀態(tài)，選中三片葉片，適當(dāng)移動(dòng)，使其位于舞臺(tái)中央。保持選中三個(gè)葉片狀態(tài)，右鍵點(diǎn)擊選中的對(duì)象，在下拉菜單中執(zhí)行“分離到圖層”命令，這時(shí)，三個(gè)葉片分別置入一個(gè)圖層中，刪除無(wú)內(nèi)容的圖層“圖層1”。選中第30幀（所有層），按F6鍵插入關(guān)鍵幀，選擇任一過(guò)渡幀，在【屬性】面板中，設(shè)置“補(bǔ)間”為“動(dòng)畫(huà)”，“旋轉(zhuǎn)”為“順時(shí)針3次”。此時(shí)，時(shí)間軸面板如下圖所示。返回主場(chǎng)景，按【Ctrl+F8】新建一圖形元件命名為“面板”。使用直線工具繪制一條筆觸寬為1的直線。并將它們相對(duì)于舞

11、臺(tái)水平左對(duì)齊，垂直居中。按【F11】鍵打開(kāi)庫(kù)面板，將其拖到舞臺(tái)上，使其左端點(diǎn)對(duì)上扇葉的中心，如果線的長(zhǎng)度不適合，則進(jìn)入“面板”元件編輯狀態(tài)（雙擊該元件），調(diào)整直線的長(zhǎng)度，使其略長(zhǎng)于“葉片”。進(jìn)入“面板”元件編輯狀態(tài)（使用第8步方法），按住【Alt】鍵拖到直線，上下個(gè)復(fù)制一條直線，從上到下修改三條直線的顏色為“#e8e8e8”、“#cccccc”、“#333333”。選中三條直線，按【Ctrl+G】，將它們組合成一個(gè)整體。按【Q】鍵使用自由變形工具將旋轉(zhuǎn)中心點(diǎn)移至左邊中部，該步操作應(yīng)配合放大鏡工具盡量做得精細(xì)一點(diǎn)，否則后面旋轉(zhuǎn)時(shí)會(huì)達(dá)不到預(yù)計(jì)效果。按【Ctrl+T】鍵打開(kāi)【變形】面板，將旋轉(zhuǎn)角度設(shè)

12、置為“10” ，其它參數(shù)默認(rèn)，點(diǎn)擊“復(fù)制并應(yīng)用變形”命令，使其旋轉(zhuǎn)一周，效果如下圖所示將該圖層重命名為“輻條”，然后在其上方新建一層，命名為“邊框線”，使用“橢圓”工具，設(shè)置筆觸顏色為“#999999” ，筆觸寬度為“8” ，按住【ALT+SHIFT】鍵，從中心向外繪制一個(gè)圓蓋住輻條的斷點(diǎn)。然后相對(duì)于舞臺(tái)水平、垂直居中。選中所繪的圓，【CTRL+T】打開(kāi)【變形】面板，勾選“約束”，將長(zhǎng)、寬縮放設(shè)為“104%” ，其它默認(rèn)，點(diǎn)擊“復(fù)制并應(yīng)用變形”命令，結(jié)果如右圖所示。如達(dá)不到所示效果可適當(dāng)調(diào)節(jié)縮放百分比。新建一層，命名為“蓋子”，使用“橢圓”工具，設(shè)置筆觸顏色為“#999999” ，筆觸寬度為“

13、0.25”，填充顏色為“#cccccc”，繪制一個(gè)圓，水平垂直居中對(duì)齊，結(jié)果如右圖所示。 再次新建一層，命名為“蓋子刻線”，使用“橢圓”工具，設(shè)置筆觸顏色為“白色”，筆觸寬度為“1”，禁用填充顏色繪制一個(gè)圓，水平垂直居中對(duì)齊，結(jié)果如右圖所示。再次新建一層，命名為“文字”，使用“文字”工具，在【屬性】面板上設(shè)置字體為“Stencil Std”，字體大小為“25”，文本顏色為“#3679F5”，然后在舞臺(tái)上點(diǎn)擊，輸入“Midea”,水平、垂直居中，結(jié)果如右圖所示。新建圖層，命名為“面板”，使用“基本矩形工具”，在【屬性】面板中設(shè)置筆觸顏色為“#999999” ，筆觸寬度為8，填充顏色為“#cccc

14、cc ” ，矩形邊角半徑為“70” ，其它屬性值默認(rèn)，按住【Shfit】鍵繪制一個(gè)正方形，設(shè)置長(zhǎng)、寬為“650”,屬性設(shè)置如下圖。右鍵單擊該正方形，在快捷菜單中點(diǎn)擊“分離”命令。顯示“邊框線”層，將其中的大圓復(fù)制下來(lái)，然后在隱藏該層，切換回“面板”圖層，右鍵單擊舞臺(tái)空白處，在快捷菜單中點(diǎn)擊“復(fù)制到當(dāng)前位置”命令。然后刪除中間的填充。結(jié)果如右圖所示。顯示所有圖層，最終圖層結(jié)構(gòu)如右圖所示。點(diǎn)擊“場(chǎng)景1”返回主場(chǎng)景。將“圖層1”改名為“扇葉”，新建一圖層，將其命名為“面板”，將面板實(shí)例剪切并復(fù)制到該層。結(jié)果“扇葉”層只有“扇葉”實(shí)例，“面板”層只有“面板”實(shí)例。選中“扇葉”實(shí)例，在【屬性】面板中將其

15、命名為“fan”。新建一個(gè)影片剪輯元件，命名為“按鈕”。使用橢圓工具，禁用筆觸顏色，填充顏色為黑白漸變。按住【Shfit】鍵繪制一圓，并相對(duì)于舞臺(tái)水平、垂直居中。使用“填充漸變”工具調(diào)整漸變方向如右圖所示。新建一圖層，使用“橢圓工具”，設(shè)置筆觸顏色為“黑色”，筆觸寬度為“1” ，禁用填充色，繪制一個(gè)圓，居中對(duì)齊，結(jié)果如右圖所示。分別選中圖層一和圖層二的“按下”幀，按【F6】鍵插入關(guān)鍵幀。選擇圖層二，使用“顏料桶”工具，設(shè)置填充色為黑白漸變，填充內(nèi)部的小圓。刪除小圓保留填充。使用“填充變形”工具調(diào)整填充角度如右圖所示。返回場(chǎng)景1，新建一圖層，命名為“按鈕”，按【F11】鍵打開(kāi)庫(kù)面板，將“按鈕”元

16、件拖入舞臺(tái)中，調(diào)整位置及大小，結(jié)果如右圖所示。新建一影片剪輯元件，命名為“power”，使用“橢圓”工具，設(shè)置筆觸顏色為“黑色”，筆觸寬度為“18”，禁用填充顏色，按住【Shift】鍵繪制一個(gè)圓，相對(duì)于舞臺(tái)居中對(duì)齊。使用“選擇工具”將圓的上部刪除。再用“直線工具”，筆觸同上，從中心向上畫(huà)一條直線，結(jié)果如右圖所示。按【F6】鍵插入關(guān)鍵幀，將第二幀中圖形顏色改為“紅色”。選中第一幀，按【F9】鍵打開(kāi)【動(dòng)作】面板，輸入“stop（）；”使其實(shí)例不會(huì)自動(dòng)播放。返回主場(chǎng)景。打開(kāi)庫(kù)面板，將“power”元件拖入“按鈕”層中(也可拖入新建層中)，調(diào)整大小及位置，并在屬性面板中將該實(shí)例命名為“power”。結(jié)

17、果如下圖所示?，F(xiàn)在按【Ctrl+Enter】鍵測(cè)試影片。因?yàn)椤皃ower”元件的第一幀都加入了動(dòng)作“stop();”，所以，沒(méi)有動(dòng)畫(huà)出現(xiàn)?，F(xiàn)在我們?yōu)榘粹o加入動(dòng)作，使其能控制動(dòng)畫(huà)的播放。此部分內(nèi)容將在后續(xù)章節(jié)中學(xué)習(xí)，這里只要求能模仿即可。首先，我們要用一個(gè)變量來(lái)作為風(fēng)扇開(kāi)關(guān)狀態(tài)的標(biāo)志。這里我們將該變量命名為“switchon”，如變量“switchon”為邏輯值“true”表示打開(kāi)，“flase”表示關(guān)閉。選擇主場(chǎng)景時(shí)間軸的第一幀，按【F9】鍵打開(kāi)動(dòng)作面板。輸入如下代碼： switchon = false; /設(shè)置開(kāi)關(guān)狀態(tài)標(biāo)志 this.fan.stop(); /停止實(shí)例fan的播放選擇“按鈕”

18、實(shí)例（注意不要將“power”實(shí)例一同選中），輸入如下代碼（/及后面的文字為注釋部分，不需要輸入）：on (release) /當(dāng)鼠標(biāo)釋放時(shí)if (switchon = true) /如果標(biāo)志為打開(kāi)this.fan.stop /停止扇葉動(dòng)畫(huà)播放this.power.gotoAndStop(1); /顯示實(shí)例power第一幀switchon = false; /將標(biāo)志設(shè)為關(guān)閉 else /否則this.fan.play(); /播放扇葉動(dòng)畫(huà)this.power.gotoAndStop(2); /顯示實(shí)例power第二幀switchon = true; /將標(biāo)志設(shè)為打開(kāi)保存文件為“電風(fēng)扇”，按【Ctrl+Enter】鍵測(cè)試影片，點(diǎn)擊按鈕測(cè)試效果。完成結(jié)果時(shí)庫(kù)、主時(shí)間軸內(nèi)容如下圖所示。相關(guān)知識(shí)與技能1、按鈕元件使用按鈕元件可以創(chuàng)建響應(yīng)鼠標(biāo)點(diǎn)擊、滑過(guò)或其他動(dòng)作的交互式按鈕。按鈕元件包括四幀：彈起幀：