Vertical Scrolling dock?

[rgarling]

I've searched and couldn't find anything.

I got a request to make a theme with a vertical scrolling dock on the left hand side. I'm not sure how to do this in composer.

Can anyone help me, or point me to a good tutorial?

[bbthemelab]

Do you know how to do a horizontal scroll?

Flip the number sequence. It usually is 0,x make it x,0. I could make a cp file for you I suppose if you do not understand.

[rgarling]

Yeah, I have no idea how to do a horizontal scroll. I would really love to learn....

[bbthemelab]

Lol ok. There is a tutorial somewhere. I will have to find it for you. Not home now.

Posted from my CrackBerry at wapforums.crackberry.com

[rgarling]

Originally Posted by b15ginz

Lol ok. There is a tutorial somewhere. I will have to find it for you. Not home now.

Posted from my CrackBerry at wapforums.crackberry.com

Thank you! I've searched to no avail and couldn't find one.

[bbthemelab]

ok - sorry I took so long. There isnt a tutorial on a sliding dock (there is one for droid hidden). However, you can find a horizontal sliding dock in your theme builder folders

I go here: c:\program files (x86)\Researh In Motion\BlackberryThemeStudio5.0\Samples\Themes\Cus tom\JScroll\

Right click on jscroll.svg and goto Open With and choose notepad

Scroll all the way to the bottom and you will see this code.

	<animateTransform xlink:href="#Layer_1" id="_anim_l1" attributeName="transform" type="translate"
					to="0,0" dur="0.5s"  
					fill="freeze"
					begin="Theme_Button_1.focusin"	/>
					
	<animateTransform xlink:href="#Layer_1" id="_anim_l2" attributeName="transform" type="translate"
					to="-50,0" dur="0.5s"  
					fill="freeze"
					begin="Theme_Button_2.focusin"	/>
					
	<animateTransform xlink:href="#Layer_1" id="_anim_l3" attributeName="transform" type="translate"
					to="-100,0" dur="0.5s"  
					fill="freeze"
					begin="Theme_Button_3.focusin"	/>				
					
	<animateTransform xlink:href="#Layer_1" id="_anim_l4" attributeName="transform" type="translate"
					to="-150,0" dur="0.5s"  
					fill="freeze"
					begin="Theme_Button_4.focusin"	/>				
					
	<animateTransform xlink:href="#Layer_1" id="_anim_l5" attributeName="transform" type="translate"
					to="-200,0" dur="0.5s"  
					fill="freeze"
					begin="Theme_Button_5.focusin"	/>				
					
	<animateTransform xlink:href="#Layer_1" id="_anim_l6" attributeName="transform" type="translate"
					to="-250,0" dur="0.5s"  
					fill="freeze"
					begin="Theme_Button_6.focusin"	/>				
					
	<animateTransform xlink:href="#Layer_1" id="_anim_l7" attributeName="transform" type="translate"
					to="-300,0" dur="0.5s"  
					fill="freeze"
					begin="Theme_Button_7.focusin"	/>				
					
	<animateTransform xlink:href="#Layer_1" id="_anim_l8" attributeName="transform" type="translate"
					to="-350,0" dur="0.5s"  
					fill="freeze"
					begin="Theme_Button_8.focusin"	/>				
					
	<animateTransform xlink:href="#Layer_1" id="_anim_l9" attributeName="transform" type="translate"
					to="-400,0" dur="0.5s"  
					fill="freeze"
					begin="Theme_Button_9.focusin"	/>	
					
	<animateTransform xlink:href="#Layer_1" id="_anim_l10" attributeName="transform" type="translate"
					to="-450,0" dur="0.5s"  
					fill="freeze"
				begin="Theme_Button_10.focusin"	/>

This is a theme with 10 buttons that slide left to right. You will notice the numbers here (0,0 / -50,0 / -100,0 .....etc) To make it scroll from top to bottom, flip those numbers.

You can see my slip n slide theme here (there is a video on the bottom). I used jscroll as a base and just added to it.


Create your compose section with the icons on top of eachother to the left, or right.
Paste that code (from above) at the very bottom of the svg file before the </svg> tag(when you save it in composer) and tweak it. Make sure you change the Theme Button_ tags to apply to the name of your buttons.

Feel free to hit me up if you have any questions.

[rgarling]

Wow, thank you very much!!

Now if I want an icon highlight I just add it pretty much the same way as I did for the hidden dock right?

[bbthemelab]

Originally Posted by rgarling

Wow, thank you very much!!

Now if I want an icon highlight I just add it pretty much the same way as I did for the hidden dock right?

No problem.

Yes, you click on the icon, click edit (under File at the top).

Then goto file>import or hit control m to import your hover over. Right click it, goto arrange, then send to back. Now, make it invisible on the first sequence, then visible on the second, then invisible on the third, then visible on the fourth.

[ahaz86]

ahazdesigns.com has video tutorials also on some composer stuff...