用Flash的API写html5应用

本文介绍了如何利用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文件(下面的代码保存目录相同):

  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.         
  14.         var app = new App();
  15.         app.addChild( ellipse );
  16.         Lib.current.stage.addChild( app );
  17.     }
  18. }
复制代码

上面的源码是不是很熟悉?除了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)

本实例采用的是Uploadify上传插件,.NET程序,源程序是从网上找的,但是有Bug,已经修改好,并标有部分注释。绝对好用,支持单文件、多文件上传,支持大文件上传,已经过多方面测试,保证好用。 以下附上Uploadify部分常用的参数介绍,要看全部的就去看其API文件了,一般在下载的包里都有。  uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后弹出打开文件对话框,默认值:uploadify.swf。   script : 后台处理程序的相对路径 。默认值:uploadify.php   checkScript :用来判断上传选择的文件在服务器是否存在的后台处理程序的相对路径   fileDataName :设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata   method : 提交方式Post 或Get 默认为Post   scriptAccess :flash脚本文件的访问模式,如果在本地测试设置为always,默认值:sameDomain   folder : 上传文件存放的目录 。   queueID : 文件队列的ID,该ID与存放文件队列的div的ID一致。   queueSizeLimit : 当允许多文件生成时,设置选择文件的个数,默认值:999 。   multi : 设置为true时可以上传多个文件。   auto : 设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传 。   fileDesc : 这个属性值必须设置fileExt属性后才有效,用来设置选择文件对话框中的提示文本,如设置fileDesc为“请选择rar doc pdf文件”,打开文件选择框效果如下图:   fileExt : 设置可以选择的文件的类型,格式如:'*.doc;*.pdf;*.rar' 。   sizeLimit : 上传文件的大小限制 。   simUploadLimit : 允许同时上传的个数 默认值:1 。   buttonText : 浏览按钮的文本,默认值:BROWSE 。   buttonImg : 浏览按钮的图片的路径 。   hideButton : 设置为true则隐藏浏览按钮的图片 。   rollover : 值为true和false,设置为true时当鼠标移到浏览按钮上时有反转效果。   width : 设置浏览按钮的宽度 ,默认值:110。   height : 设置浏览按钮的高度 ,默认值:30。   wmode : 设置该项为transparent 可以使浏览按钮的flash背景文件透明,并且flash文件会被置为页面的最高层。 默认值:opaque 。   cancelImg :选择文件到文件队列中后的每一个文件上的关闭按钮图标 Uploadify还自带了很多参数及有用的方法和回调函数,都在API里,虽然是全英文的,但很容易看懂,这里就不说了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值