Home ›

Developing Flash Applications with Flex Builder

Issue 192

From Issue #192
April 2010

Apr 01, 2010  By Carl Fink
 in
Flex Builder is built on top of Eclipse, and it allows you to develop Flash applications on Linux.

Listing 1. Quiz Program


<mx:Application 
                layout="absolute">
  <mx:TextArea width="75%" height="75%">
    <mx:text>
      Question 1: Which strip is this grouchy but
                  good-hearted fighter the star of?
    </mx:text>
  </mx:TextArea>
</mx:Application>

When run, the program looks like Figure 2.

Figure 2. First Run of the Quiz Program as Seen in Firefox

As you see, the text is very small. You can set the text size by using htmltext instead of text. I also corrected the problem that the text is too close to the borders of the movie by adding padding, I assigned an ID (name) to the control, so I can refer to it in scripts, and I made it non-editable, which then gives us Listing 2.

Listing 2. Quiz Program with Font and Layout Fixes

<?xml version="1.0" encoding="utf-8"?>
<!--Example for LJ article. -->
<mx:Application 
                layout="absolute">
  <mx:TextArea width="75%" height="75%"
               paddingTop="10" paddingBottom="10"
               paddingLeft="10" paddingRight="10"
               id="Question" editable="false">
    <mx:htmlText>
    <![CDATA[
      <font size="+3" face="Arial">
        <b>
          Question 1: Which strip is this grouchy but
                      good-hearted fighter the star of?
        </b>
      </font>
    ]]>
    </mx:htmlText>
  </mx:TextArea>
</mx:Application>

I still need to add the answer selections as radio buttons and a Next button. In Listing 3, I have added our first bit of ActionScript, a function that evaluates whether the correct answer is selected and gives immediate feedback by way of a dialog box. Anything other than MXML in a project file is best kept inside CDATA tags, which prevent Flex from parsing it as XML. This applies to both ActionScript and HTML. ActionScript also can be stored in external files and loaded at runtime or during compilation.

Listing 3. Quiz Program with First ActionScript Code

<?xml version="1.0" encoding="utf-8"?>
<!--Example for LJ article. -->
<mx:Application 
                layout="vertical"
                backgroundColor="#FFFFFF">
  <mx:TextArea id="Question"
               width="100%" height="15%"
               paddingTop="10" paddingBottom="10"
               paddingLeft="10" paddingRight="10"
               editable="false"
               backgroundColor="#FFFFFF" borderColor="#FFFFFF">
    <mx:htmlText>
    <![CDATA[
      <font size="+4" face="Arial">
        <b>
          Question 1: Which strip is this grouchy but
                      good-hearted fighter the star of?
        </b>
      </font>
    ]]>
    </mx:htmlText>
  </mx:TextArea>
  <mx:VBox paddingLeft="150"
           backgroundColor="#FFFFFF" width="100%">
    <mx:RadioButton id="a1" groupName="Answers"
                    label="Belkar Bitterleaf"
                    width="400" paddingRight="20" />
    <mx:RadioButton id="a2" groupName="Answers"
                    label="Gilgamesh Wulfenbach"
                    width="400" paddingRight="20" />
    <mx:RadioButton id="a3" groupName="Answers"
                    label="Roy Greenhilt"
                    width="400" paddingRight="20" />
    <mx:RadioButton id="a4" groupName="Answers"
                    label="Frank Mangle"
                    width="400" paddingRight="20" />
    <mx:Button id="nextButton"
               label="Next" click="parseanswers();" />
  </mx:VBox>
  <mx:Script>
  <![CDATA[
  public function parseanswers(): void
  {
      import mx.controls.Alert;
      if (a3.selected) {
          Alert.show('Yes, the answer is ' + a3.label,
                     'Right!', mx.controls.Alert.OK);
      }
      else {
          Alert.show('Sorry, no.', 'Wrong', mx.controls.Alert.OK);
      }
  }
  ]]>
  </mx:Script>
</mx:Application>

Running the program now produces a single question, and clicking Next produces a simple message box (Figure 3).

Figure 3. Quiz Program with Answer-Checking

The dialog and other controls don't look “standard” for most operating systems, and developers will want to customize them. Flex and Flash support various “skinning” techniques that make it simple to change the appearance of controls, but those are beyond the scope of this article.

Obviously, this version of the quiz is only for testing purposes. It has one question and no provision for tabulating results. Now, it's time to create more questions. Because I'm deliberately not connecting to a server-side database for this article, I simply declared an array of data directly in the program's code.

It's a peculiarity of ActionScript (like its parent, ECMAScript) that it doesn't directly support multidimensional arrays. The workaround is to declare an array of arrays, as shown in Listing 4.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Unfortunately, Flex for Linux Is Dead

Anonymous's picture
Submitted by Anonymous on Sat, 05/29/2010 - 22:26.

If you check carefully, you'll find that Flex Builder for Linux hasn't been updated in over a year (other than a minor release so that it would continue functioning after a cutoff date). I've discussed this issue with other Flex developers and unfortunately we all seem to be in agreement... Adobe is not going to continue developing on the Linux platform. You can simply look at the absence of any activity by Adobe on that subject especially after they just released a new version of Flex, now called Flash Builder 4.

Joe

P.S. Your article was nice.

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions