actionscript 3.0 for journalists

Function and Event Listener Example

In this example, we will build a simple form to demonstrate how a function and event listener can operate in practice. The form is simple: It asks the user to enter their first name. The user enters in their first name and clicks submit. Flash takes the data from that form input, and displays a short hello message using the name that was entered into the form.

Here is a working example of the finished product:

 

 

To build this project, first launch Flash CS4 and open a new ActionScript 3.0 document. We will leave the stage dimensions and colors at their default settings.

Click on the text tool in your tool bar, and draw a text box near the top of your Stage. Then enter the text "What is your first name?" This is a static text box. This means the text box has no other functionality than to display text to the user. Feel free to choose a font of your choosing in the properties inspector. This example used Gill Sans at 33 points.

text box that displays instructions to user

Next, click on the text tool again, but this time we will make a different type of text box. This newer text box is called an input text box. It allows the user to input some text that we can assign to a variable in ActionScript. To change the text setting so that the user can input text, select input from the top menu on the property inspector.

Input text box setting in property inspector

Before we can draw the text box, we must do two more things. First we need to make sure this text box is visible to the user, so they know where they can type in text. We do this by clicking on the show border icon in the property inspector.

Checking the show border option in property inspector

Secondly, we need to embed the font we are using. When creating static text boxes, Flash takes care of the font embeds automatically for us. However, when working with input or dynamic text, we have to tell Flash which font glyphs to embed. The reason is so that Flash doesn't have to embed every font and produce large files.

In the properties inspector, click on the Character Embedding button. Next select which glyphs you want to embed. You can type in specific characters at the bottom, or embed whole sets of characters by holding the shift key down and selecting each set. For this project, we will have the user type only their name. However we will also embed numerals and punctuation just in case the user types decides to use those characters. Hold the shift key down, and select: Uppercase, Lowercase, Numerals and Punctuation.

embedding fonts in Flash

Now we can finally draw our input text box. Place it just below the text that is already on your Stage.

In order for Flash to identify the text that is inside this text box, we must give this input text an instance name. Instance names identify elements on the Stage to ActionScript. Anything you want to reference in ActionScript needs to have an instance name and only certain elements can have instance names.

Using the selection tool (black arrow) click on your input text box you just created to select it. In your properties inspector, type in name_txt in the instance name form.

instance name

Now we will make the submit button so the user has a way to activate the response. A button can be just about anything in Flash; an image, text, a graphical shape or any combination of these. We will create a very simple button by drawing a rectangular box and adding some text on top of it. First, click on the rectangle tool in your tool palette.

rectangle tool

Change your stroke and fill color at the bottom of the tool palette. You can choose any colors, but this example used #000000 (black) for the stroke and #cccccc (gray) for the fill.

Draw a rectangle below the input text box you created.

drawing a rectangle shape

Next, click on your text tool again. But this time, switch the type of text box back to static in your properties inspector. This is important. You cannot have dynamic or input text inside a button.

switching back to static text

Draw a text box over your gray rectangle and type the word "submit."

Next use your selection tool (black arrow) to select both the fill, the stroke and the static submit text. The easiest way to do this is to draw a box around all of them.

selecting both text and shape

In the Modify menu at the top of the screen, select Convert To Symbol. Choose button for the type of symbol and give the symbol a relevant name, like submit button. This name is only for your reference and won't affect any part of the example. Feel free to go into the button and modify the various button states as you wish.

From the main timeline (scene 1) use the selection tool (black arrow) to select your button. Then in your properties inspector, give the button an instance name of submit_btn. Remember, instance names are case sensitive.

instance name of submit button

Next, we will draw a third text box below the submit button. This time, the type of text box will be dynamic. Dynamic text is text that you can set in ActionScript. Dynamic text boxes also require fonts to be embedded, but since we already embedded fonts with the input text box, we do not have to repeat the process (unless we we decided to use a different font for this text box). Also, make sure the text border that we set in the input text box is off.

Once you draw the dynamic text box on your stage, select it with your selection tool and give the text box an instance name response_txt. We are now ready to start with our ActionScript.

ActionScript for the Event Listener Example Form

Create a new layer in your timeline above the current layer and call it Actions. With this layer selected, click on the Window menu at the top of the screen, and choose Actions to open your Actions panel.

Where do we start? Well, we know that we want the program to display a hello message once the user clicks on the submit button. So we will use the event listener code we learned about in the last lesson to create an event listener that will activate a function when the user clicks the submit button. Let start by writing our function first:

function displayMessage(e:Event):void {

}

This function is incomplete. We want to fill it with code that will display our message in the response_txt text box. To set some text inside a dynamic text box in ActionScript, we use the .text property of the text box's instance name. We would type this code as follows:

function displayMessage(e:Event):void {
       response_txt.text =
}

Notice the response_txt.text = portion of the code. This tells Flash that we want to assign a value to the dynamic text box called response_txt. The next part of the code is:

function displayMessage(e:Event):void {
       response_txt.text = "Hello " + name_txt.text + " how are you?";
 }

We are taking the lesson we learned about concatenating text, but using the input text (name_txt.text) to represent the name the person typed in.

Lastly, we need to run this function when a user clicks on the submit button. We do that by adding an event listener to the button.

function displayMessage(e:Event):void {
 	response_txt.text = "Hello " + name_txt.text + " how are you?";
 }

submit_btn.addEventListener(MouseEvent.CLICK, displayMessage);

actionscript for the example

This is an example of how we can trigger a function with an event listener. This is a fundamental task in Flash, because most Flash projects have some sort of clickable area that the user will interact with.