Fade up/out MovieClip

Question

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.

JoãoCésar17023019 · Accepted Answer

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

mnarlock · Answer

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.