Figure 8-33. Animations connected to thumbnail images
173
FLEX PHOTO GALLERY
Finishing touches
Now that we have connected the animations and the thumbnails shown in the View Panel, the functionality
of the photo gallery is complete. To make this gallery the same as the original design that you
saw at the start of this chapter, all we need to do is add some CSS styling (see Chapter 2). Figure 8-34
shows the design before CSS styling.
Figure 8-34. Design before CSS styling
The styling we??™ll use is included with the download files for this chapter in the file PhotoGallery.css.
We??™ve added the name of the photographer along the top by using a couple of label components.
Figure 8-35 shows the final design.
174
CHAPTER 8
Figure 8-35. Our final design
Summary
While creating our photo gallery, we took advantage of some significant new components and techniques.
We used the Tile component to create our Thumbnails panel and used a repeater to populate
the thumbnails. We aligned our images via the alignment properties on both the image and the HBox
that held them.
We also explored how to create animation effects. In our example we used the glow and zoom animations
to create the rollover effects for our thumbnails.
In the next chapter, we??™ll use a similar basic design layout with more advanced functionality.
Specifically, we??™ll begin working with video clips instead of static images, and we??™ll explore drag-anddrop
functionality.
175
FLEX PHOTO GALLERY
What we??™ll cover in this chapter:
Drag-and-drop List controls
Manually adding drag-and-drop
Working with videos
Files used in this chapter:
Assets folder
dragAndDropCode.
Pages:
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134