Creating a Basic GUI With Adobe Flash

[chili5]

Creating a Basic GUI With Adobe Flash

I am going to show you how to make a simple GUI with Flash and add some action script code.

If you don't have Flash, you can get the trial here.

Flash uses a timeline for animation but for now we are just going to use the first frame on the timeline. You don't really have to know what a frame is just yet. We are going to just use the first layer and the first frame. Later, we will pay attention to what these are for.


First, I will show you what the GUI we will create is going to look at. We are going to create a program where the user inputs 2 numbers, clicks on the add button and the sum is shown in the output window.

Our program will look like this:



Now let us create the GUI. In Flash, go to File. Then you want to click New and create a new Flash File (ActionScript 3.0). This means that we will be using version 3 of ActionScript.

The white area on the screen that you see is called the stage. This is where we are going to put all of our controls and where everything is going to happen.

We need to open a few windows now. One of them is called the Components window and the other is the components inspector.

To open these windows, use these keyboard shortcuts:

Ctrl-F7 this opens the Components window
Shift-F7 this opens the components inspector

In the components window, you want to expand the user interface node, so that the window looks like this:



This gives us access to what we want to add to the stage. To add items to the stage, you just click on one in the components window and drag it onto the stage. You want to drag a button onto the stage and two text fields so that it looks like:



When you get to this point, we want to change the "label" of the button and the instance name of these controls (so that we can access them in code). This is what we need the components inspector for. Click on the button, and in the components inspector click on the parameters tab and look for the label parameter, you want to change this to say "Add".

Double click "Label" under the values column and type "Add". Then press

Enter and you should notice that the label on the button changes.
Now, in the properties window look for where it says <Instance Name>.

This is what you are going to change, so you can access the control in ActionScript code.

If you do not have the button selected, click on the button and then change the instance name to btnAdd. In a similar process, change the instance names of the two text fields to txtOne and txtTwo.


That is all the set up that is needed. Now we can start coding.

In the bottom you see a timeline that looks like this:



You want to click on the first frame, and press F9. This brings up the actions window where we are going to type our code.


ActionScript

This is a programming language that you can use to do all sorts of things on the stage.

We need to create 2 variables to hold the numbers that the user inputs.

We are going to assume that the user is only going to enter integers (meaning no decimals).

The type of expected input affects the type of variable we create. So in the actions window add these two lines of code:

var nOne:int;
var nTwo:int;

These declare two integer variables called nOne and nTwo respectively.

Now what we need to is set up an event listener to listen for a button click. Then we need to write a callback function that is called when the button is clicked.

ActionScript is nothing without functions. Basically a function is just a way to encapsulate code so you can reuse it later.

Add this line to the actions panel.

btnAdd.addEventListener(MouseEvent.CLICK,addNums);

This means that when the user clicks on btnAdd (the button that we added earlier) that the function addNums will be called. This is why we have to name the controls, so we have a name to refer to them in the code as.

Now we have to write the addNums function.

function addNums(e:MouseEvent):void {
	var nResult:int;

	nOne = int(txtOne.text);
	nTwo = int(txtTwo.text);
	nResult = nOne + nTwo;

}

You don't really need to worry about the details here just yet. Basically e is an argument that is passed to the function of type MouseEvent and the function returns nothing (void). This is not important for now.

What is more important is the body of the function. We store the values in the text fields into the variables. Notice how we wrap txtOne.text with int()? This is because the value txtOne.text is a string of text and we need to convert it to an integer to do any math with it.

Now, notice how I declare a variable in the function called nResult?

This variable is only accessible in the function. You cannot access it outside of the function.

Now all we have to do is output the result. We can only output strings

so we will use String() to convert nResult into a string.

Add this code just after the nResult line.

trace(String(nResult));

The final function should be:

function addNums(e:MouseEvent):void {
	var nResult:int;

	nOne = int(txtOne.text);
	nTwo = int(txtTwo.text);
	nResult = nOne + nTwo;
	trace(nResult);

}

The trace statement is used to output text to a debug window in the Flash environment.

This is a brief introduction to what can be done with Flash really quickly. Things get a lot cooler once you start playing around with things.

Now go play around, and have fun.

[WingedPanther]

Is there any way to "compile" actionscript without Adobe's Flash development environment?

[chili5]

I'm not entirely sure.

I found this: Motion-Twin which claims to be an ActionScript 2.0 compiler but I haven't found anything for ActionScript 3.0 yet. I guess you could use the Flex SDK which includes a compiler. I'm not sure what the differences are though.

[BlaineSch]

Good job!

Do you know when 2.0 will be dropped off and only 3.0 be available? I know CS4 has both 2.0 and 3.0 still.

I am in a Flash Class and they are teaching 2.0 which I find to be dumb since 3.0 is out, why would we not want to learn the newest?

+Rep!

[Jordan]

Awesome! I believe this is our first Flash tutorial. +rep

[chili5]

Thanks.

No, I don't know what the standpoint on AS2.0 is. I never even bothered with it, I just went straight to AS 3.0. What is AS 2.0 like?

Yes, with CS4 you can use AS2.0 I just never bothered because it has the newest one.

Edit: Thanks Jordan.

[WingedPanther]

Oh, and happy +rep for happy chilli5