Creating scrolling images, panels, and lists

When your projects require fitting large amounts of content in a limited space, creating scrolling images, panels and lists can be a great solution. Flash Catalyst includes two interactive components specially designed for this purpose: data lists and scroll panels.

A data list is a special type of component used to retrieve and display a series of related items; though the name data list is a little misleading. Each unique record in a Flash Catalyst data list can include artwork, text, or a combination of both. It doesn’t need to be a list at all.

Traditionally, a data list might look something like a spreadsheet or data table.

Using Flash Catalyst, you can build a Data List component that displays a tiled wall of images.

A list can be a scrolling filmstrip or series of thumbnails, from which you select and view other content or navigate to new locations in the application. By adding a scroll bar, you can extend the list to include any number of items.

You can create a horizontal data list; adding scroll arrows allows movement forward and backward through the list.

Overview of data lists

  • You can arrange a data list horizontally, vertically, or in a grid on the page.

  • By adding a scroll bar, you can extend the list to include any number of items.

  • Every data list component must include a master item called the “repeated item.” The repeated item is a template that defines the appearance of every item in the list. For example, you can create a repeated item with an image, descriptive text, and different up, over, and down states. Each item in the list shares these common elements and properties. Changes applied to the repeated item are applied to every item in the list automatically at runtime.

  • Most data lists are connected to a data source and populated with data dynamically at runtime. A developer can make this connection using Adobe Flash Builder. In Flash Catalyst, you can specify placeholder data to display in the list using the Design-Time Data panel.

Create a data list component

  1. Position a copy of the first data list items on the artboard. If the list requires a slider, scroll bar, or similar control, add it to the artboard. Size the control according to your design plan. Select these objects.

    Images and text used as the repeated items

    Include a scroll bar for a data list with several items.

  2. In the HUD, click Choose Component > Data List.

    Flash Catalyst creates the data list and issues a message in the HUD. The message asks you to specify which graphic elements to use for the required part of the data list. The required part is a repeated item.

  3. With the new component still selected on the artboard, click Edit Parts in the HUD.

    Flash Catalyst enters Edit-In-Place mode to allow you to edit the parts and states of the component.

  4. On the artboard, select the items to use as the repeated item. Do not include the scroll bar or other controls in the repeated item.

  5. In the HUD, click Choose Part > Repeated Item (Required).

    Flash Catalyst converts the selected item into the repeated item part. By default the list is aligned vertically.

  6. Select the repeated item and choose Vertical, Horizontal, or Tile in the Layout section of the Properties panel. Use the Properties panel to apply additional formatting, such as cell padding. Use the selection handles to size the repeated item bounding box according to your design plan.

  7. Double-click the repeated item to open it in the Pages/States panel.

    A repeated item has normal, over, and selected states.

  8. Edit the items in each state according to your design plan.

  9. Close the data list component and return to the artboard.

    You have created a data list component, but at first it displays the same repeated item over and over. You can use the Design-Time Data panel to replace the temporary images with more realistic data. The design-time data shows a developer how the application looks at runtime.

Add design-time data

  1. Select the data list component on the artboard and open the Design-Time Data panel.

    The Design-Time Data panel shows the items in your list. At first, every item in the list is the same.

  2. If the repeated item includes text, you can edit the text for each item in the list. If the repeated item includes an image, click one of the temporary images in the Design-Time Data panel.

    The Select Asset dialog box opens.

  3. In the Select Asset dialog box, select an image to display in the data list and click OK.

    The Design-Time Data panel updates to show the new images and text.

    Note: If the project library does not include the image you want to display in the data list, you can import it.
  4. Replace the other repeated items with design-time data.

  5. To add additional items to the data list, click Add Row and replace the temporary image with an image of your choice.

Design-Time Data panel (shown expanded)

Select Asset dialog box

Note: After creating the data list, you can add additional images or text to the repeated item. Open the repeated item and add the first instance of the new image or text. Select the new item and choose Modify > Add Text To Design-Time Data or Add Image To Design-Time Data. A new column is added to the Design-Time Data panel. To remove an item from the repeated item, select it and choose Modify > Remove From Design-Time Data.

You can view an excellent example of creating a data list here: Flash Catalyst Beta 1: Building a Website II.

Overview of a scroll panel

A common challenge in web design is finding space in the available window to display all of the necessary content. One solution is to create scrolling panels. A panel creates a well-defined container for content in the user interface. By adding scrolling content and a scroll bar, you can place a large amount of information in a limited space. To create a scrolling panel in Flash Catalyst, you need:

  • An object to define the panel area, such as a rectangle shape (optional)

  • Scrolling content, such as a long block of text or a series of images (required)

  • A scroll bar used to scroll the content (recommended)

    Note: You can create a scroll panel without a scroll bar, but it’s useless unless users can scroll to see the hidden content.

Create a scroll panel component

  1. Import or draw an object to define the panel area (optional).

  2. Add the content that you want to scroll. To create scrolling text, use the Text tool in the Tools panel.

  3. Position the scrolling text or align a series of objects in the panel area. Leave some room along the right or bottom edge of the panel for a scroll bar.

    Note: Your scrolling content extends beyond the panel area temporarily.
  4. Create a scroll bar component or drag a scroll bar from the Wireframe Components panel. Position and size the scroll bar to match the size of the panel area.

    Two examples of scroll panel parts, before creating the scroll panel component
  5. Select all of the parts for the scroll panel. In the HUD, click Choose Component > Scroll Panel.

    A message in the HUD reminds you to edit the parts of the component.

  6. Click Edit Parts.

    Another message tells you how to create the scrolling part of the panel.

  7. Select the objects you want to scroll (text block or series of objects).

  8. In the HUD, click Choose Part > Scrolling Content.

    A new bounding box defines the visible area of the scrolling content.

  9. If necessary, size the bounding box of the scrolling content to fit within the panel area.

  10. Use the Breadcrumb bar to close the scroll panel. Choose File > Run Project to test the component.

    Completed scroll panel component used to scroll a block of text in a confined panel area

For more information on creating text in Flash Catalyst, see Creating shapes, lines, and text.