We want the design to be centered with a bit of space along the top, so we
specify this using the layout handles. Set either of the left or right layout handles to center. This will
keep our panel centered within the browser. Set the top layout handle to anchor with an offset of 10.
Our final Layout panel looks like Figure 3-6.
49
WORKING WITH STATES
Figure 3-5. Placing a Panel component
5. Set the properties for the panel.
Figure 3-6. Layout for the main panel
50
CHAPTER 3
Next, bring in the images that are to take up the first area. In our design we have three images: a larger
headshot image, called headshot.png, and two smaller images next to it, called small1.png and
small2.png. If you want to bring your own images in, it is important to set their size in a program like
Photoshop first. This keeps the images looking crisper and with a smaller file size than if you bring them
into Flex Builder and have them scaled there. It is generally best to modify and refine any images inside
Photoshop before bringing them into Flex as Photoshop is very effective at image manipulation. We will
be seeing more of this in Chapter 5. The headshot image is 295 pixels by 224 pixels, and the smaller
images are 170 pixels by 110 pixels each. While these images are in Photoshop, it is a good time to add
a border if you like. By adding a border in Photoshop, using the Pen tool or any other method you
want, the border will become a part of the image. This means that no extra processing power is needed
to display the border.
Pages:
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60