Transcript 單元三：時間軸動畫

Timeline（時間軸）
animation
 path + transition: like motion/guide + shape tween
 fps
 three types: frame by frame, tweening, action script
1)
4 tween types: motion, shape, guide, mask
Layer




上層覆蓋下層
操作：新增｜刪除｜移動｜命名，資料夾 (vs. F11-library)
操作：lock/visible/outline  alt + click
tweening的操作對象：單一center (registration)！
(key) Frame
 顯示模式的切換：右上角按鈕
播放磁頭 vs. 點選影格
2) 左右位置：前後出現的順序  白色與灰色顯示的意義
1)
 影片長度的改變：F5, F6, F7
 右鍵選項：remove frames (<> clear), copy frames (<> ctrl+C), reverse
frames …
 Keyframe property: label vs. comment (//…)
 操作練習
點選layer名稱｜雙按某frame｜Ctrl+keyframe+Drag｜反白frame+右鍵/Drag
2) 「反白frame」：框選時，所點選的影格是否已被選取的差別
3) 如同新增圖層時以最多影格數為依據，Ctrl+Drag只能增加，不會減少影片長度
1)
Onion Skin（燈箱）




啟動顯示輔助的功能
範圍的設定方式：直接拖曳或下拉選項
配合「Edit multiple frames」，可啟動同時編輯的功能
最後要用arrow tool決定操作對象！（keyframe才有作用）
Motion tweening（移動補間）
基本




設定方式：在兩個keyframe中，按下frame右鍵或是利用Ctrl+F3屬性
操作對象：Ctrl+G vs. instance  前者會在pre-keyframe自動產生symbol
時間軸為「淡藍色」
限制：一個layer只能允許一個motion tween的物件
1)
同一圖層為單一center  群組物件群再群組為「單一外框」
Keyframe可改變的參數 == 分身與本尊能有哪些改變
 Transform：位置，縮放，旋轉，斜切
1)
2)
利用 Ctrl+F2，滑鼠直接操作（或Ctrl+T）
menu /Modify/… 可 Remove 掉設定
 Color：顏色，透明度，亮度
1)
Ctrl+F3 Property 中可將效果還原為「無」
思考
 直線運動：旋轉超過360度？加速與減速？縮放  Properties
 開始結束於同一位置：兩次F6 vs. Ctrl+I (info)設定copy/paste frame
 畫面效果：「同時」由左而右，由右而左兩個layer分別處理
練習
 左而右右而左，回到原位
 四個角落的移動，按四次F6，共5個keyframe，確保頭尾一致
Shape tweening（形狀補間）
基本
 本身必須是非群組化物件：shape or ctrl+B
 時間軸為「淡綠色」
Shape Hint (modify/transform…)
 操作：設定，隱藏，移除
 輸出後看不到
觀摩
 跳動的文字：tween_end.fla
 匯入 wmf 的 shape 應用：triangle.wmf
補間動畫練習（作業）
 移動補間：繞同一中心旋轉的時針與分針（後者較快）
 形狀補間：圓方園
Behavior & button-actions
behaviors（行為指令）
 where to set or change：Ctrl+F8, symbol by F11, instance by Ctrl+F3
graphic（圖像）




逐格動畫：可利用shape/group自行繪製或import/open as library外部素材
Ctrl+F3中無法設定名稱｜常用於製作其他元件或是畫面註解
範例：跑動的貓  與場景時間軸的關係？
思考：5格 gfx in 20格 scene 的 Ctrl+F3 設定意義 第一格，一次…
movie clip（影片片段）





相當於一個「獨立」的影片，注意Ctrl+E後的畫面變化
製作上，可「交互運用」三種動畫型態來組成：逐格｜補間｜AS動作
Ctrl+F3中可對instance加以命名（vs linkage）
範例：落下的雪花，拍籃球  與場景時間軸的關係？
練習：完成 basketball_source.fla 中的影片元件 basketball_jump
1)
加減速｜音效｜變形的運用
 瞭解「影片片段」行為指令的特性：時間軸獨立，重複播放！
button（按鈕）




四個影格的意義：F6, HIT
layer的善用：文字顯示與背景，音效
instance in scene與滑鼠的運作「不需」撰寫任何程式（actionscript動作）
說明：動態按鈕
text no hit 與 text + bg layer
2) bg layer = tween mclip, 但up設為gfx behavior
1)
練習：「拍籃球」與「動態按鈕」如何二合一？
 兩個動態按鈕stop/play的製作
1)
主要的兩個技巧：F11的duplicate，Ctrl+F3的swap
 彙整已有的元件（從另一個原始檔）
1)
open as library的使用｜F11-library 資料夾的使用
 按鈕動作與複製（F9: 專家與一般模式｜影格vs物件動作）
事件：on (press, release…) { }
敘述的結束：” ; “
3) 影片instance的命名與設定：ball.stop();
4) 程式的複製與貼上
1)
2)
 思考：如何用單一按鈕來完成上述動作？
Guide // Mask
guide（路徑導引）


why do we need this function?
how to set?
1)
2)
3)
4)
5)

tween-motion in layer: moving following the straight-line path
 to serve as the “guided” layer
right-click: “Add motion guide” (method 1)
 method 2: click the icon to add the guide layer
 method 3: access “Layer Properties” to set existing layer to be “guide” or “guided”
draw the path: shape object  only one keyframe needed !
snap
 activate “snap” setting (in tools panel)
 centers snapped to the path for both keyframes (by arrow tool)
properties (Ctrl+F3): orient …
features
path “invisible”
2) “single shape” path (shape-tween: only shape in key-f1 works!)
3) multi guided layers
1)

applications
driving along mountain ridge
2) simulate ball bouncing process following the M-shape path
1)
Mask（遮罩）

why do we need this function?
1)

basketball drawing: to limit the lines on the ball-surface, not outside…
features
layers locked to take effect
2) multi masked layers
1)

applications
spotlight 探照燈: three layers needed?
2) shady text 陰陽字: layers interchanged also work?
3) gradient-color or gradient-alpha fill：by mask or shape object
1)
Discussion

to have both effects simultaneously? [Answer] Since you can only find guide
“OR” mask option in the layer properties, i.e., you cannot have both effects
in one timeline, you have to make it by “MC in MC”.
Homework: to control the play/stop of movie clip with one button


// toggle-switch by frame loop
button: animation + single button
1)

actions: frame vs. object, two buttons in two key-frames
movie-clip with both guide/mask effects