This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Take a look at the directory structure. As you know from the prior series, there are certain folders which are inherent to a Flex Builder project, including the bin folder and the html-template folder. We will largely ignore these folders for the purposes of this series, looking only a few times in the bin folder. The bin folder is where compiled binary code resides, and the html-template folder is where you could provide templates for use in the bin folder.

Notice that we have three linked folders within the project: data, gallery, and ne_assets, also called here ne_assetsSolution. These folders point to shared folders that are used across several projects. The remaining folders are all part of the project files themselves. You will see that some of the folders contain ActionScript class files, which we will be using, and some of the folders contain assets we will be using; such as these SWF files and CSS files, as well as some graphic files that we will work with.

In the root of the project you will see a series of MXML files. We will be working on these applications throughout the series.

Let's take a look at the Natural Experiences application. Double click to open it in the Editor. We will be looking at the code here in detail later. So let's just look at the application itself. Go ahead and run the application. The whole point here is that this looks nothing like a Flex application; that's a lot of what we are doing in this entire series is customizing our Flex applications to use the visual styling and skinning capabilities and blending capabilities which are available to us inside of the Flash 9 player.

A few visual behaviors we will be working with here to point out include the background animation. Its just a simple animated PNG file which was actually built out inside of Adobe Flash, and frankly, it could be done more smoothly and more elaborately, but in a course such as this some of our examples are academically simple.

The part to focus on here is the logo, Natural Experiences. That's the Poetica Type Font, but notice what's happening to the colors as the clouds move behind it. That's because the Blend Mode has been applied to that Type Font which has been embedded and sized within our application.

Then look at the word Natural, you will see that a Drop Shadow filter has been applied to it as well as a Glow filter. Refresh the application by hitting Ctrl+Refresh in your web browser. Hit it a few times.

There is a total of four different background images. Each of these images is being loaded in from the file system based on data which is being loaded in from a XML file, and then we will write code to randomize which background is selected during any given execution of the application.

Now take a look at the combo box next to the Categories label in the upper right hand corner. Expand it, and take a look at the background. We will be re-skinning this component using a Flash template to make the background transparent. You can see the clouds floating by behind the combo box, and then once you have taken a look at that, take your mouse back off of the combo box, and notice that in the upstate it has a white border which is different from its default gray gradient border. Go ahead and close that file.

One point we will also be discussing is the benefits and drawbacks of having continuous animation inside of our application. Let's go ahead and close the browser, and before touring the rest of the application, let's remove the animation.

Scroll down to line 427, where you will find an image component whose source is a file called clouds.swf in the ne_assetsSolution folder. Select that line, right click, select Source, and then select Add Block Comment. Save that change, and then run the application again. We see the same application, but we have removed the background animation.

Other features to note in here include the gradient, which has been applied to the header of this panel on the left. Notice that the background of both panels, it appears to be a supersaturated view of the background image, whatever it may be. We will create this effect first by applying a background color to the left hand panel, and then an Overlay Blend Mode, but we will take it quite a few steps further with the right hand panel, where we will create a programmatic skin.

As I move over the right hand panel, notice that the images begin slowly moving. We are going to create mouse-aware animation; the further I move away from the center line, the faster the images move. The closer I move, the slower they go, and if I move in the opposite direction, they speed the other way.

Then if I select any one of the images, notice that a behavior has been applied, such that when I roll over the image it increases in scale, and we see the photographer's name appear below the image.

Select the image, and you will see a pop-up fly onto the screen containing the same image, though in a larger format, along with additional information about the image; the name of the photographer and a description. When I am finished looking at the details about the image, I will close the pop-up.

The user may also want to look at the images in a larger state. Take a look at the upper right hand corner of our scroll window panel. Unlike most Flex panels, this panel has a button in the upper right hand corner, because this is not simply a Flex panel component, its a custom component which we are going to create, not through MXML, but as an ActionScript class, which gives us more detailed control over the process as well as in some ways reducing our file size.

We will be creating the button that we see in the upper right hand corner, first by embedding external vector graphics into our application and using them for the two different visual states of the button, but then later we will be using the drawing API to programmatically draw that image, again, seeing some file size improvements from using that particular API rather than embedding external assets.

We will be enabling click behavior for the button, which ultimately will trigger a transition for our panel; changing its scale, changing the size of the images, and completely adjusting the layout of the images within the panel.

Now, in the prior series you may have worked with a Tile component in order to create this form of layout, however in some circumstances the Tile component may limit your ability to animate the Tile contents. So we are going to take a more detailed programmatic approach to layout and individually calculate the positioning for each one of these images based on the current state of the panel.

Beyond this, we are also going to look at drag and drop features which are available within the Flex environment. Go ahead and close your browser, and return to Flex Builder.

Take a look at the directory structure. As you know from the prior series, there are certain folders which are inherent to a Flex Builder project, including the bin folder and the html-template folder. We will largely ignore these folders for the purposes of this series, looking only a few... click to read more