Macromedia Flash - Cartoons

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

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

3. Agenda - Week 2 • Morning: • Phoneme Mouths • Voice Sync • Running • Afternoon: • Your Flash cartoon • 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 • Flash Basics_part1.mov • Handout: “Basic Components” pages 1 - 4 • Basics_part2.mov • Others: Do one of the following: • Motion Tweens - MoTweens1.mov • 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.html • Website: 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 • 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 • Exercise 1: Make a button • Exercise 2: 3-Button Shell Game • Exercise 3: Make a Face button that winks & talks • Exercise 4: 5-Shell Game with motion guides

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 • Get a voice track • Make a faces panel • Option: use Bonus…mouth files • 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 • Get a voice track • Make a faces panel • Option: use Bonus…mouth files • Synchronize voice to mouth from your work

25. 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.html • Advanced Students • Investigate free tutorials online from the Website links: • 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/swflash.cab#version=6,0,29,0" width="200" height="120"> <param name="movie" value="flashTips.swf"> <param name="quality" value="high"> <embed src="flashTips.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="120"></embed></object>

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