Make Creepy Crawly Ants
For those of you with a Myrmecophobia, this tutorial is not for you. However, for those of you who love ants, or just want to try your hand at creating a virtual ant farm, this is the place for you. We will be working with Flash 8 today, which although I consider it my friend and soul mate in the journey of life, I usually create tutorials for those craving 3D. My main tip for learning anything is patience because without it, trouble shooting can easily become a virtual hell, making you go utterly bat shit.
So let's begin:
1.) Lets just see what we will be animating. Please download the image below:
2.) Now that you have it on your desktop or in your Lockbox, import the file into the Flash 8 Library. To do that choose File->Import->Import to Library and select the downloaded ant. Next, drag the ant from the library and onto the canvas. Your Flash window should look like this:
3.) Notice the image is pretty large, so now's a good time to shrink the ant down to a more manageable size. Right Click on the Image and select Free Transform. Grab one of the corners with your mouse and just as in Photoshop, hold Shift and scale down the ant.
4.) Next we're going to vectorize the ant and then eliminate everything in the picture except the ant itself. So select the image, and then from the Menu selecet Modify-> Bitmap-> and Trace Bitmap. The settings for the Trace Bitmap are as follows:
Color threshold: 100
Minimum area: 15
Curve fit: Normal
Corner threshold: Normal
5.) To start removing material click on space around the ant and take note of how similarly colored areas, can be selected together. After you have chosen an area hit delete on your keyboard and it will remove the area, BUT be careful. Do not delete the colors that are slight variations of the "deep maroon" that is used for a majority of the ant. You could accidentally delete a good portion of the ants legs. We will correct this problem later. Use the Magnifying glass on the left hand tool bar to get more of a closer view.
Below are the color areas that should be deleted. ALL areas on the picture having the particular color tone indicated should be deleted.
Before:
After:
6.) Its time to correct the legs, and also the shape of the lower abdomen. To begin, lets select the pinkish area near of the second leg on the bottom 3 legs. Then select the eyedropper tool, and then click on the dark maroon portion of the ant. Notice, that the color of the leg changes to match the rest of the ant. Afterwards, change the color of the rest of the legs. Use the pic below as a guide.
To fixing the deformed part of the abdomen, we simple select the paint brush, and the open the color palette and to set the color to the color of the abdomen, click on the abdomen itself. Notice that the cursor changes to the eyedropper.
Now, use the paint tool and paint in a more fuller abdomen. The result should look like the one below:
Beginning the Animation Process
7.) Now, that we have the ant taken care of, its time to actually animate it. To begin use the black arrow and hold ctrl, and completly highlight one leg. Be careful because you can only select by making rectangles, so you will have to make small rectangles to highlight portions of the leg that are close to other legs.
Do this for the remaining legs 1-6.
8.) This part gets a little tricky, as there is no exact animation sequence and everything takes time to perfect. But, we'll try to get it in a couple takes. So click on a leg, I myself am selecting the first one of the upper row. And select Free Transform. Then click on the circle in the middle, and move it towards where the leg meets the body. For this particular leg, this is located near the lower right hand corner. Do the same for the remainder of the legs.
9.) One key part of animation, is knowing how to control each part of the animation. The easiest way to do this is by separating the different parts of the animation, across different Layers. This is the same way in sound production, you move the instruments on different tracks. To do this, we are going to do something pretty dramatic. First, select Insert Layer, on the Timeline Controls Panel, and Rename it, Leg 1. Do the same for the remainder of the legs.
10.) Now, on Leg 1, Right Click and select Cut. Then select Leg1, in the Timeline Controls, and choose Edit and Paste in Place. Again, complete this for the rest of the legs.
11.) Ants don't move in the same steady stride of a person, but instead move in a choatic manner, and therefore each leg needs to be animated independently of one another. To do that, we need to create a Loop for each leg. To begin, select the original layer where the body is located (this should be near the bottom of the list), and right click on frame 12, or however long you want your movie to be, and select Insert Keyframe.
12.) Next, Insert a Keyframe on frame 2 of the "Leg 1" and afterwards, drag the Keyframe, to frame 3. To bring the leg back to its original position, thereby creating a loop so on frame 12 Insert a Keyframe.
13.) On frame 3, rotate (Using Free Transform) the leg slightly about the pivot point that we established earlier in step 8. Insert more Keyframes between 3 and 12, maybe every five frames or every four and rotate the leg on each Keyframe. Finish doing this for the rest of the layers and don't worry too much if the legs get crossed every now and again. Make sure that the legs don't resemble a smooth walking or swimming motion. One leg maybe moving every 2 or 3 frames. The amount of animated frames do not have to be paced out either, but must move within reason so animating on frames: 2,4,6,8,9,12 is fine. Just remember everything must end on frame 12.
14.) Then to actually animate the movie, select the entire row of frames for a given leg and right click on the selected area and select Create Motion Tween. Notice that the area turns to purple. This indicates that there is a motion tween on the frame. Do this for the other legs that you have animatedThen on the menu bar hit Control-Play. This is where you can see your animation and see the many errors soon to follow. You can tweak the movie by going back to the keyframes (the ons with the dots) and re-rotating the proper leg accordingly.
15.) Notice that during playback, there is an annoying pause when going from frame 12 back to 1. This is because there are two frames exactly alike right next to each other, which is irregular. So fix the problem, highlight the entire vertical row of frames, under frame 11, and Right Click and Convert to Keyframe. Then select the entire row under frame 12 and Right Click and Remove frames. Now Play the movie again, and you should have a smooth even loop.
16.) Now that we have this ant moving in place, let's make it move around and about. So save this file as ant.fla . And now, we will export the movie so select File-> Export -> Export Movie, and name the file ant.swf.
17.) Create a New Flash Document. Then Import the ant.swf to the library and once again drag the movie onto the canvas. If you want to work with a smaller ant, just use Free Transform to scale down the ant.
18.) Insert a Keyframe on frame 30 and select the layer, as in the layer name and Right Click and choose Add Motion Guide.
19.) Then select the "Guide:Layer 1" layer, go back to frame 1, and use the Pen Tool on the Toolbar, to create a Path. On Frame 30 of "Layer 1" move the ant to the very end of the path.
Now Play the Animation or cycle through the frames, and you will notice that the ant moves accordingly. Finally, Insert Keyframes throughout the "Layer 1" motion tween, and rotate the ant to walk smoothly on the path. Afterwards, play the animation one last time and you should be watching an ant walking frantically across the screen. For more help on the Motion Guide see here. Good luck Animating !!!
6.) Its time to correct the legs, and also the shape of the lower abdomen. To begin, lets select the pinkish area near of the second leg on the bottom 3 legs. Then select the eyedropper tool, and then click on the dark maroon portion of the ant. Notice, that the color of the leg changes to match the rest of the ant. Afterwards, change the color of the rest of the legs. Use the pic below as a guide.
To fixing the deformed part of the abdomen, we simple select the paint brush, and the open the color palette and to set the color to the color of the abdomen, click on the abdomen itself. Notice that the cursor changes to the eyedropper.
Now, use the paint tool and paint in a more fuller abdomen. The result should look like the one below:
Beginning the Animation Process7.) Now, that we have the ant taken care of, its time to actually animate it. To begin use the black arrow and hold ctrl, and completly highlight one leg. Be careful because you can only select by making rectangles, so you will have to make small rectangles to highlight portions of the leg that are close to other legs.
Do this for the remaining legs 1-6.
8.) This part gets a little tricky, as there is no exact animation sequence and everything takes time to perfect. But, we'll try to get it in a couple takes. So click on a leg, I myself am selecting the first one of the upper row. And select Free Transform. Then click on the circle in the middle, and move it towards where the leg meets the body. For this particular leg, this is located near the lower right hand corner. Do the same for the remainder of the legs.
9.) One key part of animation, is knowing how to control each part of the animation. The easiest way to do this is by separating the different parts of the animation, across different Layers. This is the same way in sound production, you move the instruments on different tracks. To do this, we are going to do something pretty dramatic. First, select Insert Layer, on the Timeline Controls Panel, and Rename it, Leg 1. Do the same for the remainder of the legs.
10.) Now, on Leg 1, Right Click and select Cut. Then select Leg1, in the Timeline Controls, and choose Edit and Paste in Place. Again, complete this for the rest of the legs.
11.) Ants don't move in the same steady stride of a person, but instead move in a choatic manner, and therefore each leg needs to be animated independently of one another. To do that, we need to create a Loop for each leg. To begin, select the original layer where the body is located (this should be near the bottom of the list), and right click on frame 12, or however long you want your movie to be, and select Insert Keyframe.
12.) Next, Insert a Keyframe on frame 2 of the "Leg 1" and afterwards, drag the Keyframe, to frame 3. To bring the leg back to its original position, thereby creating a loop so on frame 12 Insert a Keyframe.
13.) On frame 3, rotate (Using Free Transform) the leg slightly about the pivot point that we established earlier in step 8. Insert more Keyframes between 3 and 12, maybe every five frames or every four and rotate the leg on each Keyframe. Finish doing this for the rest of the layers and don't worry too much if the legs get crossed every now and again. Make sure that the legs don't resemble a smooth walking or swimming motion. One leg maybe moving every 2 or 3 frames. The amount of animated frames do not have to be paced out either, but must move within reason so animating on frames: 2,4,6,8,9,12 is fine. Just remember everything must end on frame 12.
14.) Then to actually animate the movie, select the entire row of frames for a given leg and right click on the selected area and select Create Motion Tween. Notice that the area turns to purple. This indicates that there is a motion tween on the frame. Do this for the other legs that you have animatedThen on the menu bar hit Control-Play. This is where you can see your animation and see the many errors soon to follow. You can tweak the movie by going back to the keyframes (the ons with the dots) and re-rotating the proper leg accordingly.
15.) Notice that during playback, there is an annoying pause when going from frame 12 back to 1. This is because there are two frames exactly alike right next to each other, which is irregular. So fix the problem, highlight the entire vertical row of frames, under frame 11, and Right Click and Convert to Keyframe. Then select the entire row under frame 12 and Right Click and Remove frames. Now Play the movie again, and you should have a smooth even loop.
16.) Now that we have this ant moving in place, let's make it move around and about. So save this file as ant.fla . And now, we will export the movie so select File-> Export -> Export Movie, and name the file ant.swf.
17.) Create a New Flash Document. Then Import the ant.swf to the library and once again drag the movie onto the canvas. If you want to work with a smaller ant, just use Free Transform to scale down the ant.
18.) Insert a Keyframe on frame 30 and select the layer, as in the layer name and Right Click and choose Add Motion Guide.
19.) Then select the "Guide:Layer 1" layer, go back to frame 1, and use the Pen Tool on the Toolbar, to create a Path. On Frame 30 of "Layer 1" move the ant to the very end of the path.
Now Play the Animation or cycle through the frames, and you will notice that the ant moves accordingly. Finally, Insert Keyframes throughout the "Layer 1" motion tween, and rotate the ant to walk smoothly on the path. Afterwards, play the animation one last time and you should be watching an ant walking frantically across the screen. For more help on the Motion Guide see here. Good luck Animating !!!
11 comments:
Great Tutorial and useful. I learned a lot from it. Thanks!!!
dont fucking ever do this again you peice of shit.
Thanks for systematic clear explanations. Great. God bless you.
Hello,
I am contacting you on behalf of www.flashcomponents.net . I've read one of your tutorials and I like the way you write. Our site is continuously growing and we recently added a tutorial section. We kindly ask for your approval to allow us to publish your tutorials on our site, mentioning you as the author.
Of course, we are inviting you to do it yourself, but either way, it would be our pleasure to publish them.
Kind regards,
Mike | Flash Components Team
Mail: flashcomponents@hotmail.com
myheas
good ants i am
my creepy crawly ants does not work very well. i am a bad beetle with the flash. bloody millipeds
i looooove it
u8hhhh
The tutorial is awesome but i cant do i..lol
Dear Author www.homemadeanime.com !
In my opinion you are not right. Let's discuss. Write to me in PM, we will communicate.
Post a Comment