Adding Strokes | Macromedia Flash 8: Training from the Source

Strokes are the outlines around objects or lines all by themselves. Flash 8 has several built-in options for stroke styles, with a limited way of customizing a style, and has some options to control joins and capping. Strokes can be added to a shape with the Ink Bottle tool or drawn with any of the line drawing tools.

Stroke height controls the thickness of the line on the Stage. Set it by clicking the triangle next to the Stroke Height field and using the slider bar to adjust, or enter a value from 0.1 to 200. Stroke height is measured in points.

The Stroke Style menu holds the generic styles that come with Flash 8. Click the menu to see the styles you can apply. One of the options is hairline, which always stays the same size, no matter how much you zoom into the Stage. A regular stroke appears larger when you zoom into the Stage, and is what you have been using so far. You can customize the styles further by pressing the Custom button, which presents limited options to altering the stroke style.

Tip

Limit your use of custom stroke styles in your FLA file. The custom styles add more file size to your SWF file. Likewise, the styles other than hairline or normal can increase file size.

The Cap button is used to determine the appearance of the end of the stroke, and can be none, round, or square. None is flush with the path's end, whereas square extends beyond the end of the stroke by half of the stroke's width. Finally, round just rounds out the stroke's end.

The Join option controls how two strokes meet, and can be miter, round, or bevel. Join types can be changed after strokes are drawn together by selecting the stroke segments and changing the values.

Stroke hinting is used to adjust line and curve anchors on full pixels automatically, which prevents horizontal or vertical lines from being blurry when drawn. This works, of course, only if the option is selected.

Finally, when you have the Pencil tool selected and it is set to draw in Smooth mode in the options area of the Tools panel, a Smoothing slider will appear to control how smooth the resulting stroke is.

Insert a new layer and create another rectangle.

Select the background layer and insert a new layer. Rename the layer outline and make sure that the background layer is locked.

Select the Rectangle tool in the Tools panel. Set the stroke color to #000000 (black), set the fill color to No Color, and make sure that the stroke height is set to the default value of 1. In the Cap box, ensure that the cap is set to None. Finally, in the options area of the Tools panel, press the Rounded Corners button and make sure that the value is set to 0. Draw a small rectangle anywhere on the Stage.

Tip

If you don't see the changeable options on the Property inspector when you select the Rectangle tool, switch to the Selection tool, click once on the background, and go back to the Rectangle tool.

Resize and position the rectangle.

With the rectangle selected, enter the following values into the Property inspector: W of 770, H of 519. These values ensure that the rectangle is visible all around the edge of the Stage. If you create it the same size as the Stage, some of the rectangle will be cut off after you publish the SWF file. Next, set x and y to 0, 0 respectively. That place matches the graphic's upper-left corner with the upper-left corner of the Stage.

Note

Although the right side and bottom of the SWF file might appear to have a double line and be a little rough, the line appears uniform around the edge of the SWF file when you publish the file and view it in a browser. If you set the rectangle to full size, you do not see your outline at the bottom or right of the Stage.

Change the rectangle into a symbol and lock the layer.

The rectangle should still be select on the Stage. Select Modify > Convert to Symbol and name the graphic grOutline. Select the Graphic radio button to make it a graphic symbol. Click OK, and when you are finished, lock the outline layer.