How to do storyboards in Director

October 20, 1998
by Alan Levine

Often in the mad frenzy of Director development, you lose track of some of its simpler yet elegant features. In this column I'll share a handy technique I've taught my basic animation students. I have no evidence that they ever use it, but, oh well.

An even niftier thing was when I read Terry Schussler describe the same technique on a Director-oriented listserv. I have no clue how Terry does it all... runs g/matter, delivers all of those seminars, publishes Xtras, yet still manages to un-earth obscure and quirky of features in our favorite tool. Maybe he doesn't sleep, maybe he has a sweatshop of Lingo monkeys, maybe he just pops every conceivable command into the message window, only Terry knows. But he's a generous guy (he bought a bunch of us rounds of pool a few UCONs ago) and shares his tips, which is cool by me. So if Terry knows about a tip, it must be useful. As a bonus, toward the end of this article I will (red-faced) show as an example one of my first Director animations (in the Mesozoic v3.0 days!).

So enough prelude, just what is it?

Using Director to Create Storyboards

Many of us have heard about storyboards, perhaps in some book or in a way back memory of multimedia 101... You use them to sketch out ideas, interfaces, etc. on paper, before you start making buttons, hacking code and writing behaviors. Now let's all raise our hands if first we *really* do reams of neat sketches on paper?

There's not many hands raised out there!

I was a skeptic of 'boards, but after a few projects where the flow and design were clearly designated by the content folks, I was ecstatic to write Lingo and generate scores of scores without me having to guess and improvise on what they wanted. And if they didn't like the computer prototypes, well we could all sit down with those handy paper storyboards and see what happened.

What's a 'board?

Well, you can find a lot of fancy textbook definitions, but I tell my students it is a simple as a visual sketch of the basic key ideas of their animation. It does not and should not be fancy, but it should clearly communicate to someone else, not familiar with their project, the idea of their story.

A storyboard should include as a minimum, a representation of what is on the screen. It should also highlight what media are required ("image of the Golden Gate Bridge", "sound of glass breaking", "video clip of a tornado") as well as a description of what "things" will be moving, how they will move. etc.

I also refer students to an excellent chapter on storyboarding in Kit Laybourne's wonderful guide (a new publishing is due in 1998) The Animation Book.

Having it On Paper

If you work with clients, paper 'boards are handy for covering your butt. And we are not talking about fashion statements and the poor lifestyle clothing options for programmers. 'Boards should clearly communicate the upfront expectations. The should be able to visually communicate a story or concept to someone who is not directly involved in the project development. The other thing they help do is to identify interface and flow problems before you waste time coding.

What I like to do is to print out or sketch the storyboards, color code the interactive pieces, punch 'em with holes, put 'em in a three ring binder, and voliá! a paper prototype. While this is a real boon for clients not very familiar with non-linear computer applications (so they can see how it will work), it even helps the tech-savvy to iron out design and interaction elements. Ideas and communications are compounded when there are more than one person involved on a project.

Making 'boards

You can buy software for creating 'boards, such as the line of products from PowerProductions. The Anecdote Director Xtra available from g/matter advertises itself as a tool for creating 'boards right in Director and being able to convert them to Director prototypes. I've not used either one.

Why spend precious money on software and spend precious time learning yet another program? Your basic material requirements to create useful 'boards are ... a pile of blank paper and a few pencils (eraser equipped).

My method is to create/use a template page and run off some photocopies. You can find examples in books about multimedia production. For our Studio 1151 project, we have written an online guidebook that contains a short section on storyboarding, as well as some examples and a template you can use/modify.

I tend to get sloppy with paper sketches. And what if I want to start assembling different media, or I forsee many changes ("put the buttons on the left... no, put them down the right... no, along the bottom ... make 'em, beveled... no, make them translucent")?

What I will describe next is a simple way to muck around in Director itself to create storyboards and use one of those obscure Directorian features to generate nicely printed versions.

You will open one of the Director windows that I almost bet you have never looked at before! What's more, you can then just extend the Director file into your first prototype. And it works in Director 6, 5, 4, maybe even 3. I'll even share a nifty template file for doing so with (what I think) are useful features.

Doin' 'boards in Director

Step zero is to have some sort of mental or paper outline of the story.

In my hokey example, I have a story of Beavis and Butthead type characters in a museum (we are not talking about award-winning concepts here!). The basic key sequences are:

A museum scene with a solitary black and white landscape photo.
Two "dudes" appear and make some offhand remarks about how boring it is.
The dudes splash colors on and you hear all kinds of odd obnoxious in the background. They run off when they hear the footsteps of the "crazy old man"
Old man shuffles in, sighs, and cleans up the mess.
It ends with a pithy quote about the beauty of simplicity.

The procedure in Director is to create one frame per key sequence in the Score. I like to separate each one by 20 or 30 blank frames. For each one, create some really rough and dirty paint and text cast members and set them up on the stage. The idea is to just work out the visual layout for each key sequence.

Next, create a marker for each screen that you have made. Start with some simple marker labels like:

museum scene
two dudes enter
mess up picture
old man enters
pithy quote

Now is where we venture into one of Director's more obscure features! Select Markers from the Director Windows menu. What the heck is this useful for? I dunno. I could make something up. If you have a huge movie, it would allow you to jump to any labeled frame. (Here is a free shortcut of the week. In the Score window, command-left arrow or command right-arrow jumps you to the next or previous frames).

But we are going to do something different and will not be clear why until later. Trust me.

The left side of the Markers window lists the five markers you have created. Clicking on each one allows you to toggle to the frame in the score. On a big monitor, you could bop around each 'board you have generated.

The right side of the markers window simply repeats text of that marker's label. Wow. Why? Here is the trust part. Select the second marker from the left side, the one that is called "two dudes enter". In the right pane of the Markers Window, click the mouse after the end of the text, press RETURN and add some more details that describe the scene so that it looks like:

    two dudes enter
    complaining about how boring this sucky
    place is. Display them perhaps as just
    cartoon shadows. Get some slacker kids
    to record the audio.

You have simply created a long marker label. I don't know the limit, but my hunch is the magical number of 32k. Inserting a RETURN character makes it so only the first few words appear in the marker channel at the top of the score, keeping it clean. What we have done is added some notes for the developers into our Director file.

But wait, there is more! Once you have generated some layout screens and written some comments in the Markers window, there is a great way to print out nicely formatted storyboards on paper.

Select Print from the File menu. Go with the defaults for printing the Stage. Click the radio button to print All frames. And also click the radio button to print Frames with Markers.

Next, click on Options. This is where we set up the printing format as a storyboard. You can see a rough idea in the dialog box as you make your selections. Printing the Borders, Frame Numbers, Date & File Name in Header, and Custom Footer are up to you. I typically set the scale to 50% or 25%. But make sure you click the option for Storyboard Format, which left aligns the screens and leaves room on the right for your notes. And by selecting Marker Comments, it prints the notes that you entered in the Markers window.

By only printing the frames with markers, you can start your animation sequences, keep long sprite spans, or have some test areas that are not printed.

Director 'Board Example

I've assembled a version that I might have done for this early animation if I had actually storyboarded it first. You can view it as a 45k shockwave version but keep in mind that it is made for 640x480 desktop work. Adjust browsers and attitudes accordingly.

When playing this movie, I've added a simple script to send it forward and backward by just trapping the mousedowns in a movie script. It also displays the text of each marker in a field sprite in channel 120. This is a nifty script for creating simple slide shows that just jump from marker to marker.


on mouseDown
  -- check if the current frame is inside the
  -- last anim sequence by comparing
  -- it to the frame number of the last line
  -- of the list of frame labels.
  
  set lastFrame = label(line (the number of ¬
    lines in labellist()) - 1 of
labellist())
  if the optionDown then
    -- go backward
    puppetTransition 2, 4, 18
    if the frame = 1 then
      go to frame lastFrame
    else
      go previous
    end if
  else
    -- go forward
    puppetTransition 1, 4, 18
    if the frame >= lastFrame then
      go to frame 1
    else
      go next
    end if
  end if
  -- display the marker text
  put the frameLabel into field "blurb"
end

The demo one also has a screen with editable text fields where you can enter information specific to your project. This would get printed out as well as a title page.

And what you can do for clients is to turn it into a projector or shockwave it so they can see a proof of concept for their job.

You can download and use my director source file (Mac 70k or Windows 52k).

We want to see the final version!

Okay, now I offer a shockwave version of one of the first things I cobbled in learning to do basic Director animation. My students generally get a great laugh out of how cheesy this is. It has been tweaked in Director 6 to stream the content. It was also designed for 640 x 480 long before Shockwave, so stretch your browser wide and have fun watching the adventure of ansel's colors. Or just scroll on by.

A future column may detail my frustration with trying to use the NetFrameReady Behavior.

So what have we done?

This column took you through my opinions on the power of creating 'boards. It makes a lot of sense to me to work 'em out in Director, software you've already plunked the money into. And given the obscure features I have revealed (and I am not the only one who has stumbled into it), you can work our ideas, print up nicely formatted boards, and then extend the file int your first prototype.

And you have seen how infantile my first animation was! Anyone can do better.

Alan Levine is an Instructional Technologist at the Maricopa Center for Learning & Instruction at the Maricopa Community Colleges. Among other random things, he tries to maintain the DirectorWeb, does side work as dommy media, and not often enough, mountainbikes in the desert.