flash動(dòng)畫(huà)設(shè)計(jì)第11章.ppt

《flash動(dòng)畫(huà)設(shè)計(jì)第11章.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《flash動(dòng)畫(huà)設(shè)計(jì)第11章.ppt（45頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

FLASHMX實(shí)例教程 熟悉網(wǎng)頁(yè)廣告的制作方法熟悉網(wǎng)頁(yè)導(dǎo)航菜單的制作方法了解星空動(dòng)畫(huà)的制作方法 第11章綜合實(shí)例 學(xué)習(xí)目標(biāo) FLASHMX實(shí)例教程 操作實(shí)例1 網(wǎng)頁(yè)廣告動(dòng)畫(huà)的制作目標(biāo)1 準(zhǔn)備素材1 新建文檔 大小為550 150像素 其他選項(xiàng)保持默認(rèn)即可 2 繪制矩形 大小同樣為550 150像素 移動(dòng)位置覆蓋住整個(gè)文檔 為其填充紅色到橙黃色的漸變顏色 修改圖層名稱為 bg 3 新建圖層 名稱為 sun 繪制圓形 填充為淺黃色 移至文檔中心部位 轉(zhuǎn)換為圖形元件 如圖11 1所示 FLASHMX實(shí)例教程 4 新建名稱為 l 的圖層 繪制圓環(huán) 內(nèi)圈直徑等于 sun 元件的直徑 顏色為橙色 轉(zhuǎn)換為圖形元件 名稱為 guang 移動(dòng)元件 知道 guang 元件恰好與 sun 圖形元件疊加 如圖11 2所示 5 新建名稱為 man 的圖層 繪制男人的外形 轉(zhuǎn)換為圖形元件 如圖11 3所示 FLASHMX實(shí)例教程 6 新建名稱為 woman 的圖層 繪制女人的外形 轉(zhuǎn)換為圖形元件 如圖11 4所示 7 新建名稱為 tree 的圖層 繪制一棵大樹(shù) 轉(zhuǎn)換為圖形元件 名稱為 bigtree 如圖11 5所示 8 新建名稱為 tree2 的圖形 繪制另外一棵大樹(shù) 轉(zhuǎn)換為元件 名稱為 tree 如圖11 6所示 FLASHMX實(shí)例教程 目標(biāo)2 創(chuàng)建動(dòng)畫(huà)9 首先鎖定 bg 層 使其不可編輯 選擇 sun 層 創(chuàng)建一個(gè) sun 元件從屏幕外向上升起到畫(huà)面中心的動(dòng)畫(huà) 共三幀 10 選擇 l 層 在第3幀到第10幀區(qū)間內(nèi) 為 guang 元件創(chuàng)建擴(kuò)張并逐漸消失的動(dòng)畫(huà) 拷貝幀 向后重復(fù)粘貼六次 然后拷貝整個(gè)幀區(qū)間 在新圖層 l2 l3 上錯(cuò)后一幀分別粘貼 如圖11 7所示 FLASHMX實(shí)例教程 11 選擇 tree 圖層 在第5幀到第8幀區(qū)間內(nèi) 在畫(huà)面右下角為 bigtree 創(chuàng)建由小變大的動(dòng)畫(huà) 12 同樣 選擇 tree2 層 在第9幀到第12幀區(qū)間內(nèi) 在畫(huà)面右下角為 tree 元件創(chuàng)建由小變大的動(dòng)畫(huà) 如圖11 8所示 FLASHMX實(shí)例教程 13 創(chuàng)建 man 和 woman 元件由畫(huà)面外移動(dòng)到畫(huà)面中心的動(dòng)畫(huà) 14 在 sun 圖層 創(chuàng)建 sun 元件擴(kuò)張并覆蓋整個(gè)屏幕的動(dòng)畫(huà) 如圖11 9所示 15 新建名稱為 black 的圖層 繪制一個(gè)大小剛剛能覆蓋住舞臺(tái)為準(zhǔn) 填充深紅色 轉(zhuǎn)換為圖形元件 名稱為 black 16 在第28幀和第39幀區(qū)間創(chuàng)建 black 元件的漸現(xiàn)動(dòng)畫(huà) FLASHMX實(shí)例教程 17 新建名稱為 text 的圖層 創(chuàng)建文字 LIFE 顏色為淡黃色 放置在畫(huà)面中心位置 18 新建名稱為 url 的圖層 創(chuàng)建文字 顏色為淺紫色 轉(zhuǎn)換為圖形元件 并為這個(gè)圖形元件添加鏈接網(wǎng)址 如圖11 10所示 19 在所有圖層的第120幀插入普通幀 目的是讓最后的字幕效果停留一段時(shí)間 20 整個(gè)動(dòng)畫(huà)效果完成 時(shí)間軸的結(jié)構(gòu)如圖11 11所示 FLASHMX實(shí)例教程 操作實(shí)例2 網(wǎng)頁(yè)導(dǎo)航菜單的制作目標(biāo)1 創(chuàng)建菜單中的按鈕1 新建文檔 大小為199 322像素 背景色為淺藍(lán)色 其它采用默認(rèn)值 2 選擇 矩形工具 繪制三個(gè)按鈕元件 分別命名為 button1 button2 button3 在按鈕上輸入文字 此按鈕作為一級(jí)菜單按鈕 如圖11 12所示 FLASHMX實(shí)例教程 3 新建按鈕元件 命名為sub 比 button按鈕 略小 并在上面輸入文字 此按鈕作為二級(jí)菜單按鈕 如圖11 13所示 目標(biāo)2 創(chuàng)建彈出式菜單影片剪輯4 新建名稱為 main 的影片剪輯元件 作為主影片剪輯 5 新建三個(gè)圖層 名稱為 b1 b2 b3 分別把按鈕元件 button1 button2 button3 拖放到對(duì)應(yīng)的圖層 三個(gè)按鈕元件在工作區(qū)按順序排列 如圖11 14所示 FLASHMX實(shí)例教程 6 新建名稱為 s1 的圖層 把按鈕元件 sub 拖放到當(dāng)前圖層 復(fù)制5個(gè) 均勻?qū)R 放置在工作區(qū)上方中間位置 如圖11 15所示 FLASHMX實(shí)例教程 7 把 button1 button2 button3 放置到工作區(qū)上方的中間位置 以剛好覆蓋住5個(gè) sub 按鈕元件為準(zhǔn) 在 b1 b2 b3 層的第5幀和第20幀插入關(guān)鍵幀 移動(dòng) button1 button2 button3 三個(gè)按鈕到工作區(qū)的下方 在第5幀和第20幀之間創(chuàng)建補(bǔ)間動(dòng)畫(huà) 如圖11 16所示 FLASHMX實(shí)例教程 8 選擇 b1 b2 b3 層的第15幀 插入關(guān)鍵幀 然后向左拖動(dòng)剛剛插入的關(guān)鍵幀到第8幀的位置 在 b1 b2 b3 層的第15幀再次插入關(guān)鍵幀 同樣向左拖動(dòng)到第12幀位置 這樣 當(dāng)按鈕向下移動(dòng)時(shí)會(huì)有一個(gè)緩沖的效果 使菜單的動(dòng)畫(huà)效果更精彩 如圖11 17所示 FLASHMX實(shí)例教程 9 復(fù)制 b1 b2 b3 層的第5幀到第20幀 在第21幀進(jìn)行粘貼 保持剛剛粘貼的幀處于被選擇狀態(tài) 右擊鼠標(biāo) 在彈出的快捷菜單中單擊 翻轉(zhuǎn)幀 命令 將幀的播放順序翻轉(zhuǎn) 如圖11 18所示 10 為了保持三個(gè)按鈕下落和上浮的對(duì)稱性 選擇 b1 b2 b3 層的第21幀 將關(guān)鍵幀清除掉 然后將幀刪除 FLASHMX實(shí)例教程 11 復(fù)制 b2 b3 層的第5幀到第35幀 在 b2 b3 層的第40幀處粘貼 復(fù)制 b3 層的第5幀到第35幀 在 b3 層第75幀處粘貼 12 新建名稱為 zhe 的圖層 選擇 矩形工具 畫(huà)一個(gè)矩形 刪除其輪廓 填充為背景的淺藍(lán)色 FLASHMX實(shí)例教程 13 在 zhe 層的第40 43 47 55 63 67 70 75 78 82 90 98 102 105幀處插入關(guān)鍵幀 并且調(diào)整關(guān)鍵幀的位置 讓矩形的上邊緣在每一個(gè)關(guān)鍵幀與 button3 按鈕的下邊緣保持對(duì)齊 14 在 s1 層插入關(guān)鍵幀 調(diào)整五個(gè)按鈕的位置 使其與 b1 b2 b3 三個(gè)按鈕滑動(dòng)時(shí)所露出的空隙相匹配 如圖11 19所示 FLASHMX實(shí)例教程 目標(biāo)3 設(shè)置菜單的動(dòng)畫(huà)效果15 回到主場(chǎng)景工作區(qū) 把當(dāng)前圖層命名為 mv 拖放影片剪輯元件 main 到工作區(qū)中 調(diào)整好位置 并在 屬性 對(duì)話框指定影片剪輯元件的實(shí)例名為main 16 新建影片名稱為 action 的剪輯元件 并且在第1 2 10 11 20 21 30 31幀處插入關(guān)鍵幀 然后為這些關(guān)鍵幀添加動(dòng)作代碼 分別為 FLASHMX實(shí)例教程 第1幀stop 第2幀tellTarget main gotoAndStop 1 stop FLASHMX實(shí)例教程 第10幀stop 第11幀tellTarget main gotoAndPlay 5 stop FLASHMX實(shí)例教程 第20幀stop 第21幀tellTarget main gotoAndPlay 40 stop 第30幀stop FLASHMX實(shí)例教程 第31幀tellTarget main gotoAndPlay 75 stop FLASHMX實(shí)例教程 17 在 main 影片剪輯元件的時(shí)間軸上新建名稱為 action 的圖層 18 在 action 層第1幀和第20幀插入關(guān)鍵幀 為兩個(gè)關(guān)鍵幀添加同樣的動(dòng)作 stop 19 在 action 層第35幀插入關(guān)鍵幀 為其添加動(dòng)作 tellTarget action play stop FLASHMX實(shí)例教程 20 在 action 層第55幀插入關(guān)鍵幀 為其添加動(dòng)作 stop 21 在 action 層第70幀插入關(guān)鍵幀 為其添加動(dòng)作 tellTarget action play stop FLASHMX實(shí)例教程 22 在 action 層第90幀插入關(guān)鍵幀 為其添加動(dòng)作 stop 23 在 action 層第105幀插入關(guān)鍵幀 為其添加動(dòng)作 tellTarget action play stop FLASHMX實(shí)例教程 24 把播放頭調(diào)到第1幀 單擊選擇 button1 按鈕 為其添加動(dòng)作 on release gotoAndPlay 5 25 單擊選擇 button2 按鈕 為其添加動(dòng)作 on release gotoAndPlay 40 FLASHMX實(shí)例教程 26 單擊選擇 button3 按鈕 為其添加動(dòng)作 on release gotoAndPlay 75 27 把播放頭調(diào)整到第20幀 單擊選擇 button1 按鈕 為其添加動(dòng)作 on release play tellTarget action gotoAndStop 1 FLASHMX實(shí)例教程 28 單擊選擇 button2 按鈕 為其添加動(dòng)作 on release play tellTarget action gotoAndStop 20 FLASHMX實(shí)例教程 29 單擊選擇 button2 按鈕 為其添加動(dòng)作 on release play tellTarget action gotoAndStop 30 FLASHMX實(shí)例教程 30 把播放頭調(diào)整到第40幀 單擊選擇 button3 按鈕 為其添加動(dòng)作 on release gotoAndPlay 75 31 把播放頭調(diào)整到第55幀 單擊選擇 button1 按鈕 為其添加動(dòng)作 on release play tellTarget action gotoAndStop 10 FLASHMX實(shí)例教程 32 單擊選擇 button2 按鈕 為其添加動(dòng)作 on release play tellTarget action gotoAndStop 1 FLASHMX實(shí)例教程 33 單擊選擇 button3 按鈕 為其添加動(dòng)作 on release play tellTarget action gotoAndStop 30 FLASHMX實(shí)例教程 34 把播放頭調(diào)整到第90幀 單擊選擇 button1 按鈕 為其添加動(dòng)作 on release play tellTarget action gotoAndStop 10 FLASHMX實(shí)例教程 35 單擊選擇 button2 按鈕 為其添加動(dòng)作 on release play tellTarget action gotoAndStop 20 FLASHMX實(shí)例教程 36 單擊選擇 button3 按鈕 為其添加動(dòng)作 on release play tellTarget action gotoAndStop 1 37 在主場(chǎng)景時(shí)間軸新建名稱為 ac 的圖層 把電影剪輯元件 action 拖放本層的任意位置并指定實(shí)例名為 action 按下 Ctrl Enter 鍵測(cè)試動(dòng)畫(huà) FLASHMX實(shí)例教程 操作實(shí)例3 創(chuàng)建星空動(dòng)畫(huà)1 新建Flash文檔 設(shè)置文檔大小為400 400像素 背景色為深藍(lán)色 如圖11 20所示 2 繪制如圖11 21所示的圖形 3 在圖形上右擊鼠標(biāo) 在彈出的快捷菜單中選擇 轉(zhuǎn)換為元件 命令 把圖形轉(zhuǎn)換為影片剪輯元件 名稱為 star FLASHMX實(shí)例教程 6 4 雙擊 star 元件 轉(zhuǎn)換到影片剪輯的工作區(qū) 在工作區(qū)的圖形中右擊圖形 把圖形轉(zhuǎn)換為圖形元件 名稱為 star1 5 創(chuàng)建 star1 的圖形動(dòng)畫(huà) 效果為從第1幀到第15幀 star1 圖形元件逐步變寬變長(zhǎng) 并一直持續(xù)到第40幀 然后 star1 圖形元件變窄變長(zhǎng)時(shí)間軸如圖11 22所示 FLASHMX實(shí)例教程 6 在第51幀插入關(guān)鍵幀 添加如下動(dòng)作代碼 stop 7 回到主場(chǎng)景 單擊工作區(qū)中的 star 影片剪輯元件 指定其實(shí)例名為 star 8 修改圖層名稱為 star 在第2幀插入普通幀 FLASHMX實(shí)例教程 9 新建名稱為 action 的圖層 在第2幀插入關(guān)鍵幀 添加如下代碼 if n 1000 n 0 設(shè)置停止的條件 滿足條件初始化的變量 n n 1 變量 n 加1 FLASHMX實(shí)例教程 duplicateMovieClip star star addn n 復(fù)制影片剪輯元件 star 然后重新命名 放置在層 setProperty star addn rotation random 360 設(shè)置復(fù)制后的影片剪輯元件的旋轉(zhuǎn)屬性 在360度內(nèi)任意旋轉(zhuǎn) setProperty star addn alpha Number random 50 50 設(shè)置復(fù)制后的影片剪輯元件的透明度在50到100之內(nèi)任意變化 FLASHMX實(shí)例教程 n n 1 duplicateMovieClip star star addn n setProperty star addn rotation random 360 setProperty star addn alpha Number random 50 50 n n 1 duplicateMovieClip star star addn n setProperty star addn rotation random 360 setProperty star addn alpha Number random 50 50 n n 1 FLASHMX實(shí)例教程 duplicateMovieClip star star addn n setProperty star addn rotation random 360 setProperty star addn alpha Number random 50 50 以上幾行復(fù)制前面的代碼 以得到更加隨機(jī)和無(wú)序的效果 10 測(cè)試動(dòng)畫(huà) 可以看到我們?cè)谛侨褐写┧蟮膭?dòng)畫(huà)效果 FLASHMX實(shí)例教程 通過(guò)廣告動(dòng)畫(huà)實(shí)例的學(xué)習(xí) 可以認(rèn)識(shí)到 一些動(dòng)畫(huà)效果并不需要特別的復(fù)雜的操作和代碼 只要能掌握對(duì)幀和畫(huà)面的控制方法和技巧 簡(jiǎn)單的命令也能夠做出效果絢麗的動(dòng)畫(huà) FLASHMX實(shí)例教程 在11 2節(jié) 我們學(xué)習(xí)了如何制作一組彈出式菜單 只要在每個(gè)菜單的按鈕上添加網(wǎng)址 便能夠運(yùn)用到網(wǎng)頁(yè)中去了 事實(shí)上 11 2節(jié)的實(shí)例還有許多能夠完善的地方 比如可以在制作菜單按鈕時(shí) 為按鈕文字制作文字特效 或者為按鈕制作變色的背景 也可以為按鈕添加音效 從而使導(dǎo)航按鈕在實(shí)際應(yīng)用中更有動(dòng)感 同樣的 我們還可以更改菜單的滑動(dòng)彈出方式為其他的彈出方式 無(wú)論怎樣更改 原理是相同的 都是通過(guò)動(dòng)作代碼來(lái)交互控制幀的跳轉(zhuǎn)和播放 其實(shí)只要能夠靈活的運(yùn)用按鈕 影片剪輯 不需要復(fù)雜的動(dòng)作代碼也能夠做出驚人的效果 FLASHMX實(shí)例教程 11 3節(jié)的星空動(dòng)畫(huà)中 我們運(yùn)用了較為復(fù)雜的代碼 這些代碼的具體知識(shí)參見(jiàn)第八章 FLASHMX實(shí)例教程 1 運(yùn)用本書(shū)的知識(shí) 進(jìn)一步完善和提高11 1節(jié)實(shí)例 網(wǎng)頁(yè)導(dǎo)航菜單 2 制作一個(gè)宣傳Flash的動(dòng)畫(huà)廣告