Adding in “The Shoe” (Duh Duh Dum!)

Okay, so our spider is reacting to something he sees above him, and it’s not a happy reaction. What is above him, you wonder? Well, we cut out and selected a shoe. Now, what?

Take the magazine clipping (in this case, our evil shoe of doom), and scan it in using a scanner. Make sure you have white background behind the clipping as you scan. If your scanner doesn’t have a good white background as it scans, put a piece of plain white paper behind your clipping, then scan it.

Save the resulting scan as a bitmap, or .bmp file.

Now, remember our .svg files from our Inkscape program? We had 15 .svg files called names like spider1.svg, spider2.svg, spider3.svg, and so on. If you look at these files, in the first few, our spider is looking to the left and the right. We don’t want our shoe above his head at this point. Rather, we want the shoe to appear over him when he looks up. I decide to start adding the shoe in the file spider9.svg. So this is the file I open.

It looks like this, remember?

Remember how we created a new layer? Go to Layer->Layers to bring up our layers palette to see what layers we have. We see that the layer, “Spider Mouth,” was the last one we created. Highlight or click on this layer to make it the active layer.

Now, go to Layer->Add layer. Name the new layer “Shoe.” This looks like this:

Make sure you have clicked the tiny padlocks closed on all the other layers, and then you have clicked on the Shoe layer to make this the active layer.

To insert our shoe, go to File->Import. Browse to the file that contains the scan of your clipping. In my case, this is a scan of the shoe from the magazine. Click okay to import it.

Your screen may now look something like this:

You’ll notice that this shoe is waaaaay too large for our spider picture. We have to make this smaller if we are going use it in our animation. Use the arrow tool, the one on the left, right above the “Edit path nodes” tool. Now using this arrow tool, and click on the image of the shoe.

Your screen will now look like this: (Note: I’ve zoomed out so more of the image fits on the screen.)

See the arrows that are on the corners, and along the sides of our shoe clipping image? Put your cursor over one of these arrows, click your mouse and hold it down. You can move your image this way. Click in the middle of the image, and the arrows change. The arrows above image are arrows that allow you to rotate the image. If I click again, I get arrows that look like this:

These are the arrows I want for right now. I select an arrow on one corner, hold my mouse button down, and move my mouse so that I change the size of the image.

I move the image further up the screen, so it is hovering over the spider. Like this:

As I look at this, I decide I want the shoe to be coming in at an angle, like a person is walking. I tilt the image by clicking on it until I get the rotating arrows. Once I have them, I use one of the arrows on the corner of the image to rotate it to a position I like.

I need to save this file, so I can move onto the next one. Choose File-> Export Bitmap. Select the “Page” tab to save the entire page. MAKE SURE you change the FILE NAME in the export box. I change mine to spider9a.png.

This screen looks like this:

We are basically done with frame 9, and need to move onto frame 10. But we need to take our shoe with us, and we do that by clicking on the image, and selecting Edit-> Copy.

Now, leave frame 9a open, and open up spider10.svg, which is frame 10.

Go to Layer->Layers to see the layers palette. Click on the “Spider Mouth” layer to make it the active one, then go to Layer-> Add layer. Name the new layer “Shoe,” and close all the little padlocks on all the other layers, before clicking again on the “Shoe” layer in the layers palette.

Go to Edit-> Paste. My shoe now appears on the screen, looking like this:

You’ll notice two things about our shoe—it is the right size this time, and it is still rotated, just like it was in frame 9.

I’m going to move the shoe over to a place above the spider. As I do so, I need to remember that this is the next frame, and the shoe should be in slightly closer position to the spider.

Here is where I place it:

Export this file by going to File-> Export Bitmap. MAKE SURE you change the name of this one to spider10a.png.

Open up spider11.svg. Create the new “Shoe” layer just as before. Make this the active layer, locking all the others. Go to Edit-> Paste, and paste in our shoe. Move the shoe to a position over the spider, this time a bit closer than the last one.

This one, I rotated a bit, so that the foot looks a bit more like it’s walking, and not just smashing down.

Export this one as a bitmap file, REMEMBERING to change the name of the file to spider11a.png.

Open up file spider12.svg. Follow the steps to create the shoe layer, paste in the shoe, and position how you want it.

Okay, as I move the shoe down over the spider, I see that the white background around the shoe is now blocking out some of the spider. See? It’s blocking some of the spider’s legs:

To fix this, I go to the layers palette. See the little down arrow, right above the number 100.00? While the Shoe layer is selected, click this down arrow. This moves this layer to the bottom of our layer “stack.” This is how our screen now looks.

I can now export this as a bitmap file, REMEMBERING to change the name to spider12a.png.

Open spider13.svg. Create the new, Shoe layer. Paste in the shoe clipping, position it over the spider. Then, using the layers palette down arrow, move the Shoe layer to the bottom of the layer stack. The screen should now look something like this:

Following the previous steps, I open file spider14.svg, and put in the shoe. Here is what my final spider14a.png looks like:

Now open and edit spider15.svg. Here is what my file looks like after I export it as a bitmap:

Okay, now we’re ready to see how this look as an animation.

Open up our Jasc Animation Shop file, which we called spider1.mng.

It looked like this, remember?

We are going to edit this file, inserting our new frames, frames 9a-15a, into this animation.

Go to frame 9. Click on it to select it.

Go to Animation-> Insert frame-> From file. Browse to spider9a.png, and select this one to insert it.

Our animation now looks like this:

Go to frame 10. Insert, just as you did for frame 9, the new frame 10, called spider10.png.

The animation now looks like this:

Continue to add the new .png files, until you have added up to and including frame 15.

If you look at your animation now, zooming it out so you can see more of it on the screen, you’ll see that, by inserting the new frames, we did not get rid of the old frames. They are now at the end of the animation instead. This looks like this:

Click on each one of these extra frames, and then click the delete button on your computer, or right click, and select “delete.”

Our animation now looks like this:

Go to View-> Animation to see what this new animation looks like.

You’ll notice something as you view this animation. The shoe magazine clipping? It has a dashed outline around it. For now, don’t worry about this. I’m not sure why Jasc is putting this there, but we’re not going to worry about it, and neither is our spider. He has bigger things to worry about, doesn’t he?

Now save your animation as an .avi, or an animated .gif. Also save this as a Jasc Animation Shop file, which is an .mng file. I saved mine as spider2.mng, so it is separate from my first file, the one without the shoe.

Now, click the back button on your browser to go back, or click the X if this tutorial opened in a new window.

Content created by Annette Griessman, and cannot be used without permission.

Email: agriessman@insightbb.com

Last modified on November 9, 2007