This chapter is from the book
This chapter is from the book
This chapter is from the book
Using layers
Layers act like a stack of transparent sheets. Layers are "stacked" on top of one another, and you can see their stacking order in the timeline. The layer on top is the highest in the stacking order, and the layer at the bottom is the lowest in the stacking order. Objects in the higher layer can obscure objects in the lower layer.
Layers are great for organizing content in your movie. You can name layers, hide their contents, and lock them so that they cannot be edited. Layers are also great for keeping shapes from segmenting each other.
You should still have zoo4.fla from the last exercise open.
1) Choose Modify > Layer. In the Layer Properties dialog box, type Background in the Name field, select the Lock option, and click OK.
When you choose Modify > Layer, the Layer Properties dialog box opens.
You have only one layer in your movie right now; it's currently called Layer 1. Because you have only one layer, the Layer Properties dialog box displays the properties of that layer.
)
After you type Background in the Name field, select the Lock option, and click OK. The Layer Properties dialog box should close. The name of the layer changes from Layer 1 to Background and a lock icon appears to the right of the layer name. This indicates that the layer is now locked. The Lock option lets you lock a layer, which is useful when you don't want to accidentally move items in a layer. When you lock a layer, you can no longer select anything in that layer, but you can still see its contents. You are also prevented from adding anything to the layer.
When the Show option in the Layer Properties dialog box is selected, as it is by default, the layer is visible. See what happens when you deselect this option and click OK—you'll see that the layer becomes invisible. Be aware that the layer is only invisible in authoring mode. If you test the movie you will see that the layer is still there.
The more complex your movie is, the more layers it might contain, and the harder it is to keep track of each layer. It's a good idea to name each layer. And you should try to give each layer a meaningful name to make it easier to find the layer you need.
2 ) Choose Insert > Layer to add another layer to the movie.
)
A new layer is added above the Background layer, which means that it sits at the top of the layer stacking order. Whenever you add a layer to your movie, it's added above the currently selected layer. In this case, you have only one layer, so it's selected by default and the new layer is added above it. Objects in a higher layer can obscure objects in the layers below it, so if you add anything to this new layer, it may obscure the contents of the Background layer.
There is no keyboard shortcut key for the Insert Layer command, but as you learned in Lesson 1, you can add one. In addition to the menu command for inserting a layer, you can also right-click (Windows) or Control+click (Macintosh) on the name of a layer and choosing Insert Layer. The Insert Layer command does have a button—it's at the bottom left of the timeline, just above the info bar.
)
If you ever need to remove a layer, just click its name, and click the Delete Layer button. You can also right-click (Windows) or Control+click (Macintosh) on the layer's name and choose Delete Layer.
3) Double-click on the name of Layer 2. When the name is highlighted, type Welcome Text to change the layer name.
The layer is now named Welcome Text. You could have renamed it using the Layer Properties dialog box, as you did in step 1, but this method is a little faster. If you double-click on the icon to the left of the name, the Layer Properties dialog box opens. You can use either method to rename a layer.
)
You now have two layers in your movie. Take a look at the timeline and see if you notice a few things. First, do you see a pencil icon to the right of the Welcome Text layer's name? That icon indicates that the Welcome Text layer is the active layer, which means that the layer is currently selected, and anything you add to the stage will be added to that layer. You should still see a lock icon at the far right of the name of the Background layer. You already know this icon indicates that the Background layer is locked so select the Background layer. Notice that the pencil icon appears to the right of the Background layer's name with a red line through it. The red line indicates that even though you have the Background layer selected, you can't add to it.
In addition to the lock and pencil icons, you should notice a few dots to the right of your layer names. Click on each of the dots to see what happens. If you click on a dot below the Show/Hide All layers control, you toggle the visibility of that layer. This is the same as selecting or de-selecting the Show option in the Layer Properties dialog box. If you click on a dot below the Lock/Unlock All layers control you will lock or unlock that layer.
)
4 ) Select the Welcome Text layer.
You can select the Welcome Text layer by clicking on its name. Don't double-click, as that will highlight the name so you can change the name. Remember that the pencil icon indicates that a layer is active.
5) Select the rectangle tool and set the fill color to no color, the stroke color to #FF9933, and the stroke style to hairline. Set the Corner Radius to 0 and draw a small rectangle on the stage.
The dimensions for this rectangle don't really matter right now—you're going to change them in just a bit. You should just make sure that when you draw the rectangle it appears with a thin orange outline, and no fill. The corners of the rectangle should also be sharp, since you set the Corner Radius to 0.
)
NOTE
Did you forget how to change the Corner Radius? Simply click the Round Rectangle Radius button in the Options area of the toolbox, and change the settings.
The most important thing is to make sure you drew the rectangle in the right layer. If you checked to make sure the pencil icon indicated that the Welcome Text layer was active, you should be OK. You should be doubly-OK if the lock icon still appears to the right of the Background layer's name—you can't draw anything in a layer if it is locked. Check the timeline and you should see a black dot in the Welcome Text layer if you drew the rectangle in the right place. Otherwise you may see a hollow dot. You'll learn much more about the timeline in Lesson 4, including the name for those dots.
6) Select the arrow tool and double-click any segment of the stroke you just added to the stage. In the Property inspector set the width (W) to 225, height (H) to 115, x-coordinate (X) to 80, and y-coordinate (Y) to 205.
NOTE
It's usually a good idea to press Enter or Return after typing a value in a panel. Otherwise the value will not take effect. You can also press Tab after entering a value—that will apply the value and take you to the next setting.
The Property inspector can do much more than change colors for you! You can use it to set the dimensions and coordinates of any shape that you select. That's often easier than attempting to draw shapes exactly where you want them, at exactly the dimensions you'll need.
)
If you would rather draw a shape on the stage and resize it "by eye" (so it looks right, instead of having exact dimensions) you can use the free transform tool. Just select the shape that you want to modify and then select the free transform tool from the toolbox. A set of rectangular handles and a bounding box appear around the selected element. You can drag the handles to scale the selected element horizontally, vertically, or both. Just drag one of the corner handles to scale the selected element proportionally, or drag one of the center handles to scale the element horizontally or vertically. You can also skew and rotate an element selected with the free transform tool. To skew the selected element, move the pointer over the bounding box between the handles and drag. To rotate the selected element, move the pointer just outside a corner handle and drag.
)
You can also use the free transform tool to distort shapes, but not anything else (for example, you can't distort groups or imported bitmaps). Just press the Control (Windows) or Command (Macintosh) key and drag a corner handle or a center handle to distort that corner. You can also Shift+Control+drag (Windows) or Shift+Command+drag (Macintosh) a corner handle to taper a shape, or move the selected corner and the adjoining corner equal distances from their origins.
)
7 ) Make sure you still have the rectangle in the Welcome Text layer selected.
Choose Edit > Duplicate to create a copy of the rectangle.
)
The duplicate command is a shortcut for Copy and Paste. It creates an exact copy of whatever you had selected and pastes it on the stage. The new copy should still be selected—if it's not, click on each of the line segments to select it. If you double-click on the new copy, Flash will select not only the new copy, but also the old copy.
8) Choose Window > Transform to open the Transform panel. Deselect the constrain option and set the height to 60%.
)
The Transform panel lets you scale, rotate, and skew an element. It's sort of like using the free transform tool, only more precise. If you deselect the constrain option, you can scale an elements height and width independently, otherwise you will find that as you type a value in one setting, the other setting will change to the same value.
NOTE
If for some reason the height and width percentages are something other than 100% before you make this transformation, just delete the duplicated rectangle and click the Reset button in the bottom right corner of the Transform panel. Then duplicate the original rectangle and attempt this step again.
9) In the Property inspector set the x-coordinate (X) for the selected rectangle to 335 and the y-coordinate (Y) to 205. Save the file as zoo5.fla in the TFS folder on your hard disk.
)
The rectangle should now line up with the top of the other rectangle in the Welcome Text layer. You'll add to this file in just a bit, but you've done so much that now is a great time to save the file.
After you save, but before you move on to the next exercise, take a moment to play around with the layers. See what happens if you change the stacking order of the layers, which you can do by simply dragging a layer to the desired position. When the Welcome Text layer is beneath the Background layer, you can't see its contents because objects in a higher layer obscure those in a lower layer. You can see the contents of the Welcome Text layer when it's on top because there's nothing above it to obscure that layer. When you're finished playing, make sure you choose File > Revert to return to the previously saved version of the movie, and then continue to the next exercise.