Beginner’s Guide: How to Create a Basic Animated BlackBerry Theme

10 Comments

The following is a tutorial on how to create a basic BlackBerry theme. This guide was developed by Indra Gunawan, member of ID-GTF, a Blackberry theme community in Indonesia (GTF is short for Garage Theme Factory. This is a basic tutorial that uses the CreepyBerry theme as an example. This is the first in many tutorials that include topics such as how to make a theme in different styles such as hidden dock, ring, J-scroll and more. These have been translated from Indonesian, and feel free to use the comments section to ask for help.

Theme Development Requirements

For BlackBerry theme development, make sure you have the following installed:

  • BlackBerry Themes Studio 5.0
  • BlackBerry simulators
  • Image editing software (Photoshop, Gimp, dll)

BlackBerry Theme Studio 5.0

BlackBerry Theme Studio 5.0 is the latest version of the software needed to create themes for the BlackBerry. BTS 5 comes with two main components: BlackBerry Theme Builder and Composer. The theme we are about to create, is an animated theme that uses a great deal of the BlackBerry Composer, so we’ll start with it.

Composer

The BlackBerry Composer is a design and animation product that helps you create static or animated graphics for your theme. The first step to creating a theme such as CreepyBerry, requires you to open Composer and begin a new file.

1. Press ‘Ctrl+N‘ to create a new Composer file or click on File > New
2. Choose a BlackBerry device for the theme you are about to create. For the CreepyBerry theme, we’re using the Bold 9000. Width and height will automatically change according to the device you chose.

For the CreepyBerry Theme, we will choose a transparent background and import the proper wallpaper. To import a wallpaper click File > Import. The import result should appear in the Composer.

Now we’re going to create a button. To do this, click the Theme Button icon in the Composer toolbar.

Create 5 theme buttons and place them horizontally as shown below:

Now we’re going to click on each theme button, and choose “Use Device Application Order” on the Inspector Menu, and apply it to each of the 5 buttons you have just created. See below:

To add an animation effect on the button, select the animation tab on the Inspector Menu. For the CreepyBerry theme, the following order is used:

Focus in (Slide Up) and Focus Out (Slide Down)

This is applied to all buttons. See below:

We have now created the basics of the theme as well as some button animations. It’s time to export the SVG file. An SVG (Scalable Vector Graphics) can be exported as follows:

File > Export to > SVG > Click OK

Now that we have our SVG file, it’s time to open Theme Builder.

Theme Builder

The BlackBerry Theme Builder is a theme design tool that lets you change the images that get used for things such as the icons, background graphics and cursors. This is also where you can adjust the fonts, change the position of objects on the screen, and decide which applications appear.

Open Theme Builder and choose a device for the project. In this case, we’re using the Bold 9000.

On the “Theme Homescreen” tab, you will need to import the SVG file we created with Composer.

After importing, you should see the wallpaper you have chosen, and your Theme Builder screen should appear as follows:

In Theme Builder, you have the ability to customize many different aspects of the look and feel of the device. This is also where you can customize the battery and signal meters. Customizing the battery and signal meters is important if you’re interested in making “premium” BlackBerry themes, as it really gives the device a unique look.

To change the battery and signal meters, use the “Theme and Banner” tab. The fonts, indicators and visibility sections contain everything you’ll need to customize the banner fully.

You should now import a custom battery meter icon. The battery meter is broken into 14 icons, 7 on the top row and 7 on the bottom. The top row is for all 7 states of a BlackBerry battery from empty to full. On the bottom row, are those 7 states but while in charging mode. Upload the single file, and make sure it divides into these 7 equal parts so the theme knows to parse it accordingly. To upload the custom battery meter, simply select the icon and upload the file. Below you’ll find the custom CreepyBerry battery and signal meters:


For customized icons, you will have to upload 2 versions of each icon. These two versions represent the two states of an icon: selected and not selected (focus and normal respectively). Upload each icon type by clicking on the icon and uploading the image accordingly. Remember that different BlackBerry models require different resolutions of icons so be sure to upload the correct sizes.

For more information about BlackBerry icon sizes with respect to the device type, be sure to view these UI guidelines from RIM.

You are now finished building your first animated theme! It’s time to export the file and try it out on your Bold 9000. To do so, simply go to File > Export and select either a JAD or ALX file. Let us know if you’re unable to load these file types as we can write up a simple guide for more help.

We hope this tutorial has been helpful. Feel free to leave questions in the comments, and experienced BlackBerry theme developers will surely do their best to help you out.

  • Kitz

    Good guide… May I ask also how can I create a calendar to do list that appears on homepage when the calendar icon is selected?

  • http://twitter.com/johanteddy johan teddy

    on the theme builder, click on the home screen tab,
    find the text extra and check on the today area.

  • http://appworld.blackberry.com/webstore/vendor/1111 Eric at Ebscer

    This looks like it could be very helpful…

  • gusto

    Something that should have been mentioned in the guide. when you load up theme builder, make sure “Custom” is selected so you can import an SVG

  • Dalinkwent2001

    I'm having problems importing the svg file into theme builder. Error msg “can't open file” Any ideas?

  • http://twitter.com/johanteddy johan teddy

    the issue usually happen because something wrong with the svg script. try to check the image folder the svg referred. are all the image (for wallpapers or buttons) correct or not

  • easytiger

    I am sorry to say that i have spent a whole day trying to set this up but it does not work properly. I have executed everything above but when i put it on my storm it only shows a messages icon in the bottom left corner that does not move. can someone tell me what it is i am doing wrong?

  • Ast_and_obe

    it work :)

  • Tom Elcott

    With regards to making your own Battery icon, iv set up a series of 7 images equally spaced across with anothe 7 below, but when i bring the image into the battery place it crops my image at the wrong places because its looking for a series of 12 images, how do i change this to 7, or change the region it crops?

  • Silentfull86

    versi indonya ada ga nih bang? :D