Create a Flash Rollover Button with KoolMoves

I discovered KoolMoves 3 years ago by accident. I was looking for a cheaper alternative for 3D Studio Max when i bumped into it in one forum for graphic artists. I though it was a 3D software because the person who was raving about it talked about a 3d animation lesson with KoolMoves. But when i read the whole tutorial it came out that he was actually talking about how to create a “psuedo 3D” animation with this small but very powerful flash authoring software called KoolMoves. I tried the software and fell in love with it because it is easy to use yet very powerful.

Here’s a little tutorial that would get you started with KoolMoves.

In this tutorial we will learn how to create the most important navigational tool, the button. Rollover effect is what makes a button a good button so we will learn how to make it happen in our button.

This basic tutorial will define the steps necessary to create a roll-over effect using a rectangular button with a gradient fill. We start by drawing a rectangle. Choose from the toolbar the rounded rectangular shape tool (click and hold the button to show the other buttons nested below the first one) as shown in the picture below:

Drag the shape on the stage as shown below :

The shape we create is white with black outline by default. Next we apply a gradient fill on the shape.To do this double-click (or right-click and choose Properties) on the shape and click twice (not double-click) on the color fill button in the popup that shows as shown in the picture below.

The Shape Fill box will pop up. Choose Gradient color and change the orientation of the gradient from vertical to horizontal by clicking the Rotate Gradient button as shown in the image below:

A “rotate” of 90 degrees will do to turn the vertical gradient to horizontal.

Click on the Preview button to see the effect on the shape we have on the stage.

You may adjust the sliders to adjust the gradient, you can see it on the shape as you move the slider. You may change the color of the gradient by clicking on one of the sliders and choosing a color from the color ball.

The darker gradient color could also be adjusted through the other slider.

The rounded rectangle is made into a button by 1) selecting Shapes > Convert to Button or 2) right-clicking then select Convert to Button or 3) pressing Button icon (Convert to Button sub menu selection) on Tools toolbar or 4) selecting Is a Button option in Properties popup.

Then the button’s response (its actions) to mouse events is defined.
To achive a simple roll-over effect with no other action, select Mouse Event or select none of the events. If we want an action to occur when the button is pressed, we would select Get URL, Go To Frame or whatever the action is. We can have as many actions occur responding to mouse events as we like. But to achieve a simple roll-over effect which is our current task, we only need to select Mouse Effect Only.

We check Roll Over. If we had a down state defined, we could check Release and/or Press as well.

After pressing OK, we are returned to the prior popup and see the action we just defined in the list of button actions. By double-clicking on it we can edit the action. By selecting “+” we can add another action. But we won’t add another action as of now.

Now we are ready to define the over state of the button (the button’s appearance when the mouse is over the button). We press Over at the top of the properties popup. Because the over state has not been defined, we are asked if we want to create the over state from another state we have created or if we want to draw it ourselves. We select to copy it from the up state (the button’s appearance when the mouse is not over the button) which is displayed to the left in a dimmed silhouette to provide us with positioning information. If we had selected the last option to draw it ourselves, we would be free to draw any text or non-text shape. If we position the over state with an offset relative to the up state, when the mouse goes over the button while the animation is playing the button will shift in position reflecting that offset.

To make the button’s over state different than the up state, we change the gradient colors of the button’s over state. We press the Up button at the top of the properties popup to exit the over state and we are ready to test the roll-over effect

The next step is for us to choose Play in the Menu bar and choose “Play in standalone player” to test the button. That’s it. You may export it as .swf file by File>Export Movie> As SWF..

More lessons about KoolMoves in the future.