***** Please Don't Forget To Visit My Web Comic *****

BugPudding Webcomic

Additionally, You Can Help Support Cartooning in ToonBoom By Making A $5 donation.

Sunday, December 16, 2007

A Text Scrolling Technique In Perspective

As frequently happens, this tutorial was inspired by a question on the Toon Boom Studio User Forums. The question was "is it possible to do a perspective style scroll similar to the Star Wars opening title sequence using TBS?" So here is a brief tutorial showing one possible technique that will give you that effect. I also included some applications of the TBS Color Transform Effect in animating the text. You can view the final movie first and then come back and read how to create this effect.

The Sample Star Wars Style Perspective Text Scroll

(click on this link to watch the movie)

To start, of course we need a new animation project. And the first thing we will need is to create a drawing element for the classic opening text "a long time ago in a galaxy far far away....". Now I need to put my usual reminder in at this point. It is the technique that we are discussing here and the technique is practical and usable by itself. All text and images used in this tutorial are just here to demonstrate this technique. You can use any text and images in your own work and how you name your elements in your own work is your personal preference. You can adopt my naming conventions or not as you so choose.

The default drawing element in TBS projects is named "drawing 1", so you could leave it that way. I am going to rename it to "a" because I typically name my drawing elements as alphabet letters. To do this I select the timeline track label for this element and right click to get the context menu. I then select "Rename Element".

A dialog opens and I can change the name from "drawing 1" to "a" and click the "OK" button.

To make the text on my first cell, I select the "text" tool from the drawing tool palette.

I select a font style and size and just type in the desired text (all personal preferences). I centered this text on my field guide, but in scene planning I'll adjust its size and location as desired using the scene planning operations select tool (6).

I want to have a "fade in and fade out" for this opening text in my movie so I will do this using a color transform effect. I will add this element by clicking on the "+" icon at the top of the timeline.

I use the pull-down menu on the element type box to select "Color Transform Effect".

A new track label appears in my timeline track label list and the default 20 frame color transform effect shows in the time line. I am going to select that transform effect and drag it to line up with the first frame of my "a" drawing element which is frame 34 in my example. This is a repositioning of the start of the color transform effect in time. I also named the color transform effect "ca", which is my standard way of naming color transforms to match the element they will control. I will also drag the "a" element track label on top of the "ca" element track label to "attach" the child to its parent.

I want this "fade in and fade out" effect to run from frame 34 to frame 120, so I grab the end of the color transform and drag it out to frame 120. I'm not repositioning the effect this time, I'm stretching its duration.

I now select the track for element "a" and move the cursor to frame 120 and right click to get the context menu. I choose "Extend Exposure" to add "hold" exposures for cell a-1 from frame 34 to frame 120.

Now I select the "ca" color transform effect and move my frame slider to frame 34. I want to set a key frame here to initialize this transform. I want my text to be "invisible" to start the effect so I set the Multiplicative Alpha value to 0 (zero). This makes the text totally transparent.

I move the frame slider 25 frames to frame 58 and add a new keyframe to the "ca" color transform. This time I want the text to be totally visible so I set the Multiplicative Alpha value to 1 (one). This make the text totally opaque. I'm also going to do a color change during this "fade in" just to show you how to do that as well. So at frame 58 I also change the Additive values for Red, Green and Blue. My text on cell "a-1" was set to "black" originally which is R=0, G=0, B=0. So I want to get a yellow color by adding 255 to the red value and 215 to the green value. I'm not setting the end RGB value numerically, instead I am creating that end value by adding an offset to the initial RGB value. The color transform effect will gradually animate this color change between frame 34 and frame 58 along with the fade in from transparent to opaque. The transition is linear. I control how long the transition takes by the number of frames between keyframes.

To create the "fade out" part of the effect I move the frame slider to frame 96 and add a keyframe to the "ca" color transform. I don't need to modify any values on this keyframe, I'm just initializing the start of my "fade out". The reason I need this initial keyframe at frame 96 is to control when the transition of the "fade out" begins. I wanted a period of time between the end of the "fade in" and the beginning of the "fade out" where nothing changed regarding this text. (frames 58 to 96 is the equivalent of a constant segment)

I want to finish my "fade out" at frame 120. So I just need to set the Multiplicative Alpha value for the "ca" color transform effect to zero. To "fade in" I went from transparent to opaque and to "fade out" I'm going from opaque to transparent.

Cell b-1

Now I need to create three new drawing elements for my scrolling text. The number of elements is a function of what I'm trying to accomplish. I basically decided that I would do a separate element for each paragraph of text so that I could individually "fade out" the paragraphs as the text reached "deep space". If all I was doing was just the scrolling without individual "fade outs", I could have just used a single element for the text.

Cell e-1

Cell h-1

One trick that I employed in creating my paragraphs was to use different font sizes for each paragraph. The top paragraph is 36 pica. The second paragraph is 46 pica and the last paragraph is 48 pica. The idea is that things closer to you in perspective are larger than things farther away, so as the text scrolls away in perspective the relative size of the text in the paragraphs helps the visual effect. I also made sure that each successive line of text was longer that the previous line as well as centered on the previous lime which also enhances the perspective look of the scroll. (kind of like visual vanishing point lines converging)

Before I begin animating the actual scrolling of the text, I added a "space" background. This could easily be just a black matte. I happened to have a library template of a space background that I used in a previous tutorial (Using A Subtractive Animation Technique) so I included it here just to dress up the final movie.

The picture above shows how my final timeline track label list will look. Each text paragraph drawing element is attached to a color transform effect for its individual fade out into "deep space". Each drawing element and its color transform are attached to a parent peg and the three paragraph parent pegs are all attached to a top level peg that will actually control the scrolling of the text. The background is at the bottom of the list along with the opening title drawing element with its attached color transform from the opening "fade in" and "fade out" effect.

As I mentioned earlier, I will initialize the size and location of the text paragraphs prior to animating the scroll in scene planning view. I use the scene planning operations select tool (6) to do this. You can get a good idea of the relative size of the text with respect to the camera view frame prior to starting the scroll by looking at the picture above.

Click on the image above to see a larger view

To animate the scroll, I'm going to use the scene planning operations transform tool (7). I collapse the top level parent peg, "Peg 4" in my timeline track label list. When you collapse a peg it not only hides the children elements attached to that peg, it also lets you set keyframes on all elements in a ripple down. A perspective scroll requires the text to scroll up across the screen while it is moving away from the viewer. If you viewed the scroll in terms on 3D space it is a diagonal plane sloping up away from the viewer. We construct this using the top and side view panels. I'm going to be scrolling from frame 126 to frame 720, so I will stretch the duration of "Peg 4" from frame 126 to frame 720, then I right click to open the context menu and select "Extend children exposure" to make sure that I have exposures for all attached elements for the entire scroll duration. We begin by setting a keyframe on "Peg 4" at frame 126 . This is the initial frame for starting the scroll. The scroll lasts until frame 720 so that's where we will also set a keyframe on "Peg 4". Remember the transform tool (7) is actively selected before I set any of these keyframes. Once I set the keyframe at frame 720, I'm ready to reposition "Peg 4" in the top and side view panels. The frame slider is sitting on frame 720. I start in the side view panel and drag the red circle for "Peg 4" up to the top edge of the side view angle. As I do this I can see the text in camera view move across the screen vertically. Then I go to the top view panel and drag the red circle for "Peg 4" back away from the view point in the view angle. As I do this I can see the text getting smaller in the scene planning camera view panel. I now have a vertical slant visible in my side view panel. It may take you some playing around in these two panels to get the effect that you want. It just takes a bit of practice moving things in the top and side view while watching the camera view to see the results. I just need to set the segment between the keyframes on "Peg 4" at frame 126 and frame 720 to non-constant and I'll also use the function editor panel to set the velocity curve for this non-constant segment to the standard ease-in ease-out curve. See Key Framed Animation to refresh your knowledge of these concepts of segments and function curves.

Click on the picture to see a larger view

Click on the picture to see a larger view

Now that I have my text scroll done, I just need to do the "fade outs" for each text paragraph. I position my color transform effects at the desired starting frames for each paragraph and stretch their durations for the length of the effect as desired (all personal preferences).

The initial setting of a "fade out" is opaque so we set the Multiplicative Alpha value to 1.

The final setting of a "fade out" is transparent so I set the Multiplicative Alpha value to 0 (zero) on the last keyframe of the color transform effect. I have to repeat this process of setting the values of the color transform effects for each of the three text paragraphs in my example.

The Sample Star Wars Style Perspective Text Scroll
(click on this link to watch the movie)

As you can see this effect is probably more complicated to explain than it is to create. So give it a try, I hope you learned a new trick or two.

Labels: , ,

Thursday, December 13, 2007

Creating A Custom Color Palette

Recently there was a question asked on the Toon Boom Studio forums pertaining to having a "web safe" color palette. This question was referring to a standard set of colors that works with most browsers and client hardware on the Internet. Now I'm not a website designer, so I won't venture into discussing the merits of only using these "web safe" colors for your cartoons, but the question did prompt me to want to write a brief tutorial showing how easy it is to build a custom color palette in Toon Boom Studio. There could be many more articles and tutorials written here about the great color management system in TBS, so this may just be the first of many to come in the future.

We will start building our custom color palette by navigating to the "color palette" panel in TBS. If you are using V3.5 or lower you will find this panel as a tab on the "properties" panel set. In V4.0 this panel can be seen as a separate panel depending on how you set up your workspace layout. The first thing we need to do is to select "New Pallet" from the name drop down box.

This creates a new palette and it gets the name "New 1" by default. We want to rename this palette to something more meaningful. So we will click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Rename Palette".

This opens a dialog box where we can enter a name for our new palette. In this case we will name our palette "Web Safe" to indicate that it will contain our set of "web safe" colors.

Now that we have named our new color palette, we go to the initial color in that palette, which is currently named "Default", and we double click on that color swatch to open a color edit dialog panel. I'm working on a Mac so this is the OSX standard color picker dialog, but other than a slight difference in the appearance of this color picker with the standard Windows PC color picker the process is identical.

The color editor dialog has an external color selector, on the Mac it is a little magnifying glass icon while on the Windows PC it is an eye dropper icon. (not to be confused with the eye dropper tool included in the TBS drawing tools). This external color selector is used to clone a copy of any color that you choose by dragging it over the top of that color anywhere on your display and clicking to select it.

In the picture above I have started to drag the external color selector from the color edit panel.

For this tutorial example I'm using a "Web Safe" color chart as my color source. I could use any source of color that can be seen on my display so it could be almost any graphic or photo etc. I have included a link to a full size version of this "Web Safe" chart at the end of this tutorial for those interested in building their own set of web safe colors. I just drag the external color selector over the top of the desired color and click on it to clone it to my color edit panel and to my currently selected color palette swatch. How easy is that?!

Now that I have my first color selected, I can edit the color name as desired. I changed "Default" to the color name from the web safe chart for this color which is "330000". That's a personal preference, I could have just as easily named it "dark burgundy" or whatever .

That's all there is to capturing a color swatch to your custom color palette. So next I click on the "+" sign icon to add another color swatch to my palette. I then double click on that new swatch to open the color edit panel and I use the external color selector to clone my next color exactly as I did before except I selected a different color from my "Web Safe" chart.

I rename the newly added color and then repeat the process to add another color swatch and clone in the next color from my "Web Safe" chart.

As you can see I am filling my palette with the colors from the "Web Safe" chart. The order in which I add the colors is a personal preference. And this process works for building any color palette set of colors not just one of "web safe" colors as I'm doing in this example.

When I finish building my new custom color palette, I want to save it for reuse in many future TBS projects. Right now it is specific to the project in which I am currently working. I want to "export" my "Web Safe" color palette. We will click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Export Palette".

This opens an export dialog panel where all my current project color palettes are listed and I can check which ones I want to export and the destination of where I want them saved on my system. I have a Toon Boom Studio directory with a Palettes subdirectory on my system but that's just a personal preference. That's all there is to exporting and saving a custom color palette, which you can now access and use in future TBS projects.

It is very easy to import a custom color palette into a new project. We just go to our color palette panel and we click on the context menu icon to the right of the "name" drop down text box, which will open the context menu for us to use to select "Import Palette".

This opens an import dialog where we can select the desired custom palette we want to import into our TBS project.

As I mentioned earlier there is a great deal more information pertaining to all the uses of the Toon Boom Studio color management system so check back for future articles and tutorials.

Click on this chart to access a full size version.

Labels: ,