MC fade in/out using actionscript!


#1

Hello all,
i just need a simple snippet of code to fade a movie clip in and stop…and then a snippet to fade it out using AS instead of tweens. Im wanting a smooth fade. I’v searched all over and cant seem to find an answer. Im using AS2. Thanks a ton in advance.


#2

You could use an actionscript Tween class (Tweener, Greensock, just google them if you’re interested).

There’s also a (little less efficient) tween class build into the adobe library that comes with Flash. Details can be seen “here”:http://www.republicofcode.com/tutorials/flash/tweenclasseasing/

The snippit you requested would look like this:

import mx.transitions.Tween;
import mx.transitions.easing.*;

var myTween:Tween = new Tween (mc,"_alpha",Strong.easeOut,0,100,2,true);

myTween.onMotionFinished = function () {
   new Tween (mc,"_alpha",Strong.easeOut,100,0,2,true);
}

The above tweens movieclip with name mc to 100 alpha and back to zero. In order to have a little wait in between I used to tween from 100 to 100 for example (more sophisticated engines have a delay parameter).

General syntax for the Adobe tweening engine is:

var tweenInstanceName:Tween = new Tween (object, property, easefunction, begin, end, duration, useSeconds) 

#3
yourMc._alpha=0;

yourMcButton.onRelease = function() {
     yourMc._alpha=0;
     yourMc.onEnterFrame=function() {
          if (yourMC._alpha >= 100){
               delete yourMC.onEnterFrame;
          } else {
               yourMC._alpha += 5;
          }
     }
}

Same for fade out, but _alpha <= 0.


#4

Thanks guys for the reply…

@pezflash - what would the adjusted code be if this wasnt for a button function? Just the fade part.


#5
my_design09 said

Thanks guys for the reply…

@pezflash - what would the adjusted code be if this wasnt for a button function? Just the fade part.

yourMc._alpha = 0;

function fade():Void
{
     yourMc._alpha = 0;
     yourMc.onEnterFrame = function()
    {
          if (yourMC._alpha >= 100)
          {
               delete yourMC.onEnterFrame;
          }
          else
          {
               yourMC._alpha += 5;
          }
     }
}

//call fade() whenever you need
fade();

Nested functions, that is, functions encapsulated inside another functions, are usually a bad habit, but in this case it should work well :slight_smile:


#6

^ Thanks Dani. :stuck_out_tongue:

MyDesign_09, i made i mistake with Caps spelling, yourMc not yourMC. Everywhere it appears.


#7

Thanks again guys! I have to say the authors on FD are a great help! =o) I appretiate it very much!

@DaniMun - I used your code and it works perfectly for a fade out? Yet im still not getting where to put the “call fade” function for the fade in? What would that script look like? Thanks for helping! Script isnt my specialty.


#8

Fade In and Fade Out functions.

Anyway, don’t know the reason of avoiding tween engine for this, it will make your life much easier. :stuck_out_tongue:


function fadeIn(targetMc):Void {
     //targetMc._alpha = 0;
     targetMc.onEnterFrame = function() {
          if (targetMc._alpha >= 100) {
               delete targetMc.onEnterFrame;
          } else {
               targetMc._alpha += 5;
          }
     }
};

function fadeOut(targetMc):Void {
     targetMc.onEnterFrame = function() {
          if (targetMc._alpha <= 0) {
               delete targetMc.onEnterFrame;
          } else {
               targetMc._alpha -= 5;
          }
     }
};

//call fadeIn parsing the id name of your target MC
fadeIn(yourMovieClipID);

//call fadeOut parsing the id name of your target MC
fadeOut(yourMovieClipID);

#9

:stuck_out_tongue:

yourMC.fadeAlpha=function(from:Number,to:Number,steps:Number){
	var n=(to-from)/steps
	this._alpha=from
    this.onEnterFrame=function(){
		 
		if(Math.abs(to-this._alpha)<=Math.abs(n)){
			this._alpha=to
			delete this.onEnterFrame
		}
              this._alpha+=n
	}
}
yourMC.fadeAlpha(100,0,20)

#10

Guys, guys, guys! Why stimulate this when a Tween engine is so much easier to use and produces nicer (eased) or at the very least the same results? :stuck_out_tongue: I guess this might be (considered) easier to understand than the tween engine…

pezflash said

Anyway, don’t know the reason of avoiding tween engine for this, it will make your life much easier. :stuck_out_tongue:

This!

#11

Hey all,
Thank you for all the help. I finally got it to work and learned something new…much appretiated! You all are the best!