Flash Cinematic Techniques: Enhancing Animated Shorts and Interactive Storytelling

Paperback (Print)
Buy New
Buy New from BN.com
Used and New from Other Sellers
Used and New from Other Sellers
from $30.55
Usually ships in 1-2 business days
(Save 41%)
Other sellers (Paperback)
  • All (15) from $30.55   
  • New (9) from $35.57   
  • Used (6) from $30.55   


Apply universally accepted cinematic techniques to your Flash projects to improve the storytelling quotient in your entertainment, advertising (branding), and educational media. A defined focus on the concepts and techniques for production from story reels to the final project delivers valuable insights, time-saving practical tips, and hands-on techniques for great visual stories. Extensive illustration, step-by-step instruction, and practical exercises provide a hands-on perspective.
Explore the concepts and principles of visual components used in stories so you are fluent in the use of space, line, color, and movement in communicating emotion and meaning. Apply traditional cinematography techniques into the Flash workspace with virtual camera movements, simulated 3d spaces, lighting techniques, and character animation. Add interactivity using ActionScript to enhance audience participation.

Read More Show Less

Editorial Reviews

From the Publisher
"Chris Jackson has a remarkable talent for explaining complicated visual concepts so that anyone can easily digest and incorporate them into their daily workflow. Flash Cinematic Techniques is yet another of Chris' books I recommend keeping within arm's reach for that daily dose of knowledge and inspiration." —Chris Georgenes, Art & Animation Director, Mudbubble, LLC

"Chris Jackson's excellent new Flash primer does a great job of patiently focusing on important design principles and the effective methods of storytelling as they apply to the medium. Using a great number of illustrations and examples, Jackson discusses various ways to improve a project's look and structure as well as incorporating virtual camera movements, simulated 3D spaces, lighting techniques, character animation and interactivity. If you get heart palpitations each time you think about taking your toon idea from paper to pixel to vectors, Jackson is the man who can calmly take you out of your tech nightmare."—Animation Magazine

Read More Show Less

Product Details

  • ISBN-13: 9780240812618
  • Publisher: Taylor & Francis
  • Publication date: 2/8/2010
  • Pages: 304
  • Sales rank: 961,110
  • Product dimensions: 7.40 (w) x 9.60 (h) x 0.90 (d)

Meet the Author

Chris Jackson is an author, computer graphics designer, and tenured professor at the Rochester Institute of Technology (RIT). He teaches a variety of graduate-level courses and professional workshops focusing on 2D computer animation, 3D digital imaging, instructional multimedia, and motion graphics. He is a multimedia consultant for Fortune 500 companies and national museums. Chris' professional design work has received over 25 distinguished national and international awards for online communication. He has presented his research and professional work at Adobe MAX, ACM SIGGRAPH, UCDA Design Education Summit, and the Society for Technical Communications (STC). Chris is the author of Flash + After Effects and Flash Cinematic Techniques: Animating and Building Interactive Stories, and co-author of Flash 3D: Animation, Interactivity, and Games.

Read More Show Less

Read an Excerpt

Flash Cinematic Techniques

Enhancing Animated Shorts and Interactive Storytelling
By Chris Jackson

Focal Press

Copyright © 2010 ELSEVIER INC.
All right reserved.

ISBN: 978-0-240-81313-4

Chapter One

Show, Don't Tell Me a Story

Animation is all about showing, not telling a story, but what makes a story good? A good story needs a compelling plot that involves appealing characters living in a believable world. Understanding the story structure and how to visualize it using Flash is the topic of this first chapter.

* Anatomy of a Story 2

* The Story Structure 4

* Make Every Scene Count 6

* Show, Don't Tell 8

* Find Your Artistic Direction in Flash 12

Anatomy of a Story

Stories always start with an idea. Ideas can come from all around you—from your imagination, personal observations, life experiences, to your dreams and nightmares. These random thoughts or observations are recorded as events. Events are then woven together to formulate the story's plot.

The plot is not the story itself; it is all of the action that takes place during the story. How the action affects the characters physically and emotionally builds a good story. The fundamental components to any story involve a character or characters in a setting, a conflict that causes change, and a resolution that depicts the consequences of the character's actions.

Take a look at the following nursery rhyme:

    Humpty Dumpty sat on a wall;     Humpty Dumpty had a great fall.     All the King's horses and all the King's Men     Couldn't put Humpty together again.

Deceptively simplistic in nature, this nursery rhyme contains all of the necessary building blocks to tell a story (Figure 1.1). The first line establishes the main character in a setting. The second line introduces conflict by having the character fall. A change occurs with all the King's horses and men coming to Humpty's aid. The last line is the resolution; the main character remains injured as a result of his actions. The story is simple, but is it compelling? Perhaps not.

Humpty Dumpty is a one-dimensional character. He exhibits very few characteristics that an audience can relate to. Let's add some element of interest to the rhyme. What if Humpty Dumpty was warned by his mother not to sit on the wall, but disobeyed? What if Humpty Dumpty was depressed and deliberately jumped? What if all the King's Horses and all the King's Men secretly conspired to get rid of Humpty (Figure 1.2)? Now the story takes on more meaning for the audience. Their curiosity is piqued as they seek out answers from the storyline.

A good story is judged by the emotional impact it has on its audience. Adding interest to your story triggers this emotional response. Audiences want to be able to relate to the characters. Once bonded, audience members experience the turmoil the characters go through by projecting themselves into the story. Audiences also anticipate the dramatic tension created by the conflict and want to know what is going to happen next. Without any emotional involvement, a story is reduced to a series of events.

Storytellers typically employ a dramatic story structure to determine when certain events will happen to achieve the greatest emotional response from the audience. This structure can be applied to a three-hour movie or to a 30-second commercial. Developed by the Greek philosopher Aristotle, it has become the narrative standard in Hollywood. Audiences are quite familiar with it and even come to expect it.

The Story Structure

The dramatic structure consists of a beginning, middle, and an end (Figure 1.3). Each act applies just the right amount of dramatic tension at the right time and in the right place. Act One is called exposition and it gives the audience information in order to understand a story. It introduces the setting, the characters, their goals, and the conflicting situation that the story is about.

The setting is where and when the story takes place. When developing your story ask yourself where is the story set: on another planet? in a car? underwater? Does the story occur in the past, present, or future? With the setting in place, you next need to populate your world with characters. It is important to note that the world, its timeline and occupants, all need to be believable to the audience. That doesn't mean it has to be realistic. Walt Disney summed it up best with the term "plausible impossible." It means that it is something impossible in reality but still can be convincingly portrayed to the audience.

There are often two types of characters in a story: the hero (protagonist) and the villain (antagonist). The hero is the main character and has a strong goal that he must achieve without compromise. The villain will stop at nothing to prevent the hero from succeeding. Audiences typically root for the hero as he faces a series of ever-increasing obstacles created by the villain. The opposing goals of the hero and villain create the story's conflict.

Act Two focuses on the conflict. Conflict is the most important element in a story. The problems faced by the characters make the story exciting. The key to creating good conflict is to make the villain stronger than the hero at the beginning. Usually the villain is another person, but can be an animal, nature, society, a machine, or even the hero himself battling an inner conflict. Throughout the story, the villain needs to pursue his own goal as actively as the hero. Audiences love a great villain who is as complex and interesting as the hero.

If the hero can easily beat the villain, you don't have a good story. In order to engage the audience emotionally, they must empathize with the hero. The hero should be someone the audience can feel something in common with, or at least care about. Empathy links the hero's challenges and experiences to the audience. One way to do this is to give the hero certain weaknesses at the beginning of the story that can be exploited by the villain. These weaknesses drive the conflict and raise the audience's emotional connection or bond to the hero. As the character wrestles with the conflict, the audience wrestles with him and cares about the outcome (Figure 1.4).

Act Two drives the story forward raising the tension. The villain constantly creates new obstacles causing the hero to struggle towards his goal. The tension reaches a high point at the end of Act Two. This is also referred to as the climax or turning point, when the plot changes for better or for worse for the hero. During this moment, the hero takes action and brings the story to a conclusion.

Act Three is the resolution and end of the story. It resolves the conflicts that have arisen. Act Three ties together the loose ends of the story and allows the audience to learn what happened to the characters after the conflict is resolved. This is often referred to as closure. Storytellers often start developing stories by figuring out the climax or the conclusion of the story and then work their way backwards.

A story structure worksheet is provided in the Chapter_01 folder for you to use when developing your story.

This dramatic structure provides a framework for a story. Stories created in Flash tend to be less complex than feature films or even television shows. Usually these are short stories that focus on only one incident, have a single plot, a single setting, a couple of characters, and cover a short period of time.

As you begin developing your story in Flash, decide what the audience needs to know and when to add the dramatic tension. Start by showing a path for the audience to follow. Give them visual clues to what is going on in the opening scene. With the compressed format in Flash, it makes cutting to the chase all the more essential.

Make Every Scene Count

Understanding story and its structure is important, but you are working in a visual medium. As a visual storyteller, you can enhance a story's emotional experience by showing how a story unfolds through a sequence of images. However, creating beautiful imagery is not enough if the visuals do not reinforce the story's narrative or meet the audience's expectations.

For each scene in your story, you need to visually answer the following three questions that audience members ask. They are:

1. What is going on?

2. Who is involved? 3. How should I feel?

Most stories created in Flash range from 30 seconds to two minutes in duration. That is not a lot of time to divulge a complex plot. You need to make every scene count by either advancing the story or developing the characters. It is best to throw the audience into the action after the title scene and create enough tension to start the audience worrying about the characters. Director Alfred Hitchcock strongly believed in giving his audience just the right amount of information to get them involved with the story. Hitchcock's "bomb theory" is widely referenced as a good visual storytelling technique in building suspense (Figure 1.5).

The theory illustrates the difference between suspense and surprise. An audience would view two people having a conversation seated in a café as an ordinary scene, nothing special. The scene doesn't offer much to the audience in terms of involvement or participation. Then all of a sudden, "Boom!" There is an explosion. The audience is in shock for about 15 seconds. They had no prior warning about a bomb, but what if they did?

Rewind the scene back to the two people talking in the café. This time show the audience that there is a bomb underneath the table. Show the audience that it will explode at one o'clock. Show a clock on the wall behind the two people; the time is five minutes to one. What happens to the audience?

The audience's involvement in the scene becomes much greater than before. They know more information than the characters and want to warn them. The scene's sequence of images (bomb, the timer, and the clock on the wall) serves as a visual tool to draw the audience closer into the story (Figure 1.6). Hitchcock wasn't called the Master of Suspense for no reason.

Show, Don't Tell

The best rule to follow when visualizing a story is to always show, don't tell. At the beginning of your story, it is important that the audience knows some information in order to understand the story. In Act One, the exposition will often have information about events that happened before the story began. Exposition gets the audience up to speed on the setting and the characters.

An inherent problem with exposition is that you could have too much and potentially bog down your story before you ever get to the action. This is where visual storytelling can truly shine. Let's take a look at another Hitchcock example. In his film Rear Window (1954), the protagonist spies on his neighbors through his apartment window and becomes involved in a murder mystery. The opening scene is a masterful example of using visuals to "show" the story without saying a word to the audience (Figure 1.7).

Hitchcock starts the scene by showing the New York apartment building where the protagonist lives. The audience sees the cast of characters in each of their apartments going about their daily routine. The camera travels inside the protagonist's apartment to show him asleep in his wheelchair and the thermometer at 90°. The camera moves down his left leg to show that it is in a full cast. His name, L.B. Jefferies (played by actor Jimmy Stewart), is on the cast. The camera moves around Jefferies' apartment to show his smashed camera, the amazing shot that broke both the camera and his leg, and finally a positive and negative photograph of a female model on the cover of a glamour magazine.

The dialogue-free exposition sets the audience up for all of the events that occur later in the film. It is the camera's movement in composing the scene that shows the protagonist, his profession as a photographer, his physical weakness that leads to his voyeurism, the neighbors that he spies on, and a hint about his love life played by actress Grace Kelly. In visual storytelling, this is often referred to as planting information that the audience absorbs without even being aware of doing so. When the information gives meaning to events later in the story it is referred to as payoffs.

Another good example of a plant and payoff occurs in the movie Raiders of the Lost Ark (1981). The hero, Indiana Jones, physically shows the audience he has a fear of snakes in the beginning of the film. The audience finds the scene humorous because the hero just survived an entire tribe of warriors trying to kill him only to wimp out over a snake on a plane. The payoff comes later in the film when Indy's quest leads him to a tomb filled with thousands of snakes. He must make a decision to face his fears in order to achieve his goal of retrieving the Ark of the Covenant. Of course it's also a great suspense builder making the descent into the tomb scarier because the audience feels and sees Indy's revulsion.

Sometimes there is just too much exposition to show and you need to tell it to the audience using text or voice-over narration (Figure 1.8). Star Wars (1977) is a great example of using text to tell the audience all the background information on the characters and setting at the beginning of the story. The episode starts with scrolling paragraphs of text explaining the entire back story that has led to this moment. Then the action begins.

Voice-over narration is effectively used in The Shawshank Redemption (1994). The story is narrated by an inmate named Red (played by actor Morgan Freeman) set in a fictional penitentiary in Maine. His narration throughout the film provides the emotional connection between the audience and the protagonist, Andy Dufresne (played by actor Tim Robbins).

In addition to exposition, visual elements can also enhance transitions between acts in the story. In The Wizard of Oz (1939), the protagonist, Dorothy (played by actress Judy Garland), is introduced as a farm girl who lives in Kansas with her aunt and uncle. Kansas is shown in a sepia tone. The color symbolizes the drabness of the setting. After a tornado whisks Dorothy away, over the rainbow, to the Land of Oz she tells the audience, "We're not in Kansas anymore." Color is used to reinforce that plot point. The color transitions from sepia tones used in Act One to full Technicolor glory at the beginning of Act Two.

Over the years, the use of color has become an effective visual tool to draw the audience into the story. Steven Spielberg's film Schindler's List (1993) is primarily in black and white. However, in one scene a little girl is shown wearing a red coat. Through contrast in color, the audience's attention is immediately drawn to her as she wanders alone amid the horrors of World War II.

The red symbolizes the protagonist's (played by actor Liam Neeson) awareness to the cruelty being committing against the Jews. Audiences visually and emotionally connect with the girl and search for her red coat in scenes that follow (Figure 1.9). Will she be saved? Sadly, the sight of her red-tinted coat among the dead becomes one of the film's most harrowing images.

Based on these examples, you can see that movies are an excellent resource for learning more about visual storytelling. Before you start designing your story in Flash, watch some of your favorite movies. Mute the audio so you can focus exclusively on the story's imagery. If you can, pause the movie on a frame that you find visually appealing.

Study its composition, use of color, and camera placement. Subsequent chapters in this book will discuss these cinematic tools in depth. For now, sketch out the visual structure you find effective in "showing" the story you are watching.

Remember, one of the goals in creating your Flash story is to have people watch it. Once you have a good story you need to show as much as possible to your audience rather than tell them. Each scene must clearly illustrate to the audience what is going on, who is involved, and how they should feel about what they are seeing. Meeting the audience's emotional expectations is achieved through your creativity and art direction. So what visual style works well in Flash?

Find Your Artistic Direction in Flash

Animation captivates its audience through the magic of making things move from static images. It is a very dynamic art form with varying artistic styles. Animation can be achieved through traditional (hand-drawn) animation, stop-motion, and 2D and 3D computer animation. Flash was originally designed to create 2D computer-generated animation for the web.

2D animation techniques and tools have changed considerably over time. The early pioneers in animation drew a sequence of images and then photographed them in order to create the motion. Today, Adobe Flash is packaged with automated computerized versions of traditional animation techniques such as tweening, morphing, and onion skinning. Its format and workspace allows you to save a considerable amount of time and therefore reduce a project's budget.

Flash is well known for its inherent visual look which is vector-based. Vector art uses math to store and create an image. This makes the artwork resolution-independent. It can be scaled without losing any detail. As a result, vector-based artwork produces rather small file sizes that are ideal for web delivery. The only drawback to using vectors is that the artwork becomes less photorealistic and more mechanical, potentially losing the organic feel of traditional hand-drawn animation.


Excerpted from Flash Cinematic Techniques by Chris Jackson Copyright © 2010 by ELSEVIER INC. . Excerpted by permission of Focal Press. All rights reserved. No part of this excerpt may be reproduced or reprinted without permission in writing from the publisher.
Excerpts are provided by Dial-A-Book Inc. solely for the personal use of visitors to this web site.

Read More Show Less

Table of Contents

Introduction vii

Chapter 1 Show, Don't Tell Me a Story

Anatomy of a Story 2

The Story Structure 4

Make Every Scene Count 6

Show, Don't Tell 8

Find Your Artistic Direction in Flash 12

Chapter 2 Get Into Character

Casting the Characters 18

Shaping Up 20

Adopting Stereotypes 25

Exaggerating Personality 27

Assembling the Cast in Flash 32

Chapter 3 Give Me Space

Defining the Space 60

Showing the Space 68

Illustrating the Space 79

Drawing a Storyboard 85

Building an Animatic in Flash 87

Chapter 4 Direct My Eye

Composing the Space 96

Drawing the Line 99

Being Dominant 106

Having Some Depth 109

Focusing Attention 116

Simulating Depth in Flash 419

Chapter 5 Don't Lose Me

Manipulating Time and Space 128

Understanding Screen Direction 130

Using the 180-Degree Rule 131

Cutting and Continuity 142

Transitioning Scenes 146

Building Transitions in Flash 149

Chapter 6 Move the Camera

Creating New Worlds 160

Panning the Camera 167

Zooming 172

Tracking Camera Movements 174

Parallax Scrolling 178

Simulating Cinematic Effects in Flash 186

Chapter 7 Light My World

Defining the Light 192

Lighting the Scene 196

Setting the Mood 197

Simulating Lighting Effects in Flash 200

Chapter 8 Speak to Me

Recording Audio 220

Lip-Syncing Dialog 223

Mixing Sound Effects 230

Exploring Facial Expressions 235

Posing Your Character 241

Chapter 9 Interact with Me

Interactivity in Flash 246

Controlling Camera Movements 255

Directing the Characters 267

Enhancing a Story Using Action Script 271

Chapter 10 Optimize and Publish

Optimizing Graphics 276

Preloading in Flash 277

Using the Quick Time Exporter 278

Export Action Script-Driven Movies 281

Index 285

Read More Show Less

Customer Reviews

Be the first to write a review
( 0 )
Rating Distribution

5 Star


4 Star


3 Star


2 Star


1 Star


Your Rating:

Your Name: Create a Pen Name or

Barnes & Noble.com Review Rules

Our reader reviews allow you to share your comments on titles you liked, or didn't, with others. By submitting an online review, you are representing to Barnes & Noble.com that all information contained in your review is original and accurate in all respects, and that the submission of such content by you and the posting of such content by Barnes & Noble.com does not and will not violate the rights of any third party. Please follow the rules below to help ensure that your review can be posted.

Reviews by Our Customers Under the Age of 13

We highly value and respect everyone's opinion concerning the titles we offer. However, we cannot allow persons under the age of 13 to have accounts at BN.com or to post customer reviews. Please see our Terms of Use for more details.

What to exclude from your review:

Please do not write about reviews, commentary, or information posted on the product page. If you see any errors in the information on the product page, please send us an email.

Reviews should not contain any of the following:

  • - HTML tags, profanity, obscenities, vulgarities, or comments that defame anyone
  • - Time-sensitive information such as tour dates, signings, lectures, etc.
  • - Single-word reviews. Other people will read your review to discover why you liked or didn't like the title. Be descriptive.
  • - Comments focusing on the author or that may ruin the ending for others
  • - Phone numbers, addresses, URLs
  • - Pricing and availability information or alternative ordering information
  • - Advertisements or commercial solicitation


  • - By submitting a review, you grant to Barnes & Noble.com and its sublicensees the royalty-free, perpetual, irrevocable right and license to use the review in accordance with the Barnes & Noble.com Terms of Use.
  • - Barnes & Noble.com reserves the right not to post any review -- particularly those that do not follow the terms and conditions of these Rules. Barnes & Noble.com also reserves the right to remove any review at any time without notice.
  • - See Terms of Use for other conditions and disclaimers.
Search for Products You'd Like to Recommend

Recommend other products that relate to your review. Just search for them below and share!

Create a Pen Name

Your Pen Name is your unique identity on BN.com. It will appear on the reviews you write and other website activities. Your Pen Name cannot be edited, changed or deleted once submitted.

Your Pen Name can be any combination of alphanumeric characters (plus - and _), and must be at least two characters long.

Continue Anonymously

    If you find inappropriate content, please report it to Barnes & Noble
    Why is this product inappropriate?
    Comments (optional)