This component is useful for laying out a set of like
objects, such as a set of products. The Tile component responds to the amount of space it is given to
organize the set of images that we are going to send to it.
1. Place a Tile component inside the Panel component. You will be presented with a dialog box
that lets you set the size of the Tile component. Click OK, and stretch the Tile component until
it fills up the entire content area of the Panel component (Figure 8-10).
Figure 8-10. Tile component
159
FLEX PHOTO GALLERY
2. In the Tile component, place one HBox component, and then place an Image component inside
that. The HBox component will be a bit larger than the image, which will give it space for the
zooming effect later, and will help us properly center the image. This HBox should be about 70
by 70 pixels (Figure 8-11), so type 70 into both boxes in the Insert HBox window.
Figure 8-11. HBox component
3. The Image component should be 50 pixels by 50 pixels. This size is large enough to get a sense
of the photograph but still leaves enough space for all the images. The Image component
should sit at the top left within the HBox (Figure 8-12). Change this to be centered by setting
the Horizontal and Vertical alignment pulldowns within the HBox component to center and middle,
respectively.
160
CHAPTER 8
Figure 8-12. Image component in position
Proper alignment
If you look closely at the Image component, even without an image present, you
can see how the images will ultimately be aligned.
Pages:
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126