Edit Grouped Objects

If you try to click a grouped object to change the color of the individual shapes inside of it, it
won’t work. A group has to be in an editable state before you can change its color.
Your grouped object is like a department store that contains various levels. Nested groups contain even more levels than a single group. One of these levels is known as the root level, which includes the main timeline. Another is the level for the editing mode for the current group.
You can get to the various levels by “taking the elevator” to the correct level. Your grouped object doesn’t have the convenience of an elevator, of course, but you can travel from level to level to edit your object with a click of your mouse in the right place.
You can enter the editing mode for a single grouped object in one of two ways:
■ Double-click the object.
■ Select the object and choose Edit | Edit Selected from the menu.
You are now at the group editing mode level. The stage looks a little different in this mode. The status bar above the timeline indicates the mode you are in with a graphic icon and the name “Group” to the right of the Scene icon, as shown in this illustration. For nested objects, the status bar also indicates the position of the level you are on within the hierarchy of the group. In the illustration, the Group icon is one below Scene 1 as indicated in its descending order to the right of Scene 1.

When your graphic is in editing mode, you can apply additional modifications such as changing the shape of the editable object. When you’re done editing, you can exit editing mode in one of four ways:

■ Click the scene name in the status bar to return to the root (main) level.
■ Click the left (back) arrow at the top of the window (next to the status bar) to return one level at a time back to the root (main) level.
■ Select Edit | Edit All from the menu. This returns the object to its grouped state.
■ Double-click the editing stage.

Once you return to the root level, you can see that the object is again grouped and the changes you made in editing mode have been applied.

Edit Nested Groups

You can also edit groups nested within one another using the method just discussed. When you enter the editing mode of a nested group, you must continue to double-click the object to navigate to groups nested deeply.

The hierarchy of your nesting is indicated in the status bar. Each time a level within the group is uncovered, another Group icon appears next to the previous one, as shown in figure below. In this figure, the group being edited is nested three levels from the main, or root, level (Scene 1). Note also that as you navigate through the levels, the graphics on the stage become dimmed, except for the graphics on the current level.

To navigate back to another group within the nest, click the arrow in the status bar or click the group level you want to navigate to. To return to the main (root) level, click the Scene 1 icon to the left of the status bar.

You can ungroup a nested group by applying the Ungroup command (Modify | Ungroup, or ctrl-shift-g in Windows/cmd-shift-g on the Mac) to each group in the level hierarchy.

Break Apart Graphics and Text

Breaking objects apart separates the objects into editable objects or merged drawing objects. For example, if you wanted to modify the color of a merged drawing object in a grouped graphic, you could break it apart to do so. So, in this sense, the Break Apart command would be used in the same way you would use the Ungroup command, which would also break the grouped object down into an editable graphic. The Break Apart command works with merged and object drawings, movie clips, buttons, graphic symbols, and even imported bitmaps.

Because you can ungroup graphics easily to make them editable, the Break Apart command is generally used only for text and bitmaps. You can break apart text and objects by clicking the object and selecting Modify | Break Apart or ctrl-b in Windows/cmd-b on the Mac. In this illustration, the Break Apart command is being selected from the Modify menu.

With text and with nested grouped objects, you’ll need to select the Break Apart command as many times as it takes to make the entire object editable. For example, if an object is nested in a group, the first time you use the Break Apart command, it ungroups the object from the nest; the next time you use the Break Apart command, it breaks it apart.

As mentioned previously, imported bitmap pictures can be broken apart, too. Flash provides some fun tools to manipulate a broken-apart bitmap. These will be covered in Chapter 6, where importing bitmaps is discussed in detail.

Change the Stacking Order of Objects

As mentioned earlier, drawing objects, grouped objects, and symbols can be selected individually and stacked on top of one another on a single layer, just as in all drawing/vector-based programs. If drawing objects, grouped objects, and symbols (movie clips, buttons, or graphic symbols, which are discussed in Chapters 8 and 13) are capable of having a stacking order, the nextquestion is, Which object gets the top position? The answer is actually quite logical. The stacking order is determined by the last element that was created on the Flash stage. The first element created takes the position behind subsequent elements. If you were to create a grouped rectangle as an element on the stage, then create another drawing object, grouped object, or symbol on the stage and position the second element on top of the first, the first element would be hidden by the second element. This is the natural stacking order of grouped elements in Flash. Figure below shows two drawing objects, stacked one of top of the other and vice versa.

You can easily change the stacking order of drawing objects, grouped objects, or symbols in a single-layer Flash document. To change the stacking order of one object in relation to another, select one of the objects. In the menu, select Modify | Arrange | Send to Back or press ctrlshift- down arrow (Windows)/cmd-shift-down arrow (Mac). This brings a graphic element all the way to the back in the stacking order on the layer.

Selecting Modify | Arrange | Bring to Front or pressing ctrl-shift-up arrow (Windows)/ option-shift-up arrow (Mac) places the selected graphic element at the top of the stacking order, as shown here.

When you draw a merged drawing shape without grouping it and it overlaps an object drawing, symbol, or grouped object, the merged drawing shape will always assume the bottom place on the stacking level until it is made into a symbol or grouped.

To move the stacking position of your object drawing, symbol, or grouped object up or down one level, instead of all the way to the back or all the way to the front, select Modify | Arrange | Bring Forward (ctrl-up arrow in Windows/cmd-up arrow on the Mac) or select Modify |

A single-layer drawing with drawing objects stacked on top of one another

Arrange | Send Backward (ctrl-down arrow in Windows/cmd-down arrow on the Mac). This works well if a single-layer design requires multiple stacking, as is often the case with designs of medium to difficult complexity.

When an experienced Flash designer tackles a complex movie with a lot of graphic elements, he or she will often create all the ancillary parts of the drawing as symbols (movie clips, buttons, and graphic symbols). This makes all the pieces more modular and easy to organize. Symbols, like groups, stack easily and are simple to edit. Chapters 8 and 13 cover symbols in more detail.

Transform Graphics and Text

There are many ways to transform graphics in Flash. You can scale and rotate them to change their size and angle. You also can skew a graphic if you want to distort its perspective, or flip it for a mirror effect. For the most part, text can be transformed in the same way that graphics can.
Both merged and drawing objects can be transformed as well as grouped graphics and symbols. There are three different ways you can perform basic transformations in Flash. You can use the menu, the Transform panel, or the Free Transform tool in the Toolbar. The Free Transform tool is a very intuitive tool, as you will see next.

Change Objects with the Free Transform Tool

The Free Transform tool, shown at right, is located in the Toolbar, directly under the Pencil tool. This tool enables you to scale, rotate, and skew objects. First, we’ll take a look at how to scale with this tool.

Use the Free Transform Tool to Scale an Object

The Scale command is used to reduce or increase the size of an object. To scale an object, do the
following:

1. Click the Free Transform tool in the Toolbar, then select the object to be scaled. Eight transform handles surround the object.

2. The Options section of the Toolbar offers modifi ers for the Free Transform tool. Click the Scale icon, as shown here.

3. To scale the width and the height of the object, position your pointer over one of the handles in the four corners of the bounding box. The pointer turns into a diagonal double-headed arrow. This is the Scale icon.

4. Click and drag inward to reduce the width and height. Drag outward to increase the width and height of the object. A preview outline appears around the object to help you determine the size, as shown here.

5. When you are done, click off the object or select another tool. To constrain the width and height of the object in proportion to one another, hold down shift while dragging the handle.

To scale only the width of an object with the Free Transform tool, repeat the previous steps but position your pointer over the middle-left or the middle-right handle. Note that the handle will turn into a horizontal double-headed arrow. Click and drag the handle to the desired width, as shown here.

Transform Without the Aid of Modifiers

You can also scale an object with the Free Transform tool without selecting the Scale modifier in the Options section of the Toolbar. In fact, you can scale, rotate, and skew by positioning your pointer either on, or in the vicinity of, a transform handle. To transform an object without choosing any of the modifiers, click the Free Transform tool and then select the object. Position your pointer on any of the handles. When the proper pointer icon for a particular modifier appears (double-headed arrows for scaling, a circular arrow for rotation, and double-headed half arrowheads for skewing), click and drag accordingly. You already know all about the scaling tool. In the next two sections that follow, you’ll learn about how to rotate and skew an object.

For beginners, it’s easier to select the modifier associated with the transformation you want to perform in the Options section prior to applying the transformation. When you select a modifier, only that transform tool will be available when you click and drag the handle. For example, if you choose the Scale modifier, the Free Transform tool will only scale. If you’re not familiar with the pointer icons associated with a particular transformation, it’s easier to select a modifier first.

To scale only the height of an object with the Free Transform tool, repeat the previous steps, but position your pointer over the middle-top or middle-bottom handle on the object. The handle will turn into a vertical double-headed arrow. Click and drag the handle up or down to increase or decrease the height of the object.

To remove any transformation, select Modify | Transform | Remove Transform or press CTRL-SHIFT-Z (Windows)/SHIFT-CMD-Z (Mac).

Rotate with the Free Transform Tool

You can also rotate with the Free Transform tool. To do so, follow these steps:

1. Click the Free Transform tool and then select the object to be rotated.

2. In the Options section of the Toolbar, click the Rotate And Skew modifi er icon.

3. Position the pointer on one of the four corner handles on the object. An elliptical arrow icon appears, as shown here.

4. Click and drag the icon to rotate the object. When you are done, click off the object or select another tool.

To constrain the rotation of an object to 45-degree increments, hold down shift while dragging one of the corner handles.

If you are a menu lover, you can also access the Free Transform tools from the menu under Modify | Transform. In the top section of the menu, you can select Free Transform, Distort, Envelope, Scale, and Rotate And Skew. Selecting any one of these options will activate the Free Transform tool and the modifier associated with it.

Skew with the Free Transform Tool

When you skew an object, it becomes slanted along a single axis. Skewing can give a 3-D look to a 2-D object, as shown here.

To skew a grouped or editable object with the Free Transform tool:

1. Select the Free Transform tool in the Toolbar and then click the object.

2. In the Options section of the Toolbar, click the Rotate And Skew tool.

3. Position your pointer over any of the middle handles surrounding the object. The pointer turns into a double line with arrowheads on opposite sides. If you choose a bottom- or top-middle handle, the double line is horizontal, indicating that dragging this line will skew the object horizontally. If you choose a left- or right-middle handle, the object will skew vertically, as shown here.

4. Click and drag the selected handle to perform the skew. When you are done, click off the object or select another tool.

Create a Drop Shadow Effect with Depth

You can use the skew modifier to create many interesting effects that are limited only by your imagination. In this mini-exercise, you’ll learn how to give a word a “quasi-3-D” drop shadow effect using the skew modifier. First, you need to create a word. Here are the steps you can take to create such an effect:

1. Select the Text tool and in the Properties Inspector, select the Arial Black font, with a size of 60 points and a color of black. Arial Black is a good font for type effects, since it is thick and bold and is devoid of serif flourishes.

2. Type a short word on the stage. This word will become the drop shadow for the duplicate word.
3. Click the Selection tool and then click the word. Now you’ll duplicate the word. The duplicate becomes the main word, and the original will be the drop shadow. To duplicate, press and hold ctrl (Windows)/opt (Mac) and then click the word and
drag it to the right of the first word, as shown here.

The duplicate word assumes the top stacking order when these words are put on top of one another. Next, you’ll change the color of the first (drop shadow) word so that you’ll be able to distinguish it from the top word.

1. Double-click the word to the left (the original) and change the color to a light gray.

2. Now, you will skew the gray word so that it looks like a drop shadow. To skew the word, you need to decide approximately where the light source that creates the drop shadow is located. For this exercise, you’ll assume that the light source is shining
from the top front of the object. Click the Free Transform tool and in the Options section of the Toolbar, click the Rotate And Skew tool. Click the gray word and select the top-middle handle. Drag the handle to the left so the result looks like the following illustration.

3. Drag the drop shadow so it sits exactly underneath the top word, as shown here. To make the effect appear a little more realistic, you can skew both words a little so it appears as if the top word is positioned at an angle. You’ll do this next.

4. Select both words and then click the Free Transform tool. In the Options section, click the Rotate And Skew tool once again. Click the right-middle transform handle of your selection and drag it upward about a half an inch. The word and the drop
shadow now appear to possess a little bit of depth because they reside on a slight angle, as shown here.

5. To give the drop shadow a softer, more realistic look, you can blur the edges of the shadow with the Soften Fill Edges command. Before you apply the Soften Fill Edges command to the drop shadow, you must make the word editable. Once it is,
you can no longer edit the text. You can make text editable by breaking it apart, which you’ll do next.

6. Click the drop shadow word with the Selection tool and then press ctrl-b (Windows)/cmd-b (Mac) two times to make the drop shadow editable.

7. With the drop shadow still selected, choose Modify | Shape | Soften Fill Edges. In the Soften Fill Edges dialog box, shown here, you can customize the way the soft edges will look.

8. Type in 6 for both Distance and Number Of Steps. For Direction, select Expand to expand the soft fill beyond its current borders. Click OK. The result is a soft drop shadow that appears to be cast by the top word, as shown in this illustration.

You may want to go back and experiment with different settings in the Soften Fill Edges dialog box. You can undo your previous steps by pressing ctrl-z (Windows)/cmd-z (Mac). If you go back one too many steps, press ctrl-y (Windows)/cmd-y (Mac) to undo your last undo. Another option is to use the History panel to return to previous states and go forward from there. The History panel is discussed later in this chapter in the section “Track Your Steps with the History Panel.”