Hello and welcome to this tutorial for 2d character animation in Flash. What we are going to learn is how to animate a head turn. We are turning it from head front to head threefold. Let's start and create a new document. We need a character. So go to file input input to stage and a dialog box pops up.

Pick up the image file that is provided. Once the image is on the stage, scale up the file size to the state size using Ctrl plus r plus s. Arrange the image on the stage as seen in the video. Save the file and name it character had done. To get started with the tracing, we need to go to the layers. Keep these bitmap image layers locked A new blank layer on top name the first layer that is the layer which has the drawing of the character on it as sketch and the new layer as vector will do all our tracing on the vector layer. Make sure you select it and press Ctrl plus G to create group of vector.

Now, let us start with the vector inside the group. prefer the line tool for tracing you shortcut key and click and drag the line tool. We have started with the hair portion. Change the curve of the line with the selection tool and sub selection tool. Sub selection is the second tool in the panel or you can hit a on the keyboard for that You can see nodes here, you can edit the nodes using the attached handles to it and give better curves to the line as per the drawing. Take care that we are matching up with the drawing.

Line tool and sub selection tool are the main tools used during the vector. keep zooming in and zooming out for the exact points and finish of the drawing. Now, observe that the front half portion of the hair is the mirror image of the other half. So, select the symmetrical drawn part as seen in the video. Create a copy of it using Ctrl plus C and paste in place using Ctrl plus shift plus we now go to menu modify, transform, flip horizontal magic to the first half. These tricks help us in minimizing the vector time and effort when tracing we are done with the hair part select the hair vector Press Ctrl plus G. Now we have created a group of the hair inside the main group will create all the body parts groups inside the main group.

Use control plus g again to create the group. Here, remove the fill color option, draw oval. For the face part, we draw a proper circle so that while shaped winning, we get less than number of nodes to work with. Now, let's draw the details of the face in the same face group. Notice that we are drawing all the parts and details in the same line thickness. We have now finished tracing the face.

You can see the two groups. Make one more group and let's begin the airport We are using the sub selection tool here. Remember the shortcut key a add the details to it. Here, we'll use the same trick again for the other ear. Duplicate the ear group and then go to menu, modify, transform, flip horizontal, match it up with the image drawing. You see both the ears are ready add one more group and Start the eyebrows.

As we have talked before, each and every part should be in a different group. While vectoring you will get used to the sub selection tool again duplicate the AI bro and flip it horizontally to form the eyebrow on the other side as earlier. Take it to its required position. Now the eyebrows are done. Now, let us vector the eyes draw the eye with a proper circle. For the eyeball, we need an exact circle.

So duplicate the eye circle paste in place that is Ctrl plus shift plus V. Now, scale it down as per the image size please follow the video For the exact steps and the inside details of the eyeball using the same duplicating and scaling down the outer circle. Once done, notice that we are dividing the eye into two groups. One is the complete outer circle and second is the eyeball portion. Now straightaway duplicate the first eye and place it on the other side to form the second die. start drawing the nose using the line tool. Select the nose drawing and make it a group.

No drawing should be left as an open vector. Now we draw the ellipse and create a group of them again as we have done for the other parts. Move towards the Layers panel and hide this sketch layer. Check if we are done with all the parts of the character's head. So we are through with the vector part of the front head. Now will work on the color filter of the vector.

Choose the same color scheme as on the sketch by clicking on fill color option in the Tools panel. Use the paint bucket tool and fill the color part by part. Press Gretzky to fill that color zooming and fill the detail parts to After filling the ear color, remove the unwanted lines as seen in the video. Select the eyebrow color to fill in. Fill the same color to the core part of the eyeball for both the eyes. Use blue for the eyeballs and basic white color to the eye.

Again, select the skin color and fill the nose. Delete the unwanted line. The unwanted lines are drawn to close the drawn object so that we can apply Color Fill to it. That means an open drawing cannot be filled. Now, all the head parts are colored. Create a single graphic symbol for all the groups, press f8 and name it by head.

Enter that symbol. And now create each and every part as a different graphic symbol. Press f8 and name the hair symbol as boy underscore hair. For the face part, convert to symbol and call it boy underscore face. During this if the arrangement of the layers of the head parts change, you can send down or bring it up to front using Ctrl plus up arrow or control plus down arrow. Coming back select the right eyebrow f8 and name it boy underscored right eye bro same for the left one select and convert to symbol name it boy underscore left eye bro select the right eyeball group and convert to symbol by pressing f8 and name as boy underscore right pupil select the wide base of the right eye and name it symbol as boy underscore right eye base now select both boy underscore right pupil and by underscore right I base symbols and create a new graphic symbol of them.

Call it boy underscore right I similarly do it for the left I create three symbols boy underscore left pupil for left eyeball boy underscore left eye base for the left eye widen And boy underscore left eye for both boy underscore left pupil and boy underscore left eye base symbols. level the new graphics in ball as boy underscore nose to the nose and boy underscore lips to the lips. Not a single part should be left as a group. Please watch the video carefully for all the details. Select right here, press f8 and name it boy underscore right here and name the left ears graphics in ball as boy underscore left here. We are done with this part.

The next step is to change the pivot points of some of the symbols. Do it as seen in the video. Know that we are arranging the pivot points as per their animation movements. We change the pivot points of both the eyebrows And both ears. Exit the symbol and change the pivot point of boy head, we will place it to the lower part of the face. Done.

Again, enter the symbol, press Ctrl plus A to select all the symbols together, right click, and you see the option, distribute two layers, click on it. Now, go to the timeline and have a look. All the symbols are distributed to the individual layer, and the layers have automatically got their symbol names. It's time to start with the animation part. Extend all the frames till frame 40. Select the 15th frames of all the layers and press f6 to insert keyframe.

Select the 10th frames and insert key frames. Do the same on the 19th frames, press f6 for the key frames. Step outside the symbol and extend the frames till frame 40 for the main symbol that is vector layer along with this sketch layer. Put a keyframe on the sketch layer on frame number 19. Unlock the sketch layer and put the vector layer on outline mode. Now, select the 19th frame on sketch layer and move the image horizontally straight towards the right.

As seen in the video. We have to place the sketched three fourth face image exactly below the vectored front face. For reference, you can find the vectored front face in the outline mode. We are finished with the placement of the three fourth phase image Switch off the visibility of the vector layer. Go and play the 18th and 19th keys. You see the difference between the angles of both the heads.

Double click and step inside the symbol again. Pick the first key of the boy underscore hair symbol. Break the hair group. Create a new layer, cut and paste the selected outline on that layer. Here, what actually we will be doing is distributing each and every stroke line in the new layer. For this, first select the stroke line gutted.

For that, press Ctrl plus x on the keyboard. Add a new layer in the timeline and then on that blank key, paste in place that cut stroke line. Two Paste in Place press Control plus shift plus v Paste in Place helps us to paste the object at the same place from where it was cut. Even if we are pasting on a different layer. Each line should be on a different layer. At the end you see the remaining color patch also gets its individual layer.

By the same method we are going to work inside the boy underscore face symbol, break the group and select the outline. Add a new layer and shift the outline on that layer. We have also drawn some detail parts to the face each part of the detail That means each round of the details should go to a different layer but at the same place check all the layers at the end it is done correctly select the boy underscored right I bro Now do the same for it now inside the boy underscore left eye bro separate the lines and color patch in different layers please follow the video for all the exact steps The eye symbol here, there are two more symbols inside it. Select both the symbols, right click to them and click on distribute two layers option. You can see the change in layers panel. Boy underscore left pupil and boy underscore left eye base got their independent layers now will treat only I base symbol as earlier ones Select and Move the white base outline in the different layer.

Repeat the procedure for the right eye. Distribute the two symbols of pupil and white eye based on different layers. Go inside the right eye base, break the group and shift the outline of it to a new layer Silla And get into the right ear symbol. Put the outline on a new layer. Two lines of the detailing part will also be distributed in two separate layers. Repeat the method for the left here.

Distributing each part in different layers helps shaped winning to animate smoothly and easily. Every time make sure that none of the lines or color patches stay on the same layer. Go inside the no symbol. cut and paste in place the nose outline on the new layer only the lips remain. Double click and enter the symbol. Select and Move the aid corner curves on to different layers.

And now, all the graphics in the symbols are done. As you know, we have already matched the three four sketched face to the front on frame 19. Now, most of the times will need to work in the outline mode. So, put all the frames in outline mode and change the outline color from light to dark for better visibility. For that, double click on the outline mode of that particular layer. You see the outline color option in the Layer Properties dialog box.

Select any dark color it's done. On the 19th frame, we'll move the face box According to the three fourth sketch phase, we start with the eyebrows. Just change the position. Do not transform the shape of any part for now. Check that you're working on the 19th frame. Isaiah moved.

Now the nose. Try to position it right as seen in the video and notice the changes shifted the right ear. In the three four sketch you cannot see the left ear anywhere. Still, we will not delete but move and hide the left ear symbol behind the face. Move the lips to as per the three fourth drawing. Cut the 19th frame of the left ear and paste it on a new layer at the same 19th frame.

This new layer is below the boy face layer so that the left ear remains hidden for the three fourth phase. Now, enter inside the hair symbol, extend the frames up to 40. And here as well insert keyframes at the 19th frame on all the layers. Here, we have already kept each and every line on different layer. So now on the 19th frame, we have to match each line to the three fourth hair outline. Hide all the layers except the one which you are working on.

Press A for the sub selection tool nodes and its handles help us modify the shape to the minute test detail unhide the layers one by one as you keep matching the lines to this sketch. As each line is on a different layer, it becomes easier to modify and match as per the drawing We are changing the shape and the size according to the required part, delete the unwanted lines. Some parts hide behind the face during the head turn such unwanted lines are deleted. See the hair movement between the keys as per the head turn match all details as well. It's time to match the color patch now, use the same sub selection tool to edit the patch. We have managed to match all the outlines, work on the nodes lock all the layers except color patch layer.

Locking the layers would modify any of the outlines. While working on color patch layer. We are working on this number of nodes, more the number of nodes more it creates the complications in shape tuning. We are matching the color path portion to the outlines of the three fourth phase. We are editing and minimizing the number of nodes as per required. Delete the unwanted color patch need to modify the code Apart more.

We are putting the outline to the patch color. It will help us in modifying the patch color in easy way. Later we'll delete the outline We have now completed all the changes in the hair part played and check. Exit boy underscore hair symbol, select complete boy underscore hair layer, right click and click synchronize symbols. Thus, all the keys in this layer will act the same in the same sequence as per the sequence inside this symbol. Enter inside the boy underscore face symbol.

Extend all the layers to 40 frames. Remember, here also all the detailing and every single line are on different layer. Insert the key frames on 19 frames of all the layers. Hide all the layers and unhide the circles outline layer we have to match To the phase outline of the three four phase keep all the layers on outline mode in main boy underscore head symbol. Coming back to circle outline layer, take care that we have to edit the drawing on 19th frame. Use the sub selection tool to edit we are matching the face part to the three fourth sketch face area.

Outline is done according to the scale, the detailing parts are the left side of the face are not seen in the three fourth phase. So delete them on the 19th frame. Look all the layers except the color patch portion. We are changing the wireframe color to dark. No, match the face color badge according to the outline. You can also move the nodes using arrow keys on the keyboard You can see the changes in the first and 19th frame drawings.

Only phase details of the right sided remains. Select and place them on the given position. When done directly click scene one to exit all this involves play and note that faces not changing. So, double click and enter the main symbol. Select the full boy underscore face layer, right click and synchronize symbols. This follows the frame numbering same as the inside frames.

Check that the drawings are playing properly for hair and face. Put all the layers in outline mode. left ear is not seen in the three fourth drawing part. So hide it behind all the layers. Zooming, we need to work on the detailing of the hair part, use the same sub selection tool Done. In boy ahead symbol, create a new layer about the hidden left ear create group by pressing Ctrl plus j and start drawing the lower detailed part of the hair.

This part will display only after the head takes turn. Placement will be at the lower backside of the right ear. Pick same hair color and color that part using Bucket Tool. At first, convert that part into graphics and ball and name it boy underscore hair extra ad since it's a newly added object to the hair. Now, when we play the animation, we'll see that step by step the keys of the front three foot faces are being created correctly. Match the eyebrows on the 19th frame.

No need to edit inside the symbol of the object. If it is not changing the form need to work inside the lip symbol. Extend all the layers up to 40 frames from inside and outside of the symbols. At the 19 frame, insert a keyframe for all three layers here and match the drawing as per the sketch. Do the same for the nose. Inside the symbolic match the drawing as per the sketch on the keyframe at 19.

See that the changes are exactly as we want select the eyes now go inside the left eye symbol. Here we need to change the outline color for a better visual no select the 14th frames on all the layers and press f5 and select the 19th frames and press f6 and just the placements of the eye base and pupil both are seen in the video. We can See the changes in both the keys. Still, we need to do modifications inside the pupil symbolic. Double click and enter the symbolic distribute all the parts in different layers. Even the outline will be on another layer.

Now, extend all the layers up to 40 frames and insert the key frames on 19. Stay on the 19th frame and put all the layers in outline mode, shift and match the objects as per this sketch, exit and synchronize The symbol of the left pupil layer. This will keep the numberings of the keyframes outside the symbol, same as inside. Even in the boy underscore head symbol, right click and synchronize the symbols for left I layer. Do the same for the right eye symbol on the 19th frame, shift the pupil. Go inside the pupil symbol and distribute the parts in different layers.

Till frame 40, extend all the layers and insert new keyframes on the 19th frame. Do all the changes in outline mode Exit the symbol and synchronize the right pupil complete layer. Then exit to boy underscore head symbol and synchronize the boy right I layer. Now, come to the main stage hide this sketch layer and see the head movement till now both front and three foot drawing part is done inside the main symbol. Select the frames between 10th and 19th frames of all delays. Go to the Properties panel and apply motion twin play and see that the parts which we moved from front to three fourth phase are moving properly.

Some movements are jerky, so we'll fix them Enter the Harrison ball, same as main symbol, insert keyframes on the 15th frames of all the layers. Select the frames between 15 and 19 in all the layers and apply shape to into them. Notice that both the drawings are not blending correctly. So we need to work on the color patch at first remove the shape tweening and hide all the layers keeping the color patch layer on. We will have to divide the patch into parts for better shape tuning. Remove the keys on the 15th frame from color patch layer.

Take the line tool on the first key, draw a line and place it where we need to divide the batch. Select the divided patch, press Ctrl plus x to cut from there and paste it in place on the new layer. Similarly, divide the portion on the 19th frame using the line tool. Cut that patch and Paste in Place on the 19th frame of the newly added layer. Now, insert a keyframe on the 15th frame of the main patch layer and apply shape to into that. This is the divided patch layer and the two keys of it.

To simplify this further, we'll divide this patch into more parts. Insert keyframes on the 15th frame for both delays. Thus, the color patches played and distributed in total three layers. This will help in easy shape tuning. Coming back to the other layers, hide the layers we don't need now. Select and assign shapes to into the layers visible.

You can see that the visible lines are smoothly converting which shape tweening Let's take the main color patch here tweening does not look proper. So let's fix this here. Hide all the layers and keep the color patch layer on. Start adding shape hints to the 15th frame. You can get it from menu modify shape, add shape hint or simply press Ctrl Shift plus h on your keyboard please the hint a on the 15th and the 19th frame Once the hint turns green, that means it has been matched to the node of the shape. Come back to the 15th frame and add a new hint B and place it on the 19th frame.

Hint B also turns green. After adding each hint, you can keep checking the animation. Shift the hint A and B. Yes, this is better. Add hint see and place it on both the frames. Keep adding the hints for every node of this shape and this results in better shape to an output.

On all the layers And watch the movement. Check the position of nodes on each shape. Match some of the detailing of the main color patch to its stroke line. Here will shift some of the hints according to the nodes. This gives the right movement. Now, keep adding some more hints.

We already have the least number of nodes to our color patch so we can use each hint for each node. You can even add as many hints as you need for good shape training. The upper color patch and its outline is tweening properly now. Next, the first divided patch of the hair hide all the unwanted layers for now. play the animation and observe the places that we need to add shape ins. Switch on the outline mode according to the last divided color patch.

The stroke lines over there should also be divided and shifted to individual layers. Add a new layer, cut and paste in place that line on to it. The line at the other side of the batch is not getting animated smoothly. We need to add shape ins here also Have the hinge to the other key. Now, the line is properly animating with the help of hints, A, B and C. Hide all the unwanted layers. Here also, you will notice that this line should be divided into two layers.

Each part of the color patch and line in different layers helps in smooth shaped when. So, add a new layer and cut and paste in place the lower line Part Two That layer removed the extra nodes on that line. We are matching up some details of that line. Assign shape to into that color patch and see the animation. Match the batch add to the original outline there. Straighten it so that the extra nodes are removed adding hints to that patch.

Press Control plus shift plus edge for adding the hints plays and match each hint to the corners or relative nodes you can notice the variations in the animation. We can still see some gaps there. Hide all the layers, excluding this patch area. Add curves area so that gaps get filled up delete The unwanted hints, right click on the unwanted hint and click on remove hint. Edit and remove the unwanted nodes by straightening the line using the straighten tool in tool panel here is animating from front to three foot absolutely fine. Now, we will adjust the lower most detailing part of the hair key by key.

Insert keyframes on the 15th and 19th frames. Select the whole detailing part and check the places we need to add keyframes on the relative layers. Add the keyframes on the 16 frames of that part. So lock on Rest of the layers we will be working on only that detailing portion will manually move and animate this portion. Use the free transform tool to edit and match the drawing. Most of the part is completed in shape twin.

Add all keyframes between 15 and 19 and manually resize and match up the detailing part as seen in the video. We will delete the detailing part on the 19th frame as the details will hide behind the three fourth phase there and will not be visible. And notice that the hair animation is working now. Exit the main symbol and again. So, we have done the hair turn animation using shape twin. Next, it's time for the parts which are not properly matching up with the animation.

Double click and enter the boy underscore face symbol. Each detail each line and face color is on different layers as we did for the hair part and the main symbol. Here also insert keyframes at 15 frames for every layer. again select in between frames and apply shape to into them. While playing the boy head symbol, you will see some problems with the left ear in the last few frames. shift that ear upwards on the 19th frame for the time being.

Later on. We'll shift it to another layer Now, again inside the face symbol, detailing part at the left side is not animated. Insert a keyframe on the 18th frame as on the 19th frame. After the full head turn, they won't be visible. Apply shape tweening to them on the 18th frame, move and rescale the detail part as seen in the video. while turning those parts will be scaled down know the details on the face are completely animating properly.

Let's start with the left here now. adjust its position key by key in the current layer. If you remember, we have already kept a copy of the hidden left here on another additional layer. Select and cut paste the 18th and 19th frames from the original layer to that additional layer. This layer is placed below the face layer so that the left here will hide behind the face on those frames. Insert blank keyframe on frame 18 in the original layer, so that from that frame, the left here will be detected in another layer.

Now, we are satisfied with the movement of the left here. Eyes. Go inside left eye and insert the keyframes at the 15th frame and apply motion to n. Do the same for the right I go inside the eyeball symbol. Insert the keyframes at the 15 frames and apply shaped when here. Play and check Yes, the ice part is done. Enter the nose symbol.

Here also, we have changed the shape of the nose according to the three fourth phase. So insert the keys at frame 15 and apply shape to into them. Here, the color patches creating some problems. So to remove it, add shape ins. Use the shortcut Ctrl plus shift plus edge to add the hints. Now, it's working in shape, exit and right click by nose full layer to synchronize symbols each shape is playing properly Remember the boy underscore hair extra add symbol.

Select the layer of this and apply motion when you will notice that jerkin the lips portion. Let's fix this. Go inside the lip symbol. We have not applied any required to in here. Insert keyframes at frame 15 for all the layers apply shaped when to the in between frames, you surely must be used to this by now, exit that symbol and select the full layer of the boy underscore lips and right click to pick synchronize symbols. If you play the animation, you will notice that things are working well now.

Select all the in between frames between the 10th and the 15th frames and give minus 50 as easy in value. Done select frames between the 15th and the 19th and apply hundred as ease out value. Now, the animation section is going to fast by these values. So to match this animation speed, we'll have to manually apply the same values to the animation section in each and every layer of every symbol shaped winning and motion tweening both will be valued hundred as ease out between the 15th and the 19th frames and minus 50 as easy in value between the 10th and the 15th frames. The object which is animated key by key will have to be rearranged manually to match up with the animation speed. You can see how individually we are managing the detail part on the left side of the hair key by key.

Do the same for the face portion. Select the in between frames and give hundred as ease out value. Because of these values, the left here looks displaced. We'll have to adjust it position manually as it is animated key by key. Let's match the position of that ear in the original as well as in the extra layer. placed below the face layer.

Here we'll have to shift the 17th frame from the original layer to the extra layer. Match the position neatly. perform the same for both the eyes symbols. Give the values for the tween inside the eyeball symbols to apply the same for the nose and the lips symbols Okay, via happy with the inside animation part now. exit to the main stage, the sketch layer is already hidden. Here we'll go for a more realistic feel to the animation.

Same as the inside in the vector layer. Add new keys at frames 1015 and 19. Apply motion tween to the in between frames. At frame 15 Use the down arrow key on the keyboard and shift the face a level downwards. This creates an anticipation pose. This will give a realistic touch to the animation.

Also shift the 19th frame a little towards the right and up you will realize the difference in animation between before and after. Assign the same ease in and ease out values. Minus 50 as easy in value for frames 10 to 15 and hundred as ease out value for frames 15 to 19. play the animation now. successfully, we are finished with the front 234 head turn, we can see the completed animation on screen with the help of shaped when and shape pins. We have completed the head turn in good time. Thank you very much for watching our media.

We'll be back with another animation tutorial.