17 Replies Latest reply on Jan 6, 2007 9:29 AM by kglad

# rotating images

Hello,

I went to gotoandlearn.com and watched the tutorial on the carousel. It was very helpful and I'm using the code to create something similar, but I would like to tweak one thing and add another feautre, but I'm having a hard time figuring them out.

Currently the images that go to the back are above the images in the front I would like to see the images in the back below the images in the front. Also I would like to be able to have the images scale bigger as the come to the front, while the images in the back remain small, so the image that is front and center is the largest and the images to the left and right are the second largest and so forth. I'm assuming I have to do something with the angle poistion, but I'm not sure excatly what and I'm running out of time that this needs to be completed by. Any help would be greatly appreciated.
I've included the code I'm using below.

var numOfMags:Number = 17;
var centerX:Number = Stage.width / 2;
var centerY:Number = Stage.height / 2;
var speed:Number = 0.0007;

for(var i=0;i<numOfMags;i++)
{
var t = this.attachMovie("mag"+i,"m"+i,i+1);
t.angle = i * ((Math.PI*2)/numOfMags);
t.onEnterFrame = mover;
}

function mover()
{
this._x = Math.cos(this.angle) * radiusX + centerX -58;
this._y = Math.sin(this.angle) * radiusY + centerY -60;
this._xscale = this._yscale = s*100;
this.angle += this._parent.speed;
this.swapDepths(Math.round(this._xscale) + 100);
}

//move logo forward so magazines look like they are rotating around it.
logo.swapDepths(150);

Thanks,
KG
try:

• ###### 2. Re: rotating images
Putting the negative in front of the sin or cos cause the rotation to go counter clockwise vs clockwise and putting the negative in front of the s*100 causes the "circle" of images to be upside down. Any other suggestions?
• ###### 3. Re: rotating images
try:

• ###### 4. Re: rotating images
Of course you did do the second part of the tutorial where he ads a "perspective" variable, right?
• ###### 5. Re: rotating images
Yes, I did watch it. Maybe I need to watch it again, but I don't want to use the mouse function. The images are going to rotate on their own. Thanks, kglad I briefly took a look at what you provided and it looks like it should work.

KG
• ###### 6. Re: rotating images
var s = .5*(1-Math.sin(this.angle));
now scales the clips that are 'in front - in the middle' down to zero. Is there a solution to have more control over the scaling?
• ###### 7. Re: rotating images
yes, you can define s (and therefore the scaling factor) to be anything you want.

i used a linear equation (2 unknowns) using the knowledge that Math.sin(this.angle) will vary from -1 to 1 as this.angle varies. i solved for the unknowns wanting s to vary from 1 to 0, resp. because that seemed close to what the original author should have done given the original effect.

but, you can set-up a linear equation to have s vary from any 2 values as the independent variable (Math.sin(this.angle)) varies from -1 to 1.
• ###### 8. Re: rotating images
Thanks. Will experiment with that.
BTW. Experimenting with Math.sin and Math.cos in mover() can create great results like have the carousel look like a pretzel! Or having 2 or 3 smaller carousels next to each other. Having the carousel in a slanted angle. Nice to play with it.
• ###### 9. Re: rotating images
In part II he first defines a variable

perspective:Number=150 \\Or what you want

Then puts it in s like this:

Actually I'm not sure he defines it as a variable, that is just what I did.
• ###### 10. rotating images
This line calculates the distance of an icon based on its y compared to the front most point of the oval.
Consequently an icon 'in front' with a y of 375 (using the numbers from the tutorial) ends up with a scale of 100. And an icon in the back with a _y of 225 gets a scale of approx. 60.
So if we would simply use:
we would reverse the above situation. Same with the perspective var:
which gives more control over the scaling.
Experimenting with a perspective of 220 gives a result where the middle icon zooms in quickly where the other icons seem relatively small so I feel that this is still a somewhat crude way to define the scale. I'm going to try to measure the distance between points to try to get a better grip on the scaling. But a perspective of 150 gives a nice enough result I think.
• ###### 11. Re: rotating images
if you want precise control over the scaling use:

• ###### 12. Re: rotating images
Usage of cos shifts the centerpoint to the right? The biggest icons are now at centerX+radiusX.
• ###### 13. Re: rotating images
what you're doing with that code, before any scaling is done, is arranging your movieclips in an ellipse on stage. you won't understand how that code works and anything going forward until you understand the previous sentence. it's the key to understanding the code. you might eliminate the scaling and just play with the rest of the code until you're comfortable that you're doing nothing more than displaying the results of using the parametric equations for an ellipse:

x= a*Math.cos(theta);
y=b*Math.sin(theta);

now, if you scale based on the _y property only of those movieclips (ie, Math.sin(this.angle) ), the closer the movieclip is to the top of the stage the more (or less) scaling is done and the closer to the bottom of the starge the less (or more) scaling is done. the scaling is usually a linear equation using the movieclips _y property as the independent variable and gives the impression of depth. so, using the _y property makes it appear that movieclips near the top of the stage appear larger (closer) than those at the bottom (or vice-versa).

ie, playing with scaling based on the movieclip's _y property, makes it appear that your point of view (relative to the ellipse) is moving up/down.

if you scale based on the _x property of the movieclip (Math.cos(this.angle) ), then movieclips closer to stage right appear larger (or closer) than those to the left (or vice-versa). this will give the impression of a carousel that's moving from deep left to close right (or vice-versa).

ie, playing with scaling based on the movieclip's _x property, makes it appear that your point of view (relative to the ellipse) is moving left/right.

and you can generalize your starting ellipse by putting it on an angle with the following code. then playing with the parameters should give you all possible carousel orientations/points-of-view.
• ###### 14. rotating images
>>what you're doing with that code, before any scaling is done, is arranging your movieclips in an ellipse on stage.
Fully understand that. Even without any comprehension of sin and cos the indications _x and _y would indicate that.

The line:
s = a*Math.sin(this.angle)+b*Math.cos(this.angle)+c;

with sin=0 and cos=1 or -1 the icons on the left and right side will be bigger. And experimenting with a and b could result in the icons just being bigger on the right side (a=.5 b=1 c=1). Agree? And if c = 0 those icons will be mirrored. With adding c you need to make sure s is a positive number.

That was basically what I was trying to say (well, not the part about c, just the cos part). So, probably I should have said:
Usage of cos shifts the visual centerpoint to the right with certain values for a b and c?
Not the actual centerpoint, the 'what appears to be' centerpoint.

Edit:
No, I shouldn't have mentioned the word centerpoint at all. I just should have said 'bigger icons on the left and right side'.
• ###### 15. Re: rotating images
using c to ensure s is non-negative is only desirable if you want a ferris wheel effect where the "front" of the movieclips is always facing the viewer.

for a more realistic carousel effect (where it appears you are viewing the back of the movieclips), allowing s to be negative is desirable.
• ###### 16. Re: rotating images
>>for a more realistic carousel effect (where it appears you are viewing the back of the movieclips), allowing s to be negative is desirable.

Well, obviously that never occured to me! But, the icons get mirrored over _x, _y or both (I don't use the shortcut on setting the x and y scale but set them seperately). So, viewing the back would require a certain type of asset I guess which 'trick' the eye. Must experiment with that. Would certainly look more realistic, I agree.
I used Math.abs to solve the negative value for _y and that 'expands' the use of your code even further. With the last code you posted you really have full control over the carousel (use of 'rotation' really gives nice effects) Great! In fact, there are so many possibilities that I will need some time to fully comprehend the power of the code.

Now I'm thinking about how to make this user friendly and provide setter methods for all values in an API (must turn this into a class based app). And I'm going to try and animate that rotation factor (and _x) to move the carousel as a whole.

Thanks again for the code and explanation! Greatly appreciated.
• ###### 17. Re: rotating images
you're welcome.