{"id":11732,"date":"2017-10-06T09:47:10","date_gmt":"2017-10-06T09:47:10","guid":{"rendered":"https:\/\/graphicmama.com\/blog\/?p=11732"},"modified":"2022-04-27T07:41:18","modified_gmt":"2022-04-27T07:41:18","slug":"character-animator-tutorials-behaviors-2","status":"publish","type":"post","link":"https:\/\/graphicmama.com\/blog\/character-animator-tutorials-behaviors-2\/","title":{"rendered":"Character Animator Tutorials Part 6: Behaviors 2"},"content":{"rendered":"

Welcome to Part 6 of our Adobe Character Animator<\/b> Tutorial series. Last time we opened the topic of Behaviors<\/b>, today we will continue with two very interesting and commonly used behaviors. These are the Keyboard Triggers<\/b> and the Cycle Layers<\/b>.<\/p>\n

In this article:<\/strong>
\n1. Keyboard Triggers<\/a>
\n2. Cycle Layers<\/a><\/p>\n

 <\/p>\n

1. Keyboard Triggers<\/b><\/h3>\n

What this behavior does is to add a new element or substitute an element with a new one, through a keyboard shortcut. It’s very useful for changing hand gestures, putting objects in the hand of the puppet, adding other mouth shapes and a lot more. Let’s explore a simple example. Let’s say we want our Vicky puppet to point. First we have to draw a pointing hand and rearrange the whole arm a bit.<\/p>\n

\"Behaviors<\/p>\n

Open the Illustrator<\/a> (or Photoshop file) and duplicate the arm.<\/p>\n

\"Behaviors<\/p>\n

Select the copy of the arm. Using the Eraser tool, delete everything else but the hand. Rename the remaining group (layer in Photoshop) to “normal”. Put it inside the +arm2 group, or if you are using Photoshop, group it with the +arm2 layer.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

Now make the new normal hand invisible. Select the original +arm2 and this time delete only the hand. Now you have a separate hand and arm (from the shoulder to the wrist).<\/p>\n

Let’s draw a hand pointing its index finger and group it with the normal hand.<\/p>\n

\"Behaviors<\/p>\n

Now in the group +arm2<\/b> we have the arm – from the shoulder to the wrist and a Hand group<\/b> containing the normal hand and the pointing one.<\/p>\n

Leave the pointing hand invisible, so we can see only the normal hand. Let’s click Save<\/b> and see how the changes are incorporated in Character Animator<\/b>.<\/p>\n

\"Behaviors<\/p>\n

As you can see, the new group with the two hands appears in Character Animator. Here’s where the Keyboard Triggers<\/b> come into play. Click on the point<\/b> layer and in the Properties panel<\/b> all its settings will open. There are Layer, Layer Mesh, Tags <\/b>and Trigger.<\/b><\/p>\n

Open Trigger<\/b> <\/strong>and check out the options.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

First you have Key<\/b>. This is the keyboard key that when clicked will show the point hand. I chose the 1 <\/b>key, but you can choose any letter or number.<\/p>\n

Below Key, there’s Latch. <\/b>If you select Latch, when recording, you will need to press the trigger key only once and the new element (the point hand) will stay visible until you press the key again. If Latch<\/b> is not selected you will need to hold the trigger key for the point hand to be visible. For now, I don’t need Vicky, our puppet, to hold her finger pointed for a long time so I will leave Latch<\/b> unselected.<\/p>\n

Below Latch, there’s Hide Others in Group.<\/b> When selected, it will hide the other elements that are in the same group, in this case the normal hand. We need to use it anytime we want to substitute one element with another.<\/p>\n

Ok, now let’s see what happens in Record mode<\/b><\/strong>, when we click 1.
\n<\/strong><\/p>\n

\nhttps:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2017\/10\/06063242\/6-01.mp4<\/a><\/video><\/div>\n

 <\/p>\n

Whenever I click 1 on my keyboard the pointing hand appears. With my mouse I can drag Vicky’s arm to point in any direction I decide.<\/p>\n

The Keyboard Triggers <\/b><\/strong>behavior is often used for adding another element to the puppet, for example some kind of accessory. Let’s try it with Vicky! I will draw a pair of sunglasses for her.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

After drawing the sunglasses, I left them invisible in my Illustrator file. Now, let’s choose a trigger key<\/b>. Let’s take 2. This time I will select Latch<\/b>, so I will be able to keep her glasses on without my finger staying on the key. As for Hide Others in Group<\/b>, this time I will not use it. If I do, Vicky’s whole head will disappear and the glasses will float in the air. \ud83d\ude42<\/p>\n

Let’s see how it looks!<\/p>\n

https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2017\/10\/06063607\/6-02.mp4<\/a><\/video><\/div>\n

 <\/p>\n

The Keyboard Triggers <\/b>behavior gives a lot of opportunities for creativity! Gestures, accessories, color change, different mouth shapes! But to really make it look good, we should use the Cycle Layers <\/b>behavior.
\n<\/strong><\/p>\n

 <\/p>\n

2. Cycle Layers
\n<\/strong><\/h3>\n

Cycle Layers<\/b> behavior enables you to create frame by frame animation. When added to a group, it cycles through all of its layers showing them one by one. You can change the movement and the effect Cycle Layers <\/b>creates by changing the different setting. Let’s do a short animation and see how it works.<\/p>\n

I want to animate Vicky’s tongue coming out so I need to draw the different frames in Illustrator.<\/p>\n

\"Behaviors<\/p>\n

I drew 5 frames of animation of Vicky’s tongue going out of her mouth and then inside again.<\/p>\n

I put all of the frames in one group and numbered them in order of appearance.<\/p>\n

Let’s Save<\/b> <\/strong>these frames and go back to Character Animator.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

We don’t need Vicky constantly sticking her tongue out so we will use a trigger key to only show it when we want to. Let’s choose key 3<\/b>, and don’t forget to click the Hide Others in Group <\/b>option.<\/p>\n

Now let’s go below to Behaviors<\/b> <\/strong>and click the big + to add a new behavior to this element.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

In this menu you can see all of the behaviors you can add to the selected element. I will choose the Cycle Layers <\/b><\/strong>behavior and let’s check out the different settings it offers.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

From Start<\/b> you can choose when the animation will start. In our case we need When Triggered.<\/b> The other option, Immediately<\/b>, is useful for other types of animation, like creating a continuous motion effect etc.<\/p>\n

Next is Layer Order.<\/b><\/strong><\/p>\n

\"Behaviors<\/p>\n

You can choose what order your animation will go in. Let’s stick with Top to Bottom<\/b>.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

From Advances Every<\/b>, <\/strong>you can choose how fast the animation will go. I usually use\u00a0 Advance Every <\/b><\/strong>1 frame, because it looks the best, but it depends on the effect you want to create.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

Next is Cycle<\/strong>. Again, it depends on what effect you are trying to create. But for this particular case with Vicky’s tongue, we will choose Once.<\/strong><\/p>\n

\"Behaviors<\/p>\n

Forward and Reverse<\/b>, when selected will play the animation and then reverse it. It’s very useful when you want to animate a single movement and then return to the default position of the puppet. We will not use it for Vicky’s tongue but let’s see how it looks if we do.<\/p>\n

https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2017\/10\/06070816\/6-03.mp4<\/a><\/video><\/div>\n

 <\/p>\n

Notice how if I hold the key too long the mouth disappears altogether. Here’s where the next setting – Hold on Last Layer<\/b> <\/strong>will help.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

Let’s see how it looks used on it’s own and in combination with Forward and Reverse.<\/b>
\n<\/strong><\/p>\n

https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2017\/10\/06071257\/6-04.mp4<\/a><\/video><\/div>\n

 <\/p>\n

When you are using both Forward and Reverse<\/b> and Hold on Last Layer<\/b>, the reverse animation starts only when you release the key trigger.<\/p>\n

For this particular animation we will use only Hold on Last Layer<\/b>.<\/strong> Let’s move on to the next setting. This is On Trigger End. <\/b>
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

This setting controls what happens when you release the trigger key. Let Cycle Finish <\/b>will finish the animation even if the key is still pressed. Stop Immediately<\/b> will stop the animation when you release the key whether it’s finished or not.<\/p>\n

See how both options look.<\/p>\n

https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2017\/10\/06071735\/6-05.mp4<\/a><\/video><\/div>\n

 <\/p>\n

You can see how when Stop Immediately<\/strong> is selected the animation is cut off when I release the trigger key. It could show just the first 1 or 2 frames if I press and release the key really fast. For this animation it doesn’t work so well but it can be used in other cases. Let’s keep the Let Cycle Finish<\/strong> on and continue.<\/p>\n

\"Behaviors<\/p>\n

Pause-Layers<\/b> <\/strong>gives you the option to pause the animation on a given layer and then continue. To use it first you have to tag the layer you want to pause on with Cycle Pause<\/strong> tag. It works like this. Open the animation group in the Puppet panel<\/strong>. In our case the tongue<\/strong> group. Select the layer you will pause on and open Tags<\/strong> in the Properties panel<\/strong>.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

You need to scroll down to the bottom of the panel. The Cycle Pause<\/strong> tag is in the Miscellaneous<\/strong> tag section. Simply select it and you can see how the tag now appears on the puppet preview.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

Now return to the Cycle Layers<\/b> <\/strong>behavior by clicking on the tongue<\/strong> group in the Puppet panel<\/b>.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

You can see that below Pause-Layers <\/b>it’s says 3<\/b>. That is the name of the layer we chose to pause on. On the side it says 1<\/b>, because we have one layer tagged with the Cycle Pause<\/b> tag.<\/p>\n

Let’s see what happens when I click the trigger key for the tongue animation.<\/p>\n

https:\/\/i.graphicmama.com\/blog\/wp-content\/uploads\/2017\/10\/06072646\/6-06.mp4<\/a><\/video><\/div>\n

 <\/p>\n

The animation stops at frame 3 and I need to press the trigger key again for it to continue.
\n<\/strong><\/p>\n

\"Behaviors<\/p>\n

The last setting Continue After Pause <\/b>let’s you choose if you want to click the trigger key again for the animation to continue (When Triggered)<\/b> or you want to pause by holding the trigger key and let the animation finish by releasing it (When Trigger Released)<\/b>. It’s a matter of preference really. I will choose the second one.
\n<\/strong><\/p>\n

That is all for today! With the behaviors we’ve learned today we can create a ton of fun stuff. Don’t hesitate to experiment or ask questions if you need to.\u00a0
\n<\/strong><\/p>\n

Continue with more Adobe Character Animator tutorials<\/strong>:<\/p>\n