Flash Flowers Spinning on Branches

Introduction

This here is a pretty cool effect and not a hard one to create, if you have a good designer that can provide the shapes it's great, but if you don't, fell free to use ours.

Download the zip file if you want the branches and the flower in different static swf files, so you can experiment different techniques. This here is our version of an effect done using only flowers and branches. If you have other ideas you can send us your work and we will be glad to post it on the website with your name on the bottom.

This effect is perfect for a header because first thing when you open the animation, the branches grow and the flowers fade in, then the flowers keep fading in and out in a loop. Press the "replay" button for a better examination of what is happening in the Clip.

The Effect

We will discuss everything that can be found inside the source file, so download and open it. Notice that we used the same structure as we always use in the main Timeline, three layers do all the job: the first one named "webarticles.org" (always ignore this layer because he is responsible of everything that's not related to the actual effect), the second named "the effect" with the animation and the second named "background", with the picture you see in the back.

In the Main Timeline there is only one frame in each layer so that means the animation takes place inside a Movie Clip. To open the Clip, click "the effect" layer, double click inside the small rectangle in the right of the stage. If you have troubles doing that, please verify if the layer is either locked or not visible because the rectangle will not appear in any of those cases.
 
 

Now that you are inside the Clip, press to see what we did in this stage: the big branch seems to grow from the right side of the stage, and also smaller branches appear in a similar way, but from the big one. We did that animation by placing each branch on a different layer. In our examples the branches are vectorial shapes built in the Flash environment so it was easy to use Tween Shape, to create a transition between a very small instance of the shape and a normal one, moving it a bit to the right, according with the motion of the entire ensemble. You can also make a branch grow by converting it into a Movie Clip and then, by using Tween Motion, you can change the it's properties.

So with a clever display of the branches, the first part of the effect it is done. Next we will discuss about the second part, a cool effect that loops over and over.

The trick is the way different instances of the flower are added. If you are in the same Clip, you may wonder where those flowers are. When you press the key the flowers don't appear because of a simple fact: they are inside a Movie Clip placed in the last frame, where we also placed a simple Action Script statement to stop the Movie Clip at the end of the Timeline ("stop();"). So when all the branches stopped growing, the flowers start fading and disappearing over and over again, because the Clip has a circular structure. But how can you build such a Clip?

First let's talk only about one flower. The flower grows, stays like this for a while, and then fades. So first you will need a flower shape.

This is what we came up with, a shape created in the Flash environment (for a lighter swf size). In order to do the growth and the spin, it is recommended to convert the flower into a Movie Clip. Inside the clip with the flowers, double click one of them. In the first frame we placed a very small instance of the flower, then in the frame 15 another instance but larger and a bit rotated. Between these frames we applied Tween Motion and the result was the rise of the flower. Next it remains the same until the frame 53 when it starts to fade. We did the fade in an unusual way, so we will also explain an alternative technique.

We named the clip simple:"a" and we used the following code on frame 53:

if( a._alpha >= 0 ) {
	a._alpha = a._alpha - 1;
	gotoAndPlay(52);
}
else play();

So we actually created a repetitive structure, much like a "while" statement because each time the animation gets to frame 53, we verify if the flower is not totally transparent. If that's true, we decrease its _alpha parameter (100= full colors,0=full transparency), if not (that means you can't see the flower anymore) we go to the next frame.

Another, more elegant way of working is with a code placed on the clip, that looks something like this:

onClipEvent( enterFrame ) {
	if( this._alpha > 0 )
		this._alpha--;
	else
		play();
}

Also remember that you have to stop the animation at the frame you want this to happen, so you will need to use a "stop();" statement on any layer. This code does the same thing, but this time the animation will not travel back and forward between the two frames.

The last part of this Clip has only blank frames until frame 93, so there is a slight delay between the beginning and the end of the small animation.

But you need to multiply this clip in order to obtain the final effect. And we did this easily only with a smart arrangement of the instances.

This is a technique we often use because it has the advantage of looking like a random multiplication, but it isn't, so we can control all the properties of the instances. We place the first instance on the first layer in the place we desire, the second on a layer above and starting after a few frames delay in another place and with another size, rotation value etc, and the next on the layer above the two and with the same delay.

We did this 36 times, that means we placed 36 flowers on the branches and we got to frame 175. The trick is to create instances until a frame that is bigger than the number of frames of each instance (that means that when we finish putting flowers in the stage, the first flowers placed, go into the second loop). This will ensure the impression of an infinite loop with random elements. Also you need a "stop();" statement in the last frame so all the flowers maintain position in space and time.

Hope you found this interesting!

Check the Bonus Effects for an extra feature.

One thing all we said won't work in just one case: For your girlfriend please use real flowers.