Products Blog About Contact us Sign In

Archive for the ‘Tips and Tutorials’ Category

How to Show off Aviary Images with Stupeflix

The Aviary suite of web imagery applications is nothing short of awesome. If you spent hours polishing your digital creations, you may want to show them in their best light: in video with Stupeflix!

This short tutorial, inspired by this post, shows you how to showcase your Aviary images in a video created in a snap with the Stupeflix Studio. With this method you won’t even need to download images to a hard drive, or export them.

Step 1: Get the URLs of your Aviary images

Aviary Image for Stupeflix VideoWhen saving an image on Aviary, you are given lots of options on what to do next: publish, export, download, or share.

Aviary also gives you a bunch of URLs so you can find and share your images with a link. Copy the “Image URL” with the highest resolution.

Step 2: Paste the URLs in the Stupeflix Studio

Aviary Image for Stupeflix Video

Start a video project on the Stupeflix Studio by choosing a video theme. Next, click on add images and videos, and choose the “Add image URLs” option. Then paste the URLs from Aviary.

Step 3: Make your video with the Studio!

Aviary Image for Stupeflix VideoWe like to believe that’s the fun part. What do you think?

Also remember, if you want to make videos with pictures stored on your Facebook, or Flickr, or Picasa account, you can import them directly in the Stupeflix Studio!

Use your Facebook pictures to make videos!

Connect to your Facebook account to import photos

With 3 billion pictures uploaded a month, Facebook is becoming the place where we keep and share our personal pictures, the shots we’ve taken on the go.

When you’re making a video in the Studio, you may want to use this profile picture, that shot you took with your phone, all images stored in your Facebook account.

To make it quick and easy for you, we’ve added the possibility to import pictures right from your Facebook account. We hope you’ll find it useful and easy to use.

Here’s how it works:
When starting a video or adding pictures to your project, select “Facebook Import”, then click on “Connect to my Facebook account”.

If you are already connected (for instance if you already have a browser window open on Facebook), we’ll take you right there! Otherwise you can login to your Facebook account and then access all your photo albums and select as many of these pictures as you like.

Upload pictures from your Facebook photo albums

Whether you store your photos on Flickr, Picasa or Facebook, you can import them all easily  to make your videos with the Stupeflix Studio!

With Flickr Pictures Import, Creating Videos Is Faster and Easier than Ever

When creating a new video with the Stupeflix Editor, the first thing to do is to gather and upload images and videos to be included in your glorious project. But what if you’re missing a nice picture to illustrate your message? What if you don’t have pictures at all? What if you’d like to use an already created album on Flickr.com?

Stress not: the new Flickr pictures import is the solution to all your problems. It lets you search Flickr for pictures directly within the Editor, or select an already created picture Set:

screenshot Flickr1 With Flickr Pictures Import, Creating Videos Is Faster and Easier than EverThe upload wizard then retrieves the images on Flickr matching your query. You can now select the images you want to include in your video by clicking on their thumbnail. You can also select all the pictures you see with the “Select All” link, or request to see more images matching your query if you haven’t found the perfect match just yet:

screenshot Flickr2 With Flickr Pictures Import, Creating Videos Is Faster and Easier than EverOnce ready, your images are directly imported in your video project, so you can group them, order them, add effects, transitions, musics, texts, and all that great stuff.

Creating killer videos is faster and easier than ever. Don’t forget to thank the Flickr photographers for their good work!

Demo Girl Shows You How To Be a Superstar Movie Maker

Demo Girl released last week an excellent screencast showing in four minutes how to use the Stupeflix Studio to create custom videos.

demogirl Demo Girl Shows You How To Be a Superstar Movie Maker

The screencast is a great, straightforward tutorial, and we wanted to share it with you. Check it out below!

Thanks Molly, keep on the good work!

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!