Lots of Flash Butterflies

Introduction

As you can see in the animation above, we created lots of small butterflies that fill the background image. The main idea of this example is learning how you can create (with a pretty butterfly, drawn in flash, not the greatest in the world) a great visual impression without many designer skills. Follow our indications and you will be able to apply the techniques to other similar jobs, just read carefully.

The Effect

Download the source file and follow our next indications. If you are the first time on our website, you will notice that we use a certain structure in the main timeline. We apply this arrangement to all our animations: the first layer does not matter (that's responsible for doing everything but the effect), the last layer is the background (we chose a nice picture but we didn't figure out if that's a rat or a rabbit, you're free to guess, hope it does not scare the butterflies), and the one on the middle named "the effect" which has a Movie Clip with the actual animation.

Hide or block the first layer, click on the middle layer, and double click the square inside the stage, to enter the Clip with the butterflies. We have four things to explain: how to design the butterfly, how to move its wings, how to move it to create the impression of flying and how to fill the stage with them. In the source file, these things are visible in the oposite direction that you can access them, so in order to explain the first thing (the design), double-click twice on any butterfly to reveal the Movie Clip where we designed its shape.

First thing we need to figure out is how to divide the butterfly. Well our best approach was to create each wing on a different layer, and the body also on a separate one. About the shape, the only thing we can say is, use your imagination and you should create a better one then ours. Please note that on each layer in this Movie Clip, we initiallyhad the shapes you see in the picture: the two wings and the body, each one in a different Clip. The order of the elements is: wing, body, and wing.

On each layer we used Tween Motion to create the impression that the butterfly is flying. For the wings, we used the "Free Transform" tool from the right-click menu, to squeeze them on the vertical. We also made a little change on the body's position.

Now you will learn how to make this motion repeat over and over smoothly. From frame 1 to 4, on each layer we have all the elements moving in one way. To create a loop, you have to copy frame one into frame eight (because you must have the same distance between frames). But now there will be two instances of the same frame, so you will have to delete one: insert a new keyframe in frame 7 and delete frame 8 (remember you have to do this for all three layers). This technique always insures perfect loops, whenever we have a simple Tween Motion.

Until now we explained how to create a simple butterfly that moves its wings. But stays in the same place . So how can we do that? We actually have many answers to this question but here are the most common ways which fit our necessity.

Remember what we discussed earlier? The Movie Clip with the butterfly? Well we need to move that so the easiest way is to use Tween Motion (our example uses this method). We created multiple frames, with the butterfly positioned higher and higher from frame to frame but also a bit left or right. Between these frames we right-clicked and chose Tween Motion. Of course this workaround is the most unprofessional of all. We aren't explaining now how to create the perfect animation, but rather how to think you're effects.

Another way of moving the Movie Clip is to use a Guide Layer. If you aren't familiar with this term, remember: the Guide Layer is a special type of layer which can be obtained from a normal layer, by selecting it in the Properties Panel which can be opened by right clicking the name of the layer and choosing the last option; everything that you put on this layer will not be visible in the final Clip because it's role is to help you organize the work on stage; one of the most common things Guide Layers are used is to set a path which a Movie Clip can follow when it is involved in a motion. So the idea is to draw the path on a Guide Layer, then to put the butterfly on a new Guided Layer (to do that: be sure this layer is the next after the Guide Layer and change its type into Guided, if Flash didn't took care of that) . You can draw the path even with a thin brush tool but make sure that resembles to a continuous line because you will put, in the first frame, the butterfly at one end, and in the last frame, at the other end. All you need to do now is to create a Tween Motion between these frames and to select "Orient to Path" in the frame's Properties Panel. Check out an implementation.

So far we have one sweet butterfly passing through the stage over and over. But to create a random impression (without conceiving one), we have to know how to arrange different instances of the butterfly. We explained couple of times on our sites this technique, so this is a short version of what we just said regarding effects that do use it. The idea is simple. Give multiple instances different starting point and let them loop over and over. Do this by using multiple layers for the arrangement. For example place couple instances on the first frame, then couple in the fifth and so one, and add a "stop()" statement in the last frame. The conclusion is that by using same instance but with different properties, placement and starting point, you will get something like this. Check the Related Sites on the upper toolbar to see this technique in action in other effects.

That's about all we can say about these sweet butterflies.

Also check Bonus Effects for another two butterfly effects.