Animating Silhouettes

Home • Members Tutorials Forum iSnapChat Contact Us 


Flash Tutorials


Flash Tutorial - Animated Silhouettes

406 Animation
Flash Compatibility: Flash 8    (Works in all versions of Flash!!)

Written by: Phil Schulz

Length: 4300 words

Assumed Knowledge:Use of a digital stills photo camera and basic photo editing

Level: Easy



Access: Members Bonus tutorial. For the full version you must: LOG ON To become a Member: Click here


For Free Tutorials: See listings: Free Tutorials



This is very simple and effective animation technique. I love the silhouette effect and I have seen very effect use of silhouette animation. For example I have seen silhouette animation used to make a Flash preloader more interesting. It was a small loop of a woman hand-bagging this poor guy. You don't have to stick to animating people, I have seen silhouette animations done with cats and dogs.

It is not hard to create this type of silhouette animation but you will need patience as it takes a little time to do the drawing. You do not have to be very good at drawing - just patient. Roughly I estimate that I can draw about 3 to 4 seconds of animation in an hour! Depending on the complexity and quality that is required that could be considerably slower.

Example: Download the Flash file Ani 406a

An example of Silhouette Animation.

Here is the same animation which has been changed slightly to create a panning effect more like what you would see on film or TV.

Example: Download the Flash file Ani 406b

Film style panning.

It is also possible to remove the background so that there is only a Silhouette. The quality of the drawing (or lack of!!) is more noticeable when you remove the background. You can still see that she walks behind the tree and other foreground objects even though the image with these foreground objects has gone:

Example: Download the Flash file Ani 406c

Silhouette only.

Planning your Animation

Animation Timing: Frames Per Second

Any film of animation is created by a series of still frames. When run very fast you see what we would call a moving image or Movie. The speed that these images are displayed is referred to as: Frames Per Second (fps)

Broadcast Quality Film runs at: 24 fps

Internet Flash Movies runs at: 12 fps (usually)

The above animations run at varying speed of between 4 to 6 fps (wow that's slow!!)

This slow speed will give a jittery animation but will enable me to draw about 4 or 5 seconds of animation per hour! If I up the quality to 12 frames per second (12fps is more standard for the Internet) I will need twice as many drawing hours. If I wanted a really smooth broadcast quality animation I would then have to create an animation at 24 frames per second and well obviously that would take loads more drawing to achieve every second of animation. Thankfully not many of us Flash animators need to worry about that sort of quality!!

The moral of the story is that this sort of animation is time consuming and although creating a short animation maybe fun but steer well clear of the full length feature movie!

The other point to remember is to PLAN. You don't want to spend a considerable amount of time creating an animation only to find that it does not achieve what you want or the drawing is too difficult. This section of the tutorial is designed to bullet point and explain a few issues to consider. The most import issues are:

Drawing Complexity

At 12fps 60 seconds of animation is (60 x 12) 720 images!! So even if you are doing a job that is just one minute long the complexity of the drawing is important. When planning an animation remember that drawing a football is much easier that drawing a football and the two teams of players kicking the ball.

Moving Objects and their Interaction with the Background

In your animation you will have at least one object which moves. That is what you are going to animate in silhouette (such as a person). There is no reason why you cannot have two (or more) objects such as two people or a person and a ball. As long as all the moving objects are going to be animated in silhouette all is well. Here is an example of two silhouettes:

Example: Download the Flash file Ani 406d

Two Silhouettes: Jumper and trampoline mat.

Below the silhouettes are isolated from the photo:

Example: Download the Flash file Ani 406e

As above but without the Photographic background.

Now if you wanted to animate a person opening a door and the door is not a silhouette but part of the background photo then this creates a more complex scenario. You would not only need to animate the person but you would need several background photos with the door at various stages of openness. This increases the download time and makes the animation more complex.

Thus it is worth noting that if the animated object or person interacts with the background image, even in a minor way, the work becomes more complex and if additional Jpeg photos are required then the download size will probably be adversely effected.

Composition: Foreground, Background & Animation Edges

As our animated person moves through the environment they may go behind objects. In the example above the persons legs go behind the yellow edge of the trampoline. In our first example at the beginning of this tutorial the animated person comes into view from the left (off stage), comes into the centre, then moves to the right and in doing so goes behind some plants and other objects.

Animated person goes behind the tree and building.

This interaction with still object is not a problem but you should be aware of these issues and make conscious decisions about how the person and objects go in front and behind of each other. The more that the animation intertwines with objects the more careful you have to be in matching of the drawing and photos.

     Size Doesn't Matter !!        (Ha - who said that!!)

Well in this type of animation size does not matter. I am referring to the physical size of the animation as seen on the screen often measured in pixels. I am not referring to the download size and in fact the physical size on screen does not really make any difference to the download size of the Movie (as measure in KB).

The Camera

For the above animations I did not use a video camera but a digital stills camera. You could use a digital video camera but it is not but it is not necessary. Most digital photo cameras are quite capable of taking short video films. They tend to be low quality and you can't film for very long as the cameras memory card will soon fill up. Having said that they are cheap to buy - at least at the low quality end and for this technique high quality video is not essential.

Note: Higher quality video will give you a better quality image so that when it comes to drawing there is a clearer more well defined outline to copy. Having said that high quality video saps your computers resources. I used very low quality video to create the animations used as samples displayed here.

Filming & Setting Up

If you have a tripod it is better but not essential - you can just hold the camera still on a table or chair although this is not ideal. You will need two matching shots.

These two images, the still photo and the film, must be taken from exactly the same position - which is why it is better to use a tripod. Do not be tempted to move the camera in any way whilst filming. If you do so your background photo will not match the Movie.

Note: In the 'panning' sample (towards the beginning of this tutorial) the panning was achieved in Flash by moving the photo and silhouette around within Flash not by moving the camera. Thus the camera remained totally still whilst filming: See sample of panned animation

This is a members only bonus tutorial. For the full text you must: LOG ON

For Free Tutorials: See listings: Free Tutorials


56888 visitors to this page since

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.