Creating Storyboards for Flash Animations

13:31 09 August in Uncategorized


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

To begin with, we must 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 must be produce before any coding occurs, so why wouldn’t you use some form of planning course prior to making 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 significant 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 advantage 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 showing 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’ look, nothing fancy is required; it’s enough to put in labeled squares or circles (e.g. a circle with ‘client logo’ in it, the text ‘tag-line’, and 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 specific 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 condition for this style of storyboard (leave the artistic stuff to the experts). The more detail that goes in here the better. You want to create statements about what happens when the user interacts with specific 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 a significant 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, and 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 development meter 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 requires 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 records embedded within the MS Word document. The ZIP file contains any relevant graphics files intended to be used with the animation. The advantage 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 records are 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 must be no more then 1 MB in size, all text appearing in the animation must be retrieved from a XML file, etc.

A big part of making 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.