Creating Storyboards for Flash Animations

Fleshing out the sequence of an animation using a storyboard and MS Word.

Why would a project manager or business analyst need to know how to create a storyboard for a Flash animation? You could argue that this is the dominion of a graphic designer or animator, and you would be right. But using storyboards is an effective method for determining the cost of an animation, and certainly budgeting considerations are a responsibility of a project manager.

To begin with, we should have some kind of definition of what a storyboard is. At the most basic level, a storyboard is a series of pictures which map out the sequence of a movie or animation. It’s widely accepted that a functional specification should be produced before any coding occurs, so why wouldn’t you use some form of planning process prior to creating a Flash animation?

Before you say “but I can’t draw. Last time I drew a stick figure, people thought it was a potato”, you need not worry. Artistic skill isn’t as important as you may think, sequence is of greater significance (e.g. first, many camera flashes go off, then the limousine drives up, etc).

The format I use for a storyboard is very basic. This is intentional since it needs to be understood by both graphic designers and clients.

The structure is as follows:

Document Purpose - this is for the benefit of anyone picking up the document for the first time. It’s a brief statement of what the document is about. For example; this document presents a storyboard for the animation appearing on the Blue Widgets website. The idea is to present a series of illustrations in order to help visualize the sequence of the interactive animation.

The Animation - this is where you say what is going to happen in the animation, and in what order. It’s also where the ‘illustration panels’ appear, nothing fancy is required, its enough to put in labeled squares or circles (e.g. a circle with 'client logo' in it, the text 'tag-line', a box with 'button 1' in it, etc).

Below the illustration panel will be a series of bullet points. These describe what is happening in this particular portion of the animation. This is why you label the shapes in the panel, so you have something to refer back to, for instance; ‘the client logo will fade-in gradually’, or ‘the bouncy ball will move across the screen from left to right’.



The bullet points are where the real detail goes, hence why artistic skills aren’t such a big requirement for this style of storyboard (leave the artistic stuff to the experts). The more detail that goes in here the better. You want to make statements about what happens when the user interacts with particular elements of the animation (e.g. when the user places their mouse over the client logo, a yellow glow appears around it and a pleasant chime sound plays once). Timing, or saying how long things will go for is important here (e.g. the slogan text will fade-in over a period of 1.5 seconds). This is also a good place to specify what images, URLs or text will be used on the panel (e.g. when the user clicks the client logo, they will be taken to index.aspx).

As the saying goes, ‘the devil is in the detail’, and this is where the bullet points come in handy, they serve as an important tool for clarifying what the animation is really meant to be. The bullet points are designed to generate discussion (e.g. client: “we don’t want a male model in our banner, our target market is female, they’re the ones that tend to buy our lipstick”).

Don’t forget to say what the state of the animation will be when it first loads up, will there be a progress metre because the animation is expected to be large? What will the initial banner image be? Will any buttons be highlighted by default?

Appendix - this is the last section of the storyboard document. It can contain anything else which you think needs to be documented (e.g. screenshots, mockups, JPEGs to be used for reference purposes, etc). The two standard sections I place in the Appendix are: Support Files, and Technical Notes / Non-requirements. The Support Files section is actually a ZIP archive embedded within the MS Word document. The ZIP file contains any relevant graphics files intended to be used with the animation. The benefit of packaging these files together is that the most up-to-date graphics travel with the storyboard document itself. This is especially helpful when the document needs to be emailed to off-site contractors. Of course, this only works if the ZIP archive is below 2-3 MB in size.

The Technical Notes / Non-requirements section is where you say what you’re not going to do. For instance; there will be no sound-effects or music used with the animation, no special effects will be used within the animation other then fade-in/fade-out, the animation will run for no longer then 30 seconds. In addition, you may want to give specific instructions which are relevant only to the Flash developer, such as: the completed animation should be no more then 1 MB in size, all text appearing in the animation should be retrieved from a XML file, etc.

A big part of creating a storyboard is helping a client translate what’s in their head into something more tangible. Failing to do so could result in an iterative cycle which is not only costly, but unnecessarily time consuming.