Highlighted

Video component overlaps all the other animation items

Explorer ,
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.

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.

Views

1.2K

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

Video component overlaps all the other animation items

Explorer ,
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.

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.

Views

1.2K

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
Aug 12, 2017 1
Contributor ,
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.

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...
Aug 12, 2017 0
Adobe Community Professional ,
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.

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...
Aug 12, 2017 0
Explorer ,
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.

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...
Aug 12, 2017 0
Adobe Community Professional ,
Aug 13, 2017

Copy link to clipboard

Copied

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

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...
Aug 13, 2017 0
Explorer ,
Aug 13, 2017

Copy link to clipboard

Copied

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

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...
Aug 13, 2017 0
Adobe Community Professional ,
Aug 13, 2017

Copy link to clipboard

Copied

Then re-read my first post in this thread.

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...
Aug 13, 2017 0
Adobe Community Professional ,
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

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...
Aug 13, 2017 1
Adobe Community Professional ,
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

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...
Aug 14, 2017 1
Adobe Community Professional ,
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.

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...
Aug 14, 2017 1
Adobe Employee ,
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

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...
Aug 18, 2017 0
Adobe Employee ,
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.

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...
Aug 17, 2017 4
New Here ,
Sep 22, 2017

Copy link to clipboard

Copied

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

Fabio

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 22, 2017 0
Dinesh72 LATEST
New Here ,
Sep 25, 2019

Copy link to clipboard

Copied

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.

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 25, 2019 0
New Here ,
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.

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 25, 2019 0
New Here ,
Nov 16, 2018

Copy link to clipboard

Copied

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

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 16, 2018 0