用Flash的API写html5应用

在大量开发人员不断争论什么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文件(下面的代码保存目录相同):

  1. import flash.Lib;
  2. import flash.display.Shape;
  3. import flash.display.Sprite;

  4. class App extends Sprite
  5. {
  6. static function main ()
  7. {
  8. var ellipse:Shape = new Shape();
  9. ellipse.graphics.beginFill( 0xFF9900, 1 );
  10. ellipse.graphics.lineStyle( 0, 0xCCCCCC );
  11. ellipse.graphics.drawEllipse( 40, 40, 100, 60 );
  12. ellipse.graphics.endFill();

  13. var app = new App();
  14. app.addChild( ellipse );
  15. Lib.current.stage.addChild( app );
  16. }
  17. }

复制代码

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

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

  1. <html>
  2. <head>
  3. <title>My first Jeash example</title>
  4. </head>
  5. <body>
  6. <div id=”haxe:jeash” style=”width:150px; height: 150px”></div>
  7. <script type=”text/javascript” src=”./app.js”></script>
  8. </body>
  9. </html>

复制代码

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

  1. –remap flash:jeash
  2. -js app.js
  3. -main App
  4. -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)

发表评论

电子邮件地址不会被公开。 必填项已用*标注