Bringing cinematic shots to the web - Happy trails

We’ve come to the end of our exploration of the creation of cinematic, interactive web entertainment. For this tutorial, we looked at staging and multiplane camera moves, but the Toon Boom Studio™ camera has more to offer, including the ability to rotate (with pegs) and zoom-in and zoom-out (changing field-of-view). Hopefully this little voyage will inspire you to explore the possibilities of the Toon Boom Studio™ camera and 3D stage further.

We encourage you to pick up some books on film directing for inspiration - consider the following two recommendations as a start on your voyage of discovery. Don’t forget to pack your camera!

Film Directing Shot by Shot: Visualizing from Concept to Screen
Steven D. Katz
Focal Press

Setting Up Your Shots
Jeremy Vineyard and Jose Cruz
Michael Wiese Productions

Scripting the dialog in Macromedia Flash MX

The script that plays back the text and the beeping in the dialog box consists of two parts.

At the top of each scene is a Script layer. Select the first frame in the Script layer and you will see several variables defined in the Action window.

• The line variable is a string object that defines the text the speaker will say (or beep).
• The speaker variable defines the speaker (Jane or Shadow).
• The following “beep” variables identify the sound files that will play depending on the speaker variable. Jane’s beep sound is pitched higher than Shadow’s.

We created a movie clip that plays the text in each scene. The movie clip script:

• Writes the speaker variable (the speaker’s name) to the dialog box.
• Writes the speaker’s text variable up to the value of the current frame number.
• Plays the appropriate “beep” sound for each character in the speaker’s text, unless there is a “space”.

Of course, we also built the other interface elements, including the buttons to advance to the next scene and turn the sound on and off.

Take a look at the scripting we developed. Experiment by changing the speaker’s text. If you change the length of the speaker’s text, you might have to change the length of the scene, which is the same length in frames as the number of characters in the speaker’s text.

When you are ready, export the whole scene as Macromedia Flash 6 and watch the scene playback.

Using the Toon Boom Studio™ importer for Macromedia Flash MX

Now that you have maximized using Toon Boom Studio™ by creating cinematic content, you’re ready to turn to Macromedia Flash MX to add text and interactivity.

Toon Boom Technologies and Macromedia created a bridge between their programs with the Toon Boom Studio™ Importer plug-in, TBSi, for Macromedia Flash MX. TBSi gives you full-control of the import process. With TBSi, you can:

• Select the scenes, elements (layers) and frames, you want to import.
• Decide how you want to import sound. You can choose to have TBSi edit sounds with effects you added (to ensure synchronization) or you can choose not to import sounds at all.
• Preserve the layering order of your animation, or collapse layers into one to keep the effect of elements changing their relative front-back position in the 3D scene-planning space.

In addition to providing expert control, TBSi logically organizes your content in Macromedia Flash MX as follows:

• The transfer to Macromedia Flash MX layers preserves element names.
• All of your animation content - sounds, bitmaps and drawings - are organized automatically in your symbol library so that you can make the most of your content.
• It places sounds in their own layer.

Now that you know why TBSi is beneficial, let’s bring your Toon Boom Studio™ movie into Macromedia Flash MX and add some interactivity:

1. Start Macromedia Flash MX and open Shadow_Rough.fla. You'll see that there are already several scenes in the project.
2. Open Scene 3. You will import the scene we worked on into the existing Scene 3.

3. Select File > Import, browse to the location of the ShadowDialog_Rough project folder and select ShadowDialog_Rough.tbp. The Import dialog box opens.

   Note: If you do not see the Import dialog box, you probably do not have the latest version of TBSi, which works with V2. Download the latest version of the plug-in from: http://www.toonboomstudio.com/product/tbsi_plugin.php

   View screen shot (wil open in new window)

4. From the Scene list, select Scene 3 and import all of the elements and frames.
5. Select Preserve Layers. Although we used a camera move in this scene, no element layers swapped positions in the scene, so we can keep the scene's element organization without loosing any of the multiplane action on the camera.
6. De-select “Create new scenes” so that TBSi will add the content to the current scene.
7. Click OK. TBSi works to import your animation into Macromedia Flash MX.
8. TBSi adds frames to the end of a scene. If you find you have extra frames, select those frames and select Insert > Remove Frames (or press Shift+F5).
9. Save your animation.

Now you are ready to add the scripting in the next section.

Bringing cinematic shots to the web - Camera moves

Now that you’ve got the actors laid out, you are ready to design a “multiplane camera” shot.

An innovation from Disney (also the alleged birthplace of the first story board), a stand that slides along a track attaches to the multiplane camera in a traditional animation, which gives directors the power to truck in and out on their animation levels, adding depth to the viewing experience.

In Toon Boom Studio™, you can also create multiplane shots without special, expensive equipment or highly-trained camera operators. And, when you truck the camera in or out, Toon Boom Studio™ automatically resizes the objects in your element layers based on their position from the camera, just as though you are using a real camera.

To draw your audience into the scene, truck the camera in on Jane as she speaks to Shadow. You will move the camera from just over Shadow’s shoulder to get a close up on Jane.

For all of the changes you create over time in Toon Boom Studio™, you’ll use “pegs,” which are similar to guides in Macromedia Flash. Pegs allow you to create motion paths through all three dimensions (enabling multidimensional tweening), as well as change the size or rotation of the elements attached to them.

Steps:

1. Click the Add Peg button on the Timeline window. A new peg element appears in the Timeline.
2. Click the Show/Hide button next to the new peg to display it in all the View windows.
3. Drag the edge of the peg’s trackbar to the right to extend its duration to 30 frames.

4. In the Timeline window, select the “Dynamic Camera” element and drag it on top of the Peg element you just added. By dropping the camera on top of the peg, you attach the two elements together so that the camera will follow the path of the peg.

   
5. Select the Peg element you added in the Timeline and then switch to the Motion tool (Tools > Motion). Use the Motion tool to create motion paths for pegs.
6. In the Top View window, press the X key on the keyboard to zoom-in on the window and then drag the last key frame of the peg back and to the left just a bit. When you select the last key frame, you will see its Offset values in the Motion Point tab of the Properties window. The Offset values we used are: 1.78 N, 2.32 W, 1.75 B.
7. You might have to adjust Jane’s position again to make sure that she is still in the camera frame. In the Top View window, press the X key on the keyboard to zoom-in close to the Jane Peg element and use the Select tool to move the peg so that her torso is in the camera frame, which you will see best in the Camera View window.
8. Click the Play button on the Interactive Playback toolbar (or press the default shortcut [P]) to playback the shot. See how cool it is to truck in on Jane as she is speaking!
9. Save your animation.

Now you are ready to import your animation into Macromedia Flash MX to add the dialog box, the dialog, and the scripting that will make it all work together.

Note: In each scene, we added a variety of Cameras so that you can see what the scene might look like with different framing. To see what those cameras see, select their name from the Camera drop-list and/or select their names in the Timeline window.

Bringing cinematic shots to the web - Setting the Stage

Before directors can film a scene, they must set up their characters and props so that the camera can capture them in the best light. Toon Boom Studio's three-dimensional stage gives web directors the power to lay out their scene just like a film director would compose elements on a stage.

In the Toon Boom Studio ShadowDialog animation files, we have packaged pre-drawn and animated elements that you can use to experiment with different staging scenarios and camera moves. After you are comfortable with the techniques for laying out elements on the 3D stage and filming them, feel free to experiment with different layout strategies. You can even draw and animate your own characters and props and add them to the scene.

Let's start by staging a shot of Jane talking to Shadow about her troubles.

Steps:

1. Start Toon Boom Studio™ V2. Open the ShadowDialog_Rough.tbp animation set. Toon Boom Studio™ opens in Drawing Mode

   In Drawing Mode, draw or import all of your media and establish the timing of your animated elements. (Traditional animation called the tool for working out the timing of a scene an Exposure Sheet, or a Dope Sheet. It is speculated that “dope” comes from the idea of “dosage”, such as, how many frames each drawing will appear in. Dope, eh?). We have already drawn and timed all of the animated sequences, so you can move right to Sceneplanning Mode

2. Select View > Sceneplanning Mode to switch to the 3D sceneplanning stage. Notice the Camera View, Top View, and Side View windows. Like viewports in 3D programs, these windows show your scene from different perspectives. In the Top View and Side View windows, lines represent the element layers in a scene, like looking at an animation cell from the top or side

   View screen shot (will open in new window)

   Now you will stage the scene by placing Shadow in front of Jane and the background image and to the right of the camera frame, and Jane in between the background and Shadow, and to the left

3. Select the Shadow element in the Timeline and then choose the Select tool (Tools > Select)
4. In the Top View window, drag the Shadow element layer (represented by the highlighted green line in the window) down, closer to the tip of the camera.

You’ll notice as you move him that the Offset values in the Properties window change. You can use the following more specific values: .35 N, 3.62 E, 8.83 F.

Next let’s move Jane between Shadow and the background image.

5. Click the Jane Peg layer in the Timeline. We’ve used a peg to group Jane’s element layers together so that you can move all of her layers at the same time. You’ll learn more about pegs in the next section of the tutorial

6. In the Top View window, use the Select tool to drag the Jane Peg element down in the Top View window, closer to the camera tip, but a good distance from Shadow, and to the left side of the camera frame. To move the peg and all of the layers attached to it, drag the red circle that represents the peg

   You'll notice that as you drag the Jane Peg forward, she will get larger in the Camera View window. This is because Toon Boom Studio™ automatically recalculates the size of elements as you move them closer or farther from the camera

7. Save your animation.

Now you are ready to create the camera move.