<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Flash, Flex and ActionScript tutorials - flashadvanced &#187; context menu</title>
	<atom:link href="http://flashadvanced.com/tag/context-menu/feed/" rel="self" type="application/rss+xml" />
	<link>http://flashadvanced.com</link>
	<description>Become an advanced actionscript developer</description>
	<lastBuildDate>Sun, 30 Jan 2011 21:10:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Simple login form with ActionScript 3.0</title>
		<link>http://flashadvanced.com/simple-login-form-with-actionscript-3-0/</link>
		<comments>http://flashadvanced.com/simple-login-form-with-actionscript-3-0/#comments</comments>
		<pubDate>Tue, 07 Jul 2009 08:41:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[ActionScript 3.0 Basics]]></category>
		<category><![CDATA[actionscript 3]]></category>
		<category><![CDATA[context menu]]></category>
		<category><![CDATA[input text field]]></category>
		<category><![CDATA[login form]]></category>

		<guid isPermaLink="false">http://flashadvanced.com/?p=222</guid>
		<description><![CDATA[Now I will show you how to create a simple client login form using AS3 only. You just need two input text fields, one login button and few lines of code. So, let&#8217;s get started! 1. Create a new Flash CS 3 document. Size: 400 x 250. 2. Name the first layer &#8220;background&#8221;, take the [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://flashadvanced.com/?p=222"><br />
<img src="http://www.flashadvanced.com/wp-content/upload/login/login.jpg" /><br />
</a></p>
<p>Now I will show you how to create a simple client <strong>login form</strong> using AS3 only. You just need two <strong>input</strong> text fields, one login button and few lines of code. So, let&#8217;s get started!</p>
<p><span id="more-222"></span></p>
<p><span style="color:#ff0000;">1.</span> Create a new Flash CS 3 document. Size: 400 x 250.</p>
<p><span style="color:#ff0000;">2.</span> Name the first layer &#8220;background&#8221;, take the rectangle tool, disable the stroke color and for fill color choose radial gradient. Choose the colors you like.</p>
<p><span style="color:#ff0000;">3.</span> Create a new layer named &#8220;inputs&#8221;. Create two input text fields with same size. Give the first text field instance name &#8220;username&#8221; and the second &#8220;password&#8221;. You can see I made some design for the forms. You can do the same or just download the example and use mine.<br />
Now we have to make our status text field. Create a new dynamic text field with instance name &#8220;statusTxt&#8221;.<br />
Don&#8217;t forget to <strong>embed</strong> the font for all of the text fields:</p>
<p><img src="http://www.flashadvanced.com/wp-content/upload/login/embed.jpg" /></p>
<p><span style="color:#ff0000;">4.</span> Create new layer called &#8220;button&#8221;, take the rectangle tool and draw a rectangle. Create a static text field and write &#8220;login&#8221;. Select both the rectangle and the text field and convert them to movie clip. Give it an instance name &#8220;loginBtn&#8221;.</p>
<p><span style="color:#ff0000;">5.</span> Create new layer called &#8220;actions&#8221;. Before we go to the ActionScript we have to complete the last steps. So, select the second frame of the first layer and drag to the last one:</p>
<p><img src="http://www.flashadvanced.com/wp-content/upload/login/selection.jpg" /></p>
<p>If you made the selection correctly convert the selected frames to keyframes. Now, we have to change some of the second frames. Delete everything from the &#8220;inputs&#8221; layer and create a static text telling the user that he is logged in successfully. Select the &#8220;button&#8221; layer, delete the login button and create the same button for logging out and give it an instance name &#8220;logoutBtn&#8221;.<br />
<span style="color:#ff0000;">6.</span> Now let&#8217;s go to the code. Select the first frame of the &#8220;actions&#8221; layer and open the actions panel.</p>
<h4>Code updated!</h4>
<pre><code>
//we don't want to go to the second frame immediately
stop();

<span style="color: #006600;">//In order to secure the login form we must hide the context menu
var cMenu:ContextMenu = new ContextMenu();
cMenu.hideBuiltInItems();
contextMenu = cMenu;</span>

//here we hide the password
password.displayAsPassword = true;
//we want a hand cursor for our button movie clip
loginBtn.buttonMode = true;
//adding event listener to the login button
loginBtn.addEventListener(MouseEvent.CLICK, loginFunction);

function loginFunction(e:MouseEvent):void{
	//if both username and password are correct the user is logged in
	if(username.text == "flash" &#038;&#038; password.text == "advanced"){
		gotoAndStop(2);
	}else{
		//else an error message shows up
		var fmt:TextFormat = new TextFormat();
		//we need a text format to change the color to red
		fmt.color = 0xff0000;
		statusTxt.text = "Incorrect username or password";
		statusTxt.setTextFormat(fmt);
	}
}
</code></pre>
<p><span style="color:#ff0000;">7.</span> Now go to the second frame of the actions layer and enter this block of code:</p>
<pre><code>
stop();

logoutBtn.buttonMode = true;
logoutBtn.addEventListener(MouseEvent.CLICK, gotoPrevious);

function gotoPrevious(e:MouseEvent):void{
	gotoAndPlay(1);
}
</code></pre>
<p>I think everything here is clear. </p>
<h4>Now let&#8217;s see the final result</h4>
<p>Use &#8220;flash&#8221; for username and &#8220;advanced&#8221; for password.</p>
<p><object width="400" height="250"><param name="movie" value="http://flashadvanced.com/wp-content/upload/login/login.swf"><embed src="http://flashadvanced.com/wp-content/upload/login/login.swf" width="400" height="250"></embed></object></p>
<p style="text-align: left; margin: 40px 40px 40px 0;"><a href="http://www.flashadvanced.com/wp-content/upload/login/login.zip"><img src="http://flashadvanced.com/wp-content/upload/other/download.jpg" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://flashadvanced.com/simple-login-form-with-actionscript-3-0/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
	</channel>
</rss>

