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

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

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

我們先使用 external 接口導(dǎo)出 aardio 函數(shù)來解決上面的問題，使用 aardio 將遠程或本地的 swf 文件先讀入到內(nèi)存，再轉(zhuǎn)換為字節(jié)數(shù)組傳給 ruffle.js 就可以了，關(guān)鍵代碼如下：

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

wb.external={
  getSwf=function(){
    //可返回包含 SWF 文件二進制數(shù)據(jù)的數(shù)組、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 返回數(shù)組就行（buffer、數(shù)組、COM 數(shù)組都行）, 要注意 string.load 加載文件返回的是字符串，string.loadBuffer() 返回的是字節(jié)數(shù)組。

網(wǎng)頁里面用下面的 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() 調(diào)用 aardio 導(dǎo)出的 wb.external.getSwf() 函數(shù)，注意所有本地函數(shù)在 WebView2 里都是異步函數(shù)，所以用了 await 取返回值( 要在異步函數(shù)里才能使用 await )。

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

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

打開網(wǎng)頁就可以了，aardio 會自動使用 HTTP 協(xié)議內(nèi)存加載這個資源目錄下的所有文件（可以發(fā)布為獨立 EXE 文件）。

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

首先在 aardio 中導(dǎo)出 getRuffleScriptSrc 函數(shù)：

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 中調(diào)用 aardio 函數(shù)獲取到 ruffle.js 的地址并加載該 JS:

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

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

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

aardio 擴展庫 process.ruffle —— 可以讓 Ruffle 桌面版的窗口嵌入我們的軟件界面。這個庫之前的實現(xiàn)是把 Ruffle 創(chuàng)建的桌面獨立窗口加上 WS_CHILD 樣式變?yōu)樽哟翱冢僦付ǜ复翱冢{(diào)整大小后嵌入我們的界面。但是這種方式 —— 有時候會出現(xiàn)一些奇怪的問題( 例如 Flash 動畫卡住，鼠標(biāo)晃一下才會動 )。

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

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

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

首先我們用 process.apiHook 替代 process 創(chuàng)建 Ruffle 進程：

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

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

下面先安裝鉤子攔截創(chuàng)建窗口的 API 函數(shù) CreateWindowExW ，以及設(shè)置窗口位置的函數(shù) SetWindowPos 。關(guān)鍵代碼如下：

//安裝 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 函數(shù)并轉(zhuǎn)換為 aardio 函數(shù)調(diào)用：

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

現(xiàn)在可以用下面的代碼讓進程繼續(xù)運行了：

this.process.resume();

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

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

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

測試一下：

調(diào)用范例：

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 參數(shù)
ruffle.flashVars={k="v",k2=123};


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

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

lt;div>塊元素基礎(chǔ)屬性講解

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

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

那時，大街小巷上有好多網(wǎng)吧。

那時，馬云剛剛辭去工作準(zhǔn)備創(chuàng)業(yè)。

那時，發(fā)送郵件的操作都會出現(xiàn)在計算機課程中。

那時，對頁面還沒有現(xiàn)在的跨平臺要求。

那時，flashplayer大行其道。

那時，dreamwaver、flash、fireworks被稱為網(wǎng)頁三劍客！

那時，制作網(wǎng)頁可以不用懂的html的寫法！

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

那時，對html還沒有深刻的認(rèn)識，但是卻對<table></table>這個標(biāo)簽有著極深的印象。

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

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

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

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

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

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

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

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

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

下面開始今天的內(nèi)容。

首先，我們將之前的"第一個頁面.html"文件復(fù)制一個，叫做"塊元素學(xué)習(xí).html"。然后把<body></body>中間的內(nèi)容清空。

如圖：

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

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

我們看看效果：

啦啦啦，什么都沒有！

為了讓大家可以看出來不同，我們?yōu)?lt;div>添加邊框?qū)傩裕?/p>

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

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

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

效果如圖：

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

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

示例圖片

示例代碼如下：

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

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

效果如下：

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

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

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

效果如圖：

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

為了方便觀看，我們?nèi)サ鬱iv的width設(shè)置。同時在<div>中繼續(xù)添加<div>標(biāo)簽。為了方便顯示，我們在新的<div>中添加一段文字！

示例代碼如下：

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

效果如下：

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

示例代碼如下：

<div style="float:right;"><p>學(xué)習(xí)網(wǎng)頁制作非常有趣！</p></div>

我們通過為新的<div>標(biāo)簽中的style屬性添加float（浮動）屬性，同時設(shè)置為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>學(xué)習(xí)網(wǎng)頁制作非常有趣！</p>
</div>
</div>

頁面效果：

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

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

示例代碼如下：

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

頁面效果如下：

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

代碼如下：

<body>
  <img src="img/示例圖片/image4.jpg" style="width:50%; float:left;"/>
    <p style="float:left;">學(xué)習(xí)網(wǎng)頁制作非常有趣！</p>
</body>

頁面顯示效果如下：

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

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

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

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

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作

HTML中使用<a>標(biāo)簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作