Fades in and out animated buttons

1

I need to know how to make the button to
fade in > when mouse is over
fade out > when mouse is out
Help help…
I know the question has posted somewhere…but I just couldnt find it anywhere…thought this may be the fastest way to find the answer…
help help

2

Is this what you are trying to achieve:

[swf=http://www.macromotive.com/ebay/dalu/fade_button.swf width=150 height=50 wmode=transparent][/swf]

Here is the Flash MX Source File:
Fade Button Flash MX Source

Steps:
1. Make sure your button has an instance name of ‘button1’.
2. Put this script on your first frame:

**button1._alpha = 0;
over_clip_go = true;
_root.createEmptyMovieClip("script_clip", 0);
script_clip.onEnterFrame = function() {
	if(_root.over_clip_go) {
		if(_root.button1._alpha > 0) {
			_root.button1._alpha -= 10;
		}
	} else {
		if(_root.button1._alpha < 100) {
			_root.button1._alpha += 10;
		}
	}
};

button1.onRollOut = button1.onDragOut = function() {
	over_clip_go = true;
};

button1.onRollOver = function() {
	over_clip_go = false;
};**

Reply back with any questions or comments.

3

yes thatz what I need…thank you so much…:slight_smile:

4

No problem, always glad to help, reply back with any more questions and I will do my best to help you out!

5

thank you for teaching me how to do the fading button. However, I’m facing another problem right now. I tried to do more than 1 button, and it just didnt work somehow. I changed button name in the A/S, and have different button in different layers…but…still it didnt work… HELP…:frowning:

6

If you are going to use more than 1 it will help to use prototypes.

http://www.kirupa.com/developer/actionscript/as_tricks.asp

There is a link to the page. Click the link on that page that says <B>“using prototypes instead of functions”</B>.

That way you can use only 1 script, and create as many buttons as you need. This is a bit complicated though.

7

I think the best thing would be to work directly with buttons, without a script clip. Which means that you’re better off working with clips behaving like buttons than buttons (that way you can work with methods as Lost suggested). You could have something like that, based on Dan’s code:

function fadeOut () {
  if (this._alpha>0) this._alpha -= 10;
  else this.onEnterFrame = null;
}
// if the _alpha is positive, we decrease it, otherwise we suppress the 
// enterFrame
function fadeIn () {
  if (this._alpha<100) this._alpha += 10;
  else this.onEnterFrame = null;
}

// Then you can write for any clip you want:
myClip.onRollOver = function() {
  this.onEnterFrame=fadeOut;
}
myClip.onRollOut = function() {
  this.onEnterFrame=fadeIn;
}

I can’t test this, but it should work this way :slight_smile:

pom :asian:

8

yeah that should work. u could put like the code under the actual button…if u wanted to but yeah it really doesn’t matter :slight_smile:

9

What do you mean?

10

i dont really know actualy. that was my alter ego talking then :slight_smile:

11

:stuck_out_tongue:

12

ilyaslamasse et al;

this button fade out thing has to be one of the most confusing things to do for us beginners but its used so much (and I want to use it!)

ilyaslamasse if you get time, I would greatly appreciate an .fla for this (I couldnt find a full on tutorial). I see your code but am just missing exactly what to do with it to be honest.

Thanks all for the effort.

kellys

13

Kellys and anyone else

I posted a link to in another thread in reply to kellys’ query of an effect.

Its here again click here.

There’s a menu that has buttons, which when you roll over, they change colour, but on on roll out they fade back to original. Looks quite good.

I’m sure somone here could break it down and write a tutorial or something if people wanted. I haven’t been through all the tutorials on this site, but who knows, there might be something similiar there already.

Heres the fla. if you’re interested

14

Sorry about that Kellys. GLad that you told me btw :slight_smile: Actually, I was just extending Dan’s code, so I skipped the explanations… OK, let’s go:

This code uses callback functions. I wrote a brief article about them in the AS tricks section, you can read it, it’s always interesting. It’s here called dynamic event handlers with Flash MX.

What we want to achieve: When we rollOver a button, we want the _alpha of the button to grow continuously, and when it reaches 100, stop. When we rollOut, we want the opposite to happen.

The problem: If we only do this on a button

on (rollOver){
  this._alpha += 10;
}

The _alpha will increase only once, when we actually roll over the button, and not until it reaches 100.

The solution: use the enterFrame of the button (which is in fact a clip with Flash MX). And we have to nest it inside the rollOver like so:

At the beginning, the enterFrame of the button is empty.
When the user rolls over the button
  We give the button an enterFrame that will tell it to increase its alpha
  When the button’s alpha reaches 100, we delete the enterFrame

The code:

function fadeOut () {
  if (this._alpha>0) this._alpha -= 10;
  else this.onEnterFrame = null;
}
*// this function increases the _alpha of the object calling it
// when it reaches 100, it deletes its enterFrame*

function fadeIn () {
  if (this._alpha<100) this._alpha += 10;
  else this.onEnterFrame = null;
}

myClip.onRollOver = function() {
*// when you roll over the button, you define its enterFrame as the 
// function you have just declared. You could hard code it, but it is
// clearer that way and more reusable*
  this.onEnterFrame=fadeOut;
}

myClip.onRollOut = function() {
  this.onEnterFrame=fadeIn;
}

This is the pure use of callback functions, the perfect exaplem and when you’ve understood this, you’ve understood how powerfull Flash has become :slight_smile:

Don’t hesitate to ask questions.

pom :asian:

15

Hey Ilyas, your code was great, but not exactly what kellys was looking for. Well I don’t think it was. I did a little tweeking to it, just changed like 1 or 2 things.


onClipEvent (load) {
	this._alpha = 30; //set original alpha
}
onClipEvent (enterFrame) {
	function fadeOut() {
		if (this._alpha>30) {
			this._alpha -= 10;
		} else {
			this.onEnterFrame = null;
		}
	}
	// this function increases the _alpha of the object calling it
	// when it reaches 100, it deletes its enterFrame
	function fadeIn() {
		if (this._alpha<100) {
			this._alpha += 10;
		} else {
			this.onEnterFrame = null;
		}
	}
	this.onRollOver = function() {
		// when you roll over the button, you define its enterFrame as the 
		// function you have just declared. You could hard code it, but it is
		// clearer that way and more reusable
		this.onEnterFrame = fadeIn;
	};
	this.onRollOut = function() {
		this.onEnterFrame = fadeOut;
	};
}

I included a .zip file with this post.

16

right on! works like a charm. as always you guys rule!
never stop learning…

kellys

17

As always, thanks to Dan and Ilyas, the problem is solved:P

We will never stop learning, but you better not either!

18

ok…I meant to send reply to thank everyone here…but…I accidentally send PM to lost 2 twice…hee hee… anyways… again… you guys are the best

19

Hi,

quite simply - i was almost just expecting the answer to be "use a MC and a Blank button instance…and then use "on Roll Over - goto and play root.btnInstance.gotoAndPlay (“frame withRollOut Clip”) ; i guess things have moved on …

anyhows…

my questions

  1. are all of these action placed on the BUTTON itself (not with a MC right - even though in MX button are practically MC ?)

  2. this line of code confuses me…
    **this.onRollOver = function() ** {…taken from both "lost’s coding and “ilyaslamasse coding”

I always thought you needed to “name the funtion” i.e. **this.onRollOver = functionName…i.e faceOut() ** am I just looking at this the wrong way OR am i just not getting how this works (which i think is the case…i.e can you spell it out in easySpeak for me ) as to why there is just the word “funtion” and no name for it ?)

  1. i’ve never used the onEnterFrame method… i realise that you guys have used it as ** onClipEvent (enterFrame)** where did the “ON”…in “onEnterFrame” part of the whole thing go ?.. i didn’t think they could be seperated ? again, am i looking at this the wrong way ?

  2. LASTLY are you using / can this be used with the flashComponent push buttons and not Button Symbols ?.. (as normal button symbols doNot have a clickHandler…and i’m not sure how this affects the script you guys are using ) this was not mentioned in the tutorials anywhere ?

i hope to hear from someone soon… to help me understand this.

cheers

Ket - confused, and realising that MX gets deeper than i thought…

20

The actions are applied to MCs not Buttons. Therefore the onClipEvent and onRollOVer = function() are <B>required</B> for this to work.

this.onRollOver = function() is correctly written. You can define variables in the () of the function…like with prototypes it can look like this


MovieClip.prototype.myAction = function(defineWidth){
this._width = defineWidth;
}
//Then you call it like this
this.myAction(100);

//this will make your clip be 100px wide.

Ok, Ok, so I didn’t actually test that bit of code, but the theory is still there.