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 it's 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]

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

[kglad]

thumbs up