IT tutorials
 
Graphics
 

Adobe Flash Catalyst CS5 : Setting data list properties

11/18/2011 4:42:18 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
The layout of a Data List component is determined mainly by its repeated item properties—size, position, orientation, spacing, and so on.

You can modify its properties in the artboard and by changing its values in the Properties panel.

Size and position the bounding box

The repeated item bounding box indicates the visible and scrollable area in the data list. You define this space by sizing the bounding box in the artboard or in the Properties panel.

1.
Make sure the repeated item is still selected.

2.
In the Common section of the Properties panel, change the height (H:) value to 500.

The bounding box height adjusts. You can now see the five sample records that were added to the list automatically. You can also size the bounding box using its handles.

3.
Use the handles to resize the bounding box height and width and position it to fit in the space designed for the reviews. The height of the box should be equal to the height of the vertical scroll bar.

Edit the repeated item layout

By default, the repeated item is aligned vertically. There is a small amount of space between each record in the list, and the artwork is positioned right up against the left, right, top, and bottom sides of the bounding box. This is called padding. You can change these settings in the Layout section of the Properties panel. You can also change the appearance of objects in the Normal, Over, and Selected states.

1.
Make sure the repeated item is still selected.

2.
Expand the Layout section of the Properties panel.

A repeated item has three possible layouts. These include Vertical, Horizontal, and Tile. The default setting is Vertical, and that’s what you want for the restaurant reviews. You can also change the alignment of the list within the bounding box.

3.
Change the Spacing value to 10.

Spacing
is the distance between each item in the list. Padding refers to the space between the list items and the bounding box.

4.
Select the Horizontal layout option.

The items align horizontally.

5.
Select the Tile layout option.

The Tile option is used to arrange a collection of images or text in a tiled mosaic pattern. You can adjust the direction and alignment of the tiles. You can also adjust the spacing between rows and columns in the mosaic.

Tip

A data list has the same properties as every other Flash Catalyst built-in component. For example, you can change its size, opacity, and rotation. You can enable or disable it, add a tooltip, or add a drop shadow.

6.
Change back to the Vertical layout option.

Edit the repeated item states

Every repeated item begins with slightly different Normal, Over, and Selected states so that a user can see when they are rolling over or selecting an item in the list. You can edit the states of the repeated item template, just like you can with components.

1.
Double-click the repeated item in the artboard to edit it in Edit-In-Place mode.

The Normal, Over, and Selected states appear in the Pages/States panel.

Note

You cannot duplicate, add, or remove states in the repeated item, but you can modify the artwork that appears in each of the default states (Normal, Over, and Selected).

2.
Select the Over state in the Pages/States panel and open the Layers panel.

The Over state includes the Item Highlight Rectangle to show when the pointer is over the item in the list.

3.
Select Item Highlight Rectangle in the Layers panel.

4.
In the Common section of the Properties panel, change the rectangle’s fill color to pale green.

Notice, the rectangle’s opacity is already set to 30, which makes it semi-transparent.

5.
Run the project in a browser.

6.
Click any of the restaurants in the horizontal list, and then click Reviews to see your new data list.

7.
Use the scroll bar to see all five items in the list.

Right now every item has the same artwork. You are going to change that next using design-time data.

8.
Roll over and select an item in the list to see the Normal, Over, and Selected states.

9.
Close the browser and return to Flash Catalyst.

10.
Click Review_Popup in the Breadcrumbs bar.

This closes the repeated item and the data list. The Review_Popup component is still in Edit-In-Place mode.
 
Others
 
- Adobe Illustrator CS5 : Learning the Truth About Transparency (part 2)
- Adobe Illustrator CS5 : Learning the Truth About Transparency (part 1) - Understanding Transparency Flattening
- Dreamweaver CS5 : Using Dreamweaver Templates - Adding Content to Template Documents
- Dreamweaver CS5 : Using Dreamweaver Templates - Using Editable Regions
- Adobe Photoshop CS5 : Fixing Depth-of-Field Problems
- Adobe Photoshop CS5 : Using the Dodge and Burn Tools
- QuarkXPress 8 : Combining type and graphics
- QuarkXPress 8 : Fine-tuning typography
- Adobe After Effects CS5 : Curves: Gamma and Contrast
- Adobe After Effects CS5 : Levels: Histograms and Channels
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.