In today’s Flash tutorial I would like to explain to you how you can protect your flash movie with a custom login feature . This is the case that you have sensitive information that only certain people are allowed to see.
- Create Your First Android AIR App in Flash
- How to Create a Snake Game in Flash Using AS3
- Creating Reflection in Flash Using AS3
- Bitmap Data Manipulation in Flash ActionScript 3
- Creating and Controlling Flash Animation with XML
- How to Build a XML Driven Quiz Application in Flash
- Approach to Understand XML and Flash Workflow
To do this we will just be using conditional statements (if/else) in actionscript.
Note of caution, this is not really a secure way of protecting your file, as somebody could decompile your swf, and therefore gain access to your sensitive information(username/password). It is meant to serve as a real world example of using contiional statements in flash & AS 3.
Let’s assume that I have a secret page that I would to protect, and I only want to share this information with a few friends. In this case it is a page of ”Secret Flash Tips”
First create a new flash AS 3 document
make the width 600 px and the height 300px with a black background.
lets first create all our layers, I will place everything on its own layer:
- text input
You should have these layers
Using the rectangle tool create a recentangle covering the stage I am using no stroke, and a color of#968E95
After you have a background that you like, covert to movie clip(right click, convert to movie clip) call it background. Place this background movieclip onto the center of the stage leaving a boarder, now you could also leave the stage color white and use a heavy stoke, but I am just doing it this way. You should do this in the background layer.
Next take the text tool and create and create a header for this login page, I am using Verdana 30 px white with a knockout drop showdow. The text simple says” Graphic Mania Flash Tips”. Again in the header layer.
Below the header take the rounded rectangle tool and create 2 text input areas. I am using height 200, height 30, with a color of #EEEEEE, and triangle options of 7.8. Then place both text boxes and on top of each other, and place a dynamic text field on top of each of them. I am using American Typewriter Font(included in the fla), and don’t forget to embed your fonts! For both of the dynamic text fields give them an instance name of userTxt (for username), and passTxt(for password). Also for the password field to get the “******” in the password text field, make sure to set the behavior to “password”. This is in the text input layer
To the right or each text input in the text layer, place the text USERNAME(top text input), and PASSWORD for the lower text input. This is done in the text layer.
Above the text input we will place a dynamic text field (message layer), with an instance name of messageTxt. I put the text “Enter your username and password to log in”
final we will make a button, take the rounded rectangle tool create a square(80X 25) place the text login in the center, convert to movieclip call it login_btn
now the first scene design is done, and you should have this:
Now for the next scene, create keyframes for the second frame of the movie. We will only have the header, below the header will be a text field with a message, and below this another text box(telling people to remember to logout when they are done) to the right of the text box is another movieclip of a button, but this one has the text logout instead of login, and has an instance name of logout_btn. I also made the text white just to be a little differrent.
You should have something like this when you are done:
Now the design is done, and in the first keyframe, right click, and open up actions panel. The code to get this working is actually very simple.
First we use the stop command, so the movie does not loop by default, then some button handling(which I have talked about in past tutorials)
The logic is if they enter the correct password, let them to the second page, otherwise, show an error message. See complete code for frame 1:
So after they are done in the secure area, we want a way for them to be able to log out, which is done by sending them back to the login page. The logic here is when the button is clicked, send them back to the login page(frame 1).
You can check the final SWF result below:
Now that is it for now, next time I will show you the same application, but instead of coding to another frame, it will go to a webpage.
Until next time happy flashing!