[Resolved] [Resolved] Alpha Fade Script?

[dhamer]

Ok, I am trying to make a short movie where pictures fade in and out in sequence to match with some music. I have figured out how to do a motion tween on each layer for each picture. However, there is a total of 21 pictures. I am sure there is some action script that can be done to automate the process. I am wanting the 1st picture to fade in, as it fades out I want the 2nd picture to fade in, etc....

Any suggestions?

Cheers

[AZ3DGuy]

the property you'll want to play with is "_alpha". If you have a movie clip containing a photo, give it this script:

onClipEvent (enterFrame) {
  this._alpha -= 5;
}

You'll see the image vanish away. Change the 5 to a 1 in the code, and your image will fade more slowly. Change it to 10 and it goes faster. Basically, _alpha is a value from 0-100 (well those are the only meaningful values, anyway), and in that script above you're telling the movie clip to subtract 5 from its _alpha every time the movie's playhead gets to a frame of the MC. If the code read "this._alpha += 5" instead, you'd be adding 5 to the alpha each frame, and "fading in" your image.

To do the second part of your request, having one fade in after another one fades out, I would recommend using attachMovie. If that's not too much action script, I'd be happy to post a solution here. If you'd rather go about it in another way, we can devise another way.

HTH

[dhamer]

Sorry I have never worked with action script before.
I do however have scripting experience and would prefer to learn.

I have figured out how to add actions to a movie clip.

Will the entire sequence of fading images be one MC, or should that be broken into one MC per image?

Should I be adding a layer for the action script as I have seen in some .fla files?

I appreciate your help.

[AZ3DGuy]

I would say that we should set it up with each image as a separate MC... that will enable dynamic attachMovie scripts later. It's a little neater to have a separate layer for code, but that is strictly up to you. I myself typically do it that way.

Since you've got some scripting experience, you know that programming is really just taking your desired end result and breaking it up into bite-size logical problems. Taking that approach with this problem, we've got to figure out how to fade in images, how to fade out images, how to time these events, and how to repeat the process as needed.

We've talked about fading in and out; that's just manipulating the MC's _alpha property. We built a little fade-in function (even though it was only one line, lets think of it as a function). That function was attached to the action script for a MC. Since we're going to be applying the fade-in to several MCs, however, it might be best to create the function in such a way that lots of MCs can access it. Here's what I'm thinking: on the "code" layer (not on Actions attached to a MC, that is, but rather to a frame), write the following:

function fadeIn(myMC) {
  if (myMC._alpha < 100) {
    myMC._alpha += 5;
  }
}

That code just defines a function. If you were to run your script now, nothing special would happen. We've defined a function, but haven't called it. That is, no MC has said "Let me do that function". The function, broken down, says, "if the MC in question (the parameter that we pass it) has an _alpha property of less than 100, then increase its _alpha by 5." That's it. Plain and simple.

Next step is to have the MC actually call this function. To do that, just have the action script on the MC read as follows:

onClipEvent (load) {
  this._alpha = 0;
}

onClipEvent (enterFrame) {
  _root.fadeIn(this);
}

The script here has two parts. The first, onClipEvent(load), tells the MC to set its own _alpha to 0 when the thing is first loaded into memory. Fortunately, the load event happens right away, before the thing would even be displayed, so we never see it. The next part, onClipEvent(enterFrame), happens every time the playhead reaches a frame in this MC (probably 12 times a second, or whatever you've set the frame rate to be). That code calls the function fadeIn, and passes it the MC's unique identifier ("this") as its parameter.

This may be more detail than you wanted, or too pedantic for you to stand. If either is the case, I apologize. I just know that when I was learning ActionScript, it really helped me to have some detailed explanation, rather than just a source FLA that solved it for me. Maybe there are other readers who benefit from this as well.

Let me know if you're interested in any more, or if you have any questions.

[Karikaru]

thank az, but how would i do a fade out?

onClipEvent (unload) {
this._alpha = 100;
}

onClipEvent (enterFrame) {
_root.fadeOut(this);
}

?

but i guess you would have to right another function for it too.

function fadeOut(myMC) {
if (myMC._alpha < 0) {
myMC._alpha += 5;
}
}

is that right?

[dhamer]

I appreciate all of the detail. It makes things easier to understand.

When I test the movie, It fades from zero two one hundred. Cool.
I believe I am ready for the next step.

[AZ3DGuy]

Originally posted by Karikaru
thank az, but how would i do a fade out?

function fadeOut(myMC) {
  if (myMC._alpha < 0) {
    myMC._alpha += 5;
  }
}

is that right?

Right idea, but we'll have to change it some. Just as you say, there should be a function called fadeOut. This can go on the "code" layer, same frame as the fadeIn function definition:

function fadeOut(myMC) {
  if (myMC._alpha > 0) {
    myMC._alpha -= 5;
  }
}

This function, when called, will reduce the target MC's alpha by 5 each time it is called. The trick here is knowing when and how to call this function. Let's go back to the original problem to figure out what it is we're trying to do...

I am wanting the 1st picture to fade in, as it fades out I want the 2nd picture to fade in, etc....

So now what we are saying is that we want the NEXT one to fade in as the FIRST one fades out. That means we need more than one MC on stage, and some concept of which goes first, and so on. There are a couple ways to go about this. Let's do the easiest method first, and later on we'll throw away a lot of this work to do the more advanced, but more flexible solution. First, drag all of your MCs with images in them onto the stage. Give each of them an instance name (in the properties panel). I'd name them "img1", "img2", "img3", and so on. Also, give each of them the following code:

onClipEvent (load) {
  this._alpha = 0;
}

That's exactly the same code we put onto the first MC we tried this with. Next, put the following additional code onto just the MC that represents your first image:

onClipEvent (enterFrame) {
  _root.fadeIn(this);
  if (this._alpha >= 100) {
    _root.fadeOut(this);
    _root.fadeIn("_root.img2");
  }
}

That additional code on the first one will cause it to fade in, then begin to fade out after it hits an alpha of 100. At the same time, it calls the fadeIn function for "img2", the second image MC.

There's a bug in here. I haven't tested the code yet, but I can already see what it will do wrong. Throw this code into your movie, watch what happens, and see if you can figure out why it doesn't work. It has something to do with the functions being called in the enterFrame. I'm not trying to be difficult, mind you, it's just that learning to spot and fix bugs is key to writing good action script.

[dhamer]

Should each MC have its own layer?

[AZ3DGuy]

Originally posted by dhamer
Should each MC have its own layer?

Nope, no need.

[dhamer]

Sorry AZ,

Had to head home for the day (yesterday). If you are still available to help, I would like to complete what I have started.

Cheers

[AZ3DGuy]

No sweat, I had to head out to a meeting anyway. Looks like we both left the computer at about the same time. Anyway, I'm here all day if you get stuck.

[98blacksnake]

Originally posted by AZ3DGuy
No sweat, I had to head out to a meeting anyway. Looks like we both left the computer at about the same time. Anyway, I'm here all day if you get stuck.

AZ3DGuy -
Thanks for posting the scripting with explainations. I am new to the "dot syntax". I am an old director user and am familiar with simple Lingo coding. Your explanations help a great deal. I have to ask what does _root and this signify? As far as the bug is concerned in you last post about the code, is it that you need to specify the alpha change occurs on img1??

Thanks for making this a bit clearer.
tony

[AZ3DGuy]

98BlackSnake -
I came over from Director a while ago too, so I can sympathize... it does take some getting used to. The "_root" and "this" designations may be somewhat confusing. I'll see if I can help clear them up. They're both somewhat related to dot syntax, as you've mentioned. I'll try not to go too far overboard, but still provide a good basis in dot syntax, _root, and "this".

First, it's best to think of all of the movie clips in your move as existing in a hierarchy. Best way to visualize this, actually, is with the geography example that Macromedia uses in their documentation. (I'll apologize upfront to those outside the US... I'm sure the examples here make sense, even if they show my "Americentricity"...).

Think of your main movie timeline as the USA. Onto that timeline, you can drag a few movie clips, lets say "New York", "Arizona", and "California". The timelines of these movie clips themselves each contain a handful of movie clips as well; New York has "Albany", "Buffalo", and "Queens", Arizona has "Phoenix" and "Tucson", and California has "San Francisco", "San Diego", and "Los Angeles". Since ActionScript is basically object-oriented, we can think of these movieclips (or objects) as each having a bunch of properties and methods. A property that might be applied to all of these MCs, for instance, could be population. A property that only some of the objects would have is "bird" --- that is, there's a national bird (the bald eagle), and a state bird (New York has the robin (I think)), but most cities don't have a city bird (NYC has the pigeon, I suppose...)

Imagine that these geographic movie clips each represented a fact sheet on that geogrqaphic entity. Let's say we were writing some code that would go on the city movie clips. This code would indicate the population of the city, and also express that as a percentage of the population of the state in which that city exists. The way we'd go about that is with the following code, on the city MC:

onClipEvent (enterFrame) {
  trace (this.population);
  statesPopulation = _parent.population;
  percentage = this.population / statesPopulation;
  trace (percentage);
}

We're assuming here that the population property has already been defined for each object. What this code does is first trace (or write to the output window) the population of the movie clip onto which this code has been attached. In other words, "this". "This" is just like saying "Me". The first line of the code traces "my population". I could have written "Tucson.population", but then I would have had to change the code for each city object that uses it. The idea here is to make code that is completely reusable.

The next line sets a new variable, "statesPopulation" equal to the population of the state that the city is in. Now, you'll notice that the code doesn't specifically mention the state. Rather than saying "Arizona.population", all we had to do was say "_parent.population". "_parent", is kinda like "this". It's a relative reference, rather than an absolute. It refers to (you guessed it) the movie clip containing "this".

Now how about _root? Well, from the city MC, if I wanted to reference the "USA" movieclip's population property, I could say "_parent._parent.population". Or, rather than doing relative references, I could do the absolute reference and just say "_root.population". _root simply refers to the main level in our heirarchy.

I know this was a lot. Hope it made some sense.

[dhamer]

AZ,

Are you still available? I just returned from an unexpected trip. I have overlooked the AS with the bug, however I was unable to spot it.

Cheers

[dhamer]

Would anyone be able to point out the error in this code?

code:
------------------------------------------------------------------------
onClipEvent (enterFrame) {


_root.fadeIn(this);


if (this._alpha >= 100) {


_root.fadeOut(this);


_root.fadeIn("_root.img2");


}


}


------------------------------------------------------------------------

Thanks a mil.

[AZ3DGuy]

Actually, there's no error in the code, per se. The bug is in the functionality... you see, the code has the (this) image fading in onEnterFrame. Then it has the image fadeOut when its alpha gets to be over 100. Well, the fadeOut image will dip the alpha to below 100, at which point the fadeIn functionality will cause it to continue fading in. Until, that is, the alpha gets to be over 100 again, at which point it begins to fade back out. The image's alpha will be perpetually bouncing between 95 and 105.

[dhamer]

So, we would need a way to tell the MC to perfom the function only once?

[AZ3DGuy]

exactly. So here's how I would do it... this is one of those areas, though, where every programmer is different. If someone else suggests a better way to do it, that's great. If you yourself think of a better way to do it, that's even better.

onClipEvent (enterFrame) {
  if (!this.all_faded_in) {
    _root.fadeIn(this);
  } else {
    _root.fadeOut(this);
    _root.fadeIn("_root.img2");
  }
}

In plain english, this first line reads "If not all faded in..." or, more accurately, "If the variable 'all_faded_in' is not true...". So now all we need is the variable all_faded_in to be set to true somewhere. This should be in our original fadeIn function:

function fadeIn(myMC) {
  if (myMC._alpha < 100) {
    myMC._alpha += 5;
  } else {
    myMC.all_faded_in = true;
  }
}

See if that does anything.

[dhamer]

Great. Now when I test, the first image fades in, reaches 100, and then fades backout. However, img2 does not fade in.

This is my action layer:

function fadeIn(myMC) {
if (myMC._alpha < 100) {
myMC._alpha += 5;
} else {
myMC.all_faded_in = true;
}
}
function fadeOut(myMC) {
if (myMC._alpha > 0) {
myMC._alpha -= 5;
}
}

This is img1 MC:

onClipEvent (load) {
this._alpha = 0;
}
onClipEvent (enterFrame) {
if (!this.all_faded_in) {
_root.fadeIn(this);
} else {
_root.fadeOut(this);
_root.fadeIn("_root.img2");
}
}

This is img2 MC:

onClipEvent (load) {
this._alpha = 0;
}

So am I helpless? Thanks for all your help.

[AZ3DGuy]

Not helpless at all. In fact, you're most of the way there. All you have to do is take the same code that you've put onto "img1", and put it on "img2" and "img3" and all the rest. Be sure to change the line:

_root.fadeIn("_root.img2");

to:

_root.fadeIn("_root.img3");

on img2. On "img3", have it fadeIn img4, and so on. Later on, if you're interested, I'll show you how to make it so that it dynamically figures out which one to fadeIn next, so that you can have the same code on each MC. Anytime you can have the same code on multiple MCs, you've built in reusability, which is absolutely key to good programming.