Week 11 - Password protecting a website


Learning Objectives for this Section:

Password Protecting your website using AS 2


Lecture:

 

For this tutorial you will learn how to password protect certain areas of your .swf. This could also be used to add game codes/cheats or whatever you want.

First open up a new document. The dimensions and the background color do not matter, so change it to your liking...

We will start of by making a total of three frames which is all we are going to need. To insert a keyframe, right click on the next rectangle on the timeline that doesn't have a frame and press Insert Blank Keyframe.

In our first frame, we will have the password field, some text saying that a password is required, and a submission button.

Make sure that you are on the first frame by clicking on it. Then go ahead and select the text tool. Be sure that the text is "Static" not "Dynamic" or "Input". Then click on the stage and write something like "A password is required to view this content" or whatever.

Next, we will make the password input field. Go to Window>Components and then under the User Interface category find the Text Input component. Click and drag it to the stage. Now you have a pre-made text input component!


Click on the component and under the Parameters tab, change the password parameter to "true" instead of "false". This will make it so that when you type in a password, you will see asterisks instead of regular letters and numbers. Finally, give the component an instance name of password_txt.


After this, under User Interface again, drag a button component onto the stage and then change its Label parameter to "Submit" or something along those lines. Assign the button an instance name of submit_btn.


Now for the code. While still on the first frame, click on the stage and make sure that nothing is selected. Next, add this code to the frame:

stop();
var password:String = '(whatever you want)';
submit_btn.onRelease = function(){
if(password_txt.text == password){
gotoAndStop(2);
}
else{
gotoAndStop(3);
       }
}

The code will be explained further down.

Now for the second frame.

Click on the second frame and put whatever you wanted to restrict. For this tutorial, I just put "Access Granted". That was easy!


Now click on the third frame.

Put some text like "Access Denied" or something to show the person that they got the password wrong. Next, drag another button from the User Interface category in the Components panel. Change the label to "Try Again" and assign it an instance name of tryAgain_btn. Put this code on the frame:

tryAgain_btn.onRelease = function(){
gotoAndStop(1);
}

This code will tell the computer to go to the first frame when the button is clicked and the mouse is released. Not too complicated

Now for the previous code (First frame)

Line 1: this tells the computer to stop on this frame. If that command wasn't there, you would just see all the frames passing by

Line 2: This declares a variable, (var), named password and declares that it will be a String, not a number or array. It then sets the password to whatever you put between the apostrophes

Line 3: Same as for the try again button

Line 4: This checks to see if the entered password is equal to the set password (the one that you chose)

Line 5: This tells the comp to go to the 2nd frame if the above is true

Line 7: This tells the comp to go to the 3rd frame if the if statement isn't true

 

Add this to the website you created earlier in the semester, making sure it works properly.