Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

Build a Chatroom with Flash, Adobe AIR and PHP

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

"The primary use of a chat room is to share information via text with a group of other users." - Wikipedia. During this Premium tutorial, I'll show you how to create a chatroom using Flash, AIR, PHP, MySQL and XML.


The User Interface

We'll start by creating the user interface. You can copy my UI to the pixel, or you can create your own design.


Step 1: Setting up the Document

Open Flash and create a new 'Flash File (Adobe AIR)' document. Save the file into a new folder as 'chatroom.fla'. Next, create a new 'ActionScript' file and save that as 'chatroom.as' and save it in the new folder.



Step 2: Linking the Files

In Flash, navigate to the 'Properties' panel. In the text field type in 'chatroom' and hit enter. This will link the actionscript file (which we will soon create) and Flash document together. You can find a complete tutorial on how to set up the Document class here.



Step 3: Setting up the Stage and Background

In the properties panel, set the size of the stage to 230x400 pixels. Next, select the rectangle tool. Set the rounded corners property to 5 pixels. Give it a fill color of white and give it any alpha number you like -- I set mine to 10%. Also, give it a black stroke that is 1 pixel wide. Draw out a rectangle on the stage that is 245 pixels wide and 400 pixels in height. Press F8 to convert it to a movieclip. Give it a name of 'background' and an instance name of 'background'. In the filters panel, add a glow filter that has a blur of 24, strength of 66%, and set the quality to high. Next add a drop shadow filter. Give it a blur of 4, strength of 50%, high quality, 90 angle and set the distance to 2.



Step 4: Creating the Login/Sign up Panel

In the components panel, drag out a copy of the List component onto the stage. This will contain the list of users that are currently online. Give it an instance name of 'uList'. Set the width property to 200 and the height to 189. Next, grab the text tool. With the static text setting, draw out a text field above the new List component. In the text field, enter 'Users online'.

With the text tool still selected, draw out another text field below the List component and enter 'Username'. Below that text field, draw out another text field. The new text field should say 'Password'. Underneath the 'Username' text field, create a new input text field. Give it an instance name of 'user'. Set the width to 200 and the height to 17. Set the text color to black and font size to 12. Create another input text field with the same settings underneath the 'Password' text field. Give the new input text field an instance name of 'pass', and set the Line type to 'Password'. This will make the characters entered appear as asterisks.



Step 5: Finishing the Login/Sign up Panel

Next select the rectangle tool. Give it a rounded corner of 5, a color of #00CC00 and no stroke. Draw out a rectangle that has a width of 122 and height of 43. Convert the rectangle to a new movieclip and give it a name and instance name of 'button'. Double click on the button to enter edit mode.

Inside the button movieclip, create a new layer. Create a new dynamic text field. Give it an instance name of 'dyText', width of 110, height of 36, font size of 26 and white color, and set it to bold. Exit the edit mode and get back to the stage.

Select the button, and navigate to the filters panel. Give the button a drop shadow with a blur of 2, strength of 66%, high quality, an angle of 90 and distance of 1. Lastly, drag out a copy of the Checkbox component. Place it underneath the button movieclip. Give it an instance name of 'remember'. In the parameters panel, set the label to 'Remember'. Next, copy the Checkbox, and paste a new instance right next to the previous one. Give the new Checkbox an instance name of 'signUp'. Set its label property to 'Sign up'. Select all the elements and convert them to one big movieclip. Give it an instance name of 'screen1.'



Step 6: Creating the Rooms Panel

To the right of the 'screen1' movieclip, draw out a static text box, and give it a value of 'Rooms online'. Below the text field, drag a new List component onto the stage to contain the rooms. Give it an instance name of 'rList'. Set the width to 200 and the height to 189. Next create another static text field below the List component. Set it to say 'Room'. Underneath that text field, create a new input text field. Give it an instance name of 'table', a width of 200 and height of 17. Set the font size to 12 and color to black.



Step 7: Finishing the Rooms Panel

Drag another copy of the button movieclip onto the stage. Give it an instance name of 'button2' and place it under the 'rList' component. In the filters panel, apply the same drop shadow settings that were applied to the 'button1' movieclip. This will be used to enter the selected room.

Now, drag a copy of the Checkbox component onto the stage. Give it an instance name of 'createRoom'. The user will check this box to indicate that they wish to create a new room instead of entering an existing one.

Next, select the rectangle tool again. Give it a fill color of #BA0101 and no stroke. With the rounded corners still set at 5, draw out a rectangle that is 71 pixels wide and 25 pixels high. Convert the rectangle into a movieclip and give it an instance name of 'out'. Double click to enter the edit mode of the new 'out' movieclip. Create a second layer on top. Select the text tool and draw a dynamic text field. The next text field should be 63 in width and 18 in height. Give it an instance name of 'dyText'. Exit the edit mode and give the button a new drop shadow filter with the same properties as the other two green buttons. This red button will be used to go back to the login screen.

Select all the new elements and convert them to a movieclip. Give the movieclip an instance name of 'screen2'.



Step 8: Creating the Chatroom Panel

To the right of the 'screen2' movieclip, create a new static text field that says 'Current chat'. Underneath the text field, drag out a copy of the TextArea component. Give it a width of 200, a height of 123 and an instance name of 'cList'.

Next, drag out another copy of the List component and place it under the new TextArea. Give the new List component an instance name of 'uList'. This will hold the list of users currently in the chatroom.

Create another static text field under the 'uList' component that reads 'Comment'. Now, create an input text field underneath the 'Comment' text field. Give it an instance name of 'comm', a width of 200, height of 17, font size of 12 and color of black. Drag another copy of the green button onto the stage. Give it an instance name of 'button3'. Finally, drag a copy of the red button onto the stage and give it an instance name of 'back'. Select all of the new elements and convert them, as a group, to a movieclip with an instance name of 'screen3'.



Step 9: Creating the Error Panel

This will slide in whenever there's a problem (for example, if the user enters an incorrect password).

On the stage, create a new layer. Double click on the 'background' movieclip to enter its edit mode. Select the background shape and copy it. Navigate back up to the stage, and, on the new layer, paste the new shape to the left of the 'screen1' movieclip. Give the shape a color of black and alpha of 50%. Convert the shape into a movieclip and give it an instance name of 'errorPage'. Double click on the 'errorPage' movieclip to edit.

Inside the movieclip, create a new layer. Select the text tool and drag out a new dynamic text field. Give it a width of 120, a height of 26, font size of 20, white color and bold font. Align the text field to the vertical and horizontal center of the background shape.



Step 10: Finishing up the UI

Create a new layer on the stage for the exit button. Since we always want that button on top of everything else, move the new layer to the top of the stack. Select the text tool, and make an 'X'. Convert that to a movieclip with an instance name of 'closer'. Double click on it.

Create a new layer inside the 'closer' movieclip. Place the new layer underneath the layer with the 'X' text field. Draw out a square that is 16 pixels wide and 16 pixels in height. Give the square a fill of any color and an alpha of 0. Give the 'closer' movieclip a new drop shadow filter with a blur of 2, strength of 66%, high quality, angle of 90 and a distance of 1. Move it closer to the top right corner of the background movieclip.



Basic Application Code

The next seven steps deal with setting up the client application, before we get to the server-side PHP.


Step 11: Starting to Code

Open up the blank actionscript file that we created. Here is the skeleton for the document class we'll be using.


Step 12: The Imports

Here are all the imports we'll be using for this project. I will be using the Tweener class which can be found here


Step 13: Global Variables

Here we are defining our global variables. We'll need to keep track of the user, the room the user is in, and their newest post in the chatroom. We also put the location of the most used PHP files into some constants.


Step 14: The INVOKE Event

The first thing we do is listen for the INVOKE event. Whenever the app starts, it will fire the INVOKE event. When it does fire, we will check the EncryptedLocalStore for login credentials (in the next step).


Step 15: Checking the EncryptedLocalStore

When the INVOKE event is fired, the EncryptedLocalStore will check for an object called 'creds' (short for 'credentials'). If it finds that object, it will pass the login credentials to the appropriate text fields. After that, we call the init function.


Step 16: The init Function

Here we are setting some properties and adding some event listeners. We also create masks dynamically for our screen movieclips. We also create a new Timer so that we can check the database every three seconds for new comments, new users or new rooms. We're also listening for when the user goes idle and when the user returns, using NativeApplication.


Step 17: Creating the Dynamic Masks

Since we're using components and different type of text fields, we have to dynamically create the masks for the screen movieclips. We create a rounded rectangle that is the same size as the 'background' movieclip. We move the rectangle to the top of the display list and return the Sprite object.


The Server-Side Code

Next we will switch over to the back end: PHP and MySQL on your server.


Step 18: Setting up MySQL

The first step is to create a database. I use 'phpmyadmin' to do all my database and table setup. Log in to your account. In the 'Create new database' area, enter in 'chatroom' for the database name and click 'Create'.


When the database is successfully created, we will need to add a table that keeps track of all our users. In the 'Create new table on database chatroom', name the table 'chat_room_users', and in the 'Number of fields' section, give it a value of 4 and click 'Go'.


After you've clicked the 'Go' button, you will have to fill out the column detail. We'll need to store an ID, a username and a password for each user, as well as a flag to say whether they are currently online.

Set the first column name to 'id', set its type to 'INT', set it to auto-increment, and set it as the primary key. The name column should be named 'user'. The type should be 'VARCHAR' with a 'Length/Value' of 40. The third column should be named 'pass'. The type should be 'VARCHAR' with a 'Length/Value' of 40. The final column should be called 'on' with a type of 'VARCHAR', and a 'Length/Value' of 2.


If you are using something other than 'phpmyadmin', here is the MySQL code to set up the database.


Step 19: Switching to PHP

First we will need to set up our database access. Create a new PHP document, paste in the following code, replace the login credentials with your own, and save it to your webserver as 'chat_require.php'.


Step 20: Showing Users That are Online

This is where we will show a visitor who is currently online. We will need to use our database login information. Next, create a new PHP file and save it to your web server as 'user.php'. Then we will select all the users from the 'chat_room_users' table on our database. The PHP will echo out XML for Flash to read.

The XML will look like this:

Or, if no-one is online, like this:


Step 21: Logging in the User

Next we'll create the login logic. Create a new PHP file, and save it to your server as 'logon.php'. We'll need to require our database credentials. Next we check to see if the user, pass, and log variables are set. If they've been received from Flash, we sanitize the variables, and check the database for the user. We check to see if the username is already in the database. Also, we're looking to see if the user is trying to create a new username. When the logic is complete, we send back a numeric value for Flash to parse.


Step 22: Picking a Room

Now that the user has logged in, we'll give them access to the chatrooms. Create a new PHP file, save it to your web server as 'rooms.php'. We require our database credentials of course. Then we show all the tables that have been created on the database. The only table that we hide is our users table. We take the result and echo out some XML for Flash.

The first time the app is used there will be no tables in the database apart from the users table, as no rooms will have been created. We'll resolve this in the next step.


Step 23: Creating a Room

The user also has the option to create a room. First, create a new PHP file, and save it to your server as 'create.php'. We will need to sanitize our variables. Next, we query the database to see if the user is trying to create a room that already exists. If it doesn't we create a new table (not a new row in an existing table). Again, we send integers back to Flash.


Step 24: Getting the User's Newest Comment

When the user logs in, we don't want to show them the entire chat history. Since every time a user enters a room they automatically announce their presence, that results as a new entry into the database table. We will need to find the user's latest entry as a starting point for them to start receiving the chat. We will use the 'MAX' MySQL function to find it and send it back to Flash. Copy the code below and save it to your web server as 'enter.php.'


Step 25: Posting a Comment

Finally, we are at the point where the user can start to chat. We use this page to check if the user has submitted a comment. If they have said something, we put it into our table. We also use this file to echo out the chat since the user entered the room. This page also shows which user is currently in the room.


Connecting the Client to the Back End

Now it's time to make the chatroom connect to the server so that it can be truly interactive.


Step 26: Back to Flash

When the user first goes to log in to the chat area, they will click the 'button1' movieclip. When that button is clicked, it will call the 'logOn' function. All that function does is call the 'logger' function. The 'logger' function will do some simple checking to see if the required fields are filled in. Also, it will load the 'logon.php' file.


Step 27: The User is Logging in

When the user tries to log in, we send the credentials to the database to check whether they have access. We use the numbers that PHP returns to do some checking. If the number returned is a 1 or 2, the user is logged in. If a different number is returned, we use the 'errorPage' movieclip to handle it. This function is also the last function that we call when the user is closing the application. After we've told the database that the user is leaving the chat area, the application will close. This function also populates the room list on 'screen2'.


Step 28: Loading the Available Rooms

The 'popRList' function handles the xml that is returned from the PHP file. If the user sees a room that is already created, they can simply click on the list and the 'room' text field gets populated with their selection. The user is also able to log out here if they would like to sign in as a different user.


Step 29: Logging Out

If the user decides that they would like to log in under a different username, they can click on the 'out' button on 'screen2'. This will call the 'logger' function again except it will pass a zero to the database. When a zero is passed, the user is logged out, and we return to 'screen1.'


Step 30: Entering Room

When the user decides on a room they want to enter, the 'room' function is called. If the user is trying to create a new room, we do some simple checking to ensure the text field is filled in. We also replace any spaces with underscores.


Step 31: Handling the Room Response

When Flash gets the response from PHP, we use a switch statement to determine the logic. If the user successfully enters the room, we add some event listeners, and we load the 'enter.php' file.


Step 32: Entering the Room

When the user has entered the room, we have to get their newest post to determine how much of the conversation to display. We use the '_id' variable to track it. When the variable is set, we call the 'callComments' function.


Step 33: Getting the Comments From the Database

With this function, we will load the PHP file that will contain the XML of the chat. When we call this function, we say whether the user is logged in or logging out. Also, we pass it the user's comment. If the user hasn't said anything, we load just the XML and don't put anything in the database.


Step 34: Displaying the Comments

In the comments XML, we have a list of all the comments by all the users since the current user has entered the room. We also populate the user list with the users currently in that room.


Step 35: Sending a Comment to the Database

When the user has filled out their comment, they can click the 'button3' movieclip. When that happens, we call the 'callComments' function and pass it the user's message. However, we also use the 'commentClick' function for when the user wants to leave the room. We call the 'callComments' function but pass it a string saying that the user has left as well as a zero.


Step 36: Tracking the User

With these two functions we can track which PHP file we should be loading. The 'tracker' variable will keep track of where the user is in the application. Every three seconds, the timer will fire and call the 'loadSomething' function depending on the 'tracker' value.


Step 37: Leaving the Application

When the user has decided to leave the app, we call the 'onExiting' function. When the 'closer' movieclip is clicked, we dispatch a new 'EXITING' event. When the 'onExiting' function is called, we tell the event to 'preventDefault'. What this means is that the event will not actually cause the default action of closing the app. We want to do some database stuff before the user can actually leave the application.


Step 38: Other Functions

Here are some functions that are used throughout the application. We handle the 'errorPage' tweening, as well as moving the 'nativeWindow' around. Also, if the user wants to hit 'return' instead of clicking the 'button3' movieclip, the 'onKeyUp' function handles that.


Finishing off

We're almost done!


Step 39: Packaging the Application

We are finally ready to package our application to be distributed. Go to File > Commands > AIR - Application and Installer Settings.


Under 'Window style', select 'Custom Chrome (transparent).'


Click the 'Publish AIR File' button.



Step 40: Packaging the Application

When the 'Publish AIR File' button is clicked, a prompt to add a Digital Signature will pop up. You can select a file that you have already created. If you haven't, click on the 'Create' button.


Fill out the information and click 'OK'. After the file is created, you enter in the password and click 'OK'.


Once the file is created, you will get a prompt that says 'AIR file has been created'. Your chatroom application is now ready to be distributed.


Conclusion

I hope you enjoyed reading this tutorial. Don't forget to subscribe to the tuts+ feed to learn all kinds of the cool things PHP, MySQL and Flash can do.

Advertisement