- The Tools
- Creating Custom Colors and Gradients
- Tips for Creating Graphics in Flash
- Graphic Techniques
- Importing Bitmap Graphics
- Working with Bitmaps
This chapter is from the book
This chapter is from the book
This chapter is from the book
Tips for Creating Graphics in Flash
You may have noticed by now that using the drawing tools in Flash has several advantages and some disadvantages. Let's take a look at the behavior of the graphics we've created once we have them placed on the stage.
Drawing and Moving Primitive Items
Here are the steps to follow in this exercise:
In the Tools panel, choose the Rectangle tool. In the Options portion of the Tools panel, click the Round Rectangle Radius option.
In the Round Rectangle Radius pop-up box, type in a value of 5. This value will add just a small rounded effect on the corners.
In the Colors section of the Tools panel, choose a stroke color and a fill color.
Draw a rectangle somewhere on the stage.
After drawing the rectangle, choose the arrow tool and click the center of the square and drag the object to a new location.
-
Notice after you move the item that a stroke is left behind. To avoid this, you must double-click the item (you'll notice the fill and stroke are both selected) and then click it one more time to move it.
Flash's primitive objects will separate strokes from fills. This, of course, can cause all sorts of problems, but there is a bright side. Although this issue can be sometimes annoying, it does provide for the ultimate control of your primitive items. For example, use the Line tool to draw a star. If you try to trace an outline of a star, it may seem rather difficult. However, if you draw the star in the same way you'd draw it on paper without ever picking up the pencil, then you can remove the interior lines to make the perfect star as shown in Figure 3.29.
){kind=link}
Figure 3.29 This star was drawn using the Line tool, and the interior lines being selected with Arrow tool are to be deleted.
TIP
Refer to the QuickTime video located on this book's companion Web site for further explanation on how colors and strokes separate.
Flash has some additional issues we need to look at when it comes to creating graphics. Flash will also combine two items with the same fill color, or it will punch a hole in a underlying primitive object. See the next exercise for an example.
Placing Primitive Items on Top of One Another
Here are the steps to follow for this exercise:
In the Tools panel, choose the Oval tool. When choosing the Oval tool, be sure to specify a fill color and a stroke color.
-
Draw an oval somewhere on the stage.
-
In the Tools panel, select the Rectangle tool. Again, be sure to select a stroke color, but this time choose a different fill color.
-
Draw a rectangle and cover a portion of the oval.
-
Click away from both objects, somewhere in the white space of the stage.
-
Notice that the rectangle looks like it is on top. This is because it was drawn after the oval.
-
Click once on the rectangle and move to another location on the stage.
-
The oval, which was located underneath the rectangle, now as a square cut out of it.
This is normal behavior for Flash. It is of the utmost importance to keep this in mind when you're developing content in the Flash environment. Small accidents can cause huge problems, and thankfully Flash has a wonderful feature called Undo (type Cmd+Z or Ctrl+Z or choose Edit, Undo). These drawing styles are just as much setbacks as they are features. Although this may be a different way to build artwork, it is one that can open up more possibilities. One great feature is the ability to adjust lines. If you move your cursor over a line, you'll notice that you can grab and bend that line. If your mouse cursor shows a small picture of a right angle, you can adjust the placement of that angle by clicking the angle and dragging it around.
Just keep in mind how line and fill colors can separate while changing their position.
You can avoid these problems by grouping your artwork. This may seem somewhat bizarre at first, because ultimately you are grouping an object with itself. The advantage of this is that the object is no longer a primitive and the selection style changes. Take a look at Figure 3.30 to see the differences between a grouped object and a primitive object.
){kind=link}
TIP
Refer to this book's companion Web site for further explanation on how colors and strokes separate.
Figure 3.30 On the left is a primitive item, and on the right is a grouped one.
Notice that the grouped object has a blue bounding box as opposed to the primitive object's speckled pattern. Without the speckles, items cannot merge or punch holes in one another.
Grouping an Item
Here are the steps to follow to group an item:
Choose the Rectangle tool with a stroke color and a fill color.
Draw a rectangle somewhere on the stage.
After drawing the object, choose the Arrow tool and double-click it. By double-clicking you are selecting not only the fill but also the stroke.
Choose Modify, Group. This will group the object. Notice the different selection style with the bounding box.
Choose the Oval tool with a different fill and stroke color.
Draw an oval or circle on top of the grouped rectangle. You'll notice that the item you've just drawn automatically appears behind the grouped rectangle.
Move the grouped rectangle away from the circle. Notice that the rectangle does not punch a hole in the oval.
Changing the Stacking Order Between Grouped Objects
Here are the steps to follow to change the stacking order between grouped objects:
Still working with the last file and with Arrow tool selected, double-click the oval to select the stroke and the fill.
Choose Modify, Group.
Move the oval on top of the grouped rectangle.
Notice that the rectangle is now underneath the oval. This is because the oval was the last grouped object; therefore, it appears in front of any items grouped previously. In Flash, you have two different ways to change the stacking order of grouped objects: either arrange them on separate layers or change their stacking order within the one layer.
Changing the Stacking Order of Grouped Objects on One Layer
Here are the steps to follow to change the stacking order of grouped objects in one layer:
With the oval and rectangle grouped items already on the stage from the previous exercises, draw a new shape. Choose a different fill and stroke color for this shape.
Choose the Arrow tool and select the new shape by double-clicking it. After the item is selected, choose Modify, Group. Notice now that the new shape is on top.
With the new shape selected, choose Modify, Arrange, Send to Back. The new shape now appears below the other two grouped items.
Here are the options in the Modify, Arrange menu (note that you must have a grouped object selected to get these options):
Bring to Front. This option moves the selected item in front of all other items.
Bring Forward. This option moves the selected item in front of the item it is currently underneath. In other words, it brings the item forward one step.
Send Backward. This option moves the selected item behind the item it is currently in front of. In other words, it sends the item backward one step.
Send to Back. This option moves the selected item behind all other items.
You can also change the stacking order of items using layers. Each time you create a new graphic, place it on a new layer. You can create a new layer by clicking the Add Layer button in the Layers panels, as shown in Figure 3.31.
){kind=link}
Figure 3.31 The Add Layer button.
To change the stacking order of a layer, simply click and drag it either above or below the desired location of the other layers. For additional information on the Layers panel, refer to Chapter 4, "Flash Animation."