Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

BlackBerry Themes & Animated Graphics

by Developer on ‎07-29-2010 04:00 PM - edited on ‎09-20-2010 05:20 PM by BlackBerry Development Advisor (16,181 Views)

Introduction

 

If you've created themes for BlackBerry® devices for any reasonable length of time, you've probably noticed that there are specific areas in the BlackBerry Theme Builder where you can input SVG files. Everyone says you can make a theme do all sorts of wild and wonderful things with SVG. However, if you've never worked with or even seen them before, the first question you have is "What is SVG?".

 


 

What is SVG?

 

SVG stands for scalable vector graphics. In layman's terms, SVG a type of graphic that will look smooth, crisp, and clean no matter how big or small it is. It is also a graphic type that can be scripted with XML-like coding, so it can be animated and/or interactive. 

 

Even if you've never heard of SVGs, you've probably seen some of its cousins in the vector graphics field, specifically EPSs (Encapsulated PostScript), PDFs (Portable Document Format), WMFs (Windows Metafile), and SWFs (Shockwave Flash).

 

SVG is different from most of its cousins in that, because it is XML-based in its coding, it is possible to create and edit an SVG file with just a simple text editing program. There are plenty of graphics programs out there, though, that can be used to generate SVG files, including one provided specifically for use with BlackBerry devices.

 

 


 

What SVG can do for themes

 

When working in the BlackBerry Theme Builder 5.0, there are two sections where SVGs can be used. These are the Home screen and the Lock screen. Using SVG can make your themes more dynamic in a few ways:

 

  • Animation: Only with SVGs can you add any sort of animation to your Home and Lock screens.  
  • More customized Home screen buttons: In BlackBerry Theme Builder, you are restricted by various image sizes regarding buttons and icons. Using SVG to create buttons removes those limitations. With SVG, icons can be resized, and buttons can be given custom animations when highlighted and/or selected.
  • Make screens more interactive: With SVG files, it's possible to make the screens more dynamic. Drawers can be created to hide Home screen buttons. Animations can be made to start or stop on unique triggers, such as the arrival of a new text message, or the rotation of a BlackBerry® Storm™ smartphone from portrait view to landscape view.

 


 

How to make SVG files

 

There are two main ways to go about making an SVG file for BlackBerry device themes. The first way is to use a program called the BlackBerry Composer. This free program is provided by RIM, and it's usually installed on your machine when you install the BlackBerry Theme Builder. The second way is by writing the SVG code yourself with the use of a text editor program. There are pros and cons to each of these techniques, and different resources available for each:

 

BlackBerry Composer

 

Pros:

  • WYSIWYG program geared towards those already comfortable with various graphic design programs
  • No need to learn SVG code beforehand
  • Free to download
  • Works relatively well for simple, straightforward animation and interactivity

Cons:

  • May export bloated code for SVG files with complex animations and/or interactivity
  • SVG components often renamed to random, irregular number strings that make it difficult for those with coding experience to decipher

Resources/Tutorials

HAND-CODING SVG

 

Pros:

  • Artist has greater control over organization of SVG code, including the naming of elements
  • No need for any special program to write code. Just a text editor, such as Notepad, is fine.
  • Can create special effects that cannot be re-created with the BlackBerry Composer
  • Hand-coded SVG files can have a smaller file size than BlackBerry Composer exported SVG files that do the same animation/special effects

Cons:

  • Has a steep learning curve for those with no coding experience
  • Testing for appearance and fuctionality involves repeatedly importing and updating the SVG file in the appropriate BlackBerry Smartphone Simulator or on a BlackBerry device
  • Not easy to find specific tutorials for hand-coding BlackBerry device SVG files

Resources/Tutorials

 


 

In conclusion

 

Although there is a definite learning curve to figuring out how to use SVG, no matter which technique you decide to use, it is definitely worthwhile to add these files to the themes you create. If you do not let yourself be daunted by the task at hand, you will definitely reap the rewards of your hard work.

Comments
by Developer on ‎09-29-2011 12:37 PM

Is there any documentation of the custom commands that are supported in SVG for BlackBerry?

 

Example: begin="custom(wifi_radio_off)"

Users Online
Currently online: 24 members 2,016 guests