Multiple Animations in One File

You know, I think this is a first for me. I actually think I'm writing a tutorial about something I've never done, something I've never tried to attempt, something I think should work in theory, but have never tried out for myself.
Yes, you read that right. I've never actually done what I'm about to show you. As I take you through the process step-by-step, I'm teaching myself in the process. Kind of weird, huh? Your confidence in my infinite knowledge and wisdom has just been shattered into about a gazillion little pieces. Hahahaha. Like you had any in the first place. ;)
But seriously, I've never done this before. So this tutorial will progress in fits and starts, with a lot of little "whoops, I made a boo-boo!" and a severe lack of screencaps to serve as a visual instructor. Because it wasn't really that hard to do, just...tricky. And complicated.
So if you've never made an animated avatar, please, for the love of all that is good and holy, PLEASE familiar yourself with the process in a simplified manner before attempting this. I.e. DO NOT try this as your first animated avatar. It will only lead to destruction and ruin, I guarantee.

Now that we have that cheerful subject out of the way, let's get animating!


First, you need to figure out what clip you're going to use, and what bits you're going to split up into separate animations. I chose the Pevensie's coronation from LWW, and I decided to take each individual kid being crowned and have four little animations all playing at once.

Once you've got the clip you want, open it up in ImageReady, separate the different clips into different files, if they aren't already, and then do all your pre-editing. This takes a bit more concentration than you normally use because when you're working with multiple animations, size (animation size and layer count) is important, because if we make them too big then they'll make this file absolutely enormous, which is of no use to anybody.

It is absolutely imperative that all of your clips have the exact same layer count. That means that if Clip #1 has 35 layers (which equals 35 frames), then Clip #2, #3 and 4# all must have 35 layers as well. If your clips are not equal, you're going to end up with shorter animations being static while longer animations run. It's not possible to "bounce back" and have a shorter animation restart at frame one while a longer animation still runs because while it LOOKS like we've got four different clips running independently, they're actually together, and well, you just can't do that. It's technically impossible. So your clips must be of EQUAL length; no more, no less.

Here's my clips after they've been cropped and trimmed, all lined up in a row, with my background below.

Now you've got to take those individual clips and put them into one file. How are you going to do that without creating a huge, confusing mess? By being smart and careful, I say.

First, go to your animation clip and stick all of the layers in a folder. Don't know what that is? It looks like this:

It acts just like a folder on your computer...you can put stuff in it and it will help keep it organized. Be sure to name your folder something that will identify that particular clip (i.e. I named Peter's clip "Peter", Susan's clip "Susan", and etc.). Then pick up the entire folder, and drag it over to your background file, which now becomes your animated avatar file. Repeat this process with all of the other clips.

Here's what it will look like when you're done.

Notice that I stuck all of my background files into a folder as well, so things are even more organized. Trust me on this...the more organized you are, the easier this will be.

Now we've got all of our clips into one file, it's time to animate! If you don't know how to animate already (but then, that leaves to beg the question, what on earth are you doing here...), head over to the Animating tutorial to figure that out.

For this particular tutorial, you're going to want to keep the following in mind. A LAYER is what composes an edited image; it can be a border, a brush, an image itself, or anything you can image. A FRAME is what you see when all of the layers are put together. There could be a million different layers affecting the frame, but you're only going to see ONE complete image. For an animation, the file will cycle through different FRAMES composed of different LAYERS.
What we're going to have is your set number of frames that matches the number of layers in each clip (in this case, 40), but instead of only having to "eye" one layer of a clip per frame, we're going to do "eye" four. Now, you' don't have to do each frame individually; you can do it by clip. What I did was start with my first clip, Peter, animate that, and then jump back to Frame 1 and start over with Susan. Keep doing that until you've animated all of your frames.

See how I've got four layers on each frame? It's really not hard, just tricky because you're working with such a large amount of layers. 40 layers X 4 clips = 120 layers (but 4 layers playing at a time, so we end up with 40 frames), so you've got to be careful that you don't start mixing things up. That's where folders REALLY come in handy.

Here's the raw avatar after I've animated the clips. See how it works? Not terribly complicated at all.

Now that you've got the basic animating done, you can go ahead and get all fancy with text, borders, fading and etc.

Here's what my avatar looked like after I added effects. Notice that I moved the animations around so that Mr. Tumnus' hands are kind of in a flowing order, from left to right, top to bottom. Minor change, but I thought it looked better that way. Notice how I added a new Foreground folder specifically for the effects, and how some are clip-specific and others effect the entire avatar. If that's all Greek to you, head over to the Effects tutorial for all those fun tidbits.

And here's the finished avatar! Tada! Notice the "flowing" pattern that I was talking about earlier. Uncanny how perfectly synced it ended up, even though I totally did not plan it that way.

Now, obviously this is a pretty poor example of how you can utilize this particular effect in ImageReady. Your clips don't have to all run at the same time; you could have them all run individually, or with more effects, or whatever.

Since this has been a learning process for me as well, here's a couple of things that I noted during the making of this tutorial that might be helpful to you.

  • I think I could have been a little more free with the clip size and frame length. I think all things considered, it could have been a bit larger without ballooning the file size.
  • If I had been careful, I could have synced up the clips much better, which would have improved the appearance quite a lot, but yeah, what can you do.
  • I cannot stress how important is to be so, so, so careful when editing an animation. When switching over from ImageReady to Photoshop and back again, it is so imperative that you've got the first frame and background selected before moving over. Otherwise, you run the risk of completely messing up the animation. I got a little careless towards the end of the making of this avatar and I somehow messed up a bunch of random layers in each clip. It took me, and I kid you not, at least a half an hour to fix it. If you have any sense about you, please, please, be careful, for pities sake!

Well, that's pretty much it. I hope this tutorial was useful to you and that you can actually use it for something practical, and not a little piece of junk that you see displayed above. Not my best animated avatar, by far. But anyway. Ya can't win 'em all!

Disclaimer: This is a fan site, and is in no way officially affilated with Disney, 20th Century Fox, Walden Media or any other company. All copyrights are held by their original owners, including but not limited to Disney, 20th Century Fox, Walden Media, Harper Collins, and C.S. Lewis Ltd.
Website design and original content © Spareoom.net, 2005-2012
Contact Me - Other Credits