Are you familiar with Flash and interested in making a move to Flex? This article is for you. It will show you the differences between the two applications and how to make a smooth transition. In this first article of a multipart series, "From Flash to Flex," Kris Hadlock shows you how to begin creating your first Flex application by integrating ActionScript with MXML.

The Flash to Flex series will focus on helping you migrate your work environment from Flash to Flex by learning the differences between and comparing the two applications. In this article, you'll learn how to get started integrating ActionScript with MXML by attaching code on a simple button click and including custom functions in your Flex project.

Attaching Button Events in Flex

After you create a Flex project, you' ll begin with a new MXML file. At first, this file might look foreign, but don' t be intimidated - essentially it' s just XML.

Adding buttons to your file is quite different in Flex, depending on how you approach it, because there are actually two different views in Flex: Design and Source, much like in Dreamweaver. Instead of drawing an object and then converting it into a symbol, as was done in Flash, you can simply use Flex' s Design view to drag and drop components to the stage, such as buttons, accordions, and much more.

When dragging a button to the stage in Design view, Flex creates the Source of the button for you in the MXML file. But if you like to work with the code, you can use the Source view to write your own, and the Design will be created for you as well. So, it goes both ways, you create Source, Flex creates Design; you create Design, Flex creates Source. For the rest of this article I will be focusing on the Source view.
After you add a button to your file, you'll have code that looks similar to Listing 1:

Listing 1 Source View of a Flex Button

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Button label="My Button" />
</mx:Application>

After we have the button, Flex offers us all its properties and events through code hinting. The label property that I added to the button is used to add text to it (a good example of this is a submit button for a form).

If you' ve created buttons in Flash you' ll remember that Flash had actions for press, release, and so on. In Flex, the events are still the same; they simply have new names, which are sort of a cross between the Flash button component and JavaScript. In the example below I use a click and mouseUp event to fire an Alert box, which tells us the event that was fired based on the parameter that we' re passing to it.

Listing 2 Source View of a Flex Button with Events

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
     <mx:Script>
     <![CDATA[
     import mx.controls.Alert;
     ]]>
     </mx:Script>
     <mx:Button label="My Button" id="myButton" click="Alert.show('Click');" mouseUp="Alert.show('Up');" />
</mx:Application>

Creating Custom Functions in Flex

To start separating your code into functions and removing it from the buttons, you' ll need to create Script tags in your MXML. When you create a Script tag, Flex will automatically add CDATA to it. Remember, MXML is essentially XML, so as with all XML files, CDATA is necessary when adding special characters to your file.

Listing 3 MXML Script Tags

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
     <![CDATA[
     ]]>
     </mx:Script>
     <mx:Button label="My Button" click="recordEvent('Click');" mouseUp="recordEvent('Up');" />
</mx:Application>

Once the Script tags are in place, we can import the Alert class and begin to create our function. The sample function we are creating is called recordEvent and it takes a String as a parameter named event. All ActionScript is strongly typed in Flex, so we' ll also add the public keyword to the function. Within the function we' ll add the same Alert code from the previous example, but this time we' ll pass it the String event parameter.

Listing 4 Adding a Function

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
      <![CDATA[
      import mx.controls.Alert;
      public function recordEvent(event:String):void
     {
       Alert.show(event);
     }
     ]]>
     </mx:Script>
     <mx:Button label="My Button" id="myButton" click="recordEvent('Click');" mouseUp="recordEvent('Up');" />
</mx:Application>

What's Next?

The next logical step in this series of examples is to create custom classes and importing them into our MXML. This is why the next article in this series will focus on ActionScript 3 and how to use it to create packages and classes and import them into a Flex project. In the meantime, play around with the examples and get familiar with Flex - I know you'll learn to love it and become an expert in no time.