INTRODUCTORY TUTORIAL
Screen Saver Construction Set creates complete, self-standing Windows screen savers with contents of your choice. Your screen savers can contain the following elements:
The screen savers created by Screen Saver Construction Set are SCR files suitable for use under Windows 95, 98, 2000 and Windows NT 4.0 or better. They do not require that you distribute anything other than the SCR files you create – there are no run time libraries or DLLs to keep track of. As discussed in the Reference document for Screen Saver Construction Set, there are no royalties payable to Alchemy Mindworks for use of screen savers created with a registered copy of the software, or other encumbrances. You can distribute your screen savers any way you like.
While Screen Saver Construction Set offers you a lot of control over your screen savers and what they'll ultimately look like, building your first screen saver will be pretty effortless. Screen Saver Construction Set has been structured to choose intelligent defaults for the screen savers you create, and to have a fairly shallow learning curve. In addition to building screen savers, Screen Saver Construction Set includes a function preview them without the necessity of installing them through your Windows Control Panel. You can make sure your screen savers are doing what you want them to do before you put them to work. Screen Saver Construction Set will install its screen savers in Windows for you if you wish.
If you'd like to see a Screen Saver Construction Set screen saver in action before you start creating one of your own, run Screen Saver Construction Set and select Open from the File menu. Open the EXAMPLE.SCR file which was installed with the Screen Saver Construction Set package. When it has finished loading, click on the View button in the Screen Saver Construction Set tool bar, the sun glasses. Your screen will blank and the screen saver will start drawing things. This is a somewhat complex screen saver – let it run for a few minutes to see all its stuff.
Screen Saver Construction Set's screen savers are structured as a sequence of blocks. Each block can hold one picture, one sound, one bit of text or one applet. A "bit" of text can be one line or several paragraphs, depending on how you configure the text block in question. An applet block can contain multiple pictures and sounds, as well as the applet code to work with them. Applets, while relatively easy to master, are arguably beyond the scope of this introductory tutorial, and nothing much will be said of them herein. Once you have the rest of Screen Saver Construction Set lying on the carpet begging for mercy, you might want to check out the ANIMAL Language Reference, wherein are discussed the lurid details of writing Screen Saver Construction Set applets. In addition to the aforementioned blocks, every Screen Saver Construction Set screen saver includes a Header block. The Header block holds information that's used by the whole screen saver, such as the colour to use to blank your screen – this is usually black, but it doesn't have to be – and the nature of the Windows Control Panel preview. Let's begin by building a simple screen saver. This one will contain a single picture.
Spend a few minutes experimenting with some of the other items in the Transition In and Transition Out combo boxes. When you're happy with your selections, click on OK to close the Image block editor. You can save your screen saver to disk by selecting Save As from the File menu.
You can add additional images to your screen saver just as you did the first one. If you click on a block in a Screen Saver Construction Set document window, you'll notice that a line will appear below the block. This is the "insertion caret." It indicates where new blocks will be added to your screen saver – they will always appear immediately after the insertion caret. Be sure to select the block you want your new Image block to appear after before you insert it. The block with the insertion caret is referred to as the "currently selected block." You can select the transition effects for each of the Image blocks in your screen saver by double clicking on the block you want to modify and changing the values in the Image block editor dialog that appears.
When you've added all the images you need to your screen saver, save it to disk. You can use the View button – the sun glasses – in the Screen Saver Construction Set tool bar to see what your complete screen saver will look like. By default it will begin with the first block in your screen saver and continue to cycle through the blocks until you interrupt it by right-clicking your mouse. If you hold down your Shift key and click on the View button, your screen saver will display beginning with the currently selected block. This is helpful if you'd like to see how a specific portion of it behaves. You might want to try out your new screen saver under Windows. To do this:
Your Windows screen is configured to display a specific screen "resolution", or number of pixels – 640 by 480, 800 by 600, 1024 by 768 and 1280 by 1024 are common Windows screen dimensions. It's important to keep in mind that the screen savers you create with Screen Saver Construction Set may run on systems which are configured to use screen resolutions different from yours. In designing complex screen savers, you should place visual elements in a way that will allow for varying screen dimensions and not have your carefully thought-out design look like roadkill. To this end, Screen Saver Construction Set allows its Image and Text blocks to be positioned relative to the four corners or the center of your screen. By default, it positions things relative to the center. To see how the positioning functions of Screen Saver Construction Set work, double-click on one of your Image blocks. Note that the Origin group of controls indicates that Center orientation has been selected. The Horizontal Offset and Vertical Offset controls should be set to zero. This indicates that the image in question is centered on your screen. Set the Horizontal Offset field to 200 and click on Preview. Notice that your image appears shifted to the right. Set the Horizontal Offset field to -200 and it should appear shifted to the left. The Vertical Offset field can be used to shift it up and down.
You can position images relative to one of the corners of your screen by selecting the appropriate option in the Origin control group of the Image block editor. Keep in mind that things placed relative to the upper left corner of your screen will appear in the same place no matter what the screen resolution of the machine displaying your screen saver may be. Things placed relative to the center or the other three corners may change position. If you'll be creating screen savers with a lot of elements on a single screen, you might want to use the Windows Control Panel Display applet to actually change your screen driver resolution temporarily to test them. See the Drivers document installed with the Screen Saver Construction Set software for more about this.
Text blocks can display single lines or multiple paragraphs of text. Single-line text can optionally scroll across your screen as a banner marquee. Text can be displayed in any colour you like and in any font you like – with a slight catch, as will be discussed in a moment. You can, of course, create screen savers which embody nothing but text. It's more likely that you'll want to use Text blocks in your screen savers as an adjunct to Image blocks. To add a Text block to your screen saver, click on the current block you'd like your Text block to appear after and then click on the green Plus button in the Screen Saver Construction Set tool bar. Select Text. A Text block will appear. Double-click on it to open a Text block editor dialog. The Text field in the upper left corner of the Text block editor holds the text to be displayed by your text block. There's a font sample immediately blow it. Enter a few words of text in a single line into the Text field. Click on the Font button at the right side of the Text block editor to choose the font for your text. The Font dialog will also allow you to select the size and effect for the font you choose. Text drawn in a screen saver has a foreground colour – that is, the colour of the text itself – and a background colour. The background colour is used to draw a solid rectangle in which the text will be displayed. You can select these colours through the colour buttons near the top of the Text block editor dialog. The background colour can also be set to the background colour of your screen saver – enable the Use Saver Background option if you'd like to do this. The rectangle in which text is drawn can be made larger than the text itself. The extra space is called the "margin." At least a small margin is recommended for text drawn in a rectangle of some colour other than the background. You can set the margin size in pixels through the Margin control. The Text Effect combo box, at the left size of the Text block editor dialog, will let you choose how your text is to be displayed. This is what the Text Effect options do:
For the moment, select the Single Line, Width of Text option. You have now configured a complete Text block. Click on the Preview button in the Text block editor dialog to view it. Right-click your mouse to return to the Text block editor dialog.
Having created a simple Text block, you might want to experiment with the Text Effects combo to see what else the Text block function is capable of. Try selecting one of the scrolling options and then click on Preview. The scroll speed can be set with the Speed control. The Duration control in the Text block editor dialog defines the number of seconds which your text block will be active for, before it gives up and hands control of the show over to the next block in your screen saver. The paragraph text options in the Text Effects combo box will allow your text blocks to display multiple lines of text – and, in fact, multiple paragraphs – formatted as it might appear in word processor. There's an important consideration in this, of course – people rarely feel disposed to pressing their noses to the screens of their monitors and reading extensive dissertations written by their screen savers. You can use this feature, but use it sparingly. To create a paragraph Text block, enter multiple lines of text into the Text block editor's Text window. You can hit Enter to form paragraphs. Select the Multiple Line, Depth of Text option in the Text Effects combo box. Click on Preview to see what your paragraph text looks like. Paragraph text can be justified left, center or right through the Justification control near the center of the Text block editor dialog. This control also sets the position of text if you use the Single Line, Width of Screen text effect. It was mentioned earlier that you can use any font you like in a Text block, with one catch. Here's the catch – as catches go, it's a pretty good one. While Screen Saver Construction Set will use any font you tell it to, the font in question will have to be installed on whichever machines your screen savers run on as well. If you design a screen saver to use a font called Nuclear Accident Sanserif, and Nuclear Accident Sanserif doesn't happen to be available on the machines that ultimately run your screen saver, all your text will appear in another font û most likely Courier. It's a really good idea to restrict your use of fonts to the ones which area installed with Windows û Times New Roman, Arial, WingDings and so on. If you need text in unusual fonts, consider setting it as a graphic using Windows Paint or GIF Construction Set Professional, and then displaying it with as an Image block, or from within an applet. If you use GIF Construction Set Professional's Banner function to handle display text, you'll have access to its various special effects, anti-aliasing and so on.
Sound blocks under Screen Saver Construction Set are singularly uncomplicated. Sound can be imported into a screen saver as a WAV or MIDI file. WAV files store sampled sound – think of them as tape recorders with very, very short tapes. MIDI files store sequenced music. A MIDI file is the digital equivalent of a player piano. Sound blocks can either have a duration equal to the duration of the sound in question, or no duration at all. In the first case, your screen saver will do nothing while your sound block plays, and then continue to the next block in the screen saver when the sound runs out. In the second, it will immediately move along to the next block, leaving the sound to play until it runs out by itself. The latter option is usually called for. To add a Sound block to your screen saver, click on the current block you'd like your Sound block to appear after and then click on the green Plus button in the Screen Saver Construction Set tool bar. Select Sound. A File Open dialog will appear to let you select a WAV or MIDI file to use for your new Sound block. When you have selected a sound, a Sound block will appear in the block list for your screen saver. Double-click on it to open a Sound block editor dialog. The Sound block editor dialog doesn't actually edit a great deal. Make sure the Pause While Sound Plays option is disabled unless you want your screen saver to stop whatever else it's doing while your sound plays. The description field can be used to store some descriptive text for your sound – it defaults to using the name of the file from which your sound was originally imported. The contents of this field will be displayed in the block list for your screen saver.
And Finally... the Header Block Earlier in this discussion, it was noted that every screen saver has a Header block. If you've been curious enough to double-click on the Header block for your screen saver, you'll have noticed that it, too, calls up an editor dialog. The Header block stores things which are common to all the elements in your screen saver – most notably the background colour – and the interface elements which determine what your screen saver will do when it appears in the Windows Control Panel Display applet. The screen saver background colour, as set by the Background colour button, will be used as the background colour for every block in your screen saver. For most screen savers, this will be black. You can create a screen saver with any colour background you like, but keep in mind that one of the ostensible purposes of a screen saver is to save your screen. That is, it's intended to prevent your monitor's phosphor from being burned if your computer is left on with nothing to do for a protracted period. A screen saver with a bright yellow background, for example, isn't likely to do this very well. If you change the background colour in the Header block of a screen saver, it will automatically change in all the Image, Text and Applet blocks in the screen saver in question. When you select a screen saver in the Display applet in the Windows Control Panel, a preview image should appear in the Display applet's dialog window. For simple screen savers, this is typically a small version of whatever the screen saver will draw when it's blank. We didn't find this to be a practical approach to handling the preview for screen savers created by Screen Saver Construction Set, which are typically too complex to be recognizable under these conditions, and too large to load up without a noticeable delay. To this end, the Header block editor dialog will allow you to select what will happen in this window. The elements for a Screen Saver Construction Set screen saver's preview can be either scrolling text or a still graphic – two things which do load up quickly and which can be designed to look attractive and recognizable in a small preview window. You can select the preview type through the Preview controls in the Header block editor dialog. If you select Text, the text in the Screen Saver Title field of the Header block editor dialog will be scrolled across the preview window in a variety of colours. The background of the preview window will be painted using the colour selected as the screen saver background. You can edit this text as you see fit – try to keep your title relatively short. If you select Picture, you can choose the picture to display by clicking on the Select button. The image used as a preview picture can be imported from any of the graphic file formats supported by the Image block editor.
The Control Panel Display applet of Windows includes a Setup button for every screen saver selected. Screen savers created by Screen Saver Construction Set don't really need this, as they offer no configurable options. The Setup button will call up a dialog for your screen savers, however – the dialog will display text of your choosing. The text should be entered in the About Dialog Text field of the Header block editor. This text can include things like copyright and acknowledgement notices. The Setup button dialog will also display some legal information about the screen saver software, that is, the part of every Screen Saver Construction Set screen saver which makes it go, and is actually owned by Alchemy Mindworks. The lawyers made us include it. Finally, the Header block editor will allow you to password-protect your screen savers. Note that this has nothing to do with the password protection for screen savers running under Windows. The Header block password function will prevent anyone who doesn't know the password you assign to a screen saver from opening it in Screen Saver Construction Set. As such, other users of Screen Saver Construction Set won't be able peek at your applets or swipe your graphics. It's strongly recommended that you distribute your screen savers with password protection enabled. Keep a non-protected copy for your own use, should you want to update your screen saver two years hence and find you've forgotten your password. Password-protected screen savers will run normally on the machines to which they're distributed – they just won't open in Screen Saver Construction Set for anyone but you. It's probably worth mentioning a few things about Screen Saver Construction Set's password protection, to wit:
Having successfully created a screen saver, you'll probably want to distribute it. While screen saver SCR files can be uploaded and e-mailed and such as they stand, it's both far more impressive and far easier on your users to wrap them up in clickable installers. Whereas you have to copy a screen saver to your \WINDOWS directory and configure it through the Windows Control Panel to install it by hand, and installer will do all the work for you – and, of course, for the users of your screen savers. An installer is a conventional Windows application which, when run, will install your screen saver's SCR file and optionally prod the appropriate bits of Windows to make it the default screen saver on the system in question. Like the installers for other Windows applications, screen saver installers display a gradient background, a dialog to allow users to select installation options for your screen savers – few though they may be – and unlike other types of installers, they offer a Preview button so prospective users of your screen savers will be able to check them out before they're installed. Once you have created a screen saver and saved it to disk as an SCR file, you can build an installer for it by selecting Create Installer from the File menu of Screen Saver Construction Set. While this dialog offers a number of options to fine-tune your installers, you can ignore most of them while you're getting familiar with this feature. See the Installer section of the Reference document for a discussion of everything it knows how to do. To create your first installer:
Your completed installer can be distributed as you would any other Windows application. It can be run through the Run function of the Windows Start menu, or by double-clicking on it in Windows Explorer. Note that a Screen Saver Construction Set installer has the screen saver it started out with stored within itself – the only file you'll need to distribute is the installer's EXE file.
Screen Saver Construction Set ships with an example screen saver, EXAMPLE.SCR. In addition to showing off some of Screen Saver Construction Set's better tricks, it's a useful tutorial for screen savers you might want to create yourself. The EXAMPLE.SCR file is not password protected – you can open it in Screen Saver Construction Set and peek at how it works.
This section will discuss how the EXAMPLE.SCR screen saver works. Note that this section will be somewhat more advanced than the previous elements of this tutorial. If it all starts sounding like two Martians discussing the universe's ten greatest time warps, you might want to read the ANIMAL Language Reference and some of the other reference documents installed with Screen Saver Construction Set, and come back to this section when you have a bit more of the package by the throat. The Header Block There's nothing unusual going on in the Header block of EXAMPLE.SCR. The background has been set to black, which is a good choice for all screen savers unless you can think of a convincing reason to do otherwise. The screen saver preview is a graphic – it was derived from an image used later in the EXAMPLE.SCR screen saver. Alchemy Mindworks' Graphic Workshop Professional software is handy for scaling pictures down, and many other bits of image manipulation. Note that the Screen Saver Title field in the Header block is important, even though the preview is a graphic. It will appear in the Setup dialog for this screen saver when it turns up in the Windows Control Panel The Introduction The music in the Trumpets sound block sound started life as a MIDI file. Because the Pause While Sound Plays option in this block is disabled, the music will start playing and the screen saver will immediately move along to the next block. The music will continue to play until its runs out by itself. This is La RΘjouissance from Musick for the Royal Fireworks by George Frederic Handel. At least, it's some of it – a few of the better bits have been omitted in the interest of making it fit in the introduction of the screen saver. If a dead baroque composer turns up with a disturbed look on his face when you click on the Screen Saver Construction Set View button, you'll know he wasn't amused by the liberties taken with his work. The Introduction applet in EXAMPLE.SCR displays some introductory text and then an animation that walks across the bottom of your screen. It's probably worth noting that the spherical shape of the introductory text just happened that way – it didn't require any deliberate manipulation. The introductory text is comprised of some canned words stored in the Introduction applet, and the first name of the user of the machine on which EXAMPLE.SCR finds itself running. The complete name of the machine owner is available in the string $_OWN. This bit of ANIMAL code extracts the first name, that is, everything in the owner's name up to the first space character. The space character has the ASCII value 32. The Do / While loop extracts each character in the string $_OWN and checks to see if it's a space, character 32. It also makes sure it isn't about to try to extract a character beyond the end of the string, that is, that the whole string has been searched. On each iteration through the loop, the value of @n is incremented. When it finds a space character and falls out of the loop, it uses the StrSub function to extract the first @n characters of _OWN into the string $first. The introductory text is assembled in the variable $message and is displayed with the ParagraphText function. The text dimensions and location are worked out as follows: The value of @twidth, the width of the rectangle used to display the text, is arbitrary. The value of @tdepth was found by passing the value returned by ParagraphText to Print, writing down what got printed and then assigning that number to @tdepth. This is a bit inelegant, but as the value of @tdepth is only used to center the text vertically – wherein an error of a few pixels won't matter – there was no need to be more particular. The introductory text is made to fade in by printing it repeatedly in increasingly brighter colours, like this: The first of the Do / While loops increases the text brightness from black to pure blue. The second of them increases it from pure blue to white. The rest of the Introduction applet handles the animation which perambulates across the bottom of the screen. This is simple animation at its simplest – the edges of the cells of the animation graphic are black, and they're wide enough to cover the previous image as it moves. As such, all that need be done to make the animation move is to paint each successive frames slightly further to the left of the previous one. You can create the source frames for an animation like this one from an animated GIF file through Alchemy Mindworks' GIF Construction Set Professional and Graphic Workshop Professional applications. Use the Extract feature in the Block menu of GIF Construction Set Professional to extract all the Image blocks in a source GIF animation to numbered GIF files. Having done so, convert them to BMP files with Graphic Workshop Professional and import them into your applet through the Pictures function of the Applet Editor. Here's how the animation works: In this bit of code figures out how big the first cell in the animation, and assumes that all the others are the same size. It draws the first cell at the bottom of the screen and past the right edge. The Do / While loop then cycles through the cells, drawing each one slightly further left until the animation has moved fully past the left edge of the screen. It's important to keep in mind that displaying a graphic on a system with a 256-colour screen driver is much more processor-intensive than doing so on a system with a screen driver that supports more than 256 colours. For this reason, animations on 256-colour systems run noticeably slower. While this example doesn't do so, it might be a good idea to use GetScreenBits to ascertain the screen colour depth, and Sleep for a shorter time if the colour depth is eight or less. The Features (with Astronaut) When the animation loop runs out of room to draw its pictures, the Introduction animation terminates and the next block in the screen saver is displayed. This is an Image block which uses the Tile effect to display a picture of an astronaut. The Image block has its Transition Out field set to No Clear, so the astronaut appears and then remains floating in space when the Image block terminates. The text which appears to the right of the astronaut is handled by the Features applet. While much of this could have been displayed as multiple Text blocks, the applet allows for a gradient in the title text, and is arguably easier to implement. The gradient text in the title of the Features applet illustrates a slightly unusual application of the ANIMAL Print function. It extracts each letter from the sting that holds the title text into a separate string. The text foreground colour is changed for each character, and the single-character string is printed. Because Print updates the current drawing position to the end of the text it has printed each time it's called, the result looks like a single string of text, save that the colours change. Here's the bit of ANIMAL that makes it work. In the actual Features applet, the title text is displayed with a grey drop shadow, printing the title in grey before the Do / While loop. The font size is reduced to 26 points if the applet finds itself running on a system with a screen that's 800 pixels wide or smaller. The rest of the Features applet just makes calls to Print and ParagraphText to display static messages. The animation that moves across the bottom of the Features is screen is actually handled by a separate applet. It works the same way as the animation in the Introduction applet. Sierpinski's Curve The Sierpinski's Curve applet illustrates a number of useful things. To begin with, it fills the screen with a tiled background. You can see how this works in the :clear subroutine at the bottom of the applet. The screen is cleared by painting a matrix of images over it. Note that this is impressively fast on a system with a screen driver capable of displaying more than 256 coloursà and less so on a 256-colour system. You might want to have your applets clear the screen to a solid colour, rather than to a tile, if they find themselves in the situation. It's beyond the scope of this discussion to get into the mechanics of generating Sierpinski's curve. It's worth noting, however, that this program works by calling a subroutine which calls other subroutines and which at times call themselves. You can work through the logic of the program if you're interested in such things. The complexity of the curve is set by the value of @depth. Increase this to draw more complex curves. Note that as @depth increases, so does the time it takes this applet to complete its task. Bouncer The Bouncer applet draws a graphic which drifts around your screen and bounces off the edges. It illustrates a number of useful facets of ANIMAL. The first thing to note about Bouncer is that it points up a tiny lie in the ANIMAL documentation, wherein it is stated that only one sound can be played at a time. This is true unless the second sound is played by calling Beep. In this example, a MIDI file is played throughout the duration of the applet, and Beep makes noises when the graphic rebounds from an edge of your screen. The Bouncer applet as it's written will run for the duration of the music being played, or for 45 seconds, whichever is longest. Its Do / While loop keeps looping while IsSoundPlaying returns a TRUE value or the current system time is less than 45 seconds later than the system time was when the applet first began running. It checks both conditions so the bouncer will operate on systems without sound cards – a few still exist. The Book Advertisement The Gradient applet is something of a one-trick pony. It fills the screen with a gradient background. Gradients look a lot better on systems with screen drivers which can display more than 256 colours. Depending on how concerned you are about the aesthetics of your gradients, you might decide to display a solid background on 256-colour systems. The cover of Eye of the Dawn is handled as an Image block to access the animation features available by the Image block handler. As with the astronaut graphic earlier, this one uses a transition to display the book cover, and then the No Clear transition to leave it on the screen. The Teletype applet takes care of displaying the text around the book graphic. As with the Features applet, it uses a smaller font if it finds itself on a system with a screen capable of displaying 800 or fewer pixels horizontally. The first part of the text display, the teletype message, is created by extracting each character from the string $text and printing it to the screen, with a call to the Beep function for each character professed. If you pass Beep an argument of -1, it clicks the internal speaker of your PC, rather than playing a sound. The first Do / While loop in the Teletype applet illustrates how this works. Note that it checks to see how long each line of text is, and breaks its at the next available space if it starts getting close to the edge of your screen. In addition to Times New Roman and Arial, it's safe to assume that all Windows systems have access to the Courier New font. The embossed effect for the text EYE OF THE DAWN is an image, and is displayed by DrawPicture. The original image was created with a black background, but as DrawPicture has been instructed to make black transparent, it appears to float over the gradient. Once all the text in the Teletype applet has been displayed, the block terminates and the final Text block in the screen saver is activated. This displays a scrolling line of text at the bottom of the screen. Note that the Duration field for this Text block has been set to zero, so it scrolls once and then terminates.
Screen Saver Construction Set is a powerful and exceedingly flexible application for creating your own screen savers. To make the most of it, be sure to check out the Reference document and the other documentation files included with this package. This document and all the other documentation included with Screen Saver Construction Set is copyright © 1995, 1996, 1997, 1998, 1999 Alchemy Mindworks Inc. It may not be reproduced in whole or in part or transmitted in any form save as a component part of the Screen Saver Construction Set software without the explicit written permission of the copyright holder. Unauthorized use of this document or any portion thereof may result in severe criminal and civil penalties. Alchemy Mindworks Inc. accepts no responsibility for any loss, damage or expense caused by your use of the information in this document, however it occurs.
|