ActionScript 與 JavaScript 的互動 #1 -- 觀念與介紹

2009-03-25

24154
0
ActionScript 3.0 / FLEX與AIR
2009-04-13

ActionScript 與 JavaScript 的互動
找到一些參考資料，順便作一下紀錄

這個範例有點難，我也搞了一陣子。
初學者，可以先看後面兩篇文章，我會把難度降低....

找到相關的資料，順便紀錄一下

學過 ASP.NET 2.0以後的 CallBack，

搭配以前學習asp時，用到的 HTML表單 / DOM /DHTML

底下的東西，其實都是以前學過的（新瓶裝舊酒啦，不用怕～）

------------------------------------------------------------------------------------------------------------------------------------------

這可是從 Adobe官方網站找到的知識庫

資料來源 -- http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15683#exampleas3

因為底下這個範例有點小小的難度，所以

我把這個範例拆成「兩個」小部份，這樣可以降低難度。

後續會接連發表兩篇文章來解釋......如果看不懂下面的範例，可以先暫停。......先看看後續兩篇文章

先玩一下這個範例 -- http://www.permadi.com/tutorial/flashjscommand/

已經有人做好了。玩過一次，會比較清楚下面的範例要做什麼事

`ExternalInterface` example in ActionScript 3.0

This example demonstrates how to use ActionScript 3.0 and JavaScript to send a value from an HTML input text field to Flash, how to send text in Flash to HTML and how to get a return value from JavaScript after sending the text to HTML.

Creating the Flash file

Create a new ActionScript 3.0 Flash Document in Adobe Flash. Save the file with the file name: ExternalInterfaceExample.fla
Place 2 TextInput components on the stage and give instance names of: sending_ti and received_ti
Place a Button component on the stage next to sending_ti and give in instance name of: send_button
All of the code for the movie will be in Frame 1. Select the frame one of Layer 1 (or make a new layer for your ActionScript) and open the Actions Panel (you may also decide to instead define these actions in a custom class).
The code for this example will need to do things.First it will need to setup a callback for the Flash Object in HTML that JavaScript can use to invoke a function in ActionScript. This is done using ExternalInterface.addCallBack() which, in this example, will define a JavaScript function called sentTextToFlash that will call getTextFromJavaScript in ActionScript. The value passed into that function in JavaScript will be set to received_ti(輸入方塊) in getTextFromJavaScript.
Secondly, the script will also define an event handler for the send_button instance to call a JavaScript function defined in the HTML using ExternalInterface.call() sending to it the text in sending_ti (輸入方塊). The return value of ExternalInterface.call() is any value returned by that JavaScript call and will be defined in received_ti(輸入方塊).
This is the completed script:
```
import flash.external.ExternalInterface;
import flash.events.Event;
function getTextFromJavaScript(str:String):void {
 received_ti.text = "From JavaScript: " + str;
}

ExternalInterface.addCallback("sendTextToFlash", getTextFromJavaScript);

function clickSend(event:Event):void {
 var jsArgument:String = sending_ti.text;
 var result:Object = ExternalInterface.call("getTextFromFlash", jsArgument);
 received_ti.text = "Returned: " + result;
}

send_button.addEventListener("click", clickSend);

註解：上面這個 CallBack的用法，跟ASP.NET 2.0以後的 CallBack還真的有點類似（我的 Blog 與 書 都有相關文章）
```
Publish the SWF file with HTML.

Next you will need to define the HTML and JavaScript needed to interact with the SWF.

Defining JavaScript for `ExternalInterface` example

Open the HTML created when having published the SWF for ExternalInterfaceExample.fla
Within the head tag of the HTML, create the JavaScript functions used to interact with the Flash movie. This consists primarily of two functions, (A)one called formSend which will send text from an HTML form into Flash using the sendTextToFlash callback defined in ActionScript using ExternalInterface.addCallback, and another called getTextFromFlash which Flash can call using ExternalInterface.call.
(B)An additional function, getFlashMovie, is also created to help get a reference to the Flash movie object reliably simply using its name.
This is the completed JavaScript placed in the HTML head:
```
<script language="JavaScript">
 function getFlashMovie(movieName) {
  var isIE = navigator.appName.indexOf("Microsoft") != -1;
  return (isIE) ? window[movieName] : document[movieName];
 }  //註解：這段 function務必要加上去，很重要！

 function formSend() {
  var text = document.htmlForm.sendField.value;
  getFlashMovie("在HTML網頁，加入Flash Object的id名稱").sendTextToFlash(text);
 }
 
 function getTextFromFlash(str) {
  document.htmlForm.receivedField.value = "From Flash: " + str;
  return str + " received";
 }
</script>
```

Create the HTML form elements that will react with the Flash movie. For this example, this consists of two text field inputs and a send button, much like the setup in the Flash movie, placed below the Flash content. When the send button is clicked, the form is submitted calling formSend defined above.
This is the completed form HTML:

<form name="htmlForm" method="POST" action="javascript:formSend();">
 Sending to ActionScript:<br />
       <input type="text" name="sendField" value="" /><br />
       <input type="submit" value="Send" /><br />
 <br />
 Received from ActionScript:<br />
       <input type="text" name="receivedField">
</form>

補充：別忘了在HTML網頁裡面，加入 FLASH的<object>。不然不會動～

Open the HTML file in your browser and test communication between the JavaScript/HTML and the Flash SWF.

Note: If running the HTML from your hard drive, you will need to be sure that location is trusted, so that the interaction between Flash and JavaScript will correctly function. Otherwise, try uploading the HTML to a server and testing it remotely. For more information on security, visit the Flash Player Developer Center.

因為上述的原廠說明，這個範例有點小小的難度，所以

我把這個範例拆成「兩個」小部份，這樣可以降低難度。

後續會接連發表兩篇文章來解釋......如果看不懂上面的範例，可以先暫停。......先看看後續兩篇文章

Flash 與 JavaScript能互相傳遞的資料型態如下：

Q: What data types can I pass between Flash and JavaScript?
A: The following data types are supported:

Object
Array
String
Number
Boolean
Date
null
undefined

Arrays and objects can contain any of the supported data types, and references can be nested.

------------------------------------------------------------------------------------------------------------------------------------------

也可以參考這一篇中文說明，比較清楚： 透過容器呼叫 ActionScript 程式碼 http://livedocs.adobe.com/flash/9.0_tw/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000343.html

ExternalInterface，我也找到 Adobe的官方介紹了（中文的） -- http://livedocs.adobe.com/flash/9.0_tw/ActionScriptLangRefV3/flash/external/ExternalInterface.html

官方文件，Falsh / JavaScript Integration Kit --

http://weblogs.macromedia.com/flashjavascript/

------------------------------------------------------------------------------------------------------------------------------------------

另外一篇文章也很有參考價值，是大陸的簡體中文 -- http://www.coolcode.cn/?action=show&id=291

我將思想傳授他人，他人之所得，亦無損於我之所有；

猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學，遠距教學 (Web Form 約 51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學，遠距教學 (ASP.NET MVC 約 135hr) https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

寫信給我，不要私訊 -- mis2000lab (at) yahoo.com.tw 或 school (at) mis2000lab.net

(1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A

(2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm 。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b

ASP.NET遠距教學、線上課程（Web Form + MVC）。第一天課程， "完整" 試聽。

......... facebook社團 https://www.facebook.com/mis2000lab ......................

......... YouTube (ASP.NET) 線上教學影片 https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

Blog文章 "附的範例" 無法下載，請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍（嚴格認定）。

......................................................................................................................................................

ASP.NET MVC => .NET Core MVC 線上教學 ...... 第一天課程完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程上線了！MIS2000Lab.主講事先錄好的影片，並非上課側錄！觀看時，有如「一對一」面對面講課。

回首頁

ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學線上教程教學影片