Do this in the Design view, in the component properties.
170
CHAPTER 8
1. Select the thumbnail Image component. Notice that there are a limited number of properties
that can be adjusted in the Standard view (Figure 8-27).
Figure 8-27. Thumbnail image properties
2. As we did earlier in this chapter, switch to
the Category view of the component properties
to get access to more properties, especially
for events and effects. Here we can call
any function to run based on an action. In
this case, when the user clicks the thumbnail,
we want the function that we just created to
run (in this case, getImage(event)). So we
type getImage(event) in the Value column of
the click event, as shown in Figure 8-28.
Figure 8-28 . Type getImage(event)
in the Value column.
Run the project to see the interaction.
171
FLEX PHOTO GALLERY
Adding some sizzle
To make the interface more responsive, you often want to create a feedback animation to reinforce for
the user what is selected. In our case, if you go back to the original example, we have our thumbnails
grow and glow on rollover.
To create an animation within Flex, we first build it in the MXML, then attach it to an event, such as a
rollover.
1. Let??™s start by creating the effect of the rollover animation. In the Source view, add a
tag. This tag is used when you want more than one visual change to happen at once, as we will. It
also allows us to use one name for a set of actions. In our case, we will call it over since we will
be using it for a rollover (Figure 8-29).
Pages:
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132