Scrolling Dock

[KahneFan]

How would I create a scrolling dock in composer? I know there's a tutorial out there about how to make a scrolling dock which wraps around for a continual scroll, but I'm just wondering how to make standard scrolling icons? In case I'm not using the correct wording; If you have 5 icons, the middle icon has focus and as you scroll the icons themselves move up and down instead of the focus moving up/down.

Any help is apprecaited.

Edit: this is for a Torch

[billy3296]

I actually just created this theme for an 9330 myself. Your talking like a king style dock as seen over on bbthemelabs.com correct?

Posted from my CrackBerry at wapforums.crackberry.com

[KahneFan]

Well, the king is a continual scroll. I don't need the continual, just scroll left (to end) scroll right (to end).

[Justam]

This is actually quite easy, although to be honest depending on your situation you might prefer to use a king style scrolling dock as this appears as a continuous scroll..

Anyhow you will need to take note of the X,Y of each icon in its initial position. The key is to work out where the other icons will be when you scroll from right to left, left to right.

For example you start with:

--1 2 3 4 5--
(3 being the focus)

Scrolling right:

-1 2 3 4 5---
(4 is now focused)

In order to achieve that you work out the difference between the icons initial position X,Y and the intended position X,Y.

Place each icon on its own layer.

EG: 3 initial position is 100, 0 and 4 initial position is 150, 0
the difference is -50. so your code would look like:

<animateTransform xlink:href="#Icon4" id="_anim_bgd081" attributeName="transform" type="translate" to="-50,0" dur="0.5s" fill="freeze" begin="Button_4.focusin" />

You will need to change (id="_anim_bgd081") for each line of code as each animation must have a different id. so for example id="_anim_bgd081",id="_anim_bgd082",id="_anim_bgd0 83", etc

You will need to change:

xlink:href="#Icon4" - to the layer you are trying to move...Icon4 being the layer
id="_anim_bgd081" - increment the anim id
to="-50,0" - difference in X,Y
begin="Button_4.focusin - button you would like focused

Remember you will need to do this for each icon as the entire row will be moving. So for each move you will need to have 5 lines of code for 5 icons. For a total of 25 lines of code for the complete animation code.

It wasn't too long ago I had a similar question I posted on BBthemelab.com. I figured it out and posted the answer within the same thread. This is a very easy process and surprisingly took me a couple hours to figure out ROFL. It wasn't my day that day we will say....anyhow...

Here is the link: How to 2D Rotating Wheel - SVG Coding - Im lost... | How-to Discussion | Forums | Blackberry Theme Lab | Be The Scientist

If you have additional questions feel free to pm me or post here in this thread and I will do my best to help you out.

[KahneFan]

I'll give it a shot, thanks!

BTW, if I were to use 12 icons (or so), this would make 144 lines of code; would this make a theme "heavy" (sluggish/slow)?

[Justam]

It shouldn't.....

[KahneFan]

I will ask here so that others may benefit from my question;

Would it be terribly troublesome to provide a sample of maybe 3 buttons? I think that would definitely give me a good view of what is happening with each step.

Also, is the above coding in addition to the coding which will already be in the SVG or in place of the icon coding in the SVG?

If not, no biggie, I'll give it a trial/error.

[Justam]

this should work. I wrote this at work so had no means to test it but it should work no problem.


When designing your icon layout in composer make not of the X,Y of the icons as you place them in thier starting position.

Original X,Y of Button1 which resides on Layer:Icon1 - 50,0
Original X,Y of Button2 which resides on Layer:Icon2 - 100,0
Original X,Y of Button3 which resides on Layer:Icon3 - 150,0

Button Layout:
Button1--Button2--Button3

Each button has 50 pixels between them.


In order to move Button1 into focus all the icons need to shift 50 pixels to the right.
When moving buttons/layers you always work out the difference between the desired position and the original position.
So Button1 was 50 originally and Button2 is 100 originally.
We want to move to button2's position. Hence we subtract button2 position from button1 position
Button2(100,0)-Button1(50,0) = 50,0

So there is a difference of 50 pixels on the X axis between the two positions. You will need to move Button1 50 pixels to the right in order to be focused in the center. Because Button1 is moving you will also need to move Button2,3.

<!-- Button1 in focus -->
<animateTransform xlink:href="#Icon1" id="_anim_bgd152" attributeName="transform" type="translate" to="50,0" dur="0.5s" fill="freeze" begin="Button1.focusin" />
<animateTransform xlink:href="#Icon2" id="_anim_bgd153" attributeName="transform" type="translate" to="50,0" dur="0.5s" fill="freeze" begin="Button1.focusin" />
<animateTransform xlink:href="#Icon3" id="_anim_bgd154" attributeName="transform" type="translate" to="50,0" dur="0.5s" fill="freeze" begin="Button1.focusin" />

Now because Button1,2,3 started where we want them when Button2 is focused we use 0,0 as we don't want change from the original X,Y. Essentially this will just move the icons back to their original location.

<!-- Button2 in focus. This is also the default position of all icons. That is why the X,Y is 0 because no change is needed from their original X,Y position. -->
<animateTransform xlink:href="#Icon1" id="_anim_bgd155" attributeName="transform" type="translate" to="0,0" dur="0.5s" fill="freeze" begin="Button2.focusin" />
<animateTransform xlink:href="#Icon2" id="_anim_bgd156" attributeName="transform" type="translate" to="0,0" dur="0.5s" fill="freeze" begin="Button2.focusin" />
<animateTransform xlink:href="#Icon3" id="_anim_bgd157" attributeName="transform" type="translate" to="0,0" dur="0.5s" fill="freeze" begin="Button2.focusin" />

As we did for Button1 we need to work out the difference in Button X,Y
Button2(100,0)-Button3(150,0)= -50,0
So all the icons will need to move -50 pixels to the left in order for button3 to be in centered focus.

<!-- Button3 in Focus -->
<animateTransform xlink:href="#Icon1" id="_anim_bgd158" attributeName="transform" type="translate" to="-50,0" dur="0.5s" fill="freeze" begin="Button3.focusin" />
<animateTransform xlink:href="#Icon2" id="_anim_bgd159" attributeName="transform" type="translate" to="-50,0" dur="0.5s" fill="freeze" begin="Button3.focusin" />
<animateTransform xlink:href="#Icon3" id="_anim_bgd160" attributeName="transform" type="translate" to="-50,0" dur="0.5s" fill="freeze" begin="Button3.focusin" />

Create 3 Layers in Composer. Name them Icon1,2,3 respectively.
Place 1 button on each layer. Name the buttons, Button1,2,3 respectively.

In the X,Y for each button enter (50,0), (100,0), (150,0) respectively.

Export your svg.

Then open your svg in Notepad++ or Notepad and right at the bottom of the file you will see this tag: </svg>

Return a couple spaces between </svg> and the code above.

This space between the code and </svg> is where you want to place the animatetransform code above. Make sure you place each section of 3.

When saving your file from notepad make sure you select all files and not .txt

Save your file.

Open Theme builder and import your svg. Assign your navigation.

Export and test the animations in a simulator.

I hope this works and you find it useful.

[Justam]

Originally Posted by KahneFan

I'll give it a shot, thanks!

BTW, if I were to use 12 icons (or so), this would make 144 lines of code; would this make a theme "heavy" (sluggish/slow)?

It shouldn't but you can always trim your code. When exporting svg from composer it tends to be bloated. It is best to learn to write it yourself so you can keep it clean and optimized. This is also a good practice to learn svg quickly.

[Justam]

Originally Posted by KahneFan

Also, is the above coding in addition to the coding which will already be in the SVG or in place of the icon coding in the SVG?

It is in addition...you place it at the end of the svg file just before the </svg> tag.

[KahneFan]

Great! Thanks for all the help!

[Justam]

Originally Posted by KahneFan

Great! Thanks for all the help!

np, let me know how it goes!

[Justam]

Originally Posted by KahneFan

I'll give it a shot, thanks!

BTW, if I were to use 12 icons (or so), this would make 144 lines of code; would this make a theme "heavy" (sluggish/slow)?

just thought I would mention how effective trimming your svg file is/writing it yourself.

I wrote a svg file with 10 scrolling icons. This svg file was originally 176kb. After trimming this file was 67kb! The theme ran better and smoother...ran like a dream...anyhow the system footprint was smaller and thus the processor didn't have to run all that bloated code to simply move a icon from a to b etc....

[KahneFan]

Unfortunately I'm new to it so I'm not sure what I should/shouldn't cut.

[Justam]

I'm not suggesting you do it now. I would suggest you become comfortable with svg code first. Once you are comfortable and you can read what each part of code is doing then you will be better suited to attempt to trim the svg. Just remember it really does offer performance benefits when you start doing more icons with motions!