1. Macromedia Flash - Cartoons Your Presenter: Laura Silberstein http://krypton.fhda.edu/~lsilbers with help from Justin at cartoonsmart.comcartoonsmart.com

2. 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

3. 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

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

5. 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

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

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

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

9. 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

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

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

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

13. Exercise 1  First Timers 1. Flash Basics_part1.mov 2.Handout: “Basic Components” pages 1 - 4 3.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

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

15. Lunch: Open Lab  Practice Drawing Cartoon Faces  Basics2.mov  Independent Research: online –CartoonSmart Free Tutorials –http://www.freeflashtutorials.com/lessons.htmlhttp://www.freeflashtutorials.com/lessons.html  Website: http://krypton.fhda.edu/staff/lsilbers http://krypton.fhda.edu/staff/lsilbers –Button Action Scripts –Frame Action Scripts –Movie controllers Boolean pathways

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

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

18. ActionScripting  Website: http://krypton.fhda.edu/staff/lsilbers http://krypton.fhda.edu/staff/lsilbers –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

19. Exercise 3  Buttons: Face & Wink  Make a Simple Shell Game with sound buttons  Directions online: http://krypton.fhda.edu/staff/lsilbers/LINC/flash/shell_game. html

20. 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

21. 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: http://krypton.fhda.edu/staff/lsilbers/silberst/public_ html/pblmm/info.html

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

23. 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

24. 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

25. 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

26. Lunch: Open Lab Watch Runcycle.mov Independent Research: online  Beginning Students: Continue with Justin –CartoonSmart Free Tutorials –http://www.freeflashtutorials.com/lessons.htmlhttp://www.freeflashtutorials.com/lessons.html  Advanced Students –Investigate free tutorials online from the Website links: –http://krypton.fhda.edu/staff/lsilbers/LINC/flash/http://krypton.fhda.edu/staff/lsilbers/LINC/flash/

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

28. 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

29. HTML Code for Flash movies <object classid ="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase ="http://download.macromedia.com/pub/shockwave/cabs/flash/swflas h.cab#version=6,0,29,0" width="200" height="120"> <embed src="flashTips.swf" quality="high" pluginspage= "http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="120">

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