一般在 Flex 中使用外部 Graphical Skin
都是用 Embed 标签来嵌入外部 SWF or PNG、JPG....
假如以 Flash 集成，可以用更方便的做法
那便是用 Flash 输出 SWC 类别库之后
直接在 Flex 内引用 Symbol Class
优点如下：
保留 ActionScript，意味着可以同时混和 Graphical Skin、Programmatic Skin
直接作出 Hybrid Skin，有些情况会很方便
相关连结：
用 Flash 开发 Flex Skin 才是王道
在 Flash 作位图九宫格缩放技巧
Flex Embed 位图档小技巧
Flex Embed 外部资源技巧
原文网址：Compiling Flash CS3 compatible SWC's with Flex
之前我也曾经尝试过利用 Flex Builder 编译 SWC 类别库
拿到 Flash CS3 用，结果失败
这文章作者指出了一些 Flex 编译 SWC 的关键步骤
照着做出来的 SWC 就可以拿到 Flash CS3 使用了
至于为什么要用 Flex 编译 SWC
如作者所述
Flex 开发环境比较好用，可以与 Ant 结合，容易创建~
另外，用 Flash CS3 编译 SWC Lib. 时
必须要在 Component Main Class 明确引用需要包入的 Class
否则 Flash CS3 是不会把其它 Class 编译进去的
这点在 Flex 方便多了，有 GUI 界面可以自由选择 Class
关键步骤如下：
manifest.xml：
<?xml version="1.0" encoding="utf-8" ?> <componentPackage> <component id="[Component Name]" class="[Component Main Class]"/> </componentPackage>Read more...
开站新闻稿!
各位朋友大家好，我是Bing (刘仲滨)，真的非常高兴为全球华人在此宣布有这社群出现。
首先感谢好友nono(不断支持我)、赵英杰、Luar、阿修、奚江华、朱仲杰、凯尔、邦邦、小薛等的Blog文章相继汇入，
丰富起文章内容，今后内容也会同步更新，扩展，以获得多更有用信息来呈现给各位。
ActionScript 3.0 的 DisplayObject、DisplayObjectContainer 相关操作
变的相当严谨，同时也相当扰民啊
没有先作检查，没有作好转型动作
就会得到一堆 Error~~
假如遇到相当复杂的 DisplayObject Tree 结构
那恐怕要写很多程序作检查与转型的动作了...
以下是利用 AS3 Proxy Class 简化 DisplayObject Tree 操作
AS3 DisplayObjectProxy Class：
/*//
AS3 DisplayObjectProxy Class, version 0.0.1
(c) 2007 Shih, Wei-Lung <weilung_shih@hotmail.com>
AS3 DisplayObjectProxy Class is freely distributable
under the terms of an GNU license.
For details, see the Prototype web site: http://ticore.blogspot.com/
//*/
package {
import flash.display.*;
import flash.utils.*;
public dynamic class DisplayObjectProxy extends Proxy {
protected var _target_:DisplayObject;
protected var _keys_:Array;
protected var _values_:Array;
protected var disObjCont:DisplayObjectContainer;
public function DisplayObjectProxy(target:DisplayObject):*{
this._target_ = target;
this.disObjCont = _target_ as DisplayObjectContainer;
}
flash_proxy override function hasProperty(propName:*):Boolean {
//trace("hasProperty : " + propName);
return true;
}
flash_proxy override function getProperty(propName:*):* {
//trace("getProperty : " + propName);
var no:Number = parseInt(propName);
var isUint:Boolean = (no as uint) == no;
if (disObjCont != null) {
var child:DisplayObject = null;
if (isUint) {
if (disObjCont.numChildren > no) {
child = disObjCont.getChildAt(no);
}
//trace("child : " + child);
if (child != null) {
return new DisplayObjectProxy(child);
} else {
return null;
}
}
//trace("disObjCont : " + disObjCont);
child = disObjCont.getChildByName(propName);
//trace("child : " + child);
if (child != null) {
return new DisplayObjectProxy(child);
}
}
var prop:* = _target_[propName];
if (prop is DisplayObject) {
return new DisplayObjectProxy(prop);
} else {
return prop;
}
}
flash_proxy override function setProperty(propName:*, valueObj:*):void {
//trace("setProperty : " + propName, valueObj);
var no:Number = parseInt(propName);
var isUint:Boolean = (no as uint) == no;
if (_target_.hasOwnProperty(propName)) {
_target_[propName] = valueObj;
return;
}
if (disObjCont != null) {
if (valueObj is DisplayObject) {
if (isUint) {
if(disObjCont.numChildren > no) {
disObjCont.removeChildAt(no);
}
disObjCont.addChildAt(valueObj, no);
}
}
if (valueObj == null) {
if (isUint) {
if(disObjCont.numChildren > no) {
disObjCont.removeChildAt(no);
}
}
}
}
}
flash_proxy override function deleteProperty(propName:*):Boolean {
//trace("deleteProperty : " + propName);
var no:Number = parseInt(propName);
var isUint:Boolean = (no as uint) == no;
if (disObjCont != null) {
if (isUint) {
if(disObjCont.numChildren > no) {
disObjCont.removeChildAt(no);
return true;
}
}
}
return false;
}
flash_proxy override function callProperty(propName:*, ... rest):* {
//trace("callProperty : " + propName);
return _target_[propName].apply(_target_, rest);
}
override flash_proxy function nextNameIndex (index:int):int {
//trace("nextNameIndex : " + index);
if (index == 0) {
_keys_ = new Array();
_values_ = new Array();
if (disObjCont != null) {
var o:DisplayObject;
for (var i:Number = 0 ; i < disObjCont.numChildren ; ++i) {
o = disObjCont.getChildAt(i);
_keys_.push(o.name);
_values_.push(o);
}
}
}
if (index < _keys_.length) {
return index + 1;
} else {
return 0;
}
}
override flash_proxy function nextName(index:int):String {
//trace("nextName : " + index);
return _keys_[index - 1];
}
override flash_proxy function nextValue(index:int):* {
//trace("nextValue : " + index);
return _values_[index - 1];
}
}
}
DisplayObjectProxy Class 使用示范：
package {
import flash.display.*;
import flash.utils.*;
public dynamic class main extends MovieClip {
public function main():*{
test();
}
public function test():*{
// 将 Main 包覆为 DisplayObjectProxy
var mainProxy:* = new DisplayObjectProxy(this);
// 用 DisplayObjectProxy 添加四个 Child MovieClip
mainProxy[0] = new MovieClip();
mainProxy[1] = new MovieClip();
mainProxy[2] = new MovieClip();
mainProxy[3] = new MovieClip();
trace(this.numChildren); // 4
// 用 DisplayObjectProxy 指定四个 Child MovieClip Name
mainProxy[0].name = "mc1";
mainProxy[1].name = "mc2";
mainProxy[2].name = "mc3";
mainProxy[3].name = "mc4";
// 用 DisplayObjectProxy 依据 Child Name 取出对象
trace(mainProxy["mc4"].name); // mc4
trace(this.getChildAt(0).name); // mc1
trace(this.getChildAt(1).name); // mc2
trace(this.getChildAt(2).name); // mc3
trace(this.getChildAt(3).name); // mc4
// 用 DisplayObjectProxy 移除 index 为 2 的 child 方式之一
mainProxy[2] = null;
// 用 DisplayObjectProxy 列举所有的 children 方式之一
for (var i:* in mainProxy) {
trace(i);
}
// mc1
// mc2
// mc4
// 用 DisplayObjectProxy 移除 index 为 2 的 child 方式之二
delete mainProxy[2];
// 用 DisplayObjectProxy 列举所有的 children 方式之二
for each(var o:* in mainProxy) {
trace(o.name);
}
// mc1
// mc2
// 用 DisplayObjectProxy 对子对象容器再添加 Child
mainProxy[0][0] = new MovieClip();
mainProxy[0][0][0] = new MovieClip();
mainProxy[0][0][0][0] = new MovieClip();
mainProxy[0][0][0][0].name = "MC[0][0][0][0]";
// 用 DisplayObjectProxy 取出四层之下的 Child
trace(mainProxy[0][0][0][0].name);
// MC[0][0][0][0]
// 相较之下，AS3 正规方式相当复杂
trace(
(
(
(
(
this.getChildAt(0) as DisplayObjectContainer
).getChildAt(0) as DisplayObjectContainer
).getChildAt(0) as DisplayObjectContainer
).getChildAt(0) as DisplayObjectContainer
).name
);
// MC[0][0][0][0]
// 用 DisplayObjectProxy 取出不存在的 Child 对象
trace(mainProxy[0][0][0][2]);
// null
// 将 DisplayObjectProxy 脱壳
trace(describeType(mainProxy[0][0][0][0].valueOf()).@name);
// flash.display::MovieClip
}
}
}
Read more...
日前 Adobe Labs 推出了许多外挂 Adobe Labs - Flex Skin Design Extensions
可以让设计师容易使用 Flash、Photoshop、Illustrator、Fireworks 开发 Flex Skin
但是 Flex 原本就是 SWF Base 的东西
自然以 SWF 为来源，可以达到最好的效果
以下是四种软件输出 Flex Skin 功能比较：
时间轴 影格标签 Tween 动画 |
ActionScript |
位图 |
位图 九宫格缩放 |
矢量图 |
矢量图 九宫格缩放 |
位图柔化 |
|
Flash |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
Illustrator |
× |
× |
○ |
× |
○ |
○ |
× |
Photoshop |
× |
× |
○ |
○ |
× |
× |
× |
Fireworks |
× |
× |
○ |
○ |
× |
× |
× |
由上表看来，使用 Flash 作为 Flex Skin 最后输出工具才是最好选择
这并不代表，其它三种软件没有用
因为 Flash 本身画图工具不够，还是需要绘图软件辅助
相关连结：
两种使用 Flash 开发 Flex Skin 方式比较
在 Flash 作位图九宫格缩放技巧
Flex Embed 位图档小技巧
继之前『一行 AS3 程序让 Flash Player 9 死机』
没想到还有机会推出 Part 2
死机程序的变化型还多出十几种以上呢！
主要都是使用 RegExp 生成的死机状况
这次死机状况略有不同
运行之后，会发现 Flash Player 视窗根本跑不出来
然后 CPU 一直满载
假如不关闭，它也不会出现 Scripting Timeout Error
一直消耗内存，才一分钟就吃到 500 mb 左右
非得要到工作管理员关闭 Flash Player 不可
各种 RegExp 一行死机程序变化型：
" ".match(/(?<= )/g); "a".match(/(?<=a)/g); "".match(/(?<=$)/g); "".match(/(?<=)/g); "".match(/(?=)/g); "".match(/(?)/g); "".match(/(?:)/g); "".match(/(?>)/g); "".match(/()?/g); "".match(/()/g); "".match(/()()/g); "".match(/(())/g); "".match(/^/g); "".match(/^^/g); "".match(/$/g); "".match(/$$/g); "".match(/|/g); "".match(/||/g); "".match(/ /gx);
从上述程序，可以发现一些共通点
都是与 String.match、RegExp Global Flag 有关
这问题会发生在以下版本：
Flash Player 9.0.16.0
Flash Player 9.0.28.0
Flash Player 9.0.45.0
Flash Player 9.0.47.0
Flash Player 9.0.60.120 之后的版本已经修正
相关连结：
一行 AS3 程序让 Flash Player 9 死机 Part 4
一行 AS3 程序让 Flash Player 9 死机 Part 3
一行 AS3 程序让 Flash Player 9 死机
用 @* 指定 Attributes 造成 Flash Player 9 Crash
ActionScript 3.0 支持 E4X 主要有 XML、XMLList
XML 对象可以用 Inline 宣告方式，非常方便
但是文档上并没有提及 XMLList Inline 宣告方式
有的时候就不太方便
这是我在写程序的时候，偶然发现直接宣告 XMLList 的方式
Inline Declare XMLList：
var xmlList:XMLList = <> <node name="Node 1"> </node> <node name="Node 1"> </node> </>; trace(xmlList.length()); // 2 trace(xmlList[0].@name); // Node 1 trace(xmlList[1].@name); // Node 2
另一种宣告 XMLList 方式：
var xml:XMLList = <xml> <node/> <node/> </xml>.*; trace(xml.toXMLString());
利用 add operator 组成 XMLList 方式：
var xmlList:XMLList = <xml><node/></xml> + <></>; trace(xmlList.length()); // 1 trace(xmlList.toXMLString());
相关连结：
Flash CS3 jsfl 也支持 E4X, RegExp
AS3 E4X 互补方案 XPath
AS3 E4X - QName 相关操作
AS3 利用 QName 快速访问 Namespace Member
AS3 E4X - XML 节点包覆
AS3 E4X 资料取出与计算
AS3 E4X - XML 节点交换
AS3 E4X - 插入 XML 节点
AS3 E4X - 删除 XML 节点
AS3 E4X Tip - 你拿到的是 XML or XMLList?
AS3 E4X 技巧 - 替 XML 添加 prototype fnuction
AS3 E4X - XML Attribute 相关操作
用 @* 指定 Attributes 造成 Flash Player 9 Crash
AS3 E4X - XML、XMLList 对象内子节点参考指定与复制
AS3 E4X - XML 对象比较
AS3 E4X - 相关类别与对象创建
AS2、AS3 基础型别对象一致性
原来 Firefox 1.5 就已经开始支持 E4X
问题描述：
当安装过 Adobe Flash Player 9.0.64.0 ActiveX 之后
就无法安装其它版本的 Flash Player
即使用 Flash Player Uninstaller 4.0.0.3 移除也无效
错误消息 1.
您正在尝试安装的 Adobe Flash Player 版本不是最新版。 请造访 http://www.adobe.com/go/getflashplayer 以取得最新、最安全的版本。
错误消息 2.
Error 1904.Module C:\WINDOWS\system32\Macromed\Flash\FlDbg9d.ocx failed to register. HRESULT -2147220473. Contact your support personnel. Error 1904.Module C:\WINDOWS\system32\Macromed\Flash\Flash9d.ocx failed to register. HRESULT -2147220473. Contact your support personnel. Error 1904.Module C:\WINDOWS\system32\Macromed\Flash\Flash8c.ocx failed to register. HRESULT -2147220473. Contact your support personnel.
解决方式：
更改注册码，运行 regedit，查找以下位置：
[HKEY_LOCAL_MACHINE\SOFTWARE\Macromedia\FlashPlayer\SafeVersions] "6.0"=dword:00000058 "7.0"=dword:00000046 "8.0"=dword:00000023 "9.0"=dword:002f0000
将 "9.0" 的二进位资料删除就好
PS. 后来发现使用 Flash Player Uninstaller
用命令列加上 /clean 参数运行也可以清除注册码
Flex Tree 组件并没有直接提供判定内容资料长度的方式
想要依据内容资料动态调整 Tree 高度就很不方便
以下透过继承 Tree 方式，添加 autoStretch 属性
让 Tree 可以自动依据内容高度伸缩
AutoStretchTree Class：
package {
import flash.events.*;
import flash.utils.*;
import mx.controls.Tree;
import mx.events.TreeEvent;
public class AutoStretchTree extends Tree {
private var timer:Timer = new Timer(10, 1);
private var _autoStretch_:Boolean = false;
[Bindable]
public function get autoStretch():Boolean{
return _autoStretch_;
}
public function set autoStretch(value:Boolean):void{
_autoStretch_ = value;
if (_autoStretch_) {
this.addEventListener(Event.RESIZE, doStretch);
this.addEventListener(TreeEvent.ITEM_OPEN, startStretch);
this.addEventListener(TreeEvent.ITEM_CLOSE, startStretch);
this.verticalScrollPolicy = "off";
stretch();
} else {
timer.stop();
this.removeEventListener(Event.RESIZE, doStretch);
this.removeEventListener(TreeEvent.ITEM_OPEN, startStretch);
this.removeEventListener(TreeEvent.ITEM_CLOSE, startStretch);
this.verticalScrollPolicy = "auto";
}
}
protected function stretch(evtObj:Event = null):void{
var items:Array = this.listItems;
var borderThickness:Number = this.getStyle("borderThickness");
if (this.height - borderThickness * 2 < this.rowHeight) {
this.height = this.rowHeight + borderThickness * 2;
}
if (this.maxVerticalScrollPosition > 0) {
this.height += this.rowHeight - (this.height - borderThickness * 2) % this.rowHeight;
return;
} else if (items[items.length - 1] == "") {
this.height -= this.rowHeight + (this.height - borderThickness * 2) % this.rowHeight;
return;
}
}
protected function startStretch(evtObj:Event = null):void{
timer.stop();
timer.delay = this.getStyle("openDuration") + 50;
timer.start();
}
protected function doStretch(evtObj:Event = null):void{
timer.stop();
timer.delay = 10;
timer.start();
}
protected function onTimerComplete(evtObj:Event = null):void{
stretch();
}
public function AutoStretchTree():void{
super();
timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
}
}
}
Flex MXML Code：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" horizontalScrollPolicy="off" backgroundColor="#FFFFFF">
<mx:XMLList id="dataXML">
<node label="Folder 1">
<node label="Node 01" />
<node label="Node 02" />
<node label="Node 03" />
<node label="Node 04" />
</node>
<node label="Folder 2">
<node label="Folder 2-1">
<node label="Node 01" />
<node label="Node 02" />
<node label="Node 03" />
<node label="Node 04" />
</node>
<node label="Node 01" />
<node label="Node 02" />
<node label="Node 03" />
<node label="Node 04" />
</node>
<node label="Folder 3">
<node label="Folder 3-1">
<node label="Node 01" />
<node label="Node 02" />
<node label="Node 03" />
<node label="Node 04" />
</node>
<node label="Node 01" />
<node label="Node 02" />
<node label="Node 03" />
<node label="Node 04" />
</node>
<node label="Folder 4">
<node label="Folder 4-1">
<node label="Node 01" />
<node label="Node 02" />
<node label="Node 03" />
<node label="Node 04" />
</node>
</node>
<node label="Node 01" />
</mx:XMLList>
<comp:AutoStretchTree xmlns:comp="*" width="100%"
dataProvider="{dataXML}" labelField="@label" autoStretch="true">
</comp:AutoStretchTree>
</mx:Application>
<!-- Ticore's Blog - http://ticore.blogspot.com/ -->
Online Demo：
相关连结：
Flex - Tab Tree
Flex 的 UIComponent 大多数可以设置样式
但是 DividedBox 中的分隔线，并无可设置样式属性
也懒得自行去继承更改样式，所以想到以下的小技巧
使用 DataBinding 与额外的 UIComponent 拼出类似的效果
Flex MXML Code：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" width="400" height="300" backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="../assets/DividerBox.png", scaleGridTop="3",
scaleGridBottom="6", scaleGridLeft="3", scaleGridRight="6")]
public var DividerBox:Class;
]]>
</mx:Script>
<mx:Container x="{box1.width + hDivBox.x + 1}" y="0" width="10" height="100%"
mouseEnabled="false" mouseChildren="false"
backgroundImage="{DividerBox}" backgroundSize="100%" />
<mx:HDividedBox id="hDivBox" width="100%" height="100%" borderStyle="solid">
<mx:Box id="box1" width="50%" height="100%" backgroundColor="#FFD0C0">
</mx:Box>
<mx:Box id="box2" width="50%" height="100%" backgroundColor="#C0D0FF">
</mx:Box>
</mx:HDividedBox>
</mx:Application>
Flex HDividedBox 示范撷图：
Read more...
Flash 8、9 虽然有支持 Scale 9 缩放功能
但是仅限于矢量对象
MovieClip 的 Scale 9 设置对位图并没有效果
以下介绍一个技巧，可以让 Flash Scale 9 功能也能应用在位图上
先将位图包成 MovieClip，并勾选 Scale 9 设置
将位图打散成为矢量填色区块
沿着 Scale 9 Grid 划线，将位图填色区块切割开
最后，把九个填色区块个别包成组，删除切割用的线条
这样该 MovieClip 便可以用 Scale 9 模式缩放了
Flash 位图九宫格 (Scale 9) 缩放比较
Read more...
Flex 可以使用 Embed 标签，指定外部图档素材
但是透过这种方式汇入的图片默认是无抗锯齿效果的
虽然可以自行用 AS3 重新以 smooth 方式 draw
不过实在太麻烦
先看看直接 Embed 图档的情况，有很严重的锯齿
以下介绍利用 Flash 改善位图锯齿
将图档汇入 Flash，并且勾选 Allow smoothing 选项
将图片包成一个 MovieClip，并输出 SWF
在 Flex MXML 内指定 Embed 标签
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="120" height="112" backgroundImage="@Embed(source='assets.swf', symbol='fx')"> </mx:Application>
运行结果
相关连结：
用 Flash 开发 Flex Skin 才是王道
在 Flash 作位图九宫格缩放技巧
Flex Embed 外部资源技巧
AS2 UIComponent 具有 Focus 外框功能
不过仅限于键盘 Focus 时候才会出现
只要一用鼠标，淡绿色的 Focus 外框就会消失
以下介绍一个小技巧，hack FocusManager 行为
即使用鼠标点到 UIComponent 或是 TextField，也会出现 Focus 外框
AS2 FocusManager Hack：
focusManager._onMouseDown = null;
var lisObj:Object = new Object();
lisObj.onSetFocus = function(o1:Object, o2:Object) {
if (o2.drawFocus != null) {
o2.drawFocus(true);
}
};
Selection.addListener(lisObj);
效果撷图：
Read more...
在测试 Flex 3 Profiling 时发现居然有运行 Garbage Collection 功能的按钮
于是搜寻 Flex Builder 3 Beta 2 Help
查找 flash.system.System 有 gc 的 function 可用
不过只限于 debug 版本的 Flash Player and AIR
实际测试之后，原来这功能在前两版就添加了
这些都是支持 System.gc(); 的版本
Flash Player Debug 9.0.60.120
Flash Player Debug 9.0.60.184
Flash Player Debug 9.0.60.235
.....
今天刚出 Flex Builder 3.0 beta 2
增加了许多功能~~
并且附带了一个新版的 Flash Player 9.0.60.325
其中一个重要功能 Flex Profiling，可以观察 Flash Player 内存变化与对象
敢出这样的功能，想必一定是对 Flash Player GC Bug 做了修正
Flash Player 9.0.60.325
Flex Profiling
说实话，Flex Profiling 很难查找我要的对象~~
所以还是用之前的 Function Closure GC 测试程序来测
输出结果：
count : 0 totalMemory : 2560000 count : 1 totalMemory : 2564096 index : 0 count : 2 totalMemory : 2564096 index : 0 index : 1 count : 3 totalMemory : 2572288 index : 0 index : 1 index : 2 count : 1 totalMemory : 2703360 index : 2365 count : 2 totalMemory : 2703360 index : 2365 index : 2366 count : 3 totalMemory : 2703360 index : 2365 index : 2366 index : 2367
Flash Player 9.0.60.325 果然改善了~！
index 为 0 的 Function Closure 不见了
AS2 LoadVars 在解析 Key-Value Pairs 资料时
遇到重复的变量名称，只会保留最后一个值
不过 AS3 的 URLVariables 可以解析重复变量为数组了~
测试程序：
import flash.net.*; var str:String = "a=1&a=2&a=3"; var urlVar:URLVariables = new URLVariables(); urlVar.decode(str); trace(urlVar.a); // 1,2,3 trace(urlVar.a[0]); // 1 trace(urlVar.a[1]); // 2 trace(urlVar.a[2]); // 3Read more...
发表文章
