Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Send HTML Field onfocus Action to Flash

This Flash and HTML interactivity example demonstrate how to send an action to Flash Movie when a HTML textField is selected or set focus on, i.e. send field onfocus action to Flash.

Please update flash player to view this Flash ActionScript tutorial!

 

This Field Send Message to Flash:


Select this field with Mouse or Tab:

Flash Tutorial Content:

This Flash ActionScript and HTML JavaScript interactivity tutorial show how to have immediate immediate response to Flash Movie when a HTML field is being selected or set focus on.

The completed Flash Movie of this tutorial is shown as above. You may play around to see how it works.

Flash ActionScript and HTML Codes:

HTML Webpage Side:


Step 1:
Layout the first Text Field with a button on the HTML webpage. The JavaScript function formSend will be executed when the buttons are clicked.

<form name="htmlForm" method="POST" action="javascript:formSend();">
<input type="text" name="sendField" size="28">
<input type="submit" value="Send">
</form>

 

Step 2:
Write the JavaScript function formSend. The JavaScript function will make a call to ActionScript function sendTextToFlash.

<script language="JavaScript">
function formSend() {
<!-- Obtain value of field "sendField" -->
var text = document.htmlForm.sendField.value;
<!-- Call the reference function (sendTextToFlash) -->
<!-- The getFlashMovie function will get a reference to the Flash movie object using its name. -->
getFlashMovie("FlashID").sendTextToFlash(text);
}
</script>

 

Step 3:
Layout the second Text Field on the HTML webpage. The JavaScript function flashHighlight will be executed when the buttons are clicked.

<input type="text" size="38" onfocus="flashHighlight(180, 60);">

 

Step 4:
Write the JavaScript function flashHighlight. The JavaScript function will make a call to ActionScript function mouseLocation.

<script language="JavaScript">
function flashHighlight(ID1, ID2){
<!-- access the value of an HTML input by assigning it an id -->
var obj = document.getElementById(ID1, ID2);
<!-- Call the reference function (mouseLocation) -->
<!-- The getFlashMovie function will get a reference to the Flash movie object using its name. -->
getFlashMovie("FlashID").mouseLocation(ID1, ID2);
}
</script>

 

Flash Side:


Step 1:
Use ExternalInterface.addCallback( ) to register the two ActionScript function. Once the ActionScript functionsare registered, it can be called by the JavaScript functions.

ExternalInterface.addCallback("sendTextToFlash", asScriptFunction_1);
ExternalInterface.addCallback("mouseLocation", asScriptFunction_2);

 

Step 2:
Hook with the two ActionScript Functions

Download Flash Source File:

Flash Source File Awaiting to be released.

Remarks:

This Flash ActionScript tutorial shows how to send field on focus action from HTML Text Field to Flash Movie.