COM184

1
COM184

• Macromedia FLASH
• Part 1 The Interface, Drawing graphics,
• Symbols, Layers and Frame-by-frame animation

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 -gt Frame or press F5 to add a new
  prototype frame to the current layer

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

• Create A summer garden scene using symbols
  created with the basic drawing tools
• Create a moving bee animation using multiple
  instances of the bee at different locations (e.g.
  use keyframes)