Flashlight

Flash, Game, Web

Category: - Flash -

Flash真的适合做网站应用吗?

两年前,我们开发了一套基于Flash的文件(主要是图片)上传RIA应用,提供给阿里巴巴的用户使用。如果你使用过Wordpress或flickr上传图片,你应该已经用过类似的产品。这个程序基于YUI Uploader开发,增加了一个实用的功能——在客户端先将图片缩小,再上传到服务器。用户用数码相机拍摄的照片往往有600万以上的像素,但产品图片放到阿里巴巴网站上显示,并不需要这么大的像素,通常等比例缩小到1024×1024之内就可以了。借助于Flash对图片先缩小再上传的技术,我们在没有增加服务器投入的情况下,将原先上传图片的尺寸限制由250KB/张提升到了5MB/张。同时,Flash上传还比传统HTML表单方式上传有更好的体验,例如可以多选一批文件同时上传、可以实时展示上传进度、选择文件时可以过滤非图片文件。 这个组件获得了很大的成功。上线后不久,阿里巴巴网站上用户的图片上传数量由日均1万张左右上升至日均15万张左右。但在这个上传应用投入应用的两年中,我们遇到了各种问题。 1. bug 在基于IE多标签浏览器中的伪沙箱问题就不说了,最严重的是cookie的问题。使用FileReference.upload的方式上传文件,http请求中附带的cookie信息不一定是当前浏览器进程的cookie,在Firefox、chrome等非IE浏览器中非常严重,可能传输的是IE中的cookie。即便是IE,也可能传输的cookie内容和当前页面的cookie记录不符合。这直接导致服务器端在收到文件之后的安全验证中失败。而对于阿里巴巴这样的大型网站,有比较成熟的java web框架,要去掉对cookie的依赖非常麻烦。于是结果就是,首先我们只有在用户使用IE系浏览器的时候才使用Flash上传,其次我们隔三岔五的还会收到使用IE的某些客户的投诉,在花费了大量的时间排查之后,我发现是由于cookie的问题导致上传失败。这个bug已经存在很多年,但是随着Flash从9升级到10,许多版本过去了,问题依然没有被解决。对于闭源的Flash,我们也帮不上忙。 2.性能 相对于现今数码相机的像素量,5MB的大小限制非常保守。但大于5M的时候,在一些低配置的电脑上,读取文件内容的时候就会发生浏览器假死现象。假死很容易导致浏览器崩溃,所以我们采取了保守的限制——5MB。 另外一个性能消耗是将BitmapData编码成JPEG文件的时候。Adobe提供了JPEGEncoder,但由于是Array实现的,所以性能是个问题。编码一个2880×2880的图片在一台中等配置的电脑上大约需要15秒时间。 我用Vector改写了这个类,时间缩短为3.5秒左右。使用Alchemy,时间进一步缩短到1.5秒左右。但还是不够安全,所以最后采用了异步Vector的方式,延长编码的时间,以保证程序的稳定性。(评测在这里) 3.图片质量 Flash内置的最好的图片缩小算法(用BitmapData.draw,并将smoothing参数设为true),在缩小图片的时候容易产生锯齿。因此我改写了Jacwright提供的缩小算法,图片质量的问题解决,但代价是性能又降低了一些。 4.安全限制 Flash10.0之后,增加了一个安全限制——当URLLoader以标准文件上传的方式发送POST请求的时候,需要由用户的UI操作(鼠标点击或按键事件)触发。因为我们对用户的图片做了处理,已经无法再通过FileReference上传,只能通过URLLoader。这个安全性限制规定每次发起一个上传文件的URLLoader请求,都必须让用户点击一下鼠标才可以。如果用户选择了20张图片,就要点击20次鼠标。这显然是无法接受的。因此我们放弃了用标准文件上传,采用普通post形式。代价是失去了对上传进度的跟踪,不知道文件上传的百分比;同时服务器端也需要改造。 改变 最近,我们做了一个决定:开发一个类似功能的ActiveX控件,替代Flash作为图片上传的主要解决方案。ActiveX的优势是性能,不足之处在于只能在Windows+IE浏览器中使用,但实际上我们的Flash上传目前也只能在IE中使用。Flash真的适合像阿里巴巴这样的网站使用吗?闭源和性能是Flash最大的问题。但在HTML5被广泛支持前,Flash和传统Ajax还是我们最主要的富客户端应用开发技术,相对于ActiveX、Silverlight、JavaFX、Gear等技术来说,Flash还是有安装率优势的。我们看到Adobe最近在新功能开发方面非常给力,值得称赞,但基础的功能的持续完善对开发者也同样重要。目前Flash依然是我们很重要的RIA技术,但是HTML5完全到来的那一天,现在很难说。

Flash在某些多标签浏览器中的“伪沙箱”问题

在Flash播放器运行时,将不同来源的资源划分到独立的沙箱(sandbox)内,不同沙箱之间不能彼此操作数据(除非目标沙箱做过一些设置,授权其他沙箱可访问),这就是Flash的跨沙箱问题。当Flash文件(.swf) 和页面(.html)不在同一个域名下时,如果不经过Flash内部声明System.allowDomain,html无法访问flash定义的接口;不经过html设置allowScriptAccess为’always’,Flash也无法调用页面上的js函数。 那么如果html和flash都设置了互相可以访问,是否Flash和html之间就可以互相访问了呢?理论上是的,然而实际上却不是。

帮助我提升Actionscript 开发效率的一些工具

一个好用的工具不仅仅可以解决问题,还可以提高工作的效率。追求最高效敏捷的开发,是一种精神。在平常工作中,我不断在寻找提高效率的软件,以下是Flash开发时候用到的一些工具,与大家分享一下,拋砖引玉,如果你有更好的,不妨来交流一下。 1.开发环境类 Flashdevelop Adobe Flash Builder (FLex) Adobe Flash Catalyst —— 快速处理设计资源,构建程序原型 Adobe Flash CS4 —— 处理设计资源偶尔用到 FDT Eclipse Aptana 2.帮助、工具书 Tour de flex 在线文档 DOC? 3.测试类 Fiddler Flash player 调试版本 —— 很基础确很实用的调试工具 Monster debugger —— 强大的外部调试工具 firebug —— 与JS通信时的调试很有用 4.代码管理 Google Code —— Google 提供的代码托管 subversion ——建立自己的SVN服务器 tortoisesvn —— SVN客户端软件 5.通用工具 launchy xmind

异步+Vector版本的JPEG编码器

业界大牛 Thibault Imbert (bytearray.org) 近日将很常用的JPEGEncoder类用vector类改写了一下,做了一个vector版本的JPG编码类,效率大幅提升。正好,前不久我也已经做了一个vector版本的JPEG编码类,在项目中使用,最近正在整理代码准备分享出来。当然啦,我所做的没有Thibault那么深入,仅仅是把Array换成Vector,所以现在就拿他的版本重新修改了一下,加上了异步功能。 所谓的异步编码,是延时处理代替循环处理。比如写入1000行文字到一个文件内,可以用for/while循环1000次,一次性写入,这就是同步处理;也可以写1行,隔0.5秒再写下一行,再隔0.5秒继续写下一行,这就是异步处理。同步处理的好处是快速,但是对计算机的压力也比较大,在浏览器中使用时,会造成假死,可能会引发稳定性问题。 Vector的效率比Array高了大约4~10倍,但还是不够高,Alchemy或者haxe的效率会更高一些,因为它们使用了Flash10未公开的opcodes接口,可以直接操作一段内存数据。Mateusz Malczak(http://segfaultlabs.com)就做了一个异步Alchemy版的JPEGEncoder,效果很赞,速度比我vector异步版的要快很多,但是缺少了一些自定义参数设置(在压缩小图片的时候,看上去效率反而不如Vector,其实不然,实际上,这是因为程序中写死了大小2800×2800)。Alchemy的C源码修改起来也比较麻烦,要用Alchemy重新编译。而且因为编译了整个libjpeg,所以文件体积也比较大,用C重新写一遍所有相关的类可以解决大小问题,但问题也会更加麻烦。看起来,haxe生成的swc应当是最佳选择,正在考虑有空的时候改写一个。 我将这个几个放在一起,来看一下例子吧!(需要安装Flash Player10) 下载 源文件 下载 带有异步压缩功能的vector版JPEGEncoder 关于 Alchemy 和 Haxe: Alchemy是Adobe实验室的一个项目,它的前身是Scott Petersen的“FlaCC (Flash C Compiler)”,目标是让C语言写的类能够被Flash重用。在MAX 2007 大会上,Scott凭借Flash中畅玩Doom一鸣惊人。Alchemy可以将C语言代码变成Flash可用的swc文件。这种方式类似于在C语言里面直接执行汇编语言,效率自然提高很多。目前Alchemy还只是测试项目,但是已经开放了SDK下载,可以编译许多常用的C类库。 Haxe 是传奇的 Nicolas Cannasse 创造的语言。Nicolas 发明了大名鼎鼎的MTASC (Motion-Tween Actionscript Compiler),在AS2.0的时代,改变了AS开发的方式,Flash也进入开源时代。进入AS3.0时代后,Nicolas选择了自己创造一种语言,这种语言吸取了Flash的优点,并且在语言和编译器上做了很多优化,使得效率上大幅度提升,这就是Haxe。时至今日,Haxe已经发展为一个丰富、高效的高级语言,也对Actionscript的发展产生了影响,例如Flash10的Vector,就和Haxe的概念和语法非常相似。 Alchemy公开之后,Nicolas 找到了 Flash播放器中留给Alchemy的未公开的接口,通过这些接口,AS可以直接操作一段内存中的数据。Haxe也使用了这些接口,并称之为Flash Memory,借助Alchemy的接口,Haxe的效率也大为提升。

关于FlashDevelop中使用中文的一些经验

1. 中文乱码问题和解决方案 新安装的 Flashdevelop 打开有中文的文件时,会有乱码现象,如图: 手动选择编码为UTF-8格式(File -> encoding -> UTF-8 ),会发现如果汉字是奇数个一起的时候,最后几个字符会变成乱码。这是由于 Flashdevelop 读取文件,没有找到文件内的编码标记,就默认以8bit方式读取,再转回utf-8格式的时候就会出问题。 解决方案: 选择菜单 Tools – 将设置中的 Fallback Codepage 设置为utf-8,这样flashdevelop在不知道文件应该用什么编码的时候,就会以utf-8处理。这里顺便也将其他几个编码设为utf-8,这样就更好了。 2. 修改默认字体大小 默认情况下中文字比较小,看着会比较累。选择 Tools -> Syntax Color… 就可以修改了。 注意哦,默认只是改编辑AS3 的字体。我就犯了错,拿AS3的设置修改,然后看XML文件的显示效果,结果发现怎么改都没效果 -__-! 我用的是Verdanda/10pt, 最终的效果:

使用Filereference时的一些注意事项

FileReference用来上传文件,结合FileReferenceList使用,可以弹出一次文件选择框就上传很多个文件,比HTML form形式的友好很多。但是使用的时候,有些地方需要注意的: 上传文件时,不能增加自定义request header 这点不同于URLLoader:URLLoader是可以增加自定义头部信息(request header)的,但是敏感的字段是不可以更改的,比如refer、cookie、host等等;而FileReferrence则不可以增加任何自定义头信息,所有自己添加的自定义header,都被播放器悄无声息地忽略掉了,没有任何报错和提示。如果一定要增加字段,只能添加到POST变量中。 只有IE才能附带浏览器Cookie信息 在非IE浏览器中,利用FileReference发出的HTTP请求,带的cookie资料都是IE的cookie。即便在Firefox或者chrome中,传送的cookie也是IE的!有的同学说这和默认浏览器设置有关,例如将默认浏览器设为Firefox,那么IE就得不到cookie。但是我测试了一下,发现无论默认浏览器是什么,发送的都是IE的cookie。解决方案暂时是借用JS得到cookie( ExternalInterface.call(“javascript:document.cookie”) ),当作变量post过去。麻烦的是,服务器端也要做相应的调整。这个BUG到目前(2009年4月6日)为止,已经差不多存在了一年了。 得不到文件的本地路径 Flash10的Reference可以得到本地文件的二进制文件,但是得不到文件路径(file://…)。这个问题还附带导致了一个问题,FilereferrenceList不能判断出重复选择的文件。就是说第一次弹出文件选择对话框的时候,用户选择了一个文件。过了一段时间再继续浏览文件,又选择了这个文件,这时候Flash是没有办法知道重复选择的。 不能设置上传的content-type 可能会让人郁闷的是,这个也没有任何throw/warning报错。 只支持实际存在的文件的上传下载 要是要上传一些动态生成的数据到服务器存储,那就用不得Filereference,也看不到上传进度了。 顺便说一下,内存里面的数据,希望上传到服务器保存为文件,可以用URLLoader,URLStream之类的代替。但是FlashPlayer10有个新增的安全性限制,当上传文件的时候,播放器会检查操作是否由用户点击触发。没有点击就上传,会被浏览器阻挡掉请求。播放器判断一个HTTP请求是否是文件上传的依据是form-based-HTML-file-upload规范,有两个标志: 一是content-type含有“ multipart”,例如“multipart/form-data”,“mymultipartxxx”; 二是字段名含有 filename。 满足了这两点,flash播放器就会把这次请求当作文件上传处理,进而检查是否符合安全限制。要防止被阻挡掉也很简单,不要用filename这个关键字做数据的字段名即可。

[Flash10+3D] 简单的、清晰的卡片翻转效果

这几天在做的一个项目需要做一个卡片翻转效果,实践了一下Flash 10的新的3D功能。果真是方便至极,所有的可视化对象现在都有了3D相关的属性,只需要设置rotationY变化,就可以做出很炫的翻转效果了。但是我发现,经过3D变换后的对象,都会被Flash转成位图缓存的方式显示,这样原先清晰的一些文字、图片等内容,就会显得比较模糊,演示:(需要安装 Adobe Flash Player 10 才能看到效果) 第一面的文字本来是清晰的,翻转一遍之后就模糊了。Google了好久都没有找到解决方案,抓狂。。后来突然想到,是不是可以这样,将要变回清晰的对象换个清晰的父对象?实验了一下,果然可行,大喜!好像我太out了吧,直觉告诉我,在Flash9+Papervision3D的年代,大家应该都已经知道这个方法的了,但是我确实没有找到……现在将代码重新整理了一遍,记录下来,也许对大家有所帮助。 先看看效果: 主要的类: ? /** * * @author qhwa, , qhwa@163.com * This class is a sample of Flash-10-3D-flipping, * that can keep faces clear, not as fuzzy as * default. * * 这个类演示了如何使用Flash10自带的3D功能创建一个 * 简单的卡片翻转效果,同时保持文字和其他内容的 * 清晰 * */ package qhwa.twosideflip { import flash.display.DisplayObject; import flash.display.Sprite; import [...]

FlashPlayer 10 新功能:Vector

FlashPlayer 10附带的内部类,多了一个vector,它的作用是对数组的数据结构进行优化,相当于一串只能存放指定数据类型的链表。所以在执行效率上,比数组有很大的提升。 Adobe的文档写得很详细,值得一看。他的 forEach, every 方法,很强大。

猜谜游戏搬上网,发挥奇特作用

前几天说到,captcha 可以区分人和电脑,其实,captcha 就是一种猜谜游戏,这种游戏人会玩,电脑却不会玩的。Luis Von Ann 教授 在2006年的演讲中提出了有趣的分辨人脑和电脑的方案,就是利用猜谜游戏——即ESP游戏。后来Google购买了这个点子,做了一个简单的游戏:Google Image Labeler,以游戏的形式、利用人脑的力量给图片加标签,又好玩,准确率也高。 Luis 教授自己又做了一些更好玩的ESP游戏,放在 gwap 网站上面。这些猜谜经过一番重新包装,更加好玩了。详细玩一下就知道哦:) http://www.gwap.com 不过,这些游戏并不是好玩那么简单哦!

Actionscript 3.0 Tip of the Day

http://www.kirupa.com/forum/showthread.php?t=223798 AS3小贴士,准备有空翻译一下

Performance Optimization WordPress Plugins by W3 EDGE