Program: SWiSHmax
Build Date: 2004.08.12+
Introduction
Chances are, you've seen this effect somewhere in your travels. Perhaps you put your mouse on a button and the button grew, or maybe you've pressed a button and watched an image grow. That, in itself, is not that difficult. This tutorial shows you how to add a little 'bounce' to the effect.
Bouncing Buttons
For starters, I want to say that I'm not going to go into an in-depth explanation of the mathematics behind the effect. I've tried to make the script easy enough to use and modify so that you don't need to worry about the 'whys' and 'hows' of it.
First, create a normal button -- this can be a regular object that will be used as a button or a button object itself (if you prefer to have animated button states).
Next, select the button in the outline panel and use Modify menu | Grouping | Group as Sprite. Then, on the Sprite panel, give this sprite a name.
You should have a basic button inside a name sprite, as shown below:
Next, select the Button object inside the Sprite (press the "+" sign next to the Sprite in the Outline panel to open it). Then, open the Script panel and switch to Expert mode (if the Script panel shows 'Guided' mode, click on that button and select Expert instead -- this allows you to easily paste the script I've provided below).
In the Script panel, apply the following code to the button:
on (rollOver) {
gotoAndPlay("begin");
// ---------------------------------------------------
// Define the ending scale values for the object
// ---------------------------------------------------
targetXscale = 115;
targetYscale = 115;
}
on (rollOut,releaseOutside) {
gotoAndPlay("begin");
// ---------------------------------------------------
// Define the 'back to normal' values for the object
// ---------------------------------------------------
targetXscale = 100;
targetYscale = 100;
} |
The button (and Script panel) should appear similar to the image below: 
The button itself simply defines the scale values for the effect: onRollover makes the object grow to 115% scale; onRollout returns it to normal 100% scale. You can adjust these values easily to get the exact size you need.
Now we add the meat of the code by selecting the Sprite in the Outline panel and adding the following code into the Script panel:
onLoad () {
// ---------------------------------------------------
// maxLoops helps keep CPU usage to a minimum
// you can change this depending on the amount of
// easing and bounce you use, but a maxLoops value
// of 100 should be plenty.
// The benefit of doing this rather than using
// onEnterFrame, is so that you can turn the effect
// off after a certain period of time (maxLoops)
// there is no way to do that with onEnterFrame
// (at least not with SWF4 or SWF5 compatible script)
// ---------------------------------------------------
maxLoops = 100;
xBounce = 0;
yBounce = 0;
// ---------------------------------------------------
// Adjust the values of 'easing' and 'bounce' to get
// different variations of the effect
// keep the values somewhere between .01 and .99
// ---------------------------------------------------
easing = .3;
bounce = .8;
// ---------------------------------------------------
// Change the target to the path of the object
// that you want to apply the effect to (make sure
// that the path is relative to this sprite
// ---------------------------------------------------
target = "this";
}
onFrame (1) {
stop();
}
onFrame (2) {
setLabel("begin");
loop = 1;
xBounce = ((targetXscale - eval(target)._xscale) * easing) + (xBounce * bounce);
yBounce = ((targetYscale - eval(target)._yscale) * easing) + (yBounce * bounce);
eval(target)._xscale += xBounce;
eval(target)._yscale += yBounce;
if (loop >= maxLoops) {
eval(target)._xscale = targetXscale;
eval(target)._yscale = targetYscale;
loop = 1;
gotoAndStop(1);
} else {
loop++;
}
}
onFrame (3) {
prevFrameAndPlay();
}
|
Again, I've tried to make the code easy to use. You should only have to go in and adjust the values of 'easing' and 'bounce' and make sure that you specify the correct 'target' path to the object you want to apply this effect to. I added comments, so hopefully that will help explain a bit. For this simple example, you should be able to go ahead and preview the effect by switching to the Layout panel and pressing the 'Play' button in the control toolbar (this effect does work when viewed within SWiSHmax; however, you need to make sure that you set the Export SWF version to SWF5 or higher on the Export panel as shown below):
One important piece of information to keep in mind, is that the object will scale around its Anchor Point (defined on the Transform panel). If you have the Anchor Point set to 'Top-Left', the object will scale down and to the right (it stays fixed at the anchor point). In most cases, you'd probably want to set the Anchor Point to 'Center' - but feel free to use any anchor that gives the desired effect).
Instead of having the button itself change size, let's change the code a bit and have it control a different object in the movie.
Insert an image file into your project. It is important to name this object on the Shape panel and set the 'Target' option (this is necessary). 
Now, go back in to the script for the button Sprite (as shown below) and edit the 'target' value. Be sure that you define the full path to the image relative to the Sprite. You can use an absolute path (such as "_root.image1"), but I would recommend using relative paths (ie, "_parent.image1") as this helps increase compatibility. 
Again, you can switch back to the Layout panel and preview the effect by pressing 'Play'.
That's about it! You now have a self-contained script that you can easily apply to any object in your movie. Please play around with the values of 'easing' and 'bounce' to get different variations of the effect (I've found that when you increase one value - it works well to decrease the other by the same amount ... this produces smooth, subtle bounce to ridged, jumpy bouncing effects).
|
