Skip to main content
T
tomtt
Participating Frequently
October 30, 2017
Answered

How do you make a mask on video.

  • October 30, 2017
  • 3 replies
  • 1895 views

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.

    This topic has been closed for replies.
    Correct answer ClayUUID

    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

    3 replies

    C
    ClayUUIDCorrect answer
    Legend
    October 31, 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

    T
    tomttAuthor
    Participating Frequently
    October 30, 2017

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

    Colin Holgate
    Colin Holgate
    Inspiring
    October 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.

    Colin Holgate
    Colin Holgate
    Inspiring
    October 31, 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


    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:

    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.

    Preran
    Community Manager
    PreranCommunity Manager
    Community Manager
    October 30, 2017

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices