Fading a Video in through ActionSCript?

[chapskey]

Hi,

I currently have my quicktime video linked into my flash movie by using the following code:

loadMovie("video1.swf", "video1");
video1._xscale = 100;
video1._yscale = 100;
video1._x = 330;
video1._y = 143;

and also have an empty video clip on the same scene called 'video1'
The swf file that it is loading has the Quicktime embedded in it at 25fps.

It all works ok, and I hope this method is right, but what I want to do is have the video (or swf file) fade in from 0% alpha.
Is this possible to do through Action Script rather than doing it through the original video footage????


Thanks heaps..


chaps

[hp3]

from an aesthetic point of view, does sound typically fade in when the visual part of video presentation also fades in.

[Wheels]

Hey hp3,

How about adding that to my script?

[hp3]

ok, I havent tested this so maybe somebody can try it out and let us know how it works.

This works - Wheels

function fadeIn() {
	     _root.video1.onEnterFrame = function() {
           this._alpha += 1;
           _root.so.setVolume(this._alpha);  //sound fade
           trace(this._alpha);
           if (_root.video1._alpha>=100) {
                this._alpha = 100;
                _root.so.setVolume(this._alpha); //sound fade
			             this.onEnterFrame = null;
		          }
	       };
}
function makeAndFade(myMovie) {
     loadMovie(myMovie, "video1");
     _root.so = new Sound(_root.video1); //sound fade
	    this.onEnterFrame = function() {
		        if (_root.video1._currentframe == 1) {
			           _root.video1.stop();
			           _root.video1._alpha = 0;
			           _root.video1._xscale = 100;
			           _root.video1._yscale = 100;
			           _root.video1._x = 330;
		         	  _root.video1._y = 143;
		         	_root.video1.play();
			         this.onEnterFrame = fadeIn;
		         }
	     };
}
makeAndFade("mini2.swf");

[Wheels]

OK, done deal - I just edited your code in place hp3.

For some reason we can't create a sound object in video1 the way you had it. I think you would want to have another function to do this.

I just created a sound object on the _root and assigned video1 as the target, not as tidy - but it works.

[Wheels]

- Well, after much revising - what you have here is a function that will load your external video (or any other) .swf file into a movie clip on the stage, set the _x and _y positions, and fade the video and sound at the same time.

The function will also calculate the frame rate of the video being imported so that you can apply the function consistently based on fade in seconds.

Props to hp3 for suggesting and adding the sound fade.

You can just call the makeAndFade(); function from anywhere in your movie - like on a button. Remember, functions should always reside on the first frame of your movie - but can be called from anywhere.

Code is MX, will not work in F5.

// code by Wheels and hp3 at www.flashkit.com

// (swf file, targetClip, _x, _y, seconds)

function makeAndFade(myMovie, movieClip, yPos, xPos, fadeTime) {
	     loadMovie(myMovie, _root[movieClip]);                   // load movie
	     _root.so = new Sound(_root[movieClip]);                 // create sound object
	     fade = 100;                                             // set value used later for 0 seconds
	     this.onEnterFrame = function() {
		          if (_root[movieClip]._currentframe == 1) {         // see if movie is there yet
			             _root[movieClip].stop();                       // stop while we make adjustments
			             _root[movieClip]._alpha = 0;                   // set alpha to zero
			             _root[movieClip]._x = xPos;                    // set new _x position
			             _root[movieClip]._y = yPos;                    // set new _y position
			             _root[movieClip].play();                       // start playing
			             this.onEnterFrame = function() {               // reassign enterFrame
				             if (fadeTime>0) { 	                           //  0 will fail if this is not here
								              fade = 100/(fadeTime*_root[movieClip].framerate); 	// check frame rate of video
				             }
				             _root[movieClip]._alpha += fade;              // increment alpha up
				             _root.so.setVolume(_root[movieClip]._alpha);  // increment sound up
				             if (_root[movieClip]._alpha>=100) { 
					                _root[movieClip]._alpha = 100;
				           	     _root.so.setVolume(_root[movieClip]._alpha);
					                this.onEnterFrame = null;                 // end clipEvent
				             }
             };
         }
     };
}

makeAndFade("mini2.swf", "video1", 100, 200, 5);               // call the function

[hp3]

ok glad you got it working.

I assume that fading both sound and video like this does not affect the player more significanly than fading on or the other individually.

[chapskey]

WOW, thanks so much hey!

I managed to get the second last code on the post working perfect, but am still having a little trouble getting the last code posted working, but im working on it...

Thanks heaps again... lifesavers!

[Wheels]

OK,

I made another adjustment - I'm now passing the fade amount as a parameter as well so you can adjust it on the fly in seconds to fade in. I'm going in and checking the frame rate of the movie and setting the fade that way, that way you can consistently apply this function no matter the frame rate of the video.

I wish I could take credit for thinking of it, but I was working on this when one of my bike polo buddies happened to stop by. He has a PhD in fluid dynamics and another PhD in wind powered dynamics - so he has a different way of looking at things.

Now I just need to talk him into helping me build a reliable buffering component for loading video! Wouldn't that be handy.

[chapskey]

man, what can i say... it just works an absolute treat, better than anything i could have ever hoped for ah!

is it possible to make it stop at the end of the movie rather than continuously looping, or even fade back out to nothing once it finishes, if not that's cool! Im heaps happy with you lads have done!

Thanks again...

[Wheels]

OH MAN!!

Can I wash car while I'm at it?

Well it wasn't that hard actually - just a reversal of the first fade. But since your just cut and pasting, I'm going to make you work a little for this one.

Just replace the last "onEnterFrame = null" from the script above with this one:

this.onEnterFrame = function() {
	targetFrame = (Math.round((_root[movieClip]._totalframes)-(fadeTime*_root[movieClip].framerate)));
	if (_root[movieClip]._currentframe >= targetFrame) {
			_root[movieClip]._alpha -= fade;
			_root.so.setVolume(_root[movieClip]._alpha);
			if (_root[movieClip]._alpha<=0) {
			  _root[movieClip]._alpha = 0;
			  _root.so.setVolume(_root[movieClip]._alpha);
			}
			if (_root[movieClip]._currentframe == _root[movieClip]._totalframes) {
			   _root[movieClip].unload();  	// could also be stop();
			   this.onEnterFrame = null;
			    trace("done");
			}
		}
};

The trick will be making sure you have all your brackets in the right place.

Good luck! Now you owe me a mmm, dohnuts.

[hp3]

here is the code with increments of 3 space indents. Not sure why a space would be more or less physical space on a given browser or computer.

this.onEnterFrame = function() {
   targetFrame = (Math.round((_root[movieClip]._totalframes)-(fadeTime*_root[movieClip].framerate)));
   if (_root[movieClip]._currentframe >= targetFrame) {
      _root[movieClip]._alpha -= fade;
      _root.so.setVolume(_root[movieClip]._alpha);
      if (_root[movieClip]._alpha<=0) {
         _root[movieClip]._alpha = 0;
         _root.so.setVolume(_root[movieClip]._alpha);
      }
      if (_root[movieClip]._currentframe == _root[movieClip]._totalframes) {
         _root[movieClip].unload(); // could also be stop();
         this.onEnterFrame = null;
         trace("done");
      }
   }
};

[Wheels]

Just an update to this code use.

I just noticed that the "framerate" variable is only set in files created with Sorenon's Squeeze - so you may want to pass the framerate as a variable if you have a .swf file created with other software. This function will fail without a framerate variable.

I've changed it to a MovieClip.prototype as well.

MovieClip.prototype.posAndFade = function(myMovie, yPos, xPos, fadeTime, framerate) {
	var myMC = this.createEmptyMovieClip("hold", 1);
	myMC.loadMovie(myMovie);
	this.so = new Sound(myMC);
	this.onEnterFrame = function() {
		if (myMC._currentframe == 1) {
			myMC.stop();
			myMC._alpha = 0;
			myMC._x = xPos;
			myMC._y = yPos;
			if (framerate<=0) {
				framerate = 20;
				trace(" -- framerate param == null :: defaulting to 20fps -- ");
			}
    if (myMC.framerate) {
				framerate = myMC.framerate;
			}
			myMC.play();
			this.onEnterFrame = function() {
				if (fadeTime<=0) {
					myMC.play();
					myMC._alpha = 100;
					this.onEnterFrame = null;
				}
				if (fadeTime>0) {
					var fade = 100/(fadeTime*framerate);
					myMC._alpha += fade;
					this.so.setVolume(myMC._alpha);
				}
				if (myMC._alpha>=100) {
					myMC._alpha = 100;
					this.so.setVolume(myMC._alpha);
					this.onEnterFrame = function() {
						targetFrame = (Math.round((myMC._totalframes)-(fadeTime*framerate)));
						if (myMC._currentframe>=targetFrame) {
							myMC._alpha -= fade;
							this.so.setVolume(myMC._alpha);
							if (myMC._alpha<=0) {
								myMC._alpha = 0;
								this.so.setVolume(myMC._alpha);
							}
							if (myMC._currentframe == myMC._totalframes) {
								myMC.removeMovieClip();
								this.onEnterFrame = null;
							}
						}
					};
				}
			};
		}
	};
};
_root.posAndFade("preview/test.swf", 100, 200, 2, null);
stop();

[X-Nice]

I know, i'm still a noob at this but you would doin the "fadein" be easier this way:

drawing a new MC(AS or Manually) and jus make it the same color as your movie background or just black.

Size it to the same dimensions as movie and place it over the video(AS or Manually)

Alpha fade that movie when u start playinig the video.

I use something like this and the "fadein" effect is pretty good.

[Wheels]

Whatever you find easiest, but creating another object seems like extra work - especially when you can just do it with a line of code - or even easier still, just copy and paste my code.

[spywilliams]

This worked great but what if I want to load the movie on the second level? Here is my example, I have an image loading on the _0level for the background. I then have a video that I would like to load on top of the image. Where would I indicate this in the code used above. Would I put it in the last line of the code that is using the _root?
I am somewhat of a newbe at this, if you could help in any way that would be great. By the way I used the code in this string and it worked awesome!!! I don't think you know how much you helped me.
Thank you so much.
spy

[Wheels]

The reference to _root is a bit misleading, as this is a MovieClip.prototype - so it's really meant to control a movie clip. So I believe calling this on the _root would control everything in your _levels.

I used to use _levels, but not any more as they're a bit harder to target.

I would just create an empty clip and keep all of your code a bit more compartmentalized. So, if you want to create "_levels" with clips - try this.

_global.MAIN = this; // _root
_global.BKG = MAIN.createEmptyMovieClip("background", 1);
BKG.attachMovie("your_bg",  "your_bg",  1);
_global.MEDIA = MAIN.createEmptyMovieClip("media",  2);
MEDIA.posAndFade("preview/test.swf", 100, 200, 2, null);

[spywilliams]

Thanks,
I went with your suggestion of keeping everything compartmentalized. I put the original in the actual movie clip I had the swf. loading into. levels always throw me off. So I figured taking your advice and working this way I would be better off in the long run.

Thanks again,
spy

[Wheels]

Targeting from external .swfs when loading into levels gets confusing in a hurry.

One nice thing about the way I've described above, is that once you set these _global references you can target them from anywhere within your movie, or create calls in extrernal .swf's - that once loaded will refernce the _globals.

For example, you could set a variable on the first frame of a video .swf to check for a variable in the main movie, like:

if (MEDIA.isplaying == true) MEDIA.current.stop();

This avoids the complicated targeting of say _root.media.holder...