Blue Screen Of Life - Tutorial

This tutorial will give you a quick start with the program. It lets you become acquainted with the different buttons, options, and views by taking you step by step through the process of creating a small animation. You can use your own material, but this tutorial will refer to the example animation, called "The Knight on the Indian Horse". If you use your own animation, a tool like VideoMach can convert it into a sequence of .jpg or .bmp files, the format that is recognised by the program.

Before you start, make sure you have downloaded the tutorial animation ('tutorial.zip' on the website), and unzipped the images somewhere. And of course, that you have installed the program.

Step 1. Starting and setting up.

Let's waste no more words, and start working! Double-click the icon labeled 'bsol', and the program will launch. This is what you will see on screen:
There's a small text explaining the purpose of this window, 4 buttons (2 are inactive, these will turn up later), and 5 settings, which are fairly obvious. For our animation, we will make the following changes: Don't worry if you make an error, because all these can be changed later on. Check out [step 10] for this.

Step 2. Getting around in the program

When you are done making your changes, press the "I'm ready, let's start!" button. The previous window will disappear, and after some time the main program window will launch, which should look like this:

This is the window you will keep looking at until you are done. There are some remarkable things:

Learning to use the program is not more than learning how to use these buttons. Let's load our film now.

Step 3. Loading the film

Click on the yellow folder, which is the left button in the 'Option Tools' section. The 'File lists' window will pop up. It looks like this:

The same set of buttons and boxes is shown twice: once for the foreground animation and once for the background animation. First we'll add the foreground animation. One by one, the files will be added to the list, in alphabetical order. We will make some changes to this list: Now we'll add the background. Click the downmost 'Add...' button. Select the files 'bsol_bak0.jpg' through 'bsol_bak8.jpg', and click 'Open'. This animation is shorter than the previous one. To make it last longer, we will decrease the frame rate. Set the number after the downmost 'fps' to 5. NOTE: this feature does not yet function as well as the author would like it to.

We're done with this window for now. Click 'Continue', and you'll return to the main window. The first frame of the foreground appears. Let's check out if the files loaded correctly.

Step 4. Navigating through the frames

Click a few times on the buttons that were called 'Navigation tools' in step 2. When you move your mouse over them, a small text will explain what they do. Notice how the number next to them, and the bar at the bottom, move along. Try dragging the indicator at the bar. You'll notice that this makes navigation much faster.

Click on the word 'Foreground'. A drop-down list will appear. Select 'Background' from it. Instead of the knight in front of the red screen, you'll see a white screen. That's because the view option is set to 'Screen mask'. Click on the small arrow next to the first button, the one with the yellow smiling face in front of a white rectangle. Select the first option, 'Source image', from the list that appears. At the moment it is enough to know that this will display the image as you loaded it from disk. Now you see the fierce dragon, who appears to be asleep at the moment. Navigate through the frames again. Notice that you have to click 'next' three times before he moves (after the first eight frames, which are the same, because of a small error in the frame calculation). That's because his framerate is lower than the framerate you set for the project, in the very first window. Now that we've seen the source files, we'll start making changes.

Step 5. Moving frame 14.

WARNING: The mover tool contains a few nasty bugs at the moment, which cause it to behave quite unpredictably. It is recommended that you don't use it (yet). It might destroy all your previously created screens. It should be ok if you follow the procedure in this step exactly, and before any of the steps discussed below.

Switch back to the foreground, by clicking the drop-down list and selecting 'foreground' from it. Navigate to frame 14. You'll see that, by some strange chance, this image was moved slightly upwards when the author created it. We are going to correct this.

Click on the rightmost button, displaying a hand. You will see that the button stays down, and that a new window will pop up, which looks like this:

You've just activated the 'Mover' tool. This tool allows you to position your foreground and background relative to each other. We are going to use it to put our poor knight down on the ground. Make sure that, in the 'Tools' window, the drop-down menu under 'default behaviour for off-screen areas' is set to 'masked'. Move your mouse somewhere over the knight, press and hold down your left mouse button and move the mouse down. Notice that the knight will move down as well. Continue until the green line has just disappeared, and then let go of your button. If you are satisfied with the result, click the 'Apply' button in the Tools Window to make this permanent, or click the 'Discard' button to move the knight back to his old position.

Step 6. Understanding different views.

With this moving, you have just created the first part of your screen: the area of the image that will be replaced by the background colour later. The top of the image, which was not on in view before we moved, is now part of the screen. Now is a good time to explain the different views you can have of a frame. We'll start with the drop-down list. It has 3 options:

Next we will examine the 'Display mode' button: the button with the small arrow next to it. There are four different options for it, but it only works if in the drop-down menu on the left Foreground or Background have been selected. Now you should try out all eight combinations, and what the screen looks like. The background shows the effects more clearly than the foreground at this point. If you don't understand exactly what happens, just continue with this tutorial and return to this section after you've created more of the screen.

Step 7. Creating areas to be screened.

We're ready for doing what the program was designed for originally: defining the screen. For this purpose, we select the 'Screen Selector' tool, found in the 'Editing tools' section. After clicking this, you will see that the Tools Window changes as well. Now it looks like this:

Before we start, we will change the background colour. The animation is quite bright, so the areas that are and are not masked will be shown much better by a black colour. So, at the bottom of the tool window, change the values for red, green and blue to 0, and click the 'Apply' buttom next to them. You will see that, in the main window, the area around the image will become black.

Navigate back to the first frame, select 'Foreground' with 'Screen mask' as display mode. Now move your mouse over the image, so that it looks like a cross. Hold down the mouse button, and move the mouse. You'll see that a rectangle is drawn over the area. Release the mouse. Now the program performs its great trick: it calculates the average colour within the rectangle! It makes an interval around this, en every pixel that has its colour within this interval will be included in the screen. Click the preview button to see what happens. It will probably look like this:

A large part of the screen is already recognised, but some of the pixels have colours whose values differ more than 15 from the average. The Tool Window is the place where we can fix this. Look at the value after Default interval. It is set to 15. This means that every value that's 15 less than lower than the average, and not more than 15 higher than the average, will be accepted. In this case, 15 is too low a value. Make it higher, and click the Preview button, until the image is all black. For me, a value of 38 was enough, but this may fluctuate, depending on the size of the rectangle you selected.
When it has all disappeared, we are going to make these changes permanent. But before we do so, we will indicate that our changes will be global. This is done by pressing, in the main window, the leftmost button in the "Editing Tools" section, the one with the white rectangle. After pressing it, it will change into a stack of white rectangles. The meaning of this is:
Local: changes apply to this frame only.
Global: changes apply to all frames.
Once it is set to global, you go back to the Tool Window and click the Apply button. Now the program starts to calculate for every frame what parts will be included in the screen, and what parts won't. You will know that it's done when the progress bar in the lower right has filled up.

After this, you should navigate through the frames to see what happened. To your disappointment you will notice that the result in most of the frames doesn't look good. Why is that? First of all, the frame you've just used to create your screen, comes from the back, and therefore towards the end the result will be better. Furthermore, lighting has changed during the shooting, and finally the webcam that was used delivers horrible quality. You will also notice that some parts of the horse have been screened, and show up black. This is no real problem, because the important parts of the screen are the edges, the rest can be refined by hand without much trouble.

Step 8. Adding to the screen

We will try to amend the aforementioned problems. Move to frame 13. This frame has shadow, as well as something of the general colour in the picture. Perform the following steps: Now we will concentrate on the more essential part of the screen: the shadow around the horse, and the edges where horse and knight meet the screen. Now it's time to look at the result. Select Result as display mode and navigate through the frames. Around the edges, things look ok now. We're ready for the last editing step.

Step 9. Manual screen creation

In this step we are going to do something about the parts of the horse that have disappeared, and we're going to erase the last few specks of screen that hang around here and there.

In the Editing tools section:


Change Pen Size to 15, select Erase screen in the drop-down menu, and select Screen Mask as display mode in the main window. Move the mouse over one of the black spots on the horse, and click the mouse. When you release the mouse button, you'll notice that a circle around your mouse has changed back from black to "horse". Repeat this a few times, until the entire horse is filled up again. You can hold down the mouse button and move over the horse. You will see a line of black dots appear behind your mouse, that will be replaced with the original horse colours when the mouse button is released. You don't have to aim very precisely, just make sure you don't move beyond the outlines of the horse.

When you are done, press the Apply button. Only then, the changes you made will be added to the real screen. If you make a mistake, pressing the Discard button will destroy your changes, and return to the last time you pressed an "Apply" button.
Repeat this process with every frame (note: by wisely choosing the screen colour you usually don't have to perform this step).

Now the specks. Select Draw Screen from the drop-down list in the Tool Window. Make sure you do it after you applied your last changes. Now draw circles over the specks in every frame, and you'll see them disappear as soon as you let go of the mouse. Proceed until you are done with every frame. After this, we're done.

You may have noticed that, if you move to another frame before pressing the Apply button, a dialog will pop up asking about whether or not to apply your changes. Pressing Yes will apply them, No will discard them and Cancel causes the frame not to be changed.

Step 10. Outputting the result.

Press the rightmost button from the Option Tools, showing a film strip. A window will pop up that's very similar to the window you saw when you started the program. Here you can change the options you selected when you started. WARNING: most changes in here will cause your screens to be recreated, i.e. you can start over again.. The only safe things to do are increasing the number of frames, and changing the filename for the output files. Right now, we're keeping the settings, but we'll press the downmost button, Produce Frames. NOTE: if this button is disabled the first time, close this window and reopen it.

On your harddisk you can now find a list of .jpg files that show the animation you just created. Well done, you're ready to start using Blue Screen Of Life! After checking if the files are there and look ok, press the cross in the upper right corner of the main window to exit the program. Press Ok, and it's done.

Good luck!

Comments, questions and additions to this tutorial can be e-mailed to the Author.

Back to index


Copyright 2002. You are free to further distribute this program, provided that you keep it complete, so with the documentation included, and unchanged. If you like it, please send the author an e-mail, so that he will have an indication of the number of users, and get the energy to continue, and improve his work.