Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Bringing cinematic shots to the web

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.


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

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.

Toon Boom Studio Product Specialist Simon Robert has a Bachelor’s degree in Computer Science and lives in Montreal where he has held various positions in the multimedia industry. His main focus is bringing interactivity to cinematic and animated art. He likes to learn, program in Macromedia Flash, pitch ideas for games, and open canned goods.