<< Chapter < Page | Chapter >> Page > |
Changing the height of the image
If you grab the thumb with the mouse and move it to the left or the right, two obvious visual effects occur. The first is that the value representedby the current position of the thumb is displayed above the thumb as shown in Figure 3.
(As you will see later, the value is also displayed in a Flex 4 application, but by default the appearance is white numerals on a blackbackground.)
The second visual effect
The second visual effect of moving the thumb is that the height of the image changes to the value represented by the position of the thumb on the slider.
(An Image object has a property named maintainAspectRatio . By default, the value of this propertyis true. Therefore, when the height is changed, the width changes in a proportional manner.)
Note that the upper-left corner of the image remains anchored to the same point as the height of the image changes as shown in Figure 3.
Creating the layout
Once you create your new Flex 3 Project, there are at least three ways that you can create your layout using Flex Builder 3:
Expose the components tab
When you select the Design tab in the upper-middle window of the IDE, the lower-left window changes to the appearance shown in Figure 4 with theFlex 3 (mx) Components tab exposed.
The list of available components that you see in Figure 4 also appears when you create a new project in Flash Builder 4 and specify the use ofthe Flex 3 compiler.
A list of available components
Although they aren't all shown in Figure 4 due to space limitations, the Flex Builder 3 Components tab lists all of the components that you can use in your Flex application grouped into the following categories:
Expose the design window
Selecting the Design tab mentioned above also exposes the Flex Builder 3 designwindow shown in Figure 5.
A similar design window is exposed when you create a new project in Flash Builder 4 specifying the Flex 3 compiler and then select the Design tab. The purpose is the same but some of the items at the top of the design window in Flash Builder 4 are different.
Drag components onto the Design tab
You can drag components from the Components tab shown in Figure 4 onto the Design tab shown in Figure 5 to create your layout in the Flex Builder 3design mode or in the Flash Builder 4 design mode. As you do that, the corresponding XML code is automatically generated for you.
Notification Switch
Would you like to follow the 'Introduction to xml' conversation and receive update notifications?