Recently I had to develop a photo gallery in flash. I have had many challenges since I decided to use a combination of 2 design patterns, the “road” was overall quite bumpy but I managed to find solutions to all the problems and I decided to share some of them.
Now, according to wikipedia the term of liquid layout actually refers to controlling the appearance of the elements on screen, mostly in web browsers. What I want to show you is controlling the layout of your component whether it is used as a Flash CS3 component or a standalone Flex ActionScript Application.
Google showed me only a few good results and most of them where AS2 solutions:
My solution isn’t the best nor the worst, it’s just something I found easy to understand and use. The main idea is to break down the appearance of your components in several elements, each defined by it’s own class. So, consider the simplest example of a photo gallery with 3 elements – a thumbnail bar, a navigation panel and an area for the big image (detail from now on). For that we’ll need 4 classes – 1 for each element (Detail, Navigation and ThumbnailBar) and another one to wrap them all together (PhotoGallery). In terms of Model View Controller design pattern, the 3 visual elements will act as views and the PhotoGallery class will act as the controller.
The end result will look like this: (note that it’s not an actual photo gallery, implementation of this kind of functionality is beyond the scope of the project)
Here is the complete source of the project. I have used Flex Builder 3 Beta to build it.
I have described the steps to create a simple CS3 components here so I’ll just go on with the description of the classes. All the classes have a similar structure – a couple of properties and some methods:
- init() – handles some initialization
- createChildren() – creates instances of visual objects and adds them to the display list
- draw() – draws and arranges the visual objects
Now, if you are interested only in using it as a Flash CS3 component, you should check out lltest.fla and notice the 2 symbols in the library. The linkage properties for lltest symbol (lltest stands for liquid layout test) show that it’s base class is PhotoGallery.as, so this is your main class. If you are to use it as an ActionScript project in Flex, you need to open LiquidLayouts.as file. This is the class that creates the photo gallery (PG). Use the setSize method to set the PG’s size. As I have mentioned in the post about building flash cs3 components, your main class needs to define a public setSize method in order to see live preview happen, which means that both, the Flash IDE and your the LiquidLayouts class use the same method to resize and redraw the photo gallery.
Among the properties of the PhotoGallery class there are 2 public variables: _navigationSize and _thumbBarSize – these come with some meta tags which will make those 2 properties show up in the property inspector of the component in the Flash IDE (only if used as a component). The properties specify the size (well, the height actually) of the navigation and thumbnail bars. The height of the detail area will becalculated from total height minus the sum the other two:
_detail.setSize(_width, _height - (_navigationSize + _thumbBarSize));
As mentioned earlier, ThumbnailBar, Navigation and Detail classes have pretty much the same structure. It would have been easier to create a generic class having the common behavior and make our view classes extend it. But for the sake of an easier understanding of the project I decided not to shorten it. So each view class has a background and a textfield that shows the class’ name and dimensions. Whenever you resize the component it will show you the new width and height of each element.Finally, if you are using flex, you can set the desired size for the photo gallery and see the end result, or if you want to use it as a Flash CS3 component, export the lltest symbol to a SWC file, open a new AS3 file in Flash, reload the components panel and drag and drop the newly created component
I hope this is a good starting point for those who were searching for some information related to this matter.