[9of13]

heres a rundown on how to make a sliding hidden dock for Blackberry themes.
Thanks to Pinpoint for the video tutorial and all who worked to figure this out

I must add first that this tutorial geared to those who atleast have the basics
down with using COMPOSER. if you dont i recommend you watch Pinpoint's Tutorials
on flick n slide first. itll help a lot.

you first start out in COMPOSER. line up the icons how ever
you plan the dock to slide. Along the bottom is the most common. Like the old
"Dimension Today Plus" theme. Along the top or even the sides as well. as an example
see image 1 figure A.

IMAGE 1:


just make sure the icons dont overlap each other. ive learned it will
not function correctly. next import the image you want for the dock itself. position it
over the icons. basically your making how the dock would look whan its in focus. Not
hidden. see image 2

IMAGE 2:


Now right click the imported dock image and follow the menu as image 3
figure a.

IMAGE 3:

select "send to back". you want the image behind the icons. i suggest you place
the buttons first then the dock image in that order. this keeps the theme button file name
sequential starting with 1 as in image 3 figure b. This will make the next step after
composer a little easier. But if it hasnt come out that way, keep the COMPOSER file open
for reference later. once it looks like it should when an icon in the dock is selected as
in image 4,

IMAGE 4:


go to file then export then svg. after export, save the COMPOSER file.
But dont close it.


Now comes the fun part.....



As it turns out. plazmic CDK does not have a feature to make a hidden dock animation. its all code.
yes code. But dont worry. Its mostly copy and paste with a few simple quick edits. First
open the .svg file you just created with NOTEPAD. Image 5 shows the beginning of the code. where
the code is circled it now says "Buttons".

IMAGE 5:


When you first open the file it will say something
like "Layer_1". change it to "Buttons". Thats the first edit. then scroll down all the way to the bottom.
it will look similar to image 6.

IMAGE 6:


Place the curser at the same location shown as just above. Press "enter" 4 times
and then dont do anything else to it. You now need to open another file. now ive included a zip file
with the code to copy at the bottom of this post. it supports up to 10 icons. please look at image 7.

IMAGE 7:


the first 2 sections of
code is for the first icon button. note figure A. All four of them identify The first theme icon button or
Theme Button 1.
Now back in COMPOSER if teh theme buttons are in sequential order, just copy the buttons you need.
If you created a dock with 4 buttons, only copy the 4 buttons. Remember, 2 sections per button. Copy it as shown in Image 7a and paste it to your SVG at the location of the cursor at the bottom of Image 6. But remember that you had to create 3 blank lines before you paste it.

IMAGE 7a:


Now if the theme buttons arent sequential, edit just the number in Image 7 Figure A.accordin to the number in the
COMPOSER file. See Image 3 figure b again incase theres confusion. once all that is done time to edit for animation.
Now if you look back at Image 7 youll see Figure B. It points to locations on the "x,y" axis.
The upper one says to="0,0" these you leave alone. each first section for each button stays this way.
Now note the bottom one. it says to="122,0" Now this was the code to a theme i had just made.
It tells the dock to move right on the "x" axis. the 122 represents whether you want the dock to move left
or right. this one tells the dock to move 122 pixels to the right when unfocused. a right side dock.
now i recomend you set it to 100. or if you know exactly how many pixels to move write it there.
now if the dock is on the left you need the number in the negative. example to="-100,0".
Do this to each section where you see the 122,0. leave all the 0,0's alone.
Now in the first few images, it shows a bottom dock. this moves on the y axis. Up and down.
to edit this, you would use "0,100" for a bottom dock sliding down off the screen. if the dock is on top,
it would be something like "0,-100". in teh negative makes the dock move up to hide. when all the edits are done,
click "file" then "save as". Now take a look at Image 8. youll see im selecting "All files" when selecting the type of files im saving as.

IMAGE 8:


when selected, the original SVG file is shown. Double click the SVG file you were just working on and
Overwrite. Congratulations!!!! You can now add the svg file to THEME BUILDER and build your theme.
Now when building it to a 4.6 theme, make sure you edit the navigation. The final image shows what you need to do.

FINAL IMAGE:



this will first say "Full Memory". Change it to "No Memory". build your theme and please be sure to test it.
trust me. I had to test many a times before i got it right.
I hope this helps out. Its my first tutorial. i did this one to hope to help out my fellow theme makers to continue to wow the Blackberry masses.

Assimilate this info and happy theme building!


to all who have done tutorials, youre all right. its not that easy to write one! LOL

[pdxmatts]

Thank you for all the hard work! I will definately have to check this out and see if I can do it.

[tdmsna523]

can this only work for the bb bold?

[9of13]

Its for all phones~via BB (wap.pinstack.com)~

[jasonring]

Thanks 9..... i just now got a chance to look at this. I've bookmarked this page, and will study. Thank you!!!

[ganns1980]

Awesome - thanks!

[tdmsna523]

Really? That's awesome thanks I will try it tonight! How do you get the over lay can you make it through composer or gimp if so how?~via BB (wap.pinstack.com)~

[tdmsna523]

Also I've heard it only works for bold because of the navigation with the bold.~via BB (wap.pinstack.com)~

[9of13]

Originally Posted by tdmsna523

Really? That's awesome thanks I will try it tonight! How do you get the over lay can you make it through composer or gimp if so how?~via BB (wap.pinstack.com)~

Originally Posted by tdmsna523

Also I've heard it only works for bold because of the navigation with the bold.~via BB (wap.pinstack.com)~

if by overlay you mean getting the dock over everything, its on composer. I dont use gimp. when i edit images i use photoshop.

it works easier for the bold and Flip. basically any 4.6 device. when making it for other phones, place the icons from right to left and set the navigation to navigate up to profiles. that mkes it a little easier.

[matte119]

How about adding the scrolling feature to the hidden dock style? what is the coding to add that?

[9of13]

Originally Posted by matte119

How about adding the scrolling feature to the hidden dock style? what is the coding to add that?

for the scrolling, you edit the "focusin" "0,0". the first button you leave at 0,0 and i suggest every next button you add a minimum of 40 depending on direction and/or iconsize and placement.

[tdmsna523]

Would you happen to now how to do this for the storm? I get it to hide but i dont know how to make it appear. since its a touch screen. what would i have to change in the text for the svg thanks agian man.

[9of13]

ive already done it for the storm. the trick is to add another button when making the svg that does nothing. add it to the edge of the dock so it still shows when the dock is hidden. edit the button in the svg with notepad and use the same numbers as button one.

for an example, check out this theme

http://forums.pinstack.com/f240/95xx_white_scroll_today_plus-103591/

[tdmsna523]

how do you make the button do nothin in composer?

[tdmsna523]

alright man i figured that out now to make a scroll would i have to edit the text diffrently or will it work if i do like i did the other devices?