This content has been marked as final. Show 17 replies
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?
Of course you did do the second part of the tutorial where he ads a "perspective" variable, right?
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.
kglad, the line you changed:
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?
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.
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.
In part II he first defines a variable
perspective:Number=150 \\Or what you want
Then puts it in s like this:
var s = (this._y+perspective) /(centerY+radiusY+perspective);
Actually I'm not sure he defines it as a variable, that is just what I did.
var s = this._y /(centerY+radiusY);
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:
var s = (centerY-radiusY)/this._y;
we would reverse the above situation. Same with the perspective var:
var s = (centerY-radiusY-perspective)/(this._y-perspective);
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.
if you want precise control over the scaling use:
Usage of cos shifts the centerpoint to the right? The biggest icons are now at centerX+radiusX.
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:
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.
>>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.
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.
No, I shouldn't have mentioned the word centerpoint at all. I just should have said 'bigger icons on the left and right side'.
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.
>>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.