Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Make an Animated Short Film Online

/skill level/
/viewed/
0 Times

Maybe you have a great idea for an animated cartoon, but you suck at drawing and when it comes to animation, you don't have the slightest notion of where to begin?

Start with Fuzzwich's Minivid, an online web application for fast and short animated movie creation.

Contents

Getting Familiar With the Fuzzwich MiniVid Recorder

When you first load The Minivid Recorder, you are presented with what we call the "stage" in the center of the screen, the "actors list" along the left, the "time line" across the bottom (along with the "play head" that shows you where you are along the time line).


You've probably also noticed that the Minivid recorder has already randomly selected a background and three actors for you. What you might not have noticed is that it has also picked out some background music as well. Usually the pre-selected stuff is as haphazard as the plot to the new Indiana Jones film, but every once in a while you'll get set up with the groundwork for a piece of genius like: Godzilla and his pet bunny in their sitting room with a proper British bobby, having a cup of tea and listening to Timbaland. I'd suggest you just run with that one.

Basic Parts

There are three different elements to any Minivid.

Music

If a brilliant plot doesn't land in your lap, choosing your music will be the first order of business, as the song you choose will determine the length of your animation. To do so, simply click on the "Music" button near the top of the recorder, which will take you to the music selection screen. Here you can scroll through a list showing the available song clips and their duration.

Change Music Button
Change Music Button

When you find a song you're interested in, click on it to load the song and preview it so you know what you're getting yourself into. Once you've found what you want, click "use it".

Music Selection Screen
Music Selection Screen

Background

As any good director will tell you, setting is important. Because of this, Fuzzwich has provided a set of backgrounds you can use to frame the mood for your piece de resistance. Whether you're looking for a romantic cityscape or a desolate wasteland, you can use the "prev bg" and "next bg" buttons located directly left and right of the background to change the setting.


Change Background Buttons
Change Background Buttons

Actors

The next step is, of course, to choose your stars. First, you can select an actor by clicking on it, and you'll see it highlight with a colored box so you know you've actually selected it. You've probably noticed the three icons appear as well. If you aren't thrilled with the randomly chosen actors, you can delete them by either clicking the "X" icon, pressing the "delete key," or clicking the "X" that appears to the right of the actor's portrait in the actor's list when you move the mouse over it. As for the other two icons that appeared when we selected the actor, we'll get to those later.

Add/Delete Actor Buttons
Add/Delete Actor Buttons

Once we've deleted the ones we don't want, we can choose new actors by clicking on the "Actors" button at the top of the recorder.

On the actor selection screen, you're free to choose from a selection of the actor's Polaroid headshots. You can select or double-click the actor you want to hire.

Actor Selection Screen
Actor Selection Screen


Making it Happen

Ok so you have a scene, a soundtrack, and some actors, now all we need is a compelling story!

Movement

Fuzzwich uses a simple "what you move is what you get" or "WYMIWYG" system. Basically, this means you just have to hit the "record" button, and then drag your actors around the screen, and Minivid will record the movement for you.

Click Record, move your actors
Click Record, move your actors

Once you're finished with the movement of one actor, just hit the record button again and record the movement of the second actor. You can see that the movement of your first actor gets played back when you're recording the motion for the second actor. This way you can build up a complex scene one actor at a time. Simple as that!

Speech

It's time to add your bit of eloquent dialog. So remember those two icons from before -- appearing when we were selected an actor for movement? Well, we're going to use one now to add a speech bubble. First though, you'll want to take the play head and move it to the place in the time line where we want the speech bubble to show up. Once it's there, click on the speech bubble icon.


Adding Speech
Adding Speech


Now you should see a speech bubble pop up above the actor with some text in the box that says "Hello!" While the greeting is nice, I'm sure that you have a better bit of dialog in mind, so just go ahead and delete the "Hello!" and type in something more interesting. You might notice that when you add a speech bubble to an actor, a colored icon appears down in the time line. The color, of course, matches the color of the box around the actor when it's highlighted so you know whose text bubble is whose.


Now that your text is in, you don't have to worry about making the text bubble disappear. It'll go away after a bit on its own. Also, if you decide later you don't want a particular text bubble, you can always delete it by either deleting all the text out of the bubble, or selecting the text bubble in the timeline and clicking the "X" delete button.


Since all comedy is in the timing, the cool thing here is that if you're not happy with the timing of the speech, you can actually move it within the timeline so that it appears exactly when you want it to.


Changing Text Timing
Changing Text Timing


Preview and Publish

Congratulations! You've just gone through everything you need to create a basic Minivid! Before you release your bit of brilliance to the world, you'll probably want to see what it will look like to everyone else. Just click on the "Preview" button in the top right, and sit back and take it all in.


Preview and Publish
Preview and Publish


The last step is to actually get your Minivid out to the world, so everyone can gawk in amazement over its awesomeness. To do this, simply click the "Publish" button, give your work of art a title, and put you name on it so everyone can send you money.

The Basics Aren't Enough?

Alright, so you've had your chance to make a couple of fun Minivids but you need something more to spice them up? There are two advanced features that I'll briefly cover that'll get your Minivids to really pop: scaling and actions.


Scaling

Previously, when we were selecting our actors to move them around, you may have noticed a little scroll bar appear to the right of the Minivid stage. You can use the bar on the right to increase and decrease the size of your actors. Up is bigger, down is smaller. Pretty simple.


Scaling Bar
Scaling Bar


Now here's cool thing number one: the scaling is recorded at the same time as the motion is, which means that we can go in after we do all of our movement, and then do the scaling, so we can make something shrink and grow at the same time that it's moving around! Nice.


Here's the second cool thing you can do: Close ups. Just like on the big screen, you can zoom in during crucial points in your story and give some added emphasis.


Using Scaling for a Close-Up
Using Scaling for a Close-Up

Actions

Finally (and most excitingly), we can talk about one of the most fun parts of Minivid: Actions. The actors in Minivid all have their own special actions that you can make them do. Guapo can leap, the Professor can have an experiment blow up in his face, Bobby can write you a ticket, and so on.

So, how do we make it happen? All we have to do is select the actor you want to use, and click on the "*" button to the left of the speech bubble button. This will pop-out a menu that has a list of all the actions that your actor can perform.

Fin!

We hope you enjoyed this short jaunt through the Minivid world. Now that you're an expert, dive into Minivid, show your friends your skills, and add your wit to the pile!


This tutorial was originally submitted by Chris Patton, vice president of business development at Fuzzwich. It is a wiki, so if you have extra advice to share, feel free to log in and add it.

  • This page was last modified 21:05, 23 July 2008.
Edit this article
Reddit Digg
 
Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year