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

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

  1. Create a new ActionScript 3.0 Flash Document in Adobe Flash. Save the file with the file name: ExternalInterfaceExample.fla
  2. Place 2 TextInput components on the stage and give instance names of: sending_ti and received_ti
  3. Place a Button component on the stage next to sending_ti and give in instance name of: send_button
  4. 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).
  5. 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 與 書 都有相關文章)
    
  6. 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

  1. Open the HTML created when having published the SWF for ExternalInterfaceExample.fla
  2. 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>
    
  3. 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 49hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

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

ASP.NET MVC線上課程 第一天 免費看 (5.5小時) 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.台灣  或  school (at) mis2000lab.net


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 (Web Form) 課程 上線了!MIS2000Lab.主講

事先錄製好的影片,並非上課時側錄!   觀看影片時,有如我「一對一」跟您面對面講課

 

ASP.NET MVC 5 線上教學

累積時數約 75小時...... 第一天(5.5小時)完整內容,"免費"讓您評估