How To Create A Flash Login Screen Tutorial – Part 2

13 Mar 2010

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!

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

6 Responses to How To Create A Flash Login Screen Tutorial – Part 2

Frank

March 15th, 2010 at 3:43 pm

WAR,
Murder
… the removal of Saddam

Bearded man

March 20th, 2010 at 2:12 pm

I'd be lying if I suspected that you *weren't* going to copy one person's head onto another body… but anyway, here's the correct answer to your question:

Have you noticed that in the Tools palate, there are tools which have a small black triangle at the bottom of the icon? That means there's more than one tool associated with that icon. Click-and-hold your mouse on the rectangular marquee tool to reveal the polygon and elliptical marquee tools.
If configured correctly in the Preferences window, you can set Photoshop to cycle through all the tools in a group by pressing the associated letter-button over and over and over — in this case, the <M> key for Marquee.

Don't forget to hold the SHIFT key when drawing your elliptical marquee to keep a perfect circle selection.

Once your marquee selection has been made, ensure you're in the correct target layer — if this is just an image you've opened, say, from the web or your camera, there will most likely be only one layer in the Layers Palate, so forget I mentioned it.

Once selected, copy your selection by either pressing Command-C (Control-C for PC) and then open your other image. Press Command-V (Control-V for PC) to place your copied circular selection into the second image.

syntax

March 22nd, 2010 at 8:06 pm

I thought Macs are impervious to freezing and software issues.

Villies

April 9th, 2010 at 9:00 am

What do you shave with?

Razor or electric shaver?

Electric shaver will leave a shadow.

The finer the razor, the closer the shave.

Use hot towel around your face to open the skin pores. Get your skin nice and red. Shave. Then use friction alcohol to close pores (as long as you didn't cut yourself!)

Using shaving cream helps. But not the canned stuff. That's a poor excuse for shaving cream, use the real stuff that looks like an ongant and has to be wet with water to work.

Lastly, some barbers still use the shaving blade. The old time razor. Cuz that stuff damn works! But its a real art and a trade. I'd be scared to slit throat with that shtuff.

Hope that helps!

utterchaos99

June 2nd, 2010 at 5:13 am

Brooklyn Dodgers-LA Dodgers. Oakland A's-Philadelphia Athletics.

Aunty M

June 8th, 2010 at 9:17 am

This is very stereotypical. My grandfather is named Cassidy and Madison is his middle name, and he's 102. My aunt has the name Taylor, she's 50.

Programming Blog

How To Create A Flash Login Screen Tutorial – Part 2

Related topics you may like to read

6 Responses to How To Create A Flash Login Screen Tutorial – Part 2

Comment Form

About this blog