From a workshop series offered in Fall 2007.

1. Introduction to Flash MX Sarah Bombich A
1/6
Introduction to Flash MX
Goals
 Familiar with Flash’s capabilities
 Knowledge of when it is (or is not) appropriate to recommend Flash as a solution
 Understanding of learning curve
 Familiar with Flash’s workspace and basic tools
What is Flash?
 Macromedia Flash MX is a powerful environment for creating a broad range of high-
impact content and rich applications for the Internet. The approachable environment
includes powerful video, multimedia, and application development features, which allow
designers and developers to create rich user interfaces, online advertising, e-learning
courses and enterprise application front ends [macromedia.com].
 Vector-based
 Interface is driven by Actionscript
What Can I Make With Flash?
 Web sites
 Web site interfaces
 CD-ROM interfaces
 Web-based presentations
 Computer-based training modules (eLearning), such as online quizzes
 Animated images
Prerequisite and Helpful Knowledge
 Familiar with basic scripting concepts, such as those behind interactive web pages (i.e.
difference between html and javascript) is essential
 Experience with vector drawing tools (such as Adobe Illustrator or Macromedia
Freehand) helpful
 Familiarity with non-linear video editing helpful
 Familiarity with using layers in graphics programs helpful (such as Adobe Photoshop)

2. Introduction to Flash MX Sarah Bombich A
2/6
Introduction to the workspace
 Stage
 Toolbox
 Panels
 Timeline
 Layers
 Library
 Property Inspector
 ActionScript
Illustrating in Flash
Lessons > Work Files > illustrate.fla
Drawing lines, rectangles, and ovals (*Page 1)
Use the Pencil tool (*Page 2) > Draws lines, shapes, freehand
forms
 Choose Straighten from the Pencil Mode modifier
 Choose Smooth
Painting and Filling Shapes (*Page 3)
 Brush tool > Create brushlike strokes as if painting
 Paint Bucket tool > Change the color of existing paint & fill
empty areas surrounded by lines
Erasing (*Page 5)
 Eraser tool > Erases lines and fills. Can customize to erase
only lines, only fills, only selected fills, only the fill on which
you started erasing.
Selecting Lines and Shapes with the Arrow Tool (*Page 6) > Use
Arrow or Lasso tool
 Click the Arrow tool
 Click the center of the oval, border, double-click to select both, selection marquee
Selecting Lines and Shapes with the Lasso Tool (*Page 7-8)
 Lasso tool > Make selections by dragging a freehand or straight-edged selection area
Arrow tool + Property Inspector = Apply new line styles, thickness, and color to lines.
 Changing line properties
 Changing fill properties

3. Introduction to Flash MX Sarah Bombich A
3/6
Reshaping Lines and Shapes (*Page 9) > Use the Arrow tool to reshape lines and shapes
without using handles
 Arrow tool
o Drag the lines in the upper triangle without selecting them first
o Pointer changes to show how the line can be reshaped
 - You can adjust the end point of a line
 - You can adjust the midpoint of a line
Scaling and Rotating
 Free Transform tool > Scale, rotate, stretch, skew lines and shapes
 Transform Panel > Enter the exact amount of scaling and rotation
Segmenting and Grouping (*Page 10) > When you place shapes or lines on top of each
other, Flash connects or segments them
 Arrow tool > If 2 shapes are the same color, Flash connects them when you deselect.
(So, you cannot moves the tree away from the house.)
Segmenting and Grouping, Part 2 (*Page 11)
 Arrow tool > Flash segments the orange house where the green tree overlapped it. If
shapes or lines are different colors, Flash segments the lower shape or line.
Segmenting and Grouping, Part 3 (*Page 12) > You can prevent segmenting and connecting
by grouping lines and shapes. Once grouped, they are treated as a single object.
 Arrow tool > Draw a selection rectangle around the tree
o Select Modify > Group
 Arrow tool to still edit the contents of the group
 Use the Property Inspector to determine if a shape is grouped
Adding and Editing Text
Lessons/Work Files/Text.fla
Creating and Formatting Type (*Page 1)
 Text tool
o Click and type > expanding one-line text block with circle in upper right-hand
corner
o Drag the resize handle to define width of block > width is fixed and words wrap
to the next line with square in upper right-hand corner (double-click the square
handle to convert back)
Working With Fonts (*Page 2)
 Property Inspector > Format fonts

4. Introduction to Flash MX Sarah Bombich A
4/6
o Device fonts (_sans, _serif, etc.)
Reshaping Text (*Page 5)
 Convert text to basic shapes so that you can reshape characters with the Arrow tool or
fill characters with a gradient.
 Text converted to shapes cannot be edited as text
 Arrow tool > select text object
o Modify > Break Apart >> Converted to individual characters
o Modify > Break Apart >> Converted to shapes
Creating and Editing Symbols
Lessons > Work Files > symbols.fla
 Symbol is a reusable image, animation, or button
 Help keep file sizes small and simplify movie editing
 Required to create sophisticated interactivity
Create a Symbol (*Page 1)
 Open Library Panel (Window > Library)
 Arrow Tool > Select car and drag it to the library
o Convert to Symbol dialog box displayed
 Drag symbol from Library Panel to the Stage to create an instance of the symbol
o If you change a single instance of a symbol, the others remain unchanged
Editing Symbols (*Page 3)
 Select an instance of the car
o Edit > Edit Symbols
o Edit > Edit Document to return to the document
Understanding Layers
Lessons/ Work Files/layers.fla
 Layers appear in the timeline
 Clicking on the column under the eye hides/unhides a layer
 Clicking on the column under the lock locks a layer so that it cannot be modified
 Reorder layers by dragging and dropping to reorder them in the timeline

5. Introduction to Flash MX Sarah Bombich A
5/6
Creating Tweened Animation
Lessons/Work Files/tweening.fla
 Creating Animation
o Frame-by-frame vs. Tweened
 Tweened Animation
o Create the starting and ending points and let Flash create the frames in between
o Can vary the object’s size, rotation, color, or other attributes evenly between the
starting and ending frames to create the appearance of movement
Using Keyframes in Animations (*Page 1)
 Indicated by circles in a frame
 Draw a selection border around car
o Insert > Create Motion Tween
 Select Frame 15 in the Car layer and drag the car to the blue X
o Flash automatically inserts a new keyframe and makes the dotted line solid
 Select Frame 1 >> Control > Play
Tweening Size and Rotation (*Page 2)
 Select Frame 23 in the Wheel layer
o Insert > Keyframe
 Window > Transform
o Select Constrain; Scale=200 & Rotate=180
 Select frame between 17 & 22
o Insert > Create Motion Tween
 Select Frame 16 and Control > Play
Using a Motion Path (*Page 3)
 Use a motion guide layer (guide icon to left of layer name) to draw a path for an object
to follow.
 Select Car layer
o Insert > Motion Guide
 Select Frame 31 in Timeline in Guide:Car layer
o Insert > Keyframe
 Use Pencil tool to draw a curving line from the car to the end of the path
 Select Frame 31 in the Car layer
 Select the Arrow tool and click the Snap modifier
 Move the car so that its center point is over one end of the line

6. Introduction to Flash MX Sarah Bombich A
6/6
o A black ring appears at the center point when it is locked to the motion guide
o Insert > Create Motion Tween
 Select Frame 45 & insert keyframe in the Car layer
o Move car so that it snaps to the other end of the line
 Select Frame 31 of Car layer
o Choose Motion from the Tweening pop-up menu in the Property Inspector’s
frame settings
 Play the animation
Tweening Color (*Page 4)
 Insert Keyframe at Frame 59 of Color layer
 Select the object on the Stage
 Choose Tint from the Color pop-up menu in the Property Inspector
o Click the Tint color box and select a color
o Select 50 in the Percentage pop-up menu
 Select any frame between 47 & 58 in the Color layer
o Insert > Create Motion Tween
o Select Frame 46
 Play the animation
Shape Tweening (*Page 5)
 Must use ungrouped objects to tween shapes
 Insert keyframe in Frame 75 of Shape layer
 Select the keyframe in Frame 61 of the Shape layer
 Use the Arrow tool to deselect and modify the shape
 Select a frame between 61 and 75 in the Shape layer
o Property Inspector: select Shape from Tween pop-up menu
 Select a value from the Ease pop-up menu
o Negative value: to begin the shape tween gradually and accelerate the tween
towards the end of the animation
o Positive value: to begin the shape tween rapidly and decelerate the tween
toward the end of the animation
 Select Frame 61
 Play the animation