SWL+Lesson+8+Create+a+Cartoon+Animation+Part+1

=SCRATCH Lesson 8: Create a Cartoon Animation Part I = In this lesson, we will create a Cartoon Animation. We will first create a story line. Based on the story line, we will create sprites and scenes, and finally add scripts to put together the story. ** Step 1: Create a Story Line ** The first step to create an animation is to have an idea. It could be from a joke you’ve heard or a story you recently read. Or better yet, it could be entirely your own. I've created a really simply story as shown below. Bobby was a 9-year-old kid who got bullied all the time by this crazy bully and his sidekick. Then he met Master Meow, the Kung Fu master. Bobby was under intense training for many months. Then Bobby entered Kung Fu competition at school and defeated the bully. ||
 * < In a small village far, far, AND far away, there lived a little boy who dreamed big.

From this simple story line, we have this “ingredient list” for our animation:
 * < Sprites ||< Bobby, bully, sidekick, Master Meow ||
 * < Scenes ||< Village, School, Training Ground, Fighting Stage ||

From this simple story line, we need these sprites:
 * Step 2: Create Sprites**
 * < Sprites ||< Bobby, bully, sidekick, Master Meow ||

By now, I trust that you should be pretty comfortable drawing your own sprites, so we will just create our sprites by importing images from Scratch library. Create or import a sprite and name it “Bobby”. Add costumes: “front”, “right”, “left kick” and “right kick”.


 * < [[image:https://lh6.googleusercontent.com/uh2pM9IEQrcKo-NUj16twrYloR_rcza_0ekZ9OjfK0z_GYTMozIcszDvl1ySJiOOZsDhgKZR0Q7dL9ohmkRqudDUirHg84O5O4wRvl2QhQUdx9Xa74g width="93" height="64"]]*[[image:https://lh4.googleusercontent.com/ny2YfX771UF3HfSFGMU87mp56FdTl98gClKczP7wSQyfs5tjt_2d-sTWZR4AdszjfPKYqNodwKd5BIDclnCWUZd9RBv8Zk8kPP_qQFtlGL4phuH0J6o width="79" height="18"]] ||< [[image:https://lh4.googleusercontent.com/YqR5sC1arIdlg-OfGGbaz_JkNB-t1ZVbikc9TkCvyFpXsG3P9TkfH1QH989TGM44K5srFM7xp_GhqqksW8Ia2ANjPMyE_K4hy0JKVVbrSJKKXFP1oAI width="98" height="65"]]*[[image:https://lh5.googleusercontent.com/EvzD1Y6jLjFgE-TJeAKacAQnBxQtPFDRec9jqAiw9mRfJbeyv-qaawaw9Qtc6bFD9uu2-ceaJOdAZR0Hpjl4GVDkBpX2pX0iwqFmBykpA3VAckzAiD4 width="76" height="18"]] ||< [[image:https://lh5.googleusercontent.com/FQNuVTtOknQ5EPWLchNzOnEjU65WKKyv8xblijclfPMmPV-URcyjrtW70wfbBn4NbPpGLYQ9qx2si_EqbzeOysf5tEmNl3xc2Pb-XKDi7GBIYHwEOHs width="95" height="65"]]*[[image:https://lh4.googleusercontent.com/5R25-3RPlD_4Fv5KhE8V15n-zem7c7e2tm0tvPsTSlEccrVioBsybqPGBrBCXZgCrLeVjO-q7KGV9XZxtRTgOMk29qcPkyLaRZtoy0ER-DAdeLYmfVg width="83" height="22"]] ||< [[image:https://lh4.googleusercontent.com/fCJXcUh8ZHcCB2JYpCMhnbtAdtXCr6zAcqRfchbWGLbPugxEnSHHbMH88RAtc9uKDurwEY9gVmv8peA0rm1lhmxyw4aZ0sdFAnmqnwIZt5PRyOFMBXg width="93" height="61"]]*[[image:https://lh4.googleusercontent.com/o_Tc5WmqWF5skCFQpOmm0JCThId1INM_4T2comOlcjAFRfVrhj7gZR1KGNXhVnzzW772qNrPZx_gKfsZ5pxWPhXXh6eneSNqAiQb_KoqT2ciZgepAOs width="85" height="19"]] ||

Add a new sprite and name it “bully”. Add costumes: “up”, “down”, and “defeated”.


 * < [[image:https://lh6.googleusercontent.com/iNB6HidcnUEQXbZxv3zQ00U1AYlx92vZc46WD55DS3FV0ydqqeFnJe-9UioCqhzPokWe3At5_K80Gprn8T-DoUws8LaY0LQmEw6dy9NBboLIe2_RIBg width="95" height="66"]]*[[image:https://lh5.googleusercontent.com/LjYUGTp7tHqETh52PdPUc5OZvJUgo5lehfh1Gp5D9RrAHM9FtavBlyoNoOPa757wxfQVEGwOr4Nlh1ddFbUYFxU0k0Ex42zp04eecOV67RAttY8kXIM width="65" height="22"]] ||< [[image:https://lh6.googleusercontent.com/TtOpTRC6TAOOs-NF--Po1QkaMCMzGjKr-iLdD_arNdZ8epzIEhhd-MsL-_mr8q8yB1KBocUQ5E1b4sQ97o0lG6VXnJWpMZDNxFsbkYS0CD_ScvG83Ko width="95" height="65"]]*[[image:https://lh3.googleusercontent.com/lV2HrzvTdgjSt74MvNT41yZh9IaKiptl-Ts423gRhXwy4OAafJBeOhWfbM_WNBWxAtfH6DuOL7ATxhfehvtPUI74DsfKhh6uf0HxJP-hDciBCN4t2oo width="61" height="18"]] ||< [[image:https://lh5.googleusercontent.com/dqtutLdK94Li_UmQDnJv-y_Et8TdIQOxUAVNuVrEhRsH_3Lk-Q9XZZxxGhPN9q4ZJZ_D5RfrYxuBem5tBRITDvVZ0LOsM1fHbWX3CSGx-itiMeAkElc width="95" height="63"]]*[[image:https://lh6.googleusercontent.com/6vrjc4t_j97YNLj-wa5ApzVHSHE77qi_gsaoY3gtJ-fbv0aAe0PwzBGUyJxY1q7tm1u7_l9w7HvU_YxY3qwiAAq8TLVSHc3qAmUCWJTWWX66zOuv6V0 width="66" height="17"]] ||

Add another new sprite and name it “sidekick”. Add costumes: “tease” and “sad”. Add yet another new sprite and name it “Master Meow”. Just give him one costume: “happy”.
 * < [[image:https://lh5.googleusercontent.com/Ovl2lfoHRZIhPBDJhIrYHvYP9CP1cBw9LCvFAseFzW1dvBojG4hvJ34YWYVTYis-QBN4M6B7wQpUB_z0RFjLcYc1b4YdIy78qfl-FKUoew_kiWInW44 width="96" height="66"]]*[[image:https://lh5.googleusercontent.com/dZ6bvfLdK8mmtaTn7H9TApiYWJH3svywP_nkE5VXya5O7CeLGLmXSyY4Xhs1iy5L7BGwuBbSvjl1fmgsKvzjSVl2IYw8rWZD24OD7BAOw7w-KMKOL-4 width="60" height="18"]] ||< [[image:https://lh3.googleusercontent.com/eHYEilDksOUUCBortD16ljTxx0fPI14APILWqcatAPM7cw5A5YTO8S4GgI4vMFnuV-Om1i9Y44DrBlmWZLeEpJd9OiqOxYGFjt21U744hlKwfJoPhGM width="98" height="63"]]*[[image:https://lh6.googleusercontent.com/jCLmvps7i7lMIGy2GM03-mVkNLjjJNrqHXIDqWvZAsayFa58m3VHbDoVf1qFhg8z0IlIb5gHGPQHNTxkOig4IUE4pZmFWPWk867NL1cqyCst46zbEdw width="50" height="17"]] ||
 * < [[image:https://lh3.googleusercontent.com/mMqHUydc86_FksTdAaGVd7T6rP0ADy6EW2VfK4Gpe_6n34EF4ipsjYp9huOPkG_8MHLTuXaetLs8uJb7HWK3hSqi4ucToauDCI3flWO2Kmx4dp9Zi_o width="97" height="64"]]*[[image:https://lh3.googleusercontent.com/_CTHPt9Tow9Got0qVgt6FYzp7YidgFyzBh-qd5Z2G8D0l88VAVJqAklVBJ5TgFIlbOycpKHo6jvy04_CJymCBjGErc551fUXByZIqlfuHsk29i2sqmw width="128" height="22"]] ||

To create scenes, just add backgrounds for Stage. We will create four backgrounds: village, school, training ground, and fighting stage.

Draw outline of mountains. Make sure to draw it all the way to the side of the canvas.
 * Step 3: Creating the Village Background**


 * < [[image:https://lh6.googleusercontent.com/3ks3wwrMhmyW3xMZdzbWquQg9N4xwoP4ITBAfVdYcDVA_k15k8RNohWwSPLHKqavm7L4_Ds_41mvYnGZ4oKFPdZG9Hq6AtmITrb2uWG525573tlW0eo width="334" height="251"]]* ||< [[image:https://lh3.googleusercontent.com/byUcsqJR6SjPZeuxuioxw6BKQ8OxI9IxHGYB24GEpJcEvJQMq4sarC9Ni8ErK2-qQvP6nAsjFSY6ZHDLINCygaXB8ysVTcJ0RNpuWg4zhAfmaBLl0Lo width="360" height="274"]]* ||

We need light blue for sky and light yellow for the sun light. To select two colors, click first either Eyedropper Tool or Fill Tool to turn mouse arrow to an eyedropper icon. Then select the light blue as main color; click the two-ways arrow to switch colors; finally use eyedropper tool to select light yellow.


 * < [[image:https://lh4.googleusercontent.com/hsXIkuW0Xpbdk2Yy9C8QGoc19gb4eHdPtSny1gU43AekGrlTNU1pPfMkiCg5sVQViAHtk7pecPW10QFSvpvrckxgs9sfnGxliRVHlz7CivK6-51kOs4 width="237" height="179"]]* ||< [[image:https://lh5.googleusercontent.com/zeUreg0fE0F7Pf3aK8XlJXFenT8Vq45i4UClb81o_2kdYQ2xH31H9__JvFMeeVyBchAhHdnm5FsBbIDb-v22b6RRX0n6FjSNiowoo8bSGR3h4ypDQoI width="229" height="179"]]* ||< [[image:https://lh4.googleusercontent.com/K784aof-FwmACSrHFaukDmhpGiv8ryriCSH5c0YmcnbsLkQS-A4AQzMamcn9nm69tNBH2DZPqUvgMYpjEIVwLiAMMFNuoHPRCVKOmRk8rFPuaQIoRQI width="222" height="180"]]* ||

Now we have light yellow as the first color and light blue as second color. Click the Fill Tool button, and select Center Gradient Fill Bring the little paint bucket icon to where you like the sun to be. I like the sun to be at the upper left hand corner. After filling, the Canvas should look like this. Next, we will fill the mountains in the same way. We will first select two color tones: light green for mountaintops, and darker green for area further away, such as foot of the mountains or the mountain in the shadow of the first mountain. But this time, we will use Top Gradient Fill. Bring the paint bucket icon to the tip of the mountain that is closer to the Sun and click to fill. This is the result of the color fill. To make it obvious to viewers that this is the village scene, I also added story line in text to the Canvas. Select Text Tool and click anywhere in the Canvas.
 * < [[image:https://lh4.googleusercontent.com/y2pBdBOWbiwU8WRyqFtZWu_JLEN9SA_ygMTjsxXC9mFiaK-pnw_5Ll42V9VSO9-Hrkx2Gb1mhFWUdr2IaJBV00hLNewafEzJMG_oOtOU2mdavm-FBrM width="212" height="69"]]* ||< To start typing, click Text Tool, and just start typing. You would see a tiny black square box. It’s the text handle. ||
 * < [[image:https://lh6.googleusercontent.com/JP17-zHLj7nNs23Bg-kJ7mCe6vrTIcfaMcdYihN8X2PAhPwjnHWvTSPydVoj0-r5ONDjthKlPSpIdDvQc1tSU3n-BQo-IOknl7gIqpQDyJfxgc1WcB0 width="193" height="65"]]* ||< To move the text, move your mouse over to where the text handle is and drag it. ||

For school background, we will draw a old-school blackboard and several wooden chairs. Select Box Tool and Solid Box mode. Make sure the Fill Color is dark green. Draw a solid green box. Switch color so the main color will be black. Then select Box Tool and Hollow Box mode. Create front of a table like shown below: one horizontal rectangle on top as side of the table and two vertical rectangles as legs. Draw the table top and the side using Line Tool.
 * Step 4: Creating the School Background**
 * < [[image:https://lh5.googleusercontent.com/sbD7yk2dq1b1hSwvLGjDffu0Mo9VDmnLOrZWyUEVqB_qGAcMg9s-yA7G9vrmETz6HEBc9JlkW_l22hW2a2hy_lq8IRaZvDQbdAaPtOCVphBBcI5Uuio width="446" height="195"]]* ||< [[image:https://lh3.googleusercontent.com/n9aboUh-CftPaaNLZma7YqkUNFIWVPzhMGGcyFuFSrrUAUjOZ5un5_H04Ck999hs7ETAsqVsjtsKG-6Oe2Vct8zQgtpHcqeDpvKtX7TzL8kuqqwzDPU width="187" height="122"]]* ||

Then finish up the table outline by adding another two legs using Box Tool in Hollow Box mode.
 * < [[image:https://lh6.googleusercontent.com/QYuFEl6ewee-SLbcyuIWk5ZtSmrxypWV3-PhzT3nHD4FUmYTbiCk7Q-qwySjQoHXljmFPM8COqOSaZuFnRWp6UpogQOPOD9I7H5bLYsrV7Sa_YMQ9NU width="446" height="192"]]* ||< [[image:https://lh4.googleusercontent.com/Mw1dL0trLp7pAwG6RHqCbLthaq5hDdOwvMBwKoDiloNa1-XYhgJqw7lxbBK4BWFeUFmkiqyH4m4g9WRZjs68BANTGVkXfUcxofHMHzgQA6gimI2-wIU width="168" height="110"]]* ||

Finally, fill the table with wooden color using Fill Tool with Solid Fill.
 * < [[image:https://lh3.googleusercontent.com/QnwWjXnX4diIIwAfNMkA84524h3svizqgEuFl8kmj9t7OQ-9fmsCk-NTee7oHPYlBUGfPxAzi2bHW44-TuR1282fM5C0m6YXeIUUlz9ojR4K0LjJXUc width="452" height="192"]]* ||< [[image:https://lh3.googleusercontent.com/SRIiDxqg9zz8sz2ISkBJdjF40Sdfkvj77cFODXNE60-sz2a_wgzUrg21m_RenA_CrAmobgBDmM1n4p-DFLjkEF5oDyDPCuynCzQJrk-Jr2DN-PWSUqQ width="166" height="113"]]* ||

To move this table, use Select Tool to draw a box around the table and drag it.
 * < [[image:https://lh4.googleusercontent.com/TfpjOca2Sn8eKwwbNt0zngB6-ARtcXfSbIfVXg7avW2dWOK0a2oanc8QO2nSUilPjUufY6qT74nT89MeTBmiH3rpZX1YlZAmzd7bs2_YwUaRTCdv9cY width="348" height="263"]]* ||< [[image:https://lh6.googleusercontent.com/J29edODb8uqJAGaAH7WdV6oZXBETHClhuB8u3Vm2GqdNIE3Okpw2GCIIBtlXcUcJJqgKbM9Tyd8VgGVpT-lOaWWu38obDSb8SHxiafzsU5SX-c1r8ZU width="352" height="263"]]* ||

Select Stamp Tool and draw a box around the original table to make a copy. Drag the copy to where you like and click to drop the copy. Repeat until you have enough tables that this look like a classroom. I know there are not chairs but hey, tables are good enough.
 * < [[image:https://lh6.googleusercontent.com/RfqSmOcsy2-XZqVDtEx4tzM6ksHNXtH8sBET7-dLZV4lWBinf2Gl8eTROyesydEs80sGZBKiN58mvDF2BgIjOz5iXQHqQmOnlsoa0nMoHSrR3xdHLms width="356" height="272"]]* ||< [[image:https://lh6.googleusercontent.com/s7AQ32GYDdSYGxDVrCcFWs5GNWFItQTfnmflfmos-Qov1CeIHNTj84I1S2HPkz7IqymHzwYvU0V_tWmlDT8Xjwd7KQ1OePqc4ANsqa9YZf0JympfHsw width="354" height="264"]]* ||

Step 5: Importing the Training Ground Background Training ground background is the easiest of all. We will just import it from Scratch Background Library and rename it “training field”. Step 6: Creating the Fighting Stage Background First use Box Tool and Line Tool to create a fighting stage. Select the Fill Tool and the Center Gradient Fill. Then select light blue as first color and dark blue as second color. Switch two colors and then select Solid Fill. Change first color to red and fill the diamond. Next we will create shadowing effect by using light grey and black. Select light grey as first color and black as second color. Then select Top Fill Gradient. Fill from the top of the Canvas.
 * < [[image:https://lh4.googleusercontent.com/kEsNK_SMXm9ngLLVpa-_f6ng49K_ErDZY4FY5uBcW0b59O0xoyjIugkl1ckKK7m_CkvaE9muCLEdlaPxFfYKTeahIxsTri9zzs_D2MufrBtH4CjUjMs width="336" height="246"]]* ||< [[image:https://lh4.googleusercontent.com/XWz7C7tCz0z89-cR7YFwzPr_jqG-DS7zsfz9yO5CiJLWhoPYYnvcMw_r1h7_MLWtj0ZGlx2MJvH4KnO4CEA0DOYn168NGJ8xiseF0kWFOuLQNhkte5g width="329" height="246"]]* ||

We are done for this lesson. Go take a break and we will add scripts in next lesson for scene transitions and sprite interactions.

Link to Lesson 9