Highlighted

Adobe Animate HTML5/Canvas Component Re-sizing

Community Beginner ,
Feb 10, 2020

Copy link to clipboard

Copied

Hey everyone,

 

So I have a very odd issue. Basically we're converting courseware for a client and it was very video heavy. tons of .FLV's that were embedded in flash and it's all interactive, very rich media that even tracks if the user is getting steps right or wrong.

 

Anyways, this includes a lot of video's overlapping, often in Graphics/MC's that pause and play. When I try to do this in canvas it simply won't work as it appears that all the video has to be on a single layer due to how the DOM thing works in Canvas (which I admittably barely understand but I can roll with putting my video all on one layer).

 

However between Video's, which are generally a stepped prodecure (Step1, Step,2 etc) the video's flicker white when they unload/load the next. So this isn't an uncommon issue, above that is a layer with .PNG's as " holding frames " to hide the flicker. Though when they swap, they change size? The video is coming at 1110x738, the Video Element is 1110x738, the .PNG is also 1110x738 and yet they always come in at different sizes. 

If I take the .mp4's and .PNG's and slap them into After Effects they all line up perfectly, no weird sizing.. but in Adobe Animate it's like the Video Component is re-sizing my video. 

Any help would be appreciated, if you need anymore background information that would be great! We're stuck on windows 7 for the next month or so.. so I'm hoping I don't know an animate update.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

If you need precise control over your videos, you might want to consider forgoing video components and instead manage your video elements directly using raw JavaScript. Video "components" in Canvas documents are just a wrapper around the HTML5 <video> element, and the only real advantage they offer is existing as timeline entities.

TOPICS
How to, Import and export, Publish package

Views

202

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

Adobe Animate HTML5/Canvas Component Re-sizing

Community Beginner ,
Feb 10, 2020

Copy link to clipboard

Copied

Hey everyone,

 

So I have a very odd issue. Basically we're converting courseware for a client and it was very video heavy. tons of .FLV's that were embedded in flash and it's all interactive, very rich media that even tracks if the user is getting steps right or wrong.

 

Anyways, this includes a lot of video's overlapping, often in Graphics/MC's that pause and play. When I try to do this in canvas it simply won't work as it appears that all the video has to be on a single layer due to how the DOM thing works in Canvas (which I admittably barely understand but I can roll with putting my video all on one layer).

 

However between Video's, which are generally a stepped prodecure (Step1, Step,2 etc) the video's flicker white when they unload/load the next. So this isn't an uncommon issue, above that is a layer with .PNG's as " holding frames " to hide the flicker. Though when they swap, they change size? The video is coming at 1110x738, the Video Element is 1110x738, the .PNG is also 1110x738 and yet they always come in at different sizes. 

If I take the .mp4's and .PNG's and slap them into After Effects they all line up perfectly, no weird sizing.. but in Adobe Animate it's like the Video Component is re-sizing my video. 

Any help would be appreciated, if you need anymore background information that would be great! We're stuck on windows 7 for the next month or so.. so I'm hoping I don't know an animate update.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

If you need precise control over your videos, you might want to consider forgoing video components and instead manage your video elements directly using raw JavaScript. Video "components" in Canvas documents are just a wrapper around the HTML5 <video> element, and the only real advantage they offer is existing as timeline entities.

TOPICS
How to, Import and export, Publish package

Views

203

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
Feb 10, 2020 0
Adobe Community Professional ,
Feb 10, 2020

Copy link to clipboard

Copied

If you need precise control over your videos, you might want to consider forgoing video components and instead manage your video elements directly using raw JavaScript. Video "components" in Canvas documents are just a wrapper around the HTML5 <video> element, and the only real advantage they offer is existing as timeline entities.

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...
Feb 10, 2020 0
Community Beginner ,
Feb 13, 2020

Copy link to clipboard

Copied

Alright thank you!

 

I'm trying to figure out if I can GoToAndPlay-style the video but that seems to be the same issues too.

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...
Feb 13, 2020 0
Adobe Community Professional ,
Feb 13, 2020

Copy link to clipboard

Copied

Of course you can, you just set the currentTime property on the video element.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

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...
Feb 13, 2020 0
Community Beginner ,
Feb 13, 2020

Copy link to clipboard

Copied

What would this look like in animate? I'm afraid I'm very new to using code beyond what exists inside of animate. Primarily a 3d artist, but a lot of our content gets rendered out of as video and while .SWF's were easy enough it seems HTML5 is far more involved...

 

I'm using play from code snippets and pause. There's just a video in the background, highlights pop up ontop for the user to click. But obviously I can't see the video to properly place the highlights. But I do have the video as reference, so if I could tell the video where to go that would be awesome. 

 

this.movieClip_1.on("added", function() {
$("#movieClip_1")[0].play();
}, this, true);

 

To Pause

 

this.movieClip_1.on("added", function() {
$("#movieClip_1")[0].pause();
}, this, true);

 

Would it be ...

this.movieClip_1.on("added", function() {
$("#movieClip_1")[0].currentTime=(50);
}, this, true);

It seems to be doing something, but is this seconds? Frames? Can you navigate to decimals, or just wholes? 

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...
Feb 13, 2020 0