1. © 2009 Research In Motion Limited BlackBerry themes and animated graphics

2. © 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

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

4. 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. © 2009 Research In Motion Limited SVG Scalable Vector Graphics

5. BlackBerry themes and animated 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. © 2009 Research In Motion Limited

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

7. Scalable Vector Graphics © 2009 Research In Motion Limited

8. Scalable Vector Graphics What is SVG? –Text-based XML language –Developed by W3C® –Represents 2-D graphics Animation Interactivity XMLExtensible Markup Language 2-Dtwo-dimensional

9. © 2009 Research In Motion Limited 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

10. © 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

11. © 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

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

13. © 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

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

15. SVG creation with the Plazmic Content Developer’s Kit © 2009 Research In Motion Limited

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

17. © 2009 Research In Motion Limited SVG creation with the Plazmic Content Developer’s Kit 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

18. © 2009 Research In Motion Limited SVG creation with the Plazmic Content Developer’s 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

19. © 2009 Research In Motion Limited SVG creation with the Plazmic Content Developer’s 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

20. Plazmic Composer features © 2009 Research In Motion Limited

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

22. © 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

23. © 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

24. © 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

25. © 2009 Research In Motion Limited Plazmic Composer features Step 1: Create and edit content: –Shape objects include: Lines Rectangles Squares Rounded rectangles and squares Ellipses Circles Freehand paths Arcs Polylines Bézier curves

26. © 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

27. © 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 HTMLHypertext Markup Language

28. © 2009 Research In Motion Limited 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.

29. © 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

30. © 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.

31. © 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.

32. © 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

33. © 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.

34. © 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.

35. © 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.

36. © 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.

37. © 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.

38. © 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)

39. © 2009 Research In Motion Limited Plazmic Composer features Step 1: Create and edit content: 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.

40. © 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.

41. © 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

42. © 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

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

44. BlackBerry themes and animated graphics 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. © 2009 Research In Motion Limited

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