jscroll

[snipeking13]

i have a quick question why is it when i make a jscroll theme why wont the icons scroll back as fast as they scroll forwards?

[somdfisher]

I haven't figured it myself, but I think it has something to do that the jscroll is made for a different phone and there is additional coding for the storm. I have tried it different ways and got it a little better.

[snipeking13]

Originally Posted by somdfisher

I haven't figured it myself, but I think it has something to do that the jscroll is made for a different phone and there is additional coding for the storm. I have tried it different ways and got it a little better.

i noticed that when i opened the svg in composer that it was made for the bold so what did you do?

[holster27]

the main thing you guys have to remember, its not the just the icons that are moving, the svg makes the whole layer move, and when you scroll backwards, the code is telling the layer to move back to the position it was in when the icon is highlighted. Also, everyphone is and will react differently to these svg's. Depending what is running in the background on your phone, will also affect how fast the layer moves.

[snipeking13]

Originally Posted by holster27

the main thing you guys have to remember, its not the just the icons that are moving, the svg makes the whole layer move, and when you scroll backwards, the code is telling the layer to move back to the position it was in when the icon is highlighted. Also, everyphone is and will react differently to these svg's. Depending what is running in the background on your phone, will also affect how fast the layer moves.

ok so what are your suggestions?

[weldmonkey]

Originally Posted by snipeking13

i noticed that when i opened the svg in composer that it was made for the bold so what did you do?

The trick to the Jscroll its to make your own fresh SVG file for the storm...start simple...just make a layer (Name it Layer_1) with up to 10 theme icons, click use devide order for all the icons...

Export it...open with notepad, copy and paste the following at the bottom..right before </svg>

<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"
/>

Just a breakdown of what the code means:

animateTransform (meta tage telling it what function its useing)

xlink:href="#Layer_1" (this states what Layer you are animating, it will move this whole layer so only have icons here, place artwork on other layers)

id="_anim_l10" (all animations must have different names, this is as it looks an ID.)

attributeName="transform" type="translate" (this describes what kind of animateTransform function to use, there are more functions but Im not going to go into them here)

to="-450,0" (Ok Here is the part you want to edit this will tell the BB how far to move the layer, just go down the row and add in equal incraments, this is set up to move the icons left 50 pixels, if you look at the total the script you see it starts at 0,0 you always have to do this this is the ancor point, all your icons will rest here. The first number is the X coordinate or left to right movement, the second is the Y coordinate or Up and down. play with the numbers to go up, down, left, right, or even two directions at the same, this you will have to use trial and error to find what you want.)


dur="0.5s" (This states how long the animation will last...you can raise or lower this to make it go faster or slower, however 0.5s or 1/2 Second is a good number to use.)

fill="freeze" (This just states to freeze after the animation.)

begin="Theme_Button_10.focusin" (This part states when the animation will begin. Here since it is the last Icon #10 when the Icon is focus in on or touched the animation will begin or in lamens it move the icons left.)

When you are done in notepad save and go to save you must pick all formats and save as SVG....so just name.svg instead of just a name or name.txt.

Thats it load your Jscroll file into themebuilder...

I hope this little tutorial is easy to understand and is helpful to you and other new developers...Good Luck, your imagination is your only real limitation...check out my theme, I have two rows of scrolling Icons in two different directions...

To learn more about SVG do a good search for "SVG Reference for Blackberry" and just look for SVG in general online.

[weldmonkey]

Oh I almost forgot to mention...

You may want to make your first two and last icons stay where they are this helps the scroll back and forward...

so like the first and second Icon make the cordinates 0,0 then on the third go to -50, 0...

The same one last two 9 and 10 make -450,0

This helps keep all the icons on the screen, also on this set up it wont start scrolling till you touch the 3rd Icon and will scroll back when you touch the 8th icon at the end..

Just keep playing with you will get it..

[snipeking13]

should it come out the last two should be -400,0 right?

[weldmonkey]

Originally Posted by snipeking13

should it come out the last two should be -400,0 right?

Yes sorry I was tired and miss counted in my head...the last two should be -400,0...

[snipeking13]

dude big help thanks alot i think the 0,0 0,0 and the thing at the end did it i did everything else right just not that

[weldmonkey]

Originally Posted by snipeking13

dude big help thanks alot i think the 0,0 0,0 and the thing at the end did it i did everything else right just not that

no problem, it took a while of trial and error to figure that one out...

[snipeking13]

ya i never would have guessed that