Macromedia Flash - Cartoons Your Presenter: Laura Silberstein with help from Justin at cartoonsmart.comcartoonsmart.com

Morning: Flash tools Gradients Symbols Toon Face Afternoon: Chromify Face btn Motion Agenda - Week 1  Recap Intro Flash  Practice Drawing Cartoon Faces  LUNCH  Samples from The Website  Review ActionScripting for buttons  Intro to Shell Game

Morning: Phoneme Mouths Voice Sync Running Afternoon: Your Flash cartoon Agenda - Week 2  Voice Synchronization & drawing phonemes  Running robot in Flash  LUNCH  “On your own” smorgasboard  Putting Flash elements into your Web page

Macromedia Flash - Cartoons Part 1 Tools, Gradients, Faces, Buttons

Filetypes  Flash file = filename.fla –Created by Flash application –Authoring/editing environment  Movie file = filename.swf –Exported from.fla document –Keystroke shortcut = command return  Web page file = filename.html

Review Beginning Flash –Layers and Organization –Symbols and Instances –Graphics, Buttons and Movies –KeyFrames: New, Blank –Shape and Motion Tweens

Layers and Organization  Action Layer  Label Layer  Button Layer  Graphics Layer(s)  Sound Layer(s)

Animating graphic symbols  Transform panel –Size –Distort –Rotate –Rotate about external point  Color changes  Shadow shimmers

Working with Symbol Instances True or False?  Editing Instance changes the Symbol  Editing the Symbol changes the Instances True or False?  Instance can only be edited on the stage  Symbol can only be edited in its own Timeline

Edit One = Edit All  Boxes movie: Edit1EditAll.mov

Editing Symbols and Instances  Duplicate Symbol if you want to edit it without changes all others

Tweening  Shape Tweening –Break Apart for Shape Tweens –Text to Shape Tweens  Motion Tweening  Motion Guide –LHS Website: Shell Game

Exercise 1  First Timers 1. Flash Basics_part1.mov 2.Handout: “Basic Components” pages Basics_part2.mov  Others: Do one of the following: 1.Motion Tweens - MoTweens1.mov 2.Shine Effect: Gradients.mov  Everyone: –MakeSmile.mov or Head.mov –Draw your own Cartoon Face

Exercise 2  Everyone: –MakeSmile.mov or Head.mov –Draw your own Cartoon Face

Lunch: Open Lab  Practice Drawing Cartoon Faces  Basics2.mov  Independent Research: online –CartoonSmart Free Tutorials –  Website: –Button Action Scripts –Frame Action Scripts –Movie controllers Boolean pathways

Show and Tell  Those with online tutorial work show class what you learned

Stop Action  Frame actions Stop( );  Button actions on (release) {gotoAndStop(1);}  Movie clip actions onClipEvent (load) {} onClipEvent (enterFrame) {prevFrame( )};

ActionScripting  Website: –Button Action Scripts –Frame Action Scripts –Movie controllers Boolean pathways  SAMS ActionScript in 24 Hours  Free online tutorials  O’Reilly books online: Safari (Moock!!)  Flash at Foothill & Middlefield & online –M. Ganeles, G. McIlney, L.Silberstein

Exercise 3  Buttons: Face & Wink  Make a Simple Shell Game with sound buttons  Directions online: html

Buttons - Advanced Students  Review button-making Review  Exercise 1: Make a buttonMake a button  Exercise 2: 3-Button Shell Game3-Button Shell Game  Exercise 3: Make a Face button that winks & talksMake a Face  Exercise 4: 5-Shell Game with motion guides5-Shell Game

Independent Work  Continue with any projects you’ve started  Watch Lipsync.mov  Or: do Advanced Buttons work  Or: make more Face Buttons for a website  example: html/pblmm/info.html

Macromedia Flash - Cartoons Part 2 Phonemes, Voice Sync, Running, Web

Exercise 1  Everyone: Partners watch one, do one –LipSync.mov  Beginners: –Draw faces with phonemic mouths –Synchronize short voice file to Justin’s cartoon  Advanced Students 1.Get a voice track 2.Make a faces panel –Option: use Bonus…mouth files 3.Synchronize voice to mouth from your work

Exercise 2  Draw faces with phonemic mouths –Synchronize short voice file to Justin’s cartoon  Voice Synchronization –Lipsync.mov –Voices files –Bonus folder: Mouth Library  Advanced Students 1.Get a voice track 2.Make a faces panel –Option: use Bonus…mouth files 3.Synchronize voice to mouth from your work

Free Tutorials Online Free Tutorials Online …Flash Lessons…Free Tutorials  Motion Tweening – Flashkit…Text Zoom Effect  Masking and its animation – CBT Café…Masks and Multiple Masks –Macromedia…Creating a Spotlight Mask  Scripting Effects –Flash Kit…Special Effects…DNA Effect

Lunch: Open Lab Watch Runcycle.mov Independent Research: online  Beginning Students: Continue with Justin –CartoonSmart Free Tutorials –  Advanced Students –Investigate free tutorials online from the Website links: –

Exercise 3  Create a runner in Flash –Robot in Runcycle.mov

Embed Movie in DW  Export.swf file from Flash document  Open Dreamweaver  Keyboard shortcut = ALT+Command+F  Insert…Media…Flash  Browse to.swf file  Tip: Use (layout) table cells to hold.swf files

HTML Code for Flash movies <object classid ="clsid:D27CDB6E-AE6D-11cf-96B " codebase =" h.cab#version=6,0,29,0" width="200" height="120"> <embed src="flashTips.swf" quality="high" pluginspage= " type="application/x-shockwave-flash" width="200" height="120">

Independent Work  Continue your own cartoons  OR: watch the show: –Logo-animation.mov –Tweening.mov –Practice.mov –MotionGuide.mov