iScreensaver Logotype

Designing and Preparing

Designing your Screensaver

Some projects call out for storyboards, some can be sketched on a napkin, and some just created by playing with iScreensaver. What assets do you have? Pictures, videos, flash, audio files, and even texts can be incorporated into a screensaver. Are you trying to tell a story? Entertain parents with vacation pictures? Import an overhead-projector presentation? Run randomly shuffled videos forever? Animate multi-touch interactively interconnected sprites to publish from remote RSS feeders? Sure, but you'll definitely need Flash programming experience for that last one...

There are a lot of options to consider. If you are the author as well as designer, it might be easiest to just put all your assets in iScreensaver and play around. If you are working with specialists in image preparation or Flash scripting, then you might want to put more pre-production preparation and pre-visualization storyboarding into your initial planning stages.

Take care in designing for specific timelines and screen proportions. If exact timelines are needed, create the assets as cross-platform h.264 movies or Flash projects for playback in iScreensaver. (Please note that Adobe cautions against using Flash for long movies where accuracy is required.) Because of the multitude of display options, it's possible that users' computers will playback screensavers at slightly different rates and proportional ratios. iScreensaver has many preview tools to minimize screen differences during production, but even magic has limits.

Designeergineering 101:

To spur on your magic, we suggest trying concepts like drawings, diagrams, storyboards, bounding boards, or just winging it and playing with the software.

Write up or draw out flowcharts.

For example: play image assets one through twelve, run sizzle movie, then randomly shuffle assets thirteen through nine hundred ninety until eventually 'asset one through twelve and the sizzle movie' cycles through again. Always start the screensaver with the first item. (Production hint: the first twelve images are compiled with the sizzle into a single movie during pre-production.)
Flowchart

For example: play flash movie one, which has a slideshow within it, then shuffle through three dozen other interactive flash movies, without end.

Flowchart

For example: play pictures and movies from reccent Guadalajara trip, in chronological order with captions already added in iPhoto. Play audio from a iTunes internet radio station. Always start the screensaver where it last left off.

Flowchart

Diagram road maps.

For example: a complete overview to all sections of the project, including movies, interactive Flash detours, and production notes.

Road map

Prepare storyboards.

For example: breakdown a complete sequence, asset by asset.

Storyboard


Storyboard

Create technical bounding boards.

For example: show examples of image-to-screen ratio placements, and percentage-based locations of text and picture overlays, for describing to artists and authors.

4:3 Ratio 16:10 Ratio

Throw caution to the winds.

We're going to cover this in-depth in a later chapter, but for the adventurous or playful or those bored already, here's 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. Create your installer with the Build controls. Install, and wait for sleep.

Types of Screensavers

Slideshows

Consisting of dozens to tens-of-thousands of still images, played in consecutive or random order. Options include text and picture overlays (like filenames, descriptions, or corporation logos), various types of 2D and 3D transitions, and automatic image sizing and compression.

Slideshows with Audio Tracks

Slideshows with multiple audio tracks, played in linear or random order. Tracks can be any length, and MP3 or other AAC/Flash formats. Options include Automatic Ducking, individualized Volumes, and Loop Behaviors.

H.264 Cross-platform movies

Many movies can be played within a screensaver, with the exception of certain older legacy encoders that have been discontinued by Apple or that are not supported in the current release. We recommend using the H.264 format when designing movies for most modern operating systems.

Flash movies

Any Flash movie can be played, though some ActionScripts may need to be specifically written with screensaving in mind. Some Flash movies are interactive, and interactive screen cursors can be enabled for those assets. If you choose to include Flash content, iScreensaver can be configured to check your end users' system during screensaver installation and, if needed, offer to upgrade or download Flash. We have some helpful hints and tips in creating Flash files for screensaver use.

Combining all types of media

All file formats can be played within the same screensaver sequence.

Planning your Screensaver Media

Our Best Advice: Use those storyboards mentioned earlier.

What size monitor do you think your end user will have? By this, we ask - how many pixels and in what ratio? These days, it's difficult to predict. As an example of a few monitor sizes that our labs go through in just a few weeks, and this is before we added our 4K UHD monitors:

Various Monitor Proportions
Assets can be configured to display at their actual size, or to be automatically proportioned to the user's monitor via letterboxing, cropping, or filling the screen. On Macintosh, the Preview stage can be adjusted to mimic specific aspect ratios and resolutions of many different screen configurations .

Preview options

Tips:

Optimizing your Media Production

Optimized production techniques take experience, which doesn't always present itself easily during your first project. Don't worry, you'll find shortcuts and tricks soon.

If designing a simple screensaver, you can use simple tools. In fact, Mac OS X and Microsoft Windows both come with bare-bones imaging and video editing software that compliment iScreensaver.

But if you are designing a complex screensaver, you might need a more robust toolkit. Adobe Photoshop is almost indispensable for graphic production, any Flash movies will need Adobe's Flash suite for programming, complex motion visuals might require Apple's Final Cut Pro X or Motion, and strange production pathways where you are importing multiple asset deliverables from mutliple artists without a standard format might mean your authoring computer have third party drivers to ensure complete multi-platform compatibility.

Tips:

Creating Directories and Virtual Directories

Typically, we like keeping everything together for a single project. This requires using the Mac Finder or Windows Explorer to create a few asset directory folders in a folder where we shall save our upcoming project. When building the installers, they are saved in a folder next to the project file, so it makes sense to keep all in one folder.

Folder Example

However, iScreensaver can use assets from anywhere on your local drive. If you want to use virtual links, in case files are moved, or if a project will be moved between authors, then place an alias or shortcut of each asset in a folder with the upcoming project. Then the entire folder structure can be compressed and sent.

Compress Example

next Preferences