Skip to end of metadata
Go to start of metadata

 
 
 This iBloc is a UI component modeled after Apple's Cover Flow component. The images and labels can be controlled by data.

Key Features

An Image Flow widget adds the following capabilities to an iRise simulation:

  • Display a series of images in an interactive, visually appealing interface.
  • Load images and corresponding image labels into the widget from a datasheet.
  • Provide the reviewer with dual methods of manipulating the Image Flow display:
    • Clicking any image
    • Using the horizontal scroll bar
  • Use three unique event triggers:
    • On cover click fires an event when the reviewer clicks any image in the Image Flow display.
    • On cover change fires an event each time a different image is selected by the reviewer (using any method).
    • After animation fires an event at the completion of the animation that occurs when the selected image changes.
iBloc Details

Type: Widget
Latest Verison: 1.0
Supported By: iRise
Sample: iTravel - iBloc Showcase_v8.5.idoc (v8.5)


iBloc Version Studio Versions
1.0 8.5, 8.6, 8.7, 8.8



 

Usage Tips 

  • Optimize images with an external editor before adding them to an Image Flow widget (i.e., make sure they are consistent in size, and are not too large or too small).
  • Use a datasheet to feed images and image labels into the Image Flow widget (see below).
  • Use the event triggers unique to the Image Flow widget -- On cover change, On cover click and After animation -- to invoke navigation or other events in your simulation.
  • Experiment with the Image Flow widget's formatting properties to change the appearance of the widget in the browser.
Basic Usage
  1. Drag an Image Flow widget to the page.
  2. To add images, click the chooser button in the right side of the Images field in the Properties panel. The Editor box appears.
  3. In the Editor, click the chooser button in the first row to choose an image from your file system.
  4. To add more images, click the +Add link near the bottom of the Editor box.
  5. Click Done.
Populating the Image Flow Widget with a Datasheet

 

  1. Populate a datasheet with consistently sized images in one column, and corresponding text labels in another.
  2. On the page containing your Image Flow widget, drag the datasheet to the canvas to create a Get Record widget.
  3. Drag the Get Record widget to the Image Flow widget. The Select a Field or Record dialog box appears.
  4. Select the field label corresponding to the images column in your datasheet and click OK.
  5. Repeat steps 3-4 for the labels column if desired.

When the page is simulated in iRise Reader, the images in the datasheet will be displayed in the Image Flow widget.

Capturing Data from an Image Flow Widget
  1. Add an Image Flow widget to a page, and wrap it in a Form (right-click > Wrap in > Form).
  2. Add a Clipboard widget to the canvas.
  3. Drag the Image Flow widget to the Clipboard and choose Send Data in the pop-up menu.
  4. In the Select a Field dialog, choose an available data field or type a new one. Data flow will be created from the Image Flow widget to the Clipboard, and the data field properties will be displayed in the Properties panel.
  5. In the Properties panel, choose the Image Flow widget property that you wish to send to the Clipboard (typically this will be the Selected Label property).
  6. Add a Submit Form action to the canvas and link it to the Image Flow widget with the trigger of your choice.

When the page is simulated in iRise Reader, each time the reviewer triggers the Submit Form action, the value of the property you specified in step 5 will be sent to the Clipboard.

Special Properties

Property
Use
Expects / Produces
Name Tags a widget with a name that is referenced in Studio. It is never displayed in the browser. Text
Hidden Determines whether the widget is hidden in the browser by default (same as Hide in Browser for standard widgets). Boolean value (true or false).
Images Determines the source of the images that will be displayed. Can either be linked to a field in a datasheet, or a series of images can be added from your file system. An array of image files in GIF, JPG or PNG format.
Labels Determines the text labels that correspond to the images displayed in the Image Flow widget. Can either be linked to a field in a datasheet, or added manually. If added manually, the number and order of text labels should match the number and order of the images. An array of text values.
Camera Offset X Changes the horizontal orientation of the reviewer's vantage point when viewing the images. Images will shift to the left (for a negative number) or right (for a positive number). Any integer (defaults to 0).
Camera Offset Y Changes the vertical orientation of the reviewer's vantage point when viewing the images. Images will shift up (for a negative number) or down (for a positive number). Any integer (defaults to 0).
Camera Offset Z Changes the reviewer's vantage point along the Z-axis. Images will appear closer for positive numbers, and further away for negative numbers. Any integer (defaults to -1000).
Shape Changes the appearance of the images displayed in the Image Flow widget. Selection (Flat, Board or Cube).
Direction Determines the orientation of the images in the Image Flow widget in relation to each other. Selection (Horizontal or Vertical).
Selected Item Zoom Determines the position of the selected image in relation to the background images along the Z-axis. A negative number will cause the selected image to appear on top of the other images. Any integer (defaults to -190).
Rotation Angle Changes the rotation of images around the Z-axis. Any integer from -180 to 180 (defaults to 0).
Flip Angle Changes the rotation of images around the Y-axis. Any integer from -180 to 180 (defaults to -80).
Flip Point Changes the point at which the images start rotating. Any integer (defaults to 75).
Reflection Determines if a semi-opaque reflection of each image appears beneath the image. Boolean value (true or false).
Item Gap Determines the distance between images in the Image Flow widget. Any integer except 0 (defaults to 70).
Selected Item Gap Determines the distance between the selected image and the background images. Any integer (defaults to 120).
Both Sides Determines if images are displayed on both the front and back of the image frames. Boolean value (true or false).
Selected Label Designates a data field containing the image labels. Data flow must be sent to the Image Flow widget for the field label to be available. Text values contained within a field in a datasheet.

Note: To associate a data field with one of the properties listed above, click the small square to the right of the property field. The Set Property dialog will allow you to select a data field currently flowing into the widget.

Known Limitations
  • At this time, images cannot be captured by data flow.

Support and Feedback

People-Powered Customer Service for iRise

Labels:
None
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.