Bringing cinematic shots to the web

Web animations and interactive web games help you create immersive environments that engage audiences on your site, which is the goal of any web communication strategy.

Although the web user’s experience has improved substantially with user-centered tools, it is rare to find entertaining web animations and web games that possess the sophistication required to engage a deep and diverse audience.

In the last century, noted film critic, André Bazin, used the term presence to describe the sense an audience has as it watches moving images that seemingly transport them to the same space and time. This is what we should strive for when creating entertainment for the web, the cinematic effect of transporting an audience through different dimensions, where the passage of real time becomes irrelevant.

One major difference between film and web directors is the camera. For film directors, the camera is the brush they use to paint a story and transport the audience, into their imaginary world, creating that sense of presence that Bazin talks about. This is true for traditional animation directors, who also have camera effects at their disposal (and at a great expense) as they film and composite each frame of an animated movie.

With the emergence of Toon Boom Studio™ on the Macromedia Flash animation scene, web directors can enjoy the same power as filmmakers. They can take a virtual camera in their hand to create filmic sequences for animated web movies and games. Now with Macromedia Flash MX and thanks to the Toon Boom Studio™ Importer (TBSi), web animation and game directors can develop cinematic camera effects that will elevate web entertainment to the next level.

We built interactive demo content for a game, “Shadow Saves the World”, using Toon Boom Studio™ to develop the characters, props, and camera sequences and Macromedia Flash MX to add text, dialog boxes, and scripting that brings the movie together. In this tutorial, we are going to show you how we developed the content using both of these tools.

In “Shadow Saves the World”, there are three scenes. The first two scenes develop the context for the action that will involve the user. In these two scenes, the camera work helps to build the tension and the anxiety for our character, and for our user, who will take over Shadow’s role.

For this tutorial, we are going to look at the dialog scene between Jane and Shadow. We will give you pre-drawn and animated sequences so that you can focus your attention on the camera.

Requirements

To complete this tutorial you will need to install the following software and files:

• Toon Boom Studio Trial

• Toon Boom Studio Importer plug-in for V2

  update required to work with V2 animation material

• Tutorials and sample files:

• Tutorial Working Files (1.4 MB)

  includes only the shot you will work on

• Final Files (8.5 MB)

About the authors

Kandis Weiner loves being a Toon Boom Studio technical writer because she gets to learn about animation while researching and developing documentation, instructional material, and marketing copy. A multi-tasking magician during off hours as well, she is currently working towards her MA in instructional technology and has started a record label (Cocosolidciti) with like-minded digital freak artists.