<< Chapter < Page Chapter >> Page >

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 onthe 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 meansFlex 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.

Gradient output for narrow ratio zone.

Missing image.
Gradient output for narrow ratio zone.

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 bythe 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 thetop 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 intechnical 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 factthat 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 theobjects 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 somecases, 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 notpossible.)

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.

Flash window for flex 4 project named appbackground04.

Missing image.
Flash window for Flex 4 project named AppBackground04.

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 thestudent 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 2and 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 whatthat 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

Housekeeping material
  • Module name: The Default Application Container - Flex 3 and Flex 4
  • Files:
    • Flex0102\Flex0102.htm
    • Flex0102\Connexions\FlexXhtml0102.htm
PDF disclaimer: Although the Connexions site makes it possible for you to download a PDF file for thismodule at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF file, you should beaware that some of the HTML elements in this module may not translate well into PDF.

-end-

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Introduction to xml. OpenStax CNX. Dec 02, 2014 Download for free at https://legacy.cnx.org/content/col11207/1.18
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Introduction to xml' conversation and receive update notifications?

Ask