【Flash 範例動畫】 圖庫 補充教材
《主題規定》
104學年度要完成的 Flash 作品是外文歌教唱。相關規定如下:
(1)歌曲長度:30sec~60sec。
(2)歌詞能翻譯成中文,內容必須為普遍級。
(3)影格速率:30FPS
(4)文件大小:900 X 600 像素
(5)檔名:班級座號 - 學號 flash . fla(swf)
(6)內容:歌曲介紹(前奏)、歌詞及其翻譯(隨歌曲呈現所唱位置)
《使用軟體》
(1) goldWave:剪輯音樂。
(2) photoImpact:製作歌詞與介紹。
(3) Flash CS4:整合音樂檔與圖檔,使用動畫技巧呈現教唱過程。
(4) 記事本:可濾除文字的格式,用來儲存歌詞原始檔。
--------------------------------------------------------------------------------------------------------
《製作流程》
(一) goldWave:將歌曲長度剪輯成30sec~60sec,存成 mp3 最高品質。
(二) photoImpact:圖檔大小設定為 900 X 600 像素,製作歌詞與介紹。
(三) Flash CS4:
【開啟 Flash CS4】
◎首次為新增 Action Script 3.0檔案;之後為開啟檔案。
◎視窗 → 工作區 → 傳統。
◎文件屬性 → 影格速率:30FPS;文件大小:900 X 600 像素。
◎檢視比例:設定成「符合視窗大小」。
◎檔案 → 儲存檔案:檔名為班級座號 - 學號 flash .fla
◎控制 → 測試影片,產生播放檔:班級座號 - 學號 flash .swf--------------------------------------------------------------------------------------------------------
【第一週進度】
目標:將歌曲、歌詞匯入至 Flash 做整合。
◎檔案 → 匯入 → 匯入至元件庫:音樂檔(歌曲)與圖檔(歌詞)
◎ music 圖層設定
●將時間軸的圖層1命名為 music
●從元件庫將音樂檔拉進舞台;或是屬性 → 聲音 → 選定音樂檔。
●屬性 → 聲音 → 同步 → 設定成串流,可讓影音同步。
●設定成串流後,按 Enter可立即播放,可了解音樂是否已結束。
●在影格上按滑鼠右鍵 → 插入影格,插入足夠的影格長度直到歌曲剛好結束。
ps. 因為每秒 30 張影格,因此60sec歌曲共1800張影格。
◎ lyrics 圖層設定
●新增圖層2,命名為 lyrics
●從元件庫將圖檔拉進舞台 。
●對齊 → 點選對齊舞台 → 點選對齊水平中心及對齊垂直中心,使圖檔置於中央。
●位置及大小 → x:0 y:0;即左上角對齊座標原點,可讓圖檔與舞台完全重疊。
●點選舞台中圖檔,按滑鼠右鍵 → 轉換成元件,名稱:lyrics;類型:影片片段。
--------------------------------------------------------------------------------------------------------
【第二週進度】
目標:能在時間軸上建立傳統補間動畫;讓影片元件能淡入及做效果;
能在時間軸上建立形狀補間動畫,指示目前歌詞位置。
◎認識時間軸。
●時間軸上的數字是影格數,不是秒數。
●圖層上有眼睛、鎖、框線:眼睛on可隱藏圖層;鎖on則不准編輯圖層畫面;
框線on則只顯示畫面的輪廓。
●影格:分成關鍵影格與一般影格兩大類。影格上有一個圓點者是關鍵影格,
是編輯畫面的地方;一般影格只是延續前面關鍵影格畫面。
※若要做效果,一個關鍵影格內只能放入一個元件。
●元件的上下層順序:若元件在不同圖層,圖層的上下順序就是實際排列順序;
若元件在相同圖層的同一關鍵影格中,則可按滑鼠右鍵來排列元件順序。
◎認識元件與補間動畫。
●元件庫:元件庫裡除了影音、圖檔等素材外,有三種元件:影片、按鈕、圖像。
●屬性為「影片片段」的元件:功能比「圖像」元件多,可製作傳統補間動畫、
移動補間動畫、移動預設效果、顏色效果及濾鏡。
●屬性為「形狀」的物件:此種物件是使用繪圖工具直接在舞台上繪製形成。
※若完全未群組,則為打散(解散群組)狀態,可用來設計形狀補間動畫。
※若遲遲未轉換成元件,就不會存在元件庫裡。
◎ lyrics 圖層設定移動補間動畫、移動預設效果、顏色效果及濾鏡。
●屬性為「形狀」的物件:此種物件是使用繪圖工具直接在舞台上繪製形成。
※若完全未群組,則為打散(解散群組)狀態,可用來設計形狀補間動畫。
※若遲遲未轉換成元件,就不會存在元件庫裡。
●確認在關鍵影格中的是影片元件,而不是點陣圖。
●按 Enter可立即播放音樂(及畫面),找到本段歌詞的起始影格,點選關鍵影格,
將關鍵影格搬移到正確的起始影格位置。
●點選關鍵影格,接著點選舞台中的歌詞影片元件,在顏色效果的樣式中選取
※ Alpha(透明度):100%為實體,0%為完全消失,之間為透明。
請做出淡入的傳統補間動畫,Alpha 從 0% 到 50% 。
◎ lyrics_down 圖層設定
●新增圖層3,命名為 lyrics_down ,將此圖層拉至 lyrics 圖層下方。
●複製 lyrics 圖層的關鍵影格(Alpha=50% ),在lyrics_down 圖層中對應位置
貼上影格,並將此關鍵影格的 Alpha 設成 75% ~ 100%。
◎ pointer 圖層設定
●新增圖層4,命名為 pointer,將此圖層拉至 lyrics 與 lyrics_down 圖層之間。
●在lyrics的起點插入空白關鍵影格,用矩形工具在舞台上畫一個黃色無框矩形。
●讓黃矩形維持打散狀態(不要群組,也不要轉換成元件,屬性如下圖),
配合目前演唱的歌詞位置做形狀補間動畫。用以指示目前歌詞位置。
--------------------------------------------------------------------------------------------------------
【第三週進度】
目標:
(4)移動補間動畫:包括縮放、加減速、旋轉等設定。
(5)在移動補間動畫的頭尾關鍵影格中,可針對元件的顏色屬性做設定:包括亮度、色調、透明度(Alpha)及進階等之變化。
(6)移動補間動畫可加上導引線圖層做輔助。此時屬性中旋轉若設定為自動並勾選「沿向路徑」則會循導引線旋轉。
(7)形狀補間動畫必須在元件被完全「打散」(網狀選取狀態)的情況下才能進行。
(8)影片片段元件本身的動畫:讓角色活起來。
打散狀態、群組、影片元件、文字的適用時機說明如下:
●群組狀態:讓物件彼此重疊時不會互相分割。
○打散狀態:(2)形狀補間動畫
◎影片元件:(3)(4)(5)移動補間動畫、濾鏡功能
○文字:(5)濾鏡功能
(1)製作逐格動畫●群組狀態:讓物件彼此重疊時不會互相分割。
○打散狀態:(2)形狀補間動畫
◎影片元件:(3)(4)(5)移動補間動畫、濾鏡功能
○文字:(5)濾鏡功能
○ (2)形狀補間動畫
◎ (3)移動補間動畫
◎ (4)移動補間動畫+導引線圖層
◎○(5)濾鏡功能
(6)插入→時間軸特效→特效:展開、投影、模糊、爆破。
(7)遮色片