Beruflich Dokumente
Kultur Dokumente
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
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 Players 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.
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.
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!
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.
For all of the changes you create over time in Toon Boom Studio, youll 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 Pegs first frame. Press the default keyboard shortcut [I] to insert a new keyframe.
5. In the Sceneplanning toolbar, select the Motion motion paths for pegs. 6. In the Timeline view, go to the last frame.
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!
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
When designing your players 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 players background.
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.
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
3. Repeat the import steps and select the desired scene in the TBSi interfaces Scenes list. 4. If the following warning message is displayed, select the Dont replace existing items option and click on the OK button.
2. Select the first cell of your Action layer. 3. Press [F9] to open the Actions panel.
12
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
14
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
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 players 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
17