Fading in & out an object using actionscript?

[Recognize]

Hi

does anyone here know how to fade in & out an object using actionscript?

I got some text and i want it faded out 1st, but when it slides in i want to fade it in using actionscript cause this cuts down the file size than trying to do it using tween.

thanks

[Macro-design]

place the text inside a movieclip ( press F8 ) and give the movieclip an instance name - in my example I just called the movieclip "test" ( without quotation marks ).

And then in frame one copy/paste the following code:
test._alpha = 0;
onEnterFrame = function () {
if (test._alpha<100) {
test._alpha += 10;
}
};

That should do the job, and just do it vice versa when you want it to fade out, please let me know if it doesn't work, because I'm not sitting on a computer with flash at this moment.

[Recognize]

wicked nice one macro-design.

Got one question 4 ya tho. If i got a number of different mc do I have to type that code no of times but change the instance name?

Cause i want to have the different objects coming in a different times.
Can i apply that code to the actual mc instaed of the frame?

[Macro-design]

I don't think that would be such a good solution. To be frank, I think it's best to keep almost all of you AS written - in one layer called Actions - in the timeline. In that way you have a much better overview over all of your code in the scene.

In the start it doesn't matter that much, but when you start creating whole websites, it becomes very useful to have it all in one place.

So if I were you, I would just use some Intervals to define when the different objects should fade in/out. And if it's because they should follow each other, you could also do it in the easy way, by using the if function to define when an object is fully visible and then make the other effect follow when it happens.

[Recognize]

right............well this is all new to me, am a complete newbie 2 actionscript but I want.....no I will become a master (but not unitl next year da way things are going)

well i tryed to copy the code that you sent me for another mc so it looked like this:

test._alpha = 0;
onEnterFrame = function () {
if (test._alpha<100) {
test._alpha += 10;
}
};

title._alpha = 0;
onEnterFrame = function () {
if (title._alpha<100) {
title._alpha += 10;
}
};

but that never worked. and (sorry) but wot are Intervals?

[Macro-design]

I'm not really sure what you're trying to do, but rember the instanceName, that's really important.

And don't use instanceName's which name become blue when you actionscript it, because then it's a in built function in flash.

If you wanted - in my case - titleFirst, to fade in, and then titleSecond to fade in, use this script.
titleFirst._alpha = 0;
titleSecond._alpha = 0;
onEnterFrame = function () {
if (titleFirst._alpha<100) {
titleFirst._alpha += 10;
}
if (titleFirst._alpha>90) {
if (titleSecond._alpha<100) {
titleSecond._alpha += 10;
}
}
};

Rember that titleFirst and titleSecond is the instanceName's that I gave to my two movieClips.

Hope it helps

[Recognize]

yep thats wot I was looking for. I did have 2 mc with different instance names but it was the actionscript that was wrong dats why it didnt work.

what I was trying to do is:

one title will move from one point to another by fading in from 0% - 100%

once thats done

Then another will do the same, but NOT until the 1st one has completed. I want to be able to do all this by actionscript not tween animation.

I got so many questions that needs to be answered u wouldn't believe it. Is there any VERY VERY BASIC actionscript tutorials or even books??

Can any one help??

& Thanks again Macro-design GREAT HELP!! :thumb:

[Macro-design]

Hmm... I'm not sure, was you able to make it work?

Here's a bit easier code, so you can modify the values much quicker and more dynamic, by just changing the speed variable.

OPS. I changed the instance names to title1 and title2.

var speed = 10;
//////////////////
title1._alpha = 0;
title2._alpha = 0;
onEnterFrame = function () {
if (title1._alpha<100) {
title1._alpha += speed;
}
if (title1._alpha>(100-speed)) {
if (title2._alpha<100) {
title2._alpha += speed;
}
}
};

Now about the action script tutorials, I think we got some pretty good ones, here at kirupa. Even though it's a bit boring, and may not seem like anything you can use at the moment you're going through the tutorial, but when you finished a little bunch of them, you can start putting it together. And then it goes fast, the most important thing is, always to check the instance names for typos.

You can also write in this topic, if it's something specific you need help with.

[Macro-design]

Just a little explanation of the code I posted before, it's very simple, and there's a bunch of ways to achieve the result you're looking for.

Look after the bold words :)

var speed = 10;
//////////////////
title1._alpha = 0;
title2._alpha = 0;
onEnterFrame = function () {
if (title1._alpha<100) {
title1._alpha += speed;
}
if (title1._alpha>(100-speed)) {
if (title2._alpha<100) {
title2._alpha += speed;
}
}
};Now, the "var speed = 10" - here we defines a variable ( "speed" ), and when that variable is written in another part of the code, it replaces the speed with the number that it equals. In this case that would be 10.

The good thing about this, is, that you can change the speed of all you fades by just changing one number.

"title1._alpha = 0;" - just tells flash, to look for an object with the instance name of title1, and then give it an alpha of 0. You can of cause change this value if you want to, but in this case it would look stupid.

"onEnterFrame = function () { ...... }" - when this frame is entered, do this function. Pretty simple, no bones in that.

"if (title1._alpha<100) { ...... }" - if title1 alpha is less than 100, do the following code.

"title1._alpha += speed;" - adds the variable number ( "speed" which in this case is 10 ) to title1's current alpha value.

Remember that, this is inside the "if function", and this code is only executed if the "if function" is true. That means, if the title1 alpha isn't less than 100, this code won't be executed.

"if (title1._alpha>(100-speed)) { ...... }" - this is pure math, 100 minus our variable number ( "speed", in our case that would be 10 ), so if title1's alpha value is more than 100-10 ( 10 was our variable number - called "speed" ).

Trying to summary this, if title1's alpha is more than 90, then the following code will happen. And the following code is just a copy of the first fade code, just with another instance name.

Hopefully this can help you a little, in understanding the code above. Please let me know, if I shall explain something better. :)

[Recognize]

macro-design ur the man, these are the kind of tutorials am looking for very basic with explanation. Yeah I got it to work thanks, just using the little knowledge and now trying to create new things.

But this has been a great start to actionscript. MAJOR THANKS AGAIN!!!! :thumb:

[Macro-design]

You're welcome :)

[FlashNewby]

I learned some good info from this. Good job macro-design!!!!

[Macro-design]

Well I'm glad you found it useful

[PaintedSwan]

Well I'm glad you found it useful

Hello :) I think this is some great script. I'm trying to customize it for a fade OUT for my button, but being a newbie to AS, I'm obviously missing something in the translation. I have the following script attached to a movieclip used as a button, referring to 'object1':



on (release) {
var speed = 10;
object1._alpha = 100;
if (object1._alpha<=100) {
object1._alpha -= speed;
}
}


If you could tell me what it is I'm missing, that would be great. :)

[Macro-design]

Well, I actually think, that the easiest way, would be to write all the code in your timeline. Someone at this forum once wrote an incredible good code, here were go:
object1._alpha = 0;
//////////////////////////////
//////////////////////////////
MovieClip.prototype.alphaOut = function(alpha) {
this.onEnterFrame = function() {
this._alpha = alpha-(alpha-this._alpha)/1.2;
if (Math.abs(this._alpha-alpha)<1) {
this._alpha = alpha;
delete this.onEnterFrame;
}
};
};
MovieClip.prototype.alphaIn = function(alpha) {
this.onEnterFrame = function() {
this._alpha = alpha-(alpha-this._alpha)/1.2;
if (Math.abs(this._alpha-alpha)<1) {
this._alpha = alpha;
delete this.onEnterFrame;
}
};
};
//////////////////////////////
//////////////////////////////
fadeIn.onPress = function() {
object1.alphaIn(100)
}
fadeOut.onPress = function() {
object1.alphaOut(0);
};This should work, just rember to call your buttons "fadeIn" and "fadeOut" ( talking about the instance name).

Now this object1 starts faded out, and when the "fadeIn" button is pressed, it starts fading in, and vice versa with the "fadeOut" button.

[PaintedSwan]

Well, I actually think, that the easiest way, would be to write all the code in your timeline. Someone at this forum once wrote an incredible good code, here were go:
object1._alpha = 0;
//////////////////////////////
//////////////////////////////
MovieClip.prototype.alphaOut = function(alpha) {
this.onEnterFrame = function() {
this._alpha = alpha-(alpha-this._alpha)/1.2;
if (Math.abs(this._alpha-alpha)<1) {
this._alpha = alpha;
delete this.onEnterFrame;
}
};
};
MovieClip.prototype.alphaIn = function(alpha) {
this.onEnterFrame = function() {
this._alpha = alpha-(alpha-this._alpha)/1.2;
if (Math.abs(this._alpha-alpha)<1) {
this._alpha = alpha;
delete this.onEnterFrame;
}
};
};
//////////////////////////////
//////////////////////////////
fadeIn.onPress = function() {
object1.alphaIn(100)
}
fadeOut.onPress = function() {
object1.alphaOut(0);
};This should work, just rember to call your buttons "fadeIn" and "fadeOut" ( talking about the instance name).

Now this object1 starts faded out, and when the "fadeIn" button is pressed, it starts fading in, and vice versa with the "fadeOut" button.


This works brilliantly, Macro-design, thank you. :D I was wondering which part of the code would I tweek if I wanted to affect the speed of fading? :)

[scotty]

Change the 1.2 ;)

scotty(-:

[PaintedSwan]

Change the 1.2 ;)

scotty(-:

I have already tried that over and over, and nothing was affected.

[scotty]

It's because you ease an _alpha. Put a trace and you'll see the difference in your output window ;)

scotty(-:

[PaintedSwan]

It's because you ease an _alpha. Put a trace and you'll see the difference in your output window ;)

scotty(-:

Haha, remember I'm a total newbie. :D I don't know how to put a trace...and how would tracing make a difference?

[Lindquist]

MovieClip.prototype.alphaOut = function(alpha) {
this.onEnterFrame = function() {
this._alpha = alpha-(alpha-this._alpha)/1.2;
//Here's your trace statement
trace(this._alpha);
//---------------------------
if (Math.abs(this._alpha-alpha)<1) {
this._alpha = alpha;
delete this.onEnterFrame;
}
};
};

The trace will show you the alpha value in the output panel. You'll be able to see the alpha in numbers rather than just watching it fade onscreen. You'll quickly fall in love with trace to test all of your projects.

[PaintedSwan]

It's because you ease an _alpha. Put a trace and you'll see the difference in your output window ;)

scotty(-:

Ah, okay...I need to clarify. When I changed the number, the alpha was effected, just not in the manner desired. Say I put '2' instead of '1.2'...the alpha then eases wayyy to fast (the trace confirms this), when in fact I want to slow it down. So I put '1', and then it doesn't move at all, it just sits there at zero (again, the trace confirms this). Putting in a negative number just screws it all up. So I guess the correct question would be, can you give me an example of the right number to put in order to slow it down? Thanks. :)

**edit - I know that '1.1' slows it down a bit, but I want it even slower than that lol.

[PaintedSwan]

MovieClip.prototype.alphaOut = function(alpha) {
this.onEnterFrame = function() {
this._alpha = alpha-(alpha-this._alpha)/1.2;
//Here's your trace statement
trace(this._alpha);
//---------------------------
if (Math.abs(this._alpha-alpha)<1) {
this._alpha = alpha;
delete this.onEnterFrame;
}
};
};

The trace will show you the alpha value in the output panel. You'll be able to see the alpha in numbers rather than just watching it fade onscreen. You'll quickly fall in love with trace to test all of your projects.

Thanks, Lindquist...this is very useful to know. :)

[Lindquist]

Stop for a second and think about the math involved.

this._alpha = alpha-(alpha-this._alpha)/1.2;
--------------------------------------------
if this._alpha is currently at 100,
this._alpha = 0-(0-100)/1.2;

the two minus signs cancel out and give you:
100/1.2 which equals 83.33

(you could change the /1.2 to *.83 and you'd get the same result)
So, this._alpha is going to be equal to 83.33% of its previous value each fps.

/2 is a drastic speed increase because this._alpha is cut in half each fps (50%);

/1 means that 100 is equal to 100% of 100 each fps, that's why you're not seeing change.

Try, /1.01, this will give you approximately 99% of this._alpha each fps. The closer the number gets to 1 (or 100%), the slower this._alpha will change.

[scotty]

@ Lindquist: :thumb:

scotty(-:

[CoolDuck]

You can use the tween class new in MX 2004.

http://www.actionscript.org/tutorials/advanced/Tween-Easing_Classes_Documented/index.shtml

[PaintedSwan]

Stop for a second and think about the math involved.

this._alpha = alpha-(alpha-this._alpha)/1.2;
--------------------------------------------
if this._alpha is currently at 100,
this._alpha = 0-(0-100)/1.2;

the two minus signs cancel out and give you:
100/1.2 which equals 83.33

(you could change the /1.2 to *.83 and you'd get the same result)
So, this._alpha is going to be equal to 83.33% of its previous value each fps.

/2 is a drastic speed increase because this._alpha is cut in half each fps (50%);

/1 means that 100 is equal to 100% of 100 each fps, that's why you're not seeing change.

Try, /1.01, this will give you approximately 99% of this._alpha each fps. The closer the number gets to 1 (or 100%), the slower this._alpha will change.

Thank you for explaining that, Lindquist. I'm still learning what everything means, so I wasn't able to see what math was involved just by looking at it. That makes way more sense now, thanks! :D

[Lindquist]

No problem. It's amazing how much sense everything makes after you figure out what's actually going on :D