在上一篇（介绍篇）中，我们对Fiddler Web Debugger有了简单的接触，也许你已经开始在用Fiddler进行HTTP相关的调试，在这一篇，我们将通过一个实例了解Fiddler的神奇魔法。
在我们前端开发的日常工作中，发现服务器上某个css/javascript文件有问题，需要修改，那真是家常便饭。通常，我们需要将文件进行修改，然后重新发布再验证，这样就很容易影响到生产环境的稳定性。更普遍的做法是，我们在开发环境中修改文件并验证，然后发布到生产环境。虽然安全，却比较繁琐。而利用Fiddler的可以修改HTTP数据的特性，我们就非常敏捷地基于生产环境“修改——验证——发布”。 read more…
Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思，Fiddler Web Debugger就像小提琴一样，可以让前端开发变得更加优雅。
Fiddler是以代理服务器的方式，监听系统的网络数据流动。运行Fiddler后，就会在本地打开8888端口，网络数据流通过Fiddler进行中转时，我们可以监视HTTP/HTTPS数据流的记录，并加以分析，甚至还可以修改发送和接收的数据。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具，对前端开发工作很有价值。 read more…
一个好用的工具不仅仅可以解决问题，还可以提高工作的效率。追求最高效敏捷的开发，是一种精神。在平常工作中，我不断在寻找提高效率的软件，以下是Flash开发时候用到的一些工具，与大家分享一下，拋砖引玉，如果你有更好的，不妨来交流一下。
业界大牛 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是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 打开有中文的文件时，会有乱码现象，如图：
手动选择编码为UTF-8格式（File -> encoding -> UTF-8 )，会发现如果汉字是奇数个一起的时候，最后几个字符会变成乱码。这是由于 Flashdevelop 读取文件，没有找到文件内的编码标记，就默认以8bit方式读取，再转回utf-8格式的时候就会出问题。
解决方案：
选择菜单 Tools – 将设置中的 Fallback Codepage 设置为utf-8，这样flashdevelop在不知道文件应该用什么编码的时候，就会以utf-8处理。这里顺便也将其他几个编码设为utf-8，这样就更好了。
默认情况下中文字比较小，看着会比较累。选择 Tools -> Syntax Color… 就可以修改了。
注意哦，默认只是改编辑AS3 的字体。我就犯了错，拿AS3的设置修改，然后看XML文件的显示效果，结果发现怎么改都没效果 -__-!
我用的是Verdanda/10pt, 最终的效果：
FileReference用来上传文件，结合FileReferenceList使用，可以弹出一次文件选择框就上传很多个文件，比HTML form形式的友好很多。但是使用的时候，有些地方需要注意的：
这点不同于URLLoader：URLLoader是可以增加自定义头部信息（request header）的，但是敏感的字段是不可以更改的，比如refer、cookie、host等等；而FileReferrence则不可以增加任何自定义头信息，所有自己添加的自定义header，都被播放器悄无声息地忽略掉了，没有任何报错和提示。如果一定要增加字段，只能添加到POST变量中。
在非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是没有办法知道重复选择的。
可能会让人郁闷的是，这个也没有任何throw/warning报错。
要是要上传一些动态生成的数据到服务器存储，那就用不得Filereference，也看不到上传进度了。
顺便说一下，内存里面的数据，希望上传到服务器保存为文件，可以用URLLoader,URLStream之类的代替。但是FlashPlayer10有个新增的安全性限制，当上传文件的时候，播放器会检查操作是否由用户点击触发。没有点击就上传，会被浏览器阻挡掉请求。播放器判断一个HTTP请求是否是文件上传的依据是form-based-HTML-file-upload规范，有两个标志：
一是content-type含有“ multipart”，例如“multipart/form-data”，“mymultipartxxx”；
二是字段名含有 filename。
满足了这两点，flash播放器就会把这次请求当作文件上传处理，进而检查是否符合安全限制。要防止被阻挡掉也很简单，不要用filename这个关键字做数据的字段名即可。
这几天在做的一个项目需要做一个卡片翻转效果，实践了一下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 flash.events.Event; import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFieldType; import gs.easing.Back; import gs.TweenLite; /** * ... * @author ... */ public class Card extends Sprite { [Embed(source='../../../lib/goodbyewow02.jpg')] private var FrontFace:Class; [Embed(source='../../../lib/goodbyewow04.jpg')] private var BackFace:Class; private var fFace:Sprite; private var bFace:Sprite; private var cleanObj:Sprite; private var dirtyObj:Sprite; public function Card() { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point var frontBg:DisplayObject = new FrontFace(); var backBg:DisplayObject = new BackFace(); frontBg.x = backBg.x = - frontBg.width / 2; frontBg.y = backBg.y = - frontBg.height / 2; fFace = new Sprite(); bFace = new Sprite(); fFace.addChild(frontBg); bFace.addChild(backBg); //背面需要额外处理一下， //翻转过来，并且暂时隐藏 bFace.scaleX *= -1; bFace.visible = false; bFace.buttonMode = fFace.buttonMode = true; //测试的文字 var testTF:TextField = new TextField(); testTF.width = 400; testTF.height = 200; testTF.textColor = 0xFFFFFF; testTF.htmlText = "验证码是防止被机器人恶意灌水的一个方法，"+ "产生一个只有服务器才知道的信息（例如一个单词、数字等），" + "在客户端浏览器中以机器人不能分析的方式（通常是图片）出现，" + "作为判断机器人和真人的一个依据。一般是在服务器端生成图片，" + "由用户在文本框输入看到的文字。"; testTF.appendText(testTF.text); testTF.selectable = true; testTF.multiline = true; testTF.wordWrap = true; testTF.x = frontBg.x + 10; testTF.y = frontBg.y + 200; testTF.type = TextFieldType.INPUT; fFace.addChild(testTF); cleanObj = new Sprite(); dirtyObj = new Sprite(); dirtyObj.addChild(fFace); dirtyObj.addChild(bFace); addChild(dirtyObj); addChild(cleanObj); addEventListener(MouseEvent.CLICK, clickHandler); } private function clickHandler(e:MouseEvent = null):void { // 修改文字时不动 if (e.target is TextField) return; if (e.target == fFace || e.target.parent == fFace) { // flip to back dirty(); TweenLite.killTweensOf(dirtyObj); TweenLite.to( dirtyObj, 1, { rotationY:180, ease: Back.easeOut, onComplete: cleanBackFace, onUpdate: update } ); } else if (e.target == bFace || e.target.parent == bFace) { // flip to front dirty(); TweenLite.killTweensOf(dirtyObj); TweenLite.to( dirtyObj, 1, { rotationY:0, ease: Back.easeOut, onComplete: cleanFrontFace, onUpdate: update } ); } } /** * 检查应该显示哪个面 */ private function update():void { bFace.visible = dirtyObj.rotationY > 90 && dirtyObj.rotationY < 270; fFace.visible = !bFace.visible; } /** * 清晰化封面 */ private function cleanFrontFace():void { if (dirtyObj.contains(fFace)) { dirtyObj.removeChild(fFace); cleanObj.addChild(fFace); } } /** * 清晰化背面 */ private function cleanBackFace():void { if (dirtyObj.contains(bFace)) { dirtyObj.removeChild(bFace); cleanObj.addChild(bFace); bFace.scaleX *= -1; } } /** * 封面和背面都放入dirty容器，进行旋转操作 */ private function dirty():void { if (cleanObj.contains(fFace) || cleanObj.contains(bFace)) { var face:DisplayObject = cleanObj.getChildAt(0); cleanObj.removeChild(face); dirtyObj.addChild(face); if (face == fFace) { dirtyObj.swapChildren(face, bFace); } else { bFace.scaleX *= -1; } } } } }
因为近期工作的内容很多涉及到Flash相册，这段时间我对网上的Flash相册比较留意，试着整理了一些很好的Flash相册形式。但是我发现这些整理基本上属于多此一举，因为有个提供Flash相册的网站，里面的效果涵盖了我整理的大部分，而且可以很详细地自定义细节！她的名字叫做：PictureTrail
FlashPlayer 10附带的内部类，多了一个vector，它的作用是对数组的数据结构进行优化，相当于一串只能存放指定数据类型的链表。所以在执行效率上，比数组有很大的提升。 Adobe的文档写得很详细，值得一看。他的 forEach, every 方法，很强大。
思维导图，又称概念图、心智图、脑图、Mind map等，是描述一些概念的图。有很多软件可以方便地绘制脑图，例如 Mindjet 公司的软件 MindManager 是我用过最好的的软件，不过是收费的，而且只能在windows下用，自从我用ubuntu之后就一直没有找到好用又美观的概念图程序。
今天看到一个非常不错的在线概念图软件：Mindmeister，可以媲美MindManager的，而且是免费、跨平台的（废话，人家是web application嘛！）、设计也很美观。
试用了一下，功能非常强大，除了基本功能之外，还有分享、离线编辑、发送到Email和手机的功能。 read more…
