Highlighted

Animation layer not visible

New Here ,
Sep 25, 2019

Copy link to clipboard

Copied

Hi Team,

In Animate CC HTML Canvas Im using video component placed it on the bottom layer an mp4 in the components video application." but the above animation layers not visible please help me. how to solve the issue.

Adobe Community Professional
Correct answer by resdesign | Adobe Community Professional

As far as I know, videos are loaded on the top of the whole composition (CANVAS) even if they are in a movie clip.

 

However if you wanted to see it on a click event you could use CSS to hide it and show it. It will still be on the top of everything.
Example:

 

on load in first frame - I load the video with 0 width and height - then on click even I change to the real size.

 

 

setTimeout(function () {
	$("#myVideo").css({
		"height": 0,
		"widht":0
	});
}, 10);

 

 

then on a click event you would have

 

 

 

this.btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler(){
	$("#myVideo").css({
		"height": 328,
		"widht":476
	});
}

 

 

 

Views

385

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

Animation layer not visible

New Here ,
Sep 25, 2019

Copy link to clipboard

Copied

Hi Team,

In Animate CC HTML Canvas Im using video component placed it on the bottom layer an mp4 in the components video application." but the above animation layers not visible please help me. how to solve the issue.

Adobe Community Professional
Correct answer by resdesign | Adobe Community Professional

As far as I know, videos are loaded on the top of the whole composition (CANVAS) even if they are in a movie clip.

 

However if you wanted to see it on a click event you could use CSS to hide it and show it. It will still be on the top of everything.
Example:

 

on load in first frame - I load the video with 0 width and height - then on click even I change to the real size.

 

 

setTimeout(function () {
	$("#myVideo").css({
		"height": 0,
		"widht":0
	});
}, 10);

 

 

then on a click event you would have

 

 

 

this.btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler(){
	$("#myVideo").css({
		"height": 328,
		"widht":476
	});
}

 

 

 

Views

386

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
Sep 25, 2019 0
Adobe Community Professional ,
Sep 25, 2019

Copy link to clipboard

Copied

Is the video in a symbol or directly on the stage? I believe videos load on the top layer.

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

Using Video Components i placed Mp4 video, not 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...
Sep 25, 2019 0
Adobe Community Professional ,
Sep 25, 2019

Copy link to clipboard

Copied

See below

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
Adobe Community Professional ,
Sep 25, 2019

Copy link to clipboard

Copied

As far as I know, videos are loaded on the top of the whole composition (CANVAS) even if they are in a movie clip.

 

However if you wanted to see it on a click event you could use CSS to hide it and show it. It will still be on the top of everything.
Example:

 

on load in first frame - I load the video with 0 width and height - then on click even I change to the real size.

 

 

setTimeout(function () {
	$("#myVideo").css({
		"height": 0,
		"widht":0
	});
}, 10);

 

 

then on a click event you would have

 

 

 

this.btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler(){
	$("#myVideo").css({
		"height": 328,
		"widht":476
	});
}

 

 

 

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 1
Adobe Community Professional ,
Sep 25, 2019

Copy link to clipboard

Copied

One option is to put a PNG as an image component on top of the video component. You can resize, rotate, even animate the video, and use transparency in the PNG to control where the video appears.

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 1