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.

[kglad]

what's the video component instance name?

[mnarlock]

For this button it's video_scarcity

[kglad]

i didn't realize this is more trouble than it's worth. 

to work around the problems, put a stage colored moveiclip over your video and fade it out and in when you want to fade your video in and out, resp.

function fadeInF(mc){

createjs.Tween.get(mc).to({alpha:1}, 1000);

}

function fadeOutF(mc){

createjs.Tween.get(mc).to({alpha:0}, 1000)

}

[kglad]

that can't work either.  

i can say it's doable, but it would take me more than 15 minutes to figure it out, and that's beyond my volunteer limit.  maybe someone else will help or hire someone.

[JoãoCésar · Accepted solution]

Hi.

Video components wrap DOM elements, so you'll need CSS for it.

You can add the styles in the HTML file using a publish template or use the .animate method in JavaScript, for example.

var root = this;

// the two methods below could live in the first frame
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" });
    });
};

// you can call this in each frame
stage.on("drawend", root.onDrawEnd, null, true, { id: "video0", from: 0, to: 1, duration: 1000 });

Regards,

JC

[kglad]

if you put that code on the main timeline, prefix that code with

var root = this;

[JoãoCésar]

Thanks a lot, k!

Totally forgot.

Updated the answer to not cause confusion.

[kglad]

no problem, and good post!

[mnarlock]

So the only way I could get it to work was to put your code on every frame that had video followed by:

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

[kglad]

there are better ways to handle that, but if you have something that works, leave it.

[mnarlock]

Curious, though. How should it be done properly? I would have thought defining those functions in frame 0 would have worked.

[kglad]

use one video component instance.  change its src property to change mp4's displayed 

[JoãoCésar]

You can also code the CSS in the HTML or in a CSS file and then only change the classes using JavaScript.

[mnarlock]

Quick question on the approach listed above. When I run a video via a button and it completes...then click another button and it completes...if I go back to the original button it fades up, but then disappears immediately. 

Any thoughts on why? 

[kglad]

you have more than one fade running. eg, you have two button listeners when the problem occurs.

can you see how your re-adding the listener?

[mnarlock]

That makes sense. Is there a way to stop a listener before another starts?

[kglad]

yes.

for anything you want to execute once, use

if(!this.alreadyExecuted){
// the code 

this.alreadyExecuted=true;

}

[mnarlock]

That didn't work, I'm afraid. The way I used your suggestion was as follows, maybe I interpeted it wrong or applied it incorrectly:

/*FADE IN/OUT VIDEOS*/

var root = this;

// Set up

root.onDrawEnd = function(e, data)

{

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

};

if(!this.alreadyExecuted){

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" });

    });

};

this.alreadyExecuted=true;

}

// Fade

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

[mnarlock]

Basically, every video that has played through completely once and faded away, upon next button push will fade up, then disappear.

[kglad]

what are you doing to prevent multiple button listeners?

[mnarlock]

Well, honestly, not a darn thing. I'm not sure how to manage such a thing. Basically, all the buttons sit on the timeline. When a button is pushed, the header jumps to a specific frame and plays the video at that frame. On each of those frames I have actions that stop at the frame, then execute the functions for fade up/down as you see above.

[kglad]

you have code that adds listeners to buttons, correct?

that code needs to execute once, only.

[mnarlock]

Yes, each button has the below, with a different frame indicated depending on which video is to be played.

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

function fl_ClickToGoToAndStopAtFrame_2()

{

this.gotoAndStop(0);

}

[kglad]

the addEvent...  needs to execute once