Looping Background

Animating cartoons is something that many would like to do. It's not only fun but it's also a very useful ability. In the future, you might find yourself in a situation where you would like to have e.g. an animated character—for your website, or for whatever purpose. Hiring a professional animator is rather costly so I wouldn't recommend that if we are talking about a small "project". It is best to do it yourself!

There is no good cartoon without cartoony background, and such a background sometimes needs to be animated.

That's why, in this tutorial, we are going to focus on animating a cartoony background! :-)

 Let's get started!

i. First off, we need to get some basic vector background drawn in Flash. If you feel unsure of your skills in this area, here's a short tutorial on how to draw in Flash.

You can also download the start file with the background I used here.

So, my background is inside a building. Actually, it's some kind of a corridor. Of course, this doesn't mean you can't create a background in some other location, like in some woods, etc. Besides the wall, we've also got some flowers and a lamp there. We're going to loop these as well.

ii. Once your background is ready, convert all of the objects that you would like to be moving across the stage to Symbols. Just select them (individually) and press F8.

The Type of the Symbols can either be Movieclip or Graphic. I doesn't matter that much here.

It's a good habit to name your Symbols appropriately (e.g. vase, flower, lamp, wall).

iii. The most crucial thing to be done in this tutorial is to create a continuously looping background of the wall. Well, this is kind of tricky. We first have to:

a) Make the wall at least two-scenes-long.

b) Motion Tween the wall Symbol so that there is no (or very little) difference between the first and the last frame of the Tween.


a) There's nothing simplier! Just select your background and Copy (Ctrl + C) and Paste (Ctrl + V) it until it's long enough. Bear in mind the wall should be identical (or at least very similar) all the time. Here is what I came up with:

b) Motion Tween it so that it seems a continuous loop.

Tip: If you're not familiar with Motion Tweening, please click on any of the hyperlinks to learn more about his animation technique.

In the above pictures, you can see a Wireframe of the wall inside the Wall_looping Symbol (or whatever you called it). The first picture shows the starting key frame of the Tween, the other—the end key frame.

In order to switch to the Wireframe mode, click on the square encircled red in the below picture:

 

Why did I switch to the Wireframe mode, anyway?

I switched to the Wireframe mode because I had to be able to see what is under the wall background. Otherwise, I wouldn't be able to place the two walls on the right spots. The part of the wall that is on the Canvas (the white rectangular area) is almost the same in both pictures.

The animation of the wall will, therefore, loop continuously thanks to the fact that the viewer sees to difference between the first and the last frame.

iv. Finally, we are going to edit the other looping Symbols (I've only got 2 of them myself: flower and lamp).

We can edit Symbols by double-clicking on them.

Once we're inside a Movieclip, we're going to create a Motion Tween there so that the objects move across the Stage as they are supposed to. We need to create a Motion Tween in each of the Symbols.

This is how your Timeline will look like once you're finished.



As for the tweens, if your fps (frame rate) is 30,  then the Motion Tween should be around 100-120 frames long. That's because we want the object to move across the stage for about 3-4 seconds before it disappears at the other side of Stage. We want the viewer to have a good look at them.

There's an important thing to remember while creating this effect: Make sure that all the objects move at a slightly different speed. Thanks to this the animation seems more three-dimensional and this is what we want.   

Alright, looks like we are done with this tutorial. Thanks for reading and I hope you enjoyed this it. Below you can download the source file.

Cheers!