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
andreceived_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 calledsentTextToFlash
that will callgetTextFromJavaScript
in ActionScript. The value passed into that function in JavaScript will be set toreceived_ti(輸入方塊)
ingetTextFromJavaScript
.
Secondly, the script will also define an event handler for thesend_button
instance to call a JavaScript function defined in the HTML usingExternalInterface.call()
sending to it the text insending_ti (輸入方塊)
. The return value ofExternalInterface.call()
is any value returned by that JavaScript call and will be defined inreceived_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 calledformSend
which will send text from an HTML form into Flash using thesendTextToFlash
callback defined in ActionScript usingExternalInterface
.addCallback
, and another calledgetTextFromFlash
which Flash can call usingExternalInterface.
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 HTMLhead
:<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.
因為上述的原廠說明,這個範例有點小小的難度,所以
我把這個範例拆成「兩個」小部份,這樣可以降低難度。
後續會接連發表兩篇文章來解釋......如果看不懂上面的範例,可以先暫停。......先看看後續兩篇文章
- ActionScript 與 JavaScript 的互動 #2 --從 Flash傳資料到HTML網頁的 JavaScript
- ActionScript 與 JavaScript 的互動 #3 --從 HTML網頁的 JavaScript 傳資料到Flash
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 約 140hr) 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.主講 事先錄好的影片,並非上課側錄! 觀看時,有如「一對一」面對面講課。