help understanding script for rotating objects

[donkeykong]

Hi all
would some help me with this, I am trying to understand what part of AS3 script says loop through(create a continues 360 loop of objects) the images from an XML file, does this make any sense.

in my script I have this


for(var i:int = 0; i < images.length(); i++)

is this the part that says loop the images/objects
this is a little more to the script including the above to maybe understand better?


private function onXMLComplete(event:Event):void
{
// Create an XML Object from loaded data
var data:XML = new XML(xmlLoader.data);

// Now we can parse it
var images:XMLList = data.image;

for(var i:int = 0; i < images.length(); i++) <<<<<<<<FROM ABOVE /// {
// Get info from XML node
var imageName:String = images[i].@name;
var imagePath:String = images[i].@path;
var titles:String = images[i].@title;
var texts:String = images[i].@text;

[nOobCrafter]

var imageName:String = images[i].@name; // image name
var imagePath:String = images[i].@path; // path to image for load...
after loading u can rotate your images or other objects.... or what are u want?)

[donkeykong]

hi there]

thanks for the reply, not sure what you mean, sorry am a newbie so need to take little steps.

the problem I have is my menu only rotates around to the first and the last image/object on the menu and then stops, I am trying to just make it a complete 360 rotation and trying to find out what bit of script does this???

is this making any sense????:!:

[Glantucan]

Hi donkeykong,

You didn't include any code talking about rotation. The loop you are talking about just reads the list of images getting some information from the xml object. It doesn't even add the images to the display list.
You should includo more info if you want some help.

I am new too in the as3 OOP world and get frustrated every day, but feel so good on every little step ahead.

So, keep trying! Read the tutorials, ask your questions(giving more details, please), ... have faith! It's worth it.
Cheer up!

[donkeykong]

Hi there

many thanks for you thoughts, my head is killing trying to understand this, yes frustration is a killer!

thanks for your positive look on it, it does help, kinda get down when you spend a week looking at some code not progressing very far.

I didn't paste much code as I got told off by some other guy in a different forum, that I would up set people if I just pasted all my code. I am up for sharing, every step of the way of developing this menu I have been posting how far I have got and what I did, and what does what and supplying a download link so people can share the menu

ok, if you would like to see my menu then you can down load it from here;
http://art.clubworldgroup.com/menu/example_01.zip

if you can help turn it into a 360 rotation, or shine a light as to where i am going wrong then please do.

again, many thanks for your positive outlook, it does help!:hugegrin:

[Glantucan]

Hey,
I think I short of found out where's the problem:
Every time you click a menu item CircleMenu positionItems() method gets called at the end.
In there you reposition every menu item using this:

angle = limit(offset * _angleSpacing, -180, 180) * toRADIANS;wich calls:


public static function limit( value:Number, min:Number, max:Number = NaN ):Number
{
if ( isNaN( max ) )
{
max = min;
min = 0;
}

if ( value < min ) value = min;
if ( value > max ) value = max;

return value;
}And... I don't know how to explain (English is not my mother language), but you are not rotating the wheel, you rotate the elements inside the wheel. And I don't thing that's necessary. I've been trying to figure out how do you decide which item has alpha=0 without succeed. Why do you call positionItems() so many times? ...Hmm!, I get lost. Maybe you could try a different , easier I think, approach:

What I would do after positioning all items the first time is just to rotate the wheel (the circleMenu instance) instead of rotating the items (which is more like rotating de radii of the whell while keeping the wheel itself at rest:cantlook:).

Then you have to recalculate what items are visible (only from currentItem -visibleItems/2 to currentItem + visibleItems/2) and set their visible property to false.

You could add a couple of methods for that, and call them from currentIndex setter in CircleMenu. I thinkg that would not affect the rest of the code unless I'm missing something.

Hope this helps.
Pretty interesting code, by the way :)

[donkeykong]

Hi Glantucan

thanks for your help, sorry to be a newbie but can you explain how this looks with code and where it should go as I am getting a little lost? aaaargggggggggghhhhhhhhhhhh!!!!:hair:

[donkeykong]

ok breakdown


1.) you explain about rotating the wheel and not the items, please exlpain how to do this with code, so I can see what you mean???


if we can get this bit going then I can move onto the second

[donkeykong]

been playing with these values


angle = limit(offset * _angleSpacing, -180, 180) * toRADIANS;

as you say, yes they only affect/position the items on the menu circlemenu. OK, so if thats the case then what is rotating the wheel/circlemenu? if i can understand/find this,then maybe i can adjust from there???

what I don't understand is when the menu rotates you will notice that there is always a fixed square/item on the left side where all the other items/images from the menu appear and/or disappear.....


Question: what is causing this?????

[donkeykong]

on the script files main.as around lines 56 to 68 there is this



for(var i:int = 0; i < images.length(); i++)


I was thinking that this is what starts the loop but again I do not understand what is causing the fixed item/image??

[donkeykong]

ok I found this menu which rotates item around on a 360 wheel trying to see if I can use the same script on my menu,

link to example: http://art.clubworldgroup.com/menu/Rotating_menu_AS3.zip

I have highlighted in blue what creates the loop of items




//Save the center coordinates of the stage
var centerX:Number=stage.stageWidth/2;
var centerY:Number=stage.stageHeight/2;



//The number of items we will have (feel free to change!)
var NUMBER_OF_ITEMS:uint=15;

//Radius of the menu circle (horizontal and vertical)
var radiusX:Number=200;
var radiusY:Number=200;


//Angle difference between the items (in radians)
var angleDifference:Number = Math.PI * (360 / NUMBER_OF_ITEMS) / 180;

//How fast a single circle moves (we calculate the speed
//according to the mouse position later on...)
var angleSpeed:Number=0;

//Scaling speed of a single circle
var scaleSpeed:Number=0.0002;

//This vector holds all the items
//(this could also be an array...)
var itemVector:Vector.<Item>=new Vector.<Item>;

//This loop creates the items and positions them
//on the stage
for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) {

//Create a new menu item
var item:Item = new Item();

//Get the angle for the item (we space the items evenly)
var startingAngle:Number=angleDifference*i;

//Set the x and y coordinates
item.x=centerX+radiusX*Math.cos(startingAngle);
item.y=centerY+radiusY*Math.sin(startingAngle);

//Save the starting angle of the item.
//(We have declared the Item class to be dymamic. Therefore,
//we can create new properties dynamically.)
item.angle=startingAngle;

//Add an item number to the item's text field
item.itemText.text=i.toString();

//Allow no mouse children
item.mouseChildren=false;

//Add the item to the vector
itemVector.push(item);

//Add the item to the stage
addChild(item);
}


//We use ENTER_FRAME to animate the items
addEventListener(Event.ENTER_FRAME, enterFrameHandler);

//This function is called in each frame
function enterFrameHandler(e:Event):void {

//Calculate the angle speed according to mouse position
angleSpeed = (mouseY - centerY) / 5000;

//Loop through the vector
for (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) {

//Save the item to a local variable
var item:Item=itemVector[i];

//Update the angle
item.angle+=angleSpeed;

//Set the new coordinates
item.x=centerX+radiusX*Math.sin(item.angle);
item.y=centerY+radiusY*Math.cos(item.angle);

//Calculate the vertical distance from centerY to the item
var dx:Number=centerX-item.x;

//Scale the item according to vertical distance
//item.scaleX = (dx / radiusX);

//If we are above centerY, double the y scale
if (item.x<centerX) {
item.scaleX*=1;
}

//Set the x scale to be the same as y scale
item.scaleY=item.scaleX;

//Adjust the alpha according to y scale
item.alpha=item.scaleX+1.9;

}
}

[donkeykong]

this is on my script, what I understand created the loop


for(var i:int = 0; i < images.length(); i++)


this is on the menu I have just found


or (var i:uint = 0; i < NUMBER_OF_ITEMS; i++) {

and


var angleDifference:Number = Math.PI * (360 / NUMBER_OF_ITEMS) / 180;

this creates the 360 loop from the number of items you add in, but on my menu the number is driven by how many is in the XML file.....

Question: so how do we then loop the total from the XML file


aaaaarrrrrrrrrrrrrrrgghhhhh:hurt:

[donkeykong]

Hi Glantucan

yes I think what you are saying might work, I have been changing the values in the circlemenu.as at the very bottom lines 403 - 441

this section


public static function limit( value:Number, min:Number, max:Number = NaN ):Number
{
if ( isNaN( max ) )
{
max = min;
min = 0;
}

if ( value < min ) value = min;
if ( value > max ) value = max;

return value;

if you comment out the values


// if ( value < min ) value = min;
//if ( value > max ) value = max;

you will see now that the fixed item is no longer there and it creates a full circle rotation with a little bit of a gab, but the problem is what I think you were saying. the images reposition every time and due to this the images on the wheel do a little rotate speed on their axis...

would you help me sort this, I think we are nearly there:disco:

[Glantucan]

Well
I would like to help more, because it also helps me understand things, but right now I am finishing a project. Deadline is on monday and I'm running out of time. Hope you understand.

Will see next week.

Anyway I see you got some ideas, but I think it's simpler than that (with simple meaning less code not easier)

By the way, where did you get this code from (the first one)? Just curious.

Some tips:
To rotate the wheel you have to change the rotation property of its instance in Main.as. Something like:


circlemenu.rotation= circlemenu.rotation +angleChange;

where angleChange could be positive or negative dependeing on what item you clicked. These would change angle inmediately, without easing. To ease the movemente you should use the TweenLite class


newAngle = circlemenu.rotation + angleChange;
TweenLite.to( circlemenu, 0.5, { rotation:newAngle , ease:Expo.easeOut } );

In order to do that you should create a new method in the Main class (call it rotateThewheel, for example) and pass it the angleChange which you have to precalculate somwhere before. You'll have also to include at the top of the Main.as for the tweening to work:


import gs.easing.Expo;
import gs.TweenLite;
The second part(hiding and showing items) is another story.
Sorry I can't help yyou more right now
Cheers

[donkeykong]

hi Glantucan

thanks for your help, I completely understand, I thank you for your input, I think you are right with what you are saying, yes I have been playing around this morning with it, as you can see from all my thoughts spilled out over this thread.

It would be great if you could help next week, see if we can sort a solution for this problem. anyway good luck with your project, hope we can catch up next week.

If I find any other solutions I will post for reference

many thanks, I very much appreciate your input and help....=)

[donkeykong]

Hi Glantucan

hope all is well, hope you successfully got your project compeleted. Where did I get which code, which are you refering to??

seem to have come up with something for the crazy spinning of the items, it was the tweening that was causing the spinning effect. at liine 425, circlemenu.as change;


TweenLite.to( item, 0.5, { x:tX, y:tY, rotation:tR, scaleX:tS, scaleY:tS, alpha:tA, ease:Expo.easeOut } );

to these two lines:


TweenLite.to( item, 0.5, { x:tX, y:tY, scaleX:tS, scaleY:tS, alpha:tA, ease:Expo.easeOut } );
item.rotation = tR;

this stops the twirl spinny thing.:hugegrin:

the other issue I see now is that when you keep rotating around, after the first spin the activeItem stops scaling to a larger size......not sure what this is, any ideas????


not sure if your around today, but maybe we can pick up at some point this week?

[donkeykong]

I have been playing around with the values at line 31 Main.as


this is what I have got so far changed from;





circleMenu = new CircleMenu( 340, 88, 12);
circleMenu.x = 200;
circleMenu.y = 300;
addChildAt( circleMenu, 0 );



to



circleMenu = new CircleMenu(620, 18, 25);
circleMenu.x = 30;
circleMenu.y = 300;
addChildAt( circleMenu, 0 );

but just can't seem to get the curve of the radius/wheel. I have attached 2 example jpgs of how it looks now and what trying to make look like

[Glantucan]

Sorry, man. I still can't help you yet. My deadline got delayed. And It's my fault. I can't get my code to work properly y I think I'll need a couple of days more.

Good lluck in the meantime

[donkeykong]

koolio dude no probs

hope you get your project sorted

many thanks:hugegrin: