Imagelink Creation Tutorial

Scroll uses targa (TGA) images for imagelinks but they must have dimensions that are a power of 2. Generally the images should be 32, 64, 128 or 256 in height or width. You can mix different heights and widths but a general rule is to keep the dimensions small if you intend to have a lot of unique images. The future should see the end of this limitation and with huge amounts of graphics memory we can look forward to imagelinks with much larger targa images.

The images must also have a color depth of 24 bits (RGB) or 32 bits (RGBA) which also includes an alpha channel.

If the image contains an alpha channel then any parts of an image with an alpha value less than 128 (50% opacity) will not be drawn when viewed in Scroll.

The alpha value of the area of the image to be clicked on must be over 200 (78% opacity), any alpha values below this will not be clickable and the click will fall through to any imagelinks below or the background. The windows of the house imagelink in the demo are an example of this; if you move the imagelink of the house over another imagelink you can select the imagelink below through the window.


I shall discuss the process of making an image for Scroll but not specifically for any one graphics program.

The best place to look for a suitable image may be the program you want to link to. If it is a Windows application you could take a screenshot of the program and use a piece of that screenshot as your image. As an example of this we could use the cd player program that comes with Windows called cdplayer.exe in the Windows folder. If you open this program and press Print Screen on the keyboard a copy of the screen will be copied to the Windows clipboard.

To use this copied image, open your graphics program and create a New File and then select Paste. Move the pasted image so that the cd player window is positioned in the top left corner of the picture and then clip the picture to 300w x 200h.

This approximately captures the whole cd player window but we now need to resize the picture to give it proportions of 1:1 , 2:1 , etc. Not all of the image is needed for the imagelink so we can further clip the picture to have a height of 150, this gives the picture a ratio of 2:1 and doesn't lose anything aesthetically.

The next consideration is to make the image fit the specifications mentioned above and shrink (resize with constrained proportions) the image to have the dimensions of 128w x 64h, and then after checking that the image is either RGB or RGBA and not indexed color, save the image as a TGA file with a unique name like cdplayer.tga.

A good place to put the image for use in Scroll is in the Images subfolder for the program. Once there, add a new imagelink to Scroll and set the image path to images\cdplayer.tga and the link to c:\windows\cdplayer.exe. When setting up the imagelink in Scroll you can set the dimensions of the image to the same dimensions as the actual image, 128w x 64h, or larger (keeping the image ratio of 2:1) but text in the images suffers from the shrinking process and looks a bit blurry when enlarged.

The targa image is only read into scroll once and used by every other imagelink that has the same image. This means that you can have multiple copies of the same image without over taxing your graphics memory and makes finding the image easier to find when scrolling.
For a full description of creating and setting the imagelink or adding text, read scroll.txt in the program folder.

If you would like to send in any images you can write to my email address below. But be careful not to use screenshot images (or images containing trademarks) for anything other than personal use as distributing them may be a breach of the copyright of the program who's image you took.

To discuss this tutorial or to just express your opinions you can use this Message Board.