Flash and XML[c] A Developer[ap]s Guide

As we explore these techniques, we build a login process, that can be used to register players as they join our game. We need a Flash front end where the player submits a username and password. The server receives this data and either accepts or rejects the player.

Text Features

The interface to our login process is quite simple. The player simply enters name and password and hits submit. The username is typed in plain text, but to prevent an over-the-shoulder security leak, the password must not be echoed . (In our game this is a matter of convention rather than a real issue.)

Flash offers developers an option on Input Text fields called Password (Figure 14.1). This is the easiest way to get the traditional star-echo in a secured input field. We generally prefer the easiest way of doing things. But in a game, we often want customized user interface details. For example, an input field might make a sound with each keystroke. We will make a quick little custom star-echo input field. This mini-exercise will expose us to the text controls in Flash and stroke-by-stroke processing with ActionScript.

The labels on our two fields (the words "Username" and "Password") are simple static text with Selectable disabled (Figure 14.2).

The two actual input fields are of the type Input Text. They are tied to the appropriate vari ables username and password, which are local to this MovieClip. We enable the Border/Bg feature, which gives the player a simple clear input field, and we limit the allowed length of our players' names to 32 characters (Figure 14.3).

There are a few differences between the password input field and the one for username. The password field has its text color set to Invisible so that it can be secretly entered. It also uses a monospace font ( _typewriter ) so that we always know exactly where the cursor will be (Figure 14.4). (We also limit the length of password to 16 characters.)

Finally we add another text field, superimposed over the password input field (Figure 14.5). This is of the type Dynamic Text and it prints a variable called stars. It uses the same point size and the same monospace font as the password field with which it is aligned (actually a slightly lower baseline looks slightly better; so does boldface). It is important that we do not enable the background or selectability. It should be visible but intangible as the player reaches through it to the input field below.

The stars variable has a series of asterisks ”as many as the characters in the password variable. ActionScript has minimal text manipulation functions and limited access to input buffer events, so to keep the two strings in sync, we repeatedly execute this code:

ActionScript

stars=""; for(var i=0; i<password.length; i++ ) stars+="*";

We run this code every frame. Alternatively, we could create a new MovieClip object and attach our code to an instance of that object with a keystroke event handler.

ActionScript

onClipEvent (keyDown) { ..}

Submitting the XML

Now it remains only to add a submit button. We grab a generic pill button and attach ActionScript to call a local submit() function (Figure 14.6). By sensitizing it to both the mouse click (release) and the Enter keypress , we allow the player to hit Enter at any point to submit the login information.

Of course, we need to create the function submit(). This is where we experiment with different ways to communicate with middleware. We start with this simple test function.

ActionScript

function submit() { login= "<LOGIN>" + "<USERNAME>" + username + "</USERNAME>" + "<PASSWORD>" + password + "</PASSWORD>" +"</LOGIN>"; trace( login); }

Now, running the ActionScript in Test Movie mode, we generate this fragment of XML as on-screen output.

Output

<LOGIN><USERNAME>Jimmy</USERNAME><PASSWORD>bluefish</PASSWORD></LOGIN>