Skip to main content
dean funk
Inspiring
Jul 18, 2018 2:30 PM UTC
Answered

Animation Layers over video component in Animate

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?

This topic is closed to new replies. Start a new post to keep the conversation going.
JoãoCésar17023019
JoãoCésar17023019Correct answer
Community Expert
Jul 18, 2018 5:27 PM UTC

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

View reply

10 replies

joec57349213
Participant
Sep 17, 2020 6:06 PM UTC

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.

Translate
dean funkAuthor
Inspiring
Jul 18, 2018 5:07 PM UTC

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.

Translate
JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
Jul 18, 2018 5:27 PM UTC

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

Translate
    dean funkAuthor
    Inspiring
    Jul 21, 2018 4:21 PM UTC

    You rock dude! thanks

    Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices