Adobe Flash Catalyst CS5 : Wireframing an Application in Flash Catalyst - Using the Transform Tool, Understanding Layers

1. Using the Transform Tool

The Transform tool allows you to rotate shapes. You can select a shape on the artboard and click and drag either directly on one of the corner handles or anywhere outside the shape to rotate it, as shown in Figure 1.

The point around which the shape rotates is by default its center. However, you can use the Transform tool to move this point to any other location on the artboard, even if that location is outside the shape, as shown in Figure 2. Rotating the shape after you have repositioned this point will cause it to rotate around the new axis.

Figure 1. Rotating a shape using the Transform tool

2. Understanding Layers

Like other design tools, Catalyst organizes the various objects on its artboard with layers. You can think of using layers as similar to drawing a picture using sheets of clear plastic, rather than drawing on a piece of paper. If you draw each piece of the picture on a new sheet of plastic, you can stack them together and view it as a single image or take the individual sheets and manipulate them without affecting the others. You can also rearrange the sheets, thus controlling which elements appear above or below other elements.

Catalyst layers most closely resemble those in Illustrator. In both programs, each layer is merely a container, with each item drawn on the layer placed into a new sublayer. Each time you draw a new object in Catalyst, it is automatically placed on a new sublayer within the currently selected layer. Each new object's sublayer is placed above the prior layer, so the most recent addition is on the topmost layer.

NOTE

The Rounded Rectangle tool is nothing more than the Rectangle tool with a preset value on the Corners property. Therefore, when you draw a rounded rectangle, the sublayer is still called Rectangle.

Figure 2. Moving the axis point

Sublayers are automatically named based on the shape you draw, so drawing a rectangle creates a sublayer called Rectangle, while drawing a circle creates a sublayer called Ellipse (see Figure 3).

This automatic naming of sublayers is in some ways nicer than the method employed by other design tools such as Photoshop, which simply names each layer Layer1, Layer 2, and so forth. You do need to note that in Catalyst you can have multiple sublayers with the same name, so if you draw two rectangles, the result is two Rectangle sublayers.

Because a normal project contains many, many layers and sublayers, you should get in the habit of renaming layers. Here again, the Catalyst team consciously mimicked the process from the other design tools. You can simply double-click the existing layer name and then type a new, more descriptive name.

Figure 3. The Layers panel in a Catalyst project. Layers have been logically named, and some of the sublayers are visible.

You can further help keep yourself organized by creating new layers, so that all of your objects do not end up in one massive layer. To create a new layer, follow these steps:

1. Click the layer above which you want to create a new layer.

2. Click the Create New Layer button at the bottom of the panel.

3. Double-click the new layer and rename it.

NOTE

Because layers hold zero or more sublayers, Catalyst depicts layers with a folder icon.

You can change the stacking order of layers and sublayers by simply dragging them up or down in the Layers panel, as shown in Figure 4.

Sublayers can be moved from one layer to another by dragging them below the desired layer, as shown in Figure 5.

Figure 4. Repositioning layers by dragging on the Layers panel

Figure 5. Moving a sublayer to a new layer