Lesson 1.1 - Creating the new project

In this lesson we'll create a new sprite based screensaver project and take a look at the editor window.

Create the project

1. In the menu, choose File/New/New Screen Saver Project, a dialog box opens. Select the "Sprite Based Screen Saver" type in the list and click Next. A second dialog box opens:

2. Specify the Screensaver Title: "Tutorial1". Also specify your own Description, Author Name, Copyright () information and click Next.

 REMARK: Click on the context help button () to get more information on a specific area in the dialog box.

A quick tour of the screensaver project editor window

3. A new project window opens:

4. In the Application window () you see the menu and the main toolbar. This toolbar can be customized by double-clicking or right-clicking on it. When you select a command in this menu or main toolbar, it acts on the selected item or window.

5. In the Librarian () you can select the folder that contains the media files (images, animations, music, sounds) that you'll use in your project ().

6. The Project document window is named "Tutorial1" (). The application is multi-document enabled. It means that you can create or open several documents in the working area of the application. A local toolbar is located in the document window. If you click on a button in this toolbar (), it acts on the selected item in the document window. This toolbar cannot be customized.

7. The Document window is divided in two parts. On the left side (), you see the list of sprites included in the project (actually no sprite) as well as a Background properties element. Sprites you'll add in the project will be added in this list. Each sprite is placed in an invisible layer so that sprites on top of the list overlap sprites that are placed below. Sprite order can be rearranged by drag & drop (in the list) but the background element is always placed at the bottom.

8. On the right side (), you see the editor area.  Actually you see the default background (it can be customized). Also, this area is WYSIWYG enabled. It means "What You See Is What You Get". Each sprite is visible and moves in this area the same way it will move in the final screensaver. But that's not all. You can also modify the sprites in this area using your mouse. It is a real editor window, not only a preview window.

 IMPORTANT: This editor window as well as all values used in the project (coordinates, speeds) are based on the following visible dimensions: 640x480: [0,0] in the upper-left corner and [639,479] in the lower-right corner.

9. At the bottom of the main window, you see some important informations about the project (mouse coordinates, sprite size...).

Lesson 2 - Defining the background