用Flash的API写html5应用

最新推荐文章于 2024-03-27 23:25:41 发布

原创最新推荐文章于 2024-03-27 23:25:41 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flash #html5 #api #mercurial #import #firefox

HTML5 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何利用haXe社区的Jeash项目，将使用haXe编写的Flash程序编译为HTML5+JS应用。Jeash能够实现与Flash相似的Canvas渲染效果，并且同一个源码可以通过修改编译参数生成Flash和C++程序。文章详细阐述了从下载安装haXe、Mercurial，到获取Jeash源码，编写并编译源码，最终在Firefox和Chrome中运行HTML5应用的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在大量开发人员不断争论什么html5是否能代替Flash的时候，haXe社区的疯子们搞出了一个让html5控们瞠目结舌的东西——Jeash。仅仅凭名字，你可能无法了解这个东西究竟是做什么用的，它的功能是——把haXe编写的Flash9以上版本程序编译成html5+js的应用！由于haXe 的Flash9 API与AS 3绝大部分完全相同，这意味着Flash开发人员将不用在理会html5会否替代Flash了。

说到这个东西，还得把时间回溯到2008年，由于Apple教主乔布斯坚决不肯在Iphone中支持Flash，于是haXe社区的用户们另辟蹊径，先后开发了 nme、neash和hxcpp三个子项目。前两者的功能是让用户把Flash类转换为针对neko的可视化类，实现在nekovm中完全重现Flash 的大部分功能，而hxcpp项目则将针对neko的类转换成了C++类，从而实现了将haXe写的Flash应用源码编译成C++源码，并调用VC、 xcode或gcc等编译器编译成本地代码，由于可以开启opengl支持，hxcpp编译的本地应用运行速度几乎达到极限。同时，亦可将其直接编译为 Iphone可用的应用。该项目的完善版本在2008年末发布，并部分整合到了haXe中。这比Flash CS5的Iphone输出功能早了半年多！并且至今为止，其开发的应用运行效率仍然比Flash CS5高得多。

以上说的并不是今天的重点，重点是：相同的技术，也被应用到了HTML5和Javascript上，通过安装扩展库和修改编译参数，我们就可以把大部分haXe编写的Flash 应用源码直接编译为js文件。引用到html中后，即可显示出一个与Flash几乎完全相同的Canvas渲染结果（包括动画）。并且同样的源码，只要修改编译参数，并且配置好相关环境（主要是C++编译器），就可以编译为Flash程序和C++程序

下面，我们来看一下Jeash的神奇魔法：

首先，下载安装haXe。去http://haxe.org/download 下载。

然后，安装一个叫做mercurial的东东，windows用户到 http://mercurial.selenic.com/downloads/ 下载。Linux和MAC用户可以直接在软件源中安装，用apt-get、yum或darwinports安装即可。

最后，用hg软件下载复制jeash的源码库：hg clone http://mercurial.intuxication.org/hg/jeash

接下来，我们打开文本编辑器，复制下面的源码，并保存到一个单独的文件夹中，命名为App.hx文件（下面的代码保存目录相同）：

import flash.Lib;
import flash.display.Shape;
import flash.display.Sprite;
class App extends Sprite
{
static function main ()
{
var ellipse:Shape = new Shape();
ellipse.graphics.beginFill( 0xFF9900, 1 );
ellipse.graphics.lineStyle( 0, 0xCCCCCC );
ellipse.graphics.drawEllipse( 40, 40, 100, 60 );
ellipse.graphics.endFill();
var app = new App();
app.addChild( ellipse );
Lib.current.stage.addChild( app );
}
}

复制代码

上面的源码是不是很熟悉？除了flash.Lib类是haXe特有的外，静态的main函数做为程序入口与C/Java等语言类似，其他的都和AS 3没什么区别。

接着，我们把下面的代码保存为app.html文件：

<html>
<head>
<title>My first Jeash example</title>
</head>
<body>
<div id="haxe:jeash" style="width:150px; height: 150px"></div>
<script type="text/javascript" src="./app.js"></script>
</body>
</html>

复制代码

然后是保存以下的build.hxml文件，这个是编译参数文件：

--remap flash:jeash
-js app.js
-main App
-cp jeash

复制代码

最后，把hg下载回来的源码，同样拷贝到这个目录中（是里面含有一个叫做Html5Dom.hx的文件的那个jeash目录）。

下面就可以编译了：

在命令行中进入这个目录，输入： haxe build.hxml 回车。再次看到命令行的时候，就是编译成功，如果有其他提示信息，八成是出错了。有时编译可能出现以下的错误：

jeash/jeash/display/DisplayObjectContainer.hx:270: characters 3-6 : Unknown identifier : Lib

解决方法是打开这个文件，在 import flash.geom.Point; 这一行下面增加一行代码：import flash.Lib;

编译成功后，在这个目录下，你会发现多了一个app.js文件，就是上面的app.html文件中引用的那个。接下来，在Firefox 4或Chrome中打开app.html文件，就可以看到结果了(我的Firefox 3.6.13也能看到一个结果，但貌似由于支持的不好，看不到曲线)。

源码如下：

test.tar.gz (157.57 KB)