Adobe Animate CC Video Component always on top

[georgeg8162067]

Hi,

I want to use this new cool component in Animate CC the Video Component on HTML5 Canvas. But it is always forced to top of all layers, so even if my video layer is the bottom of the Layer list panel, after generation in the Published version it gets to the top of all layers so the video hides a lot ot other design elements.

Is there any workaround to put other symbols or movieclips above the Video Component?

Thank you in advance,

George

[Tom2015]

I'm looking for an answer for this too.

It seems using the Video component you cannot hide it either using "this.instance.visible = false;"

[ClayUUID · Accepted solution]

All canvas mode components, including the video component, render on top of everything else on the canvas because they're literally not part of the canvas. They're browser-native HTML elements floated above the canvas. There's nothing that can be done about this, you just have to work around it.

As for hiding them, since they're true DOM elements, you can use DOM methods to manipulate them. The instance name you give them is used as their element ID in the generated code, so if you had a component named bob, you could do:

document.getElementById("bob").style.opacity = "0.0";

Normally you'd set an element's CSS to display:none to hide it, but the components already set the value of display using inline CSS, which is much more work to override.

[georgeg8162067]

Thanks for your answer, but many of the AdServers requires to add such a layer to the top which has the same size as the banner creative and it is a Button symbol with 0 opacity and it has a ClickTag code on it. So even if i set the video's opacity to 0 in DOM, the Clicktag layer will not be clickable.

[ClayUUID]

Well, given that video ads are pure crystallized evil... good luck with that.

[Colin Holgate]

You can make button and image components too, which may well layer on top of the video.

[Tom2015]

ClayUUID wrote:

document.getElementById("bob").style.opacity = "0.0";

This works but if I wanted a button that makes the Video Component appear again it doesn't show.

Here's what I have:

document.getElementById("bob").style.opacity = "0.0";

this.bobBtn.addEventListener("click", fl_MouseClickHandler_6.bind(this));

function fl_MouseClickHandler_6()

{

  document.getElementById("bob").style.opacity = "1.0";

}

[coty_hsu]

Hi George,

Instead of using video component, try this:

var mtl = this;

//add video on the fly

var video = document.createElement('video');

var mainVid = new createjs.Bitmap(video);

video.src = 'video url';

video.autoplay = true;

mtl.addChild(mainVid);

// add button on top of video (the button MC is in the library and the linkage is set to "myButton");

var clickTagBTN = new lib.myButton();

mtl.addChild(clickTagBTN);

I hope this can solve your problem.

Regards,

Chih-Wei

[Ninjadesigner]

Solution to bring the hole video in to background you can use z-index. Like mention the normal canvas and the video-component are inseparate div´s in main html.

<div id="animation_container" style="background-color:rgba(255, 255, 255, 0.00); width:3840px; height:2160px">

  <canvas id="canvas" width="3840" height="2160" style="position: absolute; display: none; background-color:rgba(255, 255, 255, 0.00);"></canvas>

  <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:3840px; height:2160px; position: absolute; left: 0px; top: 0px; display: none; z-index: -1;">

  </div>

  </div>

Beware the canvas background in Animate set to transparent to see the video in background. So after Animate export you only need to add z-index too video.

Hope the video-component will be add some more features in future.

[eugener2418576]

Mate, perfect.

z-index: -1 on dom-overlay

Make sure stage background is transparent.

Too Easy!