Presenting:

Intro to Macromedia Flash MX

Prepared by Tonya Mills, Facilitator

Copyright 2004 Office of Instructional Technology Services, San Antonio ISD
May be reproduced for non-profit, educational use so long as credit is given

Office of Instructional Technology Services 1702 N. Alamo, Suite 111: San Antonio, TX 78215 Phone: 210-527-1400; Fax: 210-281-0257 Web: http://itls.saisd.net

Intro to Macromedia Flash MX Page - 1

ITLS—http://itls.saisd.net/
 Intro to Macromedia Flash MX

Published by:
The Office of Instructional Technology Services
San Antonio ISD
1702 North Alamo
San Antonio, Texas 78215

Copyright © 2004 San Antonio ISD. May be reproduced for non-profit,

educational use so long as credit is given.

For general information on Instructional Technology products and

services, please contact:
Miguel Guhlin, Director
Instructional Technology Services
Phone: (210) 527-1400
Fax: (210) 281-0257
Email: mguhlin@saisd.net
Web site: http://itls.saisd.net

Direct any questions, comments or corrections to tmills@saisd.net.

Your assistance will be greatly appreciated.

Intro to Macromedia Flash MX Page - 2

ITLS—http://itls.saisd.net/
 Table of Contents

Topic Pages

The Flash MX Workspace ........................................................................ 4-5

The Timeline...............................................................................................6
Tools on the Tool bar..................................................................................7

Drawing Exercises
Bunny Rabbit ............................................................................................ 8-8
Crazy Clown ........................................................................................... 10-11

Animation Exercises
Bouncing Bunny ..................................................................................... 12-13

School Header
Copying the Photos ................................................................................ 14-16
Removing the photos from the Flash stage...............................................16
Creating the School’s Name................................................................... 17-18
Creating a shadow effect...........................................................................19
Creating the tweens................................................................................ 20-24
Creating a Mask Layer ........................................................................... 25-27
Exporting the movie................................................................................ 27-28

Intro to Macromedia Flash MX Page - 3

ITLS—http://itls.saisd.net/
 Beginning Basics

Opening Macromedia Flash MX

• Start the Macromedia Flash MX program by clicking on the

Flash MX icon.
• This icon may be found inside the Macromedia program
folder or as a desktop shortcut.
Macromedia Flash MX

The Flash MX window

• The following is the basic Flash MX program window. It can be changed/modified at
any time.

Timeline

Toolbox
Panels
Area

Stage

Work
Area

Properties
Panel

Intro to Macromedia Flash MX Page - 4

ITLS—http://itls.saisd.net/
 Stage ..................... Opens automatically when you open the Flash program. It is where
you’ll place all content that appears in your movie. The default Stage
color is white, but it may be changed by using the Properties panel or
Modify, Document.

Work Area ............ It’s the grey area that surrounds that stage. Use this area to “store”
your items until they are ready to cross the staging area (during a
motion tween).

Timeline ................ Made of rows (layers) and columns (rectangles called frames). Use
Keyframes to show when and when an animation starts or stops.

Properties Panel.... A panel usually located at the bottom of the page that allows you to
change the attributes of any object located on the stage, work area, or
timeline.

Toolbox.................. Contains the selection, drawing, and shape tools.

Panels Area........... Docking area for removable panels, such as Color Mixer, Color
Swatches, Components, Answers, and so on.

Intro to Macromedia Flash MX Page - 5

ITLS—http://itls.saisd.net/
 Tools on the Tool bar

Intro to Macromedia Flash MX Page - 6

ITLS—http://itls.saisd.net/
 Arrow ............... Lets you select entire objects by clicking an object or dragging to enclose the object within a
rectangular selection marquee.

Subselection .... Moves or nudges an anchor point (use in conjunction with the pen tool).

Line .................. Draws a straight line.

Lasso ............... Select objects by drawing either a freehand or a straight-edged selection area. You can
switch between the freeform and straight-edged selection modes.

Pen .................. Draws precise paths as straight lines or smooth, flowing curves. You can create straight or
curved line segments and adjust the angle and length of straight segments and the slope of
curved segments.

Text ................. Use to type text.

Oval ................. Draws an oval shape

Rectangle......... Draws an rectangle shape.

Pencil ............... Use to draw lines and shapes. Apply smoothing or straightening to the lines and shapes by
changing the a drawing mode for the Pencil tool.

Brush ............... Draws brushlike strokes. You can choose a brush size and shape using the Brush tool
modifiers.

Transform ........ Used to resize/scale objects on the stage.

Fill Transform... Used to rotate, scale, or skew a fill or gradient.

Ink Bottle.......... Changes the stroke attributes of existing objects

Paint Bucket..... Changes the fill attributes of existing objects

Eyedropper ...... Copies the fill and stroke attributes from one object and immediately apply them to another
object. The Eyedropper tool also lets you sample the image in a bitmap to use as a fill.

Eraser .............. Removes strokes and fills. You can quickly erase everything on the Stage, erase individual
stroke segments or filled areas, or erase by dragging.

Hand ................ Changes the view of the Stage by changing the magnification level or moving the Stage within
the Flash work environment.

Zoom................ You can view the entire Stage on the screen, or to view just a particular area of your drawing
at high magnification, you can change the magnification level. The maximum magnification
depends on the resolution of your monitor and the document size.

Stroke color...... Shows the color palette that will change the color of the stroke attributes of existing objects.

Fill Color........... Show the color palette that will change the color of the fill attributes of existing objects.

Intro to Macromedia Flash MX Page - 7

ITLS—http://itls.saisd.net/
 Drawing Exercises
Bunny Rabbit
1. Use the Oval Tool, draw two
circles (fill=transparent,
stroke=black, size 1).
Make sure one circle is larger
than the other.
4. Erase the unnecessary lines in
the bottom half.
Draw two circles in the top/
bottom half (fill=brown,
stroke=black, size 1).
Intro to Macromedia Flash MX
ITLS—http://itls.saisd.net/
2. Erase the bottom of the top
circle. Draw a rectangle and
change the Round Rectangle
Radius to 50 points.
5. Eyes - Draw a circle off to the
side of your drawing
(fill=black, stroke=black, size
1).
Select the circle. Click on
Edit, Copy, the Edit Paste.
Drag each selected circle onto
the face.
3. With the line icon, close the
bottom of the top circle
(stroke=black, size 1). Use the
black arrow to modify the line
forming a chin.
Draw two lines, using the line
icon (stroke=black, size 1).
Connect the bunny’s shoulders.
6. Feet - Draw a circle off to the side
of your drawing (fill=black,
stroke=black, size 1).
Click and drag the side of the circle
forming the shape of a foot.
Select the circle. Click on Edit,
Copy, the Edit Paste.
Select the copy. Click Modify,
Transform, Flip Horizontal.
Drag each selected circle onto the
bottom of the shape.
Page - 8
 7. Nose- Draw a small square off
to the side of your drawing
(fill=red, stroke=black, size 1).
Change the Round Rectangle
Radius to 0 points.
Use the black arrow to narrow
the top of the square.
Select the shape and move it
onto the face. Select the face
and move it on top of the body.
10. Finishing touches.
Ears - Draw a line across the
bottom of the ears. Use the
Paint Bucket Tool to fill with
color (fill=brown).
Intro to Macromedia Flash MX
ITLS—http://itls.saisd.net/
8. Use the Brush icon and draw 9. Ears - Draw two circles on the top
the whiskers and hair on the of the head (fill=transparent,
head of the bunny (fill=black, stroke=black, size 1).
brush size=smallest circle).
Use the black arrow to click and
reshape the circles forming ears.
11. Select the entire drawing. Click on Modify, Group.
Click on Insert, Covert to Symbol.
Name your drawing g_my bunny and its behavior should be a
Graphic.
Click OK.
Page - 9
 Crazy Clown
1. Use the Oval Tool, draw a
circle (fill=white,
stroke=black, size 1).
4. Use the black arrow and
remove all unnecessary lines.
Use the Brush Tool and draw
the ears on the side of the
head (stroke=black, brush
size=smallest circle).
Remove the lines on the side
of the face.
Intro to Macromedia Flash MX
ITLS—http://itls.saisd.net/
2. Nose - Draw a circle off to
the side of your drawing
(fill=red, stroke=black, size
1).
Drag the selected circle onto
the face
5. Hair - Use the Paint Bucket
Tool to fill in the hair area
with color (fill=purple).
Use the Brush Tool to draw
highlights (stroke=black,
brush size=smallest circle).
Use the Paint Bucket Tool to
fill in the hair’s highlights
(fill=light blue).
3. Use the Brush Tool to draw a
think outline of the clown’s hair
(stroke=black, brush
size=smallest circle).
Draw the outline of the eyebrows
and continue down to the nose/
mouth area.
6. Face- Use the black arrow and
reshape the jaw line.
Use the Oval Tool and draw a
circle off to the side. Use the black
arrow to reshape the circle to form
the eye.
Select the circle. Click on Edit,
Copy, the Edit Paste.
Select the copy. Click Modify,
Transform, Flip Horizontal.
Drag each selected circle onto the
face.
Page - 10
 7. Zoom in close and use the
Brush Tool to draw the pupils
inside the eyes (fill=black,
brush size=smallest circle).
Use the Paint Bucket Tool to fill
in the shapes (fill=blue).
Use the Brush Tool and draw
the triangle shapes above and
below the eyes (fill=black,
brush size=smallest circle).
Use the Paint Bucket Tool to fill
in the shapes (fill=yellow).
Intro to Macromedia Flash MX
ITLS—http://itls.saisd.net/
8. Mouth - Use the Brush Tool 9. Collar - Use the Brush Tool to
draw the mouth, outer area, draw a thin outline and its
(fill=black, brush size=smallest decorative patterns.
circle).
Use the Paint Bucket Tool to fill Use the Paint Bucket Tool to fill in
in the shape (fill=dark red). the shape, (fill=blue, pink, purple,
yellow).
Use the Brush Tool to draw the
mouth, inner area, (fill=black,
brush size=smallest circle).
Use the Paint Bucket Tool to fill
in the shape (fill=pink).
10. Select the entire drawing. Click on
Modify, Group.
Click on Insert, Covert to Symbol.
Name your drawing g_my clown and its
behavior should be a Graphic.
Click OK.
Page - 11
 Animation Exercises
Bouncing Bunny

1. On Frame 1, move the bunny off of the canvas 2. Click on the Timeline’s Frame 10.

3. Click on the Timeline’s Frame 20. 4.
Press F6 on your keyboard (or Insert, Keyframe)
Move the bunny across the canvas.
Right click in the grey area between the keyframes
on the Timeline.
Choose Create Motion Tween from the drop down
menu.

Place keyframes and move the bunny on Frames 30, Create Motion Tweens between all keyframes.
40, and 50.
Run the animation by pressing Enter on your
Run the animation by pressing Enter on your keyboard.
keyboard.
Rename your layer Bunny.

Intro to Macromedia Flash MX Page - 12

ITLS—http://itls.saisd.net/
 5. Right Click on the Bunny Layer, pick Add Motion Guide from the drop down menu.

In the Guide layer, use the Brush Tool to trace the path that you want your bunny to hop (fill=blue, brush size=next to
smallest circle).

6. Highlight all frames except for Frame 1. Right click and pick Remove frames from the drop down list.

Click on Frame 50 and press F6.

In Frame 50, drag your Bunny to the end of the line (Motion Guide). Press Enter to play your animation.

Intro to Macromedia Flash MX Page - 13

ITLS—http://itls.saisd.net/
 School Header
Copying the Photos

1. Open the Flash program 2. Click on File, Save As

3. Find the demo_school folder on the 4. Switch to MS Powerpoint. Open the

desktop of your computer. Save the school_photos file located in the
file as school_name in the graphics demp_school/graphics folder.
folder.

Intro to Macromedia Flash MX Page - 14

ITLS—http://itls.saisd.net/
 5. Right-click on the photo and choose 6. Switch to Flash, right-click on the stage
copy from the drop down menu. and choose paste from the drop down
menu.

7. Click once on the image. 8. Click Insert, Convert to Symbol

9. Choose the graphic behavior. 10. Type in the name of the image, click
OK.

Intro to Macromedia Flash MX Page - 15

ITLS—http://itls.saisd.net/
 Copying the Picture

11. Copy and covert all remaining images

from Powerpoint.

Removing the photos from the Flash Stage area

12. Click on Window, Library. Move the 13. Click on each image on the Stage
Library window. and press the Delete key.

14. Remove all images from the Stage.

Intro to Macromedia Flash MX Page - 16

ITLS—http://itls.saisd.net/
 Typing the School’s Name

15. Reduce the size of the Document. 16. Type in 200 px as the height. Click
Click on Modify, Document. OK.

17. Minimize the Library panel. 18. Click on the Text tool, click on the
Stage.

19. Type in the name of your school.

Change the font size, type, and color
by using the Properties panel.

Intro to Macromedia Flash MX Page - 17

ITLS—http://itls.saisd.net/
 Typing the School’s Name

20. Click on the Black Arrow tool. Click 21. Change the Stage color to grey by
on the school’s name. using the main Properties panel.

22. Convert the school’s name to a sym-

bol (graphic).

Intro to Macromedia Flash MX Page - 18

ITLS—http://itls.saisd.net/
 Creating a shadow effect

23. Click twice on the school name to 24. Change the color on the text in the
open the symbol. Properties panel.

25. Make a second copy of the text . 26. Move the second copy on top of the
Change its color to white. first.. Stagger the second copy to
create a shadow effect.

27. Exit out of editing the symbol. Re-

turn back to the main Stage.

Intro to Macromedia Flash MX Page - 19

ITLS—http://itls.saisd.net/
 Creating the tweens (Don’t forget to name and lock your layers)

28. Click twice to changed the name of 29. Click on Insert, Layer. Name this
Layer 1 to school name. Lock the layer Photo One.
layer.

30. Open your Library. Drag your first 31. If the Library conflict window opens,
graphic from the Library to the choose Replace existing items (not
Stage. undoable).

32. Click once on the image. Click on

the Free Transform tool. Resize the
image.

Intro to Macromedia Flash MX Page - 20

ITLS—http://itls.saisd.net/
 33. Drag the image off of the Stage and 34. Unlock the school name layer.
onto the work area.

35. Find Frame 170 on the school name layer. Click once, press F5. Lock the school
name layer.

Intro to Macromedia Flash MX Page - 21

ITLS—http://itls.saisd.net/
36. Find Frame 50 on the Photo one layer. Click once, press F6.

37. Use the playhead to go back to the beginning of the movie. Click on the image in Frame 1.
In the Properties panel, click on the drop down next to Color. Choose Alpha.
Change the Alpha to 20%.

Intro to Macromedia Flash MX Page - 22

ITLS—http://itls.saisd.net/
38. Use the playhead move to the last frame in the Photo one layer. Click on the image in
Frame 50. Move the image away from its original position.

39. Right-click in the area between the two keyframes in the Photo one layer. Choose
Create Motion Tween from the drop down menu. Lock this layer.

Press Ctrl-Enter to test your movie.

Intro to Macromedia Flash MX Page - 23

ITLS—http://itls.saisd.net/
 40. Insert a third layer. Name it Photo 41. Click on Frame 10 on the Photo two
two. layer. Press F6.

Complete this section by:

• Inserting all photos on different layers and create motion tweens.

Intro to Macromedia Flash MX Page - 24

ITLS—http://itls.saisd.net/
 Creating a Mask Layer

42. Lock all layers. 43. Insert another layer (it should appear
on the top)

44. Right-click on the new layer, choose 45. The layer underneath will automati-
Mask from the drop down list. cally nest under the mask layer.

46. Click and drag the other photo layers

underneath the mask layer..

Intro to Macromedia Flash MX Page - 25

ITLS—http://itls.saisd.net/
 47. Click twice and name the mask
layer, Mask layer. Unlock the mask
layer only.

48. Click on the Rectangle tool. Draw a rectangle on top of the stage area.

Intro to Macromedia Flash MX Page - 26

ITLS—http://itls.saisd.net/
 47. Right-click on the Mask layer, 49. Play the movie by clicking Shift-
choose Show Masking from the Enter.
drop down list.

Exporting the movie

50. Click on File, Export. 51. Change to the demo_school/

graphics folder.

52. Type in the name of the file, click

Save.

Intro to Macromedia Flash MX Page - 27

ITLS—http://itls.saisd.net/
 53. Change properties, if needed. Click 54. Minimize and open the
OK. demo_school/graphics folder. Click
twice on the school_name.swf file.

55. View the movie.

Intro to Macromedia Flash MX Page - 28

ITLS—http://itls.saisd.net/