BlackBerry themes and animated graphics

2009 Research In Motion Limited

Agenda
This course covers the following topics:
Introduction to developing applications for mobile
devices
Methods of application development for mobile
devices
Introduction to GPS and Wi-Fi technology on
BlackBerry smartphones

2009 Research In Motion Limited

Agenda
Introduction to push technology
Data structures and memory management on
mobile devices
User interface design for mobile devices

BlackBerry themes and animated graphics

Security considerations for developing applications
for mobile devices

2009 Research In Motion Limited

BlackBerry themes and animated graphics

Objectives:
Define Scalable Vector Graphics.
Explain why SVG are appropriate for mobile
devices.

Describe how you can use SVG for media

application development for mobile devices.
Describe two key methods for creating SVG.

SVG

Scalable Vector Graphics

2009 Research In Motion Limited

BlackBerry themes and animated graphics

Objectives:
Describe the purpose of the Plazmic Content
Developers Kit.
Explain the purpose of the Plazmic Composer.

Explain the purpose of the Plazmic Theme Builder.

Describe the types of objects you can make using
Plazmic Composer.

Describe the type of content you can import into

Plazmic Composer.

2009 Research In Motion Limited

BlackBerry themes and animated graphics

Objectives:
Describe the methods you can use to make
animations using Plazmic Composer.
List the ways you can make content interactive
using Plazmic Composer.
Describe the method used to export and test the
files that you create in Plazmic Composer.

Describe how to post the content that you create in

Plazmic Composer.

2009 Research In Motion Limited

Scalable Vector Graphics

2009 Research In Motion Limited

Scalable Vector Graphics

What is SVG?
Text-based XML language
Developed by W3C
Represents

2-D graphics

Animation

Interactivity

XML
2-D

2009 Research In Motion Limited

Extensible Markup Language

two-dimensional

Scalable Vector Graphics

Vector versus bitmap graphics:

Bitmap or raster graphics

Maintain a specified size

Use an array of rectangular pixels

Appear pixelated if you scale them to a larger size

Vector graphics

Scale to fit any display area

Use paths and key points

Maintain image quality or text legibility when scaled

2009 Research In Motion Limited

Scalable Vector Graphics

SVG and mobile device screens:
BlackBerry smartphone screens vary in
Size
Layout (portrait or landscape)
Key advantage of SVG
Scales to fit screens with no loss in quality or
legibility

2009 Research In Motion Limited

Scalable Vector Graphics

SVG and media applications for mobile devices:
Use SVG to develop

Interactive themes

Mobile web sites

Splash screens

Graphics

Animations

2009 Research In Motion Limited

Scalable Vector Graphics

Methods for SVG creation:
Write the code manually in a text editor.
Create SVG content using a graphics editing tool,
such as Plazmic Composer, Adobe Illustrator,
or Microsoft Visio.

2009 Research In Motion Limited

Scalable Vector Graphics

BlackBerry support for vector graphics:
Supported formats:

SVG: Tiny 1.1 specification

PME: binary representation of SVG

PMB: combines images, audio, and PME files

2009 Research In Motion Limited

Scalable Vector Graphics

SVG APIs allow you to render SVG directly in your
application:
org.w3c.dom
org.w3c.dom.events

org.w3c.dom.svg
Plazmic APIs allow you to play back PME content:
net.rim.plazmic.mediaengine
net.rim.plazmic.mediaengine.io
API

application programming interface

SVG creation with the Plazmic Content

Developers Kit

2009 Research In Motion Limited

SVG creation with the Plazmic Content Developers Kit

Plazmic Content Developers Kit overview:
Free suite of graphic design tools
Optimizes content for BlackBerry smartphones:

SVG

PME

PMB

2009 Research In Motion Limited

SVG creation with the Plazmic Content Developers Kit

Plazmic Content Developers Kit overview:

The Plazmic Content Developers Kit includes:

Plazmic Composer to design SVG content

Plazmic Theme Builder to design custom

BlackBerry themes

Utilities to convert other formats

BlackBerry Smartphone Simulator to test and

debug themes

2009 Research In Motion Limited

SVG creation with the Plazmic Content Developers Kit

Plazmic Composer overview:

Use Plazmic Composer to develop

Interactivity: object rollovers, hyperlinks, and

triggers to start applications

Splash screens: fully customized screens that

contain multimedia content

Mobile web sites: adapted screens for use as web

content

Graphics: contains graphics tools and can open

other graphics editors to edit

Animations: animated web graphics, application

splash screens, and custom theme icons

2009 Research In Motion Limited

SVG creation with the Plazmic Content Developers Kit

Plazmic Theme Builder overview:

Use Plazmic Theme Builder to customize the
BlackBerry smartphone UI, including:

Home screen icons

Banners

Indicators

Backgrounds

Fonts and colors for lists and menus

2009 Research In Motion Limited

Plazmic Composer features

2009 Research In Motion Limited

Plazmic Composer features

Steps for creating Plazmic Composer content:
1. Create and edit: Save project files in the Plazmic
Composer (.cp) format.
2. Test: Preview your content using the BlackBerry
Smartphone Simulator.
3. Export: Export files to SVG, PME, or PMB.
4. Post: Post content on an application server.

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
Create

Objects

Animated content

Interactive content

Edit

Your custom content

Imported content of various file formats

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
You can create the following objects:

Shapes

Text

User input

Buttons

Animation

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
You can also

Define the viewable screen area

Set the ratio aspect of objects

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit
content:

Shape objects include:

Lines

Rectangles

Squares

Rounded rectangles
and squares

Polylines

Ellipses

Bzier curves

Circles
Freehand paths
Arcs

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
Text objects include:

Simple text objects: a single line of text

Text-on-curve objects: are aligned to an

existing path on the workspace

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
User input objects:

Add HTML form elements to your content to

collect user data.

Examples:

Text entry fields

Selection lists
HTML

2009 Research In Motion Limited

Hypertext Markup Language

Plazmic Composer features

Step 1: Create and edit content:
Button objects

Cause an event to occur

Contain one or more objects

Example:

User selects a list object, and then clicks a

button to submit the information to the content
server.

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
Button objects have four states:

Initial State: initial appearance

On Focus In: when button has focus

On Focus Out: when button does not have

focus

On Activate: after the user clicks button

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
Animation objects

Define a small animated sequence that begins

after an event triggers it.

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
Viewable screen area:

Use the Camera tool to define the view box.

The view box outlines the portion of the canvas

that the user sees in the view port on the
BlackBerry smartphone.

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
Use the viewable screen area to

Create effects similar to a video camera

Transform the view box

Animate transformation properties

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
Viewable screen area examples:

Display only a certain portion of your scene,

and then pull away to reveal the whole scene.

Zoom in and out of the scene by animating size

of view box over time.

Pan across the canvas by animating position of

view box.

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
BlackBerry smartphones have different view port
(screen) sizes.
If content is a different size than view port, it
stretches to fill the entire screen by default.
(Causes distortion.)
Use aspect ratio of an object to control how
content is resized.

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
Preserve Aspect Ratio combines:

Scaling:
Meet: Scales view box. No loss of content.
Adds transparent padding around content.
Slice: Clips view box. Content fills the view
port with no padding.

Alignment: Defines how view box aligns in the

view port.

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
Plazmic Composer animates content using

Key frames: You add key frames to the timeline

to define a new value for object properties.

Interpolation: Software calculates the

intermediate values for each frame between
two key frames.

You can change interpolation parameters using

the tweening editor to simulate real-world effects.

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
Interactive content

Add rollovers to objects.

Define hyperlinks that link to other content.

Launch an application.

Play animation sequences or sounds based on

user actions.

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
An interactive element comprises

An event that you set as a trigger (example: a

button click)

Actions that the event triggers (example:

playing an animation or sound)

2009 Research In Motion Limited

Plazmic Composer features

Step 1: Create and edit content:
You can import the following file types:
GIF

BMP

AI

SVG

JPG

TGA

AVI

SVGZ

PNG

PSD

MP4

SWF*

TIF

WMF

MPEG

* Plazmic Composer only supports a subset of Adobe Flash

content.
2009 Research In Motion Limited

Plazmic Composer features

Step 2: Test content:
Preview and test content using BlackBerry
Smartphone Simulator.
To launch BlackBerry smartphone Simulator in
Plazmic Composer, click the Simulator button on
the toolbox.

2009 Research In Motion Limited

Plazmic Composer features

Step 3: Export content:
You can export to the following file types:
SVG
PMB

PME
PNG
GIF
Animated GIF

2009 Research In Motion Limited

Plazmic Composer features

Step 4: Post content:
Animated content:

Post on a web server in SVG, PMB or PME

format, which users can view in the browser

Plazmic Theme Builder content:

Export your finished JAD and COD files

Post files on a web server to allow users to

install the theme using the browser

2009 Research In Motion Limited

BlackBerry themes and animated graphics

Objectives review:
Define Scalable Vector Graphics.
Explain why SVG are appropriate for mobile
devices.

Describe how you can use SVG for media

application development for mobile devices.
Describe two key methods for creating SVG.

2009 Research In Motion Limited

BlackBerry themes and animated graphics

Objectives review:
Describe the purpose of the Plazmic Content
Developers Kit.
Explain the purpose of the Plazmic Composer.

Explain the purpose of the Plazmic Theme Builder.

Describe the types of objects you can make using
Plazmic Composer.

Describe the type of content you can import into

Plazmic Composer.

2009 Research In Motion Limited

BlackBerry themes and animated graphics

Objectives review:
Describe the methods you can use to make
animations using Plazmic Composer.
List the ways you can make content interactive
using Plazmic Composer.
Describe the method used to export and test the
files that you create in Plazmic Composer.

Describe how to post the content that you create in

Plazmic Composer.

2009 Research In Motion Limited

 2009 Research In Motion Limited