The Stupeflix XML (SXML) Video Description Language is a powerful language which describes videos generated by the Stupeflix REST API via our publicly available XML Editor or a third-party website. Applying and combining effects, filters, animators, transitions to text, images and videos opens up a limitless universe of creative possibilities for video production. The Tutorial Series blog posts bring the focus on a particular video editing feature.
We show you in this post how you can create dynamic masks to reveal and/or hide parts of an image or video. More information and source SXML code for the video examples below are available on the Masking Tutorial available in the Stupeflix Developer Center.
Applying a mask is a common image or video editing technique to reveal or hide parts of the image or video. An intermediary greyscale image or video is created that defines which area is going to be shown (for instance white parts), or hidden (for instance black parts), or partially transparent (for instance grey parts).
For instance, this video is the result:
of applying this mask:
To the following original video:
The syntax used to apply a video mask on content is the following, where the parameter opaqueColor (color on the mask which indicates hidden content) is set to #ffffff (hexadecimal for black), where transparentColor (color on the mask which indicates shown content) is set to #000000 (hexadecimal for white), and where the source for the video mask (second video above) can be found at http://assets.stupeflix.com/code/tutorials/masking/wbmask.mp4
<filter type="mask" opaqueColor="#ffffff" transparentColor="#000000"> <video filename="http://assets.stupeflix.com/code/tutorials/masking/wbmask.mp4"/> </filter>
Such mask filters can be applied on any object (overlay with images and videos, stacks, sequences, effects…).
And such masks can be defined with any video, image, or combination of stacks, sequences, overlays, and effects. For instance, the two following SXML codes will produce the exact same video, try to paste both in the XML Editor if you want to try yourself!
<movie service="craftsman-1.0">
<body>
<overlay duration="10.0" top="0.1">
<video filename="http://assets.stupeflix.com/code/tutorials/masking/sts120_launch.mov">
<filter type="mask" opaqueColor="#ffffff" transparentColor="#000000">
<video filename="http://assets.stupeflix.com/code/tutorials/masking/wbmask.mp4"/>
</filter>
</video>
</overlay>
</body>
</movie>
In this example, we inserted the source SXML that we used to generate the mask video shown above:
<movie service="craftsman-1.0">
<body>
<overlay duration="10.0" top="0.1">
<video filename="http://assets.stupeflix.com/code/tutorials/masking/sts120_launch.mov">
<filter type="mask" opaqueColor="#ffffff" transparentColor="#000000">
<stack duration="10.0">
<overlay right="0.15" width="0.45" top="0.15" height="0.45">
<image color="#ffffff"/>
<animator type="slide-in" duration="1.0" direction="left"/>
<animator type="slide-out" duration="1.0" direction="up"/>
<animator type="grow" growEnd="0.7"/>
</overlay>
<overlay left="0.10" width="0.45" top="0.10" height="0.45">
<image color="#ffffff"/>
<animator type="slide-in" duration="1.0" direction="down"/>
<animator type="slide-out" duration="1.0" direction="left"/>
<animator type="grow" growEnd="0.7"/>
</overlay>
<overlay left="0.15" width="0.45" bottom="0.10" height="0.45">
<image color="#ffffff"/>
<animator type="slide-in" duration="1.0" direction="up"/>
<animator type="slide-out" duration="1.0" direction="left"/>
<animator type="grow" growEnd="0.7"/>
</overlay>
<overlay right="0.10" width="0.45" bottom="0.15" height="0.45">
<image color="#ffffff"/>
<animator type="slide-in" duration="1.0" direction="left"/>
<animator type="slide-out" duration="1.0" direction="down"/>
<animator type="grow" growEnd="0.7"/>
</overlay>
</stack>
</filter>
</video>
</overlay>
</body>
</movie>
Now, another thing to consider when playing with the mask filter: any intermediate color between the opaque and the transparent one will reveal the content with a partially transparent effect. So if black is your opaque color and white the transparent one, a dark grey will slightly reveal the underlying content, while a light grey will show most of it. What this means is that you can use the mask filter to obtain a dynamic and fully customizable alpha channel for your videos!
Finally, adding a mask filter at the top of your SXML means that the mask will apply to your whole movie project. Use this feature for adding a convenient post-processing effect to your videos with a couple lines of code!
Good News
CDN and Advertising Networks are forecasted to represent more than 86% of the value chain revenue in 2009, that is $1.12 Bn. Typical companies in this category include 
