嵌入開源 Flash 控件 Ruffle 桌面版與

嵌入開源 Flash 控件 Ruffle 桌面版與 Web 版的 2 種方法

法一、使用基于微軟 WebView2 的 web.view 嵌入 JS 版 Ruffle

Ruffle 是一個開源免費的 Flash 播放器，網頁版 ruffle.js 體積很小，打個包 1.7 MB，調用也非常簡單。aardio 標準庫中的 web.view ( WebView2 ) 可以完美支持 ruffle.js ，不過我們先要解決 2 個小問題：

1、ruffle.js 通過網址加載 Flash 動畫不太正常會報錯，但是直接內存加載動畫數據沒問題。
2、瀏覽器不能直接用代碼訪問本地文件。

我們先使用 external 接口導出 aardio 函數來解決上面的問題，使用 aardio 將遠程或本地的 swf 文件先讀入到內存，再轉換為字節數組傳給 ruffle.js 就可以了，關鍵代碼如下：

import web.view;
var wb=web.view(winform);

wb.external={
  getSwf=function(){
    //可返回包含 SWF 文件二進制數據的數組、SAFEARRAY,buffer  
    return com.SafeArrayV( inet.http.get("https://update.aardio.com/v10.files/demo/transparent.swf") );
    
    //本地文件可以直接返回 buffer 
    return string.loadBuffer("\res\tet.swf"); 
  }; 
}

給 ruffle.js 返回數組就行（buffer、數組、COM 數組都行）, 要注意 string.load 加載文件返回的是字符串，string.loadBuffer() 返回的是字節數組。

網頁里面用下面的 JavaScript 加載 Flash 動畫：

const ruffle=window.RufflePlayer.newest();
const player=ruffle.createPlayer();

player.style.width="100vw";
player.style.height="100vh";

const container=document.getElementById("container");
container.appendChild(player);

player.load({data: await aardio.getSwf() });

在 JS 里用 aardio.getSwf() 調用 aardio 導出的 wb.external.getSwf() 函數，注意所有本地函數在 WebView2 里都是異步函數，所以用了 await 取返回值( 要在異步函數里才能使用 await )。

ruffle.js 最好是通過 HTTP 服務器加載，這在 aardio 中很容易解決，如果創建了 aardio 工程，只要簡單地將所有網頁以及 ruffle.js 添加到工程的資源目錄內，然后用類似：

wb.go( wsock.tcp.simpleHttpServer.startUrl("/res/swf/index.html") )

打開網頁就可以了，aardio 會自動使用 HTTP 協議內存加載這個資源目錄下的所有文件（可以發布為獨立 EXE 文件）。

寫范例的時候為了方便大家復制就可以運行，沒有創建工程文件，HTML代碼與 aardio 代碼混寫在一起，所以我寫了一個擴展庫 web.ruffle 用于獲取通過 HTTP 服務器訪問 ruffle.js 的地址。

首先在 aardio 中導出 getRuffleScriptSrc 函數：

import web.ruffle;
import web.view;
var wb=web.view(winform);

wb.external={
  getSwf=function(){  
    return com.SafeArrayV( inet.http.get("https://update.aardio.com/v10.files/demo/transparent.swf") ); 
  };
  getRuffleScriptSrc=function(){  
    return web.ruffle.getUrl("/ruffle/ruffle.js");
  }; 
}

然后在 HTML 代碼中添加一個空的 script 元素：

<script id="ruffle"></script>

然后在 JavaScript 中調用 aardio 函數獲取到 ruffle.js 的地址并加載該 JS:

var ruffleScript=document.getElementById("ruffle");
ruffleScript.src=await aardio.getRuffleScriptSrc();

完整范例源碼請參考「 aardio 范例 / Web 界面 / web.view / Flash 」

方法二、嵌入 Ruffle 桌面版：鉤住外部進程窗口

aardio 擴展庫 process.ruffle —— 可以讓 Ruffle 桌面版的窗口嵌入我們的軟件界面。這個庫之前的實現是把 Ruffle 創建的桌面獨立窗口加上 WS_CHILD 樣式變為子窗口，再指定父窗口，調整大小后嵌入我們的界面。但是這種方式 —— 有時候會出現一些奇怪的問題( 例如 Flash 動畫卡住，鼠標晃一下才會動 )。

在 aardio 里還有一個更好的選擇：我們可以用 orphanWindow 功能將獨立窗口偽裝為子窗口，關鍵代碼只有一句：

this._form.orphanWindow(,this.hwndFlash);

Ruffle 桌面版打開 Flash 會創建一個帶標題欄，帶邊框的獨立窗口，如果在打開 Flash 動畫以后再去移除窗口邊框 —— 那就會看到帶邊框的窗口在屏幕上一閃而過。下面我們就來解決這個問題。

首先我們用 process.apiHook 替代 process 創建 Ruffle 進程：

this.apiHook=process.apiHook(ruffleExePath,args,{
  suspended=true;//啟動后暫停 
});

注意參數里指定了進程啟動后暫停，下面安裝好 API 鉤子以后再恢復運行。

下面先安裝鉤子攔截創建窗口的 API 函數 CreateWindowExW ，以及設置窗口位置的函數 SetWindowPos 。關鍵代碼如下：

//安裝 HOOK
this.hookCreateWindowEx=this.apiHook.install("User32.dll"
  ,"CreateWindowExW","CreateWindowExHook.dll","_CreateWindowExHook@48");
  
this.hookSetWindowPos=this.apiHook.install("User32.dll"
  ,"SetWindowPos","CreateWindowExHook.dll","_hookSetWindowPos@28");

然后再獲取外部進程的 hookSet 函數并轉換為 aardio 函數調用：

var hookSet=this.process.remoteApi("void(addr pc,addr ps,addr hwndHost)"
  ,"CreateWindowExHook.dll","hookSet","cdecl");
  
hookSet(
  this.hookCreateWindowEx.addrTrampoline,//這是原來的 CreateWindowEx 函數指針地址 
  this.hookSetWindowPos.addrTrampoline,//這是原來的 SetWindowPos 函數指針地址 
  this._form.hwnd
);

現在可以用下面的代碼讓進程繼續運行了：

this.process.resume();

再加上下面的代碼保證主進程退出時 ruffle.exe 也會自動退出：

this.process.assignToJobObject(..process.job.limitKill);

DLL 的源代碼很少，在 process.ruffle 擴展庫目錄下可以找到。要注意 Ruffle 創建了多個窗口，設置參數要避免改動不可見的那個窗口。

測試一下：

調用范例：

import win.ui;
/*DSG{{*/
var winform=win.form(text="開源 Flash 控件 Ruffle";right=759;bottom=512)
winform.add(
static={cls="static";text="Static";left=3;top=1;right=758;bottom=443;db=1;dl=1;dr=1;dt=1;z=1}
)
/*}}*/

import process.ruffle;
var ruffle=process.ruffle(winform.static);
winform.show();

//自定義 Flash 參數
ruffle.flashVars={k="v",k2=123};


//也可以打開本地文件
ruffle.go("https://ruffle.rs/demo/swfs/wasted_sky.swf"); 
win.loopMessage();

請注意 Ruffle 桌面版不支持 Win7。

lt;div>塊元素基礎屬性講解

<div>元素是個有故事的元素，這個元素很早就出現在html超文本標記語言中，它設計之初就是為了解決網頁頁面布局的需求。但是遺憾的是它出生后一直懷才不遇。

在我還上初中的時候，智能手機還沒有出現，更沒有平板電腦等移動設備。上網是通過擺在桌子上的計算機來完成的。

那時，大街小巷上有好多網吧。

那時，馬云剛剛辭去工作準備創業。

那時，發送郵件的操作都會出現在計算機課程中。

那時，對頁面還沒有現在的跨平臺要求。

那時，flashplayer大行其道。

那時，dreamwaver、flash、fireworks被稱為網頁三劍客！

那時，制作網頁可以不用懂的html的寫法！

第一次接觸網頁制作是在大學的專業課上，使用三劍客，通過點擊軟件菜單中的按鈕就能制作網頁，精力都放在了如何使用flash制作酷炫的交互動畫上了。

那時，對html還沒有深刻的認識，但是卻對<table></table>這個標簽有著極深的印象。

因為當時的dreamwaver通過非代碼方式生成的頁面都是使用<table>表格元素進行布局的！

也就是說，在移動智能設備誕生之前，在用戶對頁面還沒有可以適應不同屏幕比例的要求前，<table>這個本來用來做表格的元素同時兼職了<div>的頁面布局工作，而且把兼職干成了主業，讓<div>這個專業的塊元素閑置了好久。

直到智能手機，平板電腦產生后，由于對頁面的跨平臺顯示的要求的出現（這類適應多平臺的頁面布局叫做響應式布局），<table>表格制作的頁面在響應式布局大行其道的今天，用它布局的頁面開始出現代碼冗余，維護困難等諸多問題。手機端的瀏覽器在播放視頻或其他交互動畫時也不再依賴flashplayer這個給我們帶來無數反感和惱火的插件。

從此，頁面制作的世道變了，從不需要編程就能制作頁面的三劍客，變成了必須懂得相關代碼寫法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復了寫代碼做頁面的操作方式，過去的點擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁面制作核心技術的從業人感到難受。

dreamwaver的老東家Adobe后來也嘗試過推出新模式下通過界面操作來制作網頁的軟件，還搞出一個叫做Muse的軟件，但是依舊沒能撬動代碼書寫的方式。

這個故事在開始學習<div>和css布局之前我都會講給學生（一群文科生）聽，我只是想告訴大家，學習任何計算機技術，我們可以從簡單易學的方式入手，但要有透過這種方式向下挖掘核心知識的決心和勇氣！對于自己從事的工作我們不能滿足于會做，還要盡量透析它的原理，這樣才能在技術換代中不會被輕易淘汰。

在我研究生階段，有一門讓我終生難忘的選修課，這門課叫做《數字娛樂技術概述》，這門課既不娛樂也不概述，但是通篇都是數字，那位年輕的教授為我們透析了游戲、影視特效的核心----計算機圖形學。

從此我開始學習數學。因為老師的一句話：從2000年到現在（2014）雖然各種軟件層出不窮，但是計算機圖形學的核心算法卻幾乎沒什么改變。

向下挖掘雖然很難，但是有必要！與各位共勉！

下面開始今天的內容。

首先，我們將之前的"第一個頁面.html"文件復制一個，叫做"塊元素學習.html"。然后把<body></body>中間的內容清空。

如圖：

下面，我們在<body></body>中間添加<div></div>標簽。示例代碼如下：

<body><div></div></body>

我們看看效果：

啦啦啦，什么都沒有！

為了讓大家可以看出來不同，我們為<div>添加邊框屬性！

我們使用style屬性為<div>添加邊框，style屬性里的代碼就是以后在CSS中使用的代碼！實際上我們已經開始接觸CSS的一些內容了。具體寫法的講解大家可以看這個教程，這里不再贅述。

示例代碼如下：（通過style="border-style: solid;"可以為很多元素添加邊框，就不需要大家記憶或查詢不同元素的不同寫法，是不是很方便！）

<div style="border-style: solid;">

效果如圖：

因為里面沒有內容，所以<div>的寬度是0，因此顯示的就是一條直線。下面我們向<div>中添加內容。

為了看起來花哨些，加張圖片吧！

示例圖片

示例代碼如下：

<div style="border-style: solid;"><img src="img/示例圖片/image4.jpg"/ style="width:50%；"></div>

大家請按照<img>中的scr自行建立文件夾和命名吧！如果您看不懂請參照《HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作》

效果如下：

其中，我們也是使用了style的方式為<img>設置的寬度，這個設置方法在<div>中一樣使用！

代碼示例：大家注意寫法，不同的屬性都添加到style的雙引號中即可，同時使用；隔開！

<div style="border-style: solid; width:50%;">
  <img src="img/示例圖片/image4.jpg"/ style="width:50%;">
    </div>

效果如圖：

整個邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個特性大家要記住。

為了方便觀看，我們去掉div的width設置。同時在<div>中繼續添加<div>標簽。為了方便顯示，我們在新的<div>中添加一段文字！

示例代碼如下：

<div style="border-style: solid;">
  <img src="img/示例圖片/image4.jpg"/ style="width:50%;">
    <div>
    <p>學習網頁制作非常有趣！</p>
</div>
</div>

效果如下：

如果為了美觀，我們讓文字到圖片右邊的空間中怎么做呢？

示例代碼如下：

<div style="float:right;"><p>學習網頁制作非常有趣！</p></div>

我們通過為新的<div>標簽中的style屬性添加float（浮動）屬性，同時設置為right（右）。

頁面效果如圖：

大家思考一下如何讓圖片與文字都靠在左邊呢？

是不是為圖片style添加float:left;同時把新<div>的float改為left？

我們試試看！

示例代碼如下：

<div style="border-style: solid;">
  <img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
    <div style="float:left;">
      <p>學習網頁制作非常有趣！</p>
</div>
</div>

頁面效果：

效果完全不對，圖片和文字跑到外邊來了。

這是div布局中經常出現的一個問題！解決方案有點奇葩，既不是修改<img>屬性也不是修改<div>屬性，而是增加一組空的<div></div>標簽！給這個新的空的<div>的style設置為"clear:both"即可修正。

示例代碼如下：

<div style="border-style: solid;">
  <img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
    <div style="float:left;">
      <p>學習網頁制作非常有趣！</p>
</div>
<div style="clear:both;"></div>
</div>

頁面效果如下：

值得注意的是，如果您不使用<div>的話直接使用<img>和<p>，同時對兩個標簽的style設置為float：left，是沒有問題的，只有把它們放到<div>中才會出現上面的情況。

代碼如下：

<body>
  <img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
    <p style="float:left;">學習網頁制作非常有趣！</p>
</body>

頁面顯示效果如下：

大家觀察一下，文字也變小了。至于為什么去掉<div>之后就不會出現上面那種出框的情況，而且文字也變小的問題在以后的講解中我們再深入探討！

現在希望大家可以記牢這個情況和操作，更多布局問題我們會在CSS的浮動（float）的講解中詳細說明。

疫情期間，請大家少出門，不聚會，沒事在家學學網頁制作，即抗擊疫情又提高自己!

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數據區塊鏈測試 PPT JS(40g+300教程) HTML 簡歷領取相關學習資料！

一、HTML

1、<image>標簽上title屬性與alt屬性的區別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》

2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體

加粗：<b>、<strong>

下標：<sub>

居中：<center>

字體：<font>、<basefont>、參考《HTML標簽列表》

3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景

section：定義文檔中的一個章節

nav：定義只包含導航鏈接的章節

header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。

參考《HTML5 標簽列表》

4、請說說你對標簽語義化的理解？

a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

聲明位于文檔中的最前面，處于標簽之前。告知瀏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

6、你知道多少種Doctype文檔類型？

標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，

Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

7、HTML與XHTML——二者有什么區別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關閉。

c. 標簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失

h. sessionStorage 的數據在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產生負面影響的元素：frame，frameset，noframes；

9、iframe的優缺點？

優點：

a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通信

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 無法被一些搜索引擎索引到

c. 頁面會增加服務器的http請求

d. 會產生很多頁面，不容易管理。

參考《iframe的一些記錄》

10、Quirks模式是什么？它和Standards模式有什么區別？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：總體會有布局、樣式解析和腳本執行三個方面的區別。

a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

11、請闡述table的缺點

a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。

e. 不夠語義

參考《為什么說table表格布局不好？》

12、簡述一下src與href的區別

src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置

href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接

公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數據區塊鏈測試 PPT JS HTML 簡歷領取相關學習資料！

在線咨詢

上一篇：CDR怎么繪制簡筆畫效果的葉子？CDR樹葉的繪制方法
下一篇：使用AJAX實現的PHP投票系統示例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

嵌入開源 Flash 控件 Ruffle 桌面版與

法一、使用基于微軟 WebView2 的 web.view 嵌入 JS 版 Ruffle

方法二、嵌入 Ruffle 桌面版：鉤住外部進程窗口

lt;div>塊元素基礎屬性講解

HTML完整學習目錄

您的項目需求