Highlighted

Animation Layers over video component in Animate

Explorer ,
Jul 18, 2018

Copy link to clipboard

Copied

I'm working on a Web Banner project where I need a mp4 video clip to play under animation.

Is there a work around to force the video layer under other layers?

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

1 - Go to the document properties and set the background color to full transparency;

2 - Change the canvas zIndex property to a value bigger than 0.

canvas.style.zIndex = "1";

3 - Optionally, disable click events for the canvas if you need to control the video.

canvas.style.pointerEvents = "none";

You can put these codes in the first frame of the main timeline or somewhere else.

I hope this helps.

Regards,

JC

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Animation Layers over video component in Animate

Explorer ,
Jul 18, 2018

Copy link to clipboard

Copied

I'm working on a Web Banner project where I need a mp4 video clip to play under animation.

Is there a work around to force the video layer under other layers?

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

1 - Go to the document properties and set the background color to full transparency;

2 - Change the canvas zIndex property to a value bigger than 0.

canvas.style.zIndex = "1";

3 - Optionally, disable click events for the canvas if you need to control the video.

canvas.style.pointerEvents = "none";

You can put these codes in the first frame of the main timeline or somewhere else.

I hope this helps.

Regards,

JC

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 18, 2018 0
Explorer ,
Jul 18, 2018

Copy link to clipboard

Copied

I just spent about 2 hrs with a tech from adobe support. He had no answer for me. I sent him a very simple test file that consisted of a video component layer with a mp4 under a very simple layer that contained a graphic.  of course when published the video overplays the graphic layer.

What I am building is a very simple html5 web banner in canvas.

The banner opens with the video autoplaying - then graphics animate on top of the video - eventually covering the video. and of course the whole time it needs to be clickable.

This is a standard application of a video web banner, something that I was able to bang out in Edge with no problems not additional scripting nothing.

If there is anyone out there that can help me, this would be greatly appreicated.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 0
Adobe Community Professional ,
Jul 18, 2018

Copy link to clipboard

Copied

Hi.

1 - Go to the document properties and set the background color to full transparency;

2 - Change the canvas zIndex property to a value bigger than 0.

canvas.style.zIndex = "1";

3 - Optionally, disable click events for the canvas if you need to control the video.

canvas.style.pointerEvents = "none";

You can put these codes in the first frame of the main timeline or somewhere else.

I hope this helps.

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2018 3
Explorer ,
Jul 21, 2018

Copy link to clipboard

Copied

You rock dude! thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2018 2
Adobe Community Professional ,
Jul 21, 2018

Copy link to clipboard

Copied

You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2018 0
New Here ,
Jul 21, 2018

Copy link to clipboard

Copied

2

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 21, 2018 0
New Here ,
Nov 26, 2018

Copy link to clipboard

Copied

Hi, how to add movieclip named "mc1" behind this video? Now everything is above the video.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2018 0
New Here ,
Sep 17, 2020

Copy link to clipboard

Copied

So you are saying to modify the css from the export?  Not seeing any settings to change the Z-index.  That worked in console.  I think Animate is over-rated.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 17, 2020 0