This tutorial will show how to make it so that a rollover effect in Flash
with a clear gif over it will still work in FF and IE as it is intended to.
This tutorial will only work in Flash CS3 using action script 3.0
Preview
In the preview, I have left the image border so that you can see that it is there and the rollover effect is indeed working. And I have only set the invisible button's alpha to 50% so you can see it partially as well.
To start, create your button and give it an instance name.
For this example, I am giving the button an instance name of
button_mc.
Lock this layer and on a new layer
underneath the button layer, create a new movie clip that is larger then the
button_mc movie clip.
Give this movie clip an instance name. For this example, I have give the button an instance name of
buttonOff_mc. Then in the properties panel, make the Alpha for this button 0% so it is invisible.
Now go into the
button_mc movie clip and create your rollOver and rollOut tweens. For this example, I just made the button fade in and out while the mouse is over the button and return to its off state when it is rolled off.
We are now done with setting up the button in Flash. So now lock both layers and create a new layer, lock it, and name it Actions.
In the first frame on the actions layer, press F9 to open up the actions panel.
ActionScript
function hoverIE (evt:MouseEvent):void {
button_mc.gotoAndPlay(2);
}
button_mc.addEventListener(MouseEvent.ROLL_OUT, hoverIE);
function hoverFF (evt:MouseEvent):void {
button_mc.gotoAndPlay(2);
}
button_mc.addEventListener(MouseEvent.ROLL_OVER, hoverFF);
function off (evt:MouseEvent):void {
button_mc.gotoAndStop(1);
}
buttonOff_mc.addEventListener(MouseEvent.ROLL_OVER, off);
Your actions to make the rollover effect can vary rather then just gotoAndStop(1); or gotoAndPlay(2);
I am just going to give a brief summary of this action script. For a detail description of the onEventListener property, please read
this tutorial.
function hoverIE (evt:MouseEvent):void {
button_mc.gotoAndPlay(2);
}
button_mc.addEventListener(MouseEvent.ROLL_OUT, hoverIE);
This sets up the function and the onEventListener property for when the mouse moves onto the Flash button and then off again onto the clear .gif. This is so the rollover will work in IE.
function hoverFF (evt:MouseEvent):void {
button_mc.gotoAndPlay(2);
}
button_mc.addEventListener(MouseEvent.ROLL_OVER, hoverFF);
This sets up the function and the onEventListener property for when the mouse moves onto the Flash button. This is so the rollover will work in FF.
function off (evt:MouseEvent):void {
button_mc.gotoAndStop(1);
}
buttonOff_mc.addEventListener(MouseEvent.ROLL_OVER, off);
This sets up the function and the onEventListener property for when the mouse moves off the visible button and onto the invisible button. This is so the rollout effect will work in FF and IE.
Now to set up the HTML...
In your profile, position the flash file in your div just as your normally would. Then place the .gif's over your flash file as your normally would.
**Notes**
To make sure the rollover effect works right even for people that move the mouse around quickly, you should:
-Make sure that the .gif is about 2/3 to 1/2 the size of the button itself and centered over the flash button.
-The invisible button should be about twice the size as the visible button.
And to make sure that the rollover effect looks right to those people that move the mouse slowly, you should either give the rollover action a half second or so delay or you should just insert a few blank key frames before the rollover tween begins.
rollOver.fla
Thank you for reading this tutorial. I hope you find it very helpful with your flash animations. For any help with this tutorial or questions, please post only in this forum thread.
~Flash Mods
