Toon Boom Animation Inc. Importing Your Toon Boom Studio Project Into Adobe Flash

Toon Boom Animation Inc. Importing Your Toon Boom Studio Project Into Adobe Flash Learn how to insert your Toon Boom Studio animation including camera moves into Adobe Flash.

Legal Notices Published by Toon Boom Animation Inc.

Disclaimer The content of this document is covered by a specific limited warranty and exclusions and limit of liability under the applicable License Agreement as supplemented by the special terms and conditions for Adobe® Flash® File Format (SWF). Please refer to the License Agreement and to those special terms and conditions for details. The content of this manual is the property of Toon Boom Animation Inc. and is copyrighted. Any reproduction in whole or in part is strictly prohibited. Copyright © 2009 by Toon Boom Animation Inc. All rights reserved.

Trademarks Toon Boom Studio is a trademark owned by Toon Boom Animation Inc. All other trademarks are the property of their respective owners.

Publication Date July 2009

Bringing Cinematic Shots to the Web Web animation 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 Adobe 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 Adobe Flash 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. In “The Cleaning Rituals of the Sea Turtle”, there are two scenes. The first scene is a multiplane establishing shot taking you through the underwater world. In this scene, the camera work helps guide the audience from the coral reef to the mysterious character hidden in the seaweed. For this tutorial, we are going to look at the surprise dialog scene of the sea turtle. We will give you pre-drawn and animated sequences so that you can focus your attention on the camera. Use Toon Boom Studio to have fun creating fresh and lively animation, then move onto Adobe Flash to add a dimension of interactivity to your projects. Learn how to create your own movie player interface in Toon Boom Studio and then, in Adobe Flash, bring your buttons to life with Action Script 3.0!

2

This tutorial is divided as follows: • • • • • • • •

Requirements Getting Started What to Do in Toon Boom Studio Opening the Player Template Getting Content for Your Player Importing Your Custom Player from Toon Boom Studio Modifying the Player’s Behaviour Publishing Your Project

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

Toon Boom Studio Trial: http://www.toonboom.com/products/trial_dwn/ Toon Boom Studio Importer plug-in: http://www.toonboom.com/products/toonBoomStudio/tbsi.php

In order to learn how to insert your Toon Boom Studio animations into Adobe Flash, you require material to work with. We provide you with templates which you can use in this tutorial. Material Pack: http://www.toonboom.com/products/toonBoomStudio/tbsi.php In this package you will find the following material: • • • • •

TBS Turtle Shower Undone: Toon Boom Studio animation project including two scenes to be completed by the user. TBS Turtle Shower Completed: Toon Boom Studio animation project including two scenes and a camera motion. TBSAS3_Player_Template > tbsi_navigation_template.fla: Flash project containing a sample player and action script in which you will import your TBS content. TBSAS3_Player_Template > tbsi_navigation_complete.fla: Flash project containing the completed example of this tutorial. TBSAS3_Player_Template > programmation.as: Action Script 3.0 class used by the tbsi_navigation_template.fla and tbsi_navigation_complete.fla projects. This class has to be kept with the Flash project.

3

Getting Started Use Toon Boom Studio to have fun creating fresh and lively animation, and then move onto Adobe Flash to add a dimension of interactivity to your project and preview it in a Flash player.

Installing the TBSi Plug-in Toon Boom Studio Importer (TBSi) for Adobe Flash is a plug-in that lets you load Toon Boom Studio projects directly into Flash. TBSi uses unique technology to improve the communication between Toon Boom Studio and Flash, resulting in a streamlined workflow for adding interactivity to Flash animations created in Toon Boom Studio. Toon Boom Studio Importer can import projects made with all versions of Toon Boom Studio.

Installing the TBS Importer Plug-in on Windows: This version of Toon Boom Studio Importer supports the following version of Adobe Flash for Windows: • Flash 8 • Flash CS3 • Flash CS4 To install the TBSi plug-in: 1. Unzip the TBSi5-win.zip file. The compressed zip file includes the following items: • ToonboomStudioImportPlugin.dll file • ToonboomStudioImportPlugin folder 2. Close any instance of Adobe Flash. 3. Copy (or replace) these two items in the following locations on your hard drive: • Flash 8 \Program Files\Macromedia\Flash 8\en\Configuration\Importers • Flash CS3 \Program Files\Adobe\Adobe Flash CS3\en\Configuration\Importers • Flash CS4 \Program Files\Adobe\Adobe Flash CS4\en\Configuration\Importers 4. Restart Flash and you're off!

Installing the TBS Importer Plug-in on Mac: This version of Toon Boom Studio Importer supports the following version of Adobe Flash for Windows: • Flash 8 (TBSi8-mac.dmg) • Flash CS3 (TBSiCS3-CS4-mac.dmg) • Flash CS4 (TBSiCS3-CS4-mac.dmg) To install the TBSi plug-in Flash 8: 1. Open the TBSi8-mac.dmg file. The disk image contains one file: • Toon Boom Studio Flash Plugin 8.bundle 2. Close any instances of Adobe Flash. 3. Copy (or replace) this item in the following location on your hard drive: • /Applications/Macromedia Flash 8/Configuration/Importers 4. Restart Flash and you're off!

4

To install the TBSi plug-in Flash CS3 : 1. Open the TBSiCS3-CS4-mac.dmg file. The disk image contains one file: • Toon Boom Studio Flash Plugin.bundle 2. Close any instances of Adobe Flash. 3. Copy (or replace) this item in the following location on your hard drive: • /Applications/Adobe Flash CS3/Common/Configuration/Importers 4. Restart Flash and you're off! To install the TBSi plug-in Flash CS4 : 1. Open the TBSiCS3-CS4-mac.dmg file. The disk image contains one file: • Toon Boom Studio Flash Plugin.bundle 2. Close any instances of Adobe Flash. 3. Copy (or replace) this item in the following location on your hard drive: • /Applications/Adobe Flash CS4/Common/Configuration/Importers 4. Restart Flash and you're off!

What to Do in Toon Boom Studio In this exercise, we provide you with Toon Boom Studio pre-drawn and animated scenes, but feel free to create your own content or even design your own player elements to import into Adobe Flash.

Opening the Sample Project To set the camera motion in your Toon Boom Studio scene, open the sample project found in the material package: TBS Turtle Shower Undone.

Camera Moves All the elements in the scene are already layed out for you so you can focus on the camera motion. 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 distance from the camera, just as though you are using a real camera. To draw your audience into the scene, truck the camera in on the showering turtle hidden in the seaweeds. You will move the camera from the general view of the coral reef and sand dune to the seaweed located at the rear of the stage.

5

For all of the changes you create over time in Toon Boom Studio, you’ll use “pegs,” which are similar to guides in Adobe Flash. Pegs allow you to create motion paths for static elements such as the camera or group of elements such as a school of fish through all three dimensions (enabling multidimensional tweening), as well as change the size or rotation of the elements attached to them. If you are moving a single drawing or animation, you do not need a peg. You can create the trajectory animation directly on the drawing layer using the embedded peg.

To create a camera move: 1. Click the Add Peg button the Timeline.

on the Timeline window. A new peg element appears in

2. Enable the Show/Hide check box next to the new peg to display it in all the View windows.

3. In the Timeline window, select the “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.

4. In the Timeline view, select the Camera Peg’s first frame. Press the default keyboard shortcut [I] to insert a new keyframe.

6

5. In the Sceneplanning toolbar, select the Motion motion paths for pegs. 6. In the Timeline view, go to the last frame.

tool. Use the Motion tool to create

7. In the Top View window, press the X key 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 in the Top view using the Motion tool, you will see its Offset values in the Properties window. The Offset values we used are: 3.70 S, 0.15 E, 9.98 B.

on the Interactive Playback toolbar or press the default 8. Click the Play button shortcut [P] to playback the shot. See how cool it is to truck in on the hidden sea turtle as she is changing colour!

9. Save your animation.

7

Opening the Player Template You are now ready to import your animation into Adobe Flash to add the dialog box, the dialog, and the scripting that will make it all work together. To start building your player into Adobe Flash, you first need to open the sample player project which we provided. To open the sample player project: 1. Launch your Flash application. 2. Browse to the sample project provided in the tutorial package: TBSAS3_Player_Template > tbsi_navigation_template.fla 3. Click on the Open button. 4. To test the movie, in the top menu select Control > Test Movie.

Movie Player Template Functionality

The movie player template provided in this tutorial allows you to play the different scenes available in your Adobe Flash project. The player has the following buttons: • Play/Pause • Mute/Unmute

8

Creating Your Own Player Interface You do not necessarily have to use the provided player. You can create your own.

Centre the Player’s Elements

When designing your player’s buttons, you need to centre them all in the Camera view. You can use the drawing grid to locate the centre. Once you import your elements into Adobe Flash you can position your buttons on your player’s background.

Using a Separate Layer for Each Button In Toon Boom Studio, draw each button and its background on a separate layer. This way, when you import your drawings into Adobe Flash, they are stored as different movie clips in the library. To match the player template, you need to create the following elements: • Mute and Unmute buttons • Next Scene button • Previous Scene button • Play and Pause buttons • Player skin

Renaming the Player Scene In Toon Boom Studio, you should rename the Player’s scene as TBS_Player or similar. To rename the scene, do the following: 1. In Toon Boom Studio, in the top menu, select Window > Scene Manager. 2. In the Scene Manager window, right-click (Windows) or [Ctrl]+click (Mac) and select Properties. 3. In the Properties dialog box, rename the scene. 4. Click on the OK button.

9

Getting Content for Your Player

You are now ready to import your Toon Boom Studio animation into your Flash player! In this player, you can either play an animation created in Toon Boom Studio or content created directly in Adobe Flash.

Notes Using MP3 format Sound Files To reduce the size of your files on the web and to facilitate the import in Adobe Flash CS3, you should use MP3 sound files into your Toon Boom Studio projects rather than WAV or AIFF formats. Note that wav files will not be imported in flash using TBSi Plugin.

Shadow effect The drop shadow effect created in the Toon Boom Studio timeline will not be imported in Flash. Note that it will keep your final file size much lighter.

Importing Your Toon Boom Studio Project To import your Toon Boom Studio project into Adobe Flash: 1. In your Flash project, in the Properties tab, modify the size of your canvas to match your Studio movie size. The dimensions of the sample material provided are 640x480. You can find the dimensions of your Toon Boom Studio project in Studio’s top menu under File > Animation Properties. 2. In the top menu, select File > Import > Import to Stage. 3. Browse for the TBS project provided in this tutorial package or for any or your personal TBS project: TBS Turtle Shower Undone > Turtle_Shower_Undone.tbp (You can also use the completed version of the Turtle_Shower_Completed.tbp.) 4. Click on the Open button. The Toon Boom Studio Importer dialog box appears.

10

5. In the TBSi window, select the scene to import. We recommend that you import each scene individually; this saves time by increasing the import speed. Importing all of the scenes at once slows down the import speed and takes longer to perform the process. If you have sound in your scene, enable the Import Sounds option.

Make sure the Preserve Layers option is enabled. 6. Click on the OK button. 7. Wait for the import process to be completed. Your elements are now imported in your Flash project.

11

Adding Extra Toon Boom Studio Scenes or Projects If you have several scenes in your Toon Boom Studio project or if you want to add content from another TBS project, you must add a new scene to your Flash project. To add a new scene to your Flash project and import new content: 1. In the top menu, select Insert > Scene. 2. In the Scene drop-down menu, select the new scene.

3. Repeat the import steps and select the desired scene in the TBSi interface’s Scenes list. 4. If the following warning message is displayed, select the Don’t replace existing items option and click on the OK button.

Stopping Your Scenes from Playing Automatically By default, when you launch your Flash movie, the scenes play automatically without having to press on the Play button. To prevent this, insert a Stop command on the first frame of each scene. To insert a Stop command: 1. In the Timeline view, select Layer 1 and rename it Action. If you do not have a blank layer, add a new one.

2. Select the first cell of your Action layer. 3. Press [F9] to open the Actions panel.

12

4. In the Actions panel, type the following command: stop();

5. Save your project. 6. Repeat this process for each scene in your Flash project. 7. To test the movie, in the top menu select Control > Test Movie.

13

Importing Your Custom Player from Toon Boom Studio If you created your own player in Toon Boom Studio and want to replace the existing player design in the template we supplied, you can also import it using the Toon Boom Studio Importer plug-in. There is also a player design provided in this tutorial package.

Importing the Player Content To import a custom player in your Flash project: 1. In the top menu, select File > Import > Import to Library. 2. Browse to the TBS Player project provided in this tutorial package or to any of your TBS player designs: TBS_Player > TBS_Player.tbp 3. Click on the Open button. The Toon Boom Studio Importer dialog box appears. 4. In the TBSi window, select the scene to import. Make sure the Preserve layers option is enabled. 5. Click on the OK button. 6. Wait for the import process to be completed. 7. If the following warning message is displayed, select the Don’t replace existing items option and click on the OK button.

Your elements now appear in the Library window.

14

Arranging the Player Elements Now that all of your player buttons are imported in your Flash project, you can insert them into the sample player. To arrange your player elements: 1. In the Library view, double-click on the MC_PlayPause movie clip to edit it. 2. In the Timeline view, click on the first cell of the Play-Pause Button, layer.

3. 4. 5. 6.

Delete any artwork visible on the Stage. In the Library view, drag your TBS Play button onto the Stage. In the top menu, select Window > Align. In the Align window, enable the To Stage option and centre the button on the Stage.

7. In the Timeline view, click on the second cell of the Play-Pause Button layer. 8. Delete any artwork visible on the Stage. 9. Repeat the process for each button and the background in the sample player. Do not forget to set the two states of the Mute button as you did for the Play/Pause button. 10. In the Library view, double-click on the MCB_Interface movie clip to edit it. 11. On the Stage, position your buttons the way you want. 12. To test the movie, in the top menu select Control > Test Movie.

15

Modifying the Player’s Behaviour

You may also want to modify the way the player behaves or even add extra buttons to swap between your scenes. Using ActionScript 3.0, you can modify the player’s code included on the Action layer of the MCB Interface movieclip available in the Library. Here is a sample of the code used for the Play and Mute buttons: MC_PlayPause.addEventListener(MouseEvent.CLICK,FUNC_PlayPause); MC_Mute.addEventListener(MouseEvent.CLICK,FUNC_Mute); MC_PlayPause.buttonMode = true; MC_Mute.buttonMode = true;

function FUNC_PlayPause(e:Event):void { if (boolPlay) { _level0.stop(); e.currentTarget.gotoAndStop(1); boolPlay = false; } else { _level0.play(); e.currentTarget.gotoAndStop(2); boolPlay = true; } } function FUNC_Mute(e:Event):void { if (boolMute) { SoundMixer.soundTransform = new SoundTransform(1); e.currentTarget.gotoAndStop(1); boolMute = false; } else { SoundMixer.soundTransform = new SoundTransform(0); e.currentTarget.gotoAndStop(2); boolMute = true; } }

16

Publishing Your Project Your player is now ready to be published on the web! Adobe Flash can create your web page for you and embed your player in it. All you need to do is to upload it onto the web. To publish your project: 1. In the top menu, select File > Publish. If you want to adjust the Publishing settings, select File > Publish Settings. Refer to the Adobe Flash Help file to learn more about these settings. 2. Wait for the publishing process to be completed. 3. In your Flash project folder, select all of the following files and upload them to the web: • *.swf • *.html • *.js

17