Last modified: May 18, 2011 15:43:47.

Overview

Thumbnails are a new, advanced feature introduced in CU3ER v1 with purpose to enhance user experience. You can combine it with navigation buttons to offer full control over CU3ER playback, use it on its own or simply omit it from slideshow.

The structure of thumbnails is rather simple, with key elements as follow:

  • Thumbnails - main container containing:

    • Thumb(s) - Thumb represents one thumbnail unit directly related to respective slide. Each thumb can consist of:

      • Image (optional) Image within a thumb is a smaller & proportional representation of respective slide.
      • Title (optional) is a text associated with the thumb.
    • Scroller - UI scroll bar for scrolling through thumbnails (optional)

      • Drag bar

Combining thumb elements and altering their attributes can achieve almost unlimited number of visual representations such as bullets, numbering, lists, images or any of their combinations.

Thumbnails properties

This is the main container where all thumbs and scroller are contained in.

  1. Align & Offset - relative alignment and offset from current relative position.
  2. Size - width & height in px
  3. Tint & Alpha - background color and alpha values
  4. Round Corners - top, right, bottom & left corner radius values
  5. Visibility - way of handling displaying object during and after the end of each transition
  6. Padding - horizontal and vertical padding between thumbnails container and thumbs
  7. Scrolling - horizontal or vertical direction of scrolling

Thumb properties

Thumb represents main unit providing visual representation of corresponding slide. Each thumb can consist of:

  • Background
  • Image (optional)
  • Title (optional)

Available panels and corresponded settings:

  1. Spacing - horizontal & vertical spacing between thumbs
  2. Offset- horizontal & vertical offset from default position (useful for tweening thumbs). NOTE: thumbs distribution is centered within container
  3. Size - width & height in px
  4. Transform - scale X and scale Y
  5. Tint & Alpha - background color and alpha values
  6. Round Corners - top, right, bottom & left corner radius values
  7. Animation - duration, delay and easy function attribute for corresponding tween modes.

Image properties

Within thumb, CU3ER can display small image representation of the associated slide. How this image will be displayed is determined through settings available in this node.

Available panels and corresponded settings:

  1. Offset - horizontal & vertical offset from current position.
  2. Size - width & height in px
  3. Transform - scale X and scale Y
  4. Round Corners - top, right, bottom & left corner radius values
  5. Animation - duration, delay and easy function attribute for corresponding tween modes.

Title properties

Title is a text associated with the thumb. Title content can display text from and as:

  • slide heading
  • slide caption
  • slide number.

You can also combine numbering with slide heading or caption for creating thumbs lists or some similar representations. In addition, while using numbering, separator (delimiter character) can be defined for your convenience.

Available panels and corresponding settings:

  1. Title text - specify the source of the text to be used in title.
  2. Text properties - general text properties for title text field
  3. Tint & Alpha - text color and alpha values
  4. Offset - horizontal & vertical offset from default position (0,0)
  5. Size - width & height in px
  6. Animation - duration, delay and easy function attribute for corresponding tween mode.

Scroller properties

Scroller UI is optional enhancement and it behaves like usual scroll bar. A scroller consists of:

  • bar - background or track for drag bar
  • slider - drag bar

Scrolling can be horizontal or vertical and occurs only if all thumbnails are not displayed at once (if clipping occurred).

Auto-scrolling is set by default and it occurs when mouse pointer is near to either left or right side of thumbnails container in case where thumbnail container is smaller than number of thumbnails contained within.

Available panels and corresponded settings:

  1. Align & Offset - relative alignment and offset from current relative position. Alignment is relative to thumbnails container.
  2. Size - width & height in px
  3. Tint & Alpha - background color and alpha values
  4. Round Corners - top, right, bottom & left corner radius values
  5. Drag bar - color, alpha and thickness of the drag bar.