| 
| 
| 
| Last Modified: July 17, 2009 @ 4:25 am| Email 101 |
| by CyanBlue |
| This shoud be one of the most common tutorial in Flash world, yet I see lots of questions on this subject, so I thought that I'd do one as well. |
| This tutorial requires the help of the server side script, PHP in this case to function properly. If your host does not support the PHP, you won't be able to use this tutorial. Also, note that the PHP file and SWF file should be residing in the same domain to work properly. |
| Okay. Here is the final version, take a look. |
|
FlashVacuum Flash ActionScript Tutorial CyanBlue subQuark JT You do not have the Flash plugin installed, or your browser does not support Javascript. |
| Okay, here is the ActionScript part. | |||
| 1. Initialization | |||
| This is the routine that I have that will initialize my email form. | |||
|
|||
| Line 1 ~ 2 | Stage.scaleMode = "noScale"; Stage.showMenu = false; |
||
| The first line tells the Flash Player not to resize this movie, and the second line tells the Flash Player not to display any of the Flash Player related context menu when you right click on the Flash movie. | |||
| Line 6 | init(); | ||
| Here, I am calling the function called init. You can just make the line 10 ~ 26 not be a part of a function, but the only reason why I made this section to be the function is so that I can call this routine again and again, in this movie, I am calling this routine again when the 'Clear' button is pressed. | |||
| Line 10 ~ 11 | this.info_mc.stop(); this.info_mc._x = 310; |
||
| I already have created a movieClip called 'info_mc' on the screen. The purpose of this info_mc is to display something that will notify the user what's going on after the click on the 'Send' button. Line 10 says stop() whatever it is doing so that it won't waste any of the CPU power, and line 11 says to move this info_mc to the off stage area so that it won't be visible when it is not needed. |
|||
| Line 13 ~ 14 | this.send_btn._focusrect = false; this.clear_btn._focusrect = false; |
||
| Line 13 and 14 simply is there for the cosmetic reason. If you do not set the Button._focusrect to false, you will see a yellow border around those buttons when selected. Set them to true and see what happens. For further information on the _focusrect, please refer to the Flash manual. | |||
| Line 16 ~ 20 | this.name_txt.tabIndex = 1; this.email_txt.tabIndex = 2; this.message_txt.tabIndex = 3; this.send_btn.tabIndex = 4; this.clear_btn.tabIndex = 5; |
||
| Line 16 and 20 is there for easier navigation within this email form. Basically this tabIndex sets where the focus is going to be when the TAB key is pressed. Once again, please refer to the Flash manaul for more information on the tabIndex property. | |||
| Line 22 ~ 24 | this.name_txt.text = ""; this.email_txt.text = ""; this.message_txt.text = ""; |
||
| Here, I am simply resetting the value of those three textFields. | |||
| Line 26 | setTextFocus(this.name_txt); | ||
| I am calling a custom setTextFocus function to set the initial focus of the cursor. I am using Selection.setFocus() function to do that within the setTextFocus() function. | |||
| 2. Form Validation | |||
| You will find the simplest form validation routine in this section. (function validateForm()) | |||
|
|||
| Line 1 | if ((name_txt.text.isset()) && (name_txt.text != "Required Field")) | ||
| Checking the first element of the email form, name. I am using the isset() function that is defined in the 'Prototype' layer. I normally use the prototypes /functions that are available on the web or the custom made ones, and sticks it to the Prototype layer so that I can reuse them. The second condition is to see if the content of the name field is an error message or not. |
|||
| Line 3 | if ((email_txt.text.isset()) && (email_txt.text.isEmail()) && (email_txt.text != "Required Field")) | ||
| Checking the second element of the form, email address. Everything is the same as above, and simple email validation routine is added as well. | |||
| Line 5 | if ((message_txt.text.isset()) && (message_txt.text != "Required Field")) | ||
| Checking the last element of the form, message field. | |||
| Line 7 - 9 | info_mc.play(); info_mc._x = 10; sendEmail(); |
||
| Here, I am displaying the info_mc onto the stage and have it display the waiting message till I hear something from the PHP script. | |||
| Line 13 ~ 26 | message_txt.text = "Required Field"; setTextFocus(message_txt); email_txt.text = "Required Field"; setTextFocus(email_txt); name_txt.text = "Required Field"; setTextFocus(name_txt); |
||
| Simply displaying the error message, and setting the focus of the cursor where the problem occurs. | |||
| 3. Sending out an email | |||
| This is basically the simplest form of how you can send the data to the PHP file and get the result from it. | |||
|
|||
| Line 1 | email_lv = new LoadVars(); | ||
| Here, I am defining an instance of the LoadVars() object that is available since Flash MX and I think it is best to use this one instead of loadVariables()/loadVariablesNum() function to utilize its builtin onLoad/onData handler. | |||
| Line 2 ~ 4 | email_lv.name = this.name_txt.text; email_lv.email = this.email_txt.text; email_lv.message = this.message_txt.text; |
||
| Here, I am defining the variables that I am going to send to the PHP script. PHP script is expecting three variables, $_POST['name'], $_POST['email'], $_POST['message'], and you will need to match the names(name, email and message) in this section. | |||
| Line 5 ~ 18 | email_lv.onLoad = function (ok) { if (ok) { trace("Email Sent!!!"); trace(unescape(this)); info_mc.gotoAndStop("Info" + this.result); } else { trace("Problem sending an Email!!!"); info_mc.gotoAndStop("Info2"); } } |
||
| First of all, I sometimes see people who defines onLoad handler after they call the PHP file, but it is recommended to define the onLoad handler BEFORE you call the PHP file. Pay attention to the 'ok' in line 5. This 'ok' is not Okay, rather it is a variable to see if Flash received anything from the given PHP script. If Flash did not receive anything, the value of the 'ok' will be 'false', hence the else block will be executed to display that there was problem during the transaction. If the transaction from the PHP script was successful, Flash will receive a variable called 'result' from the PHP script, and I am using that one to display either the succesful message, 'Info1' frame label, or failure message, 'info2' frame label in the info_mc movieClip. One last thing you need to know is the use of the 'this' within the onLoad handler. If you say 'this' like 'this.result' within the onLoad handler, that 'this' refers the instance of the LoadVars() object, email_lc, not the timeline that it was created/called. |
|||
| Line 19 | email_lv.sendAndLoad("Email101.php", email_lv, "POST"); | ||
| This is the actual line which callse the Email101.php file and specifies where the data will be received, email_lv, and how Flash will be sending out the data, POST. Make sure that you are testing this over the web browser to simulate what your end users are going to experience. In other words, Flash is simply simulating the web browser transaction and it might not be the same when you are testing your movie within the Flash and the web browser. | |||
| 4. PHP Script | |||
| This is actual place where the email is sent out since Flash works only as a frontend. | |||
|
|||
| Line 2 | if ($_POST) | ||
| I am checking if some data is passed to the PHP script via POST method and display the error message(line 27 ~ 30) if the data is not received correctly to give minimal sense of security. | |||
| Line 4 ~ 5 | $mailTo = "CyanBlue@FlashVacuum.com"; $mailSubject = "[Contact] Website Contact from - (" . $_POST['name'] . ")"; |
||
| Two variables are defined here, $mailTo and $mailSubject, that I can use to send out an actual email. | |||
| Line 7 ~ 9 | $Header = "MIME-Version: 1.0\r\n"; $Header .= "Content-type: text/html; charset=iso-8859-1\r\n"; $Header .= "From: " . $_POST['email'] . "\r\n"; |
||
| I am defining a $Header variable here that I will be using to send out an email. You can typically define anything like CC or BCC here if you need to do that. | |||
| Line 11 ~ 14 | $output = "<BR>"; $output .= "From : " . $_POST['name'] . "<BR><BR>"; $output .= "Email : " . $_POST['email'] . "<BR><BR>"; $output .= "Message : " . $_POST['message'] . "<BR><BR>"; |
||
| The last bit of the email content is formatted here. Keep an eye on how we are referring to the Flash variable here. I am using $_POST['name'], $_POST['email'], $_POST['message'] to refer to the Flash variables that are sent via POST method. | |||
| Line 16 | $output = nl2br($output); | ||
| I am changing the line breaks that might have been passed to PHP to the BRs so that it will be displayed nicely. | |||
| Line 18 | if (mail($mailTo, $mailSubject, stripslashes($output), $Header)) | ||
| This is the actual line which sends out the email. I am wrapping the $output with stripslashes() function to get rid of any escape backslashes so that ' won't be displayed as \'. One more thing you need to know is that mail() function will return true/false depending on whether the email is sent out succesfully or not, and I am using that to return the value back to Flash in line 20 and line 24. |
|||
| Well, I guess that's about it. Hopefully you should be able to understand what's underneath this tutorial. | |||
| Please post the question to the forum if you have any or if you have suggestion/correction. | |||
| Download the file from here : Email101.zip | |||
| | | | Last Modified: July 17, 2009 @ 4:25 am