How To Create A Flash Login Screen Tutorial
By johnnyb | January 28, 2010 | Posted in Flash | View Comments→ Photoshop 3D for Animators: The complete guide to learn 3D and animation in Photoshop CS5. Pre-order this book now and receive a %22 discount here.
In today’s tutorial I would like to explain to you how you can protect your flash movie with a custom login feature . This is the case that you have sensitive information that only certain people are allowed to see.
To do this we will just be using conditional statements (if/else) in actionscript.
Note of caution, this is not really a secure way of protecting your file, as somebody could decompile your swf, and therefore gain access to your sensitive information(username/password). It is meant to serve as a real world example of using contiional statements in flash & AS 3.
Let’s assume that I have a secret page that I would to protect, and I only want to share this information with a few friends. In this case it is a page of ”Secret Flash Tips”
First create a new flash AS 3 document
make the width 600 px and the height 300px with a black background.
lets first create all our layers, I will place everything on its own layer:
- actions
- message
- button
- text
- text input
- header
- background
You should have these layers
Using the rectangle tool create a recentangle covering the stage I am using no stroke, and a color of#968E95
After you have a background that you like, covert to movie clip(right click, convert to movie clip) call it background. Place this background movieclip onto the center of the stage leaving a boarder, now you could also leave the stage color white and use a heavy stoke, but I am just doing it this way. You should do this in the background layer.
Next take the text tool and create and create a header for this login page, I am using Verdana 30 px white with a knockout drop showdow. The text simple says” Graphic Mania Flash Tips”. Again in the header layer.
Below the header take the rounded rectangle tool and create 2 text input areas. I am using height 200, height 30, with a color of #EEEEEE, and triangle options of 7.8. Then place both text boxes and on top of each other, and place a dynamic text field on top of each of them. I am using American Typewriter Font(included in the fla), and don’t forget to embed your fonts! For both of the dynamic text fields give them an instance name of userTxt (for username), and passTxt(for password). Also for the password field to get the “******” in the password text field, make sure to set the behavior to “password”. This is in the text input layer
To the right or each text input in the text layer, place the text USERNAME(top text input), and PASSWORD for the lower text input. This is done in the text layer.
Above the text input we will place a dynamic text field (message layer), with an instance name of messageTxt. I put the text “Enter your username and password to log in”
final we will make a button, take the rounded rectangle tool create a square(80X 25) place the text login in the center, convert to movieclip call it login_btn
now the first scene design is done, and you should have this:
Now for the next scene, create keyframes for the second frame of the movie. We will only have the header, below the header will be a text field with a message, and below this another text box(telling people to remember to logout when they are done) to the right of the text box is another movieclip of a button, but this one has the text logout instead of login, and has an instance name of logout_btn. I also made the text white just to be a little differrent.
You should have something like this when you are done:
Now the design is done, and in the first keyframe, right click, and open up actions panel. The code to get this working is actually very simple.
First we use the stop command, so the movie does not loop by default, then some button handling(which I have talked about in past tutorials)
The logic is if they enter the correct password, let them to the second page, otherwise, show an error message. See complete code for frame 1:
So after they are done in the secure area, we want a way for them to be able to log out, which is done by sending them back to the login page. The logic here is when the button is clicked, send them back to the login page(frame 1).
You can check the final SWF result below:
SWF result
Now that is it for now, next time I will show you the same application, but instead of coding to another frame, it will go to a webpage.
Until next time happy flashing!
Johnny`-`
 |
View Comments to “How To Create A Flash Login Screen Tutorial”
Post comment
| Follow on Twitter | Subscribe: RSS | Email | ||
 |
 |
|
|
|
|
Pages
Resources News
- Create a Vibrant and Eye-Catching Drink Compositio…August 18, 2010
In this Photoshop tutorial, you’ll learn how to create a Sobe fruit drink advertisement using some simple water stock images and a lot of easy to use techniques that will yield high quality resul…
- 25 FREE HIGH QUALITY VECTOR FILESAugust 18, 2010
We would like to proudly introduce you to Vectorious.net. Vectorious is a great resource for finding royalty free stock vector images. Currently they offer over 12055 vector image files available f…
- Logo Design: 80+ Beautiful ExamplesAugust 18, 2010
It has been almost four months since my last post on logo design. Since then I have assembled an amazing collection of fresh new creative logos for you to be inspired by. I am confident that these …
- Poster Art – Reminiscence Down the History LaneAugust 18, 2010
Poster art is one of the most well-defined forms of art that has a rich historical background that involves a number of famous artists throughout the world. Ranging from advertising campaigning to …
- The Complete Beginner’s Guide to User Script…August 18, 2010
A user script is code written in a programming language that allows you to control a piece of software.
 |
 |
Useful Links
Hicham says:
Thank’s for the tut,
But can I ask you to add another part so we can verify the login/pass stored in the data base using php or coldfusion or even both of them
and also a sign up section to let the user register…
Thanks John.
uberVU - social comments says:
Social comments and analytics for this post…
This post was mentioned on Twitter by grafikservice: How To Create A Flash Login Screen Tutorial http://bit.ly/dwA1Rh...
Flash??????? : SS labs | SS labs says:
[...] How To Create A Flash Login Screen Tutorial [...]
johnnyb says:
Hi Hicham,
great idea for a future tutorial. I could do this in ColdFusion, which requires flash remoting. Lucky I am well versed in flash remoting`-`
the flash side does not change much(more actionscript code), and you would do the processing with ColdFusion. I don’t use php, so I would not be the one to write a tutorial one that.
I think first I would need to introduce flash remoting, which is a great idea for a tutorial.
Another tutorial idea could be to do this with XML instead of a database, not as fast or secure, but might make a good tutorial.
links for 2010-01-28 | RGBitmap – Diseño, Desarrollo y Creatividad + TICs says:
[...] How To Create A Flash Login Screen Tutorial | Flash, Design, Vector, Photoshop, Adobe Tutorials | Gr… Cómo crear una página de login con Flash. (tags: informacion tutoriales flash) [...]
Tweets that mention How To Create A Flash Login Screen Tutorial | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net -- Topsy.com says:
[...] This post was mentioned on Twitter by HowDo.us, apex, Hawaii Flash , Zizi Vzin, munkkron77 and others. munkkron77 said: ??? flash ?????? login http://www.graphicmania.net/how-to-create-a-flash-login-screen-tutorial/ [...]
miklweb says:
Hello Johnnyb,
in first, thank you for the tuto.
i am a french young webdesigner, and AS3 is not really simple for me. In your tutorial i want to replace the “goto (2)” by an url (http://xxxxxxxxx.com for example).
Can you help me PLEASE !!!!
Thank you for your answer…
Miklweb
johnnyb says:
That example will be up in a few days, it is the second part to this one. The main difference is instead of going to a frame it will go to a webpage.
Therefore after somebody enters the site with the correct usernmae/password instead of going to frame 2 it will go to some webpage. This is what you are wanting?
By the way, you say “AS 3 is not really simple for me” Can I ask why? Did you find AS 2 simple, but AS 3 is complex? Or do you find actionscript in general not simple?
.-= johnnyb´s last blog ..ColdFusion & XML =-.
favSHARE says:
This article has been shared on favSHARE.net. Go and vote it!
.-= favSHARE´s last blog ..Make Money Online With Domain Purchase =-.
How To Create A Flash Login Screen Tutorial | favSHARE.net says:
[...] Read the original article [...]
miklweb says:
Hello Johnny,
“Therefore after somebody enters the site with the correct usernmae/password instead of going to frame 2 it will go to some webpage. This is what you are wanting?”
Yes, it’s exactly that i want.
To answer at your question , i find Action script is not simple in general but the AS3 is less easy that As2.
see you !!
How to Create Login in Flash Tutorial | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net says:
[...] 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! [...]
Glenn says:
thank you so much for the source code. i was about to create how to make an AS3 actionscript to handle login system using Flash CS4
Thx
.-= Glenn´s last blog ..Travian Browser Game =-.
johnnyb says:
@ miklweb
As promised I created the other tutorial to go to another webpage instead of a scene. I hope you like it, if you have any questions, please let me know.
http://www.graphicmania.net/how-to-create-login-in-flash-tutorial/
.-= johnnyb´s last blog ..Remoting Login & ColdFusion =-.
johnnyb says:
@Glenn Cool I am glad`-` One not I would not use this in production as it is not secure(nor is it meant to be), In production you should really use a database or XML to store the passwords, but this is fine for non sensitive information too`-`
.-= johnnyb´s last blog ..Remoting Login & ColdFusion =-.
Updated the Flash Tutorials « HFUG says:
[...] How To Create A Flash Login Screen Tutorial [...]
Val says:
Beautiful! Great site!,Jul 7, 2010 11:29:14 AM