Category Archives: ActionScript

腾讯图片加载的诡计

今天偶尔在腾讯上看八卦新闻来着, 注意到了一个奇怪的现象, http://ent.qq.com/a/20101011/000085.htm#p=11 诸如此类的带图片的新闻, 在加载其他张图片时是会显示加载进度的, 但是右键图片发现此处并非flash所做, 真是奇怪了, 难道腾讯在此处没有用flash, 而直接能过javascript来加载图片并且获取到图片加载进度? 感觉不太可能, 在网上找了一阵也没发现用纯javascript实现的这种效果, 于是下载整个网页来看看腾讯到底怎么整出来了. 这一看终于明白了, 原来一切只是表象而已, 事实上还是flash完成了加载.

直接另存这个页面, 在相应的文件夹下有一个叫hd_min_v1.js的文件, 还好里面的变量没被压缩, 清晰好认, http://javascript.about.com/library/blformat.htm 直接复制到这个网页, 格式化一下, 好认点, 可以看到里面有一个loadingProcess的对象, 内部有一个progressPicHandler的方法, 里面完成了对进度的计算并且写入到一个loading的html元素里:

但是再用ultraedit搜索整个文件夹你也看不到哪边调用了这个方法, 这时回过头来看代码, 里面的init方法中有嵌入一个flash, 所以猜测还是flash里调用了这个方法, 找到文件夹中的loadingAs3.swf这个文件, 通过工具反编译, 终于在里面发现了调用这个方法的代码:

哎, 整活了半天, 才知道原来腾讯也只是通过js向swf发送加载图片请求, 而在swf加载图片的时候swf在侦听加载进度的方法中再次调用js, 完成将进度写到html里, 转了一圈, 终于回来了.

Flash中彩色图变黑白图

这两天在看ARToolKit,发现了里面有一段代码,是将彩色的图片变成黑白的。

做了一个简单的例子:

[as3]
package
{
import flash.display.*;
import flash.geom.*;
import flash.events.*;
import flash.net.*;
import flash.utils.*;
import flash.filters.*;

public class Test extends Sprite
{
private static const ZERO_POINT:Point = new Point();
private static const MONO_FILTER:ColorMatrixFilter = new ColorMatrixFilter([
0.2989, 0.5866, 0.1145, 0, 0,
0.2989, 0.5866, 0.1145, 0, 0,
0.2989, 0.5866, 0.1145, 0, 0,
0, 0, 0, 1, 0
]);

public function Test()
{
var char:Char = new Char();
var inbmp:BitmapData = new BitmapData(char.width, char.height, true, 0x000000);
inbmp.draw(char);

var outbmp:BitmapData = new BitmapData(inbmp.width, inbmp.height, false, 0x0);
outbmp.applyFilter(inbmp, inbmp.rect, ZERO_POINT, MONO_FILTER);

addChild(new Bitmap(outbmp));
}
}
}
[/as3]

Test.as作为一个Fla文件的文档类,Char是Fla中的一个可显示的对象。看代码的意思是对原始的彩色图片中的RGB色作一个计算:
新R = 新G = 新B = 0.2989 * R + 0.5866 * G + 0.1145 * B;
整不明白0.2989,0.5866,0.1145这三个常数从何而来,不过图确实变成黑白的了。

[转][翻译]Flash现实增强技术入门指南

转自:http://www.asbinbin.com/?p=8

由于最近在研究Flash的3D及AR(Argument Reality)技术。因此这段时间集中读了一些相关方面的资料。谈不上分享经验,先翻译一篇Mikko Haapoja的文章作为开始吧。这篇博文是他在Saqoosha的《FlarToolkit入门指南》的 基础上进一步对Spark类库中的FlarToolkit(一个实现Flash AR技术的开源类库)做了比较详细的入门指导。(注:本人首次尝试翻译,欢迎大家指正。转载请注明出处)
ok.开始吧—————————————————

《FlarToolkit/Flash 现实增强技术入门指南》
翻译:盐酸酸 原文地址:http://www.mikkoh.com/blog/?p=182

最近我正在尝试着研究一下FlarToolkit。什么是FlarToolkit?FlarToolkit是一 个实现Flash 现实增强技术的开源类。我在另一篇帖子里介绍了有关 它的更多细节。
我打算先讲解一下如何基于FlarToolkit开发。FlarToolkit开发时比较困难的 一点是代码内几乎所有的注释都是日文,所以如果你打算查看代码(而且你不会日语),你就不得不耗费更多的精力去研究。
开始之前,先下载这个例子(点我下载)。这个例子基于Saqoosha的简易方块的例子,但是更加简单易读。
OK,我们现在就开始学习FlarToolkit啦!

第一步:下载
在一开始,我访问了Saqoosha的博客,正打算用Google Translater把页面翻译一下时,却发现了我最熟悉的三个字母“SVN”。HAH…有了它就好办了,我们先利用SVN工具把FlarToolkit项目全部下载吧。
FlarToolkit项目的SVN url:
http://www.libspark.org/svn/as3/FLARToolKit/trunk
(译者注:SVN工具大家应该都很熟悉了吧,如果你不知道什么是SVN,建议你先看看SVN中文站 。原文作者也提供了一个参考链接,是PV3D的SVN下载帮助)

第二步:查看例子和源码
在我想了解怎样使用某个类库之前,都会先去查看一下它提供的例子及源码。现在我来总结一下我在学习FlarToolkit过程中的一些收获。
首先开始于Saqoosha的SimpleCube例子。我个人并不太喜欢他这个应用的写法(当 然从对象可复用的角度上说它是非常不错的)。
在那个例子中有三个类:ARAppBase,PV3DARApp,和 SimpleCube

三个类分别控制着AR应用的一个部分。但是这样的代码读起来比较困难,因为PV3DARApp继承自ARAppBase, 而SimpleCube继承自PV3DARApp。为了便于阅读学习,我把上面的 三个类合并到了一起。(当然这样并不符合可复用的原则)
FlarApp一共包含5个部分:
1.摄像头参数文件
2.标记文件
3.标记检测器
4.Flar Base Node(译者注:其实这个FLARBaseNode的实例就是我们装载3D物体的容器,下 面会有详细的解释)
5.Papervision(译者注:这是一个flash的 3D引擎)

摄像头参数
该摄像头参数文件是从外部加载的二进制文件。一开始我不知道它到底是如何而来,我到 Saqoosha的博客上去询问,他回复说这是由一个ARToolkit的一个附属程序生成的 (注:FlarToolkit是由ARToolkit演化而来,ARToolkit是现实增强技术在C++及Java等 开发语言上的实现)。这个程序名为calib_camera2”
Calib_camera2创建这个二进制的摄像头参数文件,这个文件是用来纠正从摄像头获取图像的扭曲及变形的。你可以从这里下载这个程序。但我想还是使用FlarToolkit中提供的这个原始的“camera_para.dat”文 件会更好。(我想大多数人都会这么做的)

标记文件
标记文件中保存的是一个图案,Flar会在你的摄像头获取的影像中寻找这个图案。在我的制作的项目中它在这个路径下“lib/mikko.pat”。 如果你打开这个文件,你会发现有4个16 × 48矩阵。它们分别代表着标志4个不同的方向。Flar会将你的标记图案看作一个16×16的二维码。文件中的每一个矩阵是16 × 48,是因为要包含三种颜色(红,绿,蓝)
Saqoosha已经建立了一个Air应用来制作这些标记文件。你可以下载该Air程序从这里
可以按照下列步骤创建一个标记文件:
1.标志设计使用以下规格,你可以在方框中放置各种你想用的图形。但是我想一些棱角分明的图案会更适合些。

2.打印出你设计好的图案,启动刚才下载的Air程序,并将你打印好的图案放到摄像头前。当程序中有一个红色的框出现在你的图案周围后,点击“save pattern”。生成工作就完成啦。
这是整个应用中比较关键的步骤。

标记检测器
标记检测器的作用就是从你摄像头中获取的bitmapdata中获取标记文件中定义的图案。一旦它找到定义的图案就会告知程序,程序就会从检测器中获得一 个变换矩阵来摆布FlarBaseNode了。

FlarBaseNode
这个FlarBaseNode其实就是用来显示Papervision 3D物体的容器。利用从标记检测器中得到的变换矩阵来控制我们的3D物体的3维空间坐标。

Papervision
它是Flar App的最后一块拼图了。我真的不想对它讲太多的细节了。如果你对这个3D引擎感兴趣可以直接到Google Code中找到它(点这里到PV3D的 页面

一些注意事项:
1.编译时遇到错误:
Error: Attempted access of inaccessible property _projectionthrough a reference with static typeorg.libspark.flartoolkit.pv3d:FLARCamera3D.

可以这样解决这个问题

到这个类中org.papervision3d.cameras.Camera3D
修改这个变量的命名空间
private var _projection:Matrix3D;
改为
protected var _projection:Matrix3D;
这并不会破坏PV3D的功能,只是用来让FlarToolkit中的FlarCamera3D可以调用Camera3d 类。

2.这个问题我也不知道为什么是这样。因为某些原因,你不得不设置Papervision的viewport为两倍。如果你不这样,你的3D物体不 会出现在你的视频显示范围内。但即使这样做了,有时候显示也并不太完美。在Saqoosha的例子中,他将viewport又平移了-4像素。我一直不喜 欢这样把摄像头中的东西都放大了两倍显示在那里。
好,现在该轮到你了。有什么问题,欢迎大家交流。我不知道所有的答案,但我会尽我所能回答这些问题。
–End–
翻译完了,其中大部分是意译。如果有错误,欢迎大家留言指正。——盐酸酸

Flash程序员常用软件及开源程序

常用软件

1.Firefox浏览器,主要用于Flash的调试.
Firefox附加插件:
firebug
flashtracer,调试时查看Flash调试信息.
webdeveloper,最常用的就是在调试时禁用缓存.
flashplayer debugger 配合flashtracer,如果不是这个版本的FlashPlayer的话,无法正常打印调试信息.

2.FlashDevelop 一个开源的Flash开发工具.

3.Adobe Flash CS3 Professional

4.Flash CS4

5.Adobe Flash Builder 4

6.Adobe Photoshop CS4

7.Sothink SWF Decompiler,用于反编译SWF文件.

8.Vizzy,调试Flash时查看调试信息,与flashtracer相同,但是不依赖具体浏览器,只要浏览器装的flashplayer是debugger版的就行.

9.IIS,Flash网站本地调试时使用.

常用开源程序

1.TweenLite,实现动画效果.

2.SwfObject,网页中嵌入SWF.

3.SwfAddress,实现Flash网页的Deeplink.

fancypantsi.com 网站上 American Design Awards

fancypantsi.com 网站上 American Design Awards, 这已经是很久前的事了。。。,不过还是要说的,网站可以根据时间切换成白天跟黑夜,如果今天纽约天气不好下雨了,网站上也会下雨的,呵呵。 这个可是我用我自主“研发”的Flash网站框架(Willow Framework)制作的第一个网站了。之后又用此框架完成了多个Flash网站,也在这个过程中不断完善和改进了这个Flash网站框架。
基于Willow Framework的几个主要的Flash网站:
http://www.fancypantsi.com(公司的美国网站)
http://www.dickies.com.cn (Dickies的中国网站)
http://adtchallenge.nbcsports.com
http://www.lakewl.com(卧龙湖国际社区)

对于Willow Framework,下面要做的就是自动化的工作了,不过jsfl是我最讨厌的东西了,真的不想写啊。

FlashPlayer 9 与 10不同之处

发现了一些FlashPlayer 9 与FlashPlayer 10之间的不一样之处,很是怪异。 处理XML: 在Flash 10中将播放器设为Player 9后下面代码执行结果为
[xml]

world


[/xml]
而设为Player 10后执行结果为
[xml]

world

[/xml]
//以下为代码
[as3]
var xml:XML = ;
xml = xml.site[0].appendChild(“

world

“);
trace(xml);
[/as3]
而下面这个代码的执行结果确又是一样的 //代码
[as3]
var xml:XML = ;
xml = xml.site[0].appendChild(

world

);
trace(xml);
[/as3]
结果都是 [xml]

world

[/xml] 有点晕,不知道是何原因。所以为了防止播放器的不一致,遇到这种appendChild()里面放置字符串的情况还是改用类似下面的写法,算Flash狠了。
[as3]
var xml:XML = ;
xml = xml.site[0].appendChild(new XML(“

world

“));
trace(xml);
[/as3]
这样,两个播放器也就一致了。 代码的执行顺序: 这个很有问题,如果两个代码执行顺序不一致,那可能运行的效果就完全不一致。不过两个版本确实在这方面存在差异。 如果我们只是简单地新建一个Flash文件,在里面新建一个MovieClip并且在其第一帧上增加下面的代码:
[as3]
trace(“onframe1 before call gotoandplay 10”);
gotoAndStop(10);
trace(“on frame 1 after call gotoandplay 10”);
[/as3]
在其第10帧处插入下面的代码:
[as3]
trace(“now on frame 10”);
[/as3]
把文件的设置中的播放器设成 Flash Player 9 或者 Flash Player 10 其执行结果是一致的,都是: onframe1 before call gotoandplay 10 on frame 1 after call gotoandplay 10 now on frame 10 也就是说是执行完第一帧上的所有代码后再执行第十帧上的代码,这一点应该是跟我们想像的一致的,也没什么异议。 但是我们改一种写法,删除刚才这个文件中的这个MovieClip中的第一帧的代码,将这个MoiveClip的Class设置成TestMC,并且新建一个TestMC.as的文件,内部代码为:
[as3]
package
{
import flash.display.MovieClip;

public class TestMC extends MovieClip
{
public function TestMC()
{
stop();
trace(‘[use class]before gotoAndStop 10’);
gotoAndStop(10);
trace(“[use class]after gotoAndStop 10”);
}
}
}
[/as3]
这样一来,在播放器设成 Flash Player 9时执行的结果是: [use class]before gotoAndStop 10 [use class]after gotoAndStop 10 now on frame 10 跟刚才的上面的顺序也是一致的,不过在将播放器设成 Flash Player 10时,执行结果却是: [use class]before gotoAndStop 10 now on frame 10 [use class]after gotoAndStop 10 也就是说这样一来,先执行被调用的帧上的代码,然后再继续现有的代码,等于是把“gotoAndStop”到的相应帧上的代码插入到现有的代码中执行,这个顺序跟之前的是完全不一样的。到底是哪一种执行的顺序是更合理的?不是很好说,不过作为一个专业级的程序员,一个好的习惯是尽量少在帧上写代码。 点击此处下载与此相关的测试文件。

使Flex编译的swc文件在Flash下可用

一直不明白如何将很多的类编译成一个swc文件,并且在Flash里可用,就像Google Map Flash API一样,今天终于找到了。http://vincent.the.tsao.googlepages.com/ 这篇文章有很详细的说明。现转于此:

Last updated: 24-August-2008

Problem

Many API’s or code libraries written in ActionScript 3 and compiled into SWC files are meant for use with Flex tools and are unable to be imported into the Flash CS3 Authoring Environment.  This tutorial will show you how you can (theoretically) take any SWC made for Flex and use it in Flash CS3.

Resources

You will need the following programs/tools:

  • Flash CS3
  • Flex SDK 2.0.1 with Hotfix 3

(note that we are intentionally NOT using Flex SDK 3.0)

You can get Flex SDK 2.0.1 with Hotfix 3 here:
http://labs.adobe.com/technologies/flex/sdk/flex2sdk.html

Explanation

If you just want the steps, you can skip down to the next section, but this describes why the method works.  When we say “Flex SWC”, what we really mean is a code-only SWC file which contains no DisplayObject components.  Only SWC files with a DisplayObject component can be imported into the Flash CS3 Authoring Environment.  Thus in order to make a Flex SWC usable in Flash CS3, we use the Flex SDK’s compc tool to statically link it with a stub SWC file generated in Flash CS3 that is a DisplayObject.  We require the Flex SDK 2.0.1 Hotfix 3 version of compc because Flex SDK 3.0’s compc utility generates SWC files of version 1.2 and Flash CS3 can only use SWC files of version 1.0.  More over, earlier versions of the Flex SDK 2.0.1 compc utility could not read SWC files compiled by the Flash CS3 authoring environment, thus the need for Hotfix 3.  So the newly compiled SWC file is actually two SWC files put into one – a DisplayObject SWC and the original Flex SWC and can therefore be used within Flash CS3.

Steps

Part I: Creating a Stub DisplayObject SWC in Flash CS3

  1. Create a new ActionScript 3 FLA file in Flash CS3.
  2. Create a new symbol in the library (you do not need to create an instance of it), name it whatever you want.
  3. Go into your library and right click on the symbol you just created.  Select “Component Definition…”
  4. Type in whatever you want your component to be called as the class name (no spaces).
  5. Under the options part, check all the boxes and ensure the minimum Flash Player is 9 and the minimum ActionScript version is 3.
  6. Leave everything else alone, press OK.
  7. Right click the symbol again in your library and select and select “Linkage…”
  8. Check the “Export for ActionScript” box and the “Export in first frame” box should be automatically checked as well.
  9. The class name should be the same name you gave it earlier.
  10. Ensure the base class is indeed MovieClip, click OK.
  11. Right click the symbol again in your library and select “Export SWC File…”
  12. Pick a place to save it.

Part II: Putting the two SWC Files Together

  1. Use the compc program to wrap what you have just created with the Flex SWC you want to use in the Flash CS3 authoring environment.  Here is a simple example:compc -source-path+=. -output=bin\map_flash_1_6.swc -include-libraries=.\GoogleMapsFlashAPI.swc,.\map_flex_1_6.swcNote the above command is all on one line (no line breaks). The file “map_flash_1_6.swc” is the name we choose for the component we output. “GoogleMapsFlashAPI.swc” is the name of the SWC we created in Flash CS3 in Step 1 and “map_flex_1_6.swc” is the SWC you want to be able to use in Flash CS3.
  2. Place your newly generated SWC file in your Flash components folder. It should be something like “\Adobe Flash CS3\en\Configuration\Components\”. If you are unsure where this is located on your computer, Google it.
  3. Open the FLA file you want to import the SWC into and open the Components panel (Ctrl+F7 in Windows).
  4. Reload the Components panel if necessary.
  5. Drag your SWC file into your library (note: that there does NOT need to be an instance of the SWC on your stage since it would be useless).

Please let me know if this does not work.
My contact is vincent.the.tsao [–at–] gmail [–dot–] com

Flash中显示HTML页面

  每次遇到要在Flash中显示HTML内容,都是噩梦,Flash里的TextField是可以显示HTML内容的,但是,功能确实很差劲,尤其是再遇上对排版要求比较高的时候,TextField是根本做不了的了。有一个开源项目htmlwrapper倒是可以利用一下,htmlwrapper可以让当前的HTML的页面以Flash的形式显示。http://motionandcolor.com/wrapper/这个是它的一个示例,它将一个WordPress的页面用Flash的方式显示出来,你要是查看它的源代码就会发现,所有的内容其实都是写在页面里,而不是Flash里的。但是,我个人觉得把一个本来在浏览器里正常显示的HTML页面放到Flash里显示没什么好处。
  不过嘛,如果用这个项目来把我们要显示的某个HTML加载到我们的Flash里,倒是也不错。只是CSS样式只有部分支持,而且这个项目还有不少的Bug。但是在没有其他解决方法的情况下也只能用这个,总比使用TextField强。

Flash远程调试

  Flash里调试工具是可以实现远程调试的,这个有时也很有用,比如在某些时候,在Flash调用了外部的文件(XML等等),当你在本地DEBUG时,可能就会出现安全沙箱冲突的问题,这个时候,远程调试就派上用场了。
要使用远程调试,首先就是要下一个Debug版的Flash浏览器插件。具体下载网址是:http://www.adobe.com/support/flashplayer/downloads.html
。下载安装好后,下面就是要把你的要调试的Flash发一个Debug版本(SHIFT+CTRL+ENTER),接着使得Flash能够通过http://localhost/XX/XX.swf这样的路径访问,也就是配IIS或者Apache了,然后点击Flash编辑器里的调试->开始远程调试会话->ActionScript 3,最后通过在浏览器里输入http://localhost/XX/XX.swf这样的网址访问你的SWF,这时你发现Flash编辑器里的调试工具就会有响应了。