Home  >  Tutorials  >  Plugins & Filters  >
Screensaver (5), Part 1: Axialis
E-mail this tutorial to a friend Email to a Friend

Screensaver (5), Part 1: Axialis

Created by: ZuAtHome
(modified by Robert Behrens [the Prof])

 

The first part of this tutorial explores the Axialis Screen Saver program. The second part explores the Active Media Eclipse Screen Saver program.

Axialis is a shareware program, Active Media Eclipse Personal Edition is a free program (of course they also have a Developer Edition and a Professional Edition for evaluation and then purchase if so desired).

Each program has different features able to create exceptionally nice looking animated screen savers. However, each program creates very different types of screen savers:

Axialis is a very powerful program with many different features and is indeed a professional screen saver program. It requires a lot of time to learn all the features. In this tutorial we will just create a basic screen saver that is quite startling, using our four images created earlier (space screensaver tutorial series 1-4). The basic steps are quite easy to master and the outcome is most unique.

Active Media Eclipse has a number of presets for screen savers. One only needs to add the images. Thus, it is a very easy screen saver program to use. One does not have as much control over animating the images as with Axialis. However, the possible screen savers are almost unlimited within the various types due to the various settings and values one does have control over.

Each screen saver program has its advantages and disadvantages. This two-part tutorial is designed to introduce people to using either program (or both) to produce screen savers of images they created.

 

Download the attachments for this tutorial  Download Files

For our screen saver, we will use the images you have created with the first four parts of our space screensaver tutorial series:
(1) Planets (PSP 5/6 || PSP 7),
(2) Rings (PSP 5/6 || PSP 7),
(3) Galaxies (PSP 5/6 || PSP 7), and
(4) Comets (PSP 5/6 || PSP 7),
and put them into a space screensaver. If you haven't worked through these tutorials (and don't want to) you can download some of the images with the file on the left.

 

Making a Screensaver: Overview

Here's what we will do in this tutorial:

  • Use the Axialis Professional Screen Saver Program
  • Use the images created in the space tutorial series
  • Set the background using the starry night image
  • Insert images (sprites)
  • Set position, motion, animation, transparency
  • Save the project
  • Create the screen saver
 
 

Start and Preparation of Axialis

Open the Axialis Screen Saver program.
Close the first splash screen (click on the 'X' button).
Close the second splash screen (click on the 'X' button).

There may be one or two windows when you open the program:

If one window, you will see an Explorer which is just like your Windows Explorer for navigating the hard drive and finding files. We will not use this program. Just close it by clicking on the 'X' button in the upper right of the window.

 

If two windows, to the left of the Explorer window will be the Librarian window. The Librarian allows you to store and organize your projects, as well as contains some samples.

If you do not see the Librarian window, click on the "Librarian" icon.

 

We will now create a new folder for your space screensaver:

Highlight the folder "Screen Savers" (explore the samples later),
right-click and select "New Folder" from the pop-up menu.
Label the folder "My Projects".

You can now close the Librarian window (click on the 'X' button).

We now have a blue-stripped desktop for our project.

 




Step 1: Creating a New Project

Click on the "New" icon to start a new project.

In the 'Create a New Screen Saver Project' dialog window, select the "Sprite Based Screen Saver" or just click on the "Next" button.

In the "Screen Saver Information" dialog window, enter the basic information on your new project (your choice):

  • Screen Saver:
    • Title = (e.g.) PSP_Space-Screensaver
    • Description = (e.g.) Using the Space Images from PSP Tutorials
  • Author:
    • Name = Your name
    • Copyright = Your choice to use or not
 



Step 2: Save Your Project

Click on the "Save" icon or go to File || Save (Ctrl+S). You should get a browser window with the project name and ".ssp" as the extension. Make sure you highlight the "My Projects" folder. Then save to that folder so that your project can be loaded in a new session.

Once you have saved your project for the first time, any subsequent saves will update that file without any windows popping up.

 


Step 3: Creating a Background

Click on the "Next" button.

The default "Gradiend Background" is displayed.

 





Note

Basic Steps: The Project Menu

The Project menu allows one to select various actions or tasks. The Project menu for the background is slightly different from the one for sprites (= images inserted that overlay on the background image).

To activate the Project menu, either right-click on an open space in the background, right-click on the thumbnail of an image, or right-click on a sprite.

To modify an image, activate the Project menu and select "Properties" from the Project menu.

Note: Each image in this program is similar to layer in a PSP image.

 

Step 4: Modifying the Background

We want to use our own "Starry Night" background image. So, let's do that now using the Project menu for the background image and change its properties:

Activate the Project menu (right-click on the background or in the thumbnail of the background image) and select "Properties".

In the "Project Properties" dialog window, select the "Background" tab, select "Image Wallpaper", click on the "Browse" button (with three dots), scroll to your directory for the "/tutorial/html/tutfilters/starynight.jpg" image, highlight it and click on OK. Then select "Tile".

Note: You can use these file formats: .gif, .jpg, and .png.

 

Basic Steps: Inserting Images and Setting Their Values

(For the following description of the basic steps for inserting images, I'll insert the Planet image.)

The basic steps for each image used are very much the same. You will have a number of choices on how you want the image to be presented in the sreen saver: (Static, In Motion, Animation, Using Sound, and Setting Transparency).

These images are called "Sprites", and when you set up a sprite, it has its own Properties window for setting the different values wanted.

Later, experiment with different values. This tutorial will just present some very basic values for static images and images in motion, plus how to use the Animation tab for the Comets image.

 

Inserting an Image

Either activate the Project menu (right-click on the background, on an image or on the thumbnail of an image) and select "New Sprite" from the Project menu, or click on the "New Sprite" icon.

In the "Browse" dialog window, select the folder and the image (Planet.gif), and click on "Open".

 



Positioning an Image

If the selection box is not showing around the image, click on it or on its thumbnail. Put your cursor on the image to get a double-crossed arrow.

Hold the mouse button down and drag the image to where you want to position it (your choice).

You can also activate the Project menu and select "Properties"; then, in the "Sprite Properties" dialog window, select the "Size & Position" tab and set the "Absolute Position Values" of X (horizontal) and Y (vertical).

 



Sizing an Image

Put your cursor on one of the selection handles (it changes to a double-arrow).

Hold the mouse button down and drag in or out to reduce or increase image size.

You can also activate the Project menu and select "Properties"; then, in the "Sprite Properties" dialog window, select the "Size & Position" tab and set the "Scale" values of width and height.

 

Setting an Image into Motion

In the "Sprite Properties" dialog window, select the "Motion" tab and set the values for Type, Motion Links, and Speed:

Type settings:  
Static:  image remains stationary
Straight Line:  image will move in a straight line based upon the "Motion Links" and the "Speed" settings
Bouncing on Bottom of Screen:  image will bounce on the bottom of the screen depending on the "Motion Links" and the "Speed" settings

Motion Links settings:  
Pass Over and Over:  image will move over and over as determined by the "Type" and "Speed" settings
Pass Randomly:  image will remain stationary until a given time and then move as determined by the "Type" and "Speed" settings
Bouncing on Edges:  image will bounce on the edges of the screen depending on the "Type" and "Speed" settings

Speed settings:  
For the image to move, either or both the Horizontal/Vertical settings must be set to other than zero (0) which is static or no motion.
A Horizontal Positive value:  moves image to the right
A Horizontal Negative value:  moves image to the left
A Vertical Positive value:  move image down
A Vertical Negative value:  moves image up
 

Setting an Image's Transparency

Note: Transparency allows one to use any file type and then set it to a transparent image by setting the value for which color is to be transparent, usually a background color of the image.

In the "Sprite Properties" dialog window, select "Transparency". To use this setting, check "Using a Transparent Color".

Put the mouse cursor on the color in the displayed image, or set the R/G/B values directly. Set "Tolerance" to 1% and "Overall Opacity" to 100% (default).

 

Previewing and Saving the Settings

Set the selected settings by clicking on the OK button.

To preview the motion, activate the Project menu (right-click on the image or on a thumbnail) and select "Play Screen Saver". Select "Stop" to stop the motion.

Save your project by clicking on the "Save" icon.

 




Step 5: Inserting the Space Images and Setting Values

  1. Insert "/tutorial/html/tutfilters/planet.gif":
    Right-click on an open area of the background for the Project menu and select "New Sprite", or click on the "New Sprite" icon, and then browse and select the image. Open the "Sprite Properties" dialog window (right-click on the image or its thumbnail and select "Properties") and set the following:
  • Size & Position tab:
    – Absolute Position: X = 75, Y = 75
    – Scale: Width = 75, Height = 75
  • Motion tab:
    – Type = Straight Line
    – Motion Links = Pass over and over
    – Speed: Horizontal = 1, Vertical = 1
  • Transparency tab:
    – Transparent Color: All (RGB) = 0
    – Tolerance = 1
    – Overall Opacity = 100%
  • Click on OK.
 



  1. Insert "/tutorial/html/tutfilters/rings.gif", and in the "Sprite Properties" dialog window set the following:
  • Size & Position tab:
    – Absolute Position: X = 360, Y = 222
    – Scale: Width = 50, Height = 50
  • Motion tab:
    – Type = Straight Line
    – Motion Links = Pass over and over
    – Speed: Horizontal = -10, Vertical = -1
  • Transparency tab:
    – Transparent Color: All (RGB) = 0
    – Tolerance = 1
    – Overall Opacity = 100%
  • Click on OK.

Activate the Project menu and select "Send to Back".

 










Note
  1. Insert "/tutorial/html/tutfilters/galaxy.jpg", and in the "Sprite Properties" dialog window set the following:
  • Size & Position tab:
    – Absolute Position: X = 600, Y = -100
    – Scale: Width = 40, Height = 40
  • Motion tab:
    – Type = Bouncing on Bottom of Screen
    – Motion Links = Pass Randomly
    – Speed: Horizontal = -125, Vertical = 10
  • Transparency tab:
    – Transparent Color: All (RGB) = 0
    – Tolerance = 1
    – Overall Opacity = 100%
  • Click on OK.

Activate the Project menu and select "Send to Back".

Note: These settings, particularly the Position values, will place the image off the screen (not visible initially). With the Motion Links set to Random, this image will be displayed at random times and when going off the screen stays off for a period of time to give a more realistic motion. Once you play the screen saver (preview it) you will eventually see the galaxies in motion.

 

Step 6: Using Animation

We will start by inserting the "/tutorial/html/tutfilters/comets.jpg" image, which is a picture of three comets placed one over the other. Then, we will set the Animation value and the image will only display a single comet. We will play the acreen saver to see the animation. Finally, we will set the values for the Comets image.

 



Insert "/tutorial/html/tutfilters/comets.jpg": Click on the "New Sprite" icon and select the Comets image. Initially, position it where you are able to see the three comets. Later we will set its position values for the final screen saver.

Activate the Project menu and select "Properties". In the "Sprite Properties" dialog window, select the "Animation" tab and set the following:
– Animation Speed = 15
– Number of Images = 3
Click on Ok.

Play the screen player to see the comets animated: activate the Project menu and select "Play Screen Saver". You will see the comets in motion (animation). In the next step we will set all the other properties for the comets.

 

First, send to back: right-click on the comet thumbnail and select "Send To Back". Then, activate the "Sprite Properties" dialog window (right-click on the thumbnail and select "Properties") and set the following:

  • Size & Position tab:
    – Absolute Position: X = -86 , Y = 0
    – Scale: Width = 60% , Height = 60%
  • Motion tab:
    – Type = Straight Line
    – Motion Links = Pass Randomly
    – Speed: Horizontal = 200 , Vertical = 10
  • Animation tab:
    – Animation Speed = 15
    – Number of Images = 3
  • Transparency tab:
    – Using a Transparent Color = Checked
    – R,G,B values (all) = 0
    – Tolerance = 1%
    – Overall Opacity = 100%

Click on OK to apply the settings and close the "Sprite Properties" dialog window.

 

Save your project (File || Save) which you originally saved as "PSP_Space-Screensaver.ssp" and then, if you want to modify any of the sprite settings at a later date, you will have your original project to use.

 

Step 7: Playing the Screen Saver

Right-click on the background for the Project menu and select "Play Screen Saver". Just watch as the animation and motion of the images over a starry background provide fascination. Be patient. You will see the galaxy and the comet in motion in time.

If you are satisfied with the way the screen saver looks, then you are ready to create a screen saver for your desktop.

If you want to change any settings for any image, just use the thumbnail to highlight the image you want to modify and set any value for your own preference and taste.

 

Compiling the Screen Saver for Use on a Desktop

You created the screen for the screen saver with your images. You have reviewed the screen saver and you like what you see :) – so now it is time to compile the desktop screen saver.

Right-click and select "Compile a Screen Saver File (SCR)" from the Project menu, or click on the "Compile" icon. Click on OK to close the splash screen.

In the "Compile a SCR Screen Saver" dialog window, your project name will be entered. You can change the name of the screen saver file (your choice).

The location for your screen saver file will be automatically set to your Windows\Systems folder.

If you want your screen saver to be the current screen saver for your desktop, then check "Set it as the current Windows screen saver". Click on "Next".

If you have already saved your work as an .scr file, then a caution window shows up asking if you really want to overwrite. If you have modified your work and like it better, then just click on "Yes". Otherwise, go back to the first screen and enter a new file name.

The "Description" dialog window appears where you enter information about this screen saver. Then click on "Next".

The "Splash Screen" dialog window appears and you decide whether or not you want a splash screen. Then click on "Next".

The "Ready to Go" dialog window appears. Just click on the "Go and Compile" button.

The final "Compilation" window appears and you can test your screen saver, and test the "Properties" dialog box.

Close the window and you are set.

 

To again test the screen saver, go to Start || Settings || Control Panel from your desktop and select "Display". In the "Display" dialog window, select the "Screen Saver" tab and you will find your screen saver there. You can preview it and set your wait time.

Have fun! :-))

 

To explore the Active Media Eclipse Personal Edition Screen Saver program, click here.