百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

嵌入开源 Flash 控件 Ruffle 桌面版与 Web 版的 2 种方法

cac55 2024-10-27 08:25 58 浏览 0 评论

方法一、使用基于微软 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。

相关推荐

三星电视通过VGA端口接连笔记本教程

科技的发达不仅仅表现于智能电视的功能有多全面,手机、笔记本、电视盒子有多智能,而是这些电子产品是否能够相互连接、多屏互动进而进行多媒体播放与数据传输等。目前,三星电视早已可以实现多项设备间的连接与使用...

KVM210UA 2口USB电脑切换器VGA KVM切换器 键鼠控制2台电脑 免电源

登昌恒KVM210UA2口USB电脑切换器VGAKVM切换器键鼠控制2台电脑免外接电源即时切换显示画面不延迟热插拔免驱动适合MAC苹果电脑笔记本和台式电脑...

大神自己将老旧笔记本改装成多方面强悍的“超极本”

文/自己建房子亲戚有个03年的清华紫光笔记本,配置是奔腾1.8G,XP勉强运行,亲戚今年帮了非常大的忙,无以回报,把他这个垃圾本改一下略为回报新配置:CPU是i53470t的,内存是4G两条组成双...

正点原子开拓者FPGA开发板资料连载第二十二章RGBTFT-LCD彩条显示

1)实验平台:正点原子开拓者FPGA开发板2)摘自《开拓者FPGA开发指南》关注官方微信号公众号,获取更多资料:正点原子3)全套实验源码+手册+视频下载地址:http://www.openedv.c...

显卡引出故障现象及排除(造成显卡故障的原因有哪些)

故障现象一:显示器黑屏故障排除:1、先确定是否是显卡有问题。判断的方法是听PC喇叭的叫声,一长两短声肯定是显卡发生了致命错误,只能更换。2、如果无法断定显卡的好坏,可以换一块试试,还不行的话则有几种情...

用FPGA/树莓派RP2040驱动HDMI的资源

如果能够用FPGA能够驱动显示器,就可以做不少与视频相关的实验,很多FPGA开发板使用了比较简单的VGA接口,连接非常简单,如下图:然后我们就可以用FPGA的逻辑来做各种游戏了:然而,现在的显示器基本...

STM32+A3P125 图形控制器方案,多参数监护仪数据采集模块深度解析

一、生理信号采集与转换架构多参数监护仪数据采集模块是将人体生理信号转化为数字信号的核心单元,其架构遵循“传感器感知→信号调理→模数转换→数字处理”的标准化流程:1.传感器类型与生理信号转换传感器...

电脑重启都提示AMD显卡错误“No AMD graphics driver is..”解决方法

电脑重装完系统后,每次重启都提示AMD显卡错误“NoAMDgraphicsdriveris......”怎么办?网上相关问题解决很多人方法是打驱动,可是有些是驱动打好了还是反复出现NoAM...

ipad1改造显示器之拆解篇(ipadair改显示器)

闲来无事,翻出来家里12年前的初代ipad,除了能正常充电开机盖泡面之外,好像啥也干不了……上网一搜有许多改成显示器的案例,按耐不住的激动的小手也想跃跃欲试一番,说干就干,先从拆解开始。注意,以hom...

老电脑显卡驱动装不上?降级旧版驱动一招解决!

老电脑显卡驱动装不上?降级旧版驱动一招解决!今天给家里的老台式机重装系统遇到了麻烦:i34130处理器配上HD7770显卡,装完Win7后,显卡驱动死活装不对!问题表现:最初状态:设备管理器“显...

想淘汰VGA 先得知道这些门道(vga是不是淘汰了)

不要说新显卡,就是在主板上,VGA接口也越来越少,眼看就被彻底淘汰了。当然小伙伴们的显示器应该早就不是只有VGA接口的旧型号了,彻底淘汰VGA就换个接口或者弄个转接呗,可是……真的这么简单吗?小编今天...

IMX258摄像头驱动(摄像头最新驱动)

IMX25813MPOISUSBCamera(A)说明IMX25813MPOISUSBCamera(A)功能简介特性USB通用摄像头1300万像素接口USB...

朗强科技:VGA视频信号分配原理分析

VGA分配器的主要功能是把一个视频信号重新分配成多个信号。高分辨率的视频分配放大器的作用是在接收一个来自计算机视频端口的信号后将其进行放大处理,并且在保持原有信号质量的情况下,将其信号分配到多个高分辨...

视频矩阵的应用及分类(视频矩阵的应用及分类)

视频矩阵-基本功能和要求视频矩阵-基本功能和要求  一个矩阵系统通常还应该包括以下基本功能:字符信号叠加;解码器接口以控制云台和摄像机;报警器接口;控制主机,以及音频控制箱、报警接口箱、控制键盘等附件...

告别蓝屏烦恼,Windows系统崩溃急救指南!

Windows系统蓝屏(BlueScreenofDeath,简称BSoD)是Windows操作系统在无法从系统错误中恢复时显示的屏幕图像,通常会伴随一个或多个错误代码,这些代码是诊断问题的关键线...

取消回复欢迎 发表评论: