Tip:
Highlight text to annotate it
X
This tutorial exists because both you and I have both seen these kinds of backgrounds
gone horribly wrong.
A cheap way to make a looping background is just to throw in a featureless flat surface
and tween some symbols to fly across the stage at varying speeds based on how far away they
are. Farther away equals slower. Copy and paste the tweens over time and you're done.
If you're making a forward facing loop it's the same thing. Dump those symbols in there
and tween them to move and shrink. Here's a trick: copy and paste all of those tweened
layers into a new symbol. Convert some of the animations to frame by frame. Pull them
out and move the frames hanging off the end over to the front of the symbol. This ensures
a constant flow of junk onto the screen. All you have to do now is put that symbol on the
stage and extend it.
Right. So that stuff's for cheaters, let's talk about real looping backgrounds starting
with the bare minimum: the place where the characters go. Regardless of the program you're
using to make backgrounds, the art needs to be longer than your video dimensions. This
amount extra works but you don't have much room to make mistakes.
While you're drawing, make sure that the left and right edges are about the same height,
and avoid drawing anything that hangs too far over the edges.
When the background is done, cut and paste your layers into a symbol. Now select all
of those layers, copy the art and paste it into a new layer inside that symbol. Move
that new layer to one side, leaving a small overlap between it and the original background.
Look at that sloppy seam. Look at it! Clean that up with an eraser or new art layers.
There. Once that's done, it's ready. Put the symbol into a scene. Make sure the rough edge
is off the screen with just enough space so people won't see the transition. If you drew
a long background, you have some extra room for error here.
Put a tween on your background layer and move it with the properties window so the second
part of the background comes up in about the same spot as where it began. So this bush
should be about here. And we're just guessing at this point, so woo-hoo. And now, if that
rough edge of your art is coming into the screen, you've got a problem. Either you didn't
make your design long enough, or you just need to move the starting point of your background
back. This way some. There. There you go.
Copy and paste your background, tween and all, into a new layer. Remove the tween from
the top layer and switch to the line view, and lock it so you don't move it on accident.
So now you can see that last frame is off. Go ahead and use the properties window to
adjust the last frame in the tween so it's perfect. You have to get it perfect. The loop
will jump if even a single pixel is off. So do it right! Do it right.
Done.
Delete the reference line layer. It's time to adjust the background's speed. Bring in
your animated character on a new layer and put it where you want it to go. Add or remove
frames from the background to make it match with the speed of the character.
There, the speed looks good. Now for the magic. Copy and paste the background layer with the
tween into a new symbol. And now this is what you do: remove the last frame of that tween.
Just the last one.
Go back to your scene and bring the symbol you just made into a new layer. You can switch
it to line view to make sure it's positioned exactly how you want it.
And now delete the original layer and extend your symbol out for as long as you need the
loop. Forever. For infinity and beyond.
Repeat the process for every layer of depth you want to add.
But here's a tip. Usually that back layer moves so slow you don't need to make it loopable.
Just tween it.