How To Create A Flash Login Screen Tutorial
By johnnyb | January 28, 2010 | Posted in Flash | 15 Comments
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 below
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`-`
Author: johnnyb (9 Articles)
John Barrett is a ColdFusion & Flash Developer at the University of Hawaii. I am also the manager for the Adobe Hawaii Flash User Group When not doing ColdFusion & Flash I can be found surfing on the North shore.
Related topics you may like to read
15 Comments to “How To Create A Flash Login Screen Tutorial”
Post comment
 |
 |
|
|
Pages
New Arrivals
Resources News
- Book Review: Logo Design Love by David AireyMarch 11, 2010
There is so much high quality information and it covers all the areas we really need to know about without all the BS.
- 40 Awesome Infographic Designs which Helping Analy…March 11, 2010
These kind of special amazing Information Graphics showing popularity of different events and era in such a creative way where they presenting visual representations of data, statistics and other q…
- More collections of free Wordpress themesMarch 11, 2010
As you probably already know, Wordpress a very flexible and useful tool for blogs and websites. For this tool, there are an incredible number of plugins and themes to download and use for free. In…
- 50+ High-Quality Photoshop Tutorials For Lighting …March 11, 2010
Photoshop gives designers the ability to create some amazing effects that can accomplish just about anything you can image. Fortunately, there are plenty of Photoshop experts who are willing to wri…
- Innovative Concept & Prototype Cars of the Fut…March 11, 2010
Here I look to showcase some of the more exciting and sexy designed concept cars shown by the large car manufacturers. Whether they are the next step in hybrid technology or focusing on the next ur…
 |
 |
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