| In the first task in this lesson, you'll build an application that allows Flash to leverage JavaScript functionality that's not available in ActionScript. You'll use JavaScript regular expressions to test whether the email address that the user has entered looks like a valid email address (it follows the rules of a properly formatted email address). Regular expressions are patterns that can describe strings in a generalized fashion. Regular expressions are useful for searching for substrings and testing whether a string is in a valid format. Regular expressions are built into JavaScript, but not Flash. However, by using ExternalInterface you can run a regular expression test in JavaScript, and return the result to Flash. Because the focus of this book is on ActionScript, not regular expressions, it's beyond the scope of this book to discuss regular expressions in detail. For the purposes of this task, we'll provide the JavaScript regular expression code. (If you want to learn more about regular expressions there are many good resources online. One helpful resource is www.regular-expressions.info.) 1. | Open emailTester1.fla from the Lesson15/Start directory.
The Flash document contains all the assets you'll need to complete the task. Note that there are two layers on the main Timeline: Actions and Components. There are four component instances on the Components layer. At the top is a Label instance with an instance name of emailTestLbl. Below that is an unnamed Label instance and a TextInput instance with an instance name of email. Below that is a Button instance named send.
 | 2. | Select the keyframe on the Actions layer and open the Actions panel by pressing F9. Add the following import statement to the Script pane:
import flash.external.ExternalInterface;
Import the class to make the remainder of the code more readable.
| 3. | Add the following line of code to assign a listener function to the click event for the button:
send.addEventListener("click", checkEmail);
The preceding code tells Flash Player to call the checkEmail() function when the user clicks the button.
| 4. | Define the checkEmail() function so it calls a JavaScript function called testEmail and passes it the value from the email TextInput component. Assign the return value to the emailTextLbl Label component.
function checkEmail():Void { emailTestLbl.text = ExternalInterface.call("testEmail", email.text); }
The checkEmail() function is called each time the user clicks on the send button. The function calls a JavaScript function (testEmail()) in the container HTML page. It passes that function the text from the TextInput component, and it assigns the return value to the emailTestLbl Label instance.
| 5. | Publish the SWF file as well as the HTML page.
To test the ExternalInterface functionality, you have to publish the SWF file to a container such as an HTML page.
| 6. | Edit the HTML page and set the allowScriptAccess parameter and attribute to always.
As noted previously, the allowScriptAccess parameter and attribute must be set to always.
| 7. | Define the testEmail() JavaScript function by placing the following code within the <head> tag of the HTML page:
<script language="JavaScript"> function testEmail(stringValue) { var re = /\b[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}\b/i; return re.test(stringValue); } </script>
The testEmail() function uses native JavaScript regular expression functionality to test whether the string that was passed to the function is in a valid format to be an email address. It returns a Boolean value. The topics of regular expressions and JavaScript are beyond the scope of this book. However, you can read more about regular expressions at www.regular-expressions.info and you can read more about JavaScript at www.w3schools.com/js. The regular expressions site has a page specific to regular expressions and JavaScript. You can read that page at www.regular-expressions.info/javascript.html.
| 8. | Test the application in a web browser.
Type valid and invalid email address values into the TextInput instance, and click the send button. The Label instance above will display either true or false.
 |
|
