法一、使用基于微软 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>标签实现文本内链接——零基础自学网页制作