• Support

Images and Photos

Player Type: Image

Supported
Format	Comment
PNG	RECOMMENDED: Good quality, supports transparency.
JPG	Edges can blur, does not look good when shown on a large Display Device
GIF	Can look very grainy but does support transparency
BMP	Large file size but no loss of quality.
TIFF	Does not support transparency.
Unsupported
Format	Comment
Animated GIF	Use an HTML-enabled zone.

Unlisted formats have not been tested.

Large mega-pixel images may take a second or two to appear and slow the NTB down. Always resize image to fit the zone before uploading them to the NTB.

If an image appears to be stretched or squashed then edit the properties of the item in the playlist and set the "mode" to either "letterbox" or "crop".

If the playlist appears to be "stuck" on an image then check that the duration for this item is not "indefinite". Give it a finite duration.

Only PNG and GIF support transparency. PNG image quality is superior to JPEG and GIF. BMP files are larger than any other format.

Requirements

The NTB can only show images after they have been uploaded into the "media" folder on the NTB.

Animated GIFs

The image shown alongside is an animated GIF downloaded from the Microsoft clipart collection.

It appears to move on this web-page but will not appear to move when shown as an image on an NTB.

Animated GIFs must be embedded into HTML pages and the HTML page must be playlisted on the NTB

Transparency

Images with transparent elements are useful for placing a bug (logo) over a video or for framing or masking out areas of the display to produce non-rectangular shapes.

In the illustration:

• The video is on the lowest level.
• A round bug with transparent edges is over the video.
• A scroll goes across the screen.
• A white and green mask overlays all the above.
• A red star is positioned over the mask.

  Internet Explorer 6 does not support transparency in PNG.

STEP 1

A good tool for adding transparency to PNG images is 'The GIMP for Windows'. This free tool can be downloaded from:

http://www.gimp.org/windows/

Follow these steps to make regions of an image transparent:

1. Obtain the raw image - it can be any format.
2. Open the image in MS Paint
3. Draw the cut-out areas onto the image.
4. Save the image as a PNG file.

STEP 2

1. Open the image in the Gimp
2. Select 'Layers | Transparent | Add Alpha'
3. Use the wand tool to select a cut-out area.
4. Right-click the selection and select 'Edit | Clear'
5. Save the image

STEP 3

At this point it is possible to:

1. Add a colour gradient to the image
2. Erase the lines around the cut-outs
3. And so on.

STEP 4

Place this image into an NTB layout so as to overlay all other zones:

1. Create the Template
2. Add the Zones
3. The final Zone must be fullscreen
4. Create a Layout based on the Template
5. Playlist the media for each of the Zones
6. Playlist the image created above into the top-most Zone
7. Set the Layout as the default Layout
8. Activate the Diary and Layouts.

  Scrolling text will becomes erased after passing behind a non- transparent portion of the overlay so it is not possible to make it appear to pass behind something and re-appear on the other side.