CCT200 Intercultural Communication Tutorial #1: Shape Tweening and Flash Interface
Overview of Drawing Tools
Professor G. Benick and Professor E. Littlejohn
Flash Software Overview
Flash is vector-based, which means it depends on information about line-based geometry rather than
pixels, and produces small file sizes. Adobe Photoshop is raster-based as it is based on pixels, and the file
sizes are much larger as information for each pixel is embedded in the final file.
Flash has its own set of very unique rules. As Flash is vector-based, you draw objects, which can also
become symbols to become part of a library. Also, by single clicking on a shape, you select the fill, and by
double clicking on the shape, you select the fill and outline.
Techniques used: Using shape tweening, setting a background colour and stage properties, creating a
circle, creating an angled line, modifying outlines, selecting, grouping and duplicating segments,
modifying>flip horizontal, creating a graphic symbol for the library.
Tutorial Instructions: For the first part of our first tutorial, we are going to change a circle into a
polygon. For the second part, we are going to learn how to create a basic spider using the circle tool and
pencil, duplicate, modify and group. Choose a partner next to you so that you can help each other
with questions about the tools.
This is the overview of the toolbar in
Flash.
Tools
The tools in the toolbox let you draw, paint,
select, and modify artwork, as well as
change the view of the Stage.
The toolbox is divided into four sections:




The Tools section contains drawing,
painting, and selection tools.
The View section contains tools for
zooming and panning in the
application window.
The Colors section contains
modifiers for stroke and fill colors.
The Options section displays
modifiers for the selected tool
Line Tool, Oval Tool, Rectangle Tool
You can use the Line, Oval, and Rectangle tools to easily create these basic geometric shapes. The Oval
CCT200 Intercultural Communication Tutorial #1: Flash Interface Overview of Drawing Tools
Professor G. Benick and Professor E. Littlejohn
1
and Rectangle tools create stroked and filled shapes. The Rectangle tool lets you create rectangles with
square or rounded corners.
Part 1: Tutorial Instructions to change a ball to a polygon in Flash using keyframes and Shape
Tweening:
Macrokeys to know:
Blank Keyframe F7
Keyframe
F6
Frame
F5
Clear Keyframe Shift + F6
Remove Frames Shift + F5
1.
2.
3.
4.
5.
6.
Open Flash. Choose > Create a new Flash document.
Place your Playhead (the red box) with its line centered on the first frame of the timeline.
Menu> Timeline>Insert frame (F5).
Draw a circle on the stage.
Move your playhead to frame 20.
Delete the circle on your stage by selecting with the selection arrow > backspace. The frame will
become transparent as there is no longer any content.
7. Go to Insert>Timeline> Insert keyframe (F6). This is enabling you to add new content.
8. Using the drawing tool hidden under the square, choose the polygon.
9. Draw a polygon on the stage.
10. Place your playhead on frame 10.
11. In the properties of your stage, you will note that under Tween, there is a menu which allows to
choose None, Motion or Shape. In this case, we will choose Shape, as we would like the ball to
change from a circle to a polygon over 20 frames. Properties> Shape> Tween. Ensure that you
select this shape tweening command from your properties menu. You will notice that the
frames in your timeline change to a light green with an arrow.
12. To ensure you understand this tutorial, do a second version of it, but use motion tweening and
change the position of the ball. Important: To add the motion tween command for moving
the ball, go to Menu> Insert Timeline> Create Motion Tween. The motion tween
command cannot be added through the bottom Properties menu- this is a usability
error on the part of Flash.
Part 2: Tutorial Instructions to create a Spider in Flash:
1.
2.
3.
Open Flash. Choose > Create a new Flash document.
The stage will open, and you will set the page properties to 640x480 pixels, with a framerate of
12 frames per second.
Select the background colour to something you like by clicking on it, and selecting a colour in the
palette. You will note that the palette that appears is a web based palette, as the hexadecimal
code appears beside each swatch as you select it with an eyedropper.
CCT200 Intercultural Communication Tutorial #1: Flash Interface Overview of Drawing Tools
Professor G. Benick and Professor E. Littlejohn
2
4.
To draw a straight line, oval, or rectangle, select the Line, Oval, or Rectangle tool from the
toolbar.
5. Select Window > Properties and select stroke and fill attributes in the Property inspector.
Note: You cannot set fill attributes for the Line tool.
6. For the Rectangle tool, specify rounded corners by clicking the Round Rectangle modifier at the
bottom of the toolbar and entering a corner radius value. A value of zero creates square corners.
7. Place your cursor on the stage. It will appear as a cross, and drag on the Stage to create the
shape. If you are using the Rectangle tool, press the Up and Down Arrow keys while dragging to
adjust the radius of rounded corners.
8. You will note that if you double click on your shape with the arrow tool, you will see
the properties for the fill and the shape. You will also note that you are selecting both
the fill and the outline.
9. If you single click on the shape, you will only select the fill.
10. Note that you can change the width of the outline and its character by accessing the line
properties. Have some fun, and create a happy face or basic spider by using the various tools
from the toolbar.
11. For the Oval and Rectangle tools, Shift-drag to constrain the shapes to circles and squares.
12. If you want to create one leg, use the Line tool, and Shift-drag to constrain lines to multiples of
45°. Then shift-click on the leg to select each part of it with the Selection tool.
13. You will then be able to duplicate the legs by copying and pasting them four times.
14. Select all parts of the legs carefully by using the Selection tool and shift simultaneously, and
choose Modify>Group.
15. Copy the leg four times by choosing Edit>Duplicate, move them into position and go to
Modify>Flip Horizontal, and paste them on the other side of the body.
16. Select All (Control+A) on your stage, and Control+G to Group all your shapes.
17. Go to Insert> Convert to Symbol and choose Graphic.
CCT200 Intercultural Communication Tutorial #1: Flash Interface Overview of Drawing Tools
Professor G. Benick and Professor E. Littlejohn
3
18. The Macrokey for this is F8. Name your symbol Spider.
19. Open F11, or Window>Library and you will see that in your library is your new graphic symbol
called Spider. This graphic can now be used again and again by placing it from your library on to
your stage.
20. Go to File> Save as> yourlastname_spider.fla
CCT200 Intercultural Communication Tutorial #1: Flash Interface Overview of Drawing Tools
Professor G. Benick and Professor E. Littlejohn
4