Transcript 單元四：開場動畫實作

目錄
簡介
 新功能
1)
2)
3)
4)
5)
MP3
PublishAfterShock
Library\Folder
Toolbars\drawing圓角
Edit in Place
製作流程
 Modify\ …..
 Symbol vs. instance
1)
Symbol的三個behavior
 各個property
操作環境
 Floating and hidden …
 Hotkey
1)
2)
3)
4)
5)
6)
7)
shift-F5/F6: (delete) frame, (clear) keyframe
Ctrl-F8: insert\convert to symbol, new symbol
Ctrl-E/M: edit\movie, symbols, modify\movie
Ctrl-G/B: modify\group, break apart
Ctrl-W: file\close
Ctrl-R: file\import
(Ctrl) Enter
練習單元




單元一：第三波胭脂虎-No.2，Chap5
單元二：第三波胭脂虎-No.2，Chap5
單元三：第三波胭脂虎-No.2，Chap6
單元四：第三波胭脂虎-No.2，Chap6
0
改變大小的動畫
預覽成品：tween_1.fla
概念提要
 繪製symbol，利用tweening  半自動的動畫
步驟解析
 Symbol的繪製
File\New
2) Ctrl-F8: Namecircle, symbol behavior  graphic
3) Circle: 輪廓，填入顏色與去邊
1)




輪廓與填入顏色是分離的shapeArrow tool: 可去邊框
變形：當物件沒被選取時，可用arrow tool改變曲線的形狀
Ink bottle | Paint bucket可於畫完後更改顏色Gradient Color的使用
Ctrl-E（按工作區左上角的Scene1的按鈕亦可）Edit in Place
 引入symbol
1)
設定Movie屬性：fps，背景色，Grid/Ruler
2)
命名"circle" layer
3)
Ctrl-L，拖曳至stage


Ctrl-M（timeline下的fps雙擊亦可）
Layer property: height此與timeline右上角的options設定不同！
 改變大小
1)
3個方法



右鍵，scale // Toolbars\drawing // Inspector\transform
四個角落的控制點會維持長寬比，邊線上的才能改變
Rotate可skew scale與rotate的結果與十字型的軸點位置有關！
Frame1：小一點
3) Frame20, F5/F6
2)

拉大時，可利用View\Work Area，再改變Zoom In/Out
 設tween（讓Flash計算關鍵畫隔間的逐步變化）
雙擊frame1，或右鍵：property，或右鍵：Create motion tween
2) Tweening 頁籤
1)


Easing in  漸漸加速
Tween scaling若不勾選，只有frame20會改
 測試
Enter或Ctrl-Enter
2) File\Publish Settings  Protect from Import
1)
1
加入文字移動
預覽成品：tween_2.fla
概念提要
 新增文字symbol，新增layer，同樣利用tweening
步驟解析
 Symbol的繪製（文字處理）
Ctrl-E, Ctrl-F8  graphic, text_1
2) 鍵入
1)



Text tool: 字型>50instance再改也可以
若中文字有問題，試試改其他字型後再設回來，選粗一點的字型
text為groupCtrl-B後，才能填入漸層色彩
複製：arrow toolctrl-C，然後Edit\Paste in Place（此與Ctrl-V不同）
4) 更換顏色：反白後更換
5) 立體感
3)


6)
要有十字型出現才能移動（配合shift？）
利用inspector\object中的x,y可精確調整
Ctrl-E  Edit in Place
 引入symbol
New layer: text_1與symbol名稱一樣！
2) Frame5, F6 ctrl-L後drag text_1 symbol在stage右邊，成為instance
1)

Frame1為空白keyframe
 文字終點（Text_1 layer ）
1)
Frame20, F6將instance移置畫面中央
 設motion tween at frame1，Enter測試
Motion tween的物件必須是group，Flash會自動將symbol edit組成group。
2) 若是在stage直接繪製，必須Modify\GroupCtrl-G
3) Motion tween的物件必須獨占layer  QQQ
1)
 讓文字由右、向左，再向中移動
1)
Frame12, F6將文字移置左邊
 測試
1)
Window\controller, 或按<鍵>鍵
2
加入其它的漸變（tween）
預覽成品：tween_3.fla
 Circle變顏色，text旋轉、改變角度，並且變化透明度
概念提要
 Symbol (F8 or Ctrl-F8) 才有instance property (color…) 可設定
步驟解析
 Circle顏色漸變（circle layer） stage中的instance properties
打開tween_2.fla
Frame7, F6雙擊instance挑顏色XX，Color Effect: Tint 100%
3) Frame14, F6雙擊instance挑顏色OO，Color Effect: Tint 40%
1)
2)
 影格複製與反轉拉長時間（反白某些frames，F5 ）
Click circle layerframe全部反白選取（frame1-20），右鍵：copy frames
Frame21, 右鍵：paste frames，Enter測試
3) 選取frame21-40（可配合shift-click），右鍵：reverse frames
1)
2)

4)
Tween scaling可能會失效，要再設一次！
Lock circle layer配合alt-click
 旋轉文字（text_1 layer）
Frame40, F5
Frame27, F6Modify\Transform\Scale and Rotate (..\Edit Center)
3) Frame34, F6Scale and Rotate, 雙擊文字instanceColor Effect: Alpha 44%
4) Frame27, 設motion tween
1)
2)

5)
Frame40, F6重覆過程，alpha 0%

6)
按F6設keyframe時，會延續上一個key的圖，或是繼承tween中所演算出來的圖所以有
時設key的順序會有不同結果
當alpha=0時，stage看不到，所以可以利用outline方式，以方便雙擊
其他：設定動畫變化的三種方式



Frame property的tweenmotion, shaperotate可選clockwise幾圈
Instance property有color effect
直接在keyframe的stage上，用scale and rotate等工具
3
手動式的逐格變化
預覽成品：tween_4.fla
 字母會跳動
概念提要
 字母為groupctrl-B才成為shape
 字母symbol有4個keyframe，分別變化位置或顏色，instance可再用tween變化
步驟解析
 繪製新symboltext_2
開啟tween_3.fla，Ctrl-F8: graphic symbol text_2
2) Frame1, 鍵入文字，選取，Ctrl-B
1)




3)
Group被打散後的圖形，外圍沒有外框包圍著，而是被覆蓋一層灰濛濛的小顆粒
填色：點選某字母，利用paint bucket填入不同顏色
描邊：利用ink bottle原本文字的預設值並沒有邊框
位置調整：arrow toolshift配合方向鍵可一次移動10個像素
Frame2~4, F6重覆Frame1的過程
 引入symbol
Ctrl-E，新增text_2 layer
2) Frame10, F6drag text_2 symbol as instance, Enter預覽
1)

因為movie frame夠長，所以此4格的instance會重覆播放，若是測試，可用F5來增加
frame，然後File\Open as Library來加以驗證
Frame20設key
4) Frame30, 40設key，並加以變形
5) Frame20, 30設tween
3)
4
Shape tween
預覽成品：tween_5.fla
概念提要
 從library拉出來的instance，需經ctrl-B多次的處理才能變形
 直接在stage上，利用drawing tool所畫的物件為shape，可直接shape tween
步驟解析
 破除圓圈的群組
2)
Open tween_4.fla
text_2 layer, Frame70, F5直接拉長時間軸！
3)
circle layer, frame41, F6選circle圖形，按ctrl-B
1)

此步驟是為了讓text_2繼續出現動作到最後
 破除山的群組
circle layer, frame70, F6，並將circle圖形delete
2) File\Import: triangle.wmfF8 (as symbol)
3) 重複執行ctrl-B，直到沒有外框包圍
1)
 Shape tween
1)
circle layer, Frame41雙擊，設為shape tween


Distributive vs. angular前者為角度圓弧狀變化，後者保有角度的明顯輪廓
Shape tween在timeline上的綠色顯示
 其他
文字的變形也要ctrl-B
在symbol edit的環境下import，會直接轉為symbol in library
3) Group後（symbol或drawing Ctrl-G），則無法填入色彩。但才能執行
Modify\Arrange …（Ctrl+方向鍵）來移動上下圖層的順序
4) File\Open as library與Libraries\…可利用其他的圖庫
5) Frame1-20: motion tween若在frame20的stage上隨意加入shape，這樣會改變center，
所以motion path會受影響！
1)
2)
5
簡單的閉幕
預覽成品：tween_end.fla
概念提要
 只要一個色塊symbol，instance再加以縮放即可
 色塊的顏色與背景色一樣時的效果
1)
Dropper無法選取背景色，Ctrl-M可看到！
步驟解析
 逐漸遮蓋左邊：由下而上
1)
2)
3)
4)
5)
6)
7)
Open tween_5.fla
繪製色塊Ctrl-F8: the_end graphic symbol
延長時間軸：layer circle and text_2frame80: F5
New "the_end_1" layer
Frame70:F6拉入色塊：左下角（可利用View\Work Area）
Frame80:F6將色塊拉高（Scale）將畫面左邊蓋掉
Frame70: motion tween
 逐漸遮蓋右邊：由上而下
1)
2)
New "the_end_2" layer
重覆上述5-7：右邊，由上而下
 結束字樣
Frame81 at the_end_1: F5
2) Frame81 at the_end_2: F6鍵入"the end"
1)

若不設key而直接在stage上keyin，會影響group的center，motion tween的path會受影響！
6