flash動畫設計第11章.ppt

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