Login Using Flash MX, PHP, and MySQL
         by Freddy Giordano aka Freddythunder

This tutorial will teach you how to make a login section on your Flash movie. This login section will take in a username and a password and check for an EXACT match in a database, then redirect as needed. This tutorial will show you the basics on how to authenticate in Flash.

It is not a totally web secure system (SSL), however, all your information will be in SWF movie, the scripts will be in PHP, and the usernames and password are in a database. That way, no information is easily obtained. Click the picture below for a working example; use 'testone' as the username and 'testtwo' for the password. For this tutorial to work, you'll need PHP and a database in MySQL. If you don't know what PHP or MySQL are, then check these tutorials:

[ Click the picture for an example; userinfo/password in above paragraph ]

Steps to Create Authentication
The following steps will help you to create the authentication system you see above:

Part One - Flash MX

  1. Open up a new flash file and make three empty keyframes in the timeline. Frame one will be for your login screen, Frame two will be the secret stuff (oooohhh!!), and Frame three will be for the people without a password. On the first frame, make two input text boxes, label them and add a box that says submit (or 'lemme in' or whatever).

    Don't forget to put different colored boxes behind the input text areas. If you have snap to objects (Ctrl+Alt+/) it'll make that task real easy!! And make that submit box into a button. Lastly, make a dynamic text box large enough to hold a few lines and give it the VAR of 'status'. For function and neatness, click the selectable button to off (the one that says 'Ab') and select 'Multiline' right to the left of it.
     
  2. Now, we need to modify the input boxes. We'll modify the User Name box first. In the properties panel, put in 'user' into the VAR box on the bottom right. Give that box the instance name of 'userinput'. In the User Password one, put 'pass' in VAR and 'passinput' as the instance. Also in the User Password properties, you can have Flash fill in asterisks by selecting 'password' out of the format selection box.
     
    See picture:

[ select password ]
 

  1. In frame two, you put the stuff you needed the password for -the secret stuff!! This is an endless thing. You can load in text files. Or put a button to popup a HTML file (with no address bar for added security) with your 'secret stuff'. You could even put a movie right after the login page, or put in an empty movieClip to load in different SWF movies!! So many things you can do - enough to make my head hurt! Moving on!
     
    In frame three, put in your shunning page. This will be where you tell whoever that the username and/or password was not valid.
     
  2. Remember to put in a back button just in case an actual user misspelled something. On this back button, you MUST have the action _root.checklog=0; - if you don't, when you go back to frame one, Flash will remember the variable that has already been sent back from the PHP. Just in case, here's the actions for that button:
     

     

     

  3. Lights, Camera, Actions!! (That was stupid!!) Put these action in the first frame of the movie:
     

  4. Next, put these actions on your 'submit' button:

  5. The last thing you need to do is disable the Flash menu that you get when you right click on the movie. This menu gives the user the option to navigate through stop() actions in your Flash movie. This way, the menu will not be readily available. Before you publish your SWF movie, goto File, Publish Settings, under HTML, uncheck 'Show Menu'.
  6. Grab a beer or a sandwich or something 'cause the Flash part's done. Next we get to the acronyms PHP and MySQL. Whoo hoo!!

Part Two - PHP Section

  1. This parts a bit of cut and paste. I've commented the code so you can understand the PHP involved. The terms will be layman because, so far in PHP, that's the language I speak!! If you use the exact code from above, your PHP file will have to be called 'newlogin.php'.

    I use notepad for code, so if this is your first PHP experiment, remember when you save your PHP script, you will have to give it the extension '.php'. You will have to edit the database connections, the database, and the table name from 'auth' to whatever you choose if you change it in MySQL.
     

  2. NOTE - This is very important!!
    This cost me about two days of hair-ripping frustration!!! Be careful with your case sensitivity of your database, tables, and labels in the PHP script and MySQL. If you are using (or even think you're using) UNIX, you area able to put in big letters - but I don't advise it!! (like my old MySQL names were userName and userPassword) and nothing worked!! So you know!!

Part Three - MySQL Section

  1. Enter into your MySQL administration to create a table. Here's the script to make a table with the name 'auth'. You will have to change the PHP script here from 'auth' to 'yourtable' if you don't use my script below:
    CREATE TABLE auth (
      userid
        int(4)
        unsigned
        zerofill
        DEFAULT '0000'
        NOT NULL
        auto_increment,
      username varchar(20),
      userpassword varchar(20),
      PRIMARY KEY (userid)
    );
    

    This will make a table using userid as a key that you will not have to deal with because MySQL will fill that up for you. The two field names are 'username' and 'userpassword' (all lower case!!! N,P!!).
     

  2. Now, when you create your table, you can add in your user names and passwords as needed. I have included an HTML form that will allow you to submit usernames and passwords. I called it 'usercheck.php'. I commented it the best I could!! :)

There ya have it!! Upload everything to your PHP friendly server and call it up in your browser. I hope you have fun with it!! And here's the best part, your files:

Download ZIP

If you have any questions, feel free to post them in the appropriate forum on kirupaForum.
 

 Freddythunder

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.