Search tutorials
Password Protection
I am a (beginning) webdesigner and for one of my latest Flashprojects I had to make a password protected section. So I started thinking. Everybody can crack a Javascript password protection, I don't know enough to do it in Java and those applets aren't fully crackproof, next possibility PHP or ASP forget it I had to use Geocities and had no PHP or ASP support. Just on the moment I tought I wouldn't be able to solve this problem Flash came in my mind. Flash has several advantages in this matter. Nobody can view my Actionscriptcode, it's extremely easy and almost everybody has Flash.
I said to meself: "Let's check Flashkit out, maybe I find some interesting tutorials". Forget it I found a few tutorials but not one tutorial covered my problem. At that moment I had two problems. But lukely I knew some Javascript and a few Actionscripttricks and I got started.
Textfield
In this tutorial I'll explain how to place a textfield (for the password) and a button in a movie and let the movie check the password before sending you through to the secured HTMLpage. If the password is wrong the movie will display wrong. At the end of this tutorial I'll give some tips about how to use a user/password protection.
Open a new movie. Select the texttool and make a box. Now go to the Character window and click on the Text Option-tab (Windows>Panels>Text Option).
In the pulldownmenu you see Static Text selected. Click the menu and select Input Text to enable the user to enter the password. After selecting Input Text the content of the Text Option-window changes. There's one pulldownmenu with Single Line selected, change this pulldown to Password. If you select Password the content of your textfield will be displayed as *'s, that's what we need.
Next give the textfield a name. You give a textfield a name by changing the textfield near "Variable:". I 'll use password in this tutorial.
Under that textfield you see "Embed Fonts:". Select the first symbol that looks like: [...]. This means that all types of characters are allowed (UPPERCASE, lowercase, numbers and other character like ( ) ! [}). If you don't want passwords with odd characters just deselect the first symbol and select the desired symbols.
On the right of these buttons you see "HTML" and "Bg/Border". Select Bg/Border. As you can see a border appeared around the Input Text.
Button
OK. The password textfield is added. Let's continue and add a button. We'll attach the brain of this movie to that button.
Draw a button (I ain't going to explain how to draw a button here). Select your button and start Actionscript (the little blue arrow in the bottom). Attention: make sure you've selected the button itself and not the layer. Otherwise things will complete go wrong.
Actionscript
The Actionscript you need to add is very simple. Doubleclick "On Mouse Event". Next go to Actions. In Actions you doubleclick "if". In the bottom of the Actionscriptwindow appears "Condition:" and a textfield. Change the textfield to: _root.password.value eq "yourpass". Where you change yourpass to your password. If you have chosen a different name for the input textfield you should replace password in _root.password.value by the chosen name.
If the user enters the right password we've got to redirect him/her to the secured page. We do that by doubleclicking getURL. Enter the URL of your secured page save and try it.
I promised you to make a Actionscript who will display wrong when the password is wrong. We'll do that with the help of a Dynamic Text.
Close the Actionscriptwindow and select the texttool. Make a new box in your movie. Go to the Text Optionwindow and select Dynamic Text instead of Input Text. Give it again another name, I called it check. Select the button and open the Actionscriptwindow. Our code till now looks like this:
on (release) { if (_root.password.value eq "yourpass") { getURL("secure.html"); } }
If we want to let an error appear after entering a wrong password we'll have to use else. Select getURL. Doubleclick "else". Doubleclick set variable. Change the textfield after "Variable" to "_root.check.value". And "Value:" to "Wrong!". (without the "s of course)
You're finished.
The code: on (release) { if (_root.password.value eq "yourpass") { getURL("secure.html"); } else { _root.check.value = "Wrong!"; } }
Username and Password
Now we'll make it a bit more complicated. A password protected area with username and password. The best method to solve such a problem is agian with the if-statements. but this time with:
if (_root.password.value eq "yourpass" && _root.username.value eq "youruser") { getURL("secure.html"); }
Or instead of redirecting the user to a HTMLpage you could send him/her (with GotoAndPlay) to another scene or another frame or another movie.
The textfields. You just take the textfields from the previous example and add an new field (an Input Text) for entering the username.
I am a (beginning) webdesigner and for one of my latest Flashprojects I had to make a password protected section. So I started thinking. Everybody can crack a Javascript password protection, I don't know enough to do it in Java and those applets aren't fully crackproof, next possibility PHP or ASP forget it I had to use Geocities and had no PHP or ASP support. Just on the moment I tought I wouldn't be able to solve this problem Flash came in my mind. Flash has several advantages in this matter. Nobody can view my Actionscriptcode, it's extremely easy and almost everybody has Flash.
I said to meself: "Let's check Flashkit out, maybe I find some interesting tutorials". Forget it I found a few tutorials but not one tutorial covered my problem. At that moment I had two problems. But lukely I knew some Javascript and a few Actionscripttricks and I got started.
Textfield
In this tutorial I'll explain how to place a textfield (for the password) and a button in a movie and let the movie check the password before sending you through to the secured HTMLpage. If the password is wrong the movie will display wrong. At the end of this tutorial I'll give some tips about how to use a user/password protection.
Open a new movie. Select the texttool and make a box. Now go to the Character window and click on the Text Option-tab (Windows>Panels>Text Option).
In the pulldownmenu you see Static Text selected. Click the menu and select Input Text to enable the user to enter the password. After selecting Input Text the content of the Text Option-window changes. There's one pulldownmenu with Single Line selected, change this pulldown to Password. If you select Password the content of your textfield will be displayed as *'s, that's what we need.
Next give the textfield a name. You give a textfield a name by changing the textfield near "Variable:". I 'll use password in this tutorial.
Under that textfield you see "Embed Fonts:". Select the first symbol that looks like: [...]. This means that all types of characters are allowed (UPPERCASE, lowercase, numbers and other character like ( ) ! [}). If you don't want passwords with odd characters just deselect the first symbol and select the desired symbols.
On the right of these buttons you see "HTML" and "Bg/Border". Select Bg/Border. As you can see a border appeared around the Input Text.
Button
OK. The password textfield is added. Let's continue and add a button. We'll attach the brain of this movie to that button.
Draw a button (I ain't going to explain how to draw a button here). Select your button and start Actionscript (the little blue arrow in the bottom). Attention: make sure you've selected the button itself and not the layer. Otherwise things will complete go wrong.
Actionscript
The Actionscript you need to add is very simple. Doubleclick "On Mouse Event". Next go to Actions. In Actions you doubleclick "if". In the bottom of the Actionscriptwindow appears "Condition:" and a textfield. Change the textfield to: _root.password.value eq "yourpass". Where you change yourpass to your password. If you have chosen a different name for the input textfield you should replace password in _root.password.value by the chosen name.
If the user enters the right password we've got to redirect him/her to the secured page. We do that by doubleclicking getURL. Enter the URL of your secured page save and try it.
I promised you to make a Actionscript who will display wrong when the password is wrong. We'll do that with the help of a Dynamic Text.
Close the Actionscriptwindow and select the texttool. Make a new box in your movie. Go to the Text Optionwindow and select Dynamic Text instead of Input Text. Give it again another name, I called it check. Select the button and open the Actionscriptwindow. Our code till now looks like this:
on (release) { if (_root.password.value eq "yourpass") { getURL("secure.html"); } }
If we want to let an error appear after entering a wrong password we'll have to use else. Select getURL. Doubleclick "else". Doubleclick set variable. Change the textfield after "Variable" to "_root.check.value". And "Value:" to "Wrong!". (without the "s of course)
You're finished.
The code: on (release) { if (_root.password.value eq "yourpass") { getURL("secure.html"); } else { _root.check.value = "Wrong!"; } }
Username and Password
Now we'll make it a bit more complicated. A password protected area with username and password. The best method to solve such a problem is agian with the if-statements. but this time with:
if (_root.password.value eq "yourpass" && _root.username.value eq "youruser") { getURL("secure.html"); }
Or instead of redirecting the user to a HTMLpage you could send him/her (with GotoAndPlay) to another scene or another frame or another movie.
The textfields. You just take the textfields from the previous example and add an new field (an Input Text) for entering the username.
| » Level Basic |
|
Added: 2002-04-14 Rating: 6 Votes: 62 |
| » Author |
| Joris Gillis, webdesigner |
| » Download |
| Download the files used in this tutorial. |
| Download (0 kb) |
| » Forums |
| More help? Search our boards for quick answers! |
-
You must have javascript enabled in order to post comments.
Comments
There are no comments yet. Be the first to comment!