Hello, welcome to this new video tutorial brought to you by our media. Here, we will learn how to create a simple login form using a s3 only in Adobe Flash. In this, we will leave input text fields, a login button, and a few lines of code. So let's get started. First, create a new Flash file as a 3.0 document. Overall, you already have an idea of how a login window is.

The login window will check the validation of the user's login name and password. And if it's correct, only then it will jump to the next page on scene as decided. Name this first layer as text. Take a text tool as you click on the stage area. Change its text type to static text and type username here In front of this user name text, create one more text box and change its type to input text from the Properties panel. In this Properties panel, you will find three types of text, static text, dynamic text, and input text.

Input text is used when you want the user to type into that text field. Dynamic text is used to present the text dynamically. They have many properties. And static text is the normal text we generally use in Flash. It never presents any change during the animation. In this textbox, the user has to insert his username.

That is why it's an input text type text box. Keep it selected and place the cursor on the embed button in the Properties panel, you get to read set font embedding options. Click on this and it opens up a new dialog box of character embedding. This is the character ranges section. Select the character ranges, we want to embed. Whatever user types in this text field will be visible in these character styles.

We select here, uppercase, lowercase, and numbers. Other than these will not be accepted in the text field. Here's one more option of maximum characters for input. We don't want the user to type unlimited characters there. So we set the value to 20. Besides that, there is one more option of multi line.

Click on its drop down menu and select single line near to that. He is a small icon which says show border around text, click and put it On, you can see a thin border visible to the text area on the stage. So our input text area is ready for the username. This will be used in ActionScript. So let's give it an instance name my input. Now, grab both the text areas on the stage and duplicate it below that for the password text, grab the text boxes and hold down the Alt key to create a copy of it.

Rename the static text as password. The input text field in front of it will be used to fill the password. It's a copy of the my input text field. So let's modify the properties for the password input text. Change its instance name to my password. Click on embed to open the character embedding dialog box.

Generally, passwords are seen in star or hash format. So for password input, we will use punctuation. also modify his behavior from single line to password. Save your file as login. And let's test it for now. We see both username and password fields here.

The cursor is blinking in the username input text field. So we are able to type in here and when we type inside the password text field, it shows in punctuation that is install format. And now we need a submit button on the stage. For this, open the components window, press Control plus f7 for the shortcut dragger regiment button available Here now to modify these buttons label to submit button, open the component inspector window by shift plus f7. Here, change its level to submit this button to will be needed in ActionScript. So name it, submit underscore btn as instance name.

Now we need an additional error text, which will appear when the username or passwords are typed wrong. This error text will be plain static text. Take the text tool and type invalid username or password below password text area. This is a combined error text for incorrect username and password. Lower down its font size to 16 and color to read as it's an error text. This text will be used in ActionScript so Press f8 and get it converted into a movie clip.

Name this symbol as era and an instance name as era underscore MC. We're almost done except one more screen area where the user will visit after successfully logging in. So let's start creating a new logged in screen on the next keyframe. Start typing using plain static text. In this in front to welcome username should be displayed So get some dynamic text here and place it in front of welcome. Open ma dialog box and select the same uppercase, lowercase and numerals for this.

Also set the behavior to single line option. In this, the username should be displayed who successfully logs in at that moment. So also give this dynamic text field and instance name of my text. Here, the border around the textbox should not be visible. So click off the I confer it. Finally on stage, our login screen and post login screen is ready.

Now the design part is done. Let's start with the actions scripting. Add a new layer and name it actions and press f9 to open up the action panel, we have two keyframes in the timeline. So first we use the stop command, so the movie does not play in a loop by default. Now, we don't want this error text to be visible at first. So assign it false value for visibility.

Now, let's add variables to store the username and password input values. So, here we declare two global variables. A global variable is a variable that you define outside of any function. This is one which can be defined in all areas of our code. Like in this file, we need to use the same username variable in the second key frames dynamic text field So, we need the global variable for this. So, as a global variable, it will be available both inside and outside the function, but defined only outside the function area.

Similarly, let's add one more variable named my user of string class. In this actual username values will be stored. The string class is a data type that represents a string of characters. This provides you to manually the string values. Let's store a username value as jack. Similarly, we need to store the password.

Store the password as password itself. So far now we have our four variables Next comes the function for the submit button. If you remember the instance names here, firstly we need to assign my input value to the user variable. Apply the same to the password variable, assign it to value of my password. Now, we need to use conditional statements ahead. This will help us to decide when to display the error text.

The condition will be that if the user value is similar to my user And pass value is similar to my pass, only then the user will log in successfully and go to the next frame screen. Otherwise, the edit text will be displayed. So, if user equals to my user and pass equals to my past, the user goes and stops at frame number two L's. Era underscore MC. That's the instance name for the era text. Its visibility goes through.

The logic is, if we enter the correct values, it takes us to the second page. Otherwise, show an error message. Now, let's call this above the Submit function on the submit button. On mouse click event. It's time to test the movie. Control plus Enter to get the SWF screen.

True username set value is jack, and the password is password. So to cross check, let's put some incorrect values for both the username and the password. It shows an error text. Now let's put the correct username and the wrong password. Still, it doesn't log in, and the Edit Text remains there. Now, put the correct password and check here, the user password matches correctly.

The user successfully logs in and views the welcome page. But now, we want to display the username in front of the welcome text in the dynamic text field. Fathers coding should be added on the second keyframe of the action layer. Open the action panel on that frame. My text is the instance name for dynamic text field. Text is to be set for my text.

In this mind text, the user variable value should be displayed. This value is defined in the action on the first keyframe. Let's test the movie. Again. Start with an incorrect username and the edit text is displayed. Now put the correct values and check.

The welcome screen displays the username here. So it's done correctly. Now in the actions great We modify the user variable value to Mike and password to new password. Control plus Enter to test the movie. This time it shows the error text with the previous username and password used. change to the current valued username and password to check.

It goes to the welcome screen along with new values for the username in the dynamic text area. That means we are finally done. This is the case when you want only certain people to see the information. As we saw, you can have your own usernames and passwords to protect your files. We hope everything here is clear. Aruba media is glad to be bring you this video tutorial.

We will be back with some more interesting stuff. Till then keep learning