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

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