Macromedia FLASH MX 2004 Part 1 : The Interface, Drawing graphics,

1. Macromedia FLASHMX 2004 Part 1 : The Interface, Drawing graphics, Symbols, Layers and Frame-by-frame animation 1 CDM105 Session 8

2. What is FLASH? • A type of Internet multimedia that combines vector and bit-mapped graphics, sound and animation • Flash can be used to create animations, movies, presentations,games etc. • Requires a Browser plug-in • However, most new PCs and Macs have this pre-installed with the Browser

3. FLASH Controls Layer and Timeline Manager Basic Drawing Tools Current Frame and Work Area Symbol Library

4. Basic Drawing Tools All basic drawing objects are stored as vector graphics and therefore the way they behave in the editor is slightly different to standard DTP packages e.g. a rectangle is made up of four individual lines Line 1 They must be grouped to create a rectangle Line 2 Line 3 Line 4

5. Basic Drawing Tools The Pencil Tool can be used to create simple cartoon type characters when the smooth option is set For example, A Bee ! Note: PowerPoint corrupts the image !

6. Basic Drawing Tools The fill(Paint Bucket) tool can then be used to flood fill a bounded area in shapes you have drawn Note: If you group curves/lines you have drawn you will not be able to fill the areas. (Ungroup to fill them!) For example, A Bee !

7. Basic Drawing Tools • All the standard manipulations can be found in FLASH: • Transform • Rotation • Scaling • Vertical and Horizontal flip • Arrange • Ordering on objects (e.g. move to the front) • Group / Ungroup • Can be found under the drop down Modify menu

8. Symbols • A symbol is a master recipe of an object/drawing held in a library associated with the FLASH file • Permits instances of symbols to be used within FLASH • Each instance uses the symbol as the master drawing instructions (therefore any changes to the symbol affect all the instances of the symbol.) • After which transformations can be applied to instances • Symbols are more efficient than duplicate vector objects

9. Symbols • Anything can be made into a symbol using the • Convert to Symbol found under the Insert menu • To edit a symbol double click on it • Be careful the symbol editing interface appears just like the normal interface ! • To add another instance of a symbol to the layer select it from the library and drag and drop it on the layout

10. Layers Consider them to be like a series of transparent sheets of paper on top of each other Currently selected layer Hide Layer Lock Layer Outline Layer Layer name Add Layer Onion Skin Delete Layer

11. Layers and Symbol Example My summer garden Step 1 : Create a bee symbol Step 2 : Create a flower symbol Step 3 : Create three layers Step 4 : Name the layers: Grass, Bees and Flowers Step 5 : On the Grass layer draw some hills with the pencil tool Step 6: Add appropriate instances of the bee to the Bees layer and instances of the flower to the Flowers layer

12. Step 7 : Choose Test Scene from the Modify menu

13. Step 8 : Modify a symbol to change all instances of the symbol

14. Outline Layer shows the objects on different layers in different colour codes

15. Frame-by-frame animation • Based on traditional cell animation or flip-book animation Keyframes created by specialist artists (paid more !) Keyframe 1 Keyframe 2 The incremental changes needed to make ‘Ben the bumble bee’ turn and fly off to the right were called in-between frames Lower paid “in betweeners” or “tweeners” drew these

16. Using the Timeline Manager Empty prototype frames Current frame Frame rate In-between frames do not have bullets Blank keyframe

17. Frame-by-frame animation • Create a new FLASH document • Place an object on the work area e.g a bee, a line , a square etc. • Add a keyframe at frame 10 • Select frame 10 then choose Insert keyframe • With frame 10 selected move the object to a different location • Now play the animation • Select Controller from the drop down Windows menu. Then use the video like buttons to play the animation

18. Frame-by-frame animation

19. Frames • Keyframes - duplicates the content of the previous keyframe in that layer • Blank keyframes - define a total empty work area in that layer • Note: inserting a keyframe only changes the properties of the frame • Use Insert -> Frame or press F5 to add a new prototype frame to the current layer

20. Bee Frame-by-frame animation Lots of keyframes used to place the Bee incrementally across the screen

21. Onion Skinning • Onion skinning displays dimmed/wire-frame versions of the content on surrounding frames Onion Skin markers (Used to set which frames to Onion skin) Onion Skin Onion Skin outline

22. Onion Skinning Dimmed Onion skinning Wire-frame Onion skinning

23. Edit multiple frames Edit multiple frames Note: All the objects ON DIFFERENT frames can now be edited

24. Other FLASH functions • Importing graphics from other packages • Choose Import from the File menu • Turning Bitmaps into Vector graphics • Choose Trace Bitmap from the Modify menu • Only use on line drawing not photos !

25. Machine Based Tutorial • Using Macromedia Flash • Create ‘A summer garden scene’ using symbols, layers and the basic drawing tools • Create a moving bee animation using multiple instances of the bee at different locations (e.g. use keyframes) • Read Chapters 2 to 7 of the 2nd key text book and experiment more with Flash by creating more animations. • Ulrich, K - Visual Quickstart Guide FLASH MX 2004 for Windows and Macintosh