CONTENTS OTHER MATERIAL |
Example Finally, well use some of this material to put together a simple example, using basic geometry. Just for fun, well reinvent the wheela layer that appears to roll when you drag it. First, lets take inventory of what we have, and what well need. We know that well apply our expression to the rotation parameter of our wheel, and that well need to end up with a single scalar value. So we can start by adding an expression to the rotation parameter. We also know that we need to start with the layers position, since a change in position will need to produce a change in its rotation. For our example, well assume the wheel is traveling horizontally, so well only need: position[0] Common sense tells us that when the wheel has moved a distance equal to its circumference, the wheel will have rolled one complete revolution, and the expression should produce 360°. Well worry about these specifics in a moment. For now, its only important to recognize that how large the wheel is will determine how far it moves in a single revolution. So we need to know how large our wheel is. Assuming our wheel graphic is exactly as large as its layer (no blank space around it), we can just use: width; But we cant just use width directly. Instead, we need to use the width to figure out the wheels circumferencehow long its edge is. From basic geometry, we know that circumference is equal to diameter times Pi. JavaScript helpfully gives us an accurate value for Pi in "Math.Pi." So we can start be defining a variable for circumference: circumference=width*Math.PI; If the wheel is 100 pixels wide, its circumference will be about 314 pixels. But what if we scale the wheel? To be accurate, we should adjust for scale when calculating the circumference: circumference=width*( scale[0]/100)*Math.PI; Weve divided scale[0] by 100 because the scale attribute returns percentage values. Here, we need scale represented as a decimal fraction, so that normal scale = 1 (instead of 100). Next, well define a variable to represent the distance the wheel has traveled. In our example, were going to assume that the wheel starts exactly at the left edge of the comp, and so we can use: distance=position[0]; Finally, we can put together the core of our expression: (distance/circumference)*360; We simply divide the distance traveled by the circumference to find out how many circumferences weve traveled. Multiplying by 360 expresses the result in degrees (since 1 circumference equals 360°, as mentioned earlier above). All together, the final expression is: circumference=width*( scale[0]/100)*Math.PI; distance=position[0]; (distance/circumference)*360 Now, as you drag your layer around, it will appear to roll perfectly, without slipping. This may not seem like a big dealafter all, we couldve just done the math ourselves and set rotation keyframesbut this expression will work even if the layer is accelerating or slowing down. Thats pretty tough to do convincingly by hand. Try applying this to individual text characters, or to objects that dont normally roll around.
|
Entire contents © 2001 JJ Gifford.