Fade up/out MovieClip

[mnarlock]

I have a simple scene with multiple buttons that each start a different video. Each video lives on a separate frame. Click a button, and it goes to the salient frame and the video plays. What I'd like to do is have the video fade up, play, then fade out. I don't know how to do this. Each button click goes to the frame where it's video lives. 

The first frame has all of the actions. They take the following form:

this.scarcity_btn.addEventListener("click", fl_ClickToGoToAndStopAtFrame_6.bind(this));

function fl_ClickToGoToAndStopAtFrame_6()

{

this.gotoAndStop(5);

}

At each frame where a particular video lives, there's:

this.stop();

Since mp4's dont' support alpha channels, I can't do the fading in/out in the video file itself. 

Any help would be appreciated.

[mnarlock]

Well, I added the below and still no joy. Once the button is pushed and the video runs its course, upon the next button push it fades up over 2 seconds then disappears, or I'm presuming the opacity goes to 0.

if(!this.alreadyExecuted){

this.lead_btn.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));

function fl_ClickToGoToAndStopAtFrame_2()

{

this.gotoAndStop(0);

}

this.alreadyExecuted=true;

}

[kglad]

not the function, too.

upload you fla, post link.

[mnarlock]

https://www.dropbox.com/scl/fo/73t5ruyokoldetojx2kvb/AG3ofuHSadirwdhtp3Dv1WQ?rlkey=nws4gsn1w7doo0ssk...

[kglad]

which of the 3 flas is the current fla?

[mnarlock]

Oh sorry about that. It's ogl_interactive_v01_wip02.fla

--
Michael J. Narlock

[mnarlock]

It's ogl_interactive_v01_wip02.fla.

[mnarlock]

I tried a method to omit the function, as seen below, and that too didn't work. 

if(!this.alreadyExecuted){

this.lead_btn.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));

this.alreadyExecuted=true;

}

function fl_ClickToGoToAndStopAtFrame_2()

{

this.gotoAndStop(0);

}

[mnarlock]

Thank you both for your patience in helping me figure this out. I think I'm on the right path to redo the way I had done my previous layout, but I'm still struggling with one important aspect. Once I've clicked a button and the video has run it's course, the next time I click the button (any button really since I'm using the same video component and just changing the source), the video fades up and then disappears immediately. I know what's causing it because if I set the opacities in the e.currentTarget.animate from 1 to 1 (to: to to: in the parlance of the code) the video is replayable...it fades up, it just never fades down. I'm struggling to understand why the video can't fade down and the function bring it back upon button repress.

My suspicion is that the function thinks the video has "ended" already and just changes the opacity to 0 after duration. Is there a clever way to reset that? Perhaps this isn't what's going on...just a guess, really.

The code is below:

var root = this;

root.onDrawEnd = function(e, data)

{

    root.fadeVideo(data.id, data.from, data.to, data.duration);

};

root.fadeVideo = function(id, from, to, duration)

{

    currentVideo = document.getElementById(id);

currentVideo.animate([{ opacity: from }, { opacity: to }], { duration: duration });

    currentVideo.addEventListener("ended", function(e)

    {

        e.currentTarget.animate([{ opacity: to }, { opacity: from }], { duration: duration, fill: "forwards" });

    });

};

function changeVideoSource() 

{ 

stage.on("drawend", root.onDrawEnd, null, true, { id: "yourVideo", from: 0, to: 1, duration: 2000 });

document.getElementById("yourVideo").src="../videos/HABs_eng.mp4"; 

} 

this.yourButton.on("click", changeVideoSource);

function changeVideoSource2() 

{ 

stage.on("drawend", root.onDrawEnd, null, true, { id: "yourVideo", from: 0, to: 1, duration: 2000 });

document.getElementById("yourVideo").src="../videos/Lead_esp.mp4"; } 

this.yourButton2.on("click", changeVideoSource2);

[mnarlock]

For posterity, I figured out the issue as seen below:

root.fadeVideo = function(id, from, to, duration)

{

    currentVideo = document.getElementById(id);

currentVideo.animate([{ opacity: from }, { opacity: to }], { duration: duration, fill: "forwards" });

    currentVideo.addEventListener("ended", function(e)

    {

        e.currentTarget.animate([{ opacity: to }, { opacity: from }], { duration: duration, fill: "forwards" });

    });

[mnarlock]

Thank you to you both! I'll give this a shot. 

[kglad]

thumbs up