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.
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:
Awaiting to be released.
Remarks:
This Flash ActionScript tutorial shows how to send field on focus action from HTML Text Field to Flash Movie.
