• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Video component overlaps all the other animation items

Explorer ,
Aug 12, 2017 Aug 12, 2017

Copy link to clipboard

Copied

The video component overlaps all the other animation items even though I have placed it on the bottom layer I am using an mp4 in the components video application. Is there a way to fix the problem.

Views

1.8K

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
community guidelines

correct answers 1 Correct answer

Adobe Employee , Aug 17, 2017 Aug 17, 2017

If you'd like your video at the bottom and other animations playing on top of it, you can try this:

1. Set the stage color to transparent in Properties panel.

2. add the following line of code in Actions panel on frame 1:

          var dom_container = document.getElementById("dom_overlay_container");

          dom_container.style.zIndex=-1;

This will place the Components as underlay instead of overlay to the canvas.

Votes

Translate

Translate
Contributor ,
Aug 12, 2017 Aug 12, 2017

Copy link to clipboard

Copied

Have you tried adding the video component inside a symbol? The video component is likely adding a video object as a child of the video component's parent, which would mean that the video object would be placed on top of everything else inside the parent. By placing the video component inside a symbol, the parent of the video component would be that symbol.

Votes

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
community guidelines
LEGEND ,
Aug 12, 2017 Aug 12, 2017

Copy link to clipboard

Copied

If you're working in an HTML5 Canvas document, components will always overlap everything on the stage, no matter what you do, because they're not drawn on the stage canvas. They're separate browser DOM elements floating above the canvas. It's physically impossible for anything on the stage to be above them.

Votes

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
community guidelines
Explorer ,
Aug 12, 2017 Aug 12, 2017

Copy link to clipboard

Copied

I placed the video component in a symbol and it did not work.  What if you change the file type to flv or another file associated with

Adobe Animate. Is their any other possibility.

Votes

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
community guidelines
LEGEND ,
Aug 13, 2017 Aug 13, 2017

Copy link to clipboard

Copied

You still haven't said whether you're working in an AS3 or Canvas document.

Votes

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
community guidelines
Explorer ,
Aug 13, 2017 Aug 13, 2017

Copy link to clipboard

Copied

Im working fla canvas mode then im exporting to html 5 oma.

Votes

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
community guidelines
LEGEND ,
Aug 13, 2017 Aug 13, 2017

Copy link to clipboard

Copied

Then re-read my first post in this thread.

Votes

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
community guidelines
LEGEND ,
Aug 13, 2017 Aug 13, 2017

Copy link to clipboard

Copied

I had a few days where Animate wasn't working, so I couldn't test an idea. Can you tell me what is the difference between what is being asked for and what I've done here?:

quail

Votes

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
community guidelines
LEGEND ,
Aug 14, 2017 Aug 14, 2017

Copy link to clipboard

Copied

That isn't using a video component though, it's piping video onto the stage via a bitmap object, which doesn't work on iOS.

Putting Video on Canvas

Votes

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
community guidelines
LEGEND ,
Aug 14, 2017 Aug 14, 2017

Copy link to clipboard

Copied

I didn't see any mention of iOS, but it's good to know that it doesn't work there.

I was more thinking about the need there was, and not the question that was asked. I'm not knowingly doing any drawImage(), but I suppose CreateJS does when it sees my line:

var bitmap = new createjs.Bitmap(vid);

BTW, the animation does appear over the first frame of the video on my iPad, though the whole video has to download before it does that. I'm trying to see if there's a way to set it playing. I should use a shorter clip, it takes awhile for iPad to load the video.

Votes

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
community guidelines
Adobe Employee ,
Aug 18, 2017 Aug 18, 2017

Copy link to clipboard

Copied

Hi Michael,

If any of the solutions here helped you, can you take a moment to mark it as correct. It will help other users with a similar question that come across this post.

Thanks,

Preran

Votes

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
community guidelines
Adobe Employee ,
Aug 17, 2017 Aug 17, 2017

Copy link to clipboard

Copied

If you'd like your video at the bottom and other animations playing on top of it, you can try this:

1. Set the stage color to transparent in Properties panel.

2. add the following line of code in Actions panel on frame 1:

          var dom_container = document.getElementById("dom_overlay_container");

          dom_container.style.zIndex=-1;

This will place the Components as underlay instead of overlay to the canvas.

Votes

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
community guidelines
New Here ,
Sep 22, 2017 Sep 22, 2017

Copy link to clipboard

Copied

I had the same problem and this worked!!!! Thanks so much!!

Fabio

Votes

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
community guidelines
New Here ,
Sep 25, 2019 Sep 25, 2019

Copy link to clipboard

Copied

LATEST
Hi Fabiodessena, I have also same Issue "The video component placed it on the bottom layer I am using an mp4 in the components video application." but above video layer animation work not visible please help me. how to solve the issue.

Votes

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
community guidelines
New Here ,
Sep 25, 2019 Sep 25, 2019

Copy link to clipboard

Copied

Hi, I cant understand Where to add the above code in animate CC HTML Canvas, Please reply back.

Votes

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
community guidelines
New Here ,
Nov 16, 2018 Nov 16, 2018

Copy link to clipboard

Copied

I tried this and it worked on all browsers except Chrome.  That's a deal-killer.

Votes

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
community guidelines