Getting Started With The Expansion Animation Library


BACK TO README.htm

What you'll need


Setting up the files

When you want to start an interactive expansion animation, you will first have to create a Flash file. You should already know how to do this by now. This tutorial is limited to my library only.

When you create your project, you normally end up with two files: On labeled *.fla and the other *swf. In the same folder as those two files, you should create a new folder, named "expansion". You should put all of the *.as files into that folder.

Just in case you didn't understand exactly how to place the files, here is a diagram indicating the structure your file system should have after you're done copying all the files.

+[Your work folder][FOLDER]
|
+--+-->YourProject.fla(Project file)
   |
   +-->YourProject.swf(Browser file)
   |
   +--+[expansion][FOLDER]
      |
      +-->Expansion.as
      |
      +-->Expression.as
      |
      +-->ExpansionEvent.as
      |
      +-->Speech.as

Adding the library to your new project

Once you have the files placed in the right folder, you should be able to open the first frame of your Flash timeline and type in this line of code at the very top:

import expansion.*;

Remember, to write code into the first frame of the main timeline, you have to click on this rectangle and press F9 to open the Actions panel

And that's all you need to do to set up the project. Next is learning how to use the library.


Setting up the environment

You can't just program the entire animation with code. The picture you draw needs to have a certain format. So, to start, you need to set up the contents of the stage to work with the Expansion class


Dividing the character into MovieClips

In order to make the an interactive expansion animation, your character will have to be divided into parts. Some of the parts will be expandable and others won't. Each part will have to be drawn separately and converted into a MovieClip.

A MovieClip is Flash's basic animated object. To convert anything into a MovieClip, select it and press F8. A dialog box will appear, asking you to give it a name and a type, among other things. Choose the "MovieClip" type.

You're not done yet. Now select the newly created MovieClip object and find the Properties panel. Give your MovieClip a name. You may think it already had a name when you converted it into a MovieClip, but that's because you're confusing two different things.

When you converted the picture into a MovieClip, you created a Symbol. A symbol is something that represents the picture you just drew. But the object you have right now is an Instance of the symbol. The instance is the object you're going to work with. There can be many instances of the same symbol on the stage at the same time


How to divide the character

The reason you want to divide the character into parts is so that each part can move without being affected by how the rest of the character moves. Most importantly, you'll want to make sure a character's belly (and breasts for females) is a separate part from the rest, so it can expand on its own.

Here's one way you can divide a female, anthropomorphic animal character: Body, tail, belly, breast1, breast2, arm1, arm2, leg1, leg2, eye1, eye2, mouth.

Remember to convert each of these parts into MovieClip and give each of the instances an easy to remember name.


Animating

We're almost done setting up the environment. Now you're missing to animate each of the pieces. If you don't know how to do that, you can double click on any of the pieces you made. On the top of the screen you'll see a timeline.

The timeline represents frames of an animation. You can press F6 to create new key frames, and you can have Flash automatically fill in frames between the key frames by clicking on a frame and selecting "Shape tween" in the properties panel.

There's a lot to learn about animating in Flash, so you'll have to learn it on your own. If you want something easy, I recommend just animating the belly MovieClip and ignoring the rest for now. Make the belly smallest in the first frame and biggest in the last frame. Then use a shape tween to connect the two.


Using the Expansion class
BACK TO README.htm

© 2014 Doom the wolf. http://doom-the-wolf.deviantart.com