Main Timeline with 3 layers and 120 frames<\/figcaption><\/figure>\nDefining the ground<\/strong><\/p>\nLet\u2019s define the ground our character is going to walk on:<\/p>\n
\nGo to frame 1 and select the ground\u00a0layer<\/li>\n Select the line tool, set the Stroke to the color of your choice and click and drag from the left to THE right side of the stage (around 3\/4 down). You can change the weight, style and color of the stroke by selecting it and changing the\u00a0Fill and Stroke<\/em>\u00a0options in the Properties window.<\/li>\nLock the layer<\/li>\n<\/ul>\nGround layer (Style: Stippled)<\/figcaption><\/figure>\nDrawing the head<\/strong><\/p>\nIn this case, the head is a simple ellipse:<\/p>\n
\nSelect frame 1 on the head layer.<\/li>\n Select the ellipse tool. Set its Stroke to\u00a0none\u00a0<\/em>and its Fill to the color of your choice.<\/li>\nHold Shift and click and drag to create your head (anywhere on the stage will do for now).<\/li>\n<\/ul>\nEllipse representing the head<\/figcaption><\/figure>\nAdding static details<\/strong><\/p>\nSince the nose will not change or move independently from the head, we will draw it on the same layer:<\/p>\n
\nMake sure you are still on frame 1 of the head layer<\/li>\n Select the Pen tool. Set its Stroke to a noticeable color (i.e: red) and its Fill to none<\/em>. Don’t worry about clashing colors – we are just outlining the shape of the nose and will eventually get rid of the stroke.<\/li>\nDraw the outline of your nose.<\/li>\n Select the Bucket tool. Set the Stroke to none<\/em>and the Fill to the color you want the nose to be. Click inside the nose shape to Fill it.<\/li>\nSelect the outline and hit\u00a0the\u00a0delete<\/em>key to remove it.<\/li>\n<\/ul>\nUsing the pen tool to outline and fill the nose<\/figcaption><\/figure>\nYou can use this technique to add more details and shadows. Once you are done drawing the head, all the shapes comprising it can be merged into a Symbol. This will also allow us to tween the position of the head on the Stage later on (since only Symbols can be tweened):<\/p>\n
\nSelect all the elements you’ve drawn on the head layer and go to\u00a0Modify > Convert to Symbol.<\/em><\/li>\nName the Symbol\u00a0“head” and set its type to\u00a0Graphic.<\/em><\/li>\n<\/ul>\nNaming and setting the head symbol<\/figcaption><\/figure>\nCreating the eyes<\/strong><\/p>\nWhile the eyes are part of the head (they will move along with it as the character travels along the Stage), we want them to blink in a looping fashion. To do so, we will draw and animate them within the head Symbol (this is sometimes referred to as a\u00a0“nesting” Symbols):<\/p>\n
\nDouble click on the head Symbol. Notice that we’ve left the main Timeline: Look at the name of the Timeline on the top left of the stage and the number of frames (1 vs. 120).<\/li>\n<\/ul>\nThe top left of the window shows we’ve entered the head Timeline.<\/figcaption><\/figure>\n\nRename the Layer_1 “head”<\/li>\n Create 2 new layers: one called “eyes” and one called “pupils”<\/li>\n<\/ul>\nLayers within the head Symbol<\/figcaption><\/figure>\n\nSelect frame 1 on the eyes layer.<\/li>\n Select the Ellipse tool. Set its Stroke to\u00a0none<\/em>and its Fill to white. Click and drag to draw your eyes.<\/li>\nSelect frame 1 on the pupils layer.<\/li>\n Select the Ellipse tool. Set its Stroke to\u00a0none<\/em>and its Fill to black. Click and drag to draw your pupils.<\/li>\n<\/ul>\nDrawing the eyes and the pupils (on separate layers)<\/figcaption><\/figure>\n\nLet’s add some frames to all the layers: Select frame 25 (the approximate length of my blinking loop) on all three and click F5.<\/li>\n<\/ul>\nMaking the eyes blink<\/strong><\/p>\nWe’re now ready to make the eyes blink. They’ll stay wide open for a couple of frames, close quickly and completely, and then re-open :<\/p>\n
\nSelect frame 7 on the eyes and pupils layers and add a Keyframe (F6)<\/li>\n Select the Free Transform tool (Q) and squash the eyes layer a bit. (The pupils shape don’t change when eyes close.) It’s a good idea to turn on the Onion Skin tool to see what the previous stage of the animation was like (click on the icon at the bottom of the Timeline or Ship + Option + O<\/em>)<\/li>\n<\/ul>\nSquashed eyes and Onion Skin tool turned on<\/figcaption><\/figure>\n\nSelect frame 9 on the eyes and pupils layers and add a Keyframe (F6)<\/li>\n Select the Free Transform tool and squash the eyes further (until they’re almost closed).<\/li>\n We have to fix the pupils: Go to frame 7 and re-center them on the eyes with your Move tool. Do the same for frame 9.<\/li>\n We’ll copy the last Keyframe to the point where the character starts reopening its eyes: Hold the\u00a0alt<\/em>key on Keyframe 9 of both the eyes and pupils layer and click and drag them to frame 14.<\/li>\nWe want the eyes to be completely closed between frame 9 and 14: We’ll select all the frames on both the pupils and eyes layers and insert Blank Keyframes (F7)<\/li>\n Let’s draw closed eyelids on these frames:\n\nGo to frame 10 of the eyes layer. Select the pen tool. Set the Stroke to your desired color and the Fill to none<\/em>and draw 2 arcs to define the eyelids.<\/li>\nCopy this frame over to frames 11, 12 and 13 (alt<\/em>+ click and drag)<\/li>\n<\/ul>\n<\/li>\nLet’s finish the loop:\n\nCopy frame 7 of the pupilsand eyeslayers to frame 15\n\n<\/li>\n<\/ul>\n<\/li>\n Copy frame 1 of the pupilsand eyeslayers to frame 16<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nAll the blinking eyes stages and the frames they appear on<\/figcaption><\/figure>\n\nNow let’s preview our blinking eyes loop:\n\nTurn off the Onion Skin<\/li>\n Turn on the Loop icon (to the left of the Onion Skin) and make sure the highlighted portion of the Timeline includes all the frames before pressing Play.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nLooping Timeline<\/figcaption><\/figure>\n\nNow if we go back to Scene 1 (by clicking on its name at the top of the Window), when we press Play we can see that the blink cycle repeats itself over and over again until the main Timeline is over. (Make sure to turn the Loop icon off before previewing the main Timeline.<\/li>\n<\/ul>\nWalk Cycle<\/strong><\/p>\nLet’s now tackle the walk cycle. Animating a walking character can be challenging at first. It’s a good idea to use a reference image breaking down the different steps of a walk cycle. I’ve included a simplified one below, but a Google search will result in plenty of other images (including four-legged creatures, and different “moods” – i.e: excited, confident, sad etc.)<\/p>\nWalk cycle reference<\/figcaption><\/figure>\nPositioning the character<\/strong><\/p>\nFirst, let’s go to frame 1 and position the head element where we want it to be relative to the ground. In this case, I want my character to have rather short legs, so I’ll place the rest of his body fairly close to the ground.<\/p>\n
Creating the “legs” Symbol<\/strong><\/p>\nWe already have a layer called legs, but it is currently empty. Let’s draw the initial position of the walk cycle there and turn it into a Symbol with its own Timeline:<\/p>\n
\nLock the ground and head layers.<\/li>\n Go to frame 1 of the legs layer<\/li>\n Select the Line tool. Set the Stroke color to what you wish to use for the legs and the Stroke Weight to something visible and that suits the character’s design.<\/li>\n Draw the first position from the reference image – in this case, the contact pose – wherein both feet touch the ground.<\/li>\n Select everything you’ve just drawn on the legs layer. Go to\u00a0Modify > Convert to Symbol.\u00a0<\/em>Name it “legs” and set its Type to\u00a0Graphic.<\/em><\/li>\n<\/ul>\nThe first legs position turned into a Graphic Symbol<\/figcaption><\/figure>\nCreating the walk cycle<\/strong><\/p>\nJust like the blink cycle was on the head Timeline, the walk cycle will be created within the legs Timeline. We will use a slightly different technique to draw the different position though – we’ll redraw each one from scratch (rather than using the Free Transform tool):<\/p>\n
\nDouble-click on the legs to enter the Symbol’s Timeline.<\/li>\n Rename “Layer_1” “walkCycle”<\/li>\n Go to frame 3 and insert a Blank Keyframe (F7)<\/li>\n Turn on the Onion Skin tool<\/li>\n Select your Line tool and draw the second position from the reference<\/li>\n Repeat for each pose of your reference, spacing each new Keyframe 2 frames away from the previous one.<\/li>\n Add a regular Frame (F5) After the last Keyframe so that the loop runs smoothly.<\/li>\n<\/ul>\nWalk cycle Timelineand Keyframes<\/figcaption><\/figure>\nAll the walk cycle stages and the frames they appear on<\/figcaption><\/figure>\n\nNow let’s preview our walk cycle loop:\n\nTurn off the Onion Skin<\/li>\n Turn on the Loop icon (to the left of the Onion Skin) and make sure the highlighted portion of the Timeline includes all the frames before pressing Play.<\/li>\n We can always adjust the timing by adding or removing Frames between Keyframes.<\/li>\n<\/ul>\n<\/li>\n \u00a0Now if we go back to Scene 1 (by clicking on its name at the top of the Window), when we press Play we can see that the walk AND blink cycles repeat \u00a0themsleves over and over again until the main Timeline is over. (Make sure to turn the Loop icon off before previewing the main Timeline).<\/li>\n<\/ul>\nMoving the head and legs across\u00a0the Stage<\/strong><\/p>\nNow that our walk cycle is ready, we can use a Classic Tween to move the head and legs layers across the screen :<\/p>\n
\nSelect frame 1 of the head and legs layer (unlock them if necessary).<\/li>\n Position both elements where you want the character to be at the beginning of the animation. You can hold\u00a0Shift<\/em>to constrain the movement to a single axis.<\/li>\n<\/ul>\nPosition of the head and legs layers on frame 1<\/figcaption><\/figure>\n\nSelect the last frame of your animation (in this example, 120) of the head and legs layers and add a Keyframe (F6).<\/li>\n Position the two layers where you want them to be at the end of your animation.<\/li>\n<\/ul>\nPosition of the head and legs layers on frame 120<\/figcaption><\/figure>\n\nSelect a frame between the two sets of Keyframes on both layer. Right-click and select\u00a0Create Classic Tween<\/em><\/li>\n<\/ul>\nThe main Timeline with the Classic Tween applied to the head and legs layers<\/figcaption><\/figure>\n\nPreview your animation and add\/remove frames to adjust the timing if necessary.<\/li>\n<\/ul>\nBouncing the head<\/strong><\/p>\nIf you look closely at the walk cycle reference image (see above), you will notice that the head of the character is lower on certain poses. We can make our animation a little more dynamic by bobbing the head of our character up and down as it moves forward:<\/p>\n
\nIn the main Timeline, find the first frame with the “down” pose (wherein both knees are bent). Select that frame on the head layer and add a Keyframe (F6).<\/li>\n Move the head down a few pixels with the down arrow key.<\/li>\n Find the first frame with the “up” pose (wherein both legs are at there most upward position). Select that frame on the head layer and add a Keyframe (F6).<\/li>\n Move the head back up to its original position.<\/li>\n Repeat for every “up” and “down” pose along the main Timeline.<\/li>\n<\/ul>\nThe two head heights – lower on the “down” poses, higher on the “up” poses.<\/figcaption><\/figure>\n\nPreview your animation<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"Planning a character for animation is different than sketching for illustration or other static purposes. A character that looks great on paper may not be easy or fun to animate. A good understanding of Adobe Animate’s tools and workflow can help a lot when designing for animation. This tutorial will show you how to translate … Continue reading “Adobe Animate: Walk and blink cycles”<\/span><\/a><\/p>\n","protected":false},"author":21,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"class_list":["post-90","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":2,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":157,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/pages\/90\/revisions\/157"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp260-1301-f2019\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Character](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/img_0357.jpg\")
<\/p>\n![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-27-at-3-11-41-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-27-at-3-16-10-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-27-at-3-22-10-pm.png\")
![\"stages\"](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/stages.jpg\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-27-at-3-43-54-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-27-at-3-48-29-pm.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-27-at-3-51-42-pm.png\")
![\"eyes\"](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/eyes.jpg\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-27-at-4-06-27-pm1.png\")
![\"blinkingEyes\"](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/blinkingeyes.jpg\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-27-at-4-23-59-pm.png\")
![\"walkCycle_reference\"](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/walkcycle_reference.jpg\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-29-at-9-37-00-am.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-29-at-9-48-42-am.png\")
![\"walkCycle\"](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/walkcycle.jpg\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-30-at-9-11-14-am.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-30-at-9-19-04-am.png\")
![\"Screen](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/screen-shot-2018-07-30-at-9-22-35-am.png\")
![\"upDown\"](\"https:\/\/mmp260.files.wordpress.com\/2018\/07\/updown.jpg\")