Flash Client


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.

Figure 14.1. Star-Echo the Easy Way

graphics/14fig01.jpg

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

Figure 14.2. Setting Static Text

graphics/14fig02.jpg

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).

Figure 14.3. Setting Up the Username Input Field

graphics/14fig03.jpg

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.)

Figure 14.4. The Password Input Field

graphics/14fig04.jpg

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.

Figure 14.5. The Star Echo Field

graphics/14fig05.jpg

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.

Figure 14.6. Action of the Submit Button

graphics/14fig06.jpg

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> 


Flash and XML[c] A Developer[ap]s Guide
Flash and XML[c] A Developer[ap]s Guide
ISBN: 201729202
EAN: N/A
Year: 2005
Pages: 160

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net