- Flash Player - Necessary to view .swf file in browser; pre installed in
current web browsers and is a free download
- Flash projector - an .exe file which does not require a browser or Flash
player to view; typically distributed via CD-Rom or disk; file size larger
than .swf file because it contains a Flash player. Not a good format for the
web because of the larger file size and hence download time
- Flash interface - Tools, Timeline, Panels, Work Area, Stage, property inspector
panel; within the timeline, there is the playhead which shows which timeline
frame is currently being displayed in the stage; the status bar shows the
number of the current frame, the number of frames per second
- Layers - if a layer is above another in the list of layers, the contents
of that layer will be in front of the contents of the other layer on the stage;
show/hide -- if you hide a layer, it has no effect on the published movie
unlike some graphics programs where hiding a layer will prevent it showing
up in the exported file format
Flash Drawing Tools
- Exercise 1 - Drawing with the Pencil Tool - Click on the pencil tool and
draw a semicircle -- Notice in the options area at the bottom of the tool box that
there are 3 options for the Pencil tool. Use the Text tool to write the current setting next to your drawing, then change to another setting and redraw the semicircle and use the Text tool to label that one, and then switch to the third option and draw and label that one.- (1) Straighten mode tries to guess
what you are trying to create and it uses that; (2) Smooth changes what
you draw to a lesser extent, and (3) Ink changes it very little. The biggest change is between Straighten on the one hand and the other two settings.
- Ctrl A will select everything on the stage and then you can hit the delete
key to delete everything
- Exercise 1a - Setting Stroke attributes
- Stroke weight (thickness)
- Stroke style (Hairline, Solid, Dashed, Dotted, Ragged, Stippled, and Hatched)
- Cap - sets the way a solid or hairline stroke ends - none (ends it where you end it), round (extends by one half the current stroke height, creating a rounded end), or square (also extends by one half the current stroke height, creating a square end)
- Exercise 2 - Using the Line Tool and Modifying Strokes - Click on the Line Tool and draw a line. Draw other lines to form a closed shape.
Exercise 3 - Using the Oval, Rectangle, and Polystar Tools - creates strokes and/or fills
that are independent of each other
- Select the Selection Tool and then click on a line. The line gets thicker
and a dotted pattern appear over it, indicating it has been selected.
- If Property Inspector isn't visible, choose Window>Properties to make
it visible. Stroke Style drop-down menu to change the line, and then deselect
the line to see the changes. Alternatively, Ctrl H hides the selection so
you can see the effect of the change. Stroke Height slider and Stroke Color
box. Custom in Property Inspector allows one to create your own line style.
- Using the Selection tool, move the cursor over a line in the closed shape. As you move over the line, a small curved line appears -- this indicates
you are over a line, not a fill
- Click on a line segment - notice that only this line segment is selected;
if you double click on any line segment, all the connected line segments are selected.
- Select Ink Bottle tool (in previous versions of Flash, this was underneath the Paint Bucket tool but in CC 2015 it is adjacent to the Paint Bucket tool) - Before we selected a stroke using the Selection Tool and then modified it in the Property Inspector. Alternatively, you can set the stroke properties, then click on the Ink Bottle tool and then on the stroke to modify the stroke. In the toolbox, click
the stroke color icon and select a color from the palette. To delete the stroke, click on the Selection tool, then click
the stroke to select it and hit delete.
- Select the Oval Tool. Press and hold the Shift key while dragging --
this constrains to a circle - the circle is created using the current stroke color and the inside of the circle with the current fill color. You can set either of these to No Color - the white box with a diagonal line through it at the top of the color panel
- To create a pie-wedge shape, enter a number between 0 and 360 in the Start Angle and/or End Angle field.
- Setting the inner radius greater than 0 creates an oval with a hollow center - the number entered is the percentage of the outer oval that gets removed.
- Deselecting the Close Path checkbox allows one to draw an arc. If one does this with an inner radius setting greater than 0, one gets two arcs.
- Select the Rectangle Tool. Press and hold the shift key while dragging
- this constrains to a square. In the Property Inspector, you can set the Rectangle corner radius. To set a corner independently of the other corners, click the lock symbol.
- Select the Polystar Tool - Click on the options button in the Properties panel to choose between a polygon and a star, the number of sides, and the star point size
Exercise 4 - Using the Brush Tool to create shapes
Exercise 5 - Modifying Strokes and Fills
- Select the Brush tool and draw a circle. It uses the fill color for
this shape, not the stroke color. The shape created is a fill, and does not have a stroke (unlike the oval and rectangle tools, which create both at the same time.
- In the Options area of the toolbox, change the Brush Size and Brush
- You can use the Ink Bottle to add strokes to the fills you created with
Exercise 6 - Stroke and Fill as Separate Objects
- To use the Property Inspector to change the color of a fill - e.g. use
the Selection tool to select the fill and in the Property Inspector, change
the fill color
- To use the Paint Bucket to change the color of a fill - just select
the Paint Bucket and click on the fill
- Zoom feature - Ctrl + , Ctrl =, or Z
click to zoom in, Ctrl - minus to zoom out, or click on Zoom Tool (the magnifying glass with plus sign) and then click the area of the stage you
want to enlarge. To zoom out, click on Zoom Tool (the magnifying glass with the minus sign) and then click on the area of the state where you want to zoom out.
- Undo feature - Ctrl + z (or Edit>Undo)
- To select multiple objects - Hold down the shift key while clicking
- To clear all selections - Hit the escape key
Exercise 7 - Interaction among Objects(Merge Drawing Model)
- Set the fill and stroke colors to different colors and not white - draw
an oval and then use the Selection tool to click on the fill and move it -
Flash treats the stroke and fill as separate objects.
- Move the cursor over the stroke -- a small curved line appears at the
end of the cursor - this means that you will select the line, rather than
the fill, if you click. Again select and move the line (the fill stays
in the same place)
- To select both, double click
Four ways ways to prevent this interaction:
- Fills intersecting - if same color, joined; if different color, leaves
hole when one is moved
- Intersecting lines - split into segments, regardless of color
- Line intersecting a fill -- the line splits the fill, regardless of the color
Exercise 8 - Creating Gradients - Flash lets you create two types of gradient
fills: linear and radial.
- Object Drawing Model - click the icon at the bottom of the toolbar - in you draw something in the Object Drawing Model, you will see a bounding rectangle surrouding the object
- Use primitive shapes created by the Rectangle Primitive Tool or the Oval Primitive Tool (these are created behind the scenes using the Object Drawing Model but are less editable than objects created with the Object Drawing Model - note that for these, the stroke and fill are not separate objects)
- Grouping Objects (Modify>Group) - If you create group object, they will interact with each other as specified in the Merge Drawing Model, but other objects on the stage won't interact with them.
- Layers - Objects in different layers won't interact with each other as in the Merge Drawing Model
- Using the Selection tool, click on a fill.
- Make sure the Color Panel is open; if not, choose Window>Color to open it. Click the down arrow to choose Linear gradient in the Fill Style
drop down menu.
- Double click on the black pointer in the Color Mixer panel - this opens a dialog box and by selecting a color, this color
will be used as an endpoint for the gradient.
By double clicking the pointer at the other end, you can select a color as the other endpoint for the gradient.
You can click in between to add additional colors to the gradient.
- Select the Gradient Transform Tool (underneath the Free Transform Tool) from the toolbar - see how the various edit handles (center point, width handle, and rotation handle) affect the gradient.
- Using the Selection tool, click on another fill. Now select Radial graident in the
Fill Style drop down menu and then the Gradient Transform Tool from the toolbar - see how the various edit handles (center point, focus point,width handle, radius handle, and rotation handle) affect the gradient.
- Click on the just below the top right corner of the Color Panel and select Add Swatch.
This adds this gradient to the Swatches panel. If it isn't open,
choose Window>Swatches to open the panel and the new gradient
should be at the bottom on the right.
It will also be at the bottom of the color palette that opens when one clicks the fill color in the toolbar or in the Property Inspector and can be selected just like any color in the palette.
Revised: April 6, 2016, Comments to William Pegram, firstname.lastname@example.org