Skip to main content
Participant
September 25, 2019
Answered

Animation layer not visible

  • September 25, 2019
  • 3 replies
  • 2076 views

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.

    This topic has been closed for replies.
    Correct answer avid_body16B8

    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
    	});
    }

     

     

     

    3 replies

    Colin Holgate
    Inspiring
    September 25, 2019

    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.

    avid_body16B8
    avid_body16B8Correct answer
    Legend
    September 25, 2019

    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
    	});
    }

     

     

     

    avid_body16B8
    Legend
    September 25, 2019

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

    Participant
    September 25, 2019
    Using Video Components i placed Mp4 video, not symbol