第3章 Flash動畫基礎(chǔ)知識 第3章Flash動畫基礎(chǔ)知識 2 學(xué)習(xí)目標(biāo)了解時間軸窗口掌握圖層的概念 類型 創(chuàng)建過程及編輯步驟掌握使用圖層創(chuàng)建遮罩動畫掌握幀和關(guān)鍵幀及幀的基本操作熟悉元件 實例和庫熟悉管理場景 第3章Flash動畫基礎(chǔ)知識 3 3 1了解時間軸3 2認識圖層3 3認識幀3 4認識元件 實例和庫3 5管理場景 第3章Flash動畫基礎(chǔ)知識 4 3 1了解時間軸 FlashMX的時間軸面板一般位于常用工具欄的下面 可以使用鼠標(biāo)拖動它 改變它在窗口中的位置 時間軸面板是用來進行動畫創(chuàng)作和編輯的主要工具 按照功能不同 可將時間軸分為兩大部分 層操作區(qū)和時間控制區(qū) 如圖3 1所示 3 1 1時間軸標(biāo)尺時間軸標(biāo)尺由幀標(biāo)記和幀編號兩部分組成 在默認情況下 幀編號居中顯示在兩個幀標(biāo)記之間 幀標(biāo)記就是標(biāo)尺上的小垂直線 每一個刻度代表一幀 每5幀顯示一個幀編號 第3章Flash動畫基礎(chǔ)知識 5 3 1 2播放頭播放頭主要有兩個作用 一是拖動播放頭時可瀏覽動畫 二是選擇需要處理的幀 當(dāng)用戶拖動時間軸上面的播放頭時 可以瀏覽動畫 隨著播放頭位置的變化 動畫則會根據(jù)播放頭的拖動方向向前或向后播放 3 1 3狀態(tài)欄時間軸上的狀態(tài)欄顯示了當(dāng)前幀 幀頻率和運行時間3條信息 當(dāng)前幀顯示舞臺上當(dāng)前可見幀的編號 也就是播放頭當(dāng)前的位置 幀頻率顯示了當(dāng)前動畫每秒鐘播放的幀數(shù) 用戶可以雙擊幀頻率 則會打開 文檔屬性 對話框 可在該對話框中重新設(shè)置每秒鐘播放的幀數(shù) 播放時間顯示的是第1幀與當(dāng)前幀之間播放的時間間隔 第3章Flash動畫基礎(chǔ)知識 6 3 1 4幀瀏覽選項幀瀏覽選項的圖標(biāo)位于時間軸的右上角 當(dāng)單擊該圖標(biāo)按鈕時 則會彈出一個下拉菜單 如圖3 2所示 圖3 2時間軸面板控制菜單 第3章Flash動畫基礎(chǔ)知識 7 3 2 1圖層及操作區(qū)圖層象透明的薄片一樣 一層層地向上疊加 通過它用戶可以方便地組織文檔的內(nèi)容 而且 當(dāng)在某一圖層上繪制和編輯對象時 其他圖層上的對象不會受到影響 如果一個圖層上沒有內(nèi)容 那么就可以透過它看到它下面的圖層 3 2認識圖層 圖層是Flash中一個非常重要的概念 靈活運用圖層 可以輕輕松松地制作出動感豐富 效果精彩的Flash動畫 第3章Flash動畫基礎(chǔ)知識 8 第3章Flash動畫基礎(chǔ)知識 9 3 2 2創(chuàng)建圖層要創(chuàng)建圖層 可執(zhí)行下列操作之一 選擇 插入 圖層 命令 在時間軸中的層操作區(qū)單擊鼠標(biāo)右鍵彈出如圖3 9所示的快捷菜單 在其中選擇 插入圖層 在時間軸中的層操作區(qū)底部單擊按鈕 也會出現(xiàn)一個新圖層 第3章Flash動畫基礎(chǔ)知識 10 3 2 3編輯圖層在Flash中創(chuàng)建了一個新圖層后 就可以在這個圖層上繪制圖案或者創(chuàng)建符號的實例了 所有的繪圖操作都是在當(dāng)前被選擇的圖層上進行 如果圖層被鎖定后 該圖層上的任何對象都不能被編輯 1 選擇一個圖層2 同時選擇多個圖層3 重命名圖層4 鎖定 解鎖圖層5 復(fù)制圖層6 刪除圖層 第3章Flash動畫基礎(chǔ)知識 11 3 2 4設(shè)置圖層的屬性在時間軸的圖層操作區(qū)可以直接設(shè)置圖層的顯示和編輯屬性 如果要設(shè)置更加詳細的屬性 可以使用 圖層屬性 對話框來完成 打開 圖層屬性 對話框2 修改圖層屬性 第3章Flash動畫基礎(chǔ)知識 12 3 2 5遮罩層在Flash中遮罩是指一個范圍 它可以是一個矩形區(qū)域 是一個圓 也可以是字體 甚至是隨意畫的一個區(qū)域 任何一個不規(guī)則形狀的范圍同樣都可用做遮罩 遮罩層的圖形 在演示中是不顯示的 它只是給定一個區(qū)域 在遮罩層的下面 設(shè)定為被遮罩的圖層只能在該區(qū)域內(nèi)顯示 操作實例1 創(chuàng)建一個聚光燈動畫 第3章Flash動畫基礎(chǔ)知識 13 3 2 6運動引導(dǎo)層在Flash中 引導(dǎo)層也被稱做輔助層 它在畫圖時起著輔助作用 在FlashMX中 用戶可以創(chuàng)建引導(dǎo)層 然后將其他圖層上的對象與在引導(dǎo)層上創(chuàng)建的對象對齊 引導(dǎo)層不出現(xiàn)在發(fā)布的Flash影片中 引導(dǎo)層可以分為兩種 普通引導(dǎo)層和運動引導(dǎo)層 普通引導(dǎo)層用直尺圖標(biāo)表示 起到輔助靜態(tài)定位作用 運動引導(dǎo)層用弧線圖標(biāo)表示 在制作影片時起到運動路徑的引導(dǎo)作用 普通引導(dǎo)層是在普通層的基礎(chǔ)上建立的 運動引導(dǎo)層則是一個新的層 在應(yīng)用中必須指定是哪個層上的運動路徑 第3章Flash動畫基礎(chǔ)知識 14 一個運動引導(dǎo)層可以與一個或多個圖層關(guān)聯(lián) 只要將選中的圖層拖動到運動引導(dǎo)層下面即可 操作實例2 創(chuàng)建小球運動動畫 第3章Flash動畫基礎(chǔ)知識 15 3 3認識幀幀是一幅靜態(tài)的畫面 在時間軸中是一個小矩形 它以時間為橫坐標(biāo) 以圖層序列為縱坐標(biāo) 因此具有兩種含義 既可以表示動畫的一個圖層在各個時刻的瞬間形態(tài) 又可以描述動畫的某一時間在不同深度的獨立行為 3 3 1幀和關(guān)鍵幀關(guān)鍵幀是與它前面和后面的幀內(nèi)容都不相同的幀 時間軸上實心的圓圈代表了有內(nèi)容的關(guān)鍵幀 空白關(guān)鍵幀與關(guān)鍵幀的行為完全相同 只是不包含任何內(nèi)容 時間軸上空心的圓圈代表了空白關(guān)鍵幀 第3章Flash動畫基礎(chǔ)知識 16 3 3 2創(chuàng)建關(guān)鍵幀在時間軸上要創(chuàng)建關(guān)鍵幀 可先在時間軸中選擇一個幀 然后執(zhí)行下列操作之一 選擇 插入 關(guān)鍵幀 菜單命令 右擊選中的幀 在彈出的快捷菜單中選擇 插入關(guān)鍵幀 命令 第3章Flash動畫基礎(chǔ)知識 17 3 3 3幀的操作幀的操作可以通過菜單來實現(xiàn) 選定需要編輯的幀 單擊鼠標(biāo)右鍵將彈出菜單 如圖3 31所示 第3章Flash動畫基礎(chǔ)知識 18 3 4認識元件 實例和庫 元件是指在Flash中創(chuàng)建的圖形 按鈕或影片剪輯 元件只需創(chuàng)建一次 然后即可在整個文檔或其他文檔中重復(fù)使用 元件可以包含從其他應(yīng)用程序中導(dǎo)入的插圖 實例是指位于舞臺上或嵌套在另一個元件內(nèi)的元件副本 它可以與它的元件在顏色 大小和功能上有較大的差別 當(dāng)元件被修改時 場景中的實例也將隨著被更新 第3章Flash動畫基礎(chǔ)知識 19 3 4 1元件在FlashMX中 每個元件都可以有自己的時間軸 場景和完整的圖層 在創(chuàng)建元件時 可以根據(jù)需要選擇元件類型 不同類型的元件將決定用戶在影片中如何使用該元件 Flash中的元件包括3種 即圖形 按鈕和影片剪輯元件 其特點如下 圖形元件 用于制作靜態(tài)圖像 以及附屬于主影片 時間軸 的可重用的動畫片段 按鈕元件 用于創(chuàng)建響應(yīng)鼠標(biāo)單擊 移動或其他動作的交互按鈕 影片剪輯元件 用來制作可重復(fù)使用的 獨立于主影片時間軸的動畫片段 操作實例3 創(chuàng)建元件 第3章Flash動畫基礎(chǔ)知識 20 3 4 2實例用戶在Flash中創(chuàng)建一個元件后 該元件并不能直接應(yīng)用到場景中 若要將元件應(yīng)用于舞臺中 就需要創(chuàng)建其實例 創(chuàng)建實例就是將元件從 庫 面板拖到舞臺中 實例是元件舞臺中的具體體現(xiàn) 操作實例4 創(chuàng)建實例 第3章Flash動畫基礎(chǔ)知識 21 3 4 3庫在FlashMX中 庫 面板存儲了在Flash文檔中創(chuàng)建的元件以及導(dǎo)入的文件 如視頻剪輯 聲音剪輯 位圖和導(dǎo)入的矢量圖形等內(nèi)容 用戶通過共享庫資源 可以方便地在多個Flash電影中使用一個庫中的資源 大大提高了動畫的制作效率 Flash為用戶提供了大量的元件 如各種按鈕 聲音 學(xué)習(xí)交互等 用戶可根據(jù)需要進行選擇 第3章Flash動畫基礎(chǔ)知識 22 3 5 1添加和切換場景添加一個場景可以按場景面板上的 添加場景 按鈕 也可以選擇菜單項 插入 場景 場景的切換可以在場景面板中單擊選中需要編輯的場景 即可切換到相應(yīng)的場景 也可以選擇菜單項 查看 轉(zhuǎn)到 并選擇目標(biāo)場景 3 5 2命名場景在場景面板中雙擊準(zhǔn)備更名的場景名字標(biāo)簽 輸入新名字 第3章Flash動畫基礎(chǔ)知識 23 3 5 3刪除和復(fù)制場景刪除場景 在場景面板中單擊選中準(zhǔn)備刪除的場景 按 刪除場景 按鈕 復(fù)制場景 在場景面板中單擊準(zhǔn)備復(fù)制的場景 按 復(fù)制按鈕場景 按鈕 輸入新名字 改變場景的播放次序 在場景面板中按住需要調(diào)整的場景 拖放到合適的位置即可 第3章Flash動畫基礎(chǔ)知識 24 3 5 4建立和排列窗口在一般情況下 打開的每一個文件都占用一個窗口 在某些情況下 可以通過新建窗口的方法讓一個文件占有多個窗口 文件窗口的排列方式可以是隨意的 也可以根據(jù)需求進行某種特定的排列 排列的各種主要方式列舉如下 隨意方式隨意方式可以隨心所欲地放置窗口 要選擇某個窗口 可以單擊該窗口的標(biāo)題欄 該窗口的標(biāo)題欄顏色將加亮 表示已經(jīng)被激活 而沒有被激活的窗口的標(biāo)題欄顏色則比較淡 最大化方式按窗口右上方的最大化按鈕 可以將窗口最大化 第3章Flash動畫基礎(chǔ)知識 25 層疊方式選取菜單命令 窗口 層疊 可將各個窗口進行如圖3 43所示的階梯型排列 圖3 43層疊方式的窗口 第3章Flash動畫基礎(chǔ)知識 26 平鋪方式選取菜單命令 窗口 平鋪 可將各個窗口調(diào)整成為一樣的大小 如圖3 44所示的網(wǎng)狀排列 圖3 44平鋪方式的窗口 第3章Flash動畫基礎(chǔ)知識 27 3 6上機操作綜合指導(dǎo) 上機操作指導(dǎo)1操作要求在動畫制作過程中常常用到一個特效 一束激光射到屏幕上 起到畫筆的作用 在屏幕上寫出各種各樣的文字來 使用遮罩功能可以實現(xiàn)這一特效 第3章Flash動畫基礎(chǔ)知識 28 操作步驟第一步 建立Flash文檔 導(dǎo)入一圖片作為背景1 啟動FlashMX程序 選擇 文件 新建 命令 建立一個新的Flash文檔 2 選擇 文件 導(dǎo)入 命令 打開 導(dǎo)入 對話框 在對話框中選擇一幅圖片 單擊 打開 按鈕即可將其導(dǎo)入到當(dāng)前的Flash文檔 3 在時間軸的圖層操作區(qū)中雙擊圖層1的名稱 然后輸入新名稱 背景 第3章Flash動畫基礎(chǔ)知識 29 第二步 創(chuàng)建被遮罩層4 選擇 插入 圖層 命令 新建一個圖層2 并重新命名為 被遮罩層 5 單擊工具面板中 文本工具 按鈕 移動鼠標(biāo)在舞臺中單擊 創(chuàng)建一個文本框 輸入文字內(nèi)容 LOVE 6 在打開的文本屬性面板中設(shè)置字體為 華文行楷 字體大小96 文字顏色為黃色 樣式為粗體 如圖3 46所示 圖3 46設(shè)置文本屬性 第3章Flash動畫基礎(chǔ)知識 30 第三步 創(chuàng)建遮罩層7 選擇 插入 圖層 命令 新建一個圖層3 并重新命名為 遮罩層 8 使用菜單命令 插入 幀 在每層的第24幀處插入一幀 擴展各圖層的幀數(shù) 如圖3 47所示 圖3 47插入幀 第3章Flash動畫基礎(chǔ)知識 31 9 使用畫筆工具 如圖3 47所示在 遮罩層 圖層中畫一個填充塊 剛好遮蓋住字母 L 的起筆 如圖3 48所示 圖3 48添加填充塊10 單擊選中 遮罩層 圖層的第2幀 單擊鼠標(biāo)右鍵使用菜單命令 轉(zhuǎn)換為關(guān)鍵幀 將該幀轉(zhuǎn)換為關(guān)鍵幀 11 使用同樣的方法完成填充塊的拼制 第3章Flash動畫基礎(chǔ)知識 32 12 右擊 遮罩層 圖層 選擇菜單 遮罩層 如圖3 51所示 圖3 51設(shè)置遮罩層 第四步 測試影片13 按 Ctrl Enter 測試影片 第3章Flash動畫基礎(chǔ)知識 33 上機操作指導(dǎo)2操作要求制作一輛沿曲線運動的汽車動畫 熟練掌握運動引導(dǎo)層的使用方法 第3章Flash動畫基礎(chǔ)知識 34 操作步驟第一步 建立Flash文檔 新建一個汽車元件1 啟動FlashMX程序 選擇 文件 新建 命令 建立一個新的Flash文檔 2 選擇 文件 導(dǎo)入 命令 打開 導(dǎo)入 對話框 在對話框中選擇一幅汽車圖片 單擊 打開 按鈕即可將其導(dǎo)入到當(dāng)前的Flash文檔 第3章Flash動畫基礎(chǔ)知識 35 3 選擇菜單命令 插入 轉(zhuǎn)換為元件 打開 轉(zhuǎn)換為元件 對話框 在 名稱 文本框中輸入新建元件名稱 汽車 并在 行為 選項區(qū)域中選擇 圖形 單選按鈕 如圖3 52所示 圖3 52創(chuàng)建汽車元件 4 在圖層1的第35幀處 按F5插入幀 第3章Flash動畫基礎(chǔ)知識 36 第二步 添加運動引導(dǎo)層5 按下 添加引導(dǎo)層 按鈕 添加一個引導(dǎo)層 6 使用鉛筆工具 在引導(dǎo)層中畫一條曲線 第三步 拖放汽車的位置7 鎖住引導(dǎo)層 使用選擇工具 拖動汽車 使得汽車的中心點與導(dǎo)線的右端重合 8 與引導(dǎo)線相比 汽車顯得太大 可選中任意變形工具 將汽車縮小 9 由于曲線的影響 汽車的頭部將指向上方 如圖3 54所示使用任意變形工具進行調(diào)整 第3章Flash動畫基礎(chǔ)知識 37 第四步 創(chuàng)建動畫11 單擊選中圖層1的第1幀 在屬性面板中將補間設(shè)置為 動作 并選中 調(diào)整到路徑 這樣汽車就會隨著引導(dǎo)線改變方向 如圖3 56所示 圖3 56設(shè)置幀屬性 12 按 Ctrl Enter 測試影片 第3章Flash動畫基礎(chǔ)知識 38 小結(jié)與提高在Flash中 除了一般圖層外 還包括兩個特殊的圖層 即引導(dǎo)層和遮罩層 當(dāng)標(biāo)準(zhǔn)層與引導(dǎo)圖層關(guān)聯(lián)后 標(biāo)準(zhǔn)圖層就成為被引導(dǎo)層 當(dāng)標(biāo)準(zhǔn)層與遮罩圖層關(guān)聯(lián)后 標(biāo)準(zhǔn)圖層就成為被遮罩圖層 各種圖層在 時間軸 中的圖層名稱前通過不同的圖標(biāo)表示 在Flash中 系統(tǒng)引入了圖層文件夾來更好地組織和管理圖層 元件是Flash中的結(jié)構(gòu)基礎(chǔ) 利用元件可以節(jié)省時間 減小文件大小 增加動畫的靈活性 當(dāng)用ActionScript控制元件的行為和顯示時 元件被認為是面向?qū)ο蟮脑O(shè)計環(huán)境中的對象 第3章Flash動畫基礎(chǔ)知識 39 Flash以元件來處理輸入的聲音 位圖和視頻資源 它們被放在庫中 可以在Flash項目中使用這些資源的實例 除了導(dǎo)入的資源外 在Flash中還可以建立三種元件 圖形元件 影片剪輯和按鈕元件 影片剪輯元件和按鈕元件擁有可以獨立于主時間軸播放的時間軸 雖然圖形元件也有自己的時間軸 但是它是綁定在主時間軸上的 對于它的時間軸上每個可視的幀 都需要主時間軸上有對應(yīng)的幀 在項目中使用元件非常簡單 從庫中將資源或元件拖動到舞臺上就可以了 通常最好是準(zhǔn)備一個新層并選定合適的關(guān)鍵幀 第3章Flash動畫基礎(chǔ)知識 40 第3章Flash動畫基礎(chǔ)知識 41