loading external images in a spiral pattern

[hondo311]

Hi,

I modified a 3D spinning carousel that loads images by an external XML file to give it a 2D circle look. Then I took out all the code for the movement so it would remain stationary, but kept the code to adjust radius etc.

This is great, except now the client would like the icons to be displayed in a spiral instead of a circle. I'm not the greatest when it comes to math, and would appreciate any help you guys could give me in order to get this to work.

What do I need to change or add etc in order to get the images to display in a spiral (say starting in the middle and spiraling out clockwise)? Do I need to add more math in the sin and cos parts? or maybe there is a much simpler way to do this?

I've attached a zip file with the .fla, .swf, .xml, and image file.

In the flash file, I have a 600x600 pixel stage with this code on the first frame:




var numOfItems:Number;
var radiusX:Number = 200;
var radiusY:Number = 200;
var centerX:Number = Stage.width / 1.85;
var centerY:Number = Stage.height / 1.62;
var home:MovieClip = this;
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.load("icons.xml");

xml.onLoad = function()
{
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = home.attachMovie("item","item"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.content = nodes[i].attributes.content;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.r.inner.loadMovie(nodes[i].attributes.image);
}
}

function mover()
{
this._x = Math.cos(this.angle) * radiusX + centerX;
this._y = Math.sin(this.angle) * radiusY + centerY;
this._xscale = this._yscale = 100;
}



Thank you and I appreciate you help!

Hondo311

[countersweet]

var numOfItems:Number;
var radiusX:Number = 100; //i set it to lower number, because the spiral will grow
var radiusY:Number = 100;
var centerX:Number = Stage.width / 1.85;
var centerY:Number = Stage.height / 1.62;
var home:MovieClip = this;
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.load("icons.xml");

xml.onLoad = function()
{
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
for(var i=0;i<numOfItems;i++)
{
var t = home.attachMovie("item","item"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfItems);
t.multiplier = 1+i*0.15; //change the number 0.15 to any number you want, depending on do you want the spiral to be big
t.onEnterFrame = mover;
t.content = nodes[i].attributes.content;
t.icon.inner.loadMovie(nodes[i].attributes.image);
t.r.inner.loadMovie(nodes[i].attributes.image);
}
}

function mover()
{
this._x = Math.cos(this.angle) * radiusX*this.multiplier + centerX;
this._y = Math.sin(this.angle) * radiusY*this.multiplier + centerY;
this._xscale = this._yscale = 100;
}

[hondo311]

Countersweet,

This is great . . . thanks!!

Is there a way to keep the distance between the images the same in the spiral (especially in the center of the spiral)? I noticed in your code it makes the images slowly increase in distance between the images?

Thanks for your help!

Hondo311

[countersweet]

yeah it just slowly increases the distance

by the way, what do you mean "keep the same distance"? because they are away in the same distance, or did i misunderstand your question?

[hondo311]

yeah it just slowly increases the distance

by the way, what do you mean "keep the same distance"? because they are away in the same distance, or did i misunderstand your question?


You are right, they are the same distance . . . let me ask in a different way:

1) How do I increase the distance between the images?

2) How can I make it so the spiral does not slowly increases the distance?

Thanks!

Hondo311

[countersweet]

1) you increase the distance by modifying the number at the end of the multiplier, where i commented it

2) i still don't understand what you mean, spiral is a pattern that does increase the distance continuously, otherwise you would be looking for circle O_o

[hondo311]

1) you increase the distance by modifying the number at the end of the multiplier, where i commented it

2) i still don't understand what you mean, spiral is a pattern that does increase the distance continuously, otherwise you would be looking for circle O_o

Thanks, I will adjust the number you commented. Also, is there a way to make this spiral start from the outside and spiral in, instead of from the middle spiraling out? I ask this because the spiral needs to fit in a certain size background image, and the client will add more images on his own. This way the spiral won't go outside the background image.

Thanks for your work on this!

Hondo311

[countersweet]

yes,

t.multiplier = 1-i*0.15; //where 15 can be modified to something else
come on, try thinking about it a bit, your math can't be THAT bad. my 14 years old sister handles this=P


but since you say there will be theoretically unlimited amount of the pictures, you will have to modify that 0.15 number to something that relates to number of pictures

for example

t.multiplier = 1-i*(1/numberOfPics);

haven't tried it, try playing with it though