Products Blog About Contact us Sign In

Posts Tagged ‘xml editor’

Stupeflix Studio: Your Online Video Production Headquarters

Stupeflix comes with a bundle of tools to make video creation easy for everyone, from single video creation by casual users to thousands videos a day automation for hardcore developers.

The Stupeflix Studio is your new personal space, where you can access all the video tools and goods:

screenshot Studio Stupeflix Studio: Your Online Video Production Headquarters

To make it easier to find, edit and manage videos under your account, we created a special page accessible under “Your Videos”:

screenshot your videos Stupeflix Studio: Your Online Video Production Headquarters

Also easily accessible from the Studio, all the cool tools to make your next video creation project a breeze, whatever your needs are:

Do you want to quickly put together a beautiful video from a trip or wedding pictures and videos? The Stupeflix Online Editor puts video creation at everyone’s fingertips. Upload pictures, videos, arrange them in groups, add texts, musics, transitions, effects, all in your browser, in a few clicks.

screenshot editor Stupeflix Studio: Your Online Video Production Headquarters

Do you want to experience the full extent of video creation possibilities offered by Stupeflix, and micro-manage your video by the pixel and millisecond? The Stupeflix XML Editor gives you full command. Program videos by writing in a simple, descriptive XML language, and generate at will.  Don’t forget to read the manual before taking off!

screenshot XMLeditor Stupeflix Studio: Your Online Video Production Headquarters

Do you want to automatically convert thousands of data records (text, images, videos, audio) into engaging videos? There’s an API for that. Do you want to let your website users create and edit their own videos on your site with a private label solution? There’s an app for that too!

So enjoy the Studio, and please let us know how it works out for you.

Stupeflix Editor Sports A New Interface

Be aware: this is the first post in a stream of new features announcements for the Stupeflix Editor. We have been working hard this summer to make online video creation more powerful and convenient than ever. Today we’ll start with what’s most immediately visible: a new user interface for the Stupeflix Editor.

Remember how you used to add images and videos to your video project? Let me refresh your memory: you were using a small menu in the bottom-left corner of the page (see below). In order to add text captions and soundtracks, the (only) way to go was to click on the “+” icon on the corresponding image, video or group.

screenshot video upload 2 Stupeflix Editor Sports A New Interface

Now, ladies and gentlemen, let me introduce to higher feng shui, interface-ly speaking. The Stupeflix Editor today comes with a very visible, accessible set of clickable icons on the bottom-right corner of the page, to add media content (images and videos), text captions, soundtracks, to edit your project in the XML editor for further customization and to generate your video (that’s what you came here to do after all).

screenshot editor new menu Stupeflix Editor Sports A New Interface

It’s all here. And even better, the actions triggered by these buttons are contextual, meaning they apply to whatever object (image, video, group) you are currently selecting. It does what you want to do, where you want to do it. We’re pretty happy about it, what do you think?

We would like to thank our users for all their useful and valuable feedback which drives our efforts towards the best video creation application on the web. Keep it coming!

Tutorial Series: How To Use Masks To Filter Images, Videos

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!