- Complete Guide
- Table of Contents
- Welcome to iScreensaver
- Downloading and Installing
- Designing and Preparing
- Managing Projects
- Importing Media
- Editing a Screensaver
- Locking and Unlocking
- Branding Control Panels
- Customizing Installers
- Building Installers
- Distributing Installers
- QuickStart and Sample Projects
- Using Flash and Third-Party Tools
- Installing a Screensaver
Enough with the what does what and why, get to the how?
OK, let's go. If you've been through the manual from the beginning already, then you've seen elements of the QuickStart Guide, but it doesn't hurt to refresh.
Before, we said that these were the basics:
"...drag-n-drop your asset files into a new project. Drag them around to re-order them. Use the Info palette and Preview window to test options. Build your installer with the Share controls. Install, and wait for sleep..."
...so let's start:
Using the Application
When iScreensaver first opens, you'll be presented with a Projects List window (A), where you can create a new screensaver or open a sample one. Upon opening a project, a Project window (B) will appear, with Video and Audio sections wherein you can drag-and-drop media files, to import the files into the sequence. A Preview stage (C) and an Info palette (D) can both be opened to edit the per-sequence and per-item settings. Use the "Run Full Screen" command from the Preview menu to test your screensaver. Once you are happy with the sequencing, you'll want to build the screensaver Installer. Customize the screensaver installer on the Control Panel and Installer Tabs. Then use the Share Tab to create your Mac and Windows screensaver installers.
A: The Projects List window: Open a recent project, or start a new one.
B: The Project window: Edit your screensaver sequences and customize the software.
C: The Preview stage: View your screensaver as you edit.
D: The Info palette: Edit per-sequence and per-item settings.
Many of our User Manuals' images are Mac-based, but Windows works the exact same way, unless noted.
Creating a New Project
To start a new screensaver project:
- Do one of the following:
- Click the 'New' button.
- Select New from the File menu.
- On Macintosh, type Command-N.
- On Windows, type Control-N.
A new project window will open.
Naming a New Project
When you create a new project, you'll be asked for a name. This name will be used in various places; the project name, the control panel title, the locking dialogs, the installers, and the screensaver and installer filenames. You can also skip this step, or turn this feature off from within the Preferences. You can always edit these text strings later.
To create and name a new screensaver project:
- Do one of the following:
- Click the 'New' button.
- Select New from the File menu.
- On Macintosh, type Command-N.
- On Windows, type Control-N.
- A new project window will open, and the wizard will ask for your new screensaver name.
- Enter a name, and click the OK button.
So, What Does The Wizard Do Exactly?
The wizard places your 'name' in the following locations, using 'Space':
- Project name:
- Controls window title bar:
- Installer window title bar:
- Build Macintosh file names:
- Build Windows file names:
- Locking Customize window title bar: (for Ultimate License users)
- No matter what name you used in the wizard, you can always edit everything later.
- There is generally no need to name the screensaver with 'Screensaver' with the wizard (but that's a personal choice). It is automatically added to the installer name, but can be edited if you choose.
- If you do not see the request for a name with a new project, check the Preferences, as it may be switched off.
- Names can include Unicode (UTF-8) text, and should work on all supported operating systems, but only if the requested fonts are installed. In particular, Windows XP doesn't come with very many unicode fonts installed, so be sure to test thoroughly.
- The wizard names the Project, but it does not automatically save the Project. Make sure to periodically save your projects.
Importing Video assets
You can import a single file, multiple files, or even a folder. When importing a folder, all sub-folders will be included. Files will only be imported if they are the proper video format. Use software such as Apple's QuickTime Player to prepare movies in the HTML5 cross-platform H.264 compression format. Any H.264 movies, Flash (SWF), and image files can be imported at the same time.
To import video assets:
- Do one of the following:
- From the desktop, drag the files into the Video tab's Sequencing area.
- Click the [+] button on the Project window, and select with the Open File browser window
The assets will be automatically added as new items in the Sequence area.
- Some media file formats require that third party decoders be installed on both the author's computer and on the end-user's computer. In Designer, only the optional Flash plugin is supported through automatic downloads.
- On Windows OS, you can only select a single file in the File Open browser. To import multiple assets, drag-and-drop from Windows Explorer instead, or select a Folder containing multiple assets.
- When importing a folder containing many items (more than 100), all items will be scanned, and you will be given a chance to confirm or cancel. HIt the ESC key to cancel the scanning process.
Sequencing Video Items
Video items can be rearranged within the Sequence when using either Thumbnail View or List View. Use standard selection keyboard short-cuts to choose multiple and non-contiguous assets. Items will play back in the order shown. However, if the sequence has the global "Shuffle" setting enabled, then the order will be randomized during playback.
To change the order of video assets:
- In the Video tab, select any files to be moved by doing one of the following:
- Click to select a single item.
- Shift-click to select a contiguous set of items.
- On Macintosh, command-click to select non-contiguous items.
- On Windows, control-click to select non-contiguous items.
- Drag the items to the new location within the Sequence area.
The items will then move into the new order.
- In Thumb view, the actual sequence order is always as shown, even if shuffle is active.
- In List view, the actual order is only accurate when you are sorted by the first column (the Item #). If you are sorting by a different column, then the current order will be the temporary sort order. To change the sort order in list view, click the 'Item #' column so that you are sorting by item number before re-ordering items.
Previewing the Screensaver
Computers monitors come in all shapes and sizes. For this reason, you'll need to think about how your screensaver will look on a wide variety of screens. This is not a trivial task. iScreensaver helps you by providing the Preview Stage window which allows you to preview, in a WYSIWYG fashion, how the screensaver sequence will look at various screen sizes.
Open the Preview stage by clicking the "Preview" button on the toolbar of the Project window. You can open one Preview stage for each project that is currently open.
The Info palette
Sizing, locations, captions, overlays, duration, and compression are but a few of the options available through the Info palette. From a macro level to micro, the left to right order of toolbar icons scales from global settings (that apply to the entire sequence) to per-item settings, and finally to per-layer.
Remember the hierarchy: a Screensaver consists of an Audio Sequence and a Video Sequence. A Sequence consists of one or more Items. Each Item consists of one or more Layers. Each Layer contains a single Asset.
Settings which affect an entire sequence, such as looping and shuffle.
Options specific to each Sequence Item of a sequence, such as duration, layer disabling, and interactivity.
Settings for the media layer: selecting the asset file, and adjusting playback location, audio volume, and others [Video Sequence Only] such as background color or masking, effect transitions, and file compression.
Settings for the caption layer: Styled text display. [Video Sequence only]
Settings for the overlay layer: Picture display on-screen. [Video Sequence only]
Building the screensaver
On the master Share tab, you can set the author's name, and build screensaver installer for one or more platforms. Just select the platforms you wish to build, then click the 'Build' button.
To build your new screensaver:
- On the Build tab, click the 'Build All' button.
- Your screensaver installer will build.
- On the Build Progess dialog, click the 'Details' disclosure triangle for build details and progress. Pay special attention to any warnings or errors that are shown.
- The Build will end with a choice to reveal the newly-built folder on the hard drive. If you are building for the same OS that you are using, you can also choose to install the new screensaver on your computer.
Install Your Screensaver
When the installer has been built, click on the 'Install' button.
To install your new screensaver:
- Wait while the Installer is being built.
- On the Build Progress dialog, click the 'Install' button.
- Your screensaver installer will open.
- On the installer, click the 'Install' button.
- Follow any on-screen instructions. When complete, the Install window will close and the Screen Saver Control Panel will open with your screensaver selected and ready to use.
- To start the screensaver, do one of the following:
- On Windows, click the 'Preview' button.
- On Macintosh, click the 'Preview' button.
- If Hot Corners are in use, place the cursor in the hot corner.
- Leave the computer alone for the time delay set in the controls.
- Your screensaver will start.
The Space screensaver has examples of many of the advanced features possible in iScreensaver. High resolution OpenGL effects with custom 3D motions, locked and unlocked sequences, and the use of sequences including images, h.264 movies, and Flash (SWF) files.
Obtaining or creating your assets
Archive.org, NASA.gov, and the BBC, for example, have various images and video clips available under various licenses. Copyright law is complex and differs from country to country, so be sure you have the rights you need to use any media assets. For many reasons, using your own work is often the best idea.
Preparing your assets
A third-party application like GIMP or Adobe Photoshop can be invaluable in adjusting, cropping, or formatting your images. We have some artwork tips for creating images with transparent masks.
For Space, some images need touch-up in Adobe Photoshop. Planets and some incomplete spheres need alpha masks. The icon needs sizing at 512x512 pixels, with an alpha mask too.
Organizing assets on disk / Setting up your folders
By placing all included assets together in one folder, it becomes simpler to package together one project for archiving, once complete. Subfolders, such as for audio, overlay art, or video, also help separate the elements for future project revivals. Certainly, your folders can be named differently, or you can go without and import files from any local storage location.
For Space, we created inside the 'iScreensaver Projects' folder: a single folder called 'Space', which holds the Space.isc project file, the installer icon.png file, a 'radio' folder for containing music files, and an 'assets' folder for containing all the images and movies. We have a list of credits for assets that require them. Eventually when we build the installers, the 'Installers' folder will appear inside the 'Space' folder.
Creating a new project
Open iScreensaver. The Projects list window will open.
For Space, we create a new project, and use the wizard to name it 'Space', which places the name 'Space' throughout the project. We may want to change that later in places.
Importing your video assets
The easiest way to import is to drag and drop files or folders from the desktop.
For Space, we drag-and-drop the 'assets' folder into iScreensaver's video sequence area of the new project.
Importing your audio assets
Not all screensavers need to have audio. Screensavers with audio sometimes find themselves quickly uninstalled. However we know audio has its benefits. The easiest way to import is to drag and drop files or folders from the desktop, but we've included an easy Add File button.
For Space, we went silent - no audio.
But if we were using audio, here's another way to import the files. Note that the Windows file browser only allows selection of single items, but Macintosh allows multiple at a time.
Arranging sequence patterns
Items can be then moved around in the sequence area to adjust the order in which they are played, however order really doesn't matter in the case of shuffle.
For Space, we are using 'Shuffle' so the sequence order does not matter, except for the first item, which we happen to always want playing first when the screensaver starts. We move our Earth image to the Item #1 position, and set our Video Sequence global settings.
Setting grouped settings
It's easiest to edit all the 'common' settings at the same time, whether it be caption text, durations, or master control over overlays. Selecting multiple items allows you to change a lot of settings at once. Remember that List View can let you resort and select items quickly.
For Space, we have two looping movie animations, plus we wish all images to last about 15 seconds, neither which are the default settings. By re-sorting in List View, we can choose a single file format to affect. Later, some items will be set different as we adjust them on an individual basis.
Setting individual settings
Select each item individually to edit just its settings. The Preview window can help guide as you move through the sequence list one item at a time, as some individual images may need different settings for Display or Effects. If you find settings you'd like to transfer to other assets, the different attributes can be pasted separately. Hint: duplicating and re-using items in a sequence does not multiply the size of the final screensaver, so it's possible to have several motion effects for a single, but duplicated, asset.
For Space, many imported images will default to JPG compression, while any images with alpha masks such as PNG, TIF, or Pict will be imported with Color Mask and Compression settings automatically set. Switch to Captions tab as needed to edit individual credits, or edit directly in List View (though items with various font styles may have their text normalized).
Creating an alternate sequence
You can include a second sequence within the installer. It can be completely different than your first sequence, or can have subtle differences. Cut, copy, and paste assets across sequences. Again, duplicating and re-using items across sequences does not multiply the size of the final screensaver.
For Space, the alternate sequence consists of just the motion effected images, removing the Flash and Movies and shortening the impact of caption text.
Setting the unlock settings
There are two ways to work with unlocking keys - either a preset list of codes, or a seed generator that uses individual user names to derive a single code per name.
For Space, we wanted a single code for everyone.
Customizing controls and installers
The Controls and Installer tabs allow you to educate your end users more about your screensaver during both installation and use. The titles were set with the wizard when starting the projects, but can be changed if desired. If splash picture art is used, it will be sized to 392x120 pixels to fit. Weblinks can be set to return users to your website.
For Space, we altered the texts to make it clear that we are not affliated nor endorsed by NASA, nor claiming copyright over any assets used in the screensavers. Our splash pictures we left as their defaults.
The wizard has taken care of the filenames on the individual platforms, so that you can build all platforms at the same time from the Share tab. Or, add icon art or wallpaper, or check and copy your current plug-in information to establish a minimum your end users will need to have installed (or blank the field to not check a plugin at all).
The Build Progress apprises of build warnings, errors, and other pertinent information, and allows installation when complete. Reveal shows the installer folders and zip files for both platforms, and please use the zips to transfer to clients or end users via the web, email, or onto discs.
For Space, our Flash movies were created for Flash 9 and we didn't need any fancy modern QuickTime technologies, so we altered the minimums to reduce any installation impact on end user's machines.
It's really good to test your final installers, and to test on as many different machines as possible, mostly to gauge how your project responds to different hardware and monitors. What may work fast on one machine, may display differently on another.
This presentation slideshow sample project has examples of a bullet-point text presentation, and how to create solid wipes and dissolves.
Project Background: our customer contracted out for a complicated Flash animation for a client's screensaver, but at the end of the project the client's specifications changed against using Flash, so the customer came for advice. In looking at it, the Flash animation was really a fancy bullet-point feature list, so we made the suggestion, since the original Flash contractors completed their work, to take screengrabs and use the built-in transition effects to animate the same. The end results pleased both customer and client.
Demonstration Summary: Preparing and animating presentation slides, using Dissolves and Wipes. However, instead of screen capturing from a Flash animation (only recommended in a emergency), we create new bullet-point frames in a third-party graphics application.
Preparing your assets
A third-party application like GIMP or Adobe Photoshop can be invaluable in adjusting, cropping, or formatting your images. For our customer's project, the Flash .FLA project was not available, so we used the built-in Mac OS X screen capture commands to screengrab while running the animation full screen in Flash Player.
For this example, we created six frames of a generic bullet-point presentation: a blank background, a title card with the client's name, and a sequence of text changes building to a large splash. (This, of course, is a gross simplification of our customer's actual project.)
The images were created in Photoshop at 1024x768 in size and would be set to display as Letterbox on the end users' monitors. The 'Save For Web' feature allows saving in a lossless PNG-24 format, since the JPEG compressors have trouble properly reproducing gradient ramps.
Arranging your assets
When first importing items to the sequence, it'll be arranged alphabetically left to right, and top to bottom, in sequential order. Grab the thumbnails to reset the order, but if you are intending to shuffle then their order does not matter. Use either Thumbnail View or List View to re-arrange the order.
For this example, there is a particular order, looping, but always starting at the beginning of the sequence. We used the ability to move multiple items, so that the blank background would be the first in the sequence. Under the Info palette's Global Video Sequence settings, the defaults were appropriate.
Setting overall item values
It's easier to start with the settings that are in common between all the items. By selecting all, it's simple to turn off the Captions and the Picture overlays, without erasing their contents. (They default as On, so it's wise to turn them off first if not desired.) On the Media tab, Display defaults to Letterbox, Effect to a motion Dissolve, and Compression to High Quality.
For this example, while everything is selected, make sure to turn off the Overlays completely, and switch Compression to None. The blue gradient is a difficult pattern with JPEG, and the art was saved as Lossless PNG, so the default is incorrect for this project, as JPEG artifacts can be seen when scales up to larger monitors.
Setting specific item values
Sometimes the List View allows more information to be gleaned while authoring a screensaver. Try selecting a few items that share settings. Control-click the column names to re-sort or view more column information. Use the Info palette to quickly switch out parameters, and view in the Preview stage.
For this example, the first two images will be Dissolves, whereas the rest will be Wipe-Right. Select the first two and open the Effect section, to turn off Random Motion and Simultaneous Out Effect, as movement is not necessary, and we need our previous item to hold on-screen a bit longer before fading away.
With those settings set, trade in the selected items for the unselected items by inverting the selection. Switch the Dissolve Effect for Wipe towards the Right. With Wipe or Slide Effects, the Simultaneous Out is defaults to the, in this case, proper off.
Different items deserve longer durations, or shorter ones.
For this example, the title and the final slide were to be on longer than the others, but that the others actually need to be shorter. Selecting multiple items with the command button (on Macintosh) or control button (on Windows) make a simple chore for matching items.
Building your screensaver
If saving has not occurred, the build will cancel. Save. Choose your platform, build, and install directly from iScreensaver.
For this example, the wizard pre-filled all the pertinent information for filenames and project names with 'Presentation Slides' at the beginning. Save, then on the Build tab, move to the Mac or Win subtabs (depending on platform), and Build. To immediately install, just choose Install when the buidl process is complete. For more details on the build, see 'Details...' If you install a second time, if the filenames are the same, you will replace the previous version, not add a second screensaver.