dcsimg
A Flash Developer Resource Site

Results 1 to 19 of 19

Thread: Fading a Video in through ActionSCript?

  1. #1

    Fading a Video in through ActionSCript?

    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

  2. #2
    Moderator
    Join Date
    Apr 2001
    Location
    Akron OH, USA
    Posts
    4,841
    from an aesthetic point of view, does sound typically fade in when the visual part of video presentation also fades in.
    aviarts.com - web development and flash development

  3. #3
    Flash Video Moderator Wheels's Avatar
    Join Date
    Dec 2000
    Location
    Minneapolis
    Posts
    1,590
    Hey hp3,

    How about adding that to my script?

  4. #4
    Moderator
    Join Date
    Apr 2001
    Location
    Akron OH, USA
    Posts
    4,841
    ok, I havent tested this so maybe somebody can try it out and let us know how it works.

    This works - Wheels

    Code:
    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");
    Last edited by Wheels; 02-18-2003 at 01:42 AM.
    aviarts.com - web development and flash development

  5. #5
    Flash Video Moderator Wheels's Avatar
    Join Date
    Dec 2000
    Location
    Minneapolis
    Posts
    1,590
    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.

  6. #6
    Flash Video Moderator Wheels's Avatar
    Join Date
    Dec 2000
    Location
    Minneapolis
    Posts
    1,590
    - 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:
    // 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
    Last edited by Wheels; 02-18-2003 at 02:50 AM.

  7. #7
    Moderator
    Join Date
    Apr 2001
    Location
    Akron OH, USA
    Posts
    4,841
    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.
    aviarts.com - web development and flash development

  8. #8
    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!

  9. #9
    Flash Video Moderator Wheels's Avatar
    Join Date
    Dec 2000
    Location
    Minneapolis
    Posts
    1,590
    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.
    Last edited by Wheels; 02-18-2003 at 01:37 AM.

  10. #10
    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...

  11. #11
    Flash Video Moderator Wheels's Avatar
    Join Date
    Dec 2000
    Location
    Minneapolis
    Posts
    1,590
    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:

    Code:
    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.
    Last edited by Wheels; 05-11-2006 at 11:13 PM.

  12. #12
    Moderator
    Join Date
    Apr 2001
    Location
    Akron OH, USA
    Posts
    4,841
    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.
    Code:
    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");
          }
       }
    };
    aviarts.com - web development and flash development

  13. #13
    Flash Video Moderator Wheels's Avatar
    Join Date
    Dec 2000
    Location
    Minneapolis
    Posts
    1,590
    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.

    Code:
    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();
    Last edited by Wheels; 09-25-2003 at 01:17 AM.

  14. #14
    Junior Member
    Join Date
    Apr 2002
    Posts
    13
    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.

  15. #15
    Flash Video Moderator Wheels's Avatar
    Join Date
    Dec 2000
    Location
    Minneapolis
    Posts
    1,590
    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.

  16. #16
    Junior Member
    Join Date
    Dec 2000
    Posts
    24

    worked great but.....

    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
    -beware of the quiet ones... you never know what they are thinking-

  17. #17
    Flash Video Moderator Wheels's Avatar
    Join Date
    Dec 2000
    Location
    Minneapolis
    Posts
    1,590
    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.

    Code:
    _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);
    Last edited by Wheels; 11-04-2004 at 02:41 PM.

  18. #18
    Junior Member
    Join Date
    Dec 2000
    Posts
    24
    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
    -beware of the quiet ones... you never know what they are thinking-

  19. #19
    Flash Video Moderator Wheels's Avatar
    Join Date
    Dec 2000
    Location
    Minneapolis
    Posts
    1,590
    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:

    Code:
    if (MEDIA.isplaying == true) MEDIA.current.stop();
    This avoids the complicated targeting of say _root.media.holder...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center