Be a Supporter!

As: Fade In/out

  • 2,045 Views
  • 17 Replies
New Topic Respond to this Topic
TrueDarkness
TrueDarkness
  • Member since: Aug. 31, 2004
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
As: Fade In/out Feb. 22nd, 2006 @ 09:11 PM Reply

AS: Mainzorzss

AS: Fade In/Out by: True_Darkness

Related Topics:
AS: API- by -liam-

What is this about?

Well, with some very simple knowledge of API, I have created a script used for fadeing in and out in your Flash work, no Movie Clips invlolved! (Well, API ones =P)

Great! Now umm, what do I do?

Well let me just go over the basics of creating a Movie Clip using API. Here is the simple script to create a square:

_root.createEmptyMovieClip("square", 1); //creates a new Movie Clip called "square" with a depth of 1
with (square) {
lineStyle(2, 0x000000, 100); //sets the format of the lines of the square 2px thick,, black, and an _alpha of 100
beginFill(0x000000, 100); //sets the fill in of the square, black, and an _alpha of 100
lineTo(50, 0);
lineTo(50, 50);
lineTo(0, 50);
lineTo(0, 0); //use of 4 "lineTo" actions to create a square

Alright, so now you know how to create a basic square in API (better explained by -liam-.

Now What??

Now, we can begin!!

Start by making a square in API with the name "fade":


_root.createEmptyMovieClip("fade", 100);

I gave it a depth of 100 because we don't want anything with another depth to go in front of the fade (unless you want to, in which case you could change the depth to whatever you want).
with (fade) {
lineStyle(2, 0x000000, 100);
beginFill(0x000000, i);

We are using the VARIABLE "i" as our _alpha, because we need it to be able to change and work with the actions of our fade.
lineTo(5000, -5000);
lineTo(5000, 5000);
lineTo(-5000, 5000);
lineTo(-5000, -5000);
}

I chose the numbers -5000 and 5000 because we want to make the Fade bigger than the screen.

So there you have it, the basic API part of the fadeing script.

Now the very first thing we have to do is define i, otherwise this whole code won't work!! So lets put this code on the very top of your script:
onLoad=function(){
i = 0
}

There you go. Now "i" is defined as 0. So if you test your movie (Ctrl + Enter), you should have... nothing! Haha, this is because the Movie Clip that you created with API, has an _alpha of i, which is equal to 0. In other words, _alpha=0!

...That's not funny

Okay, sorry =( NOW! Next thing we need to do is make it so it fades! Right before the script that creates an empty Movie Clip:
_root.createEmptyMovieClip("fade", 100);
Add this script:
onEnterFrame=function(){

so now your code should look like this so far:
onLoad = function () {
i = 0;
};
onEnterFrame = function () {
_root.createEmptyMovieClip("fade", 100);
with (fade) {
lineStyle(2, 0x000000, 100);
beginFill(0x000000, i);
lineTo(5000, -5000);
lineTo(5000, 5000);
lineTo(-5000, 5000);
lineTo(-5000 -5000);
}

If you test your movie now, you should get an error that says:
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 4: Statement block must be terminated by '}'
onEnterFrame = function () {

**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 15: Syntax error.

Total ActionScript Errors: 2 Reported Errors: 2

So what you have to do, is just add another } at the end of your code, which will end the onEnterFrame function.

So, we are pretty much done. Now all you need is the code that actually does the fadeing part!

Add this action before the 2 closeing brackets (}):
_alpha = i; //sets the _alpha to the variable "i"
i += 2; // tells the variable "i" to plus 2 which will add to the _alpha, causeing the _alpha to rise. This is changeable

Now if you've done everything right, your code should look like this:
onLoad = function () {
i = 0;
};
onEnterFrame = function () {
_root.createEmptyMovieClip("fade", 100);
with (fade) {
lineStyle(2, 0x000000, 100);
beginFill(0x000000, i);
lineTo(5000, -5000);
lineTo(5000, 5000);
lineTo(-5000, 5000);
lineTo(-5000, -5000);
_alpha = i;
i += 2;
}
}

Now go on and test your movie (Ctrl + Enter).
The screen should fade out and turn black.

EXXXXAAAAMMPLLEE (Example)

And there you have it! Now you can easily fade out, using one simple script!! Plug it onto the frame you want the screen to begin to fade out!

HEY! WAIT A MINUTE! What about fadeing... IN???

Well, doesn't take a genius to change a few numbers and signs around.

Since the variable "i" is set to 0, then the _alpha will start off at 0, as I explained earlier. So, if you want to Fade IN, change the variable to 100, which will make the _alpha of the Movie Clip start at 100.

Then, change the plus sign of what the variable "i" is adding at the bottom of the script, to a subtraction sign. This will make it so that the _alpha of the Movie Clip will subtract 2, causeing the screen to "Fade in".

The code should look like this:
onLoad = function () {
i = 100;
};
onEnterFrame = function () {
_root.createEmptyMovieClip("fade", 100);
with (fade) {
lineStyle(2, 0x000000, 100);
beginFill(0x000000, i);
lineTo(5000, -5000);
lineTo(5000, 5000);
lineTo(-5000, 5000);
lineTo(-5000, -5000);
_alpha = i;
i -= 2;
}
}

EXXXXAAAAMMPLLEE (Example)

And that's all there is to it!! Easy and effective! I hope this helps you for your Flash projects =)

EDN

TrueDarkness
TrueDarkness
  • Member since: Aug. 31, 2004
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:15 PM Reply

Very strange... uploads of this do not seem to be working... why aren't the codes working online?

23450
23450
  • Member since: May. 28, 2003
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:18 PM Reply

At 2/22/06 09:15 PM, True_Darkness wrote: Very strange... uploads of this do not seem to be working... why aren't the codes working online?

the examples? they work fine for me.


BBS Signature
Khao
Khao
  • Member since: Sep. 20, 2003
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:19 PM Reply

tween from 100% alpha to 0% and vice-versa would be less complicated -_-

23450
23450
  • Member since: May. 28, 2003
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:19 PM Reply

At 2/22/06 09:19 PM, Khao wrote: tween from 100% alpha to 0% and vice-versa would be less complicated -_-

Unless you wanted it dynamic.


BBS Signature
bwell
bwell
  • Member since: Sep. 9, 2005
  • Offline.
Forum Stats
Member
Level 15
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:20 PM Reply

sorry the example files didnt work for me.

TrueDarkness
TrueDarkness
  • Member since: Aug. 31, 2004
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:22 PM Reply

Well the example files aren't fadeing at all for me, I don't know what's wrong. Oh, I think this would be easier if you don't want to spend time makeing a movieclip and haveing to tween it to the certain amount of frames you want, I think that changeing a number for speed would be a lot better =)

23450
23450
  • Member since: May. 28, 2003
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:23 PM Reply

The example files are fine. You all CRAZY!!!


BBS Signature
TrueDarkness
TrueDarkness
  • Member since: Aug. 31, 2004
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:25 PM Reply

I think you are crazy! =P, they aren't working for 5 people I showed... I will try a few things though, if I get it working for ME I'll post it =)

Ani-Money
Ani-Money
  • Member since: Aug. 19, 2005
  • Offline.
Forum Stats
Member
Level 20
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:26 PM Reply

they work for me

David-Silver
David-Silver
  • Member since: Sep. 15, 2005
  • Offline.
Forum Stats
Member
Level 02
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:31 PM Reply

Well, that's good...

****FOR THE PEOPLE IN WHICH THE CODE AND/OR EXAMPLE FILES ARE NOT WORKING****

Take out the onLoad=function(){ part of the script! Sorry about this, I don't know why it does not work for some of you.

The code for Fade In is:

i = 100;
onEnterFrame = function () {
_root.createEmptyMovieClip("fade", 100);
with (fade) {
lineStyle(2, 0x000000, 100);
beginFill(0x000000, i);
lineTo(5000, -5000);
lineTo(5000, 5000);
lineTo(-5000, 5000);
lineTo(-5000, -5000);
_alpha = i;
i -= 2;
}
}

The code for fade out is:

i = 0;
onEnterFrame = function () {
_root.createEmptyMovieClip("fade", 100);
with (fade) {
lineStyle(2, 0x000000, 100);
beginFill(0x000000, i);
lineTo(5000, -5000);
lineTo(5000, 5000);
lineTo(-5000, 5000);
lineTo(-5000, -5000);
_alpha = i;
i += 2;
}
}

EXAMPLE FADE IN

EXAMPLE FADE OUT

TrueDarkness
TrueDarkness
  • Member since: Aug. 31, 2004
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 09:47 PM Reply

The last post was made by me btw sorry

TrueDarkness
TrueDarkness
  • Member since: Aug. 31, 2004
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 10:20 PM Reply

Any other comments? I'd love to hear

23450
23450
  • Member since: May. 28, 2003
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 10:21 PM Reply

At 2/22/06 10:20 PM, True_Darkness wrote: Any other comments? I'd love to hear

Not much to say. Not to complicated or anything, but can be useful in a couple cases.


BBS Signature
Longover
Longover
  • Member since: Feb. 19, 2003
  • Offline.
Forum Stats
Member
Level 04
Blank Slate
Response to As: Fade In/out Feb. 22nd, 2006 @ 10:41 PM Reply

this is really cool. I can't think of any uses right now, but hey... I think it is one of those tools you need when you are making a pure API project. However, it may be my error but i did find the graphical(tween) file to be a bit smaller than the API(code) file...

TrueDarkness
TrueDarkness
  • Member since: Aug. 31, 2004
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 23rd, 2006 @ 03:13 PM Reply

PART 2??

Maybe you don't want the screen to fade in or out. Maybe it is a certain object on the screen you want to fade. Well in case you are wondering, yes, there is a way to fade that object.

Object Fade In:
var i = _root.obj-instance-name; //this sets the variable "i" as the object you want to fade
i._alpha = 0; // this sets the variable "i" _alpha to = 0, which will make the object _alpha=0
onEnterFrame = function () { //tells something to happen on every frame
if (i._alpha>=0) { //this says that if the variable "i" is greater than or = to 0...
i._alpha += 2; //the variable "i" adds 2 to the _alpha according to your FPS
} //end if
}; //end function

Object Fade Out:
var i = _root.obj-instance-name; //this sets the variable "i" as the object you want to fade
i._alpha = 100; // this sets the variable "i" _alpha to = 100, which will make the object _alpha=100
onEnterFrame = function () { //tells something to happen on every frame
if (i._alpha<=100) { //this says that if the variable "i" is less than or = to 0...
i._alpha -= 2; //the variable "i" subtract 2 from the _alpha according to your FPS
} //end if
}; //end function

Example Fade In

Example Fade Out

NinoGrounds
NinoGrounds
  • Member since: Nov. 28, 2005
  • Offline.
Forum Stats
Member
Level 19
Programmer
TrueDarkness
TrueDarkness
  • Member since: Aug. 31, 2004
  • Offline.
Forum Stats
Member
Level 27
Blank Slate
Response to As: Fade In/out Feb. 24th, 2006 @ 01:05 PM Reply

At 2/24/06 01:03 PM, Nino_JoJ wrote: The Example - not working

Check further down, I posted working examples, and the correct codeing. You cannot have an onLoad=function(){ to define the variable i. Just put i=0 or i=100 :)