Skip to content Skip to navigation Skip to collection information

OpenStax-CNX

You are here: Home » Content » Introduction to XML » The Default Application Container - Flex 3 and Flex 4

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

The Default Application Container - Flex 3 and Flex 4

Module by: R.G. (Dick) Baldwin. E-mail the author

Summary: Learn about some of the differences between Flex 3 and Flex 4. Learn how to write a Flex application that controls the color, color gradient, and transparency of the background of the main window when a Flex application is played in Flash Player.

Note:

Click AppBackground01 and AppBackground04 to run the Flex 3 and Flex 4 projects discussed in this lesson. (Click the "Back" button in your browser to return to this page.)

Preface

General

This lesson is part of a series of tutorial lessons dedicated to programming with Adobe Flex.

What is Adobe Flex?

The previous lessons in this series have primarily dealt with XML issues and have nibbled around the edges of Flex. At this point, it is time to get really serious about Flex and start understanding what Flex, (as an XML programming language) , is all about.

According to one of the pages on the Adobe website,

"Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applications can be built using only the free open source framework, developers can use Adobe Flex Builder software to dramatically accelerate development."

Note:

Subsequent to the original publication of this lesson, Adobe has released Flex version 4 (in addition to Flex version 3) and has replaced the Flex Builder 3 IDE with a new IDE named Flash Builder 4.

Flash Builder 4 supports both Flex 3 and Flex 4.

As of June 2010, Flex Builder 3 is no longer available, but Flash Builder 4 is available for downloading and is free for educational use .

I have updated this lesson to accommodate the availability of Flex 4 and Flash Builder 4 in addition to Flex 3.

Although Flash Builder 4 is very similar to Flex Builder 3 from a user perspective, there are numerous differences between Flex 3 and Flex 4. I will touch on some of these differences in this lesson and will explore them in more detail in future lessons.

Download links

Download links for the free Flex 3 and Flex 4 frameworks, as well as the Flash Builder 4 IDE are provided in Resources .

Powerful but more complicated

Flex 4 is more powerful, but also significantly more complicated than Flex 3. Therefore, it isn't clear to me that developers will want to make an immediate switch to Flex 4. Therefore, I will continue publishing material on Flex 3 in addition to Flex 4.

Is there a tipping point?

Anything that can be programmed in Flex can also be programmed directly in ActionScript, but the reverse is not true. It occurs to me that at some point, as Flex becomes more complicated, there may be a tipping point where developers will simply switch to ActionScript instead of expending the effort necessary to learn about new more-complicated aspects of Flex.

One of several ways to create applications for Flash Player (version 10 or later)

Flex 3 and Flex 4 (combined with ActionScript 3) simply provide one of several ways that developers can produce downloadable applications that will run in Adobe's Flash Player (version 10 or later) or Adobe Air (see Resources ) .

Running Flash Player

Very briefly, Adobe Flash Player normally runs applications in a web browser while Adobe Air runs applications in a stand alone mode from the desktop. However, if you have installed Flex Builder 3 or Flash Builder 4, it is usually possible to cause Flash Player to start and run in a stand alone mode by double clicking on an swf file. (See Figure 1.) If double clicking doesn't work, you can locate and run the file named FlashPlayer.exe. Once the Flash Player is running, you can open and run other swf files.

Why do I care about Flex and Flash Player?

One of the fastest growing segments of the game programming industry is the area of social games that typically run in Flash Player. I currently teach a course titled "Game Development using C++" and another course titled "Game and Simulation Programming I : C#" based on Microsoft's XNA Game Studio. I have a long-term interest in possibly also teaching a course in "Game Development using Flex and ActionScript."

Flex and ActionScript

However, my more immediate interest is related to two other courses that I teach. One of those courses is an introduction to XML. The other course is Object-Oriented Programming using ActionScript 3.

Flex is an XML-based language that is used to produce mxml files. (In fact, Flex is simply a shorthand way of writing ActionScript program files. When you compile Flex MXML files, they are automatically converted into ActionScript files before compilation.)

The resulting ActionScript files, along with other resources, are compiled into swf files that can be executed in Flash Player or Adobe Air.

Most of the lab projects in my XML course require the students to create Flex projects using both Flex 3 and Flex 4. Most of the lab projects in my more advanced ActionScript programming course require the students to use Flex as a launch pad for their ActionScript programs.

Flex SDK versus Flash Builder

Although it is possible to create Flex applications using nothing more than the free open source Flex SDKs (see Resources ) and a text editor, that can be tedious. Flash Builder 4 helps you to write mxml files containing layout and controls and makes the process somewhat more enjoyable. It will probably also help you to be more productive.

A complete Flex application

A complete Flex application consists of

  • One or more mxml files that may or may not embed ActionScript 3 code.
  • None, one or more ActionScript 3 files.
  • Various resource files such as image files, sound files, etc.

As mentioned earlier, these are compiled into a Flash swf file, which can be executed in either a Flash player or (in some cases) Adobe Air.

Division of responsibility

Flex provides the layout and control structure for the application in an XML format while ActionScript provides the program logic. (Of course, the whole thing can be written in ActionScript if you choose to do so.)

ActionScript is an issue for my XML students

While earlier versions of ActionScript may have been simple and easy to learn, ActionScript 3 is a fully object-oriented programming language with a complexity level on par with C++.

Students in my XML class aren't required to have any programming knowledge, and aren't expected to have the prerequisite knowledge that would qualify them to learn ActionScript 3 while learning XML at the same time. Therefore, the early lessons in this series concentrate on the use of mxml for layout and control and forego any requirement to understand ActionScript 3. As I mentioned earlier, I teach object-oriented programming using ActionScript in a different course.

Viewing tip

I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figures and listings while you are reading about them.

Figures

  • Figure 1 . Flash Player output for a new Flex project.
  • Figure 2 . Browser output for a new Flex project.
  • Figure 3 . Application window background for alpha values of 0.0, 0.33, 0.66, and 1.0.
  • Figure 4 . Gradient output for narrow ratio zone.
  • Figure 5 . Flash window for Flex 4 project named AppBackground04.

Listings

  • Listing 1 . Skeleton mxml code for a new Flex 3 project.
  • Listing 2 . Flex 3 application named AppBackground01.
  • Listing 3 . Skeleton mxml code for a new Flex 4 project.
  • Listing 4 . Flex 4 application named AppBackground03.

Supplemental material

I recommend that you also study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com .

General background information

Download Flex

I have provided download links in Resources for both the free open source Flex SDKs and Flash Builder 4.

Flash Builder 4 includes the SDKs for both Flex 3 and Flex 4 along with an IDE that is useful for creating Flex applications. Both the raw SDK downloads and the Flash Builder 4 download includes a debug version of the Adobe Flash Player.

Install the Flex SDK

Installation of the free open source Flex SDKs is a little complicated (but I will explain how to do it in a future lesson) . I have provided a link in Resources for Installation and Release Notes.

Installation of Flash Builder 4 is straightforward, at least that is true for Windows. The download is an exe file. Just execute the downloaded file and follow the installation instructions.

Getting started with the free SDKs

If you are using the free stand-alone SDKs, I will provide instructions for getting started creating applications with them in a future lesson. Those versions include a command-line compiler. You will need to create your mxml files using a text editor and compile them using the command-line compiler.

Getting started with Flash Builder 4

If you are using Flash Builder 4, I have provided several links in Resources that will help you get started using the IDE. Perhaps the quickest way to get started is to view some of the videos at the link titled Flex in a Week video training .

Create a new project

Once you have Flash Builder 4 running, pull down the File menu and select New/Flex Project . Enter the name of your new project into the dialog box, make certain that the radio button for Web application is selected, specify the compiler that you want to use (Flex 3 or Flex 4) and click the Finish button. If you wish, you can specify a disk location for your project other than the default location.

The project tree

A directory tree for your new project will be created having at least the following folders:

  • .settings
  • bin-debug
  • html-template
  • libs
  • src

This directory tree appears in the upper-left panel of the IDE. (Note that the tree shows some other nodes such as default package and Flex x.x, but they aren't actually disk folders.)

Flash Player output for a new Flex project

The bin-debug folder will contain several files including one with an swf extension and one with an html extension . As I mentioned earlier , if you double-click the file with the swf extension, it should open in Adobe Flash Player looking something like Figure 1.

(Note that the default background color for a new Flex 3 project is the gray color shown in Figure 1 while the default background color for a new Flex 4 project is white.)
Figure 1: Flash Player output for a new Flex project.
Flash Player output for a new Flex project.
Missing image.

Browser output for a new Flex project

When you installed Flash Builder 4, you should have been given an opportunity to update one or more browsers to include a special version of the Flash Player that supports debugging. If you open the html file mentioned above in one of those browsers, the output should look something like Figure 2 (with either a gray or white background depending on which version of the Flex compiler was used to create the project) .

Figure 2: Browser output for a new Flex project.
Browser output for a new Flex project.
Missing image.

The bin-release output

After you are satisfied with your program, you can create an output folder named bin-release by selecting Project/Export Release Build... The files in this folder are similar to the files in the bin-debug folder, but they may be smaller. This folder has been purged of debug information, and is the folder that is intended for deployment on a website.

Boring!

Granted, these outputs aren't all that exciting. However, they should help to confirm that you have Flash Builder 4 and Flash Player (version 10 or later) properly installed and linked to your browser.

The src folder

The folder in the directory tree mentioned earlier that will probably command most of your attention is the folder named src. When you create a new Flex project, this folder will contain a file with an extension of mxml. If you double click on that file name in the upper-left IDE window, the mxml file will open in the text editor window of the IDE. If you selected the Flex 3 compiler, the skeleton code will look something like Listing 1. (It will be different for Flex 4, but I will get into that later.)

A skeleton mxml file

Listing 1 shows the skeleton mxml code for a new Flex 3 project. This is the XML code that you will modify and supplement as you add features to your project.

Listing 1: Skeleton mxml code for a new Flex 3 project.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute"
  minWidth="955"
  minHeight="600">
  
</mx:Application>

Compile and run the project

You can compile and run the new project by selecting either Run or Debug on the Run menu. (The IDE provides a few other ways to run the project as well.) The new project should open in your browser looking pretty much like Figure 2. (Remember, gray background for Flex 3 and white background for Flex 4.) If you selected Debug , some debug text information should be displayed in the Console tab at the bottom of the IDE.

Preview

In this lesson, I will explain how to create two Flex projects. One is a simple Flex 3 project named AppBackground01 . The other is a (not so simple) Flex 4 project named AppBackground03 that replicates the output from the Flex 3 project.

Both projects are designed to produce the same output. To create the project using Flex 3, you will simply add attributes to the Application element shown in Listing 1, resulting in the XML code shown in Listing 2. However, you will need to do more than that to create the project in Flex 4. (Remember, Flex 4 is more powerful but also more complicated to use.)

Finally, I will show you the output from another Flex 4 project and challenge you as the student to write a Flex 4 project that produces a matching output.

More complex Flex projects

In general, to create more complex Flex projects, you will also need to add child elements, (which may or may not include attributes) , to the Application element.

To incorporate logic in your Flex projects, you will need to learn how to write some ActionScript code and embed ActionScript code in your Flex code (or integrate ActionScript code in other ways) .

Layout versus behavior

As I mentioned earlier, you can develop your Flex applications using the XML-based Flex language to establish the layout for your application.

Although it is possible to use Flex alone to provide simple behavior for your applications (simple event handling for example) , you will probably need to use ActionScript 3 to produce more complex behavior for your applications. (Even the simple behavior requires some ActionScript, but it's not so obvious where the Flex code ends and the ActionScript code begins.)

The layout capability in Flex 3 consists of containers (that may contain other containers) with names like Canvas , HBox , VBox , etc. The containers can also contain controls with names like Button , CheckBox , ComboBox , etc.

The text editor

The upper-middle pane in the Flash Builder 4 IDE has two tabs labeled Source and Design . If you select the Source tab, this upper-middle pane becomes a text editor in which you can edit XML and ActionScript code. In addition, the lower-left pane becomes an outline showing the hierarchical structure of your XML or ActionScript code.

The visual design editor

If you select the Design tab, the upper-middle pane becomes a visual design editor and the lower-left pane becomes a toolbox containing a variety of components including Controls, Layouts, Navigators, and Charts. (Note that there are differences in the component sets for Flex 3 and Flex 4.) In this mode, you can drag components from the lower-left pane into the design pane and make physical adjustments to their location, length, width, etc.

In addition, in design mode, the lower-right pane becomes a property window. You can select a component in the design pane and then set various properties such as font, color, etc., in the properties window.

XML code is automatically updated

When you drag a component into the design pane and set properties on that component, the XML code is automatically updated to reflect the addition of that component with the specified properties. Therefore, when using Flash Builder 4 in design mode, you can largely avoid having to write raw XML code.

Flash Builder 4 versus the free open-source SDK

This visual design capability is probably the most important feature of Flash Builder 4 that separates it from the free open-source Flex 3 and Flex 4 SDKs. Flash Builder 4 lets you design your layout visually and it writes much of the XML code for you.

Documentation

The Adobe site provides extensive online documentation for Flex, Flash Builder, and ActionScript. You will find numerous links to documentation in Resources . This is where you go to learn how to use the Flex language in detail.

Documentation format

In its default form, much of the documentation is divided into three frames, two stacked vertically on the left and one on the right. If you select All Packages and Frames (or something similar) at the top of the rightmost frame, you will see Flex XML elements (classes) listed in the lower-left frame.

Select No Frames

If you select No Frames at the top, (which is not always available) the two frames on the left will disappear. This is useful if you want to use the Find capability of your browser to search for a word in the right frame. You can restore the three-frame format by selecting Frames at the top of the page.

Select a class

If you select a class, such as Application , in the lower-left frame, information about that class appears in the rightmost frame. If you find two or more classes with the same name in the lower-left frame, one probably refers to the Flex 3 version of the class and the other probably refers to the Flex 4 version of the class. You must be very careful to make certain that you know which you are reading about. Reading about one and thinking that you are reading about the other can lead to very frustrating programming errors.

Styles

Many of the components in Flex 3 have a variety of styles that can be applied to the component either through the specification of attributes in the XML element or the use of a Style element that resembles a style sheet. (That is much less true for Flex 4, which takes a different approach.) The Flex 3 example that I will explain in the next section will illustrate the relationship among the following properties and styles for the Application element :

  • backgroundColor
  • backgroundGradientColors
  • backgroundAlpha

Discussion and sample code

The Application element (see Listing 2) is a container into which you can place other components including other containers. Future lessons will be concerned with the containment properties of the Application element. In this lesson, I will concentrate on the properties and styles listed above that can be applied to that element.

Run the program

Before continuing, I suggest that you run the program named AppBackground01 to familiarize yourself with the screen output.

The Flex 3 version

The mxml file

An XML listing for the Flex 3 application named AppBackground01 is shown in Listing 2.

Listing 2: Flex 3 application namedAppBackground01.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
         
        backgroundColor="#FF0000"
        backgroundGradientColors="[#00FF00, #0000FF]"
        backgroundAlpha="1.0">
</mx:Application>

Background color, color gradient, and transparency

The output for this application is similar to that shown in Figure 2 except that in this case, the color, color gradient, and transparency for the background is being controlled through the use of the following attributes:

  • backgroundColor
  • backgroundGradientColors
  • backgroundAlpha

The code in Listing 2 uses the backgroundColor attribute of the Application element to set the background color of the Flash window to pure red using the hexadecimal notation #FF0000.

A few words about color

For those who may not be familiar with this concept, the overall background color is controlled by a mixture of different contributions of the red, green, and blue primary colors. For example, pure red plus pure blue produces a color commonly known as magenta . Pure green plus pure blue produces cyan . Pure red plus pure green produces yellow . Pure red plus pure green plus pure blue produces white . The absence of all three colors produces black.

Three eight-bit bytes

The values for red, green, and blue respectively are specified by the values of three eight-bit bytes. The value of each byte can range from 0 to 255 decimal (00 to FF in hexadecimal) . A value of 0 (00 in hexadecimal) means that the primary color is not included in the mixture and a value of 255 (FF in hexadecimal) means that the primary color is included full strength in the mixture.

Using this scheme, it is possible to generate more than sixteen million different colors.

The order of the red, green, and blue contributions to the overall color in hexadecimal notation is RRGGBB, where the letter pairs stand for red, green, and blue respectively.

A color gradient

The Flex 3 application shown in Listing 2 sets the backgroundGradientColors attribute of the Application element to range from pure green (#00FF00) at the top of the Flash window to pure blue (#0000FF) at the bottom. As mentioned earlier, the application sets the backgroundColor to pure red using the hexadecimal notation #FF0000.

As you will see later, the Application element of a Flex 4 application doesn't have an attribute named backgroundGradientColors , so we will have to find another way to create a color gradient in the Flash window for a Flex 4 application.

Alpha

The appearance of the resulting mix of colors can be controlled by changing the value of the backgroundAlpha attribute of the Application element. This attribute can take on values ranging between 0.0 and 1.0. (In other programming systems, alpha is often allowed to vary between 0 and 255 decimal, or between 00 and FF hexadecimal.)

Transparency or opacity

For those not familiar with the concepts surrounding screen color and transparency, the value of alpha specifies a transparency or opacity level. When an attempt is made to draw a pixel in the same screen location as an existing pixel, the color of the last pixel drawn will be completely opaque and will dominate if it has an alpha value of 1.0. In that case, the first pixel drawn will no longer be visible.

If the last pixel drawn has an alpha value of 0, it will be totally transparent and the first pixel drawn will continue to be totally visible.

For values between 0.0 and 1.0, the first pixel drawn will show through to some extent and the final color of the pixel will be a mix of the original color and the new color.

Four runs with different alpha values

For this example, the Flex 3 application was modified, compiled, and run four times in succession by substituting four different values of backgroundAlpha into the code in Listing 2. The results are shown in Figure 3.

Figure 3: Application window background for alpha values of 0.0, 0.33, 0.66, and 1.0.
Application window background for alpha values of 0.0, 0.33, 0.66, and 1.0.
Missing image.

Four output images

The four images shown in Figure 3, going from left to right, top to bottom, represent alpha values of 0.0, 0.33, 0.66, and 1.0 respectively.

An alpha value of 0.0

For an alpha value of 0.0, the output color is pure red as shown by the top-left image in Figure 3. In this case, the gradient color scheme is totally transparent.

An alpha value of 1.0

For an alpha value of 1.0, the output colors range from pure green at the top to pure blue at the bottom as shown in the bottom-right image in Figure 3. In this case, the gradient color scheme is totally opaque and the red background color doesn't show through at all.

Alpha values of 0.33 and 0.66

For alpha values of 0.33 and 0.66, the output is a mix of the red background and the green/blue gradient as shown by the top-right and bottom-left images in Figure 3.

(The image in the bottom-left corner of Figure 3 corresponds to what you should see if you run the online version of this application.)

Conclusion regarding the Flex 3 version

These results suggest that the alpha value specified by backgroundAlpha in Flex 3 applies to the colors specified by backgroundGradientColors and does not apply to the color specified by backgroundColor . .

In other words, the gradient colors can be made more or less transparent by changing the value of backgroundAlpha allowing the red backgroundColor to show through the gradient colors. However, the value of alpha doesn't appear to affect the background color.

If you modify the code in Listing 2 by removing the backgroundColor attribute, and then compile and run it for different values of alpha, you will see a similar result. In that case, however, the resulting colors will be a mixture of the default gray background color shown in Figure 1 and the green/blue gradient shown in the bottom right corner of Figure 3.

The Flex 4 version

The Flex 4 program named AppBackground03 replicates the behavior of the Flex 3 version named AppBackground01 . By necessity, this version of the program is significantly more complicated than the Flex 3 version.

The skeleton code

The skeleton code for a Flex 4 project is shown in Listing 3.

Listing 3: Skeleton mxml code for a new Flex 4 project.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" 
               minHeight="600">
  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, 
    value objects) here -->
  </fx:Declarations>
  
</s:Application>

This is not the first time that you have seen this code. I discussed the skeleton code for a Flex 4 project in an earlier lesson having to do with namespaces in Flex 4. Therefore, Listing 3 shouldn't require any further discussion

The mxml file for AppBackground03

An XML listing for the Flex 4 application named AppBackground03 is shown in Listing 4.

Listing 4: Flex 4 application named AppBackground03.

<?xml version="1.0" encoding="utf-8"?>
<!--AppBackground03.mxml
This is a Flex 4 replica of the Flex 3 project named 
AppBackground01.
-->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    backgroundColor="#ff0000">

  <s:Rect width="100%" height="100%">
    <s:fill>
      <s:LinearGradient rotation="90">
        <s:entries>
          <s:GradientEntry color="0x00FF00" 
                           ratio="0.0" 
                           alpha="0.66"/>
          <s:GradientEntry color="0x0000FF" 
                           ratio="1.0" 
                           alpha="0.66"/>
        </s:entries>
      </s:LinearGradient>

    </s:fill>
  </s:Rect>
</s:Application>

Essentially the same output

This Flex 4 code produces essentially the same visual output as the Flex 3 code shown in Listing 2. As you can see, however, this code is much more complicated than the code in Listing 2. (Remember, Flex 4 is more powerful but is also more complicated.) Not only is the code more complicated, but the concepts behind the code are also more complicated.

A style named backgroundGradientColors in Flex 3

The Flex 3 Application class has a property named backgroundColor , and a large number of styles including backgroundGradientColors and backgroundAlpha . The code in Listing 2 uses that property and those styles to control the appearance of the Flash window in Flex 3. Of particular significance here is the style named backgroundGradientColors .

No style named backgroundGradientColors in Flex 4

The Flex 4 Application class also has a property named backgroundColor . The value of that property is set to red in Listing 4. It also has a style named backgroundAlpha but I'm not sure what its purpose is. However, it does not have a style named backgroundGradientColors . Therefore, some other way must be found to implement a gradient color scheme in Flex 4 in order to replicate the behavior of the Flex 3 project shown in Listing 2.

Replicating the behavior of AppBackground01

There may be a variety of ways to accomplish this. One of those ways is to cover the entire Flash window with a rectangle and cause the rectangle to exhibit the desired gradient characteristics. This is illustrated in Listing 4.

Listing 4 begins by adding a Rect object whose dimensions cover one-hundred percent of the Flash window. (Note that all of the elements in Listing 4 are in the spark namespace named "s".)

What is a fill element?

Unfortunately, this is the point where you need become heavily involved in the concepts of object-oriented programming in ActionScript for the code in Listing 4 to make sense. I apologize in advance for the explanation that follows. However, I don't know any other way to explain it, so I will explain it using a combination ActionScript OOP terminology and mxml terminology.

What is a Rect element?

Rect is a class that represents a rectangle in the ActionScript package named spark.primitives . The mxml code in Listing 4 causes an object of the Rect class to be placed in the Flash window in front of the white default background. As mentioned above, the dimensions of the rectangle are such as to cover the entire Flash window, even when the size of the window is changed by the user. (Note that the name Rect begins with an upper-case character. That is a clue as to what is going on.)

Once again, what is a fill element?

Note that the name of this element begins with a lower-case character. That is also a clue as to what is going on. The fill element refers to a property of the Rect object. According to the documentation , the value of this property must be of type IFill .

What is type IFill ?

IFill is the name of an ActionScript interface . (Note that IFill begins with an upper-case character. Once again, that is a clue.) Declaring that the value of the property named fill must be of type IFill means that the value must be a reference to an object of any class that satisfies the interface requirements defined by IFill .

According to the documentation , the following classes satisfy that requirement:

Add a LinearGradient object

The next thing that appears in Listing 4 is an element named LinearGradient . (Note that LinearGradient begins with an upper-case character.) According to the documentation , LinearGradient is a class in the ActionScript package named mx.graphics . (It isn't clear how it can be accessed via the spark namespace, but as you can see in Listing 4, that is obviously the case.)

What have we accomplished so far?

Up to this point, the interpretation of the code in Listing 4 is that we have:

  1. Created a Rect object, set its width and height attributes to completely cover the Flash window, and added it to the Flash Window.
  2. Created a LinearGradient object, set its rotation attribute to 90, and assigned its reference to the fill property of the Rect object.

The element named entries

The next thing that we see in Listing 4 is an element named entries that is added to the LinearGradient element. Once again, note that this name begins with a lower-case character.

The documentation tells us that the LinearGradient class has a property named entries . The documentation further tells us that the value of this property must be an array containing references to objects of the class named GradientEntry . These objects "define the fill pattern for the gradient fill."

Two GradientEntry elements

Referring back to Listing 4, we see that the two inner-most elements are two elements named GradientEntry .

We can now update the list of things that we have accomplished to read as follows:

  1. Created a Rect object, set its width and height attributes to completely cover the Flash window, and added it to the Flash Window.
  2. Created a LinearGradient object, set its rotation attribute to 90, and assigned its reference to the fill property of the Rect object.
  3. Created two GradientEntry objects, set the values of three attributes on each object with values that I will explain later, placed those objects in a two-element array, and assigned that array to the entries property of the LinearGradient object created earlier.

The rotation attribute of the LinearGradient object

Before getting into the attributes of the GradientEntry objects, let's go back and take a look at the rotation attribute of the LinearGradient object.

According to the documentation :

The LinearGradient class lets you specify the fill of a graphical element, where a gradient specifies a gradual color transition in the fill color. You add a series of GradientEntry objects to the LinearGradient object's entries Array to define the colors that make up the gradient fill.

By default, the color transition is from left to right. However, by specifying a rotation value in degrees for the rotation property, you can cause the color transition to take place along an invisible line that is rotated by that amount relative to the horizontal.

Setting the rotation attribute to 90 degrees in Listing 4 causes the invisible line to be vertical and causes the color transition to take place from the top to the bottom of the Flash window as shown in Figure 3.

The color attributes of the GradientEntry elements

According to the documentation , GradientEntry is a class in the mx.graphics package. (Note that the name begins with an upper-case character.) A GradientEntry element can define several attributes, including color , ratio , and alpha . Let's begin by taking a look at the color attribute.

The color attributes of the GradientEntry elements

The array of GradientEntry objects assigned to the entries property of the LinearGradient object can contain a large number of objects. Each object has a color property, which is black by default.

The color transition produced by the LinearGradient object will begin with the color property of the first object in the array, transition through the colors specified by each successive object, and end up at the color specified by the last object in the array.

Only two colors for this case

The code in Listing 4 places only two GradientEntry objects in the array. The color property for the first one is pure green and the color property for the second one is pure blue. That means that the color will transition from pure green at the top of the Flash window to pure blue at the bottom of the Flash window as shown by the bottom right image in Figure 3.

The alpha attributes of the GradientEntry elements

The alpha attributes shouldn't require much of an explanation. They mean essentially the same thing that the backgroundAlpha attribute means in Listing 2. The difference is that in Listing 2, the same alpha value is applied to both colors involved in the color transition while in Listing 4, each color involved in the transition has its own alpha value.

Replicate the behavior of the Flex 3 program

Setting the pair of alpha values in Listing 4 to 0.0, 0.33, 0.66, and 1.0 and then recompiling and re-running the program for each value causes the Flash window to take on the same four appearances shown from left to right, top to bottom in Figure 3.

The ratio attributes of the GradientEntry elements

The ratio attributes are a little more difficult to explain than the color attributes or the alpha attributes.

The documentation describes the ratio property in the following way:

Where in the graphical element, as a percentage from 0.0 to 1.0, Flex samples the associated color at 100%. For example, a ratio of 0.33 means Flex begins the transition to that color 33% of the way through the graphical element.

A picture is worth...

Let's see if I can illustrate this with a picture. I will change both alpha values in Listing 4 to 1.0 to cause the gradient colors to be totally opaque. Then I will change the ratio value to 0.2 for the first (green) GradientEntry object and change the ratio value to 0.8 for the second GradientEntry object.

The output produced by the program with these attribute values is shown in Figure 4.

Figure 4: Gradient output for narrow ratio zone.
Gradient output for narrow ratio zone.
Missing image.

Comparison with earlier results

The image shown in Figure 4 will be most meaningful if you compare it with the lower-right image in Figure 3. Although that image was actually produced by the Flex 3 program, the code in Listing 4 would produce the same output for alpha values of 1.0 and ratio values of 0.0 and 1.0 respectively.

For that case, there is a smooth gradient from the very top to the very bottom of the Flash window. In Figure 4, however, there is no gradient in the top twenty-percent or the bottom twenty-percent of the Flash window. Instead the entire gradient is squeezed in between those two limits.

End of this program

That ends my explanation of the Flex 4 project named AppBackground03 shown in Listing 4. I hope that this explanation hasn't been too steeped in technical ActionScript details to be understandable, but as I told you earlier, I don't know any other way to explain it. In fact, if it were not for the fact that I am very experienced in ActionScript object-oriented programming, I doubt that I could have understood, much less explained the code in Listing 4.

Upper case versus lower case

Oops, I almost forgot to explain the upper-case versus lower-case thing that I mentioned several times above.

Element names and class names

Objects in Flex mxml are represented by element names. Objects are created from classes and the mxml element names mirror the class names from which the objects are created. By convention, class names (and interface names) begin with an upper-case character in ActionScript.

Properties and styles

Most objects have properties (such as the color property of a GradientEntry object) and some objects have styles (such as the backgroundColor style of an Application object) . By convention, property and style names in ActionScript begin with a lower-case character.

Representation of properties in Flex mxml code

Typically, object properties and styles are represented by attributes having the same names in Flex mxml. However, as illustrated by Listing 4, in some cases, properties can also be represented by elements in Flex 4. (I don't recall having seen this in Flex 3 but that doesn't mean that it is not possible.)

Conclusions regarding upper-case versus lower-case

If you see an element name that begins with an upper-case character, (such as Rect , LinearGradient , and GradientEntry in Listing 4) , that probably means that it represents an object.

If you see an element name that begins with a lower-case character, (such as fill and entries in Listing 4) , that probably means that it represents a property.

Another Flex 4 application

I told you earlier that in addition to the LinearGradient class, another of the classes that satisfy the interface requirements of the interface named IFill is RadialGradient .

Figure 5 shows the Flash window for a Flex 4 project that I wrote using the RadialGradient class.

Figure 5: Flash window for Flex 4 project named AppBackground04.
Flash window for Flex 4 project named AppBackground04.
Missing image.

An exercise for the student

However, this time I am not going to explain the code that produced the output shown in Figure 5. Instead, I am going to leave it as an exercise for the student to dig into the documentation and figure out how to write the code to produce that output on her own.

Run the programs

I encourage you to run the online versions of the programs that I have explained in this lesson. Then copy the code from Listing 2 and Listing 4. Use that code to create Flex projects of your own. Compile and run your projects. Experiment with the code, making changes, and observing the results of your changes. For example, you might try changing the value of the rotation attribute in Listing 4 to see what that does. Make certain that you can explain why your changes behave as they do.

Resources

I will publish a list containing links to Flex resources as a separate document. Search for Flex Resources in the Connexions search box.

Miscellaneous

Note:

Housekeeping material
  • Module name: The Default Application Container - Flex 3 and Flex 4
  • Files:
    • Flex0102\Flex0102.htm
    • Flex0102\Connexions\FlexXhtml0102.htm

Note:

PDF disclaimer: Although the Connexions site makes it possible for you to download a PDF file for this module at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF file, you should be aware that some of the HTML elements in this module may not translate well into PDF.

-end-

Collection Navigation

Content actions

Download:

Collection as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Module as:

PDF | More downloads ...

Add:

Collection to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks

Module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks