WEBVTT Kind: captions Language: en 00:00:00.080 --> 00:00:04.120 This is a straightforward tutorial on how to use Toon Boom. 00:00:04.120 --> 00:00:08.880 It’s specifically for artists used to animating in Adobe Animate or Flash, but you can still 00:00:08.880 --> 00:00:11.670 use this tutorial without experience. 00:00:11.670 --> 00:00:13.070 Launch Toon Boom. 00:00:13.070 --> 00:00:17.990 Browse to the project folder you want to save the animation you’re about to start. 00:00:17.990 --> 00:00:19.830 Choose your project size settings. 00:00:19.830 --> 00:00:20.990 Create Scene. 00:00:20.990 --> 00:00:26.160 Toom Boom creates a folder for the entire scene, so this is very different from Flash. 00:00:26.160 --> 00:00:28.190 Every scene has its own folder. 00:00:28.190 --> 00:00:32.320 You need to copy this entire folder to move a scene or back it up. 00:00:32.320 --> 00:00:36.750 The first thing that will confound you when you start using Toon Boom is everything you 00:00:36.750 --> 00:00:39.110 draw is pixelated. 00:00:39.110 --> 00:00:43.130 This is because Toon Boom does not render your drawings in real time. 00:00:43.130 --> 00:00:47.270 If you want to see what your stage actually looks like, you need to click this blue flower 00:00:47.270 --> 00:00:49.550 icon above the timeline. 00:00:49.550 --> 00:00:54.100 Note you can’t live-playback or scrub your timeline in render view. 00:00:54.100 --> 00:00:57.160 You have to click back to the gray flower to do that. 00:00:57.160 --> 00:01:01.510 Being unable to see real-time results is weird, but you get used to it. 00:01:01.510 --> 00:01:06.020 Which brings up the next conundrum: the render preview shows the stage as black, and when 00:01:06.020 --> 00:01:08.630 your outlines are black, you can’t see anything. 00:01:08.630 --> 00:01:13.030 To fix this, click the plus button on the timeline and choose Colour-Card. 00:01:13.030 --> 00:01:16.250 Drag the art layer up so it isn’t nested in the color card. 00:01:16.250 --> 00:01:22.210 By default the card is white, but you can change it by double clicking the layer. 00:01:22.210 --> 00:01:26.120 In preview view, when you click to a different layer those squares go away. 00:01:26.120 --> 00:01:30.400 Color cards are opaque layers, so they will export with your animation unless you hide 00:01:30.400 --> 00:01:33.540 them by clicking these eyes before exporting. 00:01:33.540 --> 00:01:37.090 Lock the layer so you don’t end up selecting it on accident all the time. 00:01:37.090 --> 00:01:39.850 Moving on to drawing tools. 00:01:39.850 --> 00:01:43.670 The keyboard shortcuts for drawing tools in Toon Boom are different from Adobe, so you 00:01:43.670 --> 00:01:45.550 must to re-learn them. 00:01:45.550 --> 00:01:50.060 If you absolutely need to, you can change shortcuts under Edit >> Preferences in the 00:01:50.060 --> 00:01:52.270 Drawing Mode category. 00:01:52.270 --> 00:01:57.299 Click and hold on any tool with a little arrow on it to access tools nested beneath it. 00:01:57.299 --> 00:02:01.380 While you’re drawing, the abilities of whatever tool you are using show up in the Tool Properties 00:02:01.380 --> 00:02:02.380 window. 00:02:02.380 --> 00:02:04.659 The pencil shows the style types. 00:02:04.659 --> 00:02:09.060 You can create a new one by clicking this arrow and then one of these tiny buttons at 00:02:09.060 --> 00:02:12.110 the top of the window to add new or overwrite old. 00:02:12.110 --> 00:02:17.450 Below style choice are options such as paint behind, auto fill, end trimming, and other 00:02:17.450 --> 00:02:20.510 options Flash doesn’t have that you can play with. 00:02:20.510 --> 00:02:24.930 There are lots of tool options you won’t be familiar with, so experiment. 00:02:24.930 --> 00:02:29.080 Tools you won’t recognize at all include cutter, which you can slash over a hanging 00:02:29.080 --> 00:02:30.740 line to auto delete. 00:02:30.740 --> 00:02:34.630 Often it only selects the segment and you have to press the delete key. 00:02:34.630 --> 00:02:39.220 Stroke and Close Gap tools work on invisible lines, which I’ll talk about later. 00:02:39.220 --> 00:02:43.260 Drawing Pivot sets the transformation point, which you’ll need because in Toon Boom the 00:02:43.260 --> 00:02:47.140 default pivot point for everything is the center of the stage. 00:02:47.140 --> 00:02:49.959 Morphing Tool - think of it as advanced shape tweens. 00:02:49.959 --> 00:02:54.360 You’ll have to watch tutorials on how to use the morphing tool if you want to do shape 00:02:54.360 --> 00:02:56.190 tweens in Toon Boom. 00:02:56.190 --> 00:02:58.400 Animate button, which is for tweening. 00:02:58.400 --> 00:03:05.370 Below that, Toon Boom’s free transform tool affects the layer properties, not the art 00:03:05.370 --> 00:03:06.370 itself. 00:03:06.370 --> 00:03:11.370 What that means is you should use the select tool to scale, rotate, and skew art. 00:03:11.370 --> 00:03:16.840 The transform tool is for tweens and impermanent layer adjustments you can undo by resetting 00:03:16.840 --> 00:03:18.690 the layer properties. 00:03:18.690 --> 00:03:22.110 See a layer’s properties by clicking the plus button on that layer. 00:03:22.110 --> 00:03:23.730 Minus to collapse it. 00:03:23.730 --> 00:03:27.849 Under transform is a tool you already know - onion skin - but with easy adjustment buttons 00:03:27.849 --> 00:03:32.430 above the drawing area plus the handles on the timeline you’re used to. 00:03:32.430 --> 00:03:36.580 To change drawing color, you need to pick a swatch from a palette. 00:03:36.580 --> 00:03:39.700 Make a new swatch with plus, double click to edit. 00:03:39.700 --> 00:03:43.739 All Toon Boom colors work as if they were linked swatches in Flash. 00:03:43.739 --> 00:03:47.871 Draw anywhere in this entire scene with one swatch, and if you change that swatch, it 00:03:47.871 --> 00:03:50.540 changes all of the places you used that swatch. 00:03:50.540 --> 00:03:55.230 Every color you draw with must have a swatch - you can’t grab whatever random colors 00:03:55.230 --> 00:03:57.430 you want like in Flash. 00:03:57.430 --> 00:04:02.290 To keep things organized you can have multiple palettes. 00:04:02.290 --> 00:04:06.940 Something very different about Toon Boom is every layer in the timeline has a layer for 00:04:06.940 --> 00:04:10.069 line art and a layer for color art within it. 00:04:10.069 --> 00:04:15.120 Higher tier versions of Toon Boom let you turn on an overlay and underlay layer in addition 00:04:15.120 --> 00:04:21.680 to that under Edit >> Preferences >> Advanced >> Support Overlay and Underlay Arts. 00:04:21.680 --> 00:04:25.139 To change which layer you are drawing on, click this bar. 00:04:25.139 --> 00:04:26.470 Can’t see the bar? 00:04:26.470 --> 00:04:28.740 Right click in >> Art Layer. 00:04:28.740 --> 00:04:33.280 A best practice is to draw line art on the line layer. 00:04:33.280 --> 00:04:38.849 Select the art, then click Create Color Art from Line Art button in tool properties. 00:04:38.849 --> 00:04:40.930 Now select the color layer. 00:04:40.930 --> 00:04:42.539 Invisible outlines appear. 00:04:42.539 --> 00:04:44.940 Use your paint bucket to fill in the outlines. 00:04:44.940 --> 00:04:50.210 If there are gaps - indicated by these yellow nodes, close them with Close Gap tool or Stroke 00:04:50.210 --> 00:04:53.539 tool for drawing shapes with invisible outlines. 00:04:53.539 --> 00:04:55.449 Toon Boom gets even weirder. 00:04:55.449 --> 00:04:57.639 Right now we are in Camera view. 00:04:57.639 --> 00:05:00.300 Click this tab to go to Drawing View. 00:05:00.300 --> 00:05:03.360 Suddenly all we see is the color art. 00:05:03.360 --> 00:05:07.809 Drawing view shows us only the layer we are working on, and it hides any transformations 00:05:07.809 --> 00:05:11.350 you might have made to the layer itself. 00:05:11.350 --> 00:05:15.430 So say in camera view you grab the transform tool and rotate your art. 00:05:15.430 --> 00:05:16.580 Go to drawing view. 00:05:16.580 --> 00:05:18.509 Those transformations are hidden. 00:05:18.509 --> 00:05:21.849 Maybe you can tell already, but drawing view is incredibly useful. 00:05:21.849 --> 00:05:26.479 If you do want to see all of the layers at once in drawing view, click the eye at the 00:05:26.479 --> 00:05:28.050 top of the column. 00:05:28.050 --> 00:05:33.520 To display all of the layers in the timeline, click the light above the drawing area. 00:05:33.520 --> 00:05:38.099 Unlike Flash, drawing tools only work on the part of the layer you’re working on, and 00:05:38.099 --> 00:05:43.030 all strokes are independent entities, so you’ll never worry about lining over colors or coloring 00:05:43.030 --> 00:05:47.650 over lines or erasing a hole through all of your unlocked layers. 00:05:47.650 --> 00:05:54.789 However, you will accidentally forget to switch back to the line art layer and have to cut 00:05:54.789 --> 00:05:58.759 the stuff you made on the color layer and paste it to the line layer. 00:05:58.759 --> 00:06:02.460 Sometimes you will want to edit line art and color art at the same time, and you can do 00:06:02.460 --> 00:06:06.749 that by picking a tool like the eraser and turning on this option. 00:06:06.749 --> 00:06:10.979 Once you’re used to the tools you can do things that would be unimaginable in Flash, 00:06:10.979 --> 00:06:16.409 like turn an entire layer into color art, then color every single frame with one click. 00:06:16.409 --> 00:06:20.969 This trick only works with small spacing, i.e. the art can’t move too far from its 00:06:20.969 --> 00:06:21.969 start point. 00:06:21.969 --> 00:06:24.999 Now let’s talk about differences in frame-by-frame animation. 00:06:24.999 --> 00:06:27.869 For the most part it’s what you would expect - draw a picture. 00:06:27.869 --> 00:06:28.869 Click the next frame. 00:06:28.869 --> 00:06:30.469 Draw the next picture. 00:06:30.469 --> 00:06:34.990 Click once, click again, hold, and drag a frame to change timing. 00:06:34.990 --> 00:06:39.560 Use the + and - keys to lengthen or shorten a frame’s duration. 00:06:39.560 --> 00:06:44.089 Click and drag over blank frames and then hit this button to fill in gaps. 00:06:44.089 --> 00:06:47.939 The weird thing about Toon Boom is that drawings are linked. 00:06:47.939 --> 00:06:52.740 So if you copy one drawing and paste it over here, then draw something new, it affects 00:06:52.740 --> 00:06:54.919 your original drawing too! 00:06:54.919 --> 00:06:59.419 The way to stop this from happening is to copy your drawing, paste it, then click this 00:06:59.419 --> 00:07:02.590 Duplicate Drawing button to create a new drawing. 00:07:02.590 --> 00:07:05.520 You’ll notice the name of the drawing changes too. 00:07:05.520 --> 00:07:08.520 Now when you draw, the first picture stays the same. 00:07:08.520 --> 00:07:13.379 Do not expect to be able to copy drawings from one layer and paste them into another. 00:07:13.379 --> 00:07:14.509 You can do this in Flash. 00:07:14.509 --> 00:07:16.360 You can not do it in Toon Boom. 00:07:16.360 --> 00:07:21.899 You’ll have to use the select tool to copy the art, then go to the new layer and paste 00:07:21.899 --> 00:07:22.899 the art. 00:07:22.899 --> 00:07:25.979 Don’t try to paste frames to and from different layers. 00:07:25.979 --> 00:07:27.349 It’ll mess things up. 00:07:27.349 --> 00:07:30.490 To make an animation loop, you copy and paste drawings. 00:07:30.490 --> 00:07:33.550 It’s not the greatest, but it works. 00:07:33.550 --> 00:07:36.449 For tweening animations, there are no symbols. 00:07:36.449 --> 00:07:38.389 Toon Boom has symbols, but forget about them. 00:07:38.389 --> 00:07:39.759 You don’t need them. 00:07:39.759 --> 00:07:41.860 Click on the layer you want to tween. 00:07:41.860 --> 00:07:44.819 Then click this orange curve button in the timeline. 00:07:44.819 --> 00:07:46.189 This makes a peg. 00:07:46.189 --> 00:07:49.860 In Toon Boom, you animate pegs, not the art itself. 00:07:49.860 --> 00:07:53.979 Once you have a peg, make sure the animate button is turned on, then select the free 00:07:53.979 --> 00:07:55.689 transform tool. 00:07:55.689 --> 00:07:57.529 Click the peg layer. 00:07:57.529 --> 00:07:59.610 Drag your art where you want it to go. 00:07:59.610 --> 00:08:02.259 The tween appears on the peg layer. 00:08:02.259 --> 00:08:08.900 Tools in the timeline allow you to add or remove keyframes and set easing type for selected 00:08:08.900 --> 00:08:10.629 keyframes. 00:08:10.629 --> 00:08:15.179 These two buttons switch keyframes between tweens and stop motion. 00:08:15.179 --> 00:08:19.749 Stop motion keyframes let the art jump from one position to the next without sliding around 00:08:19.749 --> 00:08:20.800 in between. 00:08:20.800 --> 00:08:24.770 The transform tool isn’t the only tool you can use for making tweens. 00:08:24.770 --> 00:08:29.639 Any of the blue “Advanced Animation” tools up here are for tweening as well. 00:08:29.639 --> 00:08:34.740 You can nest layers within layers, pegs within pegs, and do all of the layer building to 00:08:34.740 --> 00:08:39.440 make a puppet directly in the timeline without ever touching a symbol. 00:08:39.440 --> 00:08:43.250 To add and animate a camera, plus button, Camera. 00:08:43.250 --> 00:08:45.030 Add a peg to the camera. 00:08:45.030 --> 00:08:47.210 Animate the peg like you would anything else. 00:08:47.210 --> 00:08:51.910 If your camera is being stupid, click the peg, right click the drawing area >> Show 00:08:51.910 --> 00:08:54.180 Path and Control Parameters. 00:08:54.180 --> 00:08:55.900 Get your transform tool. 00:08:55.900 --> 00:08:56.900 Click a node. 00:08:56.900 --> 00:08:59.920 In the menu, Animation >> Linear Motion. 00:08:59.920 --> 00:09:01.370 Click the next node. 00:09:01.370 --> 00:09:02.370 Keep doing this. 00:09:02.370 --> 00:09:06.220 It’s annoying and tedious, but I haven’t found a more efficient way to fix it. 00:09:06.220 --> 00:09:10.880 When finished, click the peg layer, right click the drawing area and pick the option 00:09:10.880 --> 00:09:12.390 again to hide the curve. 00:09:12.390 --> 00:09:15.420 Masks in Toon Boom are called a Cutter Effect. 00:09:15.420 --> 00:09:20.510 To apply an effect to a layer, click it, then plus button >> Effects >> Cutter. 00:09:20.510 --> 00:09:21.980 Uncollapse cutter. 00:09:21.980 --> 00:09:23.580 You need a matte layer. 00:09:23.580 --> 00:09:26.370 Duplicate the layer you want to use as a mask. 00:09:26.370 --> 00:09:29.100 Click and drag the layer to the matte box. 00:09:29.100 --> 00:09:31.880 Finally, double click on cutter and check “inverted.” 00:09:31.880 --> 00:09:33.740 There’s your mask. 00:09:33.740 --> 00:09:37.370 Effects only work on individual layers. 00:09:37.370 --> 00:09:41.260 If you need to put a single effect on a set of multiple layers, you’ll have to select 00:09:41.260 --> 00:09:44.610 all of the layers, right click, group selection. 00:09:44.610 --> 00:09:49.620 Click on the group, not the layers, plus button, effect, pick an effect. 00:09:49.620 --> 00:09:53.280 Most effects won’t show up unless you are in render view, so you’ll need to click 00:09:53.280 --> 00:09:56.390 the blue flower to see if it looks right. 00:09:56.390 --> 00:09:57.940 On to the library! 00:09:57.940 --> 00:09:59.960 Works like Flash, but not really. 00:09:59.960 --> 00:10:03.850 First, start a new library by right clicking >> Open Library. 00:10:03.850 --> 00:10:07.880 Choose a place to create a library you want to save puppets and art in for use in other 00:10:07.880 --> 00:10:09.810 Toon Boom animations. 00:10:09.810 --> 00:10:10.870 Select Folder. 00:10:10.870 --> 00:10:13.220 Right click on the library >> Right To Modify. 00:10:13.220 --> 00:10:17.890 Highlight, drag, and drop art and animations you want to reuse into the library. 00:10:17.890 --> 00:10:21.840 If you want to edit something in the library, you must make sure you have right to modify 00:10:21.840 --> 00:10:27.780 checked for the library, then right click the item >> Edit Template. 00:10:27.780 --> 00:10:33.070 Open any Toon Boom scene and drag things from the library into the scene to use them. 00:10:33.070 --> 00:10:35.840 To preview your animation click the play button. 00:10:35.840 --> 00:10:39.310 Turns sound playback on or off with the audio buttons. 00:10:39.310 --> 00:10:41.690 Loop the preview with the loop button. 00:10:41.690 --> 00:10:45.480 Change which section is looping by adjusting the black stop and start arrows. 00:10:45.480 --> 00:10:49.220 Create a render preview with the starred play button. 00:10:49.220 --> 00:10:54.140 This exports every frame in your selection to the frames folder in your scene, then loads 00:10:54.140 --> 00:10:57.030 them into a player and previews them for you. 00:10:57.030 --> 00:11:00.540 Remember to delete these images at some point to free up file space. 00:11:00.540 --> 00:11:04.810 I usually clean out all of the frames folders in my scenes when an animation is finished 00:11:04.810 --> 00:11:06.160 and online. 00:11:06.160 --> 00:11:08.140 Finally, exporting. 00:11:08.140 --> 00:11:09.870 File >> Export >> Movie. 00:11:09.870 --> 00:11:11.850 You don’t get many options. 00:11:11.850 --> 00:11:16.330 To preserve the integrity of anything you imported to toon boom, say, painted backgrounds, 00:11:16.330 --> 00:11:20.540 you need to export every keyframe at the highest quality. 00:11:20.540 --> 00:11:25.470 For After Effects or any other type of compositing you plan to do outside Toon Boom that involves 00:11:25.470 --> 00:11:29.720 putting things with transparent backgrounds on top of other things, everybody recommends 00:11:29.720 --> 00:11:35.010 exporting a PNG sequence instead of a movie file with alpha channel. 00:11:35.010 --> 00:11:36.420 Use PNGs. 00:11:36.420 --> 00:11:38.930 It takes up less file space. 00:11:38.930 --> 00:11:44.510 You can export SWFs out of Toon Boom, but they only work for very specific things: basic 00:11:44.510 --> 00:11:48.420 lines and colors without any effects or textured lines. 00:11:48.420 --> 00:11:54.020 HUFF That is a really solid, condensed tutorial on getting started with Toon Boom. 00:11:54.020 --> 00:11:57.840 This doesn’t cover any of the Toon Boom Premium features (that tier is too expensive 00:11:57.840 --> 00:12:01.850 for my budget) but it is everything you’ll need to know to get started without all that 00:12:01.850 --> 00:12:05.260 awkward flailing because it’s so different from Flash. 00:12:05.260 --> 00:12:06.840 Make some great animations! 00:12:06.840 --> 00:12:15.980 If you’re looking for more straight-to-the-point tutorials I’ve made, see description below.