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