How to create a hidden dock theme with 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.
Now locate the Layers panel and rename the "Layer_1" to "Dock".
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.
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.
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 Button" 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.
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.
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.
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:
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":
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.
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.
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.
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?
More Blackberry Tips & Tutorials »
What's new on BlackBerry Freeware?Free Apps: Useful Numbers for BlackBerry
Facebook for BlackBerry Updated to Version 18.104.22.168
Official Wikipedia App for BlackBerry PlayBook
Issue with Auto-text on BlackBerry PlayBook - Fix Coming Soon
Leaked OS 22.214.171.1242 for the BlackBerry Curve 9370
Leaked OS 126.96.36.1992 for the BlackBerry Bold 9790
Leaked OS 188.8.131.522 for the BlackBerry Curve 9380
No more Google Sync for BlackBerry
Advance OS and LED - Advanced Calls & LED Control
BlackBerry Desktop Manager 6.0.1 B21 now available for Windows
Free Applications Tips & Tutorials BlackBerry News