Flash tutorial: Using the Primitive tools (Smart Shapes) in Flash
What you’ll learn in this Flash Tutorial:
This tutorial provides you with a foundation for working with the Adobe Flash primitive tools. It is the first lesson in the Adobe Flash Digital Classroom book. For more Adobe Flash training options, visit AGI’s Flash Training Classes.
Adobe Flash Tutorial: Using the Primitive tools (Smart Shapes) in Flash
The Rectangle and Oval Primitive tools provide you with an easy and time-saving way to create common variations on these basic shapes. From rounded or scalloped rectangles, to double-radius ovals, these smart shapes are especially powerful, because you can continue to modify them long after they’ve been created.
Using the Oval Primitive tool
Your new fish needs an eye, and the best tool for the job is the Oval Primitive tool, which allows you to create complex variations on ovals and circles.
1 Select the Oval Primitive tool () from the Tools panel. This tool can be found underneath the Oval tool. From the Tools panel, choose black (#000000) for your fill color, and set the stroke to None ().
2 Choose View > Snapping, and select Snap to Objects to temporarily disable object snapping. While holding your Shift key (to constrain width and height), click and drag to draw a small circle on the Stage. Switch to your Selection tool ( ), and position the circle above the spot where the eye should appear on your fish (a hole should appear there from the last exercise).
Use the W and H values on the Property Inspector to set the new circle’s size to 45 by 45.
3 In the Property Inspector, locate the three sliders at the bottom marked Start Angle, End Angle, and Inner Radius. Click and drag the Inner Radius slider toward the right, and you’ll see that it forms a knockout in the center of the circle. Set the Inner Radius to suit your artwork (the figure and sample file use a value of around 49).
You can also enter a precise value in the text field to the right of the slider.
Use the Inner Radius slider to punch a center into an oval primitive.
4 Locate the Start Angle and End Angle sliders in the Property Inspector. Click and drag the Start Angle slider until its value reads somewhere between 40 and 45. You’ll notice that as you increase the angle, the circle forms a C shape—this slider tells the circle to begin its circumference (shape) at a different angle, resulting in a partial shape!
5 You’ll now perform the same action for the End Angle. Grab the End Angle slider and drag it to the right until the value reads about 330. The circle now ends at a different location as well. As you can see, this can be very powerful in any situation where you need to create wedges or partial circle shapes without the need for complex punch or knockout commands.
Use the sliders to affect your smart shape at any point. You can even deselect and return to the shape later on to edit its settings.
6 Choose View > Snapping > Snap to Objects to re-enable object snapping.
Oval Primitive shapes
For each oval primitive shape drawn, you’ll see a discrete handle (it looks like an anchor point) on its right side. As an alternative to the Start and End Angle sliders, you can click and drag this handle in a clockwise or counter-clockwise motion to manually alter the start or end angle of the shape.
The Rectangle Primitive tool
The close cousin of the Oval Primitive tool is the Rectangle Primitive tool, which gives you control over corner radii on rectangles and squares. Like the Oval Primitive tool, you can easily set values for a new primitive shape, and return to edit it at any time.
It’s time to give your fish a way to speak its mind, so you’ll create a basic word balloon using the power of the Rectangle Primitive tool.
1 Choose the Rectangle Primitive tool () located under the Rectangle tool on the Tools panel. From the Tools panel or the Property Inspector, set a fill color of white (#FFFFFF) and a stroke color of black (#000000).
2 Click and drag to draw a rectangle to the upper left of your fish. It’s okay if it goes off the Stage into the pasteboard. If you’d like to match the sample file, in the Property Inspector make sure the Lock width and height button () is disabled and set the rectangle’s size to 200 pixels wide by 130 pixels high.
3 In the Property Inspector, locate the Rectangle Options section; you’ll see four text fields and a slider. Here is where you set the corner radius for all or each of your rectangle’s corners. By default, the four corners are locked together and use the same value.
Click and drag the slider to the right until the corner values read about 40—you see the corners of the rectangle begin to round out.
Add a corner radius to the rectangle primitive using the slider in the Property Inspector.
To give each corner a unique value, click the chain link icon ( ) to the left of the slider to unlock the four corners. You can then type in a different value for each corner in its respective text field.
4 Next, you’ll modify the corner radius using a slightly different technique. Instead of using the slider in the Property Inspector, you can grab the points adjacent to any corner and drag them to reshape the corner radius.
5 Switch to the Selection tool (), then click and drag the point in the upper-left corner of your rectangle to the left and right. As you can see, this modifies the corners of your rectangle—move slightly to the right to reduce the corner radius.
Using the Selection tool can be a more tactile way to modify corners.
6 Choose File > Save to save your work.
You’ll now add the stem to make this a true word balloon—however, you may have noticed that primitive shapes behave unlike any other shape you’ve used so far. While they appear to look and function much like Drawing Objects, they actually can’t be modified in the way that Drawing Objects can.
Neither the Selection nor Subselection tool will allow you to modify them in the way you’ve been able to do with Drawing Objects and mergeable artwork. To accomplish this, you need to break the shape down to artwork that you can manipulate freely. Keep in mind, however, that doing this is a one-way street: You can’t convert a shape or Drawing Object back into a primitive shape once it’s been broken apart.
7 If it’s not already active, switch to the Selection tool () and click once to select the rectangle primitive.
8 You’ll now break this out of a primitive down to artwork you can manipulate further. Choose Modify > Break Apart, and the shape now appears with the dotted pattern that indicates it is now a mergeable shape. Keep in mind that you cannot go back.
Use Modify > Break Apart to convert the primitive shape to a mergeable shape.
Choose the Subselection tool () from the Tools panel and click once on the edge of the shape to reveal its points and paths.
9 Switch to the Add Anchor Point tool (). In the lower-right corner of the rectangle, click to create two new consecutive anchor points before the corner.
10 Switch to the Subselection tool, again, then click on the second point (the one closest to the corner) and drag it down and to the right to form the stem of your word balloon.
Form a stem by pulling out the second of the two new points you created.
11 With the shape still selected, choose Modify > Combine Objects > Union to convert the shape to a Drawing Object, which you can easily move and stack later on.
12 Choose File > Save to save your work.
Continue to the next Flash Tutorial: Adding text to your artwork in Flash >