fade out buttons on mouse out 1

[scottyjohn]

Hi all,
I was wondering how you create the effect where a button fades to a different colour gradually as you mouse over but then on mouse out it fades back gradually to its original colour?
I can manage the first part by playing a mc on mouse over but I cant figure out how to do the second part?

Many thanks in advance!

John

 

[wangbar]

The best thing to do is to have your "button" actually be a movieClip - if you place an invisible button over the clip you can still detect mouse events and then use these to trigger animations within your clip like fades etc - just label the frames where the animation starts:

on(rollOver){
gotoAndPlay("rolloverAnimation"
}
on(rollOut){
gotoAndPlay("rolloutAnimation"
}

I'm assuming that you're using tweens and the "tint" or "advanced" effects panels to set up the fades but if you fancy doing it with script I've knocked something together which you're welcome to use. Just attach the following code to your button MC - you can set up the colour you want to fade to using the "target" variables.

To see it in action go to -

http://www.wangbar.co.uk/colourButton.swf

onClipEvent (load) {
// create object
buttonColour = new Color(this);
buttonTransform = new Object();
original = buttonColour.getTransform();
// set RGB value for rollover colour
redTarget = 200;
greentarget = 132;
blueTarget = 0;
}
onClipEvent (enterFrame) {
// get current colour
current = buttonColour.getTransform();
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
// on rollover gradually bring colours up to target values
buttonTransform.rb += (redTarget-current.rb)/10;
buttonTransform.gb += (greenTarget-current.gb)/10;
buttonTransform.bb += (blueTarget-current.bb)/10;
} else {
// on rollout fade colours back to original values
buttonTransform.rb += (original.rb-current.rb)/10;
buttonTransform.gb += (original.bb-current.gb)/10;
buttonTransform.bb += (original.bb-current.bb)/10;
}
buttonColour.setTransform(buttonTransform);
}

 

[coldfused]

jeesus dude, your heads gona explode one day..all that for a roll over..lol..

carlsatterwhite@orlandomediasolutions.com

 

[wangbar]

Hell of a rollover though

 

[scottyjohn]

Sorry Wangbar im a bit of a newcomer to Flash!

This is what Im doing but it isnt working, hope you can steer me right!

I open flash and then add a movie clip to the library call "Button Fade", in this movie frame 1 contains the button at one colour and frame 24 has the button a different colour with a tween in between so it fades, no problem there.

I then go back to the stage and then add button to my library using the same graphic as the mc but only having it in the hit frame of the button so its invisible, no problem there.

How then do I place the two items on the stage to do what I want and where do I need to place the actionscript? Do I assign an On Mouse Event action to the button or the mc? I couldnt see On Rollover actions in either the frame or object panels. Im using Flash 5.

Hope this is clear?

John

:-I

 

[wangbar]

Okay, should be simple from here because you have most of the stuff in place.

Place the invisible button inside the movieclip for the fade effect - add a layer above the animation and drag the button from the library on to this layer.

Add the events from earlier

on(rollOver){
gotoAndPlay("rolloverAnimation"
}
on(rollOut){
gotoAndPlay("rolloutAnimation"
}

actually on the button - select it (a box will appear around it) and then type the above into the "actions" window, there is a sidebar with all of the commands which you can use to help you.

You will need a couple of labels on the movieclip timeline so that the code will have something to target - select the appropriate frame and type the label into the "frame" menu.

Make sure there's a stop() action in the first frame of your clip so that it doesn't play until you want it, extend the fading tween so that you have an animation to take you back to the original colour and you should be there.

 

[scottyjohn]

Fantastic!

Ive got it now, all you need is to see it actually working and it seems so simple!

Thanks Wangbar, your a star!

John
:-D

 

[coldfused]

i gave him a star for ya scotty..

and indeed wang...a hell of a roll over!

carlsatterwhite@orlandomediasolutions.com

 

[oldnewbie]

Wang...
This isn't (although I guess it could be!), at present, a "real button", right? It's presently only an object inside a mc, since the cursor doesn't change upon the rollover, right again?

As a added touch (if you'd like to play with it!) would it be possible to have it go from one color to the other, but progressively as the cursor approaches the center of the button?

That would be a hell of a rollover!

Cheers,

ldnewbie

 

[wangbar]

Yep, right on both counts.

I don't know how you work but I like to have generic code snippets that I can adapt to different applications -the "rollover" part of that script was simply this:

if (this.hitTest(_root._xmouse, _root._ymouse, true)) {}

... the rest of it is colour changing code which I could (and have) applied to clips changing if they've been hit in a game; duplicate movie clips where I don't want everything to look identical; slider controls etc.

So while it's overkill for an app like Scotty's the effort involved in putting it together was minimal 'cos I have it lying around, it's just an adaptation job.

Plus it's fun ;-)

And,as you know I like a challenge so here's the rollover you requested...

It's a "real" button inside a movieClip (you can't apply the Color() object to anything ther than an MC) so you get the hand cursor. The button is set to make the variable "hit" true on rollover and the clipEvent takes that and runs with it. I think that hitTest is probably a better way to go in this case because it's more accurate (if you rollOut really quickly the button doesn't go all the way back to it's original colour despite the movie having an incredibly high framerate).

Here's the swf:

http://www.wangbar.co.uk/helluvaRollover.swf

Here's the script:

onClipEvent (load) {
// create object
buttonColour = new Color(this);
buttonTransform = new Object();
original = buttonColour.getTransform();
}
onClipEvent (enterFrame) {
// check button state
if (hit) {
// calculate mouse position
xDiff = _root._xmouse-_x;
yDiff = _root._ymouse-_y;
distance = Math.sqrt((xDiff*xDiff)+(yDiff*yDiff));
// calculate colour offset
buttonTransform.rb = Math.floor((_width/2-distance)*6);
} else {
buttonColour.setTransform(original);
}
// change colour
buttonColour.setTransform(buttonTransform);
}

 

[Guest_imported]

Whooaaaa!!!

You guys are the gurus of Flash, hopefully someday when Ive mastered the basics I can flex my creative muscles with the rest of ya!

John