Wednesday, May 23, 2007

Multiplaning Looping Panning Backgrounds

This tutorial is a continuation of the previous lesson on creating looping panning backgrounds.

Update: I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes the looping background pan and the multiplaning looping background pan.

E-mail address you'd like to receive .ZIP file (25 kb)

So we left off with this

But that's not impressive enough for you. The kids love that 3D stuff, so lets give them some multiplaning action.

The loop we've already made will be the back most, slowest moving plane in our pan. Everything else will move faster. So when making a multiplane shot, make sure the first loop you make is your farthest back (the sky, or in this case, the wall.)

Now lets take a look at the two symbols we've made so far
background_pan contains the motion tween that makes the background move
background is the drawing that is the background.

What we need to do now is make duplicates of both these symbols to hold some new drawing. First thing I'll multiplane are paw prints running over the ground. So copy the instance of background_pan that starts on frame 51 and paste it in place on a new layer.
Now duplicate the symbol background_pan and call it footstep_pan.

Enter footstep_pan, duplicate background and call it footstep. You probably have sync and snap on, so when duplicating background you'll have to do it on the first frame on the timeline, but when we go inside footstep you'll want to do it on your middle frame. Also DO NOT ALTER THE TIMING OF THE MOTION TWEEN.

Go inside footstep, make a new layer to draw in, delete the background layer, unlock the mask and turn the mask to outline (this way you can see your boundaries but it doesn't cover what you're drawing). On your new layer make your new drawing. In my case, I'm making footprints. As you can see I made sure they were flush with the boundaries of the mask.

Now let's go back to the stage and play this.

As you can see we have a few problems. The footsteps appear only half the time, and more importantly, there's no multiplaning. What kind of multiplaning tutorial is this?

Let's fix the multiplane problem first. And it's such a simple fix. On the stage select footstep_pan, hit ctrl+alt+s to bring up the Scale/Rotate dialogue box, and scale it up somewhat. The amount you scale this symbol up determines the increased speed of this plane's movement. If you want a subtle multiplane, scale it up a bit. If you want a big increase in speed, scale it up a lot. The footsteps should be subtle so I'm only scaling it up a bit (the screenshot says 105%, but I eventually settled on 110). Also it's important when scaling the _pan symbols to either use the scale/rotate dialogue box, or make sure that it's scaling relative to the symbol's center point.

Now that we have the footsteps moving faster, let's fix the problem of it only appearing half the time. Select footstep_pan copy it and paste it in place on a new layer, then select the new instance and put its starting frame on 1.

Now let's check it out.

It's working, but there are a few problems. First of all, it's super subtle, but that's okay we'll do more impressive stuff in a bit. And second, sometimes you want objects to multiplane that don't run the course of the entire screen. Maybe you want to add something like a piece of cheese.

Cheese? What a great idea, let's do that. Copy the footprint_pan instance that starts on frame 51, paste it in place on a new layer. Duplicate footprint_pan and call it cheese_pan. Enter cheese_pan, duplicate footprint and call it cheese. Enter cheese, delete out the footprint drawing and draw a piece of cheese.

Now go back out to the stage. Now your cheese is moving at the same speed as the footprints. To fix that just scale the cheese up some more using the scale/rotate dialogue box. You probably won't like the verticle placement that happens when you scale-up the symbol, so just adjust that placement to something you like. ONLY MOVE THE SYMBOL TO ADJUST VERTICLE PLACEMENT, DO NOT MOVE THE SYMBOL LEFT OR RIGHT (this will make sense in a bit).

Now here is what we have

Getting better, but let's say you want more than one piece of cheese, and you want to adjust the starting spot for the piece of cheese that is already there. To change the starting spot, just change which frame cheese_pan starts looping on. To add another piece of cheese, just copy cheese_pan, paste it in place on a new layer and adjust the starting frame. My two instances here start on frame 80 and 45.

And here's what that looks like

For the sake of this tutorial I'm going to do a bit more mutliplaning, but in order to do that, I think I need more ground to play with and less wall showing. That's an easy fix, just select everything and move it up a bit. Then select just the footprint_pan instances and move those down, and then select the cheese_pan instances and move those down even more.

Now that we have more ground to play with, lets add some more cheese, this time between the wall and the footprints. Easy enough, just copy an instance of cheese_pan and scale it to a size that is somewhere between the scale of the wall (100 %) and the footprints (110%), and then vertically place the new cheese between the wall and the footprints. To tell what percentage your symbols are scaled, bring up the transform dialogue box (ctrl+t). Once you have the placement for the cheese correct, you can add more cheese on that plane by copying it, pasting it in place and changing the starting frames. In the screenshot bellow I also added another piece of cheese closer in the forground using the same technique (except I scaled the cheese_pan instance larger instead of smaller).

And here it is playing

A thoroughly ridiculous background, but you get the point. And of course you don't have to be limited to cheese, you can keep making more duplicates for other objects like chairs, or whatever your little heart desires. I decided this long, fermented dairy loving hallway needed some illumination, so I also added some lightbulbs comming in from off screen. It's a little stupid since realistically speaking these lightbulbs are way too low, and the forground lightbulbs are actually closer to the ground than the background bulbs, but what do you want from me, I was making this up as I went along. Normally I would have figured out my horizon line to determine the verticle placement and height for all the objects before doing any of this.

But enough excuses, here it is, my final multiplane.

And remember, I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes the looping background pan and the multiplaning looping background pan.

E-mail address you'd like to receive .ZIP file (25 kb)


Robert said...

Thanks for this great tutorial!

suma said...

Yea.. It is really a wonderfull tutorial.. thanks a lot.. we can use this in many many ways.. I will be here to getting more from you

shopen khan said...

This is best tutorial that i want.
Thanks for share with us.
Dissertation help