Help for creating a circle pattern rotating home screen

[Jeffrey_0404]

Hi guys,

If you're trying to create the 3D ring or make your icons/buttons move on your home screen as you go from one to another, I can give you a bit of help with it.

After looking for tutorial on the web about this and only managed to find one in chinese for the 3D ring (unfortunately I don't speak chinese) and by reading the few explaination you can find, I managed to have the icons/buttons on my home screen rotate in a circle pattern (I'm now trying to do it in a sphere pattern)
It is much easier than you think especially if you have experience in developing, but it takes time as lots of basic calculation for the translations.

The only thing I'm missing at the moment is how to clean the code composer gives you.

Just reply to this post, and I'll explain to you what I manage to learn ;-)

Have a great day guys

Jeffrey

[blueinc]

Hi Jeffrey_0404,
I'd like to understand this further. What have you found out? PM me if you like...

cheers...B

[Jeffrey_0404]

Hello,

What I found is just to add a translate transformation for each layer you want to more (didn't look into transforming an object yet).

In composer, start with creating a layer for each button, name them so you can easily manage them as you'll have to work in the wordpad/notepad after.
Place the buttons where you want them to be at the start and then export it into a SVG file.

Then open the file with a text editor and (as I'm not good doing math without one) have a calculator with you.

I've put it at the end of the file just above the </svg> but I'm sure it's not compulsory.

<animateTransform
xlink:href="#LButton_10" <! Specifies which layer to apply the transformation to -->
id="_anim_l30" <! ID for the transformation, each must have a different number -->
attributeName="transform"
type="translate" <! What kind of transformation, you can rotate, scale, skewX, skewY and translate -->
to="146,56" <! how much on each axis it will have to translate the layer -->
dur="0.5s" <! duration of the transformation -->
fill="freeze"
begin="TButton_2.focusin" <! when to do the transformation--> />

Now this one says that when the button2 has the focus, the layre LButton_10 will translate.
Beware, the "to=" doesn't say where it is going, it says how much to translate the layer on X & Y.
So it all starts from the start position you defined in Composer.

Now you need a line for each button & each "focusing".
That mean that if you have 6 buttons, you'll need 5 * 6 lines = 30. (not 36 because when it start and button 1 has the focus, the buttons stays where they are, it's only when you're focusing on one of the other 5 that you need the buttons to move) so you'll need to say where each button needs to go depending on which one has the focus.

You'll may need a calculator because each time, the translation is based on the start position, not the last as I thought at first.

If you need anything more about this or if I didn't manage to make myself very clear, don't hesitate to let me know