Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • EspaƱol
      • FranƧais
      • PortuguĆŖs
  • ę—„ęœ¬čŖžć‚³ćƒŸćƒ„ćƒ‹ćƒ†ć‚£
  • ķ•œźµ­ ģ»¤ė®¤ė‹ˆķ‹°
0

How do you make a mask on video.

New Here ,
Oct 30, 2017 Oct 30, 2017

How do you create a mask on a video.... I mast be doing some thing wrong.. I can get a mask to work correctly on  image but on a video it doesn't work.

I Using adobe Animate CC.

1.8K
Translate
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

LEGEND , Oct 30, 2017 Oct 30, 2017

If you don't care about being able to run on iOS devices, you actually can mask video by piping it through a bitmap instance.

How to put animation over video in HTML5 canvas

Translate
Adobe Employee ,
Oct 30, 2017 Oct 30, 2017

Are you following the procedure described in How to use mask layers in Adobe Animate CC ?

Translate
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 ,
Oct 30, 2017 Oct 30, 2017

Yes.... Is Their other videos that show correct steps in masking a Video....

Translate
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 ,
Oct 30, 2017 Oct 30, 2017

You can import and mask FLV, but not H.264. H.264 isn't in the exported file, it's just for reference. It may appear to be masked (if you have both the mask and the video layer locked), but it may lock up Animate. At least it did when I tried!

If you are using FLV, make sure the layers are locked, or do a Test Movie to see if it works.

Translate
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 ,
Oct 30, 2017 Oct 30, 2017

A little more  info.... I'm using Html 5 Canvas  and the video is mp4 ...... Layer 1 is mask a rectangle with no stroke and a fill of green  layer 2 is the mp4 video to mask ... mask and video are locked...Video plays but with no masking....... Has any one got this setup to work ????

Tom

Translate
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 ,
Oct 30, 2017 Oct 30, 2017

In HTML5 a Video is done as a component. It gets loaded on top of all of the canvas parts, you mask attempts are sat behind the video.

You can't do masking in the way it would work with animations that are in the timeline. But, you can reverse your thinking. See this screenshot:

Screen Shot 2017-10-30 at 8.27.06 PM.png

In the top layer is an image component, which has a png as its source. The png has a transparent hole it in, where I want the video to appear. And also could have other parts that are transparent, where I want the timeline graphics to bee seen.

The second layer is a video component, with an mp4 as its source. It can be sized to make the video smaller than full size.

The bottom layer could be backdrop design, or even animations, so long as you don't need them to appear on top of either of the components.

That all gives you the same effect as you get with using a regular mask approach.

Amazingly it actually works, and you can even add tweens to the two components, if say you want them to slide into view.

Translate
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 ,
Oct 30, 2017 Oct 30, 2017

Thanks I’ll give it a try…..

Tom

Translate
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 ,
Oct 30, 2017 Oct 30, 2017

I got carried away after my success just now. I tried the new camera control, and advanced layer depth, and still it worked.

Translate
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 ,
Oct 30, 2017 Oct 30, 2017

This is what get …. It look ok in the right photo but when it play video is on top….. on you example you showed a layer time line graphic .. what is that ???

Translate
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 ,
Oct 30, 2017 Oct 30, 2017

Timeline graphic is just things drawn on the stage. You don't need those to get the masked video effect. The image component is on top of the video component.

If you can put your FLA online where I can get it, I could see what you're doing wrong.

Translate
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 ,
Oct 31, 2017 Oct 31, 2017
LATEST

This what I get with layers vid on botton png with transparence in center…

This is done with adobe annimate cc html canvas a

Translate
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 ,
Oct 30, 2017 Oct 30, 2017

If you don't care about being able to run on iOS devices, you actually can mask video by piping it through a bitmap instance.

How to put animation over video in HTML5 canvas

Translate
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