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 wireframe components.

Using Components

Most application mock-ups will include components. For more information on components, see What is a component?.

Using placeholders

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:

  • Image

  • Video

  • SWF

  • Ad Unit - Leaderboard (728x90)

  • Ad Unit - Skyscapper (120 x 600)

  • Ad Unit - Standard (300 x 250)

  • Avatar

  • Map

  • Bar Chart

  • Column Chart

  • Line Chart

  • Pie Chart

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.

You can edit and enhance artwork created with Flash Catalyst's drawing tools in Illustrator or Photoshop. See Round-trip editing of artwork.

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.

Add text

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.

Note: You can also copy text from external sources and then paste it in the artboard. Copied text does not retain its original formatting.

For 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 vertical path.

  • 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.
    You 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 10 pixels.

Size and rotate objects

  • When you select an object, eight selection handles appear. Drag the handles to size the object vertically, horizontally or diagonally.
    Note: 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.

Opacity
Set the opacity of an object from 0% to 100%. An object with 0% opacity is transparent.

Rotation
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.

For 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.

View full size graphic
Shape and line 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 (0) position.

Corners
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 None option.

  • 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.

The following are properties within the stroke and fill properties:

Weight
Change the weight (thickness) of a stroke line.

Opacity
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 width.

Joints
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 tool.

Color Picker pop-up menu

Choosing the 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.

Gradients

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.

A.
Gradient swatch

B.
Gradient color stops

  • Click anywhere in the gradient swatch to add a new stop.

  • Click a stop without dragging to set the stop’s color and opacity.

  • Drag a stop to move it.

  • Drag a stop away from the swatch to remove it.

    Note: You 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 white gradient.

  • You can change the Rotation property to rotate the angle of gradient.
    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.

Text properties

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 text.

  • 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.

Text properties

The following additional properties are unique to text:

Font
Change the font and style, such as bold or italic. The first five fonts listed are “web fonts” that cannot be embedded within an application.

Size
Select a size for the text from 1 through 720 points.

Underline
Apply an underline to the text.

Strikethrough
Format the text to appear as if a line has been drawn through it.

Alignment
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
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 size.

Tracking
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.

Padding
Create space between the text and the surrounding edges of its bounding box.

Filters

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.

Add filters

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 a circle).

    Note: You cannot animate changes to filters.
Drop Shadow filter properties

Filter properties

Color
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.

Distance
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.

Angle
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 lighting.

Blur
Add blur to give a filter a softer effect.

Opacity
Change the opacity of a filter to give it a more realistic appearance.

Strength
A stronger setting makes a filter more apparent, but can make it appear less realistic.

Knockout
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.

Note: There 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.

Blend modes

Blend 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:

  • The base color is the original color in the image.

  • The blend color is the color being applied in a layer above it.

  • The result color is the color resulting from the blend.

Topmost object with Normal blending (left) compared to Hard Light blending mode (right)
A.
Base colors in underlying objects at 100% opacity

B.
Blend color in topmost object

C.
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 Properties panel.

Normal
Paints the selection with the blend color, without interaction with the base color. This is the default mode.

Darken
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.

Multiply
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 magic markers.

Color Burn
Darkens the base color to reflect the blend color. Blending with white produces no change.

Subtract
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.

Lighten
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.

Screen
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.

Add
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.

Overlay
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
Multiplies 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.

Difference
Subtracts 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 change.

Exclusion
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.

Invert
Inverts the base and blend colors.

Hue
Creates a resulting color with the luminance and saturation of the base color and the hue of the blend color.

Saturation
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.

Color
Creates 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.

Luminosity
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
Compares 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 image.
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.