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

CDM105 Session 8 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

CDM105 Session 8 FLASH Controls Basic Drawing Tools Layer and Timeline Manager Current Frame and Work Area Symbol Library

CDM105 Session 8 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 Line 2 Line 3 Line 4 They must be grouped to create a rectangle

CDM105 Session 8 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 !

CDM105 Session 8 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 !

CDM105 Session 8 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

CDM105 Session 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

CDM105 Session 8 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

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

CDM105 Session 8 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

CDM105 Session 8 Step 7 : Choose Test Scene from the Modify menu

CDM105 Session 8 Step 8 : Modify a symbol to change all instances of the symbol

CDM105 Session 8 Outline Layer shows the objects on different layers in different colour codes

CDM105 Session 8 Frame-by-frame animation Based on traditional cell animation or flip-book animation Keyframe 1Keyframe 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 Keyframes created by specialist artists (paid more !)

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

CDM105 Session 8 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

CDM105 Session 8 Frame-by-frame animation

CDM105 Session 8 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

CDM105 Session 8 Lots of keyframes used to place the Bee incrementally across the screen Bee Frame-by-frame animation

CDM105 Session 8 Onion Skinning Onion skinning displays dimmed/wire-frame versions of the content on surrounding frames Onion SkinOnion Skin outline Onion Skin markers (Used to set which frames to Onion skin)

CDM105 Session 8 Onion Skinning Dimmed Onion skinning Wire-frame Onion skinning

CDM105 Session 8 Edit multiple frames Edit multiple frames Note: All the objects ON DIFFERENT frames can now be edited

CDM105 Session 8 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 !

CDM105 Session 8 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 2 nd key text book and experiment more with Flash by creating more animations. –Ulrich, K - Visual Quickstart Guide FLASH MX 2004 for Windows and Macintosh Machine Based Tutorial