Blackberry Composer: User Guide

BlackBerry Composer
Version: 5.0 | Service Pack: 1
User Guide
Published: 2010-06-22
SWD-844796-0622010059-001
Contents
1 Getting started............................................................................................................................................................................. 7
Create a new project...................................................................................................................................................................... 7
Project window and workspace..................................................................................................................................................... 7
Toolbox............................................................................................................................................................................................. 9
Display the toolbox................................................................................................................................................................. 11
Specifying colors on the toolbox........................................................................................................................................... 11
Change a canvas property............................................................................................................................................................. 11
Crop the canvas...................................................................................................................................................................... 12
Configure the rulers and alignment tools.................................................................................................................................... 12
Change the spacing or color of the grid lines..................................................................................................................... 12
Change the origin of the grid system.................................................................................................................................. 12
Add guides to the workspace................................................................................................................................................ 12
Undo and repeat operations.......................................................................................................................................................... 13
Specify the number of operations to undo and redo.......................................................................................................... 13
2 Change preferences.................................................................................................................................................................... 14
Change the start preferences........................................................................................................................................................ 14
Change the gamma preferences................................................................................................................................................... 14
Change the ToolTip preferences................................................................................................................................................... 15
Set theme button preferences....................................................................................................................................................... 15
Change the BlackBerry Smartphone Simulator preferences..................................................................................................... 15
Change transparency preferences................................................................................................................................................ 16
Change tool properties................................................................................................................................................................... 16
3 Creating objects........................................................................................................................................................................... 17
Create a line..................................................................................................................................................................................... 17
Create a rectangle or square......................................................................................................................................................... 17
Create a rounded rectangle or rounded square.......................................................................................................................... 17
Create an ellipse or circle............................................................................................................................................................... 18
Create a freehand path.................................................................................................................................................................. 18
Create an elliptical arc................................................................................................................................................................... 18
Create a polygon or polyline.......................................................................................................................................................... 18
Create a Bézier curve...................................................................................................................................................................... 18
Creating text.................................................................................................................................................................................... 19
Create a simple text object................................................................................................................................................... 19
Create text on a curve............................................................................................................................................................ 19
Edit text.................................................................................................................................................................................... 19
Convert text to Bézier curves................................................................................................................................................ 20
Creating user input fields............................................................................................................................................................... 20
Create a text entry field......................................................................................................................................................... 20
Create a drop-down list......................................................................................................................................................... 20
Defining the viewable screen area............................................................................................................................................... 21
Create a view box................................................................................................................................................................... 22
Change an existing view box................................................................................................................................................ 22
Preserving the aspect ratio of the view box........................................................................................................................ 22
Preserve the aspect ratio in the view box............................................................................................................................ 23
Create a Zoom effect.............................................................................................................................................................. 24
Create a Pan effect................................................................................................................................................................. 24
Creating buttons............................................................................................................................................................................. 24
Create a button....................................................................................................................................................................... 25
Convert an object to a button............................................................................................................................................... 25
Creating animation objects........................................................................................................................................................... 26
Create an animation object................................................................................................................................................... 26
Convert a scene to an animated object............................................................................................................................... 26
Working with objects...................................................................................................................................................................... 26
Select an object...................................................................................................................................................................... 27
Select multiple objects........................................................................................................................................................... 27
Move a selected object on the workspace........................................................................................................................... 27
Resize a selected object using the bounding box............................................................................................................... 27
Rotate a selected object........................................................................................................................................................ 28
Duplicate an object................................................................................................................................................................ 28
Adjusting path segments............................................................................................................................................................... 28
Move anchor points on a path.............................................................................................................................................. 29
Change the shape of a curve................................................................................................................................................ 29
Add anchor points to a shape............................................................................................................................................... 29
Remove anchor points from a shape.................................................................................................................................... 29
View object properties.................................................................................................................................................................... 30
Options in the Inspector........................................................................................................................................................ 30
Specifying shape properties.......................................................................................................................................................... 31
Smooth a shape’s edges........................................................................................................................................................ 32
Change the roundness of a rounded rectangle object...................................................................................................... 32
Change the shape properties of an elliptical arc................................................................................................................ 32
Specify text object properties........................................................................................................................................................ 32
Text properties in the Inspector............................................................................................................................................ 33
Specifying stroke and fill properties............................................................................................................................................. 33
Specify the stroke or fill color................................................................................................................................................ 34
Remove the stroke or fill color of an object......................................................................................................................... 34
Specify the stroke style attributes........................................................................................................................................ 34
Specify a pattern fill............................................................................................................................................................... 35
Working with bitmap objects......................................................................................................................................................... 35
Change a bitmap image........................................................................................................................................................ 35
Specify how an object blends with background objects.................................................................................................... 35
Add one or more filters to a bitmap image.......................................................................................................................... 35
Apply one or more effects to a bitmap image..................................................................................................................... 36
Blending rasterized images................................................................................................................................................... 36
Using bitmap image effects.................................................................................................................................................. 37
Changing transformation properties............................................................................................................................................ 39
Set the position coordinates for an object.......................................................................................................................... 39
Scale an object........................................................................................................................................................................ 39
Skew an object........................................................................................................................................................................ 39
Rotate an object..................................................................................................................................................................... 40
Make an object visible or invisible for the current frame.................................................................................................. 40
Specify the opacity level of an object................................................................................................................................... 40
Managing objects........................................................................................................................................................................... 40
View the Objects panel.......................................................................................................................................................... 40
Select an object...................................................................................................................................................................... 41
Rename an object................................................................................................................................................................... 41
Move an object forward or back on the workspace............................................................................................................ 41
Lock the position of an object............................................................................................................................................... 41
Unlock the position of an object........................................................................................................................................... 41
Group objects.......................................................................................................................................................................... 41
Ungroup objects..................................................................................................................................................................... 42
Converting groups to switchgroup animations........................................................................................................................... 42
Convert a group of objects to a switchgroup...................................................................................................................... 42
Change the switchgroup settings........................................................................................................................................ 43
Convert an object to a bitmap image........................................................................................................................................... 43
Convert an object to a button............................................................................................................................................... 43
Convert a scene to an animated object............................................................................................................................... 44
Using catalogs................................................................................................................................................................................. 44
View the Catalog panel.......................................................................................................................................................... 44
Add a color to the Catalog.................................................................................................................................................... 45
Add an object to the Catalog................................................................................................................................................ 45
Add a pattern to the Catalog................................................................................................................................................ 45
Open a catalog....................................................................................................................................................................... 45
Create a new catalog............................................................................................................................................................. 45
Edit an existing custom catalog............................................................................................................................................ 45
Delete a custom catalog........................................................................................................................................................ 46
Add a Catalog item to a project............................................................................................................................................ 46
Delete an item from the Catalog.......................................................................................................................................... 46
Using layers..................................................................................................................................................................................... 46
View the Layers panel............................................................................................................................................................ 46
Create a layer.......................................................................................................................................................................... 47
Duplicate a layer..................................................................................................................................................................... 47
Delete a layer.......................................................................................................................................................................... 47
View or hide layers................................................................................................................................................................. 47
Rename a layer....................................................................................................................................................................... 47
Reorder layers......................................................................................................................................................................... 47
Rasterize one or more layers into a single bitmap image.................................................................................................. 47
Merge layers together............................................................................................................................................................ 48
Delete objects in a layer........................................................................................................................................................ 48
4 Creating animated content........................................................................................................................................................ 49

Key frame animation...................................................................................................................................................................... 49
Non-linear animation..................................................................................................................................................................... 49
View animation properties............................................................................................................................................................. 50
Editing animations.......................................................................................................................................................................... 51
Using the key frame editor to manage key frames............................................................................................................ 51
Configuring animation between key frames....................................................................................................................... 52
Edit an animation using the Animation wizard................................................................................................................... 53
Working with animation frames.................................................................................................................................................... 53
Select a single frame.............................................................................................................................................................. 54
Select a range of frames........................................................................................................................................................ 54
Add a frame............................................................................................................................................................................. 54
Delete a frame........................................................................................................................................................................ 54
Copy frames............................................................................................................................................................................ 54
Working with property keys and animation handles.......................................................................................................... 54
Creating keys.......................................................................................................................................................................... 56
Moving a property key or object handle.............................................................................................................................. 56
Changing property keys......................................................................................................................................................... 57
Editing animation behavior between frames............................................................................................................................... 57
Motion behavior properties................................................................................................................................................... 58
Path behavior properties....................................................................................................................................................... 59
Specify path and motion behavior........................................................................................................................................ 59
Using the tweening editor toolbar....................................................................................................................................... 60
5 Making content interactive........................................................................................................................................................ 62

Creating events that trigger actions............................................................................................................................................. 62
Create a button event............................................................................................................................................................ 63
Create a hotkey event............................................................................................................................................................ 63
Create a timeline event.......................................................................................................................................................... 63
Create a relative event........................................................................................................................................................... 64
Creating actions.............................................................................................................................................................................. 64
Create an action to play an animation................................................................................................................................. 65
Create an action to stop an animation................................................................................................................................ 65
Create an action to play a sound.......................................................................................................................................... 66
Create an action to hide an animation component........................................................................................................... 66
Create an action to show an animation component.......................................................................................................... 66
Create an action to load a scene.......................................................................................................................................... 66
Create an action to submit a form........................................................................................................................................ 67
Create an action to reset a form........................................................................................................................................... 67
Create an action to start an application.............................................................................................................................. 67
Change interactive content................................................................................................................................................... 67
Change the focus order of the buttons................................................................................................................................ 68
6 Exporting and testing content................................................................................................................................................... 69

Preview content using the BlackBerry Smartphone Simulator................................................................................................. 69
Exporting content............................................................................................................................................................................ 69
Export to an SVG file.............................................................................................................................................................. 69
Export to a PMB file................................................................................................................................................................ 71
Export to a PME file................................................................................................................................................................ 72
Export to a GIF or PNG file.................................................................................................................................................... 72
Export to an animated GIF file.............................................................................................................................................. 74
7 Importing Flash content............................................................................................................................................................. 77

Converting Flash files..................................................................................................................................................................... 77
Converting shapes and shape properties.................................................................................................................................... 77
Converting basic vector shapes............................................................................................................................................ 77
Converting color transforms in vector shapes.................................................................................................................... 78
Converting animation..................................................................................................................................................................... 78
Converting affine transforms................................................................................................................................................ 78
Converting movie clip timelines........................................................................................................................................... 78
Converting visibility and position animation....................................................................................................................... 78
Converting embedded images...................................................................................................................................................... 79
Converting static text with device fonts....................................................................................................................................... 79
Converting simple buttons and frame actions............................................................................................................................ 79
8 Provide feedback......................................................................................................................................................................... 81
9 Legal notice.................................................................................................................................................................................. 82
User Guide Getting started
Getting started 1
You can use the BlackBerry® Composer to create interactive and animated graphics to display on BlackBerry device screens.
Creating graphics for BlackBerry devices involves the following basic steps:
• Creating and editing: Design and create graphics in the BlackBerry Composer. You can save your project files as the .cp
file type.
• Testing: Preview your graphics in the BlackBerry Smartphone Simulator. You can start the BlackBerry Smartphone Simulator
directly from the BlackBerry Composer.
• Exporting: Export your BlackBerry Composer files to .svg, .pme, or .pmb file types.
• Publishing: Publish your graphics on an application server.
Create a new project

When you start the BlackBerry® Composer or create a new project, you can select a canvas size that is based on a BlackBerry
device. By default, the BlackBerry Composer creates a canvas that is the same dimensions as the screen on the BlackBerry device
that you specified. You can choose to create a custom canvas size for your project.
1. On the File menu, click New.
2. In the Name field, type a name for your new BlackBerry Composer project.
3. In the BlackBerry drop-down list, click a BlackBerry device to use as the template for your project. The BlackBerry Composer
sets the height and width values for the canvas to match the screen size of the BlackBerry device.
4. To specify custom dimensions of your canvas, type the dimensions in pixels in the Width and Height fields.
5. Select Transparent, White, or Custom to specify the background color of the canvas. If you selected Custom, click the
adjacent color swatch to select the color that you want to use for your background.
6. Click Create.
Project window and workspace

You can view and edit your BlackBerry® Composer project in the project window, which contains the canvas and the workspace.
Each project has its own window. If you open multiple projects, the BlackBerry Composer opens multiple project windows.
7
User Guide Project window and workspace
The BlackBerry Composer project window contains the project workspace. The workspace includes the following elements:
Element Description
canvas The canvas represents the viewable area.
You can change the size and the background color of the canvas.
overscan area The overscan area is the gray area around the canvas. Objects can enter and exit the canvas from the
overscan area during an animation.
You can use the overscan area to store objects for future use.
rulers The rulers at the top and the left of the project workspace provide measurements in pixels. The rulers
indicate the vertical and horizontal position of the mouse pointer.
You can show or hide the rulers.

grid The grid is an alignment tool that is represented by regularly-spaced horizontal and vertical lines. To
assist with alignment, you can specify that objects auto-align to the grid. When you create or move
objects, they automatically align to a line on the grid.
8
User Guide Toolbox
Element Description
By default, the grid aligns at the upper-left corner of the project window . You can change the alignment
of the grid.
You can show or hide the lines on the grid, change their color and spacing, and specify the auto-align
option.
guides Guides are alignment tools that you can add wherever you need them, by dragging them from the
horizontal or vertical rulers. To assist with alignment, you can specify that objects auto-align to the
guides. When you create or move objects, they automatically align to a guide.
You can show or hide the guides, select the auto-align option, or lock the guides to prevent you from
accidentally moving them.
limits The limits are lines that show the edges of the canvas. You can use the limits to resize the canvas by
dragging them to the appropriate size.
You can show or hide the limits, or lock them to prevent you from accidentally moving them.
Toolbox
You can use the tools on the toolbox to create vector graphic shapes and text objects or you can change imported images in your
BlackBerry® Composer project.
Icon Tool Shortcut Description

Transformation V You can use the Transformation tool to select an object, move an
object, or change the width and height of an object.
Select Q You can use the Select tool to reshape an object by moving a single
anchor point or Bèzier control point.
Text T You can use the Text tool to create a text object.
Text on Curve C You can use the Text on Curve tool to create text on a curve.
Freehand F You can use the Freehand tool to draw free-form paths. Paths are
closed automatically if you specify a fill color other than None.
Bézier P You can use the Bézier tool to draw curved lines.
Line L You can use the Line tool to draw a single straight-line path.
9
User Guide Toolbox

Polyline O You can use the Polyline tool to draw a continuous path that has
one or more straight-line segments.
Rectangle R You can use the Rectangle tool to draw a rectangle shape.
Rounded Rectangle N You can use the Rounded Rectangle tool to draw a rectangle shape
that has rounded corners.
Ellipse E You can use the Ellipse tool to draw ellipses or circles.
Arc A You can use the Arc tool to draw arcs.
Text Area Form X You can use the Text Area Form tool to create text fields that users
can type information in.
Selection Form S You can use the Selection Form tool to create a drop-down list with
predefined options, from which users can select an option.
Theme Button — You can use the Theme Button tool to create a button object that
you can add to the home screen to start an application.
Camera M You can use the Camera tool to define the area of the canvas that
the user views. By animating the view box area, you can create
panning and zooming effects.
Hand H You can use the Hand tool to move the canvas in the project
workspace.
Zoom Z You can use the Zoom tool to magnify the canvas.
— Stroke swatch — You can use the Stroke swatch to specify the stroke color for a
selected object or to specify the default stroke color for future
objects.
— Fill swatch — You can use the Fill swatch to specify the fill color for a selected
object or to specify the default fill color for future objects.
— Default colors — You can use the Default colors button to change the Stroke and Fill
swatches to the default values. The default stroke value is black and
the default fill value is white.
— No color — You can use the No color button to change the Fill swatch to no color.
— Swap fill and stroke — You can use the Swap fill and stroke button to switch the color values
of the Fill and Stroke swatches.
10
User Guide Change a canvas property

Simulator — You can use the Simulator button to start the BlackBerry
Smartphone Simulator to test your project.
Note:
The keystroke shortcuts are unavailable in the following situations:
• when the BlackBerry Composer is in text-entry mode
• when you type a value in a field in any of the panels
• when you move the points on a polyline or Bézier object
Display the toolbox

To display or hide the toolbox, on the Window menu, click Toolbox.
Specifying colors on the toolbox

You can change the colors of objects by using the color swatches and the buttons on the toolbox. The color that you specify for
an object is the default color for future shapes and text objects that you create.
Change a canvas property

1. On the Canvas menu, click Properties.
Task Steps
Change the canvas size. In the Width and Height fields, type the values in pixels for the height and
width.
Change the background image In the Resize Anchor field, click a box to determine how to align the canvas
alignment. after it is resized.
Change the BlackBerry device. In the Device drop-down list, click the BlackBerry device to use for the
canvas.
Change the canvas color. a. Click the color swatch to open the Color Picker, then select the background
color for your canvas.
b. To make sure that you choose a color that all platforms and browsers
support, select the Web safe check box.
11
User Guide Configure the rulers and alignment tools
2. To preview your changes before saving, click the Preview button.

3. Click OK.
Crop the canvas

You can select the objects that you want to remain on the canvas and crop the canvas to include only those objects.
1. On the canvas, select one or more objects to identify the area to crop to.
2. On the Canvas menu, click Crop To Selection.
Configure the rulers and alignment tools

The BlackBerry® Composer workspace includes tools to help you precisely position objects on the canvas.
1. Click the View menu.
2. To display or hide the rulers, click Show Rulers.
3. To display or hide the grid, click Grid > Show Grid.
4. To auto-align objects to the grid or to turn off the auto-alignment, click Grid > Snap to Grid.
5. To auto-align objects to the guides or to turn off the auto-alignment, click Guides > Snap to Guides.
6. To display or hide the limits, click Limits > Show Limits.
7. To lock or release the limits, click Limits > Lock Limits.
Change the spacing or color of the grid lines

1. On the View menu, click Grid > Set Grid Options.
2. To change the spacing of the grid lines, in the Horizontal and Vertical fields, type the horizontal and vertical values in pixels.
3. To change the color of the grid lines, click the color swatch and click a color.
4. Click OK.
Change the origin of the grid system

1. Display the rulers.
2. In the upper-left corner of the rulers, click and drag the origin of the grid system to the new location.
3. To save the file with the new grid system origin, on the File menu, click Save.
Add guides to the workspace

1. Display the rulers.
2. On the View menu, click Guides > Show Guides.
12
User Guide Undo and repeat operations
3. Click a ruler and drag a guide onto the workspace. You can select and drag the guide to reposition it, as necessary.
4. To remove a guide from the workspace, drag it to a ruler.
5. To prevent the guides from being moved, on the View menu, click Guides > Lock Guides.
Undo and repeat operations

You can undo and redo an unlimited number of operations in the BlackBerry® Composer.
1. Click the Edit menu.
2. To undo an operation, click Undo.
3. To redo an operation, click Redo.
Specify the number of operations to undo and redo

Changing the number of times that you can undo an operation to a lower number can decrease the amount of required memory.
The default setting is unlimited.
1. On the Edit menu, click Preferences.

2. In the Preferences dialog box, click the Miscellaneous tab.
3. In the Undo section, specify one of the following:
• To specify an unlimited number of times that you can undo and redo operations, click Unlimited.
• To specify the maximum number of times that you can undo and redo operations, click Limited to, and specify the number
of operations.
13
User Guide Change preferences
Change preferences 2
Change the start preferences

You can specify the activity you want the BlackBerry® Composer to perform each time it starts. You can select the type of view
that displays when you open a project.

2. Click the General tab.
3. In the Composer drop-down list, perform one of the following actions:
Task Steps
Display the New Document dialog Click Create New Document.
box when you start the BlackBerry
Composer.
Display the Open dialog box when you Click Open File Dialog.
start the BlackBerry Composer.
Display a blank screen when you start Click Do nothing.
the BlackBerry Composer.
4. In the View mode drop-down list, perform one of the following actions:
Task Steps
Display the stroke and fill of objects. Click Full View.
Hide the fill color for objects. Click Stroke Preview.
Hide the fill and stroke colors and Click Shape Preview.
display only the outline of an object.
5. Click OK.
Change the gamma preferences

2. Click the Gamma tab.
3. The colored boxes on the left side of the dialog box display the settings. To change color settings, move the slide bars.
14
User Guide Change the ToolTip preferences
4. To synchronize the color settings, select the Link Channels check box.
5. Click OK.
Change the ToolTip preferences

2. Click the Miscellaneous tab.
3. To display tool tips when you pause on buttons in the BlackBerry® Composer UI, select the Show Tool Tips check box. This
setting is selected by default.
4. Click OK.
Set theme button preferences

By default the theme buttons you create are based on the BlackBerry® device you selected for the project. You can set the size
and style of the theme buttons to a different BlackBerry device than the one you selected for the project. For example, if you
created a project for the BlackBerry® Bold™ 9700 smartphone, the size of the default buttons are Precision 80 x 80, but you can
change the theme button preference to BlackBerry® 8700 Series where the size of the default buttons are Dimension 64 x 48.
All subsequent theme buttons that you create in the project use Dimension 64 x 48 style and size.
1. From the Edit menu, click Preferences.

2. Click the Miscellaneous tab.
3. Perform one of the following actions:
• To set the theme button size and style to a specific BlackBerry device, from the Theme Button Icons drop-down list,
click a BlackBerry device.
• To select the theme button from a folder, from the Theme Button Icons drop-down list, click Browse and select an image.
If you want to create your own icons, the file names must follow the naming conventions in the BlackBerry Composer. You
can look in the program files for examples of file names. For example, if you want to find the name for an icond for a
BlackBerry Bold 9700 smartphone, look in C:\Program Files\Research In Motion\BlackBerry Theme Studio 5.0\samples
\Themes\Images\Precision360x480\icons
4. To use the theme icon buttons for all new projects, select the Always use these icons check box.
5. Click OK.
Change the BlackBerry Smartphone Simulator preferences

Before you use the BlackBerry® Smartphone Simulator to test your theme, you must specify the screen resolution, the BlackBerry
device model, and the BlackBerry® Device Software version to simulate. The BlackBerry Composer populates the list of models
based on the BlackBerry Smartphone Simulator that you installed on your computer and the resolution that you select.
15
User Guide Change transparency preferences
2. Click the Simulator tab.

3. For each BlackBerry device screen resolution, specify the following values:
• Resolution
• Model
• OS Version
4. To start the BlackBerry Smartphone Simulator when the BlackBerry Composer starts, select the Load simulator on
startup check box.
Change transparency preferences

You can change the transparency preferences to make the transparency pattern easier to see on different backgrounds. For
example, you can use a lighter transparency pattern to indicate transparency over a darker background.
2. Click the Transparency tab.
3. In the Color Settings drop-down list, click a shade for the transparency.
4. Click each color box and click a color for the transparency.
Change tool properties

When you start the BlackBerry® Composer, by default all tool properties are reset to their default values. You can save sets of
properties for future use and to restore tool settings.
1. Click a toolbox icon.
2. Adjust the relevant controls on the Inspector.
You cannot change the Transformation, Select, Hand, and Zoom tools because they have no properties to adjust. When one
of these tool properties is selected, the Inspector panel displays the "No inspector available" message.
Tip: When you select an object on the canvas or on the Objects panel, the Inspector remembers its properties and uses them
the next time you select the tool. However, if you close the BlackBerry Composer without saving the properties, the changes
will not appear when you reopen the application.
16
User Guide Creating objects
Creating objects 3
You can create line, shape, text, user input, button, and animation objects, by using the tools on the toolbox and by changing the
properties on the Inspector.
Create a line
1. On the toolbox, click the Line tool.
2. On the workspace, drag the pointer to where you want the line to end.
3. To create a line that is at a multiple of 45 degrees, press SHIFT and drag the pointer.
4. On the Inspector, change the properties for the line.
Create a rectangle or square

1. On the toolbox, click the Rectangle tool.
2. On the workspace, drag the pointer until the object is the size that you want.
3. To create a square, press SHIFT and drag the pointer.
4. On the Inspector, change the properties for the rectangle object.
Create a rounded rectangle or rounded square

The maximum X- or Y-axis radius length that the BlackBerry® Composer displays for the roundness of corners is half the height
or width of the shape. If you type a value that exceeds half the height or width of the shape, the BlackBerry Composer processes
the value as half the height or width, and does not change the values in the Inspector. The BlackBerry Composer stores the value
and applies it if you resize the shape such that the value is less than or equal to half the height or width of the shape.
1. On the toolbox, click the Rounded Rectangle tool.

2. On the workspace, drag the pointer until the object is the size that you want.
3. To create a rounded square, press SHIFT and drag the pointer.
4. To change the roundness of the corners, on the Inspector, click the Rounded Rectangle tab.
5. In the X and Y fields, type the X-axis and Y-axis radius lengths, or click the arrow and move the slide bars to adjust the value.
6. On the Inspector, change additional properties for the rounded rectangle object.
17
User Guide Create an ellipse or circle
Create an ellipse or circle

1. On the toolbox, click the Ellipse tool.
3. • To create an ellipse, drag the pointer until the object is the size that you want.
• To create a circle, press SHIFT and drag the pointer.
4. On the Inspector, change the properties for the object.
Create a freehand path

1. On the toolbox, click the Freehand tool.
2. On the workspace, click and draw a freehand path.
3. On the Inspector, adjust the properties for the path.
Create an elliptical arc

1. On the toolbox, click the Arc tool.
2. On the workspace, drag the pointer.
3. To change the elliptical arc properties, in the Inspector, click the Arc tab.
4. In the X and Y fields, type the X- axis and Y-axis radius lengths.
5. To adjust the angle of the X-axis radius, in the Axis Rotation field, type the rotation angle in degrees.
6. To draw the arc as the longer distance around the ellipsis on which the arc is based, select the Large Arc check box.
7. To draw the arc on the negative side of the X-Axis radius, select the Flip check box.
Create a polygon or polyline

1. On the toolbox, click the Polyline tool.
2. On the workspace, drag the pointer and click to create each path segment.
3. To end the path without closing it, double-click the desired endpoint, or press ENTER.
4. To close the path, double-click the starting anchor point.
Create a Bézier curve

1. On the toolbox, click the Bézier tool.
18
User Guide Creating text
2. On the workspace, click to position the starting anchor point.

3. Move the pointer to the next anchor point and click.
4. Drag the pointer to adjust the curve and to create the control point that you can control to change the direction and shape
of the curve.
5. To add additional path segments, repeat steps 3 and 4.
6. To end the path without closing it, double-click the desired endpoint, or press ENTER.
7. To close the path, double-click the starting anchor point.
8. Adjust the control points as necessary to change the shape and direction of the curve.
Creating text
You can create the following kinds of text:
• Simple text: Simple text is a single line of text.
• Text on a curve: A text-on-curve object is aligned to an existing path. The path to which you align the text becomes part of
the text-on-curve object. You can no longer select or change the path.
Create a simple text object

1. On the toolbox, click the Text tool.
2. Type the text.
3. On the Inspector, change the font properties for the text object.
Create text on a curve

1. Create a path by using any of the drawing tools.
2. On the toolbox, click the Text on Curve tool.
3. On the workspace, click the path that you created.
4. Type the text.
5. Press ENTER to close the text editing mode.
6. On the Inspector, change the font properties for the text.
Edit text
1. On the toolbox, click the Select tool.
2. On the workspace, double-click the text that you want to edit.
3. To position the cursor in the text, click at the appropriate location.
19
User Guide Creating user input fields
4. To highlight the text that you want to edit, perform one of the following actions:
• To select a part of the text, drag the pointer over the text.
• To select an entire word, double-click on the word.
• To select all of the text, click three times.
5. Edit the text on the workspace.
6. On the Inspector, change the text properties.
7. Press ENTER to close the editing mode.
Convert text to Bézier curves

1. On the toolbox, click the Select tool.
2. On the workspace, click the text that you want to convert.
3. On the Object menu, click Convert to Bézier. The BlackBerry® Composer converts the text object to a series of Bézier path
segments.
After you convert text to a Bézier curve, you cannot edit the text.
Creating user input fields

You can create text fields for users to type text into and you can create a drop-down list with predefined options from which
users can select an option. After you create user input fields, you must create an action to submit a form and include the URL.
Create a text entry field

1. On the toolbox, click the Text Area Form tool.
2. On the workspace, drag the pointer until the text field is the size that you want.
3. To display text by default , on the Inspector, click the Properties tab and in the Text Area field, type the default text.
4. To create a form with more than one field for users to type in, select the Multiline check box.
5. In the Field Name field, type a reference ID for the field. The reference ID associates the field with the text that the user
types into the field.
Create a drop-down list

1. On the toolbox, click the Selection Form tool.
2. On the workspace, drag the pointer until the drop-down list is the size that you want.
3. On the Inspector, click the Properties tab.
20
User Guide Defining the viewable screen area
4. To add items to the selection list, click Add Item.

5. In the Label field, type the name of the item to display to the user.
6. In the Value, type the value that the user can select.
7. To add additional items to the selection list, repeat steps 4 to 6.
8. Use the arrows beside the list of items to change the order in which they are listed.
Defining the viewable screen area

The BlackBerry® Composer includes a Camera tool that you can use to define the view box. The content in the view box is the
part of the canvas that users view on their BlackBerry devices. When you select the Camera tool, the BlackBerry Composer displays
the view box over the canvas.
By scaling the view box or repositioning it on the canvas you can animate the view box to create effects similar to those you can
create using a video camera. For example, you can simulate zooming in and out of the scene on the canvas by animating the size
of the view box over time or you can simulate panning across the canvas by animating the position of the view box.
You might not know the dimensions of the view port on the BlackBerry device when you create your content. By default, the
content stretches to fill the entire BlackBerry device screen, which can distort the content.
To avoid stretching the content to fit the BlackBerry device screen, you can use the Preserve Aspect Ratio property for the Camera
tool to control resizing the contents of the view box.
21
Create a view box

The view box displays only when you use the Camera tool. You cannot select the view box by using the Transformation tool and
it does not appear on the Objects panel.
1. On the toolbox, click the Camera tool. The view box appears on the canvas. By default, the view box has the same dimensions
as the canvas.
2. Click the view box to select it, then resize and reposition it as necessary.
3. To prevent the content from stretching on the BlackBerry® device screen, specify the Preserve Aspect Ratio settings.
Change an existing view box

1. On the Toolbox, click the Camera tool. The view box appears on the canvas at the size and position you specified for the
current frame.
2. To prevent the content from stretching on the BlackBerry® device screen, specify the Preserve Aspect Ratio settings.
Preserving the aspect ratio of the view box

Aspect ratio refers to the ratio between the height and the width of a rectangular object.
You can preserve the aspect ratio of the view box when it is displayed in a view port on a BlackBerry® device that has a different
aspect ratio. By default, the BlackBerry Composer does not preserve the aspect ratio of the view box. Instead, content is stretched
so that it fits the view port.
You can specify how the BlackBerry device scales and aligns the view box in the view port.
• Meet: The BlackBerry device scales and aligns the view box so that there is no loss of content, and adds transparent padding
around the content.
• Slice: The BlackBerry device clips the view box so that the content fills the view port with no padding.
The view box and view port The view box and view port are of different dimensions
are of equal dimensions
22
Preserve Aspect Ratio: Preserve Aspect Ratio: On Preserve Aspect Ratio: On Preserve Aspect Ratio: Off
Ignored
Scaling: Meet Scaling: Slice The aspect ratio is not
The dimensions of the view preserved. The content in the
Alignment: Centered Alignment: Centered
box and view port are view box is stretched to fit the
identical. The view box aspect The content in the view box is The content in the view box is view port.
ratio is not changed. horizontally and vertically horizontally and vertically
centered and scaled to fit the centered and scaled to fill the
view port. No content is view port. The excess content
clipped. is clipped.
Preserve the aspect ratio in the view box

1. On the Toolbox, click the Camera tool. The view box appears on the canvas.
2. In the Inspector, click the Camera tab.
3. Select the Preserve Aspect Ratio check box.
4. To uniformly scale the content to fit into the view port, with no clipping, select the Meet option. The BlackBerry® device
scales and aligns the view box so that there is no loss of content, and adds transparent padding around the content.
5. To prevent scaling, select the Slice option. The BlackBerry device clips the view box so that the content fills the view port
with no padding.
23
User Guide Creating buttons
6. To specify how to align the graphic in the view port, click a square on the anchor grid. For example, to align the content to
the upper-left corner of the view port, click the upper-left square on the grid.
Create a Zoom effect

Animate the Scale transformation property, to reduce or increase the size of the view box over time.
Create a Pan effect

Animate the Position transformation property.
Creating buttons
You can create buttons that can cause an event to occur. For example, a user can click an item in a drop-down list, and click a
button to send the information to the content server.
In the BlackBerry® Composer, buttons are complex objects that are made up of one or more objects. For example, a button might
be made up of a rectangle and text. Buttons have four states. The Animation key editor displays a timeline for each button state.
The states for buttons are identified by an icon ordered as follows, from left to right:
Button Description
Initial State: the initial appearance of the button
On Focus In: the button when it has focus
On Focus Out: the button when it does not have focus
On Activate: the button when the user clicks it
You can change the look and feel for each state. For example, you can use a brighter color for the On Focus In state to provide
a visual highlight when the button has focus.
The timeline for each state is independent of the main project timeline, so you can animate or add actions to each state. For
example, you might want to animate the button in the On Activate state to make the button appear to be pressed when the user
clicks on it.
When you create a button, the workspace is in editing mode. Only the component objects that make up the button are visible on
the canvas. In editing mode, you can access each of the button states on the Animation key editor.
24
User Guide Creating buttons
Create a button
1. Display the Animation panel.
2. On the Object menu, click Create Button.
The workspace is in editing mode and all other objects on the workspace are hidden.
3. Use the drawing and text tools to create the button in the initial state.
4. Animate the Initial State button as desired.
5. On the Animation key editor, click the On Focus In button.
6. Change and animate the button to define how the button appears when it is in focus.
7. Repeat Steps 4 and 5, for the On Focus Out and On Activate states.
8. On the Object menu, click End Editing.
9. On the Inspector, add actions for each state, as necessary.
Convert an object to a button

1. On the Toolbox, click the Transformation tool.
2. On the workspace, select the object or objects that you want to convert.
3. On the Object menu, click Convert to Button.
4. On the Object menu, click Edit.
5. In the Animation key editor, select a button state.
6. Animate the button, as desired.
7. Repeat Steps 5 and 6 for each state.
25
User Guide Creating animation objects
Creating animation objects

You can use animation objects to create a small animated sequence that an event can start. You can manipulate animation
objects just as you would any other object. You can move, scale, or rotate an entire scene.
Each animation object has its own timeline, independent of the main project timeline, that starts only when an event starts the
animation object.
Create an animation object

1. Display the Animation panel.
2. On the Object menu, click Create Animation. The workspace is in editing mode.
All other objects on the workspace are hidden.
3. Use the drawing and text tools to create the scene.
4. Animate the scene, as desired.
Convert a scene to an animated object

1. On the toolbox, click the Transformation tool.
2. On the workspace, select the object or objects you want to convert.
3. On the Object menu, click Convert to Animation.
5. Change the image for each state, as desired.
Working with objects

To modify an object, you must first select it using the Transformation tool. To change the properties of a selected object, use the
Inspector, which displays all the properties for the selected object. To modify the Transformation properties (position, scale, and
rotation) directly on the workspace, use the Transformation tool. You can only select and work with objects on the active layer.
When you select one or more objects, a bounding box appears around them. The bounding box is a frame with handles you can
use to manipulate the objects.
Bounding boxes around simple objects are red. Around complex objects such as buttons and animation objects, bounding boxes
are green.
26
User Guide Working with objects
Select an object
2. On the workspace, click the object you wish to select. The selected object is also highlighted in the Objects and Animation
panels.
Use the Objects panel to select the object if it is difficult to access (for example, if it is behind or partially behind another object,
or the workspace is very crowded).
Select multiple objects

• Press and hold the SHIFT or CTRL key, then click the objects you want to select on the workspace.
• On the workspace, drag the pointer to select the objects using a selection box.
The Inspector displays the properties for the bottom-most object in the selection.
Move a selected object on the workspace

With the Transformation tool, click within the bounding box and drag the selected object to the desired location on the
workspace.
When the pointer changes to the Reposition indicator, you can move the object.
Resize a selected object using the bounding box

With the Transformation tool, perform one of the following actions:
• To adjust both the height and width of the object, click a corner handle of the bounding box frame and drag it to the
desired size.
27
User Guide Adjusting path segments
To scale the height and width uniformly, press the SHIFT key while you resize the object. To scale the height and width
uniformly around the object center, press the ALT key while you resize the object.
• To adjust the height only, click the center handle at the top or bottom of the bounding box frame and drag it to the
desired size.
• To adjust the width only, click the center handle at the left or right of the bounding box frame and drag it to the desired
size.
Rotate a selected object

1. With the Transformation tool, click the bounding box frame and drag the object to the desired rotation angle.
When the pointer changes to the Rotate indicator, you can rotate the object.
2. To adjust the rotation center, drag the rotation handle to the desired position. You can place the rotation handle anywhere
inside or outside the object.
To reset the rotation center to the center of the selected object, on the Objects menu, click Reset Rotation Center.
Duplicate an object
1. Select the object.
2. On the Objects menu, click Duplicate.
The new object is positioned at the same coordinates on the workspace as the original, and placed at the top of the stack
of objects on the current layer.
3. Move the new object to the desired location on the workspace.
Adjusting path segments

Irregular shapes, such as polygons, polylines, freehand paths, elliptical arcs, and Bézier curves are made up of a number of path
segments. Path segments can be straight or curved: polygons and polylines contain one or more straight path segments; freehand
paths, elliptical arcs, and Bézier curves can include straight and curved path segments.
Path segments are defined by the position of the following two kinds of points:
• Anchor points specify the beginning and end of the path segment
• Control points change the direction and shape of a curve
In the BlackBerry® Composer, anchor points appear as red squares along the path. When you select an anchor point on a curve,
the control points appear. Control points appear as black circles, connected to an anchor point by a direction line.
28
User Guide Adjusting path segments
You can use the Transformation or Select tool to move anchor points and control points to refine a shape. You can use the Add
Points and Remove Point tools to add or remove anchor points. When you add anchor points to a path, you increase the number
of path segments and you have more control over the shape. When you remove anchor points, you simplify the path.
Move anchor points on a path

1. On the toolbox, click the Transformation tool or the Select tool.
2. On the workspace, double-click the object. The anchor points appear on the path.
3. Drag the anchor point to its new position.
Change the shape of a curve

1. On the Toolbox, click the Transformation tool or the Select tool.
3. Click an anchor point to display the control points that define the curve.
4. Drag a control point to adjust the shape of the curve.
When you rotate the control point around the anchor point, you change the shape of the path on both sides of the anchor
point. You can increase or decrease the distance between the control point and the anchor point to increase or decrease
the depth of the curve.
Add anchor points to a shape

1. On the Toolbox, click the Add Points tool.
3. Place the pointer on the path where you want to add the new point, then click.
4. Repeat step 3 for each additional point you want to add.
Remove anchor points from a shape

1. On the Toolbox, click the Remove Points tool.
29
User Guide View object properties
3. Click the anchor point you want to remove.

4. Repeat step 3 for each additional anchor point you want to remove.
View object properties

You can use the Inspector to view or change the properties of an object. The Inspector controls formatting for most objects and
many BlackBerry® Composer settings. The tabs and the options in the Inspector change depending on the tool or object that
you select.
The Inspector displays the name of the objects beneath the tabs.
To view object properties, press CTRL+4.
Options in the Inspector

The Inspector includes the following tabs:
Icon Tab Description

Text configures the font face, font size, and other text attributes for simple text
objects
Text on Curve configures the font face, font size, and other text attributes for text-on-
curve objects
Freehand Path configures the anti-aliasing property for freehand path objects
Bézier configures the anti-aliasing property for Bézier objects
Line configures the anti-aliasing property for line objects
Polyline configures the anti-aliasing property for polyline objects and polygon
objects
Rectangle configures the anti-aliasing property for rectangle objects
Rounded Rectangle configures the radius of round corners and the anti-aliasing property for
rounded-rectangle objects
Ellipse configures the anti-aliasing property for ellipse objects
Arc configures the ellipse radius, axis rotation, and other arc options, and the
anti-aliasing property for elliptical arc objects
Text Area configures the default text and field name for text-area objects
30
User Guide Specifying shape properties
Icon Tab Description

Selection List Specifies the items that appear in selection-list objects
Launch Application configures the application to start for a Theme button
Theme Button Animation configures the animation options for a Theme button or previews an
animation object
or
Animation
Transform configures the object size, position, rotation, visibility, and other properties
for a Theme button
Properties configures the font face and font color properties for text in text area and
selection list objects
Camera configures the Preserve Aspect Ratio property for the view box
Button configures events for a button object and previews each button state
Stroke configures the stroke color, width, and style for vector shapes and text
objects
Fill configures the fill color or pattern for vector shapes and text objects
Path Animation configures a path to bind an object with
Transformation configures the rotation, dimensions, and visibility for all objects
Bitmap Image configures interpolation properties for rasterized bitmap image objects
Composite applies the optical composite method for bitmap image objects
Filters configures filters for bitmap image objects
Effects configures effects for bitmap image objects
Specifying shape properties

Each shape has its own tab on the Inspector on which you can set properties.
All shape objects have an anti-aliasing property that you can configure. Anti-aliasing smooths the appearance of jagged lines
between solid colors. Objects that have curves or diagonal lines might also have jagged edges or lines.
Rounded rectangles and elliptical arcs have properties that you can configure to control the shape of those objects.
31
User Guide Specify text object properties
Smooth a shape’s edges

1. On the workspace, click an object.
2. On the Inspector, click the shape-specific tab.
3. Click Anti-aliasing.
Anti-aliasing adds more intermediate colors, which reduces the compression ratio of the image. To minimize file size, try
anti-aliasing with the fewest colors possible.
Change the roundness of a rounded rectangle object

1. On the workspace, click a rounded rectangle object.
2. In the Inspector, on the Rounded Rectangle tab, perform one of the following actions:
• In the X and Y fields, type the radius length of the X-axis and Y-axis.
• Click the arrow that is adjacent to the axis value and move the slide bar to adjust the value.
The radius length of the X-axis or Y-axis radius length can only be displayed as a maximum of half the height or width of
the shape. If you configure a value that exceeds half of the height or width, the BlackBerry® Composer processes the value
as if it is half the height or width, but the BlackBerry Composer does not adjust the value (that you provided to reflect the
actual radius length as displayed). The BlackBerry Composer stores the value that you provided and applies it if the shape
is stretched so that the value is less than or equal to half the height or width.
Change the shape properties of an elliptical arc

1. On the workspace, click an elliptical arc object.
2. In the Inspector, click the Arc tab.
3. In the X field and Y field, type the radius length of the X-axis and Y-axis.
4. To adjust the angle of the X-axis radius, in the Axis Rotation field, type the rotation angle, in degrees.
5. To draw the arc as the longer distance around the ellipse that the arc is based on, click Large Arc.
6. To draw the arc on the negative side of the X-axis radius, click Flip.
Specify text object properties

You can view and change text object properties and text-on-curve properties.
In the Inspector, click the Text or Text on Curve tab.
32
User Guide Specifying stroke and fill properties
Text properties in the Inspector
Property Description
Text This property contains the text that an object displays. You can change the text from within
this field.
Style This property specifies the font style, such as bold or italics. The font styles that you can use
depend on which styles are available for the font face that you are using.
Underline This property underlines the text.
Strikethrough This property renders a line through the text.
Horizontal and Vertical This property specifies the width and height of the text.
Constrain This property links the Horizontal size control and the Vertical size control. If you change the
value for one control, the value for the other control changes as well. If you turn off
constraining, you can configure the height and width of the text separately and the text is
stretched appropriately.
Spacing This property changes the space between letters. A spacing value of 0 indicates that letters
display according to the value that the font face specifies. You can use this property to squeeze
letters together (by using negative values) or to space letters further apart (by using positive
values).
Shearing This property changes the slant or angle of the text. You can apply shearing to fonts that are
already specified as oblique or italic. A shearing value of 0 indicates that the letters are
rendered at the slant that the font face specifies. Positive values slant the text to the right,
while negative values slant the text to the left.
Offset This property specifies the distance into the path that you want to start the text at, in pixels.
This property is only available for text on curve objects.

Flip Horizontal and Flip This property mirrors the text horizontally or vertically.
Vertical
Anti-aliasing This property specifies whether font edges are smooth.
Specifying stroke and fill properties

You can use the Stroke tab on the Inspector to specify the stroke properties and fill properties for vector shape objects and text
objects. The stroke is the outline of an object; the fill is the inside of an object.
33
User Guide Specifying stroke and fill properties
You can choose to specify a color for the stroke, or you can choose a stroke value of None to not display an outline for an object.
If you specify a color, you can also specify the stroke width and several other stroke attributes.
You can choose to fill an object with either a color or a pattern, you can choose to not fill the object at all.
You can animate the stroke color, stroke width, and fill color properties.
Specify the stroke or fill color

1. In the Inspector, click the Stroke or Fill tab.
2. In the drop-down list, click Color.
• Click the color swatch and then click a color for the object.
• Click the eyedropper tool that is adjacent to the color swatch and then click a color that is displayed anywhere within
the BlackBerry® Composer window.
• To specify a color, move the Red, Green, and Blue slide bars.
4. To configure the opacity of the stroke or fill color, move the Alpha slide bar to the appropriate level.
5. To constrain the color to the nearest value on a standard 216-color palette, select Web safe only.
If you select the Web safe only option, the Alpha setting has no effect.
Remove the stroke or fill color of an object

1. On the Inspector, click the Stroke or Fill tab.
2. In the drop-down list, click None.
If you specify None as the stroke value or fill value, you cannot animate the stroke or fill. To animate a stroke or fill color,
you must select a starting color and an ending color. You cannot animate the starting or ending values from None to Color.
To transform to or from a transparent stroke value or fill value, use the Alpha slide bar on the Color panel to specify the opacity
of the stroke or fill. A value of 0 renders the stroke or fill completely transparent. You can animate the value of the Alpha channel.
If you want to animate both the stroke value and fill value together, you should animate object visibility or object opacity rather
than animating the value of the Alpha channel for each property separately.
Specify the stroke style attributes

1. In the Inspector, click the Stroke tab.
2. In the Width field, type the thickness of the object stroke, in pixels.
3. Configure any of the following settings:
• In the Cap drop-down list, click the shape of the ends for an open path.
34
User Guide Working with bitmap objects
• In the Join drop-down list, click the shape for straight corners.
• In the Dash drop-down list, click a dash pattern for the stroke.
• In the Offset field, type the distance into the stroke that you want to start the dash pattern at, in pixels.
Specify a pattern fill

1. On the Inspector, click the Fill tab.
2. In the drop-down list, click Pattern.
3. Click the Browse icon and browse for an image that you want to use as the pattern tile.
4. In the Offset X field and Offset Y field, specify the originating points of the pattern tiling. These values specify the distance,
in pixels, from the lower-left corner of the bounding box to place the first complete pattern image. The pattern image is
tiled from that point to fill the entire object.
5. In the Alpha field, specify the opacity of the pattern.
You can change the pattern fill image at any time; the X offset, Y offset, and alpha values do not change.
Working with bitmap objects
Change a bitmap image

1. In the Inspector, click the Image tab.
2. Click Change Bitmap and browse to the new bitmap image.
Specify how an object blends with background objects

1. In the Inspector, click the Composite tab.
2. In the Composite drop-down list, click a blending method.
Add one or more filters to a bitmap image

You can animate filter settings.
1. In the Inspector, on the Filters tab, click Add Filter.

2. In the drop-down list, click the filter that you want to apply.
3. Repeat steps 1 and 2 for each additional filter you want to apply.
4. In the Selected Filter list, click the up arrow and down arrow to specify the order that the filters are applied in. By default,
filters are in order from the last filter applied to the first filter applied.
35
5. To change the settings of a filter, in the Selected Filters list, select the filter and click Properties.
6. To remove a filter, in the Selected Filters list, select the filter and click the Delete button.
Apply one or more effects to a bitmap image

You can animate effects settings.
1. In the Inspector, on the Effects tab, select an effect.

2. Click the button that is adjacent to display the Properties dialog box for the effect that you selected.
3. Specify appropriate properties for the effect.
4. Repeat steps 1 to 3 for each effect that you want to apply.
Blending rasterized images

You can blend the stroke and fill values of rasterized objects or bitmap images with the stroke and fill values of background
objects that are located on the same layer. The BlackBerry® Composer calculates the fill and stroke values of the parts of the
objects that overlap the background objects based on the blending method that you choose. To apply a blending method, you
must rasterize an object.
The BlackBerry Composer calculates the blended color values by combining the values of the RGB color channels for each pixel
where the rasterized image and one or more background objects overlap. For example, suppose you create and rasterize a
rectangle with a fill value of RGB 127, 0, 0 (dark red) that overlaps another rectangle with a fill value of RGB 127, 127, 0 (olive
green), and apply the Subtract blending method to the dark red rectangle, the RGB values of the overlapping section change to
RGB 0, 0, 0 (black). If you apply the Add method, the RGB values of the overlapping section are RGB 255, 127, 0 (orange).
The BlackBerry Composer calculates RGB values using the range 0 through 1 rather than 0 through 255. The only method that
this calculation affects is the Multiply method. For example, a dark red rectangle has RGB values of 0.5, 0, 0, and an olive green
rectangle has RGB values of 0.5, 0.5, 0. When you multiply the three sets of values with each other the result is 0.25, 0, 0, which
is equivalent to 63, 0, 0 (darker red).
Blending methods for rasterized objects and bitmap images
Blending method Effect

Normal This blending method has no effect (no blending method is applied).
Multiply This blending method multiplies the RGB values of the object and the RGB values of the
underlying object with each other for each of the three channels.
Screen The object burns through underlying objects. This action does not effect the background color.
36
Blending method Effect

Erase This blending method removes the object from the canvas. If an object is underneath a bitmap
object, the shape of the bitmap object might create the effect of a cut-out on the underlying
object.
Add This blending method adds the RGB values of the object and the RGB values of the underlying
object to one another for each of the three channels.
Subtract This blending method subtracts the RGB values of the underlying object from the RGB values
of the object for each of the three channels.
Darkest This blending method uses the lower of the two RGB values for each of the three channels.
Lightest This blending method uses the higher of the two RGB values for each of the three channels.
Difference This blending method uses the difference between RGB values for the object and the RGB
values for underlying objects for each of the three channels.
Average This blending method uses the average of the RGB values for the object and the RGB values
of underlying objects for each of the three channels.
Invert This blending method uses the object's alpha level to invert the underlying objects.
Dissolve This blending method creates a random pattern based on the opacity of each pixel.
If you use the Dissolve blending method, you must configure the opacity level of the object
to view the effect.
Replace Hue This blending method uses the hue of the object on underlying objects.
Replace Saturation This blending method uses the saturation of the object on underlying objects.
Replace Luminosity This blending method uses the luminosity of the object on underlying objects.
Replace Color This blending method uses the hue and saturation of the object on underlying objects.
XOR Mask This blending method computes the difference in object opacities, determines the absolute
value, and displays the dominant color.
Alpha Mask This blending method is the inverse of an erase. This method uses a composite of the object
shape to mask out all lower objects.
Using bitmap image effects
Effect Applies to this effect Description

Shadow Color Inner/Outer Shadow This effect changes the color of the shadow.
Glow Color Inner/Outer Glow This effect changes the color of the glow.
37

Intensity Outer Shadow This effect adjusts the opacity of the copy and the intensity of the
shadow or glow effect.
Inner Shadow
Intensity interacts with the opacity settings of the object and its
Outer Glow
layer. For example, if you configure an object’s opacity to be 200,
Inner Glow you must double the intensity to get the same effect.
Emboss & Bevel
Blur Outer Shadow This effect adjusts the sharpness of the edge of the shadow or
glow. A setting of 1 is a sharp edge and a setting of 0 turns off
Inner Shadow
the effect. This setting interacts with any blur filter that applies
Outer Glow to the object.
Inner Glow
Emboss & Bevel

Offset X Inner/Outer Shadow This effect adjusts the position of a copy relative to the original.
Emboss & Bevel

Offset Y Inner/Outer Shadow This effect adjusts the position of a copy relative to the original.
Emboss & Bevel

Low Color Emboss & Bevel This effect applies color to the shaded area below the image. You
can change the Offset X setting and Offset Y setting to change
the display of this color.
High Color Emboss & Bevel This effect applies color to the shaded area above the image. You
can change the Offset X setting and Offset Y setting to change
the display of this color.
Effect Type Emboss & Bevel The Full Emboss effect gives an object a 3D appearance and
displays it as raised or recessed from the background.
The Outer Bevel effect does not affect the object but applies
highlights and shadows to the background around the perimeter
of the object to display it as raised or recessed from the
background.
38
User Guide Changing transformation properties

The Inner Bevel effect gives the object a 3D look and applies
highlights and shadows to the object to make it appear in 3D.
Depending on how you apply lighting, the object can look raised
or recessed from the background.
Changing transformation properties

You can use the Transformation tab in the Inspector to specify transformation properties for an object to change the object’s
appearance. You can change an object's position, size, rotation angle, or you can skew its x-axis or y-axis. You can also configure
visibility properties and opacity properties.
You can also use the Transformation tool on the Toolbox to change the position, size, and rotation properties directly on the
workspace.
You can animate transformation properties.
Set the position coordinates for an object

2. In the Inspector, click the Transformation tab.
3. In the Position fields, type the object’s x-axis and y-axis coordinates.
The values represent the distance from the upper-left corner of the object’s bounding box to the left edge and top edge of
the canvas.
Scale an object
3. In the Scale fields, type the horizontal scaling factor and vertical scaling factor.
Scaling factors of 2 and .5 indicate that you want to double the object's width, but half the height of the original object size.
Skew an object
39
User Guide Managing objects
3. In the Skew fields, type the number of degrees that you want the object to skew along the object’s x-axis and y-axis,
respectively. Values must be between -89 and 89 degrees.
Rotate an object
2. In the Rotation field, on the Inspector’s Transformation tab, type the rotation angle of the object. A positive value indicates
a clockwise rotation; a negative value indicates a counter-clockwise rotation.
Values that exceed 360 degrees are permitted, and indicate that the object is rotated more than one full rotation. For
example, if an object has a rotation value of 0 in frame 1 and it makes two full clockwise turns over the course of an animation,
its value in the final frame is 720.
3. To change the point around which the object is rotated, in the Rotation Center fields, type the x-axis and y-axis coordinates
of the object’s rotation center.
4. To reset the rotation center to the center of the object, click Middle.
Make an object visible or invisible for the current frame

2. In the Inspector, on the Transformation tab, turn Visibility on or off.
You can also make an object invisible if you click the Eyes button on the Objects panel.
Specify the opacity level of an object

3. In the Opacity field, type the opacity percentage. A value of 100 indicates that the object is completely opaque; 0 indicates
that the object is completely transparent.
Managing objects
Use the Objects panel to view, select, rename, order, and lock objects in the currently selected layer.
To access many of the operations that are available on the Objects menu, you can right-click anywhere on the Objects panel.
View the Objects panel.

Press CTRL+6.
Tip: You can also display the panel from the Window menu.
40
User Guide Managing objects
Select an object
2. On the workspace, click the object you wish to select. The selected object is also highlighted in the Objects and Animation
panels.
Use the Objects panel to select the object if it is difficult to access (for example, if it is behind or partially behind another object,
or the workspace is very crowded).
Rename an object
1. On the Objects panel, right-click the object’s entry.
2. Click Rename.
3. Type the new name.
Tip: To rename an object quickly, double-click the object name.
Move an object forward or back on the workspace

• Perform one of the following actions:
• To bring it forward, drag the object up the list.
• To move it backward, drag the object down the list.
Lock the position of an object

• On the Objects panel, click the Lock button.
You cannot change the position of a locked object, but you can modify its other properties on the Inspector.
Unlock the position of an object

On the Objects panel, click the Lock button again.
Group objects
1. Select the layer that contains the objects you want to group together.
2. Select the objects.
3. Click Object > Group. The Objects panel displays the group of objects as a single entity.
41
User Guide Converting groups to switchgroup animations
Ungroup objects
1. Select the group.
2. Click Object > Ungroup.
3. Choose one of the following options to determine how transformations or animations performed on the group of objects
will be handled.
• Apply transformation of the group to the objects: Any transformations or animations performed on the group as a
whole will be applied to the individual objects.
• Restore original state and position of objects: Any transformations or animations performed on the group as a whole
are removed.
4. Click OK. The Objects panel displays the individual objects.
Converting groups to switchgroup animations

Switchgroups apply to groups of objects. Use switchgroups with grouped objects to control the visibility of the component (or
child) objects within the group over time. At any given time during the animation of a switchgroup, either 0 or 1 child object of
the switchgroup will be visible. You cannot make all child objects of a switchgroup visible at once.
In the SwitchGroup Properties dialog box, you can specify which object is displayed at which frame of the animation. The Child
Animation list in the SwitchGroup dialog box displays each of the child objects and indicates at which frame each is displayed.
To control how the objects of a switchgroup are displayed, you can edit the list to add objects by name (or a value of None to
indicate no object) and specify at which frame that object becomes visible. An object stays visible until the animation reaches a
frame in which another object becomes visible, or until it reaches a frame in which a value of None has been applied. Objects
can be added more than once to the Child Animation list.
The effect of a switchgroup animation is very similar to a flip book of objects, in which each page contains a single image. As the
pages are flipped, each image is shown in succession to create an animated effect.
Convert a group of objects to a switchgroup

1. Select the group of objects that you want to convert into a switchgroup.
2. On the Inspector Transformation tab, select the SwitchGroup check box.
3. To specify the switchgroup properties, click the Edit button. The SwitchGroup Properties dialog box lists the name of the
group as it appears on the Objects panel. The Child Animation list displays each of the child objects in the order they are
displayed during the animation, and indicates at which frame each is displayed.
By default, the Child Animation list orders child objects by their relative position on the layer, with the bottom-most object
displayed at Frame 1, the next object at Frame 2, and continues upwards through the layer, with the top-most object listed
last.
4. In the Default Child drop-down list, specify the child that is visible when the animation is not playing.
42
User Guide Convert an object to a bitmap image
5. To change the frame at which a child is displayed, double-click the child object in the Child Animation list, then change
the value in the Frame field.
6. To display a child object an additional time, perform the following steps:
a. Click Add.
b. In the SwitchGroup Child box, select an object name. To hide all objects, select [None].
c. In the Frame box, type the frame number at which that object becomes visible.
d. Click OK.
7. To remove an instance of a child object from the animation, select the child from the Child Animation list, then click Remove.
8. Click OK.
9. To test the switchgroup, click the Play button on the Animation panel.
When setting the animation for the switchgroups, you must provide unique frame numbers for each object. If you add an object
and specify a frame already specified by another object, the new object will replace the old one. Use frame numbers that are
greater than frame number 1.
Change the switchgroup settings

1. On the canvas, select the switchgroup object.
2. On the Inspector Attributes tab, click the Edit button.
3. Change the switchgroup settings as necessary.
4. Click OK.
Convert an object to a bitmap image

The shapes and text that you create in BlackBerry® Composer are vector graphics; that is, they are composed of paths in which
the anchor points and curve control points are the only data used to define the exact shape and position of the path, rather than
by defining the content of each pixel as a bitmap image does.
You can convert a vector graphic object to a bitmap image by rasterizing it. Once you rasterize an object, you can no longer
modify properties such as the stroke or fill values, but you can apply a number of bitmap effects such as a bevel, that cannot be
applied to a vector graphic.
On export, the BlackBerry Composer converts text objects that use non-BlackBerry device system fonts into bitmap images.
1. On the workspace, select an object.

2. Click Object > Rasterize.
Convert an object to a button

43
User Guide Using catalogs
2. On the workspace, select the object or objects that you want to convert.
3. On the Object menu, click Convert to Button.
5. In the Animation key editor, select a button state.
6. Animate the button, as desired.
7. Repeat Steps 5 and 6 for each state.
Convert a scene to an animated object

2. On the workspace, select the object or objects you want to convert.
3. On the Object menu, click Convert to Animation. The workspace enters editing mode.
4. Modify the image for each button state, as desired.
Using catalogs
You can use the Catalog panel to save custom objects, colors, and patterns for later use. Adding items to the Catalog panel
creates a library that can be accessed whenever you open a project in BlackBerry® Composer.
The BlackBerry Composer has six default catalogs:
• Animations: stores predefined animation objects
• Buttons: stores predefined button objects
• Colors: stores predefined colors
• Images: stores pattern images that can be used as fills for objects
• Objects: stores static shapes, text, and rasterized images
• Sounds: stores imported sound files
You can create additional catalogs and specify the types of items they can store.
View the Catalog panel

• On the Window menu, click Catalog.
44
User Guide Using catalogs
Add a color to the Catalog

• Perform one of the following actions:
• On the toolbox, drag the color from the Stroke Swatch or Fill Swatch to the Catalog.
• On the Inspector, click the Fill or Stroke tab, then drag the color from the Color Swatch to the Catalog.
If you try to drag an item to a catalog that does not allow the selected type, the BlackBerry® Composer automatically adds the
item to the appropriate default catalog.
Add an object to the Catalog

• Drag the object from the Objects panel to the Catalog.
Add a pattern to the Catalog

1. On the Inspector, click the Fill tab.
2. Click Pattern from the drop-down list.
3. Drag the color from the Color Swatch to the Catalog.
Open a catalog
• Choose a catalog in the Catalog drop-down list.
Create a new catalog

1. Click the Catalog options icon, then click New.
2. In the Catalog Name field, provide a unique name for the catalog.
3. Define the types of items that you can add to the catalog. Select any combination of animations, buttons, colors, images,
objects, and sounds, or select All to permit all six.
Edit an existing custom catalog

1. Choose a custom catalog in the Catalog drop-down list.
2. Click the Catalog options icon.
3. Click Edit.
4. In the Catalog Name field, edit the name for the catalog.
5. Edit the types of items that you can add to the catalog.
45
User Guide Using layers
Delete a custom catalog

1. Choose a custom catalog in the Catalog drop-down list.
2. Click the Catalog options icon.
3. Click Delete.
Add a Catalog item to a project

1. Choose a catalog in the Catalog drop-down list.
2. Click the item you want to add.
3. Drag the selected item and perform one of the following actions:
• To add a color, drag the color onto the Fill or Stroke tab on the Inspector panel or the Fill or Stroke color swatches on
the toolbox.To add a color, drag the color onto the Fill or Stroke tab on the Inspector panel or the Fill or Stroke color
swatches on the toolbox.
• To add a pattern, drag the image onto the Fill tab on the Inspector panel.
• To add an animation, button, or static object, drop the object onto the Objects panel or the project canvas.
Delete an item from the Catalog

1. Choose a catalog in the Catalog drop-down list.
2. Click the item that you want to delete.
3. Click the Delete icon.
Using layers
Use layers to apply an effect to multiple objects. You can edit, hide, and lock objects within a layer.
From the Layers panel, you can perform one of the following actions:
• hide or view a layer in the document window
• copy, duplicate, delete, and create layers
• merge and rasterize layers
You can edit objects only for the active layer.
View the Layers panel

Press Ctrl+5.
46
Tip: You can also display the Layers panel from the Window menu.
Create a layer
On the Layers panel, click the New Layer button.
Duplicate a layer
On the Layers panel, click the Duplicate Layer button.
Delete a layer
1. On the Layers panel, select the layer you want to remove.
2. Click the Delete button.
View or hide layers

On the Layers panel, click the Eyes button to the left of each layer to view or hide layers.
By default, all layers are displayed on the workspace.
Rename a layer
1. On the Layers panel, double-click the layer description.
2. Type a new name for the layer.
Reorder layers
Layers are displayed in the Layers panel as they are ordered on the canvas; the first layer in the Layers list is the top-most layer
on the canvas, the second layer listed is next top-most, and so on. You can reorder the layers on the canvas by changing their
order in the Layers list.
In the Layers panel, drag the layer to the new position.
Rasterize one or more layers into a single bitmap image

1. On the Layers panel, select a layer.
2. Right-click the Layers panel.
3. Click Rasterize.
47
4. Select one of the following options:

• Current: Rasterizes all objects on the currently-selected layer into a single image.
• All: Rasterizes all objects on all layers into a single image on a single layer.
• Visible: Rasterizes all objects on all visible layers into a single image on a single layer. The newly created layer is placed
at the bottom of the Layers list.
• Up: Rasterizes all objects on the selected layer and the layer immediately above it in the Layers list into a single image
on a single layer.
• Down: Rasterizes all objects on the selected layer and the layer immediately below it in the Layers list into a single image
on a single layer.
• To Top: Rasterizes all objects on the selected layer and all layers above it in the Layers list into a single image on a single
layer.
• To Bottom: Rasterizes all objects on the selected layer and all layers below it in the Layers list into a single image on a
single layer.
Merge layers together

1. On the Layers panel, select a layer.
2. Right-click the Layers panel.
3. Click Merge.
• All: Merges all layers into a single layer.
• Visible: Merges all visible layers into a single layer. The resulting layer is placed at the bottom of the Layers list.
• Up: Merges the selected layer with the layer immediately above it in the Layers list.
• Down: Merges the selected layer with the layer immediately below it in the Layers list.
• To Top: Merges the selected layer and all layers above it in the Layers list into a single layer.
• To Bottom: Merges the selected layer and all layers below it in the Layers list into a single layer.
Delete objects in a layer

1. Select the layer. The objects in the layer are listed in the Objects panel.
2. On the Objects panel, select the object you want to delete. Click the Delete button.
48
User Guide Creating animated content
Creating animated content 4

You can create animation effects for your BlackBerry® Composer content by changing the values of certain object properties
over time.
Timeline animation is a combination of the following:
• Key frames: Key frames are the frames on the timeline at which you set a new value for one or more object properties.
• Interpolation: The BlackBerry Composer calculates the intermediate values for an animation for each frame between two
key frames.
Key frame animation

You can animate an object’s properties at specific points, or key frames, on the timeline. Key frame animation is sequential. To
use key frame animation, begin with the following principles:
• Select a starting frame on the Animation key editor, and set the initial property value for an object.
• Select the ending frame on the Animation key editor, and set the final property value for an object.
Each time you select a frame and change the value of a property, the BlackBerry® Composer adds a key to the Animation key
editor for the altered property at the selected frame. These keys signify a change in value for a property. Frames that contain a
key are referred to as key frames. The value you set for the property at each key frame are the key values.
The BlackBerry Composer interpolates the value of the property between key frames. You can configure interpolation parameters
using the tweening editor.
Non-linear animation
When the BlackBerry® Composer interpolates a property between two key frames, by default, it calculates the property change
for each frame to produce an even change across the frames. This is most evident when you animate position. When selected,
animated objects display a green line that represents the path of the object. On the green line, square indicators (the reference
points) display where the object will be drawn in each frame. When an object is first animated, these reference points are evenly
spaced.
49
User Guide View animation properties
You can change the way the BlackBerry Composer interpolates object properties between key frames. Use the tweening editor
to change both the spacing between reference points and the path that the reference points follow to create non-linear animation.
Tweening enables you to simulate real-world motion effects, for example, the curved paths, acceleration, and deceleration
characteristics of a bouncing ball. You can also use the tweening editor with other properties. For example, the tweening editor
can change color slowly at first and then speed up.
View animation properties

The following table lists the object properties that you can animate and the location of the properties on the Inspector and the
Animation panels.
• To view which properties you can animate for an object, expand the object on the Animation panel.
Property Inspector Panel Tab Animation panel property

Position Transformation tab Translation
Rotation Transformation tab Rotation angle
Rotation center Transformation tab Rotation center
Scale Transformation tab Scaling
Skew Transformation tab Skew X, Skew Y
Animation path Animate Path Motion Path
Visibility Transformation tab Visibility
Opacity Transformation tab Opacity
Stroke color Stroke tab Color-Stroke
Stroke width Stroke tab Stroke-Width
Fill color Fill tab Color-Fill
50
User Guide Editing animations
Editing animations
Use the Animation panel to control animation effects.
The Animation panel has three components:
• playback toolbar: The playback toolbar enables you to preview the animated effects within the BlackBerry® Composer.
• key editor: The key editor displays the frames of the timeline used for key frame animation.
• tweening editor: The tweening editor enables you to define animation behavior between key frames.
Using the key frame editor to manage key frames

The Animation key editor displays the frames of the timeline and the property keys, which are placed at each frame in which you
have defined a value for an animatable property.
51
User Guide Editing animations
From the key editor, you can set, add, and remove key frames and control how objects move or change appearance in your
BlackBerry® Composer animations. You can also add or remove frames to extend or shorten the animation length.
In addition to the property keys, the key editor also displays animation handles for objects and layers. Whenever you set or change
an animatable property, the BlackBerry Composer adds not only a new property key to the current frame, but it also adds an
object handle at the object level of the hierarchy, and a layer handle at the layer level. You can use these handles to control all
the property keys that are children of the handle.
For example, to move all the property keys that exist at a given frame for a given object, you can move the object handle to the
desired frame and all the property keys are moved along with it; similarly, to remove all property keys that exist at the same frame
for all objects within a layer, you need only delete the appropriate layer handle.
Configuring animation between key frames

Use the tweening editor to configure the interpolation method used between key frames to define the animation behavior. Using
the tweening editor, you can specify the transition behaviour and path behaviour (where applicable), which defines how
BlackBerry® Composer interpolates the values of a property between two key frames. The tweening graph at the right of the
editor shows a graphical representation of the value change.
52
User Guide Working with animation frames
Edit an animation using the Animation wizard

You can use the Animation Wizard to do the following:
• delete a range of frames
• add one or more frames before or after a specific frame
• resize animation length and preserve existing key values
To preserve key values when you remove frames, delete non-key frames. Deleting a key frame will delete the key value as well.
You cannot delete a key frame in which any key value it contains is one of only two key values for a given property.
1. On the Animation panel, click the Animation Wizard button.

• Resize Animation Length
• Delete Frames
• Insert Frames
3. Click Next.
4. Complete the information.
Working with animation frames

You can view frames in the Animation key editor. You can add or delete frames to increase or decrease the length of an animation
or a part of an animation. For example, if part of an animation is too erratic, you can add frames between the two frames where
the problem exists to refine the problem area. Similarly, if the export size of an animation is too large, you can delete frames from
the animation to decrease the size.
53
Select a single frame

Click the frame number.
Select a range of frames

Click and drag across a range of frame numbers.
Add a frame
1. On the key editor, select the frame after the point where you want the new frame to appear.
2. Click Animation > Insert Frame.
To add multiple frames, use the Animation Wizard.
Delete a frame
1. On the key editor, select the frames you want to delete.
2. Click Animation > Delete Frame(s).
Note:
• Deleting key frames removes the position or appearance properties stored in the key values in that frame and can
significantly alter the transition of objects in an animation.
• You cannot delete a key frame if it contains the only key for a given property.
Copy frames
1. Select the frame(s) you want to copy.
2. On the Edit menu, click Copy Frame(s).
3. Select the frame after the point where you want the copied frames to appear. For example, to insert frames between frames
6 and 7, select frame 7.
4. On the Edit menu, click Paste Frames.
Working with property keys and animation handles

You can use the property keys and animation handles to control animations that you create. You can create most of an animation
on the canvas at the object level, but you can also use the Animation panel to make more refined changes to an animation. You
can add, delete, and move property keys or animation handles to change the behavior of an animation at the following levels:
54
• Layer: A layer handle controls all child object handles and property keys that are located in the same frame. You can move
a layer handle along a timeline to adjust all the property keys that are located in a specific frame for all objects on the same
level.
• Object: An object handle controls all child property keys that are located in the same frame. You can move an object handle
along the timeline to adjust all the property keys that are located in a specific frame for an object.
• Property: A property key controls a single property.
On the Animation panel, layer handles and object handles are down arrows and property keys are yellow keys.
When you animate a property, the property has multiple keys across the timeline. At minimum, you must specify a starting value
and an end value at different points along the timeline to animate a property. A clock icon is displayed next to the property name
to indicate that it was animated.
Select keys or handles

Select layer or object handles to perform the following actions:
• Change the starting or ending position of an animation.
• Delete all property keys in the frame for the entire layer or object.
• Select property keys to move or delete position or attribute values.
Task Steps
Select all object handles and property keys in a single • Click a layer handle.
frame for an entire layer.
Select all property keys in a single frame for an object. • Click an object handle.
Select an individual property key. • Click a property key.
Select multiple layer handles, object handles or • Press SHIFT and click the applicable handles and
property keys. keys.
55
Task Steps
Select all keys for a property. • Double-click a key for the applicable property.
Creating keys
When you create a new object, the BlackBerry® Composer adds to the current frame a property key for every animatable property
as well as an object handle. Before adding each object, consider where you need keys and select an appropriate frame. Until you
add another key for a property, however, the property will remain static; its value will remain unchanged for every frame in the
timeline. To animate a property you must add at least one additional key somewhere along the timeline.
You can add new property keys in one of two ways:
• Selecting property at a specific frame, then right-clicking and selecting Add a Key. A new key will be placed on the key editor.
• Select a new frame in the animation key editor, then change the value of one or more of the object’s animatable properties.
For example, creating an object in one location in frame 1 will add an object handle and keys for each of the properties. If
you then select frame 10, then reposition the object on the canvas, a new key will be added for the object’s Translate property
at frame 10 on the key editor.
Adding a key serves to set the value of a property at a specific frame. Remember that for every frame between two key frames
for a property, the BlackBerry Composer interpolates a value based on the interpolation parameters you select in the tweening
editor (or based on a linear, even progression if no interpolation parameters have been selected). If you change which frame you
place a property key in (that is, if you move the property key forward or backward along the timeline), the value of that property
is recalculated for every frame between the new position of the key and the other key frame.
For example, if you set the fill color for an object to white in frame 1, and to black in frame 10, then for each frame in between,
the BlackBerry Composer must determine the fill value of the object. Assuming you have specified no tweening, the change will
be linear, with each frame getting 10% darker than the preceding frame, until the animation reaches frame 10 and the fill achieves
a value of 100% black. If you then move the key specifying the end value to frame 20, then the BlackBerry Composer must
recalculate the values for frames 2 through 19, with each frame now only 5% darker than the previous frame. However, if you fix
the value at frame 5 by adding a key to the fill color property, and then move the end value to frame 20, the values for frames 2
through 5 do not change. The BlackBerry Composer must interpolate new values between frame 5 (40% black) and frame 20
(100% black).
By adding a key for every object property at a particular frame, you can fix the appearance and position of an object at a given
point in the timeline of the animation.
Moving a property key or object handle

A layer handle appears on the key editor when you set a value for any property of any object within the layer. Using the layer
handles, you can move all of the keys at a given frame for a specific layer to another frame.
For example, if you create multiple objects in frame 5 and then decide to initialize the objects in frame 1, you can drag the layer
handle to frame one. All of the property keys set in that frame for all the objects on the layer also move.
56
User Guide Editing animation behavior between frames
Object manipulation is similar to layer manipulation in the sense that multiple property keys are impacted through a single
action. You can use object manipulation to move all of the keys for a particular object from one frame to another.
For example, if you set the end value of several of an object’s properties in frame 20, and later decide that you want all of those
properties to reach their end values in frame 30, you can drag the object handle from frame 20 to frame 30, and all the property
keys for that object in that frame will move with it.
Move a layer handle

1. Click a layer handle (the arrow indicator for the layer). The layer handle turns red to indicate that it is selected.
2. Drag the layer handle to the new frame. All the property keys in the same frame as the layer handle also move.
Move an object handle

1. Click an object handle (the arrow indicator for the object). The object handle turns red to indicate that it is selected.
2. Drag the object handle to the new frame. All the property keys associated with that object that are in the same frame as
the object handle will also move.
Changing property keys

Property manipulation provides the finest level of control over object attributes in your animation. By manipulating properties,
you can change how individual aspects of a given object animate.
You can move property keys from one frame to another, and add or delete property keys.
For example, consider an animation in which a geometric object moves across the screen over the first 10 frames, and a text
object changes color from frame 10 to 20. If you want to overlap the color change with the movement, drag the text object’s fill
color property key from frame 10 to an earlier frame.
When manipulating properties, you can also add and delete keys.
Editing animation behavior between frames

Using the tweening editor, you can define how BlackBerry® Composer determines values between key frames. There are two
configurable components that you can adjust to control how the values between key values are calculated:
• You can change the transition behavior, or motion, across frames. For example, you can specify a transition that starts slowly
and then accelerates as each frame passes. Modifying the transition motion is visually apparent when animating position;
if you specify an accelerating rate of change, the reference points used to show the object’s position at each frame will
initially be close together, then get increasingly further apart.
• For properties that involve position, such as Translation or Rotation Center, you can adjust the path of the reference points.
For example, instead of moving an object along a straight line between two points, you could make it move in a circular
motion as it progresses from the starting position to the end position.
57
You can combine Motion and Path behaviours to produce different results. The following diagram illustrates the use of accelerating
motion and curving paths to simulate a bouncing ball. After tweening, the path is curved and reference points are no longer
evenly spaced.
A minimum of two property keys (a begin and end value) are required to tween a property.
Motion behavior properties

Specify a Motion behavior to control how the object property transitions from the start value to the end value of the selected
segment.
Motion Behavior Setting Definition

Constant This is the default behavior. The property value changes in equal increments from the start
value to the end value.
Accelerating This behavior speeds up (accelerates) the rate of transition from start value to end value when
the Acceleration value is positive, or slows down (decelerates) the rate of transition when the
value is negative.
Oscillating This behavior takes a constant path between the start and end values and swings the property
value back and forth over that path as the animation progresses to the end value. The number
of times it swings is set by the Period count. Attenuation determines the significance of the
dampening factor and Amplitude determines the magnitude of the value change for each
swing.
Overshoot This behavior causes the property value to exceed the end value, then return past the end
value in the other direction. This process is repeated as specified by the Period count.
Attenuation determines the significance of the dampening factor and Amplitude determines
58
Motion Behavior Setting Definition

the length of the overshoot. Speed determines over what portion of the animation the effect
occurs; a value of 10 is balanced, under 10 is weighted toward the first frame, and over 10 is
weighted towards the last frame.
Discrete This behavior plots reference points at key frames only. Essentially, there is no transition
between frames at all; the object retains the start value until the key frame is reached, then
the end value is applied to the object property.
Path behavior properties

Specify a Path behavior to determine the path the object follows when moving from the start position to the end position of the
selected segment. You can only apply path behaviour to object properties that involve position, such as Translation, Rotation
Center, and Scaling.
Path behaviour setting Definition

Linear This is the default behavior. This behaviour moves the object along in a straight line between the
start position and end position.
Curving This behavior makes the object follow a curved path. Increase the Curve value option to create
a more pronounced curve. High settings create a path that spirals around and into the end
position. To reverse the curve direction, select the Start key frame or End key frame button.
Wave This behavior makes the object follow a wavy path. Period count determines the number of waves
in the path. Attenuation determines whether the waves are equal in depth or diminishing.
Amplitude determines the overall depth of the waves. To reverse the direction of the waves select
the Invert check box.
Circle This behavior creates a semicircular path for the object. To reverse the direction of the semicircle,
select the Invert check box.
Specify path and motion behavior

1. On the Animation panel, click the name of the object property you want to tween.
2. Click the key editor/Tweening Editor button to view the tweening editor with the tweening settings displayed for the
selected property, as shown in the following diagram.
59
3. In the Motion drop-down list, select the behavior that you want to control the spacing of the reference points.
4. In the Path drop-down list, select the behavior you want to control the path.
5. If applicable, select another segment and repeat steps 3 and 4.
6. Click OK.
Using the tweening editor toolbar

Objects with at least three key frames contain multiple segments that can be selected and viewed in the tweening editor. The
selected segment is highlighted in the tweening graph in blue. The tweening graph also displays the frame range for the selected
segment. To tween a different part of the animation, click a different segment in the tweening graph. You can access other
segments by using the Next Key Segment and Previous Key Segment buttons.
View and select a segment between frames

Use the tweening editor toolbar to view and select tweening segments between pairs of key frames.
• To scroll, click the Scroll button and drag the display area until the area you want appears.
60
Begin and end values

The Begin Value and End Value fields display the beginning and ending values of the property being tweened for a selected
segment. The fields in which the begin and end values are displayed vary, depending on the property. For example, Translation
has X and Y coordinate values, and Color-Fill has color swatches.
You can use these fields to change begin and end values without leaving the tweening editor.
61
User Guide Making content interactive
Making content interactive 5

Interactivity allows you to control how certain actions are triggered in your content. For example, you can use interactivity to add
the following functionality to your content:
• add rollovers to objects
• define hyperlinks that link to other content
• launch an application
• play animation sequences or sounds based on user actions
An interactive element comprises the following two components:
• an event, such as a button click, that is used as a trigger
• an action, such as the playing of an animation or sound, that is triggered by that event
The BlackBerry® Composer enables you to add interactive elements by defining an event trigger, then specifying the actions
triggered when the event occurs. One event can trigger multiple actions.
Using different combinations of event triggers and actions, you can create a variety of interactive effects.
For example, when you create an animation object, you create a self-contained animation with its own timeline; it is not based
on the main timeline of the BlackBerry Composer project, and may not begin playing when the content is loaded on the BlackBerry
device. To begin playing the animation object, it must be triggered by an event.
You can trigger the animation by defining any of the following types of events:
• user-initiated; for example, when a user clicks a button or presses a specified key on the BlackBerry device keypad
• timeline-initiated; for example, when the main timeline reaches a specified frame
• an event that is relative to some other action; for example, 5 seconds after Animation_X stops playing
Creating events that trigger actions

Events trigger actions; that is, when a given event occurs, the specified action is triggered. The BlackBerry® Composer supports
the following event types:
Event trigger type Description

Button Triggers an action when the user performs one of the following actions:
• clicks on the button using the Select key (On Activate state)
• scrolls onto a button object (On Focus In state)
• scrolls off a button object (On Focus Out state)
62
User Guide Creating events that trigger actions
Event trigger type Description

HotKey Triggers an action when the user presses a specified key on the BlackBerry® device.
Timeline Triggers an action when the animation reaches a specified frame on the timeline.
Relative Triggers an action based relative to the timeline of a specified animation object. For example, you
can trigger an action five seconds after Animation_1 begins.
Create a button event

1. On the workspace, select the button object to which you want to add an action.
2. On the Button tab on the Inspector, click one of the following events from the Button Events:
• On Activate: Occurs when the user clicks on the button using the Select key.
• On Focus In: Occurs when the user scrolls over a button object.
• On Focus Out: Occur when the user scrolls off a button object.
The Interactivity dialog box appears.
3. Perform the following steps to select and define one or more actions:
a. Use the Action icons to select an action. The bottom portion of the dialog box changes based on the selected action,
to allow you to set the action properties.
b. Set the action properties as necessary.
4. In the Event section of the dialog box, in the Buttons section, specify the length of time the action will be delayed.
Create a hotkey event

1. Click Interactivity > Hotkey Actions.
a. Use the Action icons to select an action. The bottom portion of the dialog box changes based on the selected action
3. In the Event section of the dialog box, in the Key field, type the key the user must type to trigger the event.
Create a timeline event

1. Click Interactivity > Timeline Actions.
63
User Guide Creating actions
3. In the Event section of the dialog box, in the Frame field, type the frame number at which the action is triggered.
Create a relative event

1. Click Interactivity > Relative Actions.
3. In the Event section of the dialog box, specify the relative conditions.
a. Select the animation on which to base the action from the drop-down list.
b. Select begins or ends to specify whether the action is relative to the start or completion of the selected animation.
c. Specify the number of seconds before or after the animation begins or ends.
Creating actions
Actions are triggered by the occurrence of a specified event. The BlackBerry® Composer supports the following actions:
Action Description
Play Animation Plays the specified animation object. When you specify a Play Animation action, you set the
animation settings to control behavior; for example, whether the animation starts from the
beginning, whether it loops, accumulates, and so on.
Stop Animation Stops the specified animation.
Play Sound Plays a specified sound. When you specify a Play Sound action, you set the sound settings to control
behavior; for example, how many iterations the sound will go through and the duration that the
sound plays.
Hide Component Turns off the display property of the specified animation or button object.
Show Component Turns on the display property of the specified animation or button object.
Load Scene Loads a new .pme, .pmb, or .svg file from a specified URL. The selected scene replaces the file
currently displayed.
Form Submit Submits form data collected from the user with Text Area and Selection List objects.
Form Reset Clears user data from Text Area and Selection List objects.
Launch Application Launches the selected application. This action must be used embedded in a theme.
64
You can define actions with the events that trigger them, or you can define actions on their own and then bind them to an event
later. Use the Interactivity dialog box to define actions and the events that trigger them. Use the Actions dialog box to define
actions without defining how they are triggered.
Create an action to play an animation

1. In the Actions dialog box, click the Play Animation button. The new Play Animation action is added to the Action list. By
default, an existing animation is selected, with default settings specified.
2. In the Action list, select the Play Animation action you just added. The bottom portion of the dialog box displays the properties
that can be set for this action.
3. In the Play Animation section at the bottom of the dialog box, in the Animation drop-down list, select the animation object
you want to play.
4. In the Restart drop-down list, specify how the animation object behaves when it is triggered while already playing.
• Always: The animation will be restarted every time it is triggered.
• When Not Active: The animation can be started only if it is not playing. Attempts to restart the animation while it is
already playing are ignored.
• Never: The animation can never be restarted. It plays once, and it cannot play again.
5. To play only a portion of the Animation object, check the option adjacent to the Start field, then in the Start and End Fields,
specify the Start and End frames of the animation.
6. To repeat the animation, select Loop, then set the repetition options:
a. Forever: Repeats the animation until it is stopped using a Stop Animation action.
b. # Times: Specifies the number of times the animation should be repeated.
c. Accumulate Animation: Each iteration of the animation builds upon the last value of the previous iteration. Each time
the animation is repeated, the animated object uses as its start value the end value of the previous iteration.
For example, suppose you animate the width of a rectangle from 0 pixels to 10 pixels over a 10-second period. The next time
the animation repeats, the starting width would be 10 pixels, and the width would increase to 20 pixels. After five iterations,
the rectangle is 50 pixels wide.
Create an action to stop an animation

1. In the Actions dialog box, click the Stop Animation button.
2. In the Action list, select the Stop Animation action you just added. The bottom portion of the dialog box displays the
properties that can be set for this action.
3. In the Stop Animation section of the dialog box, in the Animation drop-down list, select the animation object you want to
stop playing.
65
Create an action to play a sound

1. In the Actions dialog box, click the Play Sound button. The new Play Sound action is added to the Action list.
2. In the Action list, select the Play Sound action you just added. The bottom portion of the dialog box displays the properties
3. In the Play Sound section of the dialog box, click Browse to locate the sound file you want to play when the specified event
occurs.
4. To repeat the sound file, select Loop, then set the repetition options:
a. Forever: Repeats the sound until the scene is replaced.
b. # Times: Specifies the number of times the sound should be repeated.
5. In the Duration field, specify the maximum length of time for which the sound file will play.
If you selected Loop Forever, the Duration setting is ignored.
Create an action to hide an animation component

1. In the Actions dialog box, click the Hide Component button.
2. In the Action list, select the Hide Component action you just added. The bottom portion of the dialog box displays the
3. In the Hide Button/Animation section of the dialog box, in the Object drop-down list, select the button or animation
object you want to hide when the specified event occurs.
Create an action to show an animation component

1. In the Actions dialog box, click the Show Component button.
2. In the Action list, select a Show Component action. The bottom portion of the dialog box displays the properties that can
be set for this action.
3. In the Show Button/Animation section of the dialog box, in the Object drop-down list, select the button or animation
object you want to display when the specified event occurs.
Create an action to load a scene

1. In the Actions dialog box, click the Load Scene button.
2. In the Action list, select a Load Scene action. The bottom portion of the dialog box displays the properties that can be set
for this action.
3. In the Load Scene section of the dialog box, in the URL field, type the URL of the .pme, .pmb, or .svg file you want to load
when the specified event occurs.
66
Create an action to submit a form

1. In the Actions dialog box, click the Form Submit button.
2. In the Action list of the dialog box, select a Form Submit action. The bottom portion of the dialog box displays the properties
3. In the Form Submit section of the dialog box, in the Method list, select either form-data-post or GET to specify the method
used to submit the form data.
4. In the Action URL field, type the URL to which the form is submitted.
Create an action to reset a form

In the Actions dialog box, click the Form Reset button. No additional properties can be set. The Form Reset action resets
all text input and selection list objects.
Create an action to start an application

You can create an action to start an application and apply the action to the Home screen of the BlackBerry® Theme Builder only.
1. In the Actions dialog box, click the Launch Application button.

2. In the Action list of the dialog box, select a Launch Application action. The bottom portion of the dialog box displays the
3. In the Launch Application section of the dialog box, select an option:
• BlackBerry Application: Start a BlackBerry application.
• Third Party Application: Start a third party application.
• Application Menu: Open the Application Menu screen.
• Use Device Application Order: Base the action on the application order on the device.
4. If you are starting a BlackBerry application or a third party application, select an application from the Application list.
Change interactive content

1. Click Interactivity > Actions. The Action list displays a list of the actions you have previously defined, along with the events
that trigger each.
Task Steps
Change which event triggers an action. a. In the Action list, select the action for which you want to change the
trigger.
67
Task Steps
b. Click the Change Event button.
c. In the Change Event dialog box, select the new event.
Duplicate an existing action. a. In the Action list, select the action you want to duplicate.
b. Click the Duplicate button.
c. To redefine the triggering event, click the Change Event button.
d. In the Change Event dialog box, select the new event.
Delete an action. a. In the Action list, select the action you want to delete.
b. Click the Delete button.
Change the focus order of the buttons

1. Click Interactivity > Focus Order.
2. Select a button, then use the arrows at the side of the list of options to move it up or down in the focus order.
3. To return the focus to the first button when the user scrolls past the last button, click Wrap Focus.
68
User Guide Exporting and testing content
Exporting and testing content 6

You can preview and test your content at any time by launching the BlackBerry® Smartphone Simulator from the BlackBerry
Composer.
Preview content using the BlackBerry Smartphone Simulator

1. In the BlackBerry® Composer, select one of the following options:
• Open an existing file
• Create a new file
Tip: You can preview a new file before saving it.
2. On the toolbox, click the Simulator button. The BlackBerry Smartphone Simulator opens and displays your content.
3. Use the playback buttons to move backwards and forwards in your content.
Exporting content
From the BlackBerry® Composer, you can export content to the following formats:
• .svg
• .pmb
• .pme
• .png
• .gif
• animated .gif
The BlackBerry Composer exports fonts that are not BlackBerry device system fonts as images.
Export to an SVG file

When you export your content to .svg format, you can compile the content to make it available for play on the BlackBerry®
Browser. Refer to the SVG for BlackBerry Reference for more information on SVG.
1. From the File menu, click Export > SVG.
2. On the File tab, specify the file title and properties.
Field Description
Title Specify a title for the animation.
Description Specify a description for the animation.
69
User Guide Exporting content
Field Description
Allow Zoom and Pan Enable zooming and panning.
Export All Layers Export all layers of the animation. If this option is not selected, only visible layers are
exported.
Export SVG Tiny 1.1 Select the Export SVG Tiny 1.1 check box to export the SVG in the Tiny 1.1 format to
embed SVG within java applications. To export the SVG for use in themes, clear the
Export SVG Tiny 1.1 check box.
Dimensions in % Specify the dimensions for the animation as a percentage. Ensure that you use this option
for web-based content.
3. On the Image tab, specify whether you want to export your images in .gif or .png format.
Image type Option Description

PNG Filter • None compresses the image without a filter. This option is
recommended for indexed-color and bitmap-mode images.
• Sub optimizes the compression of images with even
horizontal patterns or blends.
• Up optimizes the compression of images with even vertical
patterns.
• Average optimizes the compression of low-level noise by
averaging the color values of adjacent pixels.
• Path optimizes the compression of low-level noise by
reassigning adjacent color values.
• All applies the filter—Sub, Up, Average, or Path—that is best-
suited for the image. Select All if you are unsure of which
filter to use.
Compression Specify a method to reduce the file size.
GIF and PNG Interlace When you select this check box, images first appear blurry and become
sharper as they are downloaded. When Interlace is cleared, images
appear gradually, top to bottom, as they are downloaded.
With still .gif images, interlacing enables users with slow connections
to click past an image they are not interested in viewing without having
to download the whole image. Interlacing is not recommended for
animated .gifs.
70
Image type Option Description

Always Export images Select the Always Export images check box to always export the
images to disk. To only update images when they are changed or for
new images, clear the Always Export images check box.
Use Images On Disk Select the Use Images On Disk check box to use the original images
on disk instead of exporting out new ones.
4. On the Content Directory tab, click the Open icon and select where to export your images and sounds.
5. In the Color Reduction section, adjust the color settings of your exported file.
Field Description
Color Mode Select the mode to use.
Palette This drop-down list is available when you select Palette from the Color Mode
drop-down list. Determine which set of 256 (or fewer) colors is used in the
exported animation:
• Adaptive automatically selects a set of colors that best approximate

the original.
• Web-safe uses a standard set of 216 colors. Web-safe colors are
recommended for BlackBerry devices.
Dithering Dithering might improve image quality. Selecting this option increases your file
size.
From the Dithering drop-down list, select the type of error diffusion to use.
Dithering Noise From the Dithering Noise drop-down list, select a value.
6. To name and save the current export settings for later use or to load a previously saved group of settings, select the Save
current settings when closing check box.
7. Click OK.
Export to a PMB file

You can export your content to .pmb format. When you export to .pmb format, any external resources, such as images or sound
files, are bundled together into a single file. You can view .pmb content on your BlackBerry® device.
1. On the File menu, click Export > PMB.
2. Specify the name and location for the .pmb file.
3. Click Save. The BlackBerry Composer transcodes and bundles your file and any external resources into a .pmb file.
71
Export to a PME file

You can export your project to .pme format so that you can view your content on your BlackBerry® device.
1. On the File menu, click Export > PME. The Save As dialog box appears.
2. Specify the name and location for the .pme file.
3. Click Save. The BlackBerry Composer transcodes your file into a .pme file.
Note: Your image and sound files are saved relative to the location of the .pme file.
Export to a GIF or PNG file

You can export your content to .gif and .png formats, which are useful file formats for incorporating into a mobile media file or
for viewing your content on third-party handhelds or Internet browsers.
• On the File menu, click Export > GIF.
• On the File menu, click Export > PNG.
2. In the Information section, change the following settings:
Field Description
Show Preview Select this option to display a preview pane on the right side of the dialog box.
You can preview changes before you update the image.
Update View information on the file properties after making changes to other properties
on the dialog box.
If you select Show Preview, you can view your changes when you click the
Update button.
Live Update Select this check box to update the information automatically.
Note: If your computer has a slow processor, you might experience slower
processing when using Live Update.
3. In the Generic Options section, select any of the following check boxes.
Option Description
Override Background Color Select this check box to use a different background color than that set in the
BlackBerry® Composer. Click the color swatch and click a color.
72
Option Description
Use Temporary Image Cache Select this check box for smaller content files to improve performance when
previewing different export settings or re-exporting a BlackBerry Composer file
that has not been changed.
Interlace When you select this check box, images first appear blurry and become sharper
as they are downloaded. When Interlace is not selected, images appear
gradually, top to bottom, as they download.
With still GIF images, interlacing allows users with slow modem connections to
click past an image they are not interested in viewing without having to
download the whole thing. Do not use Interlacing for animated GIFs.
Note: With larger images, the cache can consume a lot of memory and, depending on how much RAM is available, might
need to be turned off.
4. Depending on the type of export, select the applicable options.
Field Description
Filter • None compresses the image without a filter. This option is
recommended for indexed-color and Bitmap-mode images.
• Sub optimizes the compression of images with even horizontal
patterns or blends.
• Up optimizes the compression of images with even vertical patterns.
• Average optimizes the compression of low-level noise by averaging
the color values of adjacent pixels.
• Path optimizes the compression of low-level noise by reassigning
adjacent color values.
• All applies the filter—Sub, Up, Average, or Path—best-suited for the
image. Select All if you are unsure of which filter to use.
Compression Specifies a method to reduce file size.
5. In the Color Reduction section, set any of the following color reduction options.
Option Description
Color Mode Select the mode to use.
73
Option Description
Palette This drop-down list is available when you select Palette from the Color Mode
drop-down list. Determine which set of 256 (or fewer) colors is used in the
exported animation:

the original.
size.
Dithering Noise From the Dithering Noise drop-down list, select a value.
6. To name and save the current export settings for later use or to load a previously saved group of setting, select the Save
7. Click OK.
Export to an animated GIF file

You can export your content to the animated .gif format, which provides similar benefits to the .gif format.
1. On the File menu, click Export > Animated GIF.
2. In the Information section, change the following settings:
Field Description
Show Preview Select this option to display a preview pane on the right side of the dialog box.
You can preview changes before you update the image.
Update View information on the file properties after making changes to other properties
on the dialog box.
If you select Show Preview, you can view your changes when you click the
Update button.
Live Update Select this check box to update the information automatically.
Note: If your computer has a slow processor, you might experience slower
processing when using Live Update.
3. In the Generic Options section, select any of the following check boxes.
74
Option Description
Override Background Color Select this check box to use a different background color than that set in the
BlackBerry® Composer. Click the color swatch and click a color.
Use Temporary Image Cache Select this check box for smaller content files to improve performance when
previewing different export settings or re-exporting a BlackBerry Composer file
that has not been changed.
Note: With larger images, the cache can consume a lot of memory and, depending on how much RAM is available, might
need to be turned off.
4. Depending on the type of export, select the applicable options.
Field Description
Interlace When you select this check box, images first appear blurry and become sharper
as they are downloaded. When Interlace is not selected, images appear
gradually, top to bottom, as they download.
With still GIF images, interlacing allows users with slow modem connections to
click past an image they are not interested in viewing without having to
download the whole thing. Do not use Interlacing for animated GIFs.
Loop Sets the number of times for the .gif animation to repeat.
Override Doc. Speed Sets the speed for the .gif animation.
5. In the Color Reduction section, set any of the following color reduction options.
Option Description
Palette Specifies which set of 256 (or fewer) colors is used in the exported animation.

the original.
Colors Sets the number of colors used in the exported content. Depending on the types
of objects used, setting this field to a value below 256 can seriously degrade
image quality. However, reducing the number of colors can significantly reduce
your file size.
75
Option Description
Color Reduction Specifies how the BlackBerry Composer reduces the number of colors for export.
Experiment with both methods to determine which method produces the best
image.
size.
6. To name and save the current export settings for later use or to load a previously saved group of setting, select the Save
7. Click OK.
76
User Guide Importing Flash content
Importing Flash content 7

When you import Adobe® Flash® (.swf) content into the BlackBerry® Composer, the BlackBerry Composer converts the .swf file
to .svg format. The BlackBerry Composer only supports a subset of Flash content. However, by importing a Flash file into the
BlackBerry Composer and performing some fine-tuning of the content, you can repurpose existing Flash content, that was
developed for the web for deployment on a BlackBerry device.
This section describes the .swf features supported by the BlackBerry Composer. This section is intended for intermediate Flash
developers with experience developing complex .swf files.
In this document, the term “Flash” refers to any authoring tool that exports .swf files. Adobe Flash is sometimes used as an example.
Converting Flash files

When the BlackBerry® Composer encounters unsupported elements in an .swf file, it generates warnings. The output .svg file
contains SVG content that can display on a BlackBerry device; unsupported elements are not included in the output .svg file.
Converting shapes and shape properties

Vector graphics represent images using geometrical formulas. This contrasts with bitmap graphics, which are represented by
patterns of pixels.
Vector graphics can be resized to any proportion without losing sharpness or clarity, but bitmaps cannot. Changing the size,
shape, or color of a vector graphic does not affect the resolution of the graphic. When you edit a vector graphic, you change the
properties of the lines and curves that describe its shape.
On BlackBerry® devices, vector graphics provide a better-quality display and require less memory than bitmaps. Refer to the
SVG for BlackBerry Reference or the W3C® SVG Specification, which is available on the Internet, for more information on SVG.
Converting basic vector shapes

You can create vector shapes using various drawing tools, including Adobe® Flash®. Most Flash authoring tools convert bitmap
images to vector shapes. In Flash, you can control how the tracing is performed and the quality of the result.
After creating a vector shape, you can change it in several ways.
The BlackBerry® Composer supports solid fills and pattern fills. Gradient fills are not supported. Linear and radial gradient fills
are converted to a solid fill whose color is based on the color of the first gradient control point.
77
User Guide Converting animation
Converting color transforms in vector shapes

The BlackBerry® Composer can convert color transforms in the .swf file format to the equivalent in .svg. You can apply color
transforms to vector shapes and produce the resulting color components in the .svg. You can include color transforms that are
static (single-frame) and animated (multi-frame). The .swf file format supports color transforms on any visual object. The color
transform has a multiplier and an offset value for each color component.
In your chosen authoring tool, you can apply color transforms to instances of graphics symbols. These effects include brightness,
tint, and advanced color transforms. You can animate color by applying color effects to the key frames of a motion tween.
Color transforms on images or movie clips are not supported by the BlackBerry Composer. The BlackBerry Composer ignores
color transforms on images and movie clips.
Converting animation
The BlackBerry® Composer can convert visibility and position animations in the .swf file format to the equivalent in .svg format.
The BlackBerry Composer can convert movie clip timelines in the .swf file format to the equivalent in .svg format, and it can
convert a movie clip to the equivalent animation in .svg format.
Converting affine transforms

Affine transformations include translation, rotation, scaling, and skewing. Affine transformations are used in both .swf and .svg
file formats. Parallel lines remain parallel in affine transformations.
In Adobe® Flash®, translation is accessible under x and y position.
To break up the symbol or group after the affine transforms are applied, use your Flash authoring tool.
Converting movie clip timelines

You can convert a movie clip to the equivalent animation in .svg. Movie clips in .swf files are equivalent to a sprite or animation
that plays independently of other content.
Adobe® Flash® movie-clip objects have timelines that can span multiple frames and can contain multiple layers of content similar
to the main timeline. The timeline of a movie-clip instance plays independently of the main timeline.
Converting visibility and position animation

Animation in SVG is interpolator-based. Animation in .swf is frame-based. You can convert tags that specify frame-by-frame
visibility and position into the equivalent interpolator for SVG.
78
User Guide Converting embedded images
Your Flash® authoring tool supports the following key frame animation or motion tweening techniques:
• Easing effects: ease-in and ease-out to control the rate of motion at the beginning and end of an animation
• Motion guides: define a path for objects to follow during the animation
Converting embedded images

The BlackBerry® Composer can convert embedded images in the .swf file format to separate image files that are referenced in
the .svg file.
You can convert an image in a .swf file to a .png file and insert a reference to it in the .svg. The converted image file is assigned
a name based on the name of the .svg file and a counter value. For example, if the .svg file is named movie.svg, the fifth
converted image is named movie00005.png.
The Adobe® Flash® authoring tool imports .gif, .png, and .bmp file formats. It internalizes image formats and embeds them in
the .swf file upon export.
To specify in which folder to save converted image files, use the -d <imagedir> command-line option.
Converting static text with device fonts

The BlackBerry® Composer can convert static text that uses BlackBerry device fonts in the .swf file format to the equivalent in .svg.
Static text refers to text that is fixed, unlike dynamic text (controlled by Adobe® ActionScript®) or input text (entered by a user).
A device font is specified by name and is a font for which the device itself provides the glyph information; no glyph information
is embedded in the .swf file.
When developing your content, use fonts and font sizes that match the fonts available on the target BlackBerry devices. Differences
in fonts could result in unexpected behavior on the device, such as text wrapping. Adobe® Flash® provides the option of using
device fonts for selected text.
Refer to your BlackBerry documentation for information on the fonts available for your device. To verify that fonts are displayed
accurately, test content on each BlackBerry device on which you plan to deploy content.
Converting simple buttons and frame actions

The BlackBerry® Composer can convert simple buttons and simple actions in Adobe® Flash® to the equivalent in .svg.
Simple buttons have static content (no movie clips). They trigger simple actions with the button release event. Simple buttons
in .swf have the following states:
• up
• down
79
User Guide Converting simple buttons and frame actions
• over
Other button events such as Press, Release Outside, Roll Over, Roll Out, Drag Over, and Drag Out are not supported.
A hit-test shape defines the pointer boundaries for the Over state. For example, a mouse click while the pointer is over the hit-
test shape will activate the button.
Simple actions are tellTarget, play, and getURL. They are associated with button events, transitions between button
states, or frames in the timeline.
getURL produces a Plazmic .svg extension, <loadScene>. Refer to the SVG for BlackBerry Reference Guide for more information.
Flash provides a special timeline for buttons. One frame is provided for each button state. Adobe® ActionScript® can be associated
with button state transitions through the on(release) mouse event handler. Flash can also associate actions with specific
frames in the timeline.
Note the following limitations:
• URL strings are converted as is. File extensions are not converted.
• The BlackBerry Composer does not support the play action on movie clips that are currently playing. Using the play
action on movie clips that are running might cause errors.
• You can use the stop action in the first or last frame of the movie clip that it targets.
• The play action must target named movie clip instances.
• Frame actions and Button actions are supported, but the BlackBerry Composer does not support Clip actions.
• Buttons can have sounds associated with state changes, but the BlackBerry Composer does not support sounds (including
button sounds).
80
User Guide Provide feedback
Provide feedback 8
To provide feedback on this deliverable, visit www.blackberry.com/docsfeedback.
81
User Guide Legal notice
Legal notice 9
©2010 Research In Motion Limited. All rights reserved. BlackBerry®, RIM®, Research In Motion®, SureType®, SurePress™ and
related trademarks, names, and logos are the property of Research In Motion Limited and are registered and/or used in the U.S.
and countries around the world.
Adobe, ActionScript, and Flash are trademarks of Adobe Systems Incorporated. SVG Tiny is a trademark of W3C. W3C is a trademark
of Massachusetts Institute of Technology. All other trademarks are the property of their respective owners.
This documentation including all documentation incorporated by reference herein such as documentation provided or made
available at www.blackberry.com/go/docs is provided or made accessible "AS IS" and "AS AVAILABLE" and without condition,
endorsement, guarantee, representation, or warranty of any kind by Research In Motion Limited and its affiliated companies
("RIM") and RIM assumes no responsibility for any typographical, technical, or other inaccuracies, errors, or omissions in this
documentation. In order to protect RIM proprietary and confidential information and/or trade secrets, this documentation may
describe some aspects of RIM technology in generalized terms. RIM reserves the right to periodically change information that
is contained in this documentation; however, RIM makes no commitment to provide any such changes, updates, enhancements,
or other additions to this documentation to you in a timely manner or at all.
This documentation might contain references to third-party sources of information, hardware or software, products or services
including components and content such as content protected by copyright and/or third-party web sites (collectively the "Third
Party Products and Services"). RIM does not control, and is not responsible for, any Third Party Products and Services including,
without limitation the content, accuracy, copyright compliance, compatibility, performance, trustworthiness, legality, decency,
links, or any other aspect of Third Party Products and Services. The inclusion of a reference to Third Party Products and Services
in this documentation does not imply endorsement by RIM of the Third Party Products and Services or the third party in any way.
EXCEPT TO THE EXTENT SPECIFICALLY PROHIBITED BY APPLICABLE LAW IN YOUR JURISDICTION, ALL CONDITIONS,
ENDORSEMENTS, GUARANTEES, REPRESENTATIONS, OR WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
WITHOUT LIMITATION, ANY CONDITIONS, ENDORSEMENTS, GUARANTEES, REPRESENTATIONS OR WARRANTIES OF
DURABILITY, FITNESS FOR A PARTICULAR PURPOSE OR USE, MERCHANTABILITY, MERCHANTABLE QUALITY, NON-
INFRINGEMENT, SATISFACTORY QUALITY, OR TITLE, OR ARISING FROM A STATUTE OR CUSTOM OR A COURSE OF DEALING
OR USAGE OF TRADE, OR RELATED TO THE DOCUMENTATION OR ITS USE, OR PERFORMANCE OR NON-PERFORMANCE
OF ANY SOFTWARE, HARDWARE, SERVICE, OR ANY THIRD PARTY PRODUCTS AND SERVICES REFERENCED HEREIN, ARE
HEREBY EXCLUDED. YOU MAY ALSO HAVE OTHER RIGHTS THAT VARY BY STATE OR PROVINCE. SOME JURISDICTIONS
MAY NOT ALLOW THE EXCLUSION OR LIMITATION OF IMPLIED WARRANTIES AND CONDITIONS. TO THE EXTENT
PERMITTED BY LAW, ANY IMPLIED WARRANTIES OR CONDITIONS RELATING TO THE DOCUMENTATION TO THE EXTENT
THEY CANNOT BE EXCLUDED AS SET OUT ABOVE, BUT CAN BE LIMITED, ARE HEREBY LIMITED TO NINETY (90) DAYS FROM
THE DATE YOU FIRST ACQUIRED THE DOCUMENTATION OR THE ITEM THAT IS THE SUBJECT OF THE CLAIM.
TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION, IN NO EVENT SHALL RIM BE LIABLE
FOR ANY TYPE OF DAMAGES RELATED TO THIS DOCUMENTATION OR ITS USE, OR PERFORMANCE OR NON-
PERFORMANCE OF ANY SOFTWARE, HARDWARE, SERVICE, OR ANY THIRD PARTY PRODUCTS AND SERVICES REFERENCED
HEREIN INCLUDING WITHOUT LIMITATION ANY OF THE FOLLOWING DAMAGES: DIRECT, CONSEQUENTIAL, EXEMPLARY,
INCIDENTAL, INDIRECT, SPECIAL, PUNITIVE, OR AGGRAVATED DAMAGES, DAMAGES FOR LOSS OF PROFITS OR REVENUES,
FAILURE TO REALIZE ANY EXPECTED SAVINGS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, LOSS OF
82
BUSINESS OPPORTUNITY, OR CORRUPTION OR LOSS OF DATA, FAILURES TO TRANSMIT OR RECEIVE ANY DATA, PROBLEMS
ASSOCIATED WITH ANY APPLICATIONS USED IN CONJUNCTION WITH RIM PRODUCTS OR SERVICES, DOWNTIME COSTS,
LOSS OF THE USE OF RIM PRODUCTS OR SERVICES OR ANY PORTION THEREOF OR OF ANY AIRTIME SERVICES, COST OF
SUBSTITUTE GOODS, COSTS OF COVER, FACILITIES OR SERVICES, COST OF CAPITAL, OR OTHER SIMILAR PECUNIARY
LOSSES, WHETHER OR NOT SUCH DAMAGES WERE FORESEEN OR UNFORESEEN, AND EVEN IF RIM HAS BEEN ADVISED
OF THE POSSIBILITY OF SUCH DAMAGES.
TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION, RIM SHALL HAVE NO OTHER
OBLIGATION, DUTY, OR LIABILITY WHATSOEVER IN CONTRACT, TORT, OR OTHERWISE TO YOU INCLUDING ANY LIABILITY
FOR NEGLIGENCE OR STRICT LIABILITY.
THE LIMITATIONS, EXCLUSIONS, AND DISCLAIMERS HEREIN SHALL APPLY: (A) IRRESPECTIVE OF THE NATURE OF THE
CAUSE OF ACTION, DEMAND, OR ACTION BY YOU INCLUDING BUT NOT LIMITED TO BREACH OF CONTRACT, NEGLIGENCE,
TORT, STRICT LIABILITY OR ANY OTHER LEGAL THEORY AND SHALL SURVIVE A FUNDAMENTAL BREACH OR BREACHES
OR THE FAILURE OF THE ESSENTIAL PURPOSE OF THIS AGREEMENT OR OF ANY REMEDY CONTAINED HEREIN; AND (B)
TO RIM AND ITS AFFILIATED COMPANIES, THEIR SUCCESSORS, ASSIGNS, AGENTS, SUPPLIERS (INCLUDING AIRTIME
SERVICE PROVIDERS), AUTHORIZED RIM DISTRIBUTORS (ALSO INCLUDING AIRTIME SERVICE PROVIDERS) AND THEIR
RESPECTIVE DIRECTORS, EMPLOYEES, AND INDEPENDENT CONTRACTORS.
IN ADDITION TO THE LIMITATIONS AND EXCLUSIONS SET OUT ABOVE, IN NO EVENT SHALL ANY DIRECTOR, EMPLOYEE,
AGENT, DISTRIBUTOR, SUPPLIER, INDEPENDENT CONTRACTOR OF RIM OR ANY AFFILIATES OF RIM HAVE ANY LIABILITY
ARISING FROM OR RELATED TO THE DOCUMENTATION.
Prior to subscribing for, installing, or using any Third Party Products and Services, it is your responsibility to ensure that your
airtime service provider has agreed to support all of their features. Some airtime service providers might not offer Internet browsing
functionality with a subscription to the BlackBerry® Internet Service. Check with your service provider for availability, roaming
arrangements, service plans and features. Installation or use of Third Party Products and Services with RIM's products and services
may require one or more patent, trademark, copyright, or other licenses in order to avoid infringement or violation of third party
rights. You are solely responsible for determining whether to use Third Party Products and Services and if any third party licenses
are required to do so. If required you are responsible for acquiring them. You should not install or use Third Party Products and
Services until all necessary licenses have been acquired. Any Third Party Products and Services that are provided with RIM's
products and services are provided as a convenience to you and are provided "AS IS" with no express or implied conditions,
endorsements, guarantees, representations, or warranties of any kind by RIM and RIM assumes no liability whatsoever, in relation
thereto. Your use of Third Party Products and Services shall be governed by and subject to you agreeing to the terms of separate
licenses and other agreements applicable thereto with third parties, except to the extent expressly covered by a license or other
agreement with RIM.
Certain features outlined in this documentation require a minimum version of BlackBerry® Enterprise Server, BlackBerry® Desktop
Software, and/or BlackBerry® Device Software.
The terms of use of any RIM product or service are set out in a separate license or other agreement with RIM applicable thereto.
NOTHING IN THIS DOCUMENTATION IS INTENDED TO SUPERSEDE ANY EXPRESS WRITTEN AGREEMENTS OR WARRANTIES
PROVIDED BY RIM FOR PORTIONS OF ANY RIM PRODUCT OR SERVICE OTHER THAN THIS DOCUMENTATION.
Research In Motion Limited

295 Phillip Street
83
Waterloo, ON N2L 3W8

Canada
Research In Motion UK Limited

Centrum House
36 Station Road
Egham, Surrey TW20 9LF
United Kingdom
Published in Canada
84

Blackberry Composer: User Guide

Uploaded by

Copyright:

Available Formats

You might also like

Blackberry Composer: User Guide

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Blackberry Composer: User Guide

Uploaded by

Copyright:

Available Formats

BlackBerry Composer

Version: 5.0 | Service Pack: 1

4 Creating animated content........................................................................................................................................................ 49

5 Making content interactive........................................................................................................................................................ 62

6 Exporting and testing content................................................................................................................................................... 69

7 Importing Flash content............................................................................................................................................................. 77

Create a new project

Project window and workspace

You can show or hide the rulers.

Icon Tool Shortcut Description

Icon Tool Shortcut Description

Icon Tool Shortcut Description

Display the toolbox

Specifying colors on the toolbox

Change a canvas property

2. To preview your changes before saving, click the Preview button.

Crop the canvas

Configure the rulers and alignment tools

Change the spacing or color of the grid lines

Change the origin of the grid system

Add guides to the workspace

Undo and repeat operations

Specify the number of operations to undo and redo

1. On the Edit menu, click Preferences.

Change the start preferences

1. On the Edit menu, click Preferences.

Change the gamma preferences

Change the ToolTip preferences

Set theme button preferences

1. From the Edit menu, click Preferences.

Change the BlackBerry Smartphone Simulator preferences

2. Click the Simulator tab.

Change transparency preferences

Change tool properties

Create a rectangle or square

Create a rounded rectangle or rounded square

1. On the toolbox, click the Rounded Rectangle tool.

Create an ellipse or circle

Create a freehand path

Create an elliptical arc

Create a polygon or polyline

Create a Bézier curve

2. On the workspace, click to position the starting anchor point.

Create a simple text object

Create text on a curve

Convert text to Bézier curves

Creating user input fields

Create a text entry field

Create a drop-down list

4. To add items to the selection list, click Add Item.

Defining the viewable screen area

Create a view box

Change an existing view box

Preserving the aspect ratio of the view box

Preserve the aspect ratio in the view box

Create a Zoom effect

Create a Pan effect