blackberry composer-user guide

Upload: sean-osborne

Post on 05-Apr-2018

227 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/2/2019 Blackberry Composer-User Guide

    1/80

    BlackBerry ComposerVersion: 6.0

    User Guide

  • 8/2/2019 Blackberry Composer-User Guide

    2/80

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

  • 8/2/2019 Blackberry Composer-User Guide

    3/80

    Contents1 Getting started.................................................................................................................................................. 7

    Create a new project........................................................................................................................................ 7Project window and workspace........................................................................................................................ 7

    Toolbox............................................................................................................................................................. 9

    Display the toolbox.................................................................................................................................... 10

    Specifying colors on the toolbox............................................................................................................... 10

    Change a canvas property................................................................................................................................ 10

    Crop the canvas......................................................................................................................................... 11

    Configure the rulers and alignment tools......................................................................................................... 11

    Change the spacing or color of the grid lines............................................................................................ 11

    Change the origin of the grid system......................................................................................................... 12

    Add guides to the workspace.................................................................................................................... 12

    Undo and repeat operations............................................................................................................................. 12

    Specify the number of operations to undo and redo................................................................................ 12

    2 Change preferences.......................................................................................................................................... 13

    Change the start preferences........................................................................................................................... 13

    Change the gamma preferences....................................................................................................................... 13

    Change the ToolTip preferences....................................................................................................................... 14

    Set theme button preferences.......................................................................................................................... 14

    Change the BlackBerry Smartphone Simulator preferences............................................................................ 14

    Change transparency preferences.................................................................................................................... 15

    Change tool properties..................................................................................................................................... 15

    3 Creating objects................................................................................................................................................ 16

    Create a line...................................................................................................................................................... 16

    Create a rectangle or square............................................................................................................................ 16

    Create a rounded rectangle or rounded square............................................................................................... 16

    Create an ellipse or circle.................................................................................................................................. 16

    Create a freehand path..................................................................................................................................... 17

    Create an elliptical arc...................................................................................................................................... 17

    Create a polygon or polyline............................................................................................................................. 17

    Create a Bzier curve........................................................................................................................................ 17

    Creating text..................................................................................................................................................... 18

    Create a simple text object........................................................................................................................ 18

    Create text on a curve............................................................................................................................... 18

    Edit text..................................................................................................................................................... 18

  • 8/2/2019 Blackberry Composer-User Guide

    4/80

    Convert text to Bzier curves.................................................................................................................... 19

    Creating user input fields.................................................................................................................................. 19

    Create a text entry field............................................................................................................................. 19

    Create a drop-down list............................................................................................................................. 19

    Defining the viewable screen area................................................................................................................... 20

    Create a view box...................................................................................................................................... 20

    Change an existing view box...................................................................................................................... 21

    Preserving the aspect ratio of the view box.............................................................................................. 21

    Preserve the aspect ratio in the view box................................................................................................. 22

    Create a Zoom effect................................................................................................................................. 23

    Create a Pan effect.................................................................................................................................... 23

    Creating buttons............................................................................................................................................... 23

    Create a button.......................................................................................................................................... 24

    Convert an object to a button................................................................................................................... 24

    Creating animation objects............................................................................................................................... 24

    Create an animation object....................................................................................................................... 24

    Convert a scene to an animated object..................................................................................................... 25Working with objects........................................................................................................................................ 25

    Select an object......................................................................................................................................... 25

    Select multiple objects.............................................................................................................................. 26

    Move a selected object on the workspace................................................................................................ 26

    Resize a selected object using the bounding box...................................................................................... 26

    Rotate a selected object............................................................................................................................ 26

    Duplicate an object.................................................................................................................................... 26Adjusting path segments.................................................................................................................................. 27

    Move anchor points on a path.................................................................................................................. 27

    Change the shape of a curve..................................................................................................................... 27

    Add anchor points to a shape.................................................................................................................... 28

    Remove anchor points from a shape......................................................................................................... 28

    View object properties..................................................................................................................................... 28

    Options in the Inspector............................................................................................................................ 28

    Specifying shape properties.............................................................................................................................. 30

    Smooth a shapes edges............................................................................................................................ 30

    Change the roundness of a rounded rectangle object.............................................................................. 30

    Change the shape properties of an elliptical arc....................................................................................... 30

    Specify text object properties........................................................................................................................... 31

    Text properties in the Inspector................................................................................................................ 31

    Specifying stroke and fill properties................................................................................................................. 31

    Specify the stroke or fill color.................................................................................................................... 32

  • 8/2/2019 Blackberry Composer-User Guide

    5/80

    Remove the stroke or fill color of an object.............................................................................................. 32

    Specify the stroke style attributes............................................................................................................. 32

    Specify a pattern fill................................................................................................................................... 33

    Working with bitmap objects........................................................................................................................... 33

    Change a bitmap image............................................................................................................................. 33

    Specify how an object blends with background objects............................................................................ 33

    Add one or more filters to a bitmap image............................................................................................... 33

    Apply one or more effects to a bitmap image........................................................................................... 34

    Blending rasterized images........................................................................................................................ 34

    Using bitmap image effects....................................................................................................................... 35

    Changing transformation properties................................................................................................................ 36

    Set the position coordinates for an object................................................................................................ 36

    Scale an object........................................................................................................................................... 37

    Skew an object........................................................................................................................................... 37

    Rotate an object........................................................................................................................................ 37

    Make an object visible or invisible for the current frame......................................................................... 37

    Specify the opacity level of an object........................................................................................................ 37Managing objects.............................................................................................................................................. 38

    View the Objects panel.............................................................................................................................. 38

    Select an object......................................................................................................................................... 38

    Rename an object...................................................................................................................................... 38

    Move an object forward or back on the workspace.................................................................................. 38

    Lock the position of an object................................................................................................................... 38

    Unlock the position of an object................................................................................................................ 39Group objects............................................................................................................................................ 39

    Ungroup objects........................................................................................................................................ 39

    Converting groups to switchgroup animations................................................................................................. 39

    Convert a group of objects to a switchgroup............................................................................................ 39

    Change the switchgroup settings.............................................................................................................. 40

    Convert an object to a bitmap image............................................................................................................... 40

    Convert an object to a button................................................................................................................... 41

    Convert a scene to an animated object..................................................................................................... 41

    Using catalogs................................................................................................................................................... 41

    View the Catalog panel.............................................................................................................................. 42

    Add a color to the Catalog......................................................................................................................... 42

    Add an object to the Catalog..................................................................................................................... 42

    Add a pattern to the Catalog..................................................................................................................... 42

    Open a catalog........................................................................................................................................... 42

    Create a new catalog................................................................................................................................. 42

  • 8/2/2019 Blackberry Composer-User Guide

    6/80

    Edit an existing custom catalog................................................................................................................. 42

    Delete a custom catalog............................................................................................................................ 43

    Add a Catalog item to a project................................................................................................................. 43

    Delete an item from the Catalog............................................................................................................... 43

    Using layers....................................................................................................................................................... 43

    View the Layers panel................................................................................................................................ 43

    Create a layer............................................................................................................................................. 44

    Duplicate a layer........................................................................................................................................ 44

    Delete a layer............................................................................................................................................. 44

    View or hide layers.................................................................................................................................... 44

    Rename a layer.......................................................................................................................................... 44

    Reorder layers........................................................................................................................................... 44

    Rasterize one or more layers into a single bitmap image.......................................................................... 44

    Merge layers together............................................................................................................................... 45

    Delete objects in a layer............................................................................................................................ 45

    4 Creating animated content............................................................................................................................... 46

    Key frame animation........................................................................................................................................ 46

    Non-linear animation........................................................................................................................................ 46

    View animation properties............................................................................................................................... 47

    Editing animations............................................................................................................................................ 47

    Using the key frame editor to manage key frames................................................................................... 48

    Configuring animation between key frames............................................................................................. 49

    Edit an animation using the Animation wizard.......................................................................................... 49

    Working with animation frames....................................................................................................................... 50

    Select a single frame.................................................................................................................................. 50

    Select a range of frames............................................................................................................................ 50

    Add a frame............................................................................................................................................... 50

    Delete a frame........................................................................................................................................... 50

    Copy frames............................................................................................................................................... 50

    Working with property keys and animation handles................................................................................. 51Creating keys............................................................................................................................................. 52

    Moving a property key or object handle................................................................................................... 52

    Changing property keys............................................................................................................................. 53

    Editing animation behavior between frames................................................................................................... 53

    Motion behavior properties...................................................................................................................... 54

    Path behavior properties........................................................................................................................... 55

    Specify path and motion behavior............................................................................................................. 55Using the tweening editor toolbar............................................................................................................ 56

  • 8/2/2019 Blackberry Composer-User Guide

    7/80

    5 Making content interactive............................................................................................................................... 57

    Creating events that trigger actions................................................................................................................. 57

    Create a button event................................................................................................................................ 58Create a hotkey event............................................................................................................................... 58

    Create a timeline event............................................................................................................................. 58

    Create a relative event.............................................................................................................................. 58

    Creating actions................................................................................................................................................ 59

    Create an action to play an animation...................................................................................................... 59

    Create an action to stop an animation...................................................................................................... 60

    Create an action to play a sound............................................................................................................... 60

    Create an action to hide an animation component................................................................................... 61

    Create an action to show an animation component................................................................................. 61

    Create an action to load a scene............................................................................................................... 61

    Create an action to submit a form............................................................................................................. 61

    Create an action to reset a form................................................................................................................ 61

    Create an action to start an application.................................................................................................... 62

    Change interactive content....................................................................................................................... 62

    Change the focus order of the buttons..................................................................................................... 62

    6 Exporting and testing content.......................................................................................................................... 64

    Preview content using the BlackBerry Smartphone Simulator......................................................................... 64

    Exporting content............................................................................................................................................. 64

    Export to an SVG file.................................................................................................................................. 64

    Export to a PMB file................................................................................................................................... 66

    Export to a PME file................................................................................................................................... 66

    Export to a GIF or PNG file......................................................................................................................... 67

    Export to an animated GIF file................................................................................................................... 68

    7 Importing Flash content.................................................................................................................................... 71

    Converting Flash files........................................................................................................................................ 71

    Converting shapes and shape properties......................................................................................................... 71

    Converting basic vector shapes................................................................................................................. 71

    Converting color transforms in vector shapes........................................................................................... 72

    Converting animation....................................................................................................................................... 72

    Converting affine transforms..................................................................................................................... 72

    Converting movie clip timelines................................................................................................................ 72

    Converting visibility and position animation............................................................................................. 72

    Converting embedded images.......................................................................................................................... 73

  • 8/2/2019 Blackberry Composer-User Guide

    8/80

    Converting static text with device fonts........................................................................................................... 73

    Converting simple buttons and frame actions.................................................................................................. 73

    8 Provide feedback.............................................................................................................................................. 75

    9 Legal notice....................................................................................................................................................... 76

  • 8/2/2019 Blackberry Composer-User Guide

    9/80

    Getting started 1You 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 projectWhen you start the BlackBerry Composer or create a new project, you can select a canvas size that is based on a

    BlackBerry device. By default, the BlackBerry Composer creates a canvas that is the same dimensions as the screen

    on the BlackBerry device that you specified. You can choose to create a custom canvas size for your project.

    1. On the File menu, click New.

    2. In the Name field, type a name for your new BlackBerry Composer project.

    3. In the BlackBerry drop-down list, click a BlackBerry device to use as the template for your project. The BlackBerry

    Composer sets the height and width values for the canvas to match the screen size of the BlackBerry device.

    4. To specify custom dimensions of your canvas, type the dimensions in pixels in the Width and Height fields.

    5. Select Transparent, White, or Custom to specify the background color of the canvas. If you selected Custom,

    click the adjacent color swatch to select the color that you want to use for your background.

    6. Click Create.

    Project window and workspaceYou 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 Getting started

    7

  • 8/2/2019 Blackberry Composer-User Guide

    10/80

    The BlackBerry Composer project window contains the project workspace. The workspace includes the following

    elements:

    Element Description

    canvas The canvas represents the viewable area.

    You can change the size and the background color of the canvas.

    overscan area The overscan area is the gray area around the canvas. Objects can enter and exit the canvas

    from the overscan area during an animation.

    You can use the overscan area to store objects for future use.

    rulers The rulers at the top and the left of the project workspace provide measurements in pixels.

    The rulers indicate the vertical and horizontal position of the mouse pointer.

    You can show or hide the rulers.

    grid The grid is an alignment tool that is represented by regularly-spaced horizontal and vertical

    lines. To assist with alignment, you can specify that objects auto-align to the grid. When you

    create or move objects, they automatically align to a line on the grid.

    By default, the grid aligns at the upper-left corner of the project window . You can change

    the alignment of the grid.

    You can show or hide the lines on the grid, change their color and spacing, and specify the

    auto-align option.

    guides Guides are alignment tools that you can add wherever you need them, by dragging them

    from the horizontal or vertical rulers. To assist with alignment, you can specify that objects

    auto-align to the guides. When you create or move objects, they automatically align to a

    guide.

    You can show or hide the guides, select the auto-align option, or lock the guides to preventyou from accidentally moving them.

    User Guide Project window and workspace

    8

  • 8/2/2019 Blackberry Composer-User Guide

    11/80

    Element Description

    limits The limits are lines that show the edges of the canvas. You can use the limits to resize the

    canvas by dragging them to the appropriate size.You can show or hide the limits, or lock them to prevent you from accidentally moving them.

    ToolboxYou can use the tools on the toolbox to create vector graphic shapes and text objects or you can change imported

    images in your BlackBerry Composer project.

    Icon Tool Shortcut Description

    Transformation V You can use the Transformation tool to select an object, move

    an object, or change the width and height of an object.

    Select Q You can use the Select tool to reshape an object by moving a

    single anchor point or Bzier control point.

    Text T You can use the Text tool to create a text object.

    Text on Curve C You can use the Text on Curve tool to create text on a curve.

    Freehand F You can use the Freehand tool to draw free-form paths. Paths

    are closed automatically if you specify a fill color other than

    None.

    Bzier P You can use the Bzier tool to draw curved lines.

    Line L You can use the Line tool to draw a single straight-line path.

    Polyline O You can use the Polyline tool to draw a continuous path thathas one or more straight-line segments.

    Rectangle R You can use the Rectangle tool to draw a rectangle shape.

    Rounded Rectangle N You can use the Rounded Rectangle tool to draw a rectangle

    shape that has rounded corners.

    Ellipse E You can use the Ellipse tool to draw ellipses or circles.

    Arc A You can use the Arc tool to draw arcs.

    Text Area Form X You can use the Text Area Form tool to create text fields that

    users can type information in.

    Selection Form S You can use the Selection Form tool to create a drop-down

    list with predefined options, from which users can select an

    option.

    Theme Button You can use the Theme Button tool to create a button object

    that you can add to the home screen to start an application.

    User Guide Toolbox

    9

  • 8/2/2019 Blackberry Composer-User Guide

    12/80

    Icon Tool Shortcut Description

    Camera M You can use the Camera tool to define the area of the canvas

    that the user views. By animating the view box area, you can

    create panning and zooming effects.

    Hand H You can use the Hand tool to move the canvas in the project

    workspace.

    Zoom Z You can use the Zoom tool to magnify the canvas.

    Stroke swatch You can use the Stroke swatch to specify the stroke color for

    a selected object or to specify the default stroke color for

    future objects.

    Fill swatch You can use the Fill swatch to specify the fill color for a

    selected object or to specify the default fill color for future

    objects.

    Default colors You can use the Default colors button to change the Stroke

    and Fill swatches to the default values. The default stroke

    value is black and the default fill value is white.

    No color You can use the No color button to change the Fill swatch to

    no color. Swap fill and stroke You can use the Swap fill and stroke button to switch the color

    values of the Fill and Stroke swatches.

    Simulator You can use the Simulator button to start the BlackBerry

    Smartphone Simulator to test your project.

    Note:

    The keystroke shortcuts are unavailable in the following situations:

    when the BlackBerry Composer is in text-entry mode

    when you type a value in a field in any of the panels

    when you move the points on a polyline or 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. On the Canvas menu, click Properties.

    User Guide Change a canvas property

    10

  • 8/2/2019 Blackberry Composer-User Guide

    13/80

    Task Steps

    Change the canvas size.In the Width and Height fields, type the values in pixels for theheight and width.

    Change the background image

    alignment.In the Resize Anchor field, click a box to determine how to align the

    canvas after it is resized.

    Change the BlackBerry device. In the Device drop-down list, click the BlackBerry device to use for

    the canvas.

    Change the canvas color. a. Click the color swatch to open the Color Picker, then select the

    background color for your canvas.

    b. To make sure that you choose a color that all platforms and

    browsers support, select the Web safe check box.

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

    3. Click OK.

    Crop the canvasYou can select the objects that you want to remain on the canvas and crop the canvas to include only those objects.

    1. On the canvas, select one or more objects to identify the area to crop to.

    2. On the Canvas menu, click Crop To Selection.

    Configure the rulers and alignment toolsThe BlackBerry Composer workspace includes tools to help you precisely position objects on the canvas.

    1. Click the View menu.

    2. To display or hide the rulers, click Show Rulers.

    3. To display or hide the grid, click Grid > Show Grid.

    4. To auto-align objects to the grid or to turn off the auto-alignment, click Grid > Snap to Grid.

    5. To auto-align objects to the guides or to turn off the auto-alignment, click Guides > Snap to Guides.

    6. To display or hide the limits, click Limits > Show Limits.

    7. To lock or release the limits, click Limits > Lock Limits.

    Change the spacing or color of the grid lines

    1. On the View menu, click Grid > Set Grid Options.

    2. To change the spacing of the grid lines, in the Horizontal and Vertical fields, type the horizontal and vertical

    values in pixels.3. To change the color of the grid lines, click the color swatch and click a color.

    User Guide Configure the rulers and alignment tools

    11

  • 8/2/2019 Blackberry Composer-User Guide

    14/80

    4. Click OK.

    Change the origin of the grid system1. Display the rulers.

    2. In the upper-left corner of the rulers, click and drag the origin of the grid system to the new location.

    3. To save the file with the new grid system origin, on the File menu, click Save.

    Add guides to the workspace

    1. Display the rulers.

    2. On the View menu, click Guides > Show Guides.

    3. Click a ruler and drag a guide onto the workspace. You can select and drag the guide to reposition it, as necessary.

    4. To remove a guide from the workspace, drag it to a ruler.

    5. To prevent the guides from being moved, on the View menu, click Guides > Lock Guides.

    Undo and repeat operationsYou can undo and redo an unlimited number of operations in the BlackBerry Composer.

    1. Click the Edit menu.

    2. To undo an operation, click Undo.

    3. To redo an operation, click Redo.

    Specify the number of operations to undo and redoChanging the number of times that you can undo an operation to a lower number can decrease the amount of

    required memory. The default setting is unlimited.

    1. On the Edit menu, click Preferences.

    2. In the Preferences dialog box, click the Miscellaneous tab.

    3. In the Undo section, specify one of the following: To specify an unlimited number of times that you can undo and redo operations, click Unlimited.

    To specify the maximum number of times that you can undo and redo operations, clickLimited to, and specify

    the number of operations.

    User Guide Undo and repeat operations

    12

  • 8/2/2019 Blackberry Composer-User Guide

    15/80

    Change preferences 2

    Change the start preferencesYou 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. On the Edit menu, click Preferences.

    2. Click the General tab.

    3. In the Composer drop-down list, perform one of the following actions:

    Task Steps

    Display the New Document dialog

    box when you start the BlackBerry

    Composer.

    Click Create New Document.

    Display the Open dialog box when

    you start the BlackBerry

    Composer.

    Click Open File Dialog.

    Display a blank screen when you

    start the BlackBerry Composer.Click Do nothing.

    4. In the View mode drop-down list, perform one of the following actions:

    Task Steps

    Display the stroke and fill of

    objects. Click Full View.

    Hide the fill color for objects. Click Stroke Preview.

    Hide the fill and stroke colors and

    display only the outline of an

    object.

    Click Shape Preview.

    5. Click OK.

    Change the gamma preferences

    1. On the Edit menu, click Preferences.

    2. Click the Gamma tab.

    3. The colored boxes on the left side of the dialog box display the settings. To change color settings, move the slide

    bars.

    4. To synchronize the color settings, select the Link Channels check box.5. Click OK.

    User Guide Change preferences

    13

  • 8/2/2019 Blackberry Composer-User Guide

    16/80

    Change the ToolTip preferences

    1. On the Edit menu, click Preferences.2. Click the Miscellaneous tab.

    3. To display tool tips when you pause on buttons in the BlackBerry Composer UI, select the Show Tool Tips check

    box. This setting is selected by default.

    4. Click OK.

    Set theme button preferencesBy default the theme buttons you create are based on the BlackBerry device you selected for the project. You can

    set the size and style of the theme buttons to a different BlackBerry device than the one you selected for the project.

    For example, if you created a project for the BlackBerry Bold 9700 smartphone, the size of the default buttons

    are Precision 80 x 80, but you can change the theme button preference to BlackBerry 8700 Series where the size

    of the default buttons are Dimension 64 x 48. All subsequent theme buttons that you create in the project use

    Dimension 64 x 48 style and size.

    1. From the Edit menu, click Preferences.

    2. Click the Miscellaneous tab.

    3. Perform one of the following actions:

    To set the theme button size and style to a specific BlackBerry device, from the Theme Button Icons drop-

    down list, click a BlackBerry device.

    To select the theme button from a folder, from the Theme Button Icons drop-down list, click Browse and

    select an image.

    If you want to create your own icons, the file names must follow the naming conventions in the BlackBerry

    Composer. You can look in the program files for examples of file names. For example, if you want to find the

    name 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

    4. To use the theme icon buttons for all new projects, select the Always use these icons check box.

    5. Click OK.

    Change the BlackBerry Smartphone Simulator preferencesBefore 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. On the Edit menu, click Preferences.

    2. Click the Simulator tab.

    3. For each BlackBerry device screen resolution, specify the following values:

    User Guide Change the ToolTip preferences

    14

    d h f

  • 8/2/2019 Blackberry Composer-User Guide

    17/80

    Resolution

    Model

    OS Version

    4. To start the BlackBerry Smartphone Simulator when the BlackBerry Composer starts, select the Load simulator

    on startup check box.

    Change transparency preferencesYou 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. On the Edit menu, click Preferences.

    2. Click the Transparency tab.

    3. In the Color Settings drop-down list, click a shade for the transparency.

    4. Click each color box and click a color for the transparency.

    Change tool propertiesWhen you start the BlackBerry Composer, by default all tool properties are reset to their default values. You can

    save sets of properties for future use and to restore tool settings.

    1. Click a toolbox icon.

    2. Adjust the relevant controls on the Inspector.

    You cannot change the Transformation, Select, Hand, and Zoom tools because they have no properties to adjust.

    When one of these tool properties is selected, the Inspector panel displays the "No inspector available" message.

    Tip: When you select an object on the canvas or on the Objects panel, the Inspector remembers its properties

    and uses them the next time you select the tool. However, if you close the BlackBerry Composer without saving

    the properties, the changes will not appear when you reopen the application.

    User Guide Change transparency preferences

    15

    User Guide Creating objects

  • 8/2/2019 Blackberry Composer-User Guide

    18/80

    Creating objects 3You can create line, shape, text, user input, button, and animation objects, by using the tools on the toolbox and by

    changing the properties on the Inspector.

    Create a line

    1. On the toolbox, click the Line tool.

    2. On the workspace, drag the pointer to where you want the line to end.

    3. To create a line that is at a multiple of 45 degrees, press SHIFT and drag the pointer.

    4. On the Inspector, change the properties for the line.

    Create a rectangle or square

    1. On the toolbox, click the Rectangle tool.

    2. On the workspace, drag the pointer until the object is the size that you want.

    3. To create a square, press SHIFT and drag the pointer.4. On the Inspector, change the properties for the rectangle object.

    Create a rounded rectangle or rounded squareThe 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. TheBlackBerry Composer stores the value and applies it if you resize the shape such that the value is less than or equal

    to half the height or width of the shape.

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

    2. On the workspace, drag the pointer until the object is the size that you want.

    3. To create a rounded square, press SHIFT and drag the pointer.

    4. To change the roundness of the corners, on the Inspector, click the Rounded Rectangle tab.

    5. In the X and Y fields, type the X-axis and Y-axis radius lengths, or click the arrow and move the slide bars to adjust

    the value.

    6. On the Inspector, change additional properties for the rounded rectangle object.

    Create an ellipse or circle

    1. On the toolbox, click the Ellipse tool.2. Perform one of the following actions:

    User Guide Creating objects

    16

    User Guide Create a freehand path

  • 8/2/2019 Blackberry Composer-User Guide

    19/80

    3. To create an ellipse, drag the pointer until the object is the size that you want.

    To create a circle, press SHIFT and drag the pointer.

    4. On the Inspector, change the properties for the object.

    Create a freehand path

    1. On the toolbox, click the Freehand tool.

    2. On the workspace, click and draw a freehand path.

    3. On the Inspector, adjust the properties for the path.

    Create an elliptical arc

    1. On the toolbox, click the Arc tool.

    2. On the workspace, drag the pointer.

    3. To change the elliptical arc properties, in the Inspector, click the Arc tab.

    4. In the X and Y fields, type the X- axis and Y-axis radius lengths.

    5. To adjust the angle of the X-axis radius, in the Axis Rotation field, type the rotation angle in degrees.

    6. To draw the arc as the longer distance around the ellipsis on which the arc is based, select the Large Arc check

    box.

    7. To draw the arc on the negative side of the X-Axis radius, select the Flip check box.

    Create a polygon or polyline

    1. On the toolbox, click the Polyline tool.

    2. On the workspace, drag the pointer and click to create each path segment.

    3. To end the path without closing it, double-click the desired endpoint, or press ENTER.

    4. To close the path, double-click the starting anchor point.

    Create a Bzier curve1. On the toolbox, click the Bzier tool.

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

    3. Move the pointer to the next anchor point and click.

    4. Drag the pointer to adjust the curve and to create the control point that you can control to change the direction

    and shape of the curve.

    5. To add additional path segments, repeat steps 3 and 4.

    6. To end the path without closing it, double-click the desired endpoint, or press ENTER.

    User Guide Create a freehand path

    17

    User Guide Creating text

  • 8/2/2019 Blackberry Composer-User Guide

    20/80

    7. To close the path, double-click the starting anchor point.

    8. Adjust the control points as necessary to change the shape and direction of the curve.

    Creating textYou can create the following kinds of text:

    Simple text: Simple text is a single line of text.

    Text on a curve: A text-on-curve object is aligned to an existing path. The path to which you align the text becomes

    part of the text-on-curve object. You can no longer select or change the path.

    Create a simple text object

    1. On the toolbox, click the Text tool.

    2. Type the text.

    3. On the Inspector, change the font properties for the text object.

    Create text on a curve1. Create a path by using any of the drawing tools.

    2. On the toolbox, click the Text on Curve tool.

    3. On the workspace, click the path that you created.

    4. Type the text.

    5. Press ENTER to close the text editing mode.

    6. On the Inspector, change the font properties for the text.

    Edit text

    1. On the toolbox, click the Select tool.

    2. On the workspace, double-click the text that you want to edit.

    3. To position the cursor in the text, click at the appropriate location.

    4. To highlight the text that you want to edit, perform one of the following actions:

    To select a part of the text, drag the pointer over the text.

    To select an entire word, double-click on the word.

    To select all of the text, click three times.

    5. Edit the text on the workspace.

    6. On the Inspector, change the text properties.

    7. Press ENTER to close the editing mode.

    User Guide Creating text

    18

    User Guide Creating user input fields

  • 8/2/2019 Blackberry Composer-User Guide

    21/80

    Convert text to Bzier curves

    1. On the toolbox, click the Select tool.

    2. On the workspace, click the text that you want to convert.

    3. On the Object menu, click Convert to 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 fieldsYou can create text fields for users to type text into and you can create a drop-down list with predefined options

    from which users can select an option. After you create user input fields, you must create an action to submit a form

    and include the URL.

    Create a text entry field

    1. On the toolbox, click the Text Area Form tool.

    2. On the workspace, drag the pointer until the text field is the size that you want.

    3. To display text by default , on the Inspector, click the Properties tab and in the Text Area field, type the default

    text.

    4. To create a form with more than one field for users to type in, select the Multiline check box.

    5. In the Field Name field, type a reference ID for the field. The reference ID associates the field with the text that

    the user types into the field.

    Create a drop-down list

    1. On the toolbox, click the Selection Form tool.

    2. On the workspace, drag the pointer until the drop-down list is the size that you want.

    3. On the Inspector, click the Properties tab.

    4. To add items to the selection list, click Add Item.5. In the Label field, type the name of the item to display to the user.

    6. In the Value, type the value that the user can select.

    7. To add additional items to the selection list, repeat steps 4 to 6.

    8. Use the arrows beside the list of items to change the order in which they are listed.

    g p

    19

    User Guide Defining the viewable screen area

  • 8/2/2019 Blackberry Composer-User Guide

    22/80

    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 viewbox 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. On the toolbox, click the Camera tool. The view box appears on the canvas. By default, the view box has the

    same dimensions as the canvas.

    2. Click the view box to select it, then resize and reposition it as necessary.

    20

    User Guide Defining the viewable screen area

  • 8/2/2019 Blackberry Composer-User Guide

    23/80

    3. To prevent the content from stretching on the BlackBerry device screen, specify the Preserve Aspect Ratio

    settings.

    Change an existing view box

    1. On the Toolbox, click the Camera tool. The view box appears on the canvas at the size and position you specified

    for the current frame.

    2. To prevent the content from stretching on the BlackBerry device screen, specify the Preserve Aspect Ratio

    settings.

    Preserving the aspect ratio of the view boxAspect 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 Defining the viewable screen area

  • 8/2/2019 Blackberry Composer-User Guide

    24/80

    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. On the Toolbox, click the Camera tool. The view box appears on the canvas.

    2. In the Inspector, click the Camera tab.

    3. Select the Preserve Aspect Ratio check box.

    4. To uniformly scale the content to fit into the view port, with no clipping, select the Meet option. The BlackBerry

    device scales and aligns the view box so that there is no loss of content, and adds transparent padding around

    the content.

    5. To prevent scaling, select the Slice option. The BlackBerry device clips the view box so that the content fills the

    view port with no padding.

    6. To specify how to align the graphic in the view port, click a square on the anchor grid. For example, to align the

    content to the upper-left corner of the view port, click the upper-left square on the grid.

    22

    User Guide Creating buttons

  • 8/2/2019 Blackberry Composer-User Guide

    25/80

    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 buttonsYou 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

  • 8/2/2019 Blackberry Composer-User Guide

    26/80

    Create a button

    1. Display the Animation panel.

    2. On the Object menu, click Create Button.

    The workspace is in editing mode and all other objects on the workspace are hidden.

    3. Use the drawing and text tools to create the button in the initial state.

    4. Animate the Initial State button as desired.

    5. On the Animation key editor, click the On Focus In button.

    6. Change and animate the button to define how the button appears when it is in focus.

    7. Repeat Steps 4 and 5, for the On Focus Out and On Activate states.

    8. On the Object menu, click End Editing.

    9. On the Inspector, add actions for each state, as necessary.

    Convert an object to a button

    1. On the Toolbox, click the Transformation tool.

    2. On the workspace, select the object or objects that you want to convert.

    3. On the Object menu, click Convert to Button.

    4. On the Object menu, click Edit.

    5. In the Animation key editor, select a button state.

    6. Animate the button, as desired.

    7. Repeat Steps 5 and 6 for each state.

    8. On the Object menu, click End Editing.

    9. On the Inspector, add actions for each state, as necessary.

    Creating animation objectsYou can use animation objects to create a small animated sequence that an event can start. You can manipulate

    animation objects just as you would any other object. You can move, scale, or rotate an entire scene.

    Each animation object has its own timeline, independent of the main project timeline, that starts only when an event

    starts the animation object.

    Create an animation object

    1. Display the Animation panel.

    2. On the Object menu, click Create Animation. The workspace is in editing mode.

    All other objects on the workspace are hidden.

    24

    User Guide Working with objects

  • 8/2/2019 Blackberry Composer-User Guide

    27/80

    3. Use the drawing and text tools to create the scene.

    4. Animate the scene, as desired.

    5. On the Object menu, click End Editing.

    Convert a scene to an animated object

    1. On the toolbox, click the Transformation tool.

    2. On the workspace, select the object or objects you want to convert.

    3. On the Object menu, click Convert to Animation.

    4. On the Object menu, click Edit.5. Change the image for each state, as desired.

    6. On the Object menu, click End Editing.

    Working with objectsTo 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 Transformationproperties (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. On the toolbox, click the Transformation tool.

    2. On the workspace, click the object you wish to select. The selected object is also highlighted in the Objects and

    Animation panels.

    Use the Objects panel to select the object if it is difficult to access (for example, if it is behind or partially behindanother object, or the workspace is very crowded).

    25

    User Guide Working with objects

  • 8/2/2019 Blackberry Composer-User Guide

    28/80

    Select multiple objects

    1. On the toolbox, click the Transformation tool.

    2. 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 tothe desired size.

    Rotate a selected object

    1. With the Transformation tool, click the bounding box frame and drag the object to the desired rotation angle.

    When the pointer changes to the Rotate indicator, you can rotate the object.

    2. To adjust the rotation center, drag the rotation handle to the desired position. You can place the rotation handleanywhere inside or outside the object.

    To reset the rotation center to the center of the selected object, on the Objects menu, click Reset Rotation

    Center.

    Duplicate an object

    1. Select the object.

    2. On the Objects menu, click Duplicate.

    26

    User Guide Adjusting path segments

  • 8/2/2019 Blackberry Composer-User Guide

    29/80

    The new object is positioned at the same coordinates on the workspace as the original, and placed at the top

    of the stack of objects on the current layer.

    3. Move the new object to the desired location on the workspace.

    Adjusting path segmentsIrregular 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. On the toolbox, click the Transformation tool or the Select tool.

    2. On the workspace, double-click the object. The anchor points appear on the path.

    3. Drag the anchor point to its new position.

    Change the shape of a curve

    1. On the Toolbox, click the Transformation tool or the Select tool.2. On the workspace, double-click the object. The anchor points appear on the path.

    27

    User Guide View object properties

  • 8/2/2019 Blackberry Composer-User Guide

    30/80

    3. Click an anchor point to display the control points that define the curve.

    4. Drag a control point to adjust the shape of the curve.

    When you rotate the control point around the anchor point, you change the shape of the path on both sides of

    the anchor point. You can increase or decrease the distance between the control point and the anchor point to

    increase or decrease the depth of the curve.

    Add anchor points to a shape

    1. On the Toolbox, click the Add Points tool.

    2. On the workspace, double-click the object. The anchor points appear on the path.

    3. Place the pointer on the path where you want to add the new point, then click.

    4. Repeat step 3 for each additional point you want to add.

    Remove anchor points from a shape

    1. On the Toolbox, click the Remove Points tool.

    2. On the workspace, double-click the object. The anchor points appear on the path.

    3. Click the anchor point you want to remove.

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

    View object propertiesYou can use the Inspector to view or change the properties of an object. The Inspector controls formatting for most

    objects and many BlackBerry Composer settings. The tabs and the options in the Inspector change depending on

    the tool or object that you select.

    The Inspector displays the name of the objects beneath the tabs.

    To view object properties, press CTRL+4.

    Options in the Inspector

    The Inspector includes the following tabs:

    Icon Tab Description

    Text configures the font face, font size, and other text attributes for

    simple text objects

    Text on Curve configures the font face, font size, and other text attributes for text-

    on-curve objects

    Freehand Path configures the anti-aliasing property for freehand path objects

    28

    User Guide View object properties

  • 8/2/2019 Blackberry Composer-User Guide

    31/80

    Icon Tab Description

    Bzier configures the anti-aliasing property for Bzier objects

    Line configures the anti-aliasing property for line objectsPolyline configures the anti-aliasing property for polyline objects and

    polygon objects

    Rectangle configures the anti-aliasing property for rectangle objects

    Rounded Rectangle configures the radius of round corners and the anti-aliasing property

    for rounded-rectangle objects

    Ellipse configures the anti-aliasing property for ellipse objects

    Arc configures the ellipse radius, axis rotation, and other arc options,

    and the anti-aliasing property for elliptical arc objects

    Text Area configures the default text and field name for text-area objects

    Selection List Specifies the items that appear in selection-list objects

    Launch Application configures the application to start for a Theme button

    Theme Button Animation

    or

    Animation

    configures the animation options for a Theme button or previews

    an animation object

    Transform configures the object size, position, rotation, visibility, and other

    properties for a Theme button

    Properties configures the font face and font color properties for text in text

    area and selection list objects

    Camera configures the Preserve Aspect Ratio property for the view box

    Button configures events for a button object and previews each button

    state

    Stroke configures the stroke color, width, and style for vector shapes and

    text objects

    Fill configures the fill color or pattern for vector shapes and text objects

    Path Animation configures a path to bind an object with

    Transformation configures the rotation, dimensions, and visibility for all objects

    Bitmap Image configures interpolation properties for rasterized bitmap image

    objects

    Composite applies the optical composite method for bitmap image objects

    Filters configures filters for bitmap image objects

    Effects configures effects for bitmap image objects

    29

    User Guide Specifying shape properties

  • 8/2/2019 Blackberry Composer-User Guide

    32/80

    Specifying shape propertiesEach 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. On the workspace, click an object.2. On the Inspector, click the shape-specific tab.

    3. Click Anti-aliasing.

    Anti-aliasing adds more intermediate colors, which reduces the compression ratio of the image. To minimize

    file size, try anti-aliasing with the fewest colors possible.

    Change the roundness of a rounded rectangle object

    1. On the workspace, click a rounded rectangle object.

    2. In the Inspector, on the Rounded Rectangle tab, perform one of the following actions:

    In the X and Y fields, type the radius length of the X-axis and Y-axis.

    Click the arrow that is adjacent to the axis value and move the slide bar to adjust the value.

    The radius length of the X-axis or Y-axis radius length can only be displayed as a maximum of half the height or

    width of the shape. If you configure a value that exceeds half of the height or width, the BlackBerry Composer

    processes the value as if it is half the height or width, but the BlackBerry Composer does not adjust the value

    (that you provided to reflect the actual radius length as displayed). The BlackBerry Composer stores the value

    that you provided and applies it if the shape is stretched so that the value is less than or equal to half the height

    or width.

    Change the shape properties of an elliptical arc

    1. On the workspace, click an elliptical arc object.

    2. In the Inspector, click the Arc tab.

    3. In the X field and Y field, type the radius length of the X-axis and Y-axis.

    4. To adjust the angle of the X-axis radius, in the Axis Rotation field, type the rotation angle, in degrees.

    5. To draw the arc as the longer distance around the ellipse that the arc is based on, click Large Arc.

    6. To draw the arc on the negative side of the X-axis radius, click Flip.

    30

    User Guide Specify text object properties

  • 8/2/2019 Blackberry Composer-User Guide

    33/80

    Specify text object propertiesYou 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 Description

    Text This property contains the text that an object displays. You can change the text from

    within this field.

    Style This property specifies the font style, such as bold or italics. The font styles that you

    can use depend on which styles are available for the font face that you are using.

    Underline This property underlines the text.

    Strikethrough This property renders a line through the text.

    Horizontal and Vertical This property specifies the width and height of the text.

    Constrain This property links the Horizontal size control and the Vertical size control. If you

    change the value for one control, the value for the other control changes as well. Ifyou turn off constraining, you can configure the height and width of the text

    separately and the text is stretched appropriately.

    Spacing This property changes the space between letters. A spacing value of 0 indicates that

    letters display according to the value that the font face specifies. You can use this

    property to squeeze letters together (by using negative values) or to space letters

    further apart (by using positive values).

    Shearing This property changes the slant or angle of the text. You can apply shearing to fonts

    that are already specified as oblique or italic. A shearing value of 0 indicates that the

    letters are rendered at the slant that the font face specifies. Positive values slant the

    text to the right, while negative values slant the text to the left.

    Offset This property specifies the distance into the path that you want to start the text at,

    in pixels.

    This property is only available for text on curve objects.

    Flip Horizontal and Flip

    Vertical

    This property mirrors the text horizontally or vertically.

    Anti-aliasing This property specifies whether font edges are smooth.

    Specifying stroke and fill propertiesYou 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

  • 8/2/2019 Blackberry Composer-User Guide

    34/80

    You can choose to specify a color for the stroke, or you can choose a stroke value of None to not display an outline

    for an object. If you specify a color, you can also specify the stroke width and several other stroke attributes.

    You can choose to fill an object with either a color or a pattern, you can choose to not fill the object at all.

    You can animate the stroke color, stroke width, and fill color properties.

    Specify the stroke or fill color

    1. In the Inspector, click the Stroke or Fill tab.

    2. In the drop-down list, click Color.

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

    4. To configure the opacity of the stroke or fill color, move the Alpha slide bar to the appropriate level.

    5. To constrain the color to the nearest value on a standard 216-color palette, select Web safe only.

    If you select theWeb safe only

    option, theAlpha

    setting has no effect.

    Remove the stroke or fill color of an object

    1. On the Inspector, click the Stroke or Fill tab.

    2. In the drop-down list, click None.

    If you specify None as the stroke value or fill value, you cannot animate the stroke or fill. To animate a stroke

    or fill color, you must select a starting color and an ending color. You cannot animate the starting or endingvalues from None to Color.

    To transform to or from a transparent stroke value or fill value, use the Alpha slide bar on the Color panel to specify

    the opacity of the stroke or fill. A value of 0 renders the stroke or fill completely transparent. You can animate the

    value of the Alpha channel. If you want to animate both the stroke value and fill value together, you should animate

    object visibility or object opacity rather than animating the value of the Alpha channel for each property separately.

    Specify the stroke style attributes

    1. In the Inspector, click the Stroke tab.

    2. In the Width field, type the thickness of the object stroke, in pixels.

    3. Configure any of the following settings:

    In the Cap drop-down list, click the shape of the ends for an open path.

    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

  • 8/2/2019 Blackberry Composer-User Guide

    35/80

    In the Offset field, type the distance into the stroke that you want to start the dash pattern at, in pixels.

    Specify a pattern fill

    1. On the Inspector, click the Fill tab.

    2. In the drop-down list, click Pattern.

    3. Click the Browse icon and browse for an image that you want to use as the pattern tile.

    4. In the Offset X field and Offset Y field, specify the originating points of the pattern tiling. These values specify

    the distance, in pixels, from the lower-left corner of the bounding box to place the first complete pattern image.

    The pattern image is tiled from that point to fill the entire object.

    5. In the Alpha field, specify the opacity of the pattern.

    You can change the pattern fill image at any time; the X offset, Y offset, and alpha values do not change.

    Working with bitmap objects

    Change a bitmap image1. In the Inspector, click the Image tab.

    2. Click Change Bitmap and browse to the new bitmap image.

    Specify how an object blends with background objects

    1. In the Inspector, click the Composite tab.

    2. In the Composite drop-down list, click a blending method.

    Add one or more filters to a bitmap image

    You can animate filter settings.

    1. In the Inspector, on the Filters tab, click Add Filter.

    2. In the drop-down list, click the filter that you want to apply.3. Repeat steps 1 and 2 for each additional filter you want to apply.

    4. In the Selected Filter list, click the up arrow and down arrow to specify the order that the filters are applied in.

    By default, filters are in order from the last filter applied to the first filter applied.

    5. To change the settings of a filter, in the Selected Filters list, select the filter and click Properties.

    6. To remove a filter, in the Selected Filters list, select the filter and click the Delete button.

    33

    User Guide Working with bitmap objects

  • 8/2/2019 Blackberry Composer-User Guide

    36/80

    Apply one or more effects to a bitmap image

    You can animate effects settings.

    1. In the Inspector, on the Effects tab, select an effect.

    2. Click the button that is adjacent to display the Properties dialog box for the effect that you selected.

    3. Specify appropriate properties for the effect.

    4. Repeat steps 1 to 3 for each effect that you want to apply.

    Blending rasterized imagesYou can blend the stroke and fill values of rasterized objects or bitmap images with the stroke and fill values of

    background objects that are located on the same layer. The BlackBerry Composer calculates the fill and stroke values

    of the parts of the objects that overlap the background objects based on the blending method that you choose. To

    apply a blending method, you must rasterize an object.

    The BlackBerry Composer calculates the blended color values by combining the values of the RGB color channels for

    each pixel where the rasterized image and one or more background objects overlap. For example, suppose you create

    and rasterize a rectangle with a fill value of RGB 127, 0, 0 (dark red) that overlaps another rectangle with a fill value

    of RGB 127, 127, 0 (olive green), and apply the Subtract blending method to the dark red rectangle, the RGB values

    of the overlapping section change to RGB 0, 0, 0 (black). If you apply the Add method, the RGB values of the overlapping

    section are RGB 255, 127, 0 (orange).

    The BlackBerry Composer calculates RGB values using the range 0 through 1 rather than 0 through 255. The only

    method that this calculation affects is the Multiply method. For example, a dark red rectangle has RGB values of 0.5,

    0, 0, and an olive green rectangle has RGB values of 0.5, 0.5, 0. When you multiply the three sets of values with each

    other the result is 0.25, 0, 0, which is equivalent to 63, 0, 0 (darker red).

    Blending methods for rasterized objects and bitmap images

    Blending method Effect

    Normal This blending method has no effect (no blending method is applied).

    Multiply This blending method multiplies the RGB values of the object and the RGB values of

    the underlying object with each other for each of the three channels.

    Screen The object burns through underlying objects. This action does not effect the

    background color.

    Erase This blending method removes the object from the canvas. If an object is underneath

    a bitmap object, the shape of the bitmap object might create the effect of a cut-out

    on the underlying object.

    Add This blending method adds the RGB values of the object and the RGB values of the

    underlying object to one another for each of the three channels.

    Subtract This blending method subtracts the RGB values of the underlying object from theRGB values of the object for each of the three channels.

    34

    User Guide Working with bitmap objects

  • 8/2/2019 Blackberry Composer-User Guide

    37/80

    Blending method Effect

    Darkest This blending method uses the lower of the two RGB values for each of the three

    channels.

    Lightest This blending method uses the higher of the two RGB values for each of the threechannels.

    Difference This blending method uses the difference between RGB values for the object and

    the RGB values for underlying objects for each of the three channels.

    Average This blending method uses the average of the RGB values for the object