The last tutorial I showed how to to create a simple flash based login just using actionscript. A visitor has asked “how do I modify this to go to a web page instead of a different scene?” So this is the topic of today’ s tutorial, and the solution is very simple!

Before continuing reading this post did you already join our Twitter and subscribe to our RSS feed? If not, rush and join us now to receive updates of new posts and free resources.

I could of course use all the graphics on the last tutorial, but instead I am going to use a different set.

If you are not familiar with the URL Request from the flash.net package, please see the flash docs

open flash CS 4, create a new AS 3 file

First lets create all our layers (notice the layers are bottom to top)

• background
• display
• input
• button
• labels
• actions

Your layers should look like this

background player – I changed the stage to 240 px X 125 px with a gray background (#CCCCCC). On the background layer, use take the rounded rectangle tool and create a background covering most of the stage. I am using black for the fill. The size is 220px for the width and 110 for the height, centered on the stage to leave some of the gray background as a boarder. Convert to a movieclip and call it background. lock the background layer.

display layer -  Use the text tool and create a dynamic text field for the message (either error or success), give it an instance name of display_txt. I am just using Verdana text so you should this text on your machine. I am us a blue font color (#0099CC). yes I know it is for an error message as well, but nobody says it has to be red. I just like this color, but feel free to change it. Don’t forget to embed your font!

button layer – using the rounded rectangle tool create a box for the button. I used a size of 50 px X 16.7 and used a gray gradient fill. Use the text tool and in the center write “LOGIN”. convert to a movieclip and call it login_mc. This movie clip is your button, and give it an instance name of login_mc.

input layer – take a text input component (username field) and drag it to the stage, the dimensions will be Width-135 Height-16.4 and a X location- 86.05 and a Y location-40.05 give the input field an instance name of name_txt. Leave as single line in the behavior option. Take another text input component(pssword field) and drag it to the stage, the dimensions will be Width-135 Height-16.4 and a X location- 86.05 and a Y location-61.05 give the input field an instance name of pass_txt. Also be sure to pick the password type in the behavior option.

labels layer - Using the Text tool write a header for the application “Client Login” the dimensions will be Width-153.95 Height-19.0 and X location- 67.05 and Y location-18.8. Using the Text tool write “username” to the left of the username text input the dimensions will be Width-65.0 Height-16.0 and a X location- 20.05 and Y location-40.25. Using the Text tool write “password” to the left of the password text input the dimensions will be Width-73.0 Height-16.0 and X location- 10.05 and Y location-61.25.

The interface is now done and you should have

actions layer - (right click in the first frame and open actions panel)

first we will be adding a stop action so the movie does not continuous play, then setting up the event listener for the button.
so when the user clicks on the button a loginUser function is called.

Now in the loginUser we checked to see if the user entered the correct username/password combo, and if this is is true, a success message is displayed,
and the website is launched.
I am using:
usename -graphic
password -mania

On success the main page of graphic mania is launched.

I think that navigateToURL is clear, but ask any questions if not.
In general it is of the form:

navigateToURL( new URLRequest(“some web page”), “opening options”);

Check to see if the username/password was not entered correctly, and display a error message to the user.

that is it, if you have any questions about this tutorial, please leave a comment or contact me. By the way if you are looking for a much more advance login tutorial I am working on one for my blog, which involves flash remoting & Coldfusion, there will be a link to this example later and will update the article with it.

you can download the source by clicking on the folder above!

Happy Flashing`-`

Johnny