Will Perone

Getting UI to work in ActionScript 3/Flex

If you're just getting started with ActionScript 3 programming, you may be confused how to access all those cool User Interface widgets that you can access from the Flex MXML stuff.

Step 1: Create your main class by extending Canvas

What you need to do here is to extend the MX Canvas to use the UI stuff, not Sprite. One of the drawbacks of this however is that you will not be able to use things like TextField anymore but hey there are better things you can use now.
import mx.containers.Canvas;
import mx.controls.Button;
import flash.events.MouseEvent;

public class App extends Canvas {

	private var button:Button;
	
	public function App() {
		button = new Button();
		button.label = "I'm a Button!";
		button.addEventListener(MouseEvent.CLICK, click);
		addChild(button);
	}
	
	private function click(evt:MouseEvent):void {
		removeChild(button);
	}
}
The Canvas class is infact derived from UIComponent from FlexSprite from Sprite so you can do everything Sprite does but you also have the functionality of Flex with UI on your side as well. You may notice in your code that width = 0 and height = 0 for the App class. To get the actual width of the Canvas, use parent.width and parent.height instead.

Let's look at a more complicated example
private var button1:Button;
private var button2:Button;
private var panel:Panel;
private var buttonLayout:LayoutContainer;
private var testlabel:Label;

public function App() {
	button1 = new Button();
	button1.label = "Continue";
	button1.addEventListener(MouseEvent.CLICK, continueClick);
	button2 = new Button();
	button2.label = "Exit";
	button2.addEventListener(MouseEvent.CLICK, exitClick);
	
	buttonLayout = new LayoutContainer(); // so we can layout the buttons how we want
	buttonLayout.layout = "horizontal";
	buttonLayout.addChild(button1);
	buttonLayout.addChild(button2);
	
	testlabel= new Label();
	testlabel.text= "What do you want to do?";
	testlabel.styleName= "SpecialLabelStyle";  // override default Label styling here
	
	panel= new Panel();
	panel.addChild(testlabel);
	panel.addChild(buttonLayout);
	
	addChild(panel);
}

private function continueClick(evt:MouseEvent):void {		
	var alert:Alert = new Alert();
	alert.text = "Continue Pressed";
	addChild(alert);
}

private function exitClick(evt:MouseEvent):void {		
	var alert:Alert = new Alert();
	alert.text = "Exit Pressed";
	addChild(alert);
}	
Yes embedding objects into each other is as easy as making a container object and adding the objects to the container. You can control how the alignment works with the stylesheet and also with a LayoutContainer object. The styleName property says that we want to override the normal style used for the widget which we will see in a bit.

Step 2: Create a CSS file to style your UI widgets

There are infact ways to style your UI widgets in code directly (widget.setStyle("property", value);) but it is frowned upon because it takes a lot of resources to do; using stylesheets is a much better and cleaner way to go.
Button
{
	fillColors: #000000, #707070;
	color: #ffffff;
	textRollOverColor: #0000ff; 
	themeColor: #00007f;
}

.SpecialLabelStyle
{
	color: #ff0000;
}
Here we tell the UI the default style to use for every Button object it renders. We are also overriding the behavior of one specific instance of a Label object with this special CSS block. The coolest part is that the CSS file will actually be compiled into your SWF file and optimized so you won't need to include it in your distribution. You may have noticed that the style properties are not the same as HTML styles; Flex defines the complete set of valid styles for each UI widget in the AS3/Flex documentation (look in mx.controls and mx.containers).

Step 3: Set up your MXML correctly

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" styleName="plain" xmlns:MyApp="*">
	<mx:Style source="style.css"/>
	<MyApp:App/>
</mx:Application>
Here we are saying that we want to associate our stylesheet with this SWF project and then instatiating our App class which is the main Canvas to render to. The downside to using Flex's powerful UI capabilities is that it will add significant size to your SWF file although you do get added bonuses by using AS3 instead of MXML: the ability to draw custom graphics (via each widges' and the main Canvas's graphics member variable) ontop of rendering the UI widgets.


Addendum: You may be confused as to why you can't add a Sprite to the Canvas as you normally do with addChild(sprite). If you are using any Flex derived UI object like Canvas to draw to, you need to use rawChildren.addChild(sprite) instead.

15 Comments
Ram 16 16
Nice demonstration of how to instantiate controls using ActionScript. Thanks!
Will 10 9
In FlashDevelop, make sure to right click on your Main.mxml file and set it to 'Always Compile' for this to work. Otherwise you will not see anything on the screen.
Amar Shukla 9 7
Nice and simple example to make newbies understand about how to work with coding to make GUI.
TT 6 7
Excellent sample code. Thanks a bunch.
1 9
vbvc
a 2011/01/084 10
ssss
Dud 2011/07/127 3
Hi, I have a CS5 but i can't found mx.containers; how can add to my proyect this library.. Tks
Will 2011/07/1210 3
the mx library is part of Flex and isn't natively available in CS5. I'm not sure how to include into a CS5 project, I would recommend getting FlashDevelop or FlashBuilder.
alfred beilin 2012/03/10 Contact Me0 1
if any ones here today im looking for alan handers is he still posting here
alf beilin
jamiedentims 2012/03/24 Contact Me0 1
hi - re your " sailer post" monday night send me an email and i will definatley get back in touch these ones arnt wood
ta
jamie dentims
paulbeartil 2012/04/29 Contact Me1 1
hi there please send your details again ive missplaced them
bearty
Howardhentine 2012/06/01 Contact Me0 0
long time no see susie sorry iv took so long i think this is the link
and details, there very helpfull ,just say Howardsy recommened you
michaelnalsim 2012/06/28 Contact Me5 5
hello again gary i dont normaly give it out but this is there contact
filling address ,ring them if you need them in a hurry ,say michael recommened you
Ujjawal 2012/09/13 Contact Me0 0
Hey Tristan, Someone told me you may be able to answer my qutsoien: I am trying to develop a Captivate slide with text on it, and want for the user to be able to highlight or underline the text. Is there a widget or something that can help me offer this? Thanks so much. This is for my doctoral dissertation.
martellawintek 2012/12/03 Contact Me0 0
yous ok dennis i shouldnt give it out but here is the web address
and details ,ring them for help & advice ,tell them miss m wintek put you on

<- for private contact