Kissing Girls

Introduction

As you can see in the clip, this effect is a girl who gives you a kiss. So how have we animated a picture (a static object) into something so smooth? Follow carefully the indications and tricks, explained step by step, and you will be able to apply this effect to your own needs.

Before explaining the main trick, you need to now to do two things. The first one is how to choose the picture. You have to look for a clear picture with a nice looking girls (of course if you don't prefer ugly chicks), great lips, nice skin, and most importantly the color of the skin has to be almost the same all around the lips. You will better understand this after you read the entire page.

The second thing you need to know before we can start is how to select only a specific area from a picture. There is couple of tools in flash with whom you can make selections but I will explain my way of working:

Tip: we recommend you use a picture with the same size as the stage so it's coordinates will be 0,0

The Effect

Please download the source file and follow these indications in order to understand the main principles.

In the Main Timeline you will discover three layers. As we always say, ignore the first layer and get to the next two. You can see the "Background" layer with the picture and the layer "Kiss" with the actual effect which we will discuss next.

The first step is selecting the area we need for the actual effect, the area around the lips of the girl. Delete the rest of the picture and add in the same place a new instance of it, on the next layer. That technique explains the arrangement of layers in the main Timeline.

Next we will speak about the Movie Clip with the effect on the layer "Kiss". Remember that on the last step we selected only the area with the lips. In the source file, double click this Movie Clip to reveal its content. On the first layer, if you build this by yourselves you will have to convert the selected area into a Movie Clip, if you follow the source file, you will find that we did the moving of the lips there. But if the lips move, that means we need extra skin near the mouth. And we did that by selecting parts of the actual picture and multiplying them (smaller versions) to create a pattern.

In the picture, in the left we have all the Movie Clip (the three layers) and in the right we only have the layers with the "fake skin". You can easily see how we covered the area we needed, area which will be visible when the girl gives us a kiss.

Now we need to do another thing, we need to separate the teeth from the lips because the teeth don't move. So we select them and in the new Movie Clip we crated above, we place them on the second layer (the first has the lips). So the teeth will be covered by the lips when the lips shrink and move to create the effect.

And finally, in the source file double click the clip with the lips to see how the kiss was created. Remember that so far we took all the safety measures so the kiss doesn't transform into an anomaly (girl with four lips, or teeth over the lips).

So what the trick? Simple. Divide the remaining area in two parts, one part with each lip. Use the Tween Motion technique to move and shrink the lips to create the kiss. And one last trick, the pips have to touch perfectly so if you have spaces between the lips, cover them with the red brush (similar with the area near by). Use this trick on a new layer above the lips, but only when the movie is static.

That's all you need to know about how the girls kiss? at least in Flash :-)