Devs.site

Hello world in Actionscript 3 and MXML

ActionScript and MXML are used together to create rich web / desktop (Flash or AIR) applications. MXML is used to declare the layout (just like HTML) while ActionScript (similar to JavaScript) is the actual language to which MXML is converted and that will be compiled.

A generous set of APIs provide classes we need for interfaces and features of all kind. In this short tutorial we will see how fast and simple a typical SWF Hello World application is created.


There are several SDKs that provide compiler, APIs, frameworks, runtimes and other tools. With one of them installed it is enough to begin. You can choose between Adobe's Flex, Apache's Flex or Adobe's AIR SDK. The last one was used here

After you have installed the SDK and made sure the mxmlc compiler is accessible globally (in Windows you might need to add the location to the PATH environment variable), you will most likely need the standalone debug Adobe Flash Player that will play our generated SWF file and allow us to debug issues.

Sometimes, the player has to be configured so that we can get the most out of it. Clear instructions specific for each platform here. We are mainly interested in the TraceOutputFileEnable option, which should be set to 1 so we can see messages from trace().

Hello world in ActionScript 3

We can use pure scripting to do this. We can log the message or display it inside an UI element like the TextField (which is used to display a text).

// declare the package, required in AS3
package {
    // import class for the Sprite basic display from the API
    import flash.display.*;
    // import class for the TextField object from the API
    import flash.text.*;

    // our main class (one per package), extending the required basic visual block
    // the name of this class has to be identical to the file's name
    public class Helloworld extends Sprite {
        // class constructor
        // this will be called as soon as the object is initialised
        public function Helloworld () {
            // log a message (you will find it in the flashlog.txt file)
            trace("Hello world!");

            // create a TextField instance
            var txtHello:TextField = new TextField;
            // give it a text to display
            txtHello.text = "Hello world!";
            // add it to the main visual
            addChild(txtHello);
        }
    }
}

Save this code in a file called Helloworld.as and compile it with

mxmlc Helloworld.as -debug=true

A file called Helloworld.swf file is created if there are no errors in the code. Play this file with Adobe Flash Player.

Hello World

Hello world in MXML

MXML can be used along with ActionScript to declare the layout and visual components of the application. If inside an .as file we import APIs, inside a .mxml file we declare namespaces in order to identify imported elements or to apply pre-defined themes. This is the MXML code that does the same as above, but in fewer lines

<?xml version="1.0" encoding="utf-8"?> 
<!-- Import required namespaces for the language and the  -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <!-- label element, which displays texts -->
    <mx:Label id="txtHello" text="Hello world" />         

</mx:Application>

Save this into Helloworld.mxml and compile again with

mxmlc Helloworld.mxml

You can also embed ActionScript inside a MXML file. Something like this also works:

<?xml version="1.0" encoding="utf-8"?> 
<!-- Import required namespaces for the language and the  -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="initApp()">

    <!-- we can embed ActionScript here -->
    <mx:Script> 
        <![CDATA[
            // function to be called when the application is started
            public function initApp():void 
            {
                // assign text to the element with id=txtHello
                txtHello.text = "Hello World"; 
            } 
        ]]> 
    </mx:Script> 

    <!-- label element, which displays texts -->
    <mx:Label id="txtHello" />         

</mx:Application>

By using the creationComplete attribute, we specify what function will be called once the application is created.

Even if ActionScript has lost its popularity, the impressive list of packages that you can use so conveniently makes it a good choice for Rich Internet Applications and even game developers. Just have a look here


Code

Helloworkd.as

// declare the package, required in AS3
package {
    // import class for the Sprite basic display from the API
    import flash.display.*;
    // import class for the TextField object from the API
    import flash.text.*;

    // our main class (one per package), extending the required basic visual block
    // the name of this class has to be identical to the file's name
    public class Helloworld extends Sprite {
        // class constructor
        // this will be called as soon as the object is initialised
        public function Helloworld () {
            // log a message (you will find it in the flashlog.txt file)
            trace("Hello world!");

            // create a TextField instance
            var txtHello:TextField = new TextField;
            // give it a text to display
            txtHello.text = "Hello world!";
            // add it to the main visual
            addChild(txtHello);
        }
    }
}

Helloworld.mxml

<?xml version="1.0" encoding="utf-8"?> 
<!-- Import required namespaces for the language and the  -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <!-- label element, which displays texts -->
    <mx:Label id="txtHello" text="Hello world" />         

</mx:Application>

Requirements

One of these SDKs

and Adobe Flash Player


Instructions

  1. Install the SDK and add the location containing the mxmlc compiler to the PATH environment variable, if necessary.

  2. The debug player might have to be configured in the mm.cfg file. Make sure the TraceOutputFileEnable option is 1, so we can see messages from trace().

0 comments

Specify your e-mail if you want to receive notifications about new comments and replies