Creating Application Mock-ups
Flash Catalyst includes tools for rapidly creating application
prototypes or mock-ups. For example, pre-built placeholder graphics
can be used to quickly indicate size and placement of media, avatars,
maps, graphs, etc. Drawing and text tools can be used to quickly
create and modify basic shapes and text, or to edit and enhance
Most application mock-ups will include components. For
more information on components, see What is a component?.
The Common Library panel contains a set of placeholders
that you can use to represent common objects. In many cases, these
placeholders will be left in place throughout your work in Flash
Catalyst, and eventually replaced by a developer in Flash Builder.
You can also use them as temporary placeholders to test a layout while
waiting for final art.
The Placeholders included with Flash Catalyst are:
Ad Unit - Leaderboard (728x90)
Ad Unit - Skyscapper (120 x 600)
Ad Unit - Standard (300 x 250)
Placeholders can be added to the artboard by simply dragging
them from the Common Library to the artboard. You can replace a
placeholder with final art using the Replace With command. See Replacing repeated artwork for more information.
Drawing and text tools
The drawing and text tools in Flash Catalyst can be used
to add simple items that don't require the advanced graphics and
text features of Illustrator or Photoshop; they can also be used
to customize the built-in wireframe components. The drawing and
text tools are located in the Flash Catalyst Drawing toolbar.
Draw shapes and lines
The Flash Catalyst Drawing toolbar
Click a drawing tool in the Tools panel to select it.
Some tools share a spot in the menu. To select a hidden tool, click
and hold down the mouse button to open the pop-up menu, and then
select a tool.
Drag in the artboard to draw a shape.
Hold down Shift as you draw with the Rectangle or Rounded
Rectangle tools to create a perfect square.
To create a rectangle with rounded corners, use the Rounded
Rectangle tool. You can also use the Rectangle tool and change the
Corners value in the Properties panel.
Hold down Shift as you draw with the Ellipse tool to draw
a perfect circle.
Drag the mouse as you draw triangles, hexagons, octagons,
and stars to rotate the shapes as you draw them.
Use the Line tool to draw lines. Hold down Shift to draw
lines at perfect vertical, horizontal, or 45 degree angles.
Also see Modify drawing and text properties.
Use the Text tool to create three types of text.
- Point Text
- Does not line wrap. The text extends to fit all of the text.
To add a line, you can press Enter (Windows) or Return (Mac) to
insert a line break.
- Area Text
- Occupies a bounding box with fixed width and height. The
text never grows any larger than the width and height you specify.
Text automatically line wraps, but you can also enter manual line
breaks. If the text does not fit within the box, the remainder is
hidden. An overflow icon appears at the bottom of the bounding box.
Clicking the overflow icon changes the text to Fit Height. The bounding
box height adjusts automatically.
- Fit Height
- Text occupies a box with fixed width but variable height.
The text stays within the width of the bounding box. Text automatically
wraps. You can also insert manual line breaks. The height of the
box grows automatically, if needed, to fit all of the text.
Select the Text tool and click or drag in the artboard.
Clicking the Text tool in the artboard places the insertion
point and creates Point Text.
Dragging the Text tool in the artboard creates area text.
There are two ways to resize the text bounding box. Double-clicking
inside the box reveals four selection handles. Drag the handles
to resize the box. Or, use the Select or Direct Select tools to
select the text bounding box. Selecting the box reveals eight selection
handles. Drag the handles to resize the bounding box.
To change a text object from one type to another, use the
Select or Direct Select tool to select the bounding box. In the
Properties panel, choose Point Text, Area Text, or Fit Height.
Resizing Fit Height text converts it to Area Text.
can also copy text from external sources and then paste it in the
artboard. Copied text does not retain its original formatting.
information on formatting text appearance, see Modify drawing and text properties.
Select and position objects
Use the Select tool (dark arrow) to select and
move grouped or ungrouped objects.
Use the Direct Select tool (light arrow) to select objects
that are inside a group.
Drag a selected object to move it in the artboard. When moving
an object, hold down Shift to move along a perfect horizontal or
Select an object and change its position values (x/y) in
the Properties panel to position the object in an exact location.
When positioning objects in the main application artboard,
the x and y values are relative to the upper-left corner of the
artboard. The upper-left corner represents X:0 and Y:0.
When positioning parts within a component in Edit-In-Place
mode, the x and y values are relative to the component bounds.
After grouping objects, the x and y positions of its children
are relative to the upper-left corner of the group.
can nudge objects 1 pixel up, down, left, or right using the arrow
keys. Hold down Shift as you press the arrow keys to nudge the object
Size and rotate objects
When you select an object, eight selection handles
appear. Drag the handles to size the object vertically, horizontally
You cannot add, remove, or edit points on a
path in Flash Catalyst. You can launch and edit the artwork in Adobe
Illustrator. For more information, see Round-trip editing of artwork
When resizing an object, hold down Shift as you drag a selection
handle to maintain the current height to width ratio. Hold down
Alt (Windows) or Option (Mac) to resize from the center of the object
instead of from the opposite edge or corner.
Use the Transform tool to rotate and size selected objects.
First select the object and then select the Transform tool. To size
the object, drag a selection handle. To rotate an object, position
the pointer over the object and drag. Hold down Shift as you rotate
to constrain the rotation to 45 degree angles. You can also use
the Rotate tool to move the transform point, which is the point
around which the object will rotate.
With the Transform tool selected, hold down Ctrl (Windows)
or Command (Mac) to toggle between the Transform and Select tools
To size a component you can either:
Modify drawing and text properties
You can change the properties of shapes, lines, and text
in the Properties panel.
The properties change, depending on what you have selected.
Some properties are unique to the selection. Others, such as Filters,
are common to most objects in Flash Catalyst.
When you select a group, the panel displays the properties
of the group as a whole, not its children.
When you move over a numeric value in the Properties panel,
the cursor changes to a fingertip with a double-head arrow, called
a scrubber. Drag horizontally to increase or decrease the value
or click and type a new value. You can also double-click the control
and type a new value.
Click the triangle next to a property to see extended options,
such as fill opacity or gradient rotation.
The Opacity and Rotation properties are common to shapes,
lines, text, and most other Flash Catalyst objects.
- Set the opacity of an object from 0% to 100%. An object with
0% opacity is transparent.
- Rotate an object. The value is equal to the rotation angle
(0 – 360°) from its original position. If a shape, such as a star,
was originally drawn at an angle, its starting position is still
0. Use negative values to rotate the object counter-clockwise.
information on copying properties to the same object in other states,
see Share objects between states.
Shape and line properties
Shapes and lines share most of the same properties.
- Rotate By
- Rotate a line a specific angle from its current position.
Each time you rotate the line, its new position becomes the starting
- Make the corners of a rectangle round. You can change the
corners of a rectangle or rounded rectangle.
Stroke and fill
The interior of a shape
is its Fill. The border or outline around its outer edge is the Stroke.
You can apply one of three types of stroke and fill: none, solid,
or linear gradient.
Select the Solid, Gradient, or
If you select Solid, click the color box to open the Color
Picker and select a new color.
If you select multiple objects with different stroke or fill,
the properties show no stroke or fill. Any new properties you choose
are added to all selected objects.
are properties within the stroke and fill properties:
- Change the weight (thickness) of a stroke line.
- Stroke and Fill both have opacity values separate from the
object’s opacity value.
- End Cap: None
- A cap is the end of an open line. The None option is flush
with the path’s end.
- End Cap: Round
- Adds semicircular ends that extend half the line width beyond the
end of the line.
- End Cap: Square
- Adds a square cap that extends beyond the path by half the stroke
- A joint is where a line changes direction (turns a corner).
- Miter Limit
- Adjust the amount of miter applied to a miter joint.
Use the Color Picker
When you select the
color box for stroke or fill, the Color Picker opens. You can select
a color or enter a hexadecimal color value. For additional colors,
drag the slider (right-pointing arrow) up or down. Select a new
color range and drag in the color field to select a new color. You
can also sample a color in the application by using the Eyedropper
Color Picker pop-up menu
eyedropper icon in the Color Picker activates the Eyedropper tool in
the artboard. While the tool is active, you can do the following:
Click in the artboard to set the swatch color to the color
under the eyedropper. After you sample the artboard color, the Color
Picker disappears and you return to the previous tool mode.
Click the eyedropper icon again to leave the Color Picker
open and return to the previous tool mode.
If you select multiple objects of different colors, the properties
show that no color is applied. Selecting a color in the color swatch
applies the new color to all of the selected objects.
After you apply a gradient stroke
or fill, a gradient swatch displays a preview of the gradient from
left to right. A checkerboard pattern indicates areas of transparency.
Beneath the swatch are interactive handles for gradient color stops.
- Gradient swatch
Click anywhere in the gradient swatch to add a new stop.
Click a stop without dragging to set the stop’s color and
Drag a stop to move it.
Drag a stop away from the swatch to remove it.
cannot remove stops when there are only two stops left. You can remove
the first or last stops as long as other stops exist in the middle.
If you select multiple objects with different gradients (or
some with no gradients), the properties show that no gradient is
applied. Clicking the blank gradient swatch resets all items to
the default gradient.
You can change the stroke or fill of from solid to gradient.
The result is a gradient with the original solid color changing
to black. If you change it from a gradient to a solid, the start
color from the gradient is used as the new solid color. If you change
the color setting from none to gradient, the result is a black to
You can change the Rotation property to rotate the angle
Middle-click the Rotation dial control
within the Gradient Fill properties to reverse the angle or direction
of the gradient 180°.
For information on
copying properties to the same object in other states, see Share objects between states.
You can format text by using the Properties panel.
To format text, select its text bounding box and specify
properties in the Properties panel.
To format a portion of text within the bounding box, double-click
inside the text bounding box, and then highlight the text you want
to format. The properties you set apply only to the highlighted
To change text color, select the text and click the color
box in the Properties panel to open the Color Picker. Select a new
color or use the Eyedropper tool to sample a color in the artboard.
The following additional properties are unique to text:
- Change the font and style, such as bold or italic. The first
five fonts listed are “web fonts” that cannot be embedded within
- Select a size for the text from 1 through 720 points.
- Apply an underline to the text.
- Format the text to appear as if a line has been drawn through
- Align the text within its bounding box. Choose Left, Right,
Center, or Justify.
- Baseline Shift
- Set the position of the text relative to its baseline. Choose between
None, Superscript, or Subscript.
- Kerning puts a predetermined amount of space between certain character
pairs to improve readability.
- Line Height
- Adjust the space between each line of text. You can set a
specific size in pixels or choose a percent of its current font
- Tracking differs from kerning in that tracking is the adjustment
of space for groups of letters and entire blocks of text. Use tracking
to change the overall appearance and readability of the text, making
it more open and airy or more dense.
- Create space between the text and the surrounding edges of
its bounding box.
Filters are not specific to shapes, lines, and text. You
can apply the same filters to bitmap images, components, and video
players. You can also apply filters to groups and the filter is
applied to all children in the group equally.
You can apply the following
filters in the Properties panel: Blur, Drop Shadow, Inner Shadow,
Bevel, Glow, Inner Glow.
Click to open the Add Filter
button (plus sign), and choose a filter.
After you apply a filter, additional filter settings appear
in the Properties panel.
You can apply multiple filters to the same object. The order
in which you apply filters in Flash Catalyst affects the final appearance
of the combined filters.
To remove a filter, click the remove filter button (x in
Note: You cannot animate changes to filters.
Drop Shadow filter properties
- Select a color for the filter. Click the color box to open
the Color Picker and select a color or use the Eyedropper to sample
a color in the artboard.
- Set the distance a drop shadow or glow extends beyond the
edge of the object. Set how far a blur extends into the object from
its edges. Set the size of a beveled edge.
- Change the angle that a drop shadow or bevel extends in relation
to the object.
Use a different distance and
angle in a drop shadow filter to alter the perceived direction of
- Add blur to give a filter a softer effect.
- Change the opacity of a filter to give it a more realistic
- A stronger setting makes a filter more apparent, but can
make it appear less realistic.
- Knockout hides the original object, but shows only the parts
of the filter that would be seen if the object were visible.
- Hide Object
- Hide Object hides the original object, and shows the filter including
parts that would have been obscured if the object were visible.
Hide Object has no effect if Knockout is also selected.
is a known bug that causes filter effects to size incorrectly relative
to their object when changing the zoom magnification. Rasterizing
the object can cause the filter to shift position. The effects display
correctly at 100% magnification. The effects also display correctly
when you publish the application.
Modes are used to determine how layered objects blend together.
It’s helpful to think in terms of the following colors when visualizing
a blend mode effect:
color is the original color in the image.
color is the color being applied in a layer above it.
color is the color resulting from the blend.
Topmost object with Normal blending (left) compared to Hard
Light blending mode (right)
- Base colors in underlying objects at 100% opacity
color in topmost object
- Resulting colors
after applying the Hard Light blending mode to the topmost object
Blend mode descriptions
Choose blend modes in the Appearance section of the
- Paints the selection with the blend color, without interaction
with the base color. This is the default mode.
- Selects the base
or blend color—whichever is darker—as the resulting color. Areas
lighter than the blend color are replaced. Areas darker than the
blend color do not change.
- Multiplies the base color by the blend color. The resulting
color is always a darker color. Multiplying any color with black
produces black. Multiplying any color with white leaves the color
unchanged. The effect is similar to drawing on the page with multiple
- Color Burn
- Darkens the base color to reflect the blend color. Blending
with white produces no change.
- Looks at the color information in each layer and subtracts
the blend color from the base color. In 8- and 16-bit images, any
resulting negative values are clipped to zero.
- Looks at the color information in each channel and selects
the base or blend color (whichever is lighter) as the result color.
Pixels darker than the blend color are replaced, and pixels lighter
than the blend color do not change.
- Multiplies the inverse of the blend and base colors. The
resulting color is always a lighter color. Screening with black
leaves the color unchanged. Screening with white produces white.
The effect is similar to projecting multiple slide images on top
of each other.
- Color Dodge
- Brightens the base color to reflect the blend color. Blending
with black produces no change.
- Looks at
the color information in each layer and brightens the base color
to reflect the blend color by increasing the brightness. Blending
with black produces no change.
- Multiplies or
screens the colors, depending on the base color. Patterns or colors
overlay the existing artwork, preserving the highlights and shadows
of the base color while mixing in the blend color to reflect the
lightness or darkness of the original color.
- Soft Light
- Darkens or lightens the colors, depending on the blend color.
The effect is similar to shining a diffused spotlight on the artwork.
If the blend color (light source) is lighter than 50% gray, the
artwork is lightened, as if it were dodged. If the blend color is
darker than 50% gray, the artwork is darkened, as if it were burned
in. Painting with pure black or white produces a distinctly darker or
lighter area but does not result in pure black or white.
- Hard Light
or screens the colors, depending on the blend color. The effect
is similar to shining a harsh spotlight on the artwork. If the blend
color (light source) is lighter than 50% gray, the artwork is lightened,
as if it were screened. This is useful for adding highlights to
artwork. If the blend color is darker than 50% gray, the artwork
is darkened, as if it were multiplied. This is useful for adding
shadows to artwork. Painting with pure black or white results in pure
black or white.
either the blend color from the base color or the base color from
the blend color, depending on which has the greater brightness value. Blending
with white inverts the base-color values. Blending with black produces no
- Creates an
effect similar to but lower in contrast than the Difference mode.
Blending with white inverts the base-color components. Blending
with black produces no change.
- Inverts the base and blend colors.
- Creates a resulting
color with the luminance and saturation of the base color and the
hue of the blend color.
- Creates a
resulting color with the luminance and hue of the base color and
the saturation of the blend color. Painting with this mode in an
area with no saturation (gray) causes no change.
a resulting color with the luminance of the base color and the hue and
saturation of the blend color. This preserves the gray levels in
the artwork and is useful for coloring monochrome artwork and for
tinting color artwork.
- Creates a resulting color with the hue and
saturation of the base color and the luminance of the blend color.
This mode creates an inverse effect from that of the Color mode.
- Lighter Color
the total of all values for the blend and base color and displays
the higher value color. Lighter Color does not produce a third color, which
can result from the Lighten blend. It chooses the highest values
from the base and blend colors to create the result color.
- Darker Color
- Compares the total of all values for the blend and base color
and displays the lower value color. Darker Color does not produce
a third color, which can result from the Darken blend. It chooses
the lowest values from both the base and the blend color to create
the result color.
- Copy Alpha (when isolated)
- Applies an alpha or transparency mask.
- Erase Alpha (when isolated)
- Removes all base color pixels, including colors in the background
Note: Copy Alpha and Erase Alpha blend modes only work when
you place them inside a component and leave the component’s blend
mode set to Isolated.