Asset Grid

Table of Contents

    Description

    The Asset Grid allows your users to quickly scan through a collection of content in a horizontal or vertical sequence.

    Like most collections, the Asset Grid collection can include any asset type, including buttons and even other collections.

    Buttons in an Asset Grid can be used to trigger any action, including navigation to other scenes. To do so:

    • Create Simple or Image buttons in the same scene as the Asset Grid.
    • If Image buttons, select an image for each button, optionally using different images for Pressed and Released states.
    • Define actions for each button using the Triggers and Actions panel.
    • Drag these buttons into the Asset Grid either from the Scene Structure panel or from the design canvas.
    • Using Player or Composer's Preview Mode, click the button actively displayed in the Asset Grid to trigger its action(s)

    Asset_Grid.gif

    Properties, Triggers & Actions

    Properties

    See Common collection properties for details of common properties shared by different all collection types

    Appearance

    Collection appearance

    • Orientation   defines whether the orientation is horizontal or vertical
    • Rows   defines the number of rows displayed in the Asset Grid
    • Columns   defines the number of columns displayed in the Asset Grid
    • Scroll direction   identify the initial direction the collection is to be scrolled in order to see additional content
    • Scroll offset   the number of pixels the Asset Grid has been scrolled from its leftmost (if horizontal) or topmost (if vertical) position. With it you can synchronize - via binding - the scrolling of multiple Asset Grids at the same time.
    • Fill direction   identify the visual direction in which items in the collection are added when using the Scene Structure panel to insert new items
    • Center justify   toggle whether or not the collection should be left justified or center justified
    • Show curtain shadows   toggle whether or not a graphic effect should be displayed on either edge of the collection to indicate that unseen content can be scrolled into view

    Item appearance

    • Item width   defines the width of the items displayed in the Asset Grid
    • Item height   defines the height of the items displayed in the Asset Grid
    • Item spacing   defines the width of the space between the items displayed in the visible area of the Asset Grid
    • Show icons   displays "asset type" identification icons on the assets in the Asset Grid

    Controls

    • Show controls   toggle whether or not the Asset Grid's control panel should be visible
    • Show scroll indicator   shows a position bar indicating the position of the current focus item in relation to the other assets in the collection
    • You can set as well the style of your controls

    Collection-appearance.jpg

    Behavior

    Collection behavior

    • Scroll by   defines the number of items scrolled when the scroll arrows are tapped
    • Initial scroll effect   reminds users that the collection is scrollable each time the scene is displayed
    • Soft move speed   defines how quickly movement caused by a swipe will come to a halt. The higher the number, the longer it will take a swiped Asset Grid to come to a halt - i.e. the "softer" it will slow down.
    • Elasticity   defines the level of elasticity when repositioning the items

    Item behavior

    • Allow interaction with item   toggle whether or not an item can be interacted with. For example, if this property is turned on, touching a video in a collection can cause the video to play.
    • Show usage animation   toggles whether or not to display a graphic illustrating how to interact with this collection
    • Display items as thumbnails   toggle whether or not the actual content - images, videos, etc. should be replaced by thumbnail. Using thumbnails can improve performance if the content is very large.
    • Tap item to open   toggle whether or not a touch on an item will cause a copy of that item to open outside of its parent collection.
    • Drag and drop item to open   toggle whether or not a drag-and-drop action on an item will cause a copy of that item to open outside of its parent collection.
    • Resize ratio for opened item   identify the size multiple of an opened item in comparison to its size while inside the collection. A ratio of 1 means don't change the size, a ratio of 2 means double the size, a ratio of 0.5 means reduce the size in half, and so on.

    Collection-griad-behavior.jpg

    Triggers

    See Triggers Overview to get details of common triggers shared by all assets or collections

    • Is moved backward: Raised when this Collection is moved backward.
    • Is moved forward: Raised when this Collection is moved forward.
    • Is scrolled: Raised when this Collection has been scrolled.
    • Last item is reached: Raised when the last item has been reached.

    The screenshots below illustrate the set of triggers specific to the Asset Grid Collection.
    Triggers-grid.jpg

    Actions

    See Actions Overview to get details of common actions shared by all assets or collections

    • Backward: Move backward
    • Close all opened collection items: Closes all opened collection items
    • Forward: Move forward
    • Open item: Open a copy of the item outside its collection.
      • Index: The index of the item to open.
      • X: The X position to open the item at.
      • Y: The Y position to open the item at.
    • Scroll to an index: Scroll to an item using its index.
      • Index: The index of the item to scroll to.
    • Scroll to an item: Scroll to an asset using its Name property.
      • Item name: the asset name to scroll to.
    • Scroll to an offset: Scroll this collection to the specified offset in pixels.
      • Scroll offset: Number of pixels from the beginning edge of the collection.

    NOTE: The Open item action requires that the collection's Visible property be set to True and that the item to be opened is already scrolled into view. If the item is not yet scrolled into view, use the Scroll to or Scroll to an asset actions before calling Open item.

    The screenshot below illustrate the set of actions specific to the Asset Grid Collection.

    GRidActions.jpg