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)
Properties, Triggers & Actions
See Common collection properties for details of common properties shared by different all collection types
- 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
- Display loading images: shows the loading indicator set by the experience property
- 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
- 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
- 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
Autoscroll is discussed in the article about common collection properties.
- 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.
See Triggers Overview to get details of common triggers shared by all assets or collections
- First item is reached: Raised when the first item has been reached.
- Last item is reached: Raised when the last item has been reached.
- 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.
- Autoscrolling is paused: Raised if autoscrolling is paused due to a user action
- Autoscroll is activated: Raised if autoscrolling has started
- Autoscroll is deactivated: Raised if autoscrolling has been stopped
- Is autoscrolled: Raised if the collection has autoscrolled
The screenshots below illustrate the set of triggers specific to the Asset Grid Collection.
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.
- Start autoscroll: Start autoscroll for this collection if it isn't already running
- Stop autoscroll: Stop autoscroll for this collection if it hasn't already stopped
- Toggle autoscroll: Start autoscroll if it's stopped, stop it if it's running
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 illustrates the set of actions specific to the Asset Grid Collection.
Article is closed for comments.