Blackberry Composer-User Guide

BlackBerry Composer
Version: 6.0
User Guide
Published: 2011-05-19 SWD-1304256-0519084359-001
Contents
1 Getting started.................................................................................................................................................. Create a new project........................................................................................................................................ Project window and workspace........................................................................................................................ Toolbox............................................................................................................................................................. Display the toolbox.................................................................................................................................... Specifying colors on the toolbox............................................................................................................... Change a canvas property................................................................................................................................ 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................................................................................ 2 Change preferences.......................................................................................................................................... Change the start preferences........................................................................................................................... Change the gamma preferences....................................................................................................................... Change the ToolTip preferences....................................................................................................................... Set theme button preferences.......................................................................................................................... Change the BlackBerry Smartphone Simulator preferences............................................................................ Change transparency preferences.................................................................................................................... Change tool properties..................................................................................................................................... 3 Creating objects................................................................................................................................................ Create a line...................................................................................................................................................... Create a rectangle or square............................................................................................................................ Create a rounded rectangle or rounded square............................................................................................... Create an ellipse or circle.................................................................................................................................. Create a freehand path..................................................................................................................................... Create an elliptical arc...................................................................................................................................... Create a polygon or polyline............................................................................................................................. Create a Bzier curve........................................................................................................................................ Creating text..................................................................................................................................................... Create a simple text object........................................................................................................................ Create text on a curve............................................................................................................................... Edit text..................................................................................................................................................... 7 7 7 9 10 10 10 11 11 11 12 12 12 12 13 13 13 14 14 14 15 15 16 16 16 16 16 17 17 17 17 18 18 18 18
Convert text to Bzier curves.................................................................................................................... Creating user input fields.................................................................................................................................. Create a text entry field............................................................................................................................. Create a drop-down list............................................................................................................................. 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.................................................................................................................................... Creating buttons............................................................................................................................................... Create a button.......................................................................................................................................... Convert an object to a button................................................................................................................... Creating animation objects............................................................................................................................... Create an animation object....................................................................................................................... Convert a scene to an animated object..................................................................................................... Working with objects........................................................................................................................................ Select an object......................................................................................................................................... Select multiple objects.............................................................................................................................. Move a selected object on the workspace................................................................................................ Resize a selected object using the bounding box...................................................................................... Rotate a selected object............................................................................................................................ Duplicate an object.................................................................................................................................... Adjusting path segments.................................................................................................................................. Move anchor points on a path.................................................................................................................. Change the shape of a curve..................................................................................................................... Add anchor points to a shape.................................................................................................................... Remove anchor points from a shape......................................................................................................... View object properties..................................................................................................................................... Options in the Inspector............................................................................................................................ Specifying shape properties.............................................................................................................................. Smooth a shapes edges............................................................................................................................ Change the roundness of a rounded rectangle object.............................................................................. Change the shape properties of an elliptical arc....................................................................................... Specify text object properties........................................................................................................................... Text properties in the Inspector................................................................................................................ Specifying stroke and fill properties................................................................................................................. Specify the stroke or fill color....................................................................................................................
19 19 19 19 20 20 21 21 22 23 23 23 24 24 24 24 25 25 25 26 26 26 26 26 27 27 27 28 28 28 28 30 30 30 30 31 31 31 32
Remove the stroke or fill color of an object.............................................................................................. Specify the stroke style attributes............................................................................................................. Specify a pattern fill................................................................................................................................... Working with bitmap objects........................................................................................................................... Change a bitmap image............................................................................................................................. Specify how an object blends with background objects............................................................................ Add one or more filters to a bitmap image............................................................................................... Apply one or more effects to a bitmap image........................................................................................... Blending rasterized images........................................................................................................................ Using bitmap image effects....................................................................................................................... Changing transformation properties................................................................................................................ Set the position coordinates for an object................................................................................................ Scale an object........................................................................................................................................... Skew an object........................................................................................................................................... Rotate an object........................................................................................................................................ Make an object visible or invisible for the current frame......................................................................... Specify the opacity level of an object........................................................................................................ Managing objects.............................................................................................................................................. View the Objects panel.............................................................................................................................. Select an object......................................................................................................................................... Rename an object...................................................................................................................................... Move an object forward or back on the workspace.................................................................................. Lock the position of an object................................................................................................................... Unlock the position of an object................................................................................................................ Group objects............................................................................................................................................ Ungroup objects........................................................................................................................................ Converting groups to switchgroup animations................................................................................................. Convert a group of objects to a switchgroup............................................................................................ Change the switchgroup settings.............................................................................................................. Convert an object to a bitmap image............................................................................................................... Convert an object to a button................................................................................................................... Convert a scene to an animated object..................................................................................................... Using catalogs................................................................................................................................................... View the Catalog panel.............................................................................................................................. Add a color to the Catalog......................................................................................................................... Add an object to the Catalog..................................................................................................................... Add a pattern to the Catalog..................................................................................................................... Open a catalog........................................................................................................................................... Create a new catalog.................................................................................................................................
32 32 33 33 33 33 33 34 34 35 36 36 37 37 37 37 37 38 38 38 38 38 38 39 39 39 39 39 40 40 41 41 41 42 42 42 42 42 42
Edit an existing custom catalog................................................................................................................. Delete a custom catalog............................................................................................................................ Add a Catalog item to a project................................................................................................................. Delete an item from the Catalog............................................................................................................... Using layers....................................................................................................................................................... View the Layers panel................................................................................................................................ Create a layer............................................................................................................................................. Duplicate a layer........................................................................................................................................ Delete a layer............................................................................................................................................. View or hide layers.................................................................................................................................... Rename a layer.......................................................................................................................................... Reorder layers........................................................................................................................................... Rasterize one or more layers into a single bitmap image.......................................................................... Merge layers together............................................................................................................................... Delete objects in a layer............................................................................................................................ 4 Creating animated content............................................................................................................................... Key frame animation........................................................................................................................................ Non-linear animation........................................................................................................................................ View animation properties............................................................................................................................... Editing animations............................................................................................................................................ Using the key frame editor to manage key frames................................................................................... Configuring animation between key frames............................................................................................. Edit an animation using the Animation wizard.......................................................................................... Working with animation frames....................................................................................................................... Select a single frame.................................................................................................................................. Select a range of frames............................................................................................................................ Add a frame............................................................................................................................................... Delete a frame........................................................................................................................................... Copy frames............................................................................................................................................... Working with property keys and animation handles................................................................................. Creating keys............................................................................................................................................. Moving a property key or object handle................................................................................................... Changing property keys............................................................................................................................. Editing animation behavior between frames................................................................................................... Motion behavior properties...................................................................................................................... Path behavior properties........................................................................................................................... Specify path and motion behavior............................................................................................................. Using the tweening editor toolbar............................................................................................................
42 43 43 43 43 43 44 44 44 44 44 44 44 45 45 46 46 46 47 47 48 49 49 50 50 50 50 50 50 51 52 52 53 53 54 55 55 56
5 Making content interactive............................................................................................................................... Creating events that trigger actions................................................................................................................. Create a button event................................................................................................................................ Create a hotkey event............................................................................................................................... Create a timeline event............................................................................................................................. Create a relative event.............................................................................................................................. Creating actions................................................................................................................................................ Create an action to play an animation...................................................................................................... Create an action to stop an animation...................................................................................................... Create an action to play a sound............................................................................................................... Create an action to hide an animation component................................................................................... Create an action to show an animation component................................................................................. Create an action to load a scene............................................................................................................... Create an action to submit a form............................................................................................................. Create an action to reset a form................................................................................................................ Create an action to start an application.................................................................................................... Change interactive content....................................................................................................................... Change the focus order of the buttons..................................................................................................... 6 Exporting and testing content.......................................................................................................................... Preview content using the BlackBerry Smartphone Simulator......................................................................... Exporting content............................................................................................................................................. Export to an SVG file.................................................................................................................................. Export to a PMB file................................................................................................................................... Export to a PME file................................................................................................................................... Export to a GIF or PNG file......................................................................................................................... Export to an animated GIF file................................................................................................................... 7 Importing Flash content.................................................................................................................................... Converting Flash files........................................................................................................................................ Converting shapes and shape properties......................................................................................................... Converting basic vector shapes................................................................................................................. Converting color transforms in vector shapes........................................................................................... Converting animation....................................................................................................................................... Converting affine transforms..................................................................................................................... Converting movie clip timelines................................................................................................................ Converting visibility and position animation............................................................................................. Converting embedded images..........................................................................................................................
57 57 58 58 58 58 59 59 60 60 61 61 61 61 61 62 62 62 64 64 64 64 66 66 67 68 71 71 71 71 72 72 72 72 72 73
Converting static text with device fonts........................................................................................................... Converting simple buttons and frame actions.................................................................................................. 8 Provide feedback.............................................................................................................................................. 9 Legal notice.......................................................................................................................................................
73 73 75 76
User Guide
Getting started
Getting started

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. 2. 3. 4. 5. 6. On the File menu, click New. In the Name field, type a name for your new BlackBerry Composer project. 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. To specify custom dimensions of your canvas, type the dimensions in pixels in the Width and Height fields. 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. 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.
User Guide
Project window and workspace
The BlackBerry Composer project window contains the project workspace. The workspace includes the following elements: Element canvas overscan area Description The canvas represents the viewable area. You can change the size and the background color of the canvas. 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. 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. 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. 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 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.
8
rulers
grid
guides
User Guide
Toolbox
Element limits
Description 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 Transformation Select Text Text on Curve Freehand Shortcut V Q T C F Description You can use the Transformation tool to select an object, move an object, or change the width and height of an object. You can use the Select tool to reshape an object by moving a single anchor point or Bzier control point. You can use the Text tool to create a text object. You can use the Text on Curve tool to create text on a curve. You can use the Freehand tool to draw free-form paths. Paths are closed automatically if you specify a fill color other than None. You can use the Bzier tool to draw curved lines. You can use the Line tool to draw a single straight-line path. You can use the Polyline tool to draw a continuous path that has one or more straight-line segments. You can use the Rectangle tool to draw a rectangle shape. You can use the Rounded Rectangle tool to draw a rectangle shape that has rounded corners. You can use the Ellipse tool to draw ellipses or circles. You can use the Arc tool to draw arcs. You can use the Text Area Form tool to create text fields that users can type information in. You can use the Selection Form tool to create a drop-down list with predefined options, from which users can select an option. You can use the Theme Button tool to create a button object that you can add to the home screen to start an application.
Bzier Line Polyline Rectangle Rounded Rectangle Ellipse Arc Text Area Form Selection Form
P L O R N E A X S
Theme Button
User Guide
Change a canvas property
Icon
Tool Camera
Shortcut M
Hand Zoom Stroke swatch
H Z
Description 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. You can use the Hand tool to move the canvas in the project workspace. You can use the Zoom tool to magnify the canvas. 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. 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. 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. You can use the No color button to change the Fill swatch to no color. You can use the Swap fill and stroke button to switch the color values of the Fill and Stroke swatches. You can use the Simulator button to start the BlackBerry Smartphone Simulator to test your project.
Fill swatch
Default colors
No color Swap fill and stroke Simulator
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 Bzier 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.
10
On the Canvas menu, click Properties.
User Guide
Configure the rulers and alignment tools
Task Change the canvas size. Change the background image alignment. Change the BlackBerry device. Change the canvas color.
Steps In the Width and Height fields, type the values in pixels for the height and width. In the Resize Anchor field, click a box to determine how to align the canvas after it is resized. In the Device drop-down list, click the BlackBerry device to use for the canvas. a. b. Click the color swatch to open the Color Picker, then select the background color for your canvas. To make sure that you choose a color that all platforms and browsers support, select the Web safe check box.
2. 3.
To preview your changes before saving, click the Preview button. 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. 2. On the canvas, select one or more objects to identify the area to crop to. 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. 2. 3. 4. 5. 6. 7. Click the View menu. To display or hide the rulers, click Show Rulers. To display or hide the grid, click Grid > Show Grid. To auto-align objects to the grid or to turn off the auto-alignment, click Grid > Snap to Grid. To auto-align objects to the guides or to turn off the auto-alignment, click Guides > Snap to Guides. To display or hide the limits, click Limits > Show Limits. To lock or release the limits, click Limits > Lock Limits.
Change the spacing or color of the grid lines

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

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

1. 2. 3. 4. 5. Display the rulers. On the View menu, click Guides > Show Guides. Click a ruler and drag a guide onto the workspace. You can select and drag the guide to reposition it, as necessary. To remove a guide from the workspace, drag it to a ruler. 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. 2. 3. Click the Edit menu. To undo an operation, click Undo. 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. 2. 3. On the Edit menu, click Preferences. In the Preferences dialog box, click the Miscellaneous tab. 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.
12
User Guide
Change preferences
Change preferences
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. 1. 2. 3. On the Edit menu, click Preferences. Click the General tab. 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 Click Open File Dialog. you start the BlackBerry Composer. Display a blank screen when you Click Do nothing. start the BlackBerry Composer. 4. In the View mode drop-down list, perform one of the following actions: Task Display the stroke and fill of objects. Hide the fill color for objects. Hide the fill and stroke colors and display only the outline of an object. 5. Click OK. Steps Click Full View. Click Stroke Preview. Click Shape Preview.
Change the gamma preferences

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

1. 2. 3. 4. On the Edit menu, click Preferences. Click the Miscellaneous tab. 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. 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. 2. 3. From the Edit menu, click Preferences. Click the Miscellaneous tab. Perform one of the following actions: To set the theme button size and style to a specific BlackBerry device, from the Theme Button Icons dropdown 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 of an icon for a BlackBerry Bold 9700 smartphone, look in C:\Program Files\Research In Motion\BlackBerry Theme Studio 5.0\samples\Themes\Images\Precision360x480\icons To use the theme icon buttons for all new projects, select the Always use these icons check box. Click OK.
4. 5.
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. 1. 2. 3.
14
On the Edit menu, click Preferences. Click the Simulator tab. For each BlackBerry device screen resolution, specify the following values:
User Guide
Change transparency preferences
4.
Resolution Model OS Version
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. 1. 2. 3. 4. On the Edit menu, click Preferences. Click the Transparency tab. In the Color Settings drop-down list, click a shade for the transparency. 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. 2. Click a toolbox icon. 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.
15
User Guide
Creating objects
Creating objects
Create a line
1. 2. 3. 4. On the toolbox, click the Line tool. On the workspace, drag the pointer to where you want the line to end. To create a line that is at a multiple of 45 degrees, press SHIFT and drag the pointer. On the Inspector, change the properties for the line.
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 rectangle or square

1. 2. 3. 4. On the toolbox, click the Rectangle tool. On the workspace, drag the pointer until the object is the size that you want. To create a square, press SHIFT and drag the pointer. 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. 2. 3. 4. 5. 6. On the toolbox, click the Rounded Rectangle tool. On the workspace, drag the pointer until the object is the size that you want. To create a rounded square, press SHIFT and drag the pointer. To change the roundness of the corners, on the Inspector, click the Rounded Rectangle tab. 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. On the Inspector, change additional properties for the rounded rectangle object.
Create an ellipse or circle

1. 2.
16
On the toolbox, click the Ellipse tool. Perform one of the following actions:
User Guide
Create a freehand path
3. 4.
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. On the Inspector, change the properties for the object.
Create a freehand path

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

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

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

1. 2. 3. 4. 5. 6. On the toolbox, click the Bzier tool. On the workspace, click to position the starting anchor point. Move the pointer to the next anchor point and click. 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. To add additional path segments, repeat steps 3 and 4. To end the path without closing it, double-click the desired endpoint, or press ENTER.
17
User Guide
Creating text
7. 8.
To close the path, double-click the starting anchor point. 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. 2. 3. On the toolbox, click the Text tool. Type the text. On the Inspector, change the font properties for the text object.
Create text on a curve

1. 2. 3. 4. 5. 6. Create a path by using any of the drawing tools. On the toolbox, click the Text on Curve tool. On the workspace, click the path that you created. Type the text. Press ENTER to close the text editing mode. On the Inspector, change the font properties for the text.
Edit text
1. 2. 3. 4. On the toolbox, click the Select tool. On the workspace, double-click the text that you want to edit. To position the cursor in the text, click at the appropriate location. 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. Edit the text on the workspace. On the Inspector, change the text properties. Press ENTER to close the editing mode.
5. 6. 7.
18
User Guide
Creating user input fields
Convert text to Bzier curves

1. 2. 3. On the toolbox, click the Select tool. On the workspace, click the text that you want to convert. On the Object menu, click Convert to Bzier. The BlackBerry Composer converts the text object to a series of Bzier path segments.
After you convert text to a Bzier 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. 2. 3. 4. 5. On the toolbox, click the Text Area Form tool. On the workspace, drag the pointer until the text field is the size that you want. To display text by default , on the Inspector, click the Properties tab and in the Text Area field, type the default text. To create a form with more than one field for users to type in, select the Multiline check box. 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. 2. 3. 4. 5. 6. 7. 8. On the toolbox, click the Selection Form tool. On the workspace, drag the pointer until the drop-down list is the size that you want. On the Inspector, click the Properties tab. To add items to the selection list, click Add Item. In the Label field, type the name of the item to display to the user. In the Value, type the value that the user can select. To add additional items to the selection list, repeat steps 4 to 6. Use the arrows beside the list of items to change the order in which they are listed.
19
User Guide
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.
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. 2. 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. Click the view box to select it, then resize and reposition it as necessary.
20
User Guide
3.
To prevent the content from stretching on the BlackBerry device screen, specify the Preserve Aspect Ratio settings.
Change an existing view box

1. 2. 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. 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 are of equal dimensions The view box and view port are of different dimensions
21
User Guide
Preserve Aspect Ratio: Ignored The dimensions of the view box and view port are identical. The view box aspect ratio is not changed.
Preserve Aspect Ratio: On Scaling: Meet Alignment: Centered The content in the view box is horizontally and vertically centered and scaled to fit the view port. No content is clipped.
Preserve Aspect Ratio: On Scaling: Slice Alignment: Centered The content in the view box is horizontally and vertically centered and scaled to fill the view port. The excess content is clipped.
Preserve Aspect Ratio: Off The aspect ratio is not preserved. The content in the view box is stretched to fit the view port.
Preserve the aspect ratio in the view box

1. 2. 3. 4. On the Toolbox, click the Camera tool. The view box appears on the canvas. In the Inspector, click the Camera tab. Select the Preserve Aspect Ratio check box. 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. 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. 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.
5. 6.
22
User Guide
Creating buttons
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.
23
User Guide
Creating animation objects
Create a button
1. 2. 3. 4. 5. 6. 7. 8. 9. Display the Animation panel. On the Object menu, click Create Button. The workspace is in editing mode and all other objects on the workspace are hidden. Use the drawing and text tools to create the button in the initial state. Animate the Initial State button as desired. On the Animation key editor, click the On Focus In button. Change and animate the button to define how the button appears when it is in focus. Repeat Steps 4 and 5, for the On Focus Out and On Activate states. On the Object menu, click End Editing. On the Inspector, add actions for each state, as necessary.
Convert an object to a button

1. 2. 3. 4. 5. 6. 7. 8. 9. On the Toolbox, click the Transformation tool. On the workspace, select the object or objects that you want to convert. On the Object menu, click Convert to Button. On the Object menu, click Edit. In the Animation key editor, select a button state. Animate the button, as desired. Repeat Steps 5 and 6 for each state. On the Object menu, click End Editing. On the Inspector, add actions for each state, as necessary.
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. 2. Display the Animation panel. On the Object menu, click Create Animation. The workspace is in editing mode. All other objects on the workspace are hidden.
24
User Guide
Working with objects
3. 4. 5.
Use the drawing and text tools to create the scene. Animate the scene, as desired. On the Object menu, click End Editing.
Convert a scene to an animated object

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

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.
Select an object
1. 2. On the toolbox, click the Transformation tool. 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).
25
User Guide
Select multiple objects

1. 2. On the toolbox, click the Transformation tool. Perform one of the following actions: 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. 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. 2. 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. 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. 2.
26
Select the object. On the Objects menu, click Duplicate.
User Guide
Adjusting path segments
3.
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. 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 Bzier 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 Bzier 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.
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. 2. 3. On the toolbox, click the Transformation tool or the Select tool. On the workspace, double-click the object. The anchor points appear on the path. Drag the anchor point to its new position.
Change the shape of a curve

1. 2. On the Toolbox, click the Transformation tool or the Select tool. On the workspace, double-click the object. The anchor points appear on the path.
27
User Guide
View object properties
3. 4.
Click an anchor point to display the control points that define the curve. 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. 2. 3. 4. On the Toolbox, click the Add Points tool. On the workspace, double-click the object. The anchor points appear on the path. Place the pointer on the path where you want to add the new point, then click. Repeat step 3 for each additional point you want to add.
Remove anchor points from a shape

1. 2. 3. 4. On the Toolbox, click the Remove Points tool. On the workspace, double-click the object. The anchor points appear on the path. Click the anchor point you want to remove. Repeat step 3 for each additional anchor point you want to remove.

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 Text Text on Curve Freehand Path Description configures the font face, font size, and other text attributes for simple text objects configures the font face, font size, and other text attributes for texton-curve objects configures the anti-aliasing property for freehand path objects
28
User Guide
Icon
Tab Bzier Line Polyline Rectangle Rounded Rectangle Ellipse Arc Text Area Selection List Launch Application Theme Button Animation or Animation Transform Properties Camera Button Stroke Fill Path Animation Transformation Bitmap Image Composite Filters Effects
Description configures the anti-aliasing property for Bzier objects configures the anti-aliasing property for line objects configures the anti-aliasing property for polyline objects and polygon objects configures the anti-aliasing property for rectangle objects configures the radius of round corners and the anti-aliasing property for rounded-rectangle objects configures the anti-aliasing property for ellipse objects configures the ellipse radius, axis rotation, and other arc options, and the anti-aliasing property for elliptical arc objects configures the default text and field name for text-area objects Specifies the items that appear in selection-list objects configures the application to start for a Theme button configures the animation options for a Theme button or previews an animation object
configures the object size, position, rotation, visibility, and other properties for a Theme button configures the font face and font color properties for text in text area and selection list objects configures the Preserve Aspect Ratio property for the view box configures events for a button object and previews each button state configures the stroke color, width, and style for vector shapes and text objects configures the fill color or pattern for vector shapes and text objects configures a path to bind an object with configures the rotation, dimensions, and visibility for all objects configures interpolation properties for rasterized bitmap image objects applies the optical composite method for bitmap image objects configures filters for bitmap image objects configures effects for bitmap image objects
29
User Guide
Specifying shape properties
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.
Smooth a shapes edges

1. 2. 3. On the workspace, click an object. On the Inspector, click the shape-specific tab. 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. 2. On the workspace, click a rounded rectangle object. 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. 2. 3. 4. 5. 6. On the workspace, click an elliptical arc object. In the Inspector, click the Arc tab. In the X field and Y field, type the radius length of the X-axis and Y-axis. To adjust the angle of the X-axis radius, in the Axis Rotation field, type the rotation angle, in degrees. To draw the arc as the longer distance around the ellipse that the arc is based on, click Large Arc. To draw the arc on the negative side of the X-axis radius, click Flip.
30
User Guide
Specify text object properties
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.
Text properties in the Inspector

Property Text Style Underline Strikethrough Horizontal and Vertical Constrain Description This property contains the text that an object displays. You can change the text from within this field. 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. This property underlines the text. This property renders a line through the text. This property specifies the width and height of the text. 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. 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). 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. 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. This property mirrors the text horizontally or vertically. This property specifies whether font edges are smooth.
Spacing
Shearing
Offset
Flip Horizontal and Flip Vertical Anti-aliasing
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.
31
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. 2. 3. In the Inspector, click the Stroke or Fill tab. In the drop-down list, click Color. Perform one of the following actions: 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. To configure the opacity of the stroke or fill color, move the Alpha slide bar to the appropriate level. 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.
4. 5.
Remove the stroke or fill color of an object

1. 2. On the Inspector, click the Stroke or Fill tab. 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. 2. 3. In the Inspector, click the Stroke tab. In the Width field, type the thickness of the object stroke, in pixels. Configure any of the following settings: In the Cap drop-down list, click the shape of the ends for an open path. 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.
32
User Guide
Working with bitmap objects
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. 2. 3. 4. On the Inspector, click the Fill tab. In the drop-down list, click Pattern. Click the Browse icon and browse for an image that you want to use as the pattern tile. 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. In the Alpha field, specify the opacity of the pattern.
5.
You can change the pattern fill image at any time; the X offset, Y offset, and alpha values do not change.

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

1. 2. In the Inspector, click the Composite tab. 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. 2. 3. 4. 5. 6. In the Inspector, on the Filters tab, click Add Filter. In the drop-down list, click the filter that you want to apply. Repeat steps 1 and 2 for each additional filter you want to apply. 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. To change the settings of a filter, in the Selected Filters list, select the filter and click Properties. To remove a filter, in the Selected Filters list, select the filter and click the Delete button.
33
User Guide
Apply one or more effects to a bitmap image

You can animate effects settings. 1. 2. 3. 4. In the Inspector, on the Effects tab, select an effect. Click the button that is adjacent to display the Properties dialog box for the effect that you selected. Specify appropriate properties for the effect. 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 Normal Multiply Screen Erase Effect This blending method has no effect (no blending method is applied). 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. The object burns through underlying objects. This action does not effect the background color. 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. 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. This blending method subtracts the RGB values of the underlying object from the RGB values of the object for each of the three channels.
Add Subtract
34
User Guide
Blending method Darkest Lightest Difference Average Invert Dissolve
Effect This blending method uses the lower of the two RGB values for each of the three channels. This blending method uses the higher of the two RGB values for each of the three channels. 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. 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. This blending method uses the object's alpha level to invert the underlying objects. 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. This blending method uses the hue of the object on underlying objects. This blending method uses the saturation of the object on underlying objects. This blending method uses the luminosity of the object on underlying objects. This blending method uses the hue and saturation of the object on underlying objects. This blending method computes the difference in object opacities, determines the absolute value, and displays the dominant color. This blending method is the inverse of an erase. This method uses a composite of the object shape to mask out all lower objects.
Replace Hue Replace Saturation Replace Luminosity Replace Color XOR Mask Alpha Mask
Using bitmap image effects

Effect Shadow Color Glow Color Intensity Applies to this effect Inner/Outer Shadow Inner/Outer Glow Outer Shadow Inner Shadow Outer Glow Inner Glow Blur Emboss & Bevel Outer Shadow Inner Shadow Outer Glow Inner Glow
35
Description This effect changes the color of the shadow. This effect changes the color of the glow. This effect adjusts the opacity of the copy and the intensity of the shadow or glow effect. Intensity interacts with the opacity settings of the object and its layer. For example, if you configure an objects opacity to be 200, you must double the intensity to get the same effect. 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 the effect. This setting interacts with any blur filter that applies to the object.
User Guide
Changing transformation properties
Effect Offset X Offset Y Low Color
Applies to this effect Emboss & Bevel Inner/Outer Shadow Emboss & Bevel Inner/Outer Shadow Emboss & Bevel Emboss & Bevel
Description This effect adjusts the position of a copy relative to the original. This effect adjusts the position of a copy relative to the original. 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. 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. 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. 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.
High Color
Emboss & Bevel
Effect Type
Emboss & Bevel

You can use the Transformation tab in the Inspector to specify transformation properties for an object to change the objects 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

1. 2. 3. On the workspace, click an object. In the Inspector, click the Transformation tab. In the Position fields, type the objects x-axis and y-axis coordinates.
36
User Guide
The values represent the distance from the upper-left corner of the objects bounding box to the left edge and top edge of the canvas.
Scale an object
1. 2. 3. On the workspace, click an object. In the Inspector, click the Transformation tab. 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
1. 2. 3. On the workspace, click an object. In the Inspector, click the Transformation tab. In the Skew fields, type the number of degrees that you want the object to skew along the objects x-axis and y-axis, respectively. Values must be between -89 and 89 degrees.
Rotate an object
1. 2. On the workspace, click an object. In the Rotation field, on the Inspectors 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. 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 objects rotation center. To reset the rotation center to the center of the object, click Middle.
3. 4.
Make an object visible or invisible for the current frame

1. 2. On the workspace, click an object. 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

1. 2. On the workspace, click an object. In the Inspector, click the Transformation tab.
37
User Guide
Managing objects
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.
Select an object
1. 2. On the toolbox, click the Transformation tool. 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. 2. 3. On the Objects panel, right-click the objects entry. Click Rename. 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.
38
User Guide
Converting groups to switchgroup animations
Unlock the position of an object

On the Objects panel, click the Lock button again.
Group objects
1. 2. 3. Select the layer that contains the objects you want to group together. Select the objects. Click Object > Group. The Objects panel displays the group of objects as a single entity.
Ungroup objects
1. 2. 3. Select the group. Click Object > Ungroup. 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. Click OK. The Objects panel displays the individual objects.
4.
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.
39
User Guide
Convert an object to a bitmap image
2. 3.
4. 5. 6.
On the Inspector Transformation tab, select the SwitchGroup check box. 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 bottommost object displayed at Frame 1, the next object at Frame 2, and continues upwards through the layer, with the top-most object listed last. In the Default Child drop-down list, specify the child that is visible when the animation is not playing. 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. 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. To remove an instance of a child object from the animation, select the child from the Child Animation list, then click Remove. Click OK. To test the switchgroup, click the Play button on the Animation panel.
7. 8. 9.
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. 2. 3. 4. On the canvas, select the switchgroup object. On the Inspector Attributes tab, click the Edit button. Change the switchgroup settings as necessary. 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.
40
User Guide
Using catalogs
On export, the BlackBerry Composer converts text objects that use non-BlackBerry device system fonts into bitmap images. 1. 2. On the workspace, select an object. Click Object > Rasterize.
Convert an object to a button

1. 2. 3. 4. 5. 6. 7. 8. 9. On the Toolbox, click the Transformation tool. On the workspace, select the object or objects that you want to convert. On the Object menu, click Convert to Button. On the Object menu, click Edit. In the Animation key editor, select a button state. Animate the button, as desired. Repeat Steps 5 and 6 for each state. On the Object menu, click End Editing. On the Inspector, add actions for each state, as necessary.
Convert a scene to an animated object

1. 2. 3. 4. 5. On the Toolbox, click the Transformation tool. On the workspace, select the object or objects you want to convert. On the Object menu, click Convert to Animation. The workspace enters editing mode. Modify the image for each button state, as desired. On the Object menu, click End Editing.
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.
41
User Guide
Using catalogs
View the Catalog panel

On the Window menu, click Catalog.
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. 2. 3. On the Inspector, click the Fill tab. Click Pattern from the drop-down list. 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. 2. 3. Click the Catalog options icon, then click New. In the Catalog Name field, provide a unique name for the catalog. 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. 2. 3. 4. 5.
42
Choose a custom catalog in the Catalog drop-down list. Click the Catalog options icon. Click Edit. In the Catalog Name field, edit the name for the catalog. Edit the types of items that you can add to the catalog.
User Guide
Using layers
Delete a custom catalog

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

1. 2. 3. Choose a catalog in the Catalog drop-down list. Click the item you want to add. 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. 2. 3. Choose a catalog in the Catalog drop-down list. Click the item that you want to delete. 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. Tip: You can also display the Layers panel from the Window menu.
43
User Guide
Using layers
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. 2. On the Layers panel, select the layer you want to remove. 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. 2. On the Layers panel, double-click the layer description. 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 topmost 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. 2. 3. 4. On the Layers panel, select a layer. Right-click the Layers panel. Click Rasterize. 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.
44
User Guide
Using layers
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. 2. 3. 4. On the Layers panel, select a layer. Right-click the Layers panel. Click Merge. Select one of the following options: 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. 2. Select the layer. The objects in the layer are listed in the Objects panel. On the Objects panel, select the object you want to delete. Click the Delete button.
45
User Guide
Creating animated content
Creating animated content

Timeline animation is a combination of the following:
You can create animation effects for your BlackBerry Composer content by changing the values of certain object properties over time. 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 objects 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.
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.
46
User Guide
View animation properties
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. Inspector Panel Tab Transformation tab Transformation tab Transformation tab Transformation tab Transformation tab Animate Path Transformation tab Transformation tab Stroke tab Stroke tab Fill tab Animation panel property Translation Rotation angle Rotation center Scaling Skew X, Skew Y Motion Path Visibility Opacity Color-Stroke Stroke-Width Color-Fill
Property Position Rotation Rotation center Scale Skew Animation path Visibility Opacity Stroke color Stroke width Fill color
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.
47
User Guide
Editing animations
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.
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.
48
User Guide
Editing animations
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.
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. 2. On the Animation panel, click the Animation Wizard button. Select one of the following options: Resize Animation Length Delete Frames Insert Frames Click Next. Complete the information.
3. 4.
49
User Guide
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.
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. 2. On the key editor, select the frame after the point where you want the new frame to appear. Click Animation > Insert Frame. To add multiple frames, use the Animation Wizard.
Delete a frame
1. 2. On the key editor, select the frames you want to delete. 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. 2. 3. 4. Select the frame(s) you want to copy. On the Edit menu, click Copy Frame(s). 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. On the Edit menu, click Paste Frames.
50
User Guide
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: 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 Select all object handles and property keys in a single frame for an entire layer. Select all property keys in a single frame for an object. Select an individual property key. Steps Click a layer handle. Click an object handle. Click a property key.
51
User Guide
Task Select multiple layer handles, object handles or property keys. Select all keys for a property.
Steps Press SHIFT and click the applicable handles and keys. 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 objects 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 objects 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.
52
User Guide
Editing animation behavior between frames
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. 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 objects 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. 2. Click a layer handle (the arrow indicator for the layer). The layer handle turns red to indicate that it is selected. 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. 2. Click an object handle (the arrow indicator for the object). The object handle turns red to indicate that it is selected. 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 objects fill color property key from frame 10 to an earlier frame. When manipulating properties, you can also add and delete keys.

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 objects position at each frame will initially be close together, then get increasingly further apart.
53
User Guide
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.
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 Constant Accelerating Definition This is the default behavior. The property value changes in equal increments from the start value to the end value. 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. 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. 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 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.
Oscillating
Overshoot
54
User Guide
Motion Behavior Setting Discrete
Definition 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 Linear Curving Definition This is the default behavior. This behaviour moves the object along in a straight line between the start position and end position. 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. 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. This behavior creates a semicircular path for the object. To reverse the direction of the semicircle, select the Invert check box.
Wave
Circle
Specify path and motion behavior

1. 2. On the Animation panel, click the name of the object property you want to tween. 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.
55
User Guide
3. 4. 5. 6.
In the Motion drop-down list, select the behavior that you want to control the spacing of the reference points. In the Path drop-down list, select the behavior you want to control the path. If applicable, select another segment and repeat steps 3 and 4. 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.
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.
56
User Guide
Making content interactive
Making content interactive

add rollovers to objects define hyperlinks that link to other content launch an application play animation sequences or sounds based on user actions
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:
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 Button Description 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) Triggers an action when the user presses a specified key on the BlackBerry device. Triggers an action when the animation reaches a specified frame on the timeline. 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.
57
HotKey Timeline Relative
User Guide
Creating events that trigger actions
Create a button event

1. 2. On the workspace, select the button object to which you want to add an action. On the Button tab on the Inspector, click one of the following events from the Button Events: 3. 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. 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. In the Event section of the dialog box, in the Buttons section, specify the length of time the action will be delayed.
4.
Create a hotkey event

1. 2. Click Interactivity > Hotkey Actions. 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. In the Event section of the dialog box, in the Key field, type the key the user must type to trigger the event.
3.
Create a timeline event

1. 2. Click Interactivity > Timeline Actions. 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. In the Event section of the dialog box, in the Frame field, type the frame number at which the action is triggered.
3.
Create a relative event

1. 2. Click Interactivity > Relative Actions. 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.
58
User Guide
Creating actions
b. 3.
Set the action properties as necessary.
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 Play Animation Description 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. Stops the specified animation. 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. Turns off the display property of the specified animation or button object. Turns on the display property of the specified animation or button object. Loads a new .pme, .pmb, or .svg file from a specified URL. The selected scene replaces the file currently displayed. Submits form data collected from the user with Text Area and Selection List objects. Clears user data from Text Area and Selection List objects. Launches the selected application. This action must be used embedded in a theme.
Stop Animation Play Sound
Hide Component Show Component Load Scene Form Submit Form Reset Launch Application
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. 2. 3. 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. 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. 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.
59
User Guide
Creating actions
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. 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. 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.
5. 6.
Create an action to stop an animation

1. 2. 3. In the Actions dialog box, click the Stop Animation button. 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. In the Stop Animation section of the dialog box, in the Animation drop-down list, select the animation object you want to stop playing.
Create an action to play a sound

1. 2. 3. 4. In the Actions dialog box, click the Play Sound button. The new Play Sound action is added to the Action list. In the Action list, select the Play Sound action you just added. The bottom portion of the dialog box displays the properties that can be set for this action. 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. To repeat the sound file, select Loop, then set the repetition options: a. b. 5. Forever: Repeats the sound until the scene is replaced. # Times: Specifies the number of times the sound should be repeated.
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.
60
User Guide
Creating actions
Create an action to hide an animation component

1. 2. 3. In the Actions dialog box, click the Hide Component button. In the Action list, select the Hide Component action you just added. The bottom portion of the dialog box displays the properties that can be set for this action. 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. 2. 3. In the Actions dialog box, click the Show Component button. 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. 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. 2. 3. In the Actions dialog box, click the Load Scene button. 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. 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.
Create an action to submit a form

1. 2. 3. 4. In the Actions dialog box, click the Form Submit button. In the Action list of the dialog box, select a Form Submit action. The bottom portion of the dialog box displays the properties that can be set for this action. 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. 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.
61
User Guide
Creating actions
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. 2. 3. In the Actions dialog box, click the Launch Application button. In the Action list of the dialog box, select a Launch Application action. The bottom portion of the dialog box displays the properties that can be set for this action. 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. If you are starting a BlackBerry application or a third party application, select an application from the Application list.
4.
Change interactive content

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

1. 2. Click Interactivity > Focus Order. 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.
62
User Guide
Creating actions
3.
To return the focus to the first button when the user scrolls past the last button, click Wrap Focus.
63
User Guide
Exporting and testing content
Exporting and testing content

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
You can preview and test your content at any time by launching the BlackBerry Smartphone Simulator from the BlackBerry Composer.
2. 3.
Tip: You can preview a new file before saving it. On the toolbox, click the Simulator button. The BlackBerry Smartphone Simulator opens and displays your content. 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. 2. From the File menu, click Export > SVG. On the File tab, specify the file title and properties. Field Title Description Allow Zoom and Pan Description Specify a title for the animation. Specify a description for the animation. Enable zooming and panning.
64
User Guide
Exporting content
Field Export All Layers Export SVG Tiny 1.1
Dimensions in % 3.
Description Export all layers of the animation. If this option is not selected, only visible layers are exported. 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. Specify the dimensions for the animation as a percentage. Ensure that you use this option for web-based content.
On the Image tab, specify whether you want to export your images in .gif or .png format. Image type PNG Option Filter Description None compresses the image without a filter. This option is recommended for indexed-color and bitmapmode 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 filterSub, Up, Average, or Paththat is best-suited for the image. Select All if you are unsure of which filter to use. Specify a method to reduce the file size. 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. 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. Select the Use Images On Disk check box to use the original images on disk instead of exporting out new ones.
GIF and PNG
Compression Interlace
Always Export images Use Images On Disk 4.
On the Content Directory tab, click the Open icon and select where to export your images and sounds.
65
User Guide
Exporting content
5.
In the Color Reduction section, adjust the color settings of your exported file. Field Color Mode Palette Description Select the mode to use. 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 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. From the Dithering Noise drop-down list, select a value.
Dithering
Dithering Noise 6. 7.
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. 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. 2. 3. On the File menu, click Export > PMB. Specify the name and location for the .pmb file. Click Save. The BlackBerry Composer transcodes and bundles your file and any external resources into a .pmb file.
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. 2. 3. On the File menu, click Export > PME. The Save As dialog box appears. Specify the name and location for the .pme file. 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.
66
User Guide
Exporting content
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. 1. Perform one of the following actions: On the File menu, click Export > GIF. On the File menu, click Export > PNG. In the Information section, change the following settings: Field Show Preview Update Description 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. 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. 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 Override Background Color Use Temporary Image Cache Description 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. 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. 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. Depending on the type of export, select the applicable options.
2.
Live Update
Interlace
4.
67
User Guide
Exporting content
Field Filter
Description 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 filterSub, Up, Average, or Pathbest-suited for the image. Select All if you are unsure of which filter to use. Specifies a method to reduce file size.
Compression 5.
In the Color Reduction section, set any of the following color reduction options. Option Color Mode Palette Description Select the mode to use. 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 might improve image quality. Selecting this option increases your file size. From the Dithering Noise drop-down list, select a value.
Dithering Dithering Noise 6. 7.
To name and save the current export settings for later use or to load a previously saved group of setting, select the Save current settings when closing check box. 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. 2. On the File menu, click Export > Animated GIF. In the Information section, change the following settings:
68
User Guide
Exporting content
Field Show Preview Update
Description 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. 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. 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.
Live Update
3.
In the Generic Options section, select any of the following check boxes. Option Override Background Color Use Temporary Image Cache Description 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. 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.
4.
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. Depending on the type of export, select the applicable options. Field Interlace Description 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. Sets the number of times for the .gif animation to repeat. Sets the speed for the .gif animation.
Loop Override Doc. Speed 5.
In the Color Reduction section, set any of the following color reduction options. Option Palette Description Specifies which set of 256 (or fewer) colors is used in the exported animation.
69
User Guide
Exporting content
Option
Description 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. 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. Specifies how the BlackBerry Composer reduces the number of colors for export. Experiment with both methods to determine which method produces the best image. Dithering might improve image quality. Selecting this option increases your file size.
Colors
Color Reduction
Dithering 6. 7.
To name and save the current export settings for later use or to load a previously saved group of setting, select the Save current settings when closing check box. Click OK.
70
User Guide
Importing Flash content
Importing Flash content
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.
71
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 frameby-frame visibility and position into the equivalent interpolator for SVG. 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
72
User Guide
Converting embedded images
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 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.
73
User Guide
Converting simple buttons and frame actions
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).
74
User Guide
Provide feedback
Provide feedback
To provide feedback on this deliverable, visit www.blackberry.com/docsfeedback.
75
User Guide
Legal notice
Legal notice
2011 Research In Motion Limited. All rights reserved. BlackBerry, RIM, Research In Motion, 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 NONPERFORMANCE OF ANY SOFTWARE, HARDWARE, SERVICE, OR ANY THIRD PARTY PRODUCTS AND SERVICES
76
User Guide
Legal notice
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 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.
77
User Guide
Legal notice
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 Waterloo, ON N2L 3W8 Canada Research In Motion UK Limited Centrum House 36 Station Road Egham, Surrey TW20 9LF United Kingdom Published in Canada
78

Blackberry Composer-User Guide

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Blackberry Composer-User Guide

Hochgeladen von

Copyright:

Verfügbare Formate

BlackBerry Composer

Published: 2011-05-19 SWD-1304256-0519084359-001

Create a new project

Project window and workspace

Project window and workspace

Change a canvas property

Hand Zoom Stroke swatch

No color Swap fill and stroke Simulator

Display the toolbox

Specifying colors on the toolbox

Change a canvas property

On the Canvas menu, click Properties.

Configure the rulers and alignment tools

Crop the canvas

Configure the rulers and alignment tools

Change the spacing or color of the grid lines

Undo and repeat operations

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

Change the gamma preferences

Change the ToolTip preferences

Change the ToolTip preferences

Set theme button preferences

Change the BlackBerry Smartphone Simulator preferences

Change transparency preferences

Resolution Model OS Version

Change transparency preferences

Change tool properties

Create a rectangle or square

Create a rounded rectangle or rounded square

Create an ellipse or circle

Create a freehand path

Create a freehand path

Create an elliptical arc

Create a polygon or polyline

Create a Bzier curve

Create a simple text object

Create text on a curve

Creating user input fields

Convert text to Bzier curves

Creating user input fields

Create a text entry field

Create a drop-down list

Defining the viewable screen area

Defining the viewable screen area

Create a view box

Defining the viewable screen area

Change an existing view box

Preserving the aspect ratio of the view box

Defining the viewable screen area

Preserve the aspect ratio in the view box

Create a Zoom effect

Create a Pan effect

Creating animation objects

Convert an object to a button

Creating animation objects

Create an animation object

Working with objects

Convert a scene to an animated object

Working with objects

Working with objects