Creating a Password Protected Section in Flash

This tutorial will teach you a very simple method for creating a password protected section in your flash movie so that you can, for example, create a restricted area in a flash website. We are going to use ActionScript conditionals to create this feature. You will be required to have some very basic ActionScript knowledge to follow this lesson, you can view our short 'if' conditionals tutorial if you would like to learn more about conditionals.

Our movie in the example above is divided into three frames. The contents of the first frame is the log in screen, the second frame has the wrong password screen, and the third frame is the successful log in screen. When you submit the correct password, the movie runs a special success script that you assign, our success script here merely tells the movie to go to the third frame, but you can tell it to do anything that you want, like loading an external image, loading an external text, going to another scene, opening a new URL, or anything that you can think of.

Setting up the Stage and Timeline

We will start off by creating all the visual elements in the three frames of our movie and then do the ActionScript. When you're ready, open up Flash and create a new empty movie. The dimensions, frame rate, etc do not matter in this tutorial. Create two layers in the timeline, name the upper one Actions and the one below Content. Insert three blank keyframes in each of the two layers, you can do this by right-clicking an empty frame on the layer and clicking on the Insert Blank Keyframe command as illustrated in the image below. We are going to put all of our visual content in the lower layer and all of our code in the upper layer.

Frame 1 (Submission Screen)

The first frame in our movie is going to have three elements, (1) the text saying that a password is required, (2) a field for the user to submit their password, and (3) a button to initiate the submission procedure. We are going to create these three elements in that order.
Before you start, make sure that you are editing the 'Content' layer, click on the 'Content' layer title on your timeline and then click on the first frame of that layer to add content to it. Now use the text tool to write down a message saying that a password is required.

We now need to create the text input field for our password to be submitted. We are going to use the TextInput Component. Components are ready-made flash movies used to perform specific functions, a text input component is exactly what it is called, a component that lets you input text. Open the component panel by going through Window>Components and look for the TextInput component under the UI category. Drag a copy of the component onto the stage as illustrated in the image below.

We will have to configure our text input component to work as a password field. Access the Properties Inspector and click on the Parameters tag to configure the basic options for this component. The only one that you will have to change for this tutorial is the password option, simply set this to true to make the text typed in the box appear as stars instead of the actual letters. Once that is done, you will need to give your component an instance name for us to be able to control the object via ActionScript. Assign the name password_txt to it.

The last element to add to our first frame is the submission button. We will use the button component to do this, simply drag one from the components panel, it is found under the UI category just like the previous one. Access the parameters tag once more and edit the label name to Submit and then assign the instance name submit_btn to it.

Frame 2 (Wrong Password Screen)

Now that our first frame is ready we shall move on to the second one. This frame is going to have two elements, (1) the text saying that the password submitted was wrong, and (2) a go back button.
Start off by moving the red cursor on the timeline to the second frame so that we edit the contents of frame 2. Use the text tool to create a text field that says "Wrong password!". Insert a button component from the components panel, access the Parameters tag through the Properties Inspector to label it 'Try Again" and finally assign the instance name again_btn to it.

Frame 3 (Restricted Content Screen)

The last frame to create is the restricted content which will be accessed upon submitting the correct password. You can put whatever content you wish in here, in this tutorial we will only put a message saying that you have submitted the correct password. You can do this by using the text tool to create a text field that says "Congratulations! You have submitted the correct password".
This completes the last visual element required in our movie here. We will now move on to write our ActionScript. All of our code will be placed in the frames of the upper layer named 'Actions'.

Writing the Code

Right-click the first frame in the Actions layer and click on Actions to open up the Actions Panel. The first thing that we will have to do is stop the movie from going to the second or third frame by making it stop at the first one. We will then have to set a password, and then tell it that upon releasing our button, the movie should go to the third frame if the password submitted is correct, or else go to the second frame if the password submitted is not correct. The code below tells what we have stated specifically.

stop();
var myPassword:String = 'republicofcode.com';
submit_btn.onRelease = function (){
if (password_txt.text == myPassword) {
gotoAndStop(3);
} else {
gotoAndStop(2);
}
}

Note:
(1) We used strict datatyping to declare that our variable myPassword shall only accept the string data type, you can learn more about the different types of variables in Flash and strict datatyping in this tutorial.
(2) You can learn more about the 'if' conditional from this tutorial.

Before testing our password submission movie, we will have to make our failure frame redirect to the submission frame upon clicking the 'Try Again' button. This code needs to be placed on the second frame of our Actions layer. Right-click that frame and click on 'Actions'. The following code is self-explanatory.

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

This should do the trick, test your movie and try putting a wrong password and then try putting the right one. You can create a try again button in the third frame by using the same method used to create the one in the 2nd frame.
This concludes our tutorial, I hope that you learnt something helpful from this tutorial. If you have any questions feel free to post them at the Oman3D forum.
- End of Tutorial.