This section covers in detail all of the available user interface elements which can be used to build slideshows. They are grouped in the same categories as used in the Components Panel in the wizard, with each group in a separate subtopic.
While great detail is included in this section of the wizard, even more information on every component is available in the API reference, under the 'Equivalent Class File' listed for each element.
Note that a different set of components is available when editing an inline touch-mode layout. For more information, see the documentation for the Touchscreen Content section.
Usage Tip: Many of the commonly edited parameters accessible in the Properties Panel are noted. However, not all are included. For all parameters in the Properties Panel, you can hover over their names for a detailed description.
A quick and printable reference cheatsheet summarizing all elements is shown in the following table:
Element Name | Quick Description |
---|---|
Layout Containers - Used to hold and arrange other elements | |
HFlowBox | [Rarely used] Same as HBox, except wraps child elements to multiple rows if needed. |
HDividedBox | [Rarely used] A relative-position horizontal container, with each child resizable by the user. |
VDividedBox | [Rarely used] A relative-position vertical container, with each child resizable by the user. |
HBox | A relative-position horizontal container, with each child positioned adjacent to the next. Useful for control bars. |
VBox | A relative-position vertical container, with each child position adjacent to the next. Useful for vertical control bars. |
HoverCanvas | A special absolute-position layout container which automatically hides when the user stops interacting with it, and re-appears when the user moves the mouse again. |
HoverSlideCanvas | A special type of HoverCanvas (see directly above) that hides itself by sliding out of view to one side or another. It only differs from the HoverCanvas in its special built-in hide/show effect. |
Canvas | An absolute-position layout container. Used to hold/organize a group elements. |
Panel | [Rarely used] A "pod"-style layout container with a title, useful for segmenting a user interface. |
Tile | [Rarely used] A layout container which lays its children out in a grid. |
TabNavigator | [Rarely used] A layout container with one child visible at a time, with each accessible by a tab. |
Image Progress Loaders - Display loading progress | |
Centered Loaders Block | Special starter element which contains all loaders, centered and ready to be dropped into an Overlay layout view. |
SingleLoader | Displays the progress of loading when a single image is being loaded. |
GroupLoader | Display the progress of loading when a group of images are being loaded. |
Slideshow Image Displays - Displays the images/slides in the slideshow | |
ImagesStandard | The most common image display element. Displays all slides in the standard slideshow view, with transitions between each slide. |
ImagesScrollList | Displays all slides in a contiguous row, column, or grid. Allows multiple slides to be visible at a given time. |
Images3DWall | [Pro version only] Display all slides on a virtual 3D wall or carousel or wave; slides can be brought into focus to be viewed up close. |
ImagesCoverFlow | [Pro version only] Displays all slides in an iTunes-style coverflow. |
ImagesStarfield | [Pro version only] Display all slides in a virtual 3D starfield. |
ImagesScatter | [Pro version only] Displays all slides scatterd across a virtual table. A single slide can be brought up from the table to be viewed up close. |
Main Slideshow Elements - Essential slideshow elements | |
Pre-Built Hover-only Control Bar - NumberBar | This special starter element is a horizontal control bar which contains a NumberBar; it is only visible when the user moves their mouse. It is designed to go at the bottom of the slideshow, but may be moved anywhere. The default buttons can be customized as needed. |
Pre-Built Hover-only Control Bar - Thumbnails | This special starter element is a horizontal control bar which displays a row of thumbnails; it is only visible when the user moves their mouse. It is designed to go at the bottom of the slideshow, but may be moved anywhere. The default buttons can be customized as needed. |
Pre-Built Control Bar - NumberBar | This special starter element is a horizontal control bar which contains a NumberBar; it is always visible, regardless of interaction. It is designed to go at the bottom of the slideshow, but may be moved anywhere. The default buttons can be customized as needed. |
Pre-Built Control Bar - Thumbnails | This special starter element is a horizontal control bar which displays a row of thumbnails; it is always visible, regardless of interaction. It is designed to go at the bottom of the slideshow, but may be moved anywhere. The default buttons can be customized as needed. |
ImageTree | [Rarely used] Displays all galleries and images in a hierarchical tree which can be used for navigation. |
Thumbnails | Displays the thumbnails for all images in the currently-selected gallery. Analogous to the v3 "ThumbBar". |
NumberBar | Displays a row, column, or grid of numbers, with each one representing a slide in the currently-selected gallery. Hovering over a number provides a tooltip with more image information. Analagous to the v3 "JumpBar". |
GallerySelector | Displays a grid of all galleries, allowing for selection of a gallery. Analogous to the v3 "Gallery" element. |
GalleryBar | A compact bar which displays the title of all galleries, allowing selection of a gallery. Hovering over a gallery's title displays its description and thumbnail. |
Caption | Displays the current image's title and caption in a box which can be toggled on and off via the CaptionToggleButton element. |
DynamicScrollableText | Displays scrollable text which changes based on the current image, providing image-specific information. Can be used to display image title, caption, etc. |
DynamicLinkButton | A link button which can be clicked to perform some action (such as going to a URL). The label and link can change based on the current image, providing image-specific information. |
DynamicText | Displays NON-scrollable text which changes based on the current image, providing image-specific information. Can be used to display image title, caption, etc. |
Slideshow Control Buttons - Provide control over the slideshow | |
AutoplayLoopToggleButton | A checkbox which allows the user to enable or disable autoplay looping. |
LastButton | A button which causes the slideshow to jump to the final image in the gallery. |
PlayPauseButton | Plays/pauses the slideshow. Controls autoplay, audio, and video. |
FirstButton | A button which causes the slideshow to jump to the first image in the gallery. |
PreviousButton | A button which causes the slideshow to jump to the previous image. |
LayoutJumpButton | A button which can be used to trigger a change between various layout views. |
NextButton | A button which causes the slideshow to jump to the next image. |
AutoplayToggleButton | A play/pause button which only controls autoplay (not audio or video). |
FullScreenButton | Allows the user to toggle in and out of fullscreen mode. |
CaptionToggleButton | Allows the user to hide or show any Caption elements which have been added in the slideshow. |
PrintButton | Allows the user to print the current slide. |
Slideshow Option Controls - Provide control over various slideshow options | |
AutoplayDelaySlider | Allows the user to control the delay between each image when autoplay is enabled. |
AutoplayProgressDisplay | Displays an indicator of how long until autoplay causes the slideshow to automatically progress to the next image. |
GotoBox | Allows the user to type in the index of a number and jump directly to it. |
PagingControlSizer | Allows the user to specify the size of each tile in a Thumbnails or NumberBar element. |
Extras / Decorations - For enhancing the slideshow user interface | |
HRule | Provides a horizontal line, often used as a separator between two children in a vertical relative-layout container. |
VRule | Provides a vertical line, often used as a separator between two children in a horizontal relative-layout container. |
BorderBox | A box which acts as a background element, with background, border, and/or drop shadow. Can be used to display the current slide's dominant color. |
Spacer | Used in relative-layout containers to provide spacing between elements. |
Audio Control Elements - Provide control audio | |
AudioPlayPauseButton | Plays/pauses audio on one or more levels (background, gallery-specific, image-specific). |
AudioControlCanvas | A special holder element which should be used for holding audio control elements to ensure that they control the appropriate audio level(s). |
AudioScrubBar | Allows the user to scrub the position of audio on one or more levels (background, gallery-specific, image-specific). |
AudioMuteButtons | Allows the user to mute all audio. |
AudioControlBar | A basic audio controller; can be used to control audio on one or more levels (background, gallery-specific, image-specific). |
AudioLoudButton | Allows the user to un-mute all audio, making it full-volume. |
AudioVolumeSlider | A slider which allows the user to adjust the volume of all audio. |
AudioVolumeToggleButton | Allows the user to toggle between muting/unmuting all audio. |
AudioVolumeControl | Provies a mute button, a volume slider, and a loud (full-volume) button to control the volume all audio. |
AudioLoadBar | Displays the loading progress of audio on one or more levels (background, gallery-specific, image-specific). |
AudioInfoText | Display text with information specific to currently playing audio on a certain level (background, gallery-specific, image-specific). |
Static Generic Elements - Generic user interface assets which don't change | |
Button | A generic button which has no default action; can have custom actions applied to it. |
LinkButton | A generic link button which has no default action; can have custom actions applied to it. |
Image | A non-changing image, used for items such as logos or background images. |
Text | Displays non-changing text; can be multiple lines (whereas Label cannot). |
Label | Displays non-changing one-line text. |
FlexVideoPlayer | [Rarely used] Displays a static video. It is unrelated to the video associated with a slide, and is rarely applicable. |
Special Starter Elements - Helpful building blocks with preset configurations | |
Dominant-slide-color BorderBox | A BorderBox which is configured to automatically display the current slide's dominant color. Can be used to make the slideshow background match the current slide. |
Plain Title Text | A dynamic text box which displays the current image's title and can be fully styled. |
Plain Caption Text | A dynamic text box which displays the current image's description / caption and can be fully styled. |
Centered Loaders Block | Special starter element which contains all loading indicators, centered and ready to be dropped into an Overlay layout view. |
Pre-Built Hover-only Control Bar - NumberBar | This special starter element is a horizontal control bar which contains a NumberBar; it is only visible when the user moves their mouse. It is designed to go at the bottom of the slideshow, but may be moved anywhere. The default buttons can be customized as needed. |
Pre-Built Hover-only Control Bar - Thumbnails | This special starter element is a horizontal control bar which displays a row of thumbnails; it is only visible when the user moves their mouse. It is designed to go at the bottom of the slideshow, but may be moved anywhere. The default buttons can be customized as needed. |
Pre-Built Control Bar - NumberBar | This special starter element is a horizontal control bar which contains a NumberBar; it is always visible, regardless of interaction. It is designed to go at the bottom of the slideshow, but may be moved anywhere. The default buttons can be customized as needed. |
Pre-Built Control Bar - Thumbnails | This special starter element is a horizontal control bar which displays a row of thumbnails; it is always visible, regardless of interaction. It is designed to go at the bottom of the slideshow, but may be moved anywhere. The default buttons can be customized as needed. |