How to create a hidden dock theme with BlackBerry Theme Composer?

BlackBerry Freeware on Facebook

How to create a hidden dock theme with BlackBerry Theme Composer?


BlackBerry Theme Composer

Creating a simple BlackBerry theme is an easy to do thing, but doing something different like having a hidden dock that slides in and slides out in your BlackBerry theme requires some more work. If you wanted to know how to create a hidden dock theme and you had no idea where to start here is a nice tutorial where everything you need to know is explained step by step so that you can learn how to create he hidden dock yourself and not just rework some files you found on a forum. Let's start building your first BlackBerry hidden dock theme.
Fist of all open the Composer from the BlackBerry Theme Studio 5.0 folder in your Start menu and create a new project. For the purpose of this tutorial we are going to be creating a hidden dock theme for the BlackBerry Bold 9700 series so we select  the device and set the background to "Transparent" cos we are going to make this theme wallpaper friendly, so that the user can set his own background for the homescreen. After you select the transparent background option click OK.

New Theme Project

Now locate the Layers panel and rename the "Layer_1" to "Dock".

Rename Layer

Now lets start adding things to this layer. The first thing we are going to add to the Dock layer is the background panel for the hidden dock on which we are going to position the icons for the applications we want to be in this hidden dock. We have previously prepared the "dock-bottom.png" image in Photoshop so we just drag and drop it on the scene.

Hidden dock panel on stage
.
Click on the dock image and using the mouse position it at the bottom, using the X and Y settings in the "Position toolbar" fine tune the position of the image if necessary.

Position toolbar
Here is how the Position toolbar looks

Now that we have the dock panel in place, we can start adding the hidden dock icons. To add the icons we need to select the "Theme ButtonTheme Button Tool tool first from the Tools menu. For the purpose of this hidden dock theme we decided that it would have six icons/buttons in the hidden dock so we add them to over the dock panel. Using the "Alignment tools" we are going to align them and distribute them evenly spaced one from another. If you don't have the alignment tools panel on your screen you can show them from "Window" - "Alignment" or just press CTRL+1 to show them. To get our icons the way they look we used "Center Vertical" and "Pack Horizontal". So here is how the scene looks after positioning the icons.

Icons in hidden dock
.
Now it is time to chage some of the properties for the hidden dock icons. Since we want the user to be able to customize which apps will appear in the hidden dock, we need to set each theme button to use the "Device Application Order". In order to do that we need to use the "Inspector" panel available in "Window" - "Inspector" or CTRL+4 for qucik access. Click on a theme button and select "Use Device Application Order". Do this for all the theme buttons. You will notice the theme button icons changing to the blue default app icon.

Device Application Order   Rename theme buttons

The next thing we are going to do is rename the theme buttons. This is not necessary but I personally like things to be clear and tidy. Rename them as TButton1 to TButton6 starting from the first button to the last. You can do this using the "Inspector" panel as shown above on the second Inspector image. If you like you can also rename the dock image object to "DockPanel".

Since the buttons will not be automatically highlighted with the theme focus image we need to create our own images that we are going to use as focus underlay images for the theme buttons. We have previously prepared the fucus.png image in Photoshop so we just drag and drop it to the stage. Once the image is on the stage, right click on the image and select "Convert To Animation". Now using the "Inspector" rename it to "BFocus1". This is the focus image for the first button. Now right click it again and select  "Duplicate" and rename it to "BFocus2". Do this for the rest of the images, you should have one for each button. Also rename them "BFocus1" to "BFocus6". If your focus image is over the button, using the "Objects" panel rearrange them so that every focus image is under the button.

Theme Composer with rearranged buttons and focus images

Next we are going to add the actions that will make the focus images appear and disappear when the focus is on the buttons. Before we do that please take a look at the screenshot above to verify the setup.

From the top menu select "Interactivity" - "Timeline Actions". Add six "Hide Component" actions, one for each focus image. Click the first action and select "BFocus1" from the "Object" dropdown. Do this for the rest of the focus images, for the second action you select the "BFocus2" object and so on until the sixth action for the "BFocus6" object. Here is how it should look in the end:

Timeline Actions

Now we have to define the actions to show the focus image on button focus and hided it when the button is not in focus.  Click OK and now go to "Interactivity" but this time select "Actions". Add six "Show Component" actions, one for each of the focus images. Click each of the actions and assign "BFocus1" for the first, "BFocus2" for the second and so on. Now click the first "Show Component" action for the "BFocus1" focus image. Click the "Change Event" button. Select "On Button" and from the dropdown select "TButton1" and on the side select  "Focus In":

Change Event

Repeat this for all the show actions showing the appropriate focus image when a button is focused. Now all we have to do is to hide the focus images when the button looses focus (Focus Out). For the purpose of this we are going to create six more "Hide Component" actions. We are going to hide the focus images when a "Focus Out" event is fired for each button. Now click the first hide action assign the fist highlight image as the object to be hidden and click the "Change Event" button. Click "On Button", select the first button and select "Focus Out". Do the same for the remaining five hide actions, hiding the corresponding focus image when the button is focused out.

Show / Hide actions

Take a look at the above screenshot to verify your actions and setup. With this we have completed the focus in / focus out image effect for all the buttons. You can export this as SVG and import it into Theme Builder to try it out on a device simulator.

Now lets get back to the hidden dock functionality for our theme. Create a new layer and rename it "Controller". Create a transparent PNG 24 image in Photoshop with any kind of dimensions. We made ours 80x80 pixels and drag and drop it into the "Controller" layer. Now right click the blank image you just put on the scene and select  "Convert To Button", using the Inspector rename it to "Switcher". Where the Switcher button is located on the scene doesn't matter since it is a blank image and it will not be visible.

Now, I think a little explaining is needed. Why do we need a blank image and why did we made a button out of it? For the purpose of showing / hiding the dock we need a invisible button. When the button is focused we hide the dock and when the user focuses out of the hidden button we show the dock. Pretty simple, isn't it.

Now go back to the "Dock" layer and select all the elements. Using your keyboard arrow keys bring the down until the object exits the visible scene space completely. Take a look at the picture below.

Repositioning the dock

We are doing this, because we want to have the dock docked when the theme home screen opens. Now open "Interactivity" - "Focus Order" and move the "Switcher" to the top using the arrows on the side.

This is all you need to do in the BlackBerry Theme Composer, now just export the whole thing as SVG and close the Composer. Open the SVG file with Notepad or any other text editor like TextPad or Notepad++ and scroll to the end of the file. Just before the ending SVG tag "</svg>" copy and paste the following lines of SVG coding:

<animateTransform xlink:href="#Dock" id="_anim_dock1" attributeName="transform" type="translate" to="0,0" dur="0.5s" fill="freeze" begin="Switcher.focusin" />   
<animateTransform xlink:href="#Dock" id="_anim_dock2" attributeName="transform" type="translate" to="0,-100" dur="0.5s" fill="freeze" begin="Switcher.focusout" />

Please note the -100 value highlighted in red. You will need to change this number to minus the total height in pixels of your dock container in order for this script to work. The above code will enable the hidden dock to slide in and slide out.

Now import the SVG file into BlackBerry Theme Builder and edit the navigational paths for all the buttons. First turn off the "Navigational Hirstory" to "No Memory"  and then for this theme set them to go like this: from the Switcher down to the TButton1. Then all the other theme buttons are available when going right. Also it is good to set them to point to the Switcher if the user decides to go up. That way you get horizontal navigation in your BlackBerry theme and when the user goes up the hidden dock closes. (For the above coding to work I removed the Profiles from the home screen, because if we have profiles on the home screen, when we focus it the dock will open since the focus is not on the Switcher). If you want to have other button on the Homescreen and not use the Switcher to fire the open/close events you can replace the above SVG code with:

<animateTransform xlink:href="#Dock" id="_anim_dock1" attributeName="transform" type="translate" to="0,0" dur="0.5s" fill="freeze" begin="TButton1.focusout" />   
<animateTransform xlink:href="#Dock" id="_anim_dock2" attributeName="transform" type="translate" to="0,-100" dur="0.5s" fill="freeze" begin="TButton1.focusin" />
   
<animateTransform xlink:href="#Dock" id="_anim_dock3" attributeName="transform" type="translate" to="0,0" dur="0.5s" fill="freeze" begin="TButton2.focusout" />   
<animateTransform xlink:href="#Dock" id="_anim_dock4" attributeName="transform" type="translate" to="0,-100" dur="0.5s" fill="freeze" begin="TButton2.focusin" />   

This is the SVG code for the first two buttons you will need to create the same code for the four remaining. Just remember to put different ids in id="_anim_dock[SOME NUMBER HERE]" or you will get errors and your hidden dock will not work. You see that for each line the id is different starting with _anim_dock1 for the first line/first button and ending in _anim_dock4 for the second line/second button.

There are also some other more advanced techniques for creating multiple hidden docs in BlackBerry themes using SVG coding and BlackBerry Theme Composer, but I think it would be best if we leave them for another tutorial. If you think this tutorial was useful to you and you would like to share it, feel free to post a link in your favorite forum.

Download the tutorial project files!

The tutorial files are provided for free under Creative Common Attribution - non commercial - non derivative works 3.0 License. For more info please visit http://creativecommons.org/licenses/by-nc-nd/3.0/


Get the latest BlackBerry updates via:   Subscribe via Email    Twitter    Facebook    RSS Feed

Share Share/Bookmark
AddThis Feed Button


Found under: Hidden dock theme, BlackBerry Theme, BlackBerry Composer, Hidden Dock Tutorial, BlackBerry Hidden Dock
How to create a hidden dock theme with BlackBerry Theme Composer? - permalink
Published on 20.02.2010 in Blackberry News

More Blackberry Tips & Tutorials »

Comments: How to create a hidden dock theme with BlackBerry Theme Composer?


Posted by steve on Monday, March 29, 2010 22:49
i keep getting:
SVG failed to import correctly.
Certain portions of the SVG may not be rendered correctly.
The SVG file: C:\Users\steve.Steve-PC\Desktop\hiddendock.svg may not be rendered correctly for the following reasons:
Duration is not defined
Duration is not defined
Duration is not defined
Duration is not defined
Duration is not defined
Duration is not defined
Duration is not defined
Duration is not defined
Duration is not defined
Duration is not defined
Duration is not defined
Duration is not defined

any suggestions?
Posted by BlackBerry Freeware on Thursday, April 01, 2010 14:32
We are getting the same error but everything works ok.
Posted by Carlos on Tuesday, May 11, 2010 03:37
Question, if I delete the switcher BUT keep my profile icon, would it still work? Or will I have to copy that one other code?
Posted by Roxxi23 on Friday, June 04, 2010 04:21
I get this msg when i try to upload the file...

SVG failed to import correctly.
Certain portions of the SVG may not be rendered correctly.
The SVG file: E:\\pinkdockcode.svg may not be rendered correctly for the following reasons:




Duration is not defined
Duration is not defined
Posted by roxxi23 on Friday, June 04, 2010 04:28
I also get this when I export to my phone...

Warning: The following resources could not be included in the theme for reasons explained below:
homescreen.svg

Warnings:
homescreen.svg: Failed to compile SVG file.

Errors in homescreen.svg:
Error: The element named "_anim_dock1" has a reference to "Switcher" which is not found.
Error: The element named "_anim_dock1" has a reference to "Dock" which is not found.
Error: The element named "_anim_dock2" has a reference to "Switcher" which is not found.
Error: The element named "_anim_dock2" has a reference to "Dock" which is not found.
4 error(s) were encountered.


This leaves my phone with a zen layout. I don't know what I did wrong.
Posted by Feather on Tuesday, June 22, 2010 01:07
Just wondering EXACTLY what the Navigation buttons are. Like what EXACTLY goes where EXACTLY. Lol. I\'ve tried a few, but none of them I really like. I mean, it\'s no big deal, but I just want when I scroll up, the dock comes up. When I scroll down, the dock disappears. When I scroll left and right, I want it to go left and right. Sometimes when I scroll right, the dock goes down. I just want it to do what you said and I said, exactly. Lol. Thank you.
Posted by tonya on Tuesday, July 27, 2010 01:24
k... so i created the perfect theme. yes I the most computer illiterate person in the entire WORLD spent 2 days on my computer following ur tutorial to the letter... PERFECTO! then i exported it as SVG... but when i try to open it in notepad i get a bunch of jibber jabber... please help. i want my theme!!!!!!
Posted by colbmiester on Saturday, August 14, 2010 05:12
are you sure you are opening the SVG file in notepad and not the composer file?
Posted by ESpence on Wednesday, August 25, 2010 19:25
I created the dock and it works perfectly but now all the buttons are locked to the "Messages" icon. I was so happy to get the menu to go up and down the way it should and I can scroll left to right as I should but all 6 buttons on the dock are locked to the one "messages" button please help?!!
Posted by renagade on Monday, August 30, 2010 18:08
After the second time thru I got it to work. The only thing I don't like is I can only get it to work horizontal or vertical. How do you scroll side to side on icons and up and down with dock. By the way great job on tutorial
Posted by Joshua on Saturday, October 09, 2010 07:38
New to theme building. I followed yor tutorial to the T, but when i try and Import the SVG file into Theme Builder, it says it can't open the file. Help please...
Posted by Up on Saturday, February 12, 2011 15:37
Thank you so much, it worked perfectly!
Posted by rizki on Monday, March 21, 2011 03:05
already follow the tutorial, but when export to my blackberry, problem come with message :


Errors in homescreen.svg:
Error: The element named "_anim_dock1" has a reference to "Dock" which is not found.
Error: The element named "_anim_dock2" has a reference to "Dock" which is not found.


Care to comment? Leave a reply now!


Privacy: We do not share any private data. Your e-mail address provided throught the comment form is used only to show your Gravatar if you have one. If you like to receive updates from BlackBerry Freeware please subscribe to our free freeware mailing list.

Blackberry freeware Mailing List

Enter your email address and receive the latest Blackberry freeware applications in your inbox.

BlackBerry free apps on Twitter

Blackberry software by category

•   Business & Professional
•   Document Management
•   Education
•   Games
•   Hobbies
•   Multimedia
•   Productivity
•   Travel
•   Communications
•   eBooks
•   Entertainment
•   Health & Fitness
•   Medical
•   Personal Finance
•   Translation
•   Utilities

Blackberry software by device

Blackberry freeware Mailing List

Enter your email address and receive the latest Blackberry freeware titles in your inbox.

RSS Feeds

All Blackberry software RSS feeds New Blackberry software Blackberry freeware

Subscribe Now!

New freeware
Blackberry freeware RSS feed
New software
Blackberry software RSS feed
AddThis Feed Button AddThis Social Bookmark Button
How to create a hidden dock theme with BlackBerry Theme Composer?