SlideShowPro ThumbGrid

SlideShowPro ThumbGrid and SlideShowPro for Flash in Flash CS4

Purchase

Software requirements

Notable features

  • Infinitely flexible

    With ThumbGrid there are no limits on your creativity. Small or large, vertical or horizontal, compact or relaxed — you create your own grid.

  • Built for SSP for Flash

    Everything ThumbGrid loads comes from SlideShowPro for Flash, so there's no duplication of content. Simply hook the two components together and go.

  • Point and click color

    The color of every interface element can be modified as easily as picking a color with the eyedropper. Alpha transparency modifiable for most items as well.

  • Lightweight, optimized

    Coded in ActionScript 3, ThumbGrid is highly-optimized, fast, and adds little to the file size of your SWF.

  • Mouse navigable

    Out of the box, all you need is a mouse to browse and select thumbnails. The grid (optionally) slides left to right, or top to bottom on rollover.

  • Extendable with buttons

    If you'd like to offer manual controls for browsing the grid, you can easily add your own buttons. Full instructions for doing so included.

  • Uniform or proportional

    Thumbnail images can either scale and crop to fit the target dimensions, or scale proportionally for a non-uniform appearance.

  • Developer API

    ThumbGrid offers public methods and event data for ActionScript developers to tap into for even more customization options.

How it works

Overview

SlideShowPro ThumbGrid complements the ActionScript 3 version of SlideShowPro for Flash with an external, thumbnail-based navigation for browsing slideshow content. It is designed to meet the demands of SlideShowPro for Flash users interested in designing their own custom navigation (instead of using the one built into the component). SlideShowPro ThumbGrid is lightweight, flexible, and unlocks a limitless array of custom interface possibilities.

Wide, skinny, short or tall

Layout examples
ABOVE: Layout / spacing examples

ThumbGrid can be any width and height. Thumbnails are ordered on a grid, horizontally or vertically, across however many rows and columns you want. If more thumbnails are loaded than room allows, the thumbnails overflow into additional groups which can be accessed on component rollover or with external buttons. Or both.

Live preview

ThumbGrid live preview
  ABOVE: ThumbGrid live preview

While you're changing the dimensions, rows, and columns, SlideShowPro ThumbGrid updates in real time with a dynamic live preview to reflect how your interface will appear when published. ThumbGrid takes the guess work out of image sizing by displaying the target dimensions for your thumbnails in the live preview. This makes it easy to create thumbnails yourself, with our Photoshop Export script, or with SlideShowPro Director, which can generate imagery at the target dimensions automatically.

Use your own buttons

Button example

Sometimes not having a feature is a feature. ThumbGrid focuses on the presentation of thumbnails, so it does not include embedded navigation buttons to reskin, replace, or hide. You simply create your own, add them to your movie, and hook them up with some very light ActionScript. Or you can just use the mouse pointer to navigate the grid. It's up to you.

Driven by SlideShowPro for Flash

Simply assign the component instance of SlideShowPro for Flash to SlideShowPro ThumbGrid and you're on your way. ThumbGrid automatically updates with thumbnails whenever a new album loads. Click a thumbnail, and the corresponding image in SlideShowPro for Flash loads. If a new image loads in SlideShowPro for Flash, the corresponding thumbnail in ThumbGrid highlights. The two components stay in constant sync with no additional XML or imagery required.

See and read more

Ready to see it in action? We've built a mosaic-style example showing external button usage, and a more simple "Kyoto" example using just the mouse pointer. Also check out the online documentation for the most complete information, as well as this ThumbGrid introductory video which demonstrates how the component works.