Introduction to Flash MX
 |Sofia Home | Content Gallery |
Home
Syllabus
Schedule
Lessons
Assignments
Exams

7.3 Storyboarding

When you write a term or research paper, your instructor will often ask you to present an outline or overview of your paper. The outline segments your research into unified chunks listing the top level of each chunk with a synopsis of major key points. These key points are then broken down into more descriptive text. An outline provides you with a road map for your project. It keeps the content on track and can help you to organize your research and your time by letting you view your steps. It's like a blueprint for a building design. When you work on a professional team, you will often create a project plan.  The storyboard is a component of a project plan. 

The more you break down your project into manageable chunks and evaluate the chunks in terms of assets and time, the more successful you will be at completing your project on time. Some people use a flow chart in Powerpoint, Visio, MS Project to track their projects. Some designers use a graphic program such as Photoshop, Illustrator, or Corel to create mockup scenes for their projects. Some people use scratch paper and pencil. It doesn't matter which method you use to create your project plan. It is important that you actually create one. In this course, you'll create a project plan using the template that you can download below.

Creating a storyboard will help you organize your project. If you go to any animation or multimedia studio, you will find storyboards for every project showing sketches of animation accompanied with boxes indicating time, audio synch, voice over, content for text, a brief narration of the scene, timeline details, etc.

You don't have to be fancy. You don't have to be able to draw. Storyboard flows are used in User Interface Design to display the navigational flow from one page to the next. Computer-generated navigation offers the option of non-linear flow, so it's important to define the structure of linking from pages to pages.

A storyboard includes a representation of what will be displayed on your screen. It includes what assets are necessary to complete each scene. For example, if you open your Flash movie with an interface of a mouse running through a picture frame after a wedge of swiss cheese. You'd draw a rough sketch or write a description of the scene accompanied by a list of the images or animations, sound, words, music, etc. that you'd need. You may also want to note how long you'd like to remain on that screen before moving to the next screen. Does the user have a choice to navigate freely (interactive) or are you, the author, guiding the user in a defined flow (linear)?

The storyboard is your roadmap to a successful project. You can check things off as they're completed or assign tasks to different members of your multimedia team.

Back to Top

Download Storyboard Template

Please download this template .fla file and complete the information for each screen in your final project. MacOS users, control-click and select download to disk. Windows users, click the file and download should start automatically or right-click and save to disk. You can also download the .zip or .sit file of the storyboard.fla.

Download the Compressed Storyboard Template for your OS
storyboard.zip 32k Windows storyboard.sit 20k MacOS

Back to Top

INTERACTIVE Flash DEMO of the Storyboard.fla

The following demo is the storyboard.fla that you downloaded from the above links.

Use the > key on your keyboard to move to the next screen.
Use the < key to move to the previous screen.

The first screen is currently blank. You will understand why it's blank when you download the template Flash .fla and start adding content. The first few screens are identical and then you'll come to two screens with a bit of difference. One is for the credits screen and one is for the linked requirements screen. There is a print icon in the lower right corner if you want to print your storyboard and work off a hard copy.

The storyboard is a beginning plan for your project. It's inevitable that changes will occur as you get ideas, learn more techniques, review the progress of classmates, factor in your time, etc. Below is a sample of the blank storyboard which you will fill with details of your project. When you download the storyboard.zip or .sit and open in Flash, you will see what is displayed below:

Back to Top

A sample of a student's fill out storyboard is displayed below. Note Terry's attention to detail.
She developed a clear foundation and storyboard on which to build her final project.

 

Back to Top

Example of a Brief Overview of a Flash Presentation

User opens to find 3D space-like interface with 9 orbiting spheres. Spheres land in defined places and text comes in to identify spheres as buttons linking to specific parts of the project. Movie stops and text block emerges from tiny to large, invisible to opaque in center of stage and text reads: "you have entered the realm of outer space....where do you want to go today?" Space music is in the background with a togle button to mute the background sound. Voice-over enters saying "select a planet before you decompress in the twilight zone". Quick incidental sounds emerge as user mouses over planets. User clicks on one planet and scene changes to the planet with text and information about that planet. Small animation illustrates the people living on that planet. Big button takes user back to main interface control scene.

Your proposal will define the project's purpose, target audience, theme, color scheme, scope, number of "screens" required, navigation and flow.

Please continue to the next section of this lesson.

Back to Top

Up » 7.1 Labels & Navigation » 7.2 Scripting the Buttons » 7.3 Storyboarding » 7.4 Final Project