• Videorama Sample & Introduction
• How to Make Videoramas using Final Cut Pro
• How to Make Videoramas using Flash

This page will show you how you can make a videorama using Flash Professional. We also have a tutorial that uses Final Cut Pro instead.

Before you get started, be sure to take a gander at our sample videorama so you know what we’re making.

What You’ll Need

You’ll need Macromedia’s Flash Pro to complete to complete this tutorial If you don’t have it, you can buy it, buddy up with someone who has it, use it at a computer lab, or check out the Final Cut Pro version of this tutorial.

In this tutorial we use Flash 8 Professional, but if you have a different version the steps should be pretty similar.

Step 1: Shoot Your Videos

To start you’re going to need two or more video clips to stitch together.

When shooting, we recommend using a tripod for best results. Simply point at a scene, record some video, then rotate the tripod a bit — overlapping slightly with your previous shot — and record another cip. You’ll want to capture roughly the same amount of footage with each clip. (For more varied results, leave the tripod at home and just hold the camera.)

In addition to moving the camera left and right, experiment with overlapping up and down as well. You can even try taking your footage at different times of the day; watch time pass as different subjects move from day to night, or record the sun setting through several frames.

If you’re shooting all your videos together, you’ll want to adjust your camera settings so that the videos match nicely. Look for exposure and white balance settings in your video mode and lock them down so they don’t change from video to video. Just as you would when setting up shots for a traditional panorama, remember to consider the scene as a whole and set the exposure for the brightest part of what you’ll shoot.

Check out our panographies tutorial for more tips on shooting for stitching.

Step 2: Getting Flash Ready

Flash has lots (and lots) of windows. To make this tutorial easier to follow, we’re going set it up so that it’s arranged in the same way as you’ll see in the screenshots.

To do this, select “Window” -> “Workspace Layout” -> “Default” from the menubar.

This will put your Toolbar on the top left, a Timeline and Stage in the middle where you’ll work, a Properties window on the bottom left and a Library window on the right. It should look something like this.

Next, start a new project by selecting “File” -> “New…” from the menubar. In the “New Document” window that appears, make sure “Flash Document” is selected and click “OK”. Finally, save your project by selecting “File” -> “Save As..” from the menubar.

Step 3: Importing Your Videos

Select “File” -> “Import” -> “Import to Stage…” from the menubar to find one of the videos you want to stitch together, then click “Import”.

Your video will show up in the “File path”. Click “Continue”.

The next screen asks you to specify how you would like to deploy your video. You should select the “Embed video in SWF and play in timeline” option since this is the only option that allows you to view your videos on the stage as you edit, which will be important when you’re stitching. Click “Continue”.

Now you’ll be asked for details about Embedding. Use the default settings that match this screenshot and click “Continue”.

The next screen asks you to choose your Encoding type, the quality of the video and audio. Select “Medium Quality” and click “Continue”.

You’ll be asked to confirm your settings. Click “Finish” to import your video clip.

Repeat the steps above for each video clip you want to stitch together. Once you’re finished, your videos will overlap each other on the Stage and they’ll all be on the same layer in the Timeline.

Step 4: Making It All Fit

Now that you’ve got all your videos on the stage, you need to make room for them. You can do this either by making the Stage larger or by making your videos smaller. In this tutorial we’ll do both.

To make the Stage larger click anywhere in the grey work area thats surrounding your videos. The Properties window should now show the settings for your Stage. Select the “Size” option (550 x 400 pixels by default.)

In the Document Properties window that appears enter your new dimensions. For this example, we’ll use 720 x 300. If you plan on uploading this video to a video sharing site such as Vimeo or You Tube you may want to stick to a square Stage. Once you’ve changed your dimensions, click “OK”.

Optional: While we’re making changes to the Stage you may also want to change its background color. You’ll find a background color chip in the Properties window. Click it to choose a new color for your videorama backdrop. We made ours black.

You should now have something like this — the Stage is resized, but your videos are still too large.

There are a few ways to resize videos in Flash, here’s the easiest. Choose the Free Transform tool from the Toolbar. Grab one of the black squares at the corner of your video clip and drag it while holding down Shift. (Holding Shift maintains the aspect ratio.)

Go ahead and resize all of your videos so that they’ll fit on your Stage. Now you can click and drag the videos around so they’re no longer overlapping.

Step 5: Stitching

Before you stitch your clips together it’ll be helpful to make your videso slightly transparent so you can see what’s underneath each one. In order to change the opacity of a video in Flash you first need to convert it to a Symbol.

Select one of your clips and select “Modify” -> “Convert to Symbol…” from the menubar. In the window that appears enter a name for your Symbol, make sure the type is set to “Movie Clip”, and click “OK”. Flash will ask if it’s ok to expand your Timeline. It is, so go ahead and click “Yes”.

Repeat the steps above to make every video clip into a Symbol.

Phew! Now you’re finally ready to change the opacity. Click your video (now a Symbol) and look down to the Properties window to change the Color option to Alpha. To the right of Alpha, change the value to 70% .

Repeat these steps with each of your video clips. Your clips should all look partially transparent when you’re through.

Now that your videos are resized and semi-transparent, you can line them up with each other by clicking and dragging. You can even rotate a clip if needed using the Free Transform Tool described in Step 4. Here’s our final example after we stitched our videos together.

When you’re done stitching, you can raise the opacity (Alpha) back up to 100%, or leave it semi-transparent for a ghostly effect.

Step 6: Audio

So now your video clips are assembled, lined up, ready to go. What about sound?

If you have only a few videos, the audio tracks shouldn’t be too overwhelming and you could leave them all as-is.

If you have more videos, all those audio tracks playing at once could sound a little confusing. Try whittling down to a few audio tracks you really like. Or, if your audio was mostly ambient noise (as it was in our park example) you could delete all the audio tracks except for one.

To cut out audio tracks, you’ll need to use a tiny bit of ActionScript. Don’t worry, it’s much easier than it looks. Just follow along and you’ll be fine.

In order to target the videos with ActionScript you first need to give them instance names in the Properties window. Each name should be unique. Do this for each video that you want to mute.

Next you’ll make a new layer in the timeline for your ActionScript. Click the “Insert Layer” button on the bottom left side of the Timeline, then click the first frame of your new layer to highlight it. Now click the little black arrow in the white circle on the right side of the Properties window, which will bring up the ActionScript editor.

Enter the following code snippet into the editor to mute each video, and make the changes indicated.

movieSound0 = new Sound( instanceNameYouGaveThisMovie );
movieSound0.setVolume(0);

You’ll need to change the parts in red. “movieSound0″ can be anything just as long as its unique for each video you mute. In our example, you’ll see that video0 and video1 have been muted, which means we’ll only hear the audio from video3.

When you’re done you can close the ActionScript editor, and you’ll notice a small “a” in the keyframe indicating that layer now has ActionScript.

Step 7: Publish and Enjoy!

Play your videorama a few times and make sure everything’s lined up and sounds the way you want it to. When you’re sure everything’s good to go, it’s time to share it with the world.

Select “File” -> “Publish” from the menubar.

When it’s done, your final movie (a .swf file) will be located in the same place where you saved your project.

Congratulations! You just made your first videorama! Groovy.

Photojojo finds the best photo DIY Projects, Tips, and Gear. Subscribe, and we’ll email you our finds twice a week. You’ll be glad you did.

What Next?

• Try composites of live subjects — create a videorama portrait to combine the many ‘faces’ of a friend.
• Creative artist and programmer Ed Stastny does a lot of experimentation with video compositing. Check out his clips “Broken Time” or “West Burnside After Dark” for some inspiration.
• Also check out this time lapse picture from daily dose of imagery for some inspiration on what you could do with time and light.

A Guide to Perfect Panoramas Starring 2 New Photog Tools!
Our photos were a crooked conundrum -- it was sheer panoramic pandemonium. That is, until we found The Perfect Pano,...

A DIY Windscreen for your Digital Camera: Silence the Wind Noise in your Digital Video
Woo-fooput-fooput-fooput-ey-whoooo ook-over-ooooo-ere. Sound familiar? If you've taken digital video at the beach or anywhere on a windy day, you've probably dealt with sound cut-outs as wind...

The Flip Video — The $100 Digital Video Camera that’s Tiny, Cheap, and Fun!
Remember those shoulder-mounted VHS camcorders dad used to haul out at soccer games once a year, "for posterity"? Shrink it down to 1/20th the size,...

Want more?
Photojojo covers the best photo projects,
DIY ideas, and gear, twice a week.

Subscribe by Email We solemnly swear: "No spam, not ever"

or, Grab our RSS → What's RSS? | How do I use it?