go to next page

Introduction and Code Requirements

In the early days of my business, I did a lot of 3D animation and needed a means to display portfolio samples online. The problem with any online display is that portfolio samples change over time. Several years ago, I started working on an XML-based portfolio viewer that allowed rapid change of portfolio data without having to modify an online .SWF.

The 'viewer' consisted of a small number of UI widgets or 'components'; a thumbnailer to display thumbnail images, a status area, an instructions area, a synopsis area to display information about a portfolio item, and a 'play' button. Clicking the 'play' button opened an html page in a new window containing the image or animation.

Although changing portfolio information was easy (just edit the XML file and upload), there were still problems with this approach. I did not like the idea of opening up a new window unless it was absolutely necessary. Many portfolio items are images, .SWF animations, or videos. These items do not typically require a large window to display. It is more convenient to display the portfolio sample in the same screen area as the portfolio navigation (thumbnailer) and other components.

The other problem is layout. Every time a site changes, previous component size and position is likely to be incompatible with the new design. Creating a new viewer for a new site requires manual modification of the layout. It is better to exert as much control as possible over the layout in XML.

No, this is not a FlexBuilder 2 tutorial, however, I do want to illustrate how to create a general-pupose application with both layout control and thumbnailer control via XML. Even if you do not use the entire application, I hope there are one or more utilities you may find useful in future projects.

This is more of a detailed application deconstruction than a tutorial. The deconstruction is presented in two (or possibly three) parts. The first part discusses how to create a general-purpose thumbnailer and associated controls, whose properties are easily modified via XML. Actual display of portfolio items is handled by opening a new browser window and displaying an html page containing the portfolio item.

If there is sufficient interest, I will create another writeup covering the development of a general-purpose asset viewer for use in this application.

For now, let's consider how to develop a class library to handle the navigational and informational part of the application. This requires the ability to exert control over both the layout and portfolio data.

Layout Control

As indicated above, I don't want to re-invent the wheel. Basic layout control via XML is best handled over the long term with FlexBuilder 2. Like many other developers, I've had to work on projects requiring dynamic layout control that can not take advantage of Flex due to client budget or other constraints. This tutorial deconstructs a simplified version of several class files I have used in the past for such projects.

What kind of layout control is desirable for the portfolio viewer? It's easy to say position control, but I really don't want to grab a calculator and work out absolute coordinates of one component relative to another for every small change. The central component of the navigational part of the viewer is a multi-dimensional thumbnailer. Once the thumbnailer position is specified, its width and height are determined by the thumbnail sizes and the number of thumbnails initially viewable (without scrolling) in the horizontal and vertical dimensions. Everything else in layout is either static or depends on the location and size of the thumbnailer.

What would be really cool is to state that some components are either absolute or relative. An absolute component is given an initial position or its position is computed from something that is already known, such as Stage dimensions. The width and height of an absolute component are specified in advance or they are computed from information that is known in advance.

A relative component observes another component. Whenever a component alters its position or size, it broadcasts a notification to observing components. Upon receipt of notification, an observing component alters its position according to its specified alignment.

With this type of control, it is possible to alter the orientation and position of a primary element such as the thumbnailer, and then have all observing controls alter their position based on alignment specs. This makes it very easy to experiment with different types of layouts in the concept and prototyping phases of a project. It also helps during production coding because we all know clients and account managers; they love to change things :)

Style control through XML is also useful. Whether layout 'components' are implemented through V2 or third-party components or wrappers around TextFields & MovieClips, it is always helpful to allow frequently changed properties to be set external to the application. For this application, style control is added to the layout.

Portfolio Control

Basic portfolio information consists of a title, short synopsis, url of a .jpg thumbnail image, and url of the actual portfolio sample. It might also be useful to notify the viewer of the run time and file size of a sample before they elect to view the item. It is very easy to specify this information in an XML file.

Quick Summary

Based on this very preliminary description, it seems that the application consists of a set of named 'components' arranged in a layout. The term 'component' refers to a UI item in the layout which may or may not correspond to a packaged component. Layout components are either absolute or relative. An absolute component is positioned at either fixed coordinates or at coordinates that can be computed from known information such as Stage dimensions. Relative components observe other components and derive their position information from the observed component.

Most layout components seem to be either simple static MovieClips, MovieClips with button actions, or TextFields. It would be cool to develop a general-purpose UI Widget architecture for layout display, but I don't want this to turn from a very long deconstruction into a book. For tutorial purposes, we can presume a base 'layout item' class. The base class is a wrapper around the simplest and most common layout items. Other components, such as the thumbnailer are implemented with custom classes that extend the base layout item class. It is convenient to specify components as 'custom' in XML and associate a class with their creation. This enables custom components to be implemented in different ways at runtime, without altering the code.

Once the layout is implemented on Stage, portfolio data is used to load the thumbnailer. For tutorial purposes, the following conditions are imposed.

1 - On rollover of a thumbnail image, the title of the portfolio sample is displayed.

2 - When a portfolio thumbnail is clicked, the complete summary appears in the synopsis area. The 'play' button is displayed. An indicator is displayed in the thumbnail area to indicate the currently selected item.

3 - When the play button is clicked, the url from the portfolio xml file is opened in a new browser window. In the next increment of this application, this step is replaced with a more general-purpose asset browser, integrated into the layout.

For tutorial purposes, everything is implemented using the base Flash 8 Professional install.

The above description is pretty vague. Let's firm up some of the details by locking down the layout of the XML files that control the portfolio data and layout.

go to next page