© 2009 research in motion limited blackberry themes and animated graphics

© 2009 Research In Motion Limited

BlackBerry themes and animated graphics


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


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


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


Objectives:

– Describe the purpose of the Plazmic® Content Developer’s 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.



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.


Scalable Vector Graphics




What is SVG?

– Text-based XML language

– Developed by W3C®

– Represents

• 2-D graphics

• Animation

• Interactivity XML Extensible Markup Language

2-D two-dimensional



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



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



SVG and media applications for mobile devices:

– Use SVG to develop

• Interactive themes

• Mobile web sites

• Splash screens

• Graphics

• Animations



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



BlackBerry support for vector graphics:

– Supported formats:

• SVG: Tiny 1.1 specification

• PME: binary representation of SVG

• PMB: combines images, audio, and PME files


– 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.ioAPI application programming interface

SVG creation with the Plazmic Content Developer’s Kit




Plazmic Content Developer’s Kit overview:

– Free suite of graphic design tools

– Optimizes content for BlackBerry smartphones:

• SVG

• PME

• PMB



Plazmic Content Developer’s Kit overview:

– The Plazmic Content Developer’s 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



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



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

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.



Step 1: Create and edit content:

– Create

• Objects

• Animated content

• Interactive content

– Edit

• Your custom content

• Imported content of various file formats




– You can create the following objects:

• Shapes

• Text

• User input

• Buttons

• Animation




– You can also

• Define the viewable screen area

• Set the ratio aspect of objects




– Shape objects include:

• Lines

• Rectangles

• Squares

• Rounded rectangles and squares

• Ellipses

• Circles

• Freehand paths

• Arcs

• Polylines

• Bézier curves




– Text objects include:

• Simple text objects: a single line of text

• Text-on-curve objects: are aligned to an existing path on the workspace




– User input objects:

• Add HTML form elements to your content to collect user data.

– Examples:

• Text entry fields

• Selection lists

HTML Hypertext Markup Language




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




– 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




– Animation objects

• Define a small animated sequence that begins after an event triggers it.




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




– Use the viewable screen area to

• Create effects similar to a video camera

• Transform the view box

• Animate transformation properties




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




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




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




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




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




– 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)




You can import the following file types:

• GIF

• JPG

• PNG

• TIF

• BMP

• TGA

• PSD

• WMF

• AI

• AVI

• MP4

• MPEG

• SVG

• SVGZ

• SWF*

* Plazmic Composer only supports a subset of Adobe® Flash® content.



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.



Step 3: Export content:

You can export to the following file types:

– SVG

– PMB

– PME

– PNG

– GIF

– Animated GIF



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


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.



Objectives review:

– Describe the purpose of the Plazmic Content Developer’s 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.



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 blackberry themes and animated graphics

Documents

animated graphics slide

motion limited slide

bitmap graphics

raster graphics

animated graphics objectives

screens graphics animations

plazmic composer

svg content