只学一点点：我的技术学习策略
2013-03-11 10:46
169 查看
李敖有首诗叫
《只爱一点点》 ：
不爱那么多，
只爱一点点；
别人的爱情像海深，
我的爱情浅。
不爱那么多，
只爱一点点；
别人的爱情像天长，
我的爱情短。
不爱那么多，
只爱一点点；
别人眉来又眼去，
我只偷看你一眼。
一点足够。在黄易的大唐双龙传中有个说法叫《遁去的一》，也就是说任何事情在纷杂万象之中都有一个消失的一，把这个消失的一找到，就可以事半功倍。
在学技术中，很多人纠结于掌握与精通。掌握是能够熟练的使用该技术实现自己的目标，而精通，则是对该技术的常用及半常用的场景都熟悉，能够处理常见或非常见的问题，是广泛的掌握。
在宅男和腐女眼中，万事万物皆为攻受。学习务必精通，则是绝世小受，学习只求掌握，则是偏向于攻。孙子曰：善攻者动于九天之上，善守（受）者藏于九地之下。下面看看动于九天之上的学习方法。
作为一个上个世纪就开始写网页的程序员，你如果问我这个css怎么写，这个js怎么写，我的回答一般就是两个字：“不会”。做为一个从.net 1.0就开始写C#程序的程序员，如果你问常见的.net问题，50%情况下我的回答还是“不会”或者“查MSDN”。有不少人加我QQ讨论技术问题，我最多的回答是“不会”，“不知道”，“Google”。时至如今，也就会些用了理所当然就能记住的知识，其它的都不会，IDE的快捷键也记不住几个。当然，也有碰巧那个东西我懂的，这种情况极少。
技术是来解决问题的，不是增加心智负担的。承担进攻任务的行军不会带太多的累赘。我的开发任务中数据库、查询类的不重要，linq不用学，自从接触代码生成后，ORM的也全部都扔了，因为ORM需要学习，且可控性没有代码生成的好。自从项目主要是图形图像方面的后，asp.net等也都丢了，因为这类项目需求变动大、技术支持困难。直到后来才找到.net对我而言的遁去的一：unsafe + 指针。有了unsafe + 指针，图像程序性能大增，相比C/C++而言，生产力也得到了极大的提高——什么新东西都不用学（指针还没忘记）。
知识是基于过去经验的总结，而我们面对的是未来，因此，对于过往知识需要谨慎的辨识，对于他人经验需要参考性的采纳。MSDN中明白的说，不鼓励使用unsafe，而在.net图像程序中大量的使用后，才能感觉到它的爽。如果看到MSDN上不推荐用，看见别人也几乎不这么用，自己就给自己设置禁区，那我就找不到这个遁去的一。
下面是个更深刻的例子。今年应该是我写Flash程序的第三个年头。俺，是一个不会Flash的Flash程序员。你如果让我用Flash CS工具做一个动画，很抱歉，不会。那么看看，我会哪些？我学了哪些？我能做什么？做这些我相对于别人有哪些优势？从这个例子看看什么是进攻式学习。
普遍看来，Flash是一个动画工具。全球数百万Flash动画设计师。好吧，俺美工差，如果它是个动画工具，俺就不玩了。
在我最初看来，Flash是一个运行在绝大多数PC机上的虚拟机平台，擅长处理图形图像，可以用它来快速开发程序。这样看，就可以玩玩它。为什么？图形图像类应用是我给自己确立的方向，而Flash是一个适合的平台。
这样的认识还没有触及遁去的一。随着开发经验的增加，一个遁去的一开始浮现：
Flash是一个最简单的虚拟机，它只封装了最基本的操作（图形图像、声音、视频、XML以及现在的3D），连Button控件都没有，凡是可有可没有的都没有。
用普通的眼光看，这个虚拟机简单、弱小。换一种方式看：尺寸小，平台小，容易移植。用html5/js来写一套Flash的基本API也没多少代码。因此，Flash/AIR才这么容易的打入iOS之中，且各类平台间Flash代码保持非常好的兼容性。
Flash提供了一套简洁的API，跨各种平台。Flash以库的形式扩展（这一点与.Net很大不同），Flash CS工具里自带了一套简单、开源的UI控件库，Flex则提供了一套复杂的、全功能的UI库，这些都是Flash平台外部的（这也与.Net不同，WPF是在SDK里面的，而不是外面）。在平台外部，就拥有了很好的灵活性。
这个简单的弱小的小玩意怎么能算遁去的一呢？
算不上！
它充其量就是一个灰尘大小的卵细胞。
下面，一个微不足道的、看似毫无关联的玩意出场了：数据绑定。它就像一个小蝌蚪一样，向卵细胞游啊游，在两者接触的瞬间，一个生命诞生了！
Flash开发遁去的一就是Flash的底层API + 数据绑定。
Flash底层API很简单很少，各大平台都支持（Web，桌面，移动）。它就是中国移动全球通，什么地方都有它——我能！
光能还不行，直接用Flash底层API开发，就像用GDI+一笔笔绘制一样，麻烦的要命，直到数据绑定出现，数据绑定让基于Flash API的开发有了质的飞跃——它好我也好！
因此，掌握Flash只需要掌握两个东西：底层API和数据绑定，剩下的都是细枝末节的，用的时候查文档和搜索引擎就可以了。我们需要学的东西是多么的少，而我们能做的事情是多么的多！
首先，得学习开发语言。Flash平台的官方开发语言是actionscript3，简称as3，每当说起as3时，人们总会谈起as2，你就当as2从没出现过，了解as2一点用都没有，不闻、不问、不看。
as3和主流开发语言很类似。package 机制、类机制和java相似，继承是extends，实现接口是implements。区别：
（1）变量声明是var i:int；函数声明是：function foo(i:int):int; 不支持方法重载，支持默认参数。函数可以作为参数传递。支持闭包。
（2）Getter和Setter分别为：function get foo():int; 和function set foo(i:int):int;
（3）抛出事件：dispatchEvent;监听事件addEventListeneraddEventListener。事件支持弱引用。
（4）for each可以遍历集合；
（5）支持动态类，Object是动态类，for可以遍历Object:
for (var key:String in obj)
{
...
}
（6）[ ]里写元数据。常用的有三个：事件申明，嵌入资源和数据绑定：
数据绑定是 [Bindable]，这个在后面会详述。
嵌入资源的例子一看就明白：
[Embed(source="assets/blackStyle/iconPlayStart36.png")]
private var buttonForwardPlay36:Class;
事件申明用在类中，申明之后，IDE会对该类给出对应事件的智能提示，例子：
[Event(name="inited", type="flash.events.Event")]
as3很快就学会了，拿本语法书，扫一眼就行了。不用Flash CS工具的话，主流IDE就是Flash Builder，它是基于Eclipse开发的，用过Eclipse的拿过来就会用。
下面进入主题：Flash API和数据绑定。需要掌握的Flash API：
（1）绘制的API：绘制线、绘制曲线、填充/梯度填充、蒙版、混合模式（貌似除了蒙版外，Html5都有！）
（2）滤镜和变换
（3）文本处理：TextField
（4）核心UI类：Sprite、它的生命周期及对交互的响应
上面这些是我们的钢筋水泥，下面，就用这些钢筋水泥来搭建我们自己的应用。有人可能会问：控件呢？有了数据绑定，我们并不需要控件，或者换句话说，有了数据绑定，我们可以很容易由底层API搭建自己需要的控件。
数据绑定非常容易！
数据绑定是Flex的mxml（Flex描述界面的语言）编译器提供的一个功能。下面，我们只用Flex的 mxml编译器，而不用Flex的任何控件，来从Flash API搭建我们自己的控件或其它应用。Mxml就不介绍了，看一眼就会了。下面是一个mxml中数据绑定的例子：
<shapes:Rectangle id="background" width="{width}" height="{height}"
corner="{bgCorner}" corners="{bgCorners}"
color="{bgColor}"
alpha="{bgEnabled?bgAlpha:bgAlpha*0.3}"
borderColor="{bgBorderColor}"
borderThickness="{bgBorderThickness}"
fillAlpha="{bgFillAlpha}" borderAlpha="{bgBorderAlpha}"
/>
很简单、很容易理解、理解了就再也忘不了：大括号{}中的就是数据绑定内容，{}中的所有可绑定的变量构成绑定链，绑定链上的绑定源出现了任何变化，都会激发运算，将运算结果付给被绑定的字段。
如果给一个类加了元数据[Bindable]，则该类实例的字段和getter/setter就成了绑定源。如果不想把全部字段和getter/setter弄成绑定源，可对字段或setter单独增加元数据[Bindable]。
这个数据绑定比WPF/SL的数据绑定简洁多了、易用多了。
下面，就靠这些开始征程。
先解决多语言的问题：
View
Code
package
{
import orc.common.RpcRequest;
public dynamic class l extends Object
{
[Bindable]
public static var i:l = new l();
public function s(key:String, defaultString:String = null):String
{
return getString(key,defaultString);
}
public static function s(key:String, defaultString:String = null):String
{
return i.s(key,defaultString);
}
public function getString(key:String, defaultString:String = null):String
{
if(this.hasOwnProperty(key)==false)
{
var lowKey:String = key.toLowerCase();
if(this.hasOwnProperty(lowKey) == false)
{
return defaultString ? defaultString : key;
}
else
{
return this[lowKey];
}
}
else
{
return this[key];
}
}
public static function loadRemote(url:String, callback:Function = null, failCallback:Function = null):void
{
new RpcRequest(url, null,
function(obj:Object):void
{
loadXml(new XML(obj));
if(callback != null) callback();
},
failCallback
);
}
public static function loadXml(xml:XML):void
{
if(xml == null) return;
var lang:l = new l();
// 第一遍
for each(var node: XML in xml.item)
{
lang[node.@key]=String(node.@value);
}
// 第二遍，存储小写的key
for each(var node: XML in xml.item)
{
var lkey:String = String(node.@key).toLowerCase();
if(lang.hasOwnProperty(lkey) == false)
{
lang[lkey] = String(node.@value);
}
}
i = lang;
}
}
}
RpcRequest 的代码就不贴了，它的功能就是从url取回个xml文件。这个类在根命名空间中，这样不用import就能用了。名字是l，代表language，有一个静态实例i，代表instance，它设为可Bindable，方法s代表取的是string。Xml文件中存储的是键值对，这样写：
<Button label="{l.i.s('Yes')}" />
就绑定了多语言，如果不加载任何语言文件的话，显示的是“Yes”，如果加载了的话，如果该文件中存在键“Yes”，则加载对应的值，如果不存在，则寻找是否有小写后为“yes”的键，加载对应的值，如果都不存在，则显示“Yes”。而当更改语言时，由于i发生了变化，由于数据绑定的关系，该Button的label值也马上得到了更新。
寥寥几行代码就实现了多语言解决方案。
接着是三个基础类：Application、BaseComponent 和 BaseContainer。Application 顾名思义，是App的入口类，提供了一些基本的功能。BaseComponent 是UI类的基类。BaseContainer 是容器类的基类。这三个类的代码如下：
View
Code
package orc.common
{
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import mx.binding.utils.BindingUtils;
import mx.core.Application;
import mx.events.PropertyChangeEvent;
[DefaultProperty( "children" )]
[Bindable]
[Event(name="inited", type="flash.events.Event")]
public class Application extends Sprite
{
protected var _width:Number = 0;
protected var _height:Number = 0;
public var fillMode:Boolean = true;
private var inited:Boolean = false;
public static var instance : Application = null;
public function Application()
{
super();
x = 0;
y = 0;
instance = this;
if(stage != null)
{
stage.showDefaultContextMenu = false;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
}
addEventListener(Event.ENTER_FRAME, onInvalidate);
}
private var _children:Vector.<DisplayObject>;
private var childrenChanged:Boolean = false;
public function get children():Vector.<DisplayObject>
{
return _children;
}
public function set children( value:Vector.<DisplayObject> ):void
{
if ( _children != value )
{
_children = value;
childrenChanged = true;
invalidate();
}
}
protected function invalidate():void
{
removeEventListener(Event.ENTER_FRAME, onInvalidate);
addEventListener(Event.ENTER_FRAME, onInvalidate);
}
protected function onStageResize(event:Event):void
{
if(fillMode == true)
{
if(this.width != stage.stageWidth) this.width = stage.stageWidth;
if(this.height != stage.stageHeight) this.height = stage.stageHeight;
}
}
protected function onInvalidate(event:Event) : void
{
if(fillMode == true && stage.stageWidth > 0)
{
if(this.width != stage.stageWidth) this.width = stage.stageWidth;
if(this.height != stage.stageHeight) this.height = stage.stageHeight;
}
if(stage.hasEventListener(Event.RESIZE) == true)
{
stage.removeEventListener(Event.RESIZE, onStageResize);
}
stage.addEventListener(Event.RESIZE, onStageResize);
if ( childrenChanged )
{
while ( numChildren > 0 )
{
removeChildAt( 0 );
}
for each ( var child:DisplayObject in children )
{
addChild( child );
}
childrenChanged = false;
}
removeEventListener(Event.ENTER_FRAME, onInvalidate);
if(inited == false)
{
inited = true;
this.dispatchEvent(new Event("inited"));
}
}
override public function set width(w:Number):void
{
_width = w;
invalidate();
dispatchEvent(new Event(Event.RESIZE));
}
override public function get width():Number
{
return _width;
}
override public function set height(h:Number):void
{
_height = h;
invalidate();
dispatchEvent(new Event(Event.RESIZE));
}
override public function get height():Number
{
return _height;
}
override public function set x(value:Number):void
{
super.x = Math.round(value);
}
override public function set y(value:Number):void
{
super.y = Math.round(value);
}
public function removeAllChildren():void
{
while(this.numChildren > 0)
{
this.removeChildAt(0);
}
if(this._children != null)
{
this._children = null;
childrenChanged = true;
}
}
}
}
package orc.common
{
import flash.display.DisplayObjectContainer;
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.DropShadowFilter;
import orc.containers.PopUpCanvas;
import orc.utils.CallLaterHelper;
import orc.utils.MouseHelper;
[Bindable]
[Event(name="resize", type="flash.events.Event")]
[Event(name="mouseStick",type="flash.events.Event")]
[Event(name="closed",type="flash.events.Event")]
[Event(name="draw",type="flash.events.Event")]
public class BaseComponent extends Sprite
{
protected var _width:Number = 0;
protected var _height:Number = 0;
protected var _tag:int = -1;
protected var _enabled:Boolean = true;
public static const DRAW:String = "draw";
public var maskCanvas:PopUpCanvas;
private var _mouseHelper:MouseHelper;
private function get mouseHelper():MouseHelper
{
if(_mouseHelper == null) _mouseHelper = new MouseHelper();
return _mouseHelper;
}
public function get mouseStickIntervalMiniSeconds():uint
{
return mouseHelper.stickHelper.intervalMiniSeconds;
}
public function set mouseStickIntervalMiniSeconds(value:uint):void
{
mouseHelper.stickHelper.intervalMiniSeconds = value;
}
private var _enableMouseStick:Boolean = false;
public function get enableMouseStick():Boolean
{
return _enableMouseStick;
}
public function set enableMouseStick(value:Boolean):void
{
_enableMouseStick = value;
if(value == true)
{
var self:BaseComponent = this;
mouseHelper.stickHelper.bind(this);
mouseHelper.stickHelper.callback =
function():void
{
self.dispatchEvent(new Event("mouseStick"));
};
}
else
{
mouseHelper.stickHelper.unbind();
}
}
public function show(x:Number = NaN, y:Number = NaN):void
{
var pop:PopUpCanvas = new PopUpCanvas();
pop.show();
pop.setContent(this,x,y);
}
public function showDialog(x:Number = NaN, y:Number = NaN):void
{
var pop:PopUpCanvas = new PopUpCanvas();
pop.showDialog();
pop.setContent(this,x,y);
}
public function BaseComponent(parent:DisplayObjectContainer = null, xpos:Number = 0, ypos:Number = 0)
{
move(xpos, ypos);
if(parent != null)
{
parent.addChild(this);
}
init();
}
protected function init():void
{
addChildren();
invalidate();
}
protected function addChildren():void
{
}
protected function invalidate():void
{
removeEventListener(Event.ENTER_FRAME, onInvalidate);
addEventListener(Event.ENTER_FRAME, onInvalidate);
}
protected function getShadow(dist:Number, knockout:Boolean = false):DropShadowFilter
{
return new DropShadowFilter(dist, 45, Style.DROPSHADOW, 1, dist, dist, .3, 1, knockout);
}
public static function initStage(stage:Stage):void
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
}
public function move(xpos:Number, ypos:Number):void
{
x = Math.round(xpos);
y = Math.round(ypos);
}
public function setSize(w:Number, h:Number):void
{
_width = w;
_height = h;
invalidate();
}
public function draw():void
{
dispatchEvent(new Event(BaseComponent.DRAW));
}
protected function onInvalidate(event:Event):void
{
removeEventListener(Event.ENTER_FRAME, onInvalidate);
draw();
}
override public function set width(w:Number):void
{
_width = w;
invalidate();
dispatchEvent(new Event(Event.RESIZE));
}
override public function get width():Number
{
return _width;
}
override public function set height(h:Number):void
{
_height = h;
invalidate();
dispatchEvent(new Event(Event.RESIZE));
}
override public function get height():Number
{
return _height;
}
public function set tag(value:int):void
{
_tag = value;
}
public function get tag():int
{
return _tag;
}
public function set enabled(value:Boolean):void
{
_enabled = value;
mouseEnabled = mouseChildren = _enabled;
tabEnabled = value;
alpha = _enabled ? 1.0 : 0.5;
}
public function get enabled():Boolean
{
return _enabled;
}
public function close():void
{
if(this.parent != null)
{
this.parent.removeChild(this);
}
if(this.maskCanvas != null)
{
this.maskCanvas.close();
}
this.dispatchEvent(new Event("closed"));
}
public function callLater(callback:Function):void
{
new CallLaterHelper(this.stage,callback);
}
}
}
package orc.common
{
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import flash.display.Shape;
import flash.events.Event;
import flash.geom.Point;
[DefaultProperty( "children" )]
[Bindable]
[Event(name="inited", type="flash.events.Event")]
public class BaseContainer extends BaseComponent
{
private var _children:Vector.<DisplayObject>;
private var childrenChanged:Boolean = false;
protected var inited:Boolean = false;
protected function s(key:String,defaultValue:String = null):String
{
return l.i.getString(key,defaultValue);
}
/**
* Array of DisplayObject instances to be added as children
*/
public function get children():Vector.<DisplayObject>
{
return this._children;
}
public function set children( value:Vector.<DisplayObject> ):void
{
if ( _children != value )
{
if(_children != null)
{
for each(var item:DisplayObject in value)
{
_children.push(item);
}
}
else
{
_children = value;
}
childrenChanged = true;
invalidate();
}
}
public function BaseContainer(parent:DisplayObjectContainer = null, xpos:Number = 0, ypos:Number = 0)
{
super(parent, xpos, ypos);
}
override protected function onInvalidate(event:Event) : void
{
if ( childrenChanged )
{
while ( numChildren > 0 )
{
removeChildAt( 0 );
}
if(children != null)
{
for each ( var child:DisplayObject in children )
{
addChild( child );
}
}
childrenChanged = false;
}
if(this.mask != null)
{
if(this.contains(this.mask))
{
this.removeChild(this.mask);
}
}
super.onInvalidate(event);
if(inited == false)
{
inited = true;
this.dispatchEvent(new Event("inited"));
}
}
public function removeAllChildren():void
{
while(this.numChildren > 0)
{
this.removeChildAt(0);
}
if(this._children != null)
{
this._children = null;
childrenChanged = true;
}
}
public function setCenter(obj:DisplayObject):void
{
obj.x = 0.5 * (this.width - obj.width);
obj.y = 0.5 * (this.height - obj.height);
}
}
}
几个Helper类代码：
View
Code
package orc.utils
{
import flash.display.Stage;
import flash.events.Event;
public class CallLaterHelper
{
public function CallLaterHelper(stage:Stage, callback:Function)
{
this.callback = callback;
this.stage = stage;
stage.addEventListener(Event.ENTER_FRAME, onStageEnterFrame);
}
private var stage:Stage;
private var callback:Function;
private function onStageEnterFrame(event:Event):void
{
stage.removeEventListener(Event.ENTER_FRAME, onStageEnterFrame);
if(callback != null)
{
callback();
}
}
}
}
package orc.utils
{
public class MouseHelper
{
private var _stickHelper:MouseStickHelper;
public function get stickHelper():MouseStickHelper
{
if(_stickHelper == null) _stickHelper = new MouseStickHelper();
return _stickHelper;
}
}
}
package orc.utils
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class MouseStickHelper
{
private var target:Sprite;
private var timer:Timer = new Timer(intervalMiniSeconds);
private var active:Boolean = false;
private var mouseEvent:MouseEvent;
private var _intervalMiniSeconds:uint = 100;
public function get intervalMiniSeconds():uint
{
return _intervalMiniSeconds;
}
public function set intervalMiniSeconds(value:uint):void
{
_intervalMiniSeconds = value;
timer.delay = value;
}
public var callback:Function = null;
public function bind(obj:Sprite):void
{
unbind();
target = obj;
if(target != null)
{
target.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
target.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
target.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
target.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
}
public function unbind():void
{
if(target != null)
{
target.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
target.removeEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
target.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
target.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
target = null;
reset();
}
}
private function onMouseDown(event:MouseEvent):void
{
active = true;
timer.stop();
if(timer.hasEventListener(TimerEvent.TIMER) == false)
{
timer.addEventListener(TimerEvent.TIMER,
function(e:*):void
{
fireEvent();
}
);
}
timer.start();
fireEvent();
}
private function fireEvent():void
{
if(this.callback != null)
{
this.callback();
}
}
private function onMouseMove(event:MouseEvent):void
{
if(active == false) return;
}
private function onMouseOut(event:MouseEvent):void
{
reset();
}
private function onMouseUp(event:MouseEvent):void
{
reset();
}
private function reset():void
{
active = false;
timer.stop();
}
}
}
下面开始搭积木。先是Shape。只要有背景的地方，都有Shape。下面是Shape的基类：
View
Code
package orc.shapes
{
import flash.display.BitmapData;
import orc.common.BaseComponent;
public class BaseShape extends BaseComponent
{
private var _color:uint = 0xFFFFFF;
public function get color():uint
{
return _color;
}
public function set color(value:uint):void
{
if(_color == value) return;
_color = value;
this.invalidate();
}
private var _fillAlpha:Number = 1;
public function get fillAlpha():Number
{
return _fillAlpha;
}
public function set fillAlpha(value:Number):void
{
_fillAlpha = value;
this.invalidate();
}
private var _texture:BitmapData;
public function get texture():BitmapData
{
return _texture;
}
public function set texture(value:BitmapData):void
{
_texture = value;
this.invalidate();
}
private var _borderAlpha:Number = 1;
public function get borderAlpha():Number
{
return _borderAlpha;
}
public function set borderAlpha(value:Number):void
{
_borderAlpha = value;
this.invalidate();
}
private var _borderColor:uint;
public function get borderColor():uint
{
return _borderColor;
}
public function set borderColor(value:uint):void
{
_borderColor = value;
this.invalidate();
}
private var _borderThickness:Number = NaN;
public function get borderThickness():Number
{
return _borderThickness;
}
public function set borderThickness(value:Number):void
{
_borderThickness = value;
this.invalidate();
}
private var _descriptor:Descriptor;
public function get descriptor():Descriptor
{
return _descriptor;
}
public function set descriptor(value:Descriptor):void
{
_descriptor = value;
if(_descriptor != null)
{
_descriptor.resize(this);
}
}
}
}
BaseShape 继承了BaseComponent的x,y,width,height等属性，另外提供了填充色，填充透明度，纹理，边界色，边界透明度，边界厚度等属性。而又因为有些形状，比如圆，不方便用x,y,width,height等描述，更方便用圆心和半径描述，因此又提供了descriptor的属性。如，CircularDescriptor：
View
Code
package orc.shapes
{
public class Descriptor
{
public function resize(shape:BaseShape):void
{
}
}
}
package orc.shapes
{
public class CircularDescriptor extends Descriptor
{
public var centerX:Number;
public var centerY:Number;
public var radius:Number;
public function CircularDescriptor(centerX:Number,centerY:Number,radius:Number):void
{
this.centerX = centerX;
this.centerY = centerY;
this.radius = radius;
}
public override function resize(shape:BaseShape):void
{
shape.x = centerX - radius;
shape.y = centerY - radius;
shape.width = radius * 2;
shape.height = radius * 2;
}
}
}
接着是矩形控件：
View
Code
package orc.shapes
{
import flash.display.Graphics;
public class Rectangle extends BaseShape
{
private var _corner:Number = NaN;
public function get corner():Number
{
return _corner;
}
public function set corner(value:Number):void
{
_corner = value;
this.invalidate();
}
private var _corners:Array = null;
public function get corners():Array
{
return _corners;
}
public function set corners(value:Array):void
{
_corners = value;
this.invalidate();
}
public override function draw():void
{
var g:Graphics = this.graphics;
g.clear();
if(width > 0 && height > 0)
{
var c0:Number = corner;
var c1:Number = corner;
var c2:Number = corner;
var c3:Number = corner;
var c:Array = this.corners;
if(c != null && c.length == 4)
{
c0 = Number(c[0]);
c1 = Number(c[1]);
c2 = Number(c[2]);
c3 = Number(c[3]);
}
if(isNaN(c0)) c0 = 0;
if(isNaN(c1)) c1 = 0;
if(isNaN(c2)) c2 = 0;
if(isNaN(c3)) c3 = 0;
if(isNaN(borderThickness) == false && borderThickness > 0)
{
g.lineStyle(this.borderThickness, this.borderColor, this.borderAlpha,true);
}
if(this.texture)
{
g.beginBitmapFill(this.texture);
}
else
{
g.beginFill(color, this.fillAlpha);
}
if(c0 == 0 && c1 == 0 && c2 == 0 && c3 == 0)
{
g.drawRect(0,0,width,height);
}
else
{
g.drawRoundRectComplex(0,0,width,height,c0,c1,c2,c3);
}
g.endFill();
}
}
}
}
这个矩形控件可以设置圆角。有了这个控件，各种各样的背景图就都可以实现了：有圆角的、没圆角的、有纹理的、有边界的，等等。
椭圆/圆也经常用，写一个：
View
Code
package orc.shapes
{
import flash.display.Graphics;
import orc.common.BaseComponent;
public class Ellipse extends BaseShape
{
public override function draw():void
{
var g:Graphics = this.graphics;
g.clear();
if(width > 0 && height > 0)
{
if(isNaN(borderThickness) == false && borderThickness > 0)
{
g.lineStyle(this.borderThickness, this.borderColor, this.borderAlpha);
}
if(this.texture)
{
g.beginBitmapFill(this.texture);
}
else
{
g.beginFill(color, this.fillAlpha);
}
g.drawEllipse(0,0,width,height);
g.endFill();
}
super.draw();
}
}
}
下面，我们建立一个简单的Canvas类，这个Canvas类可以设置背景，可以设置边界（背景和边界是用上面的Rectangle 类实现的。
View
Code
<?xml version="1.0" encoding="utf-8"?>
<common:BaseContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:common="orc.common.*"
width="400" height="300"
xmlns:controls="orc.controls.*"
xmlns:shapes="orc.shapes.*"
>
<fx:Script>
<![CDATA[
[Bindable]
public var bgColor:uint = 0xFFFFFF;
[Bindable]
public var bgCorner:Number = NaN;
[Bindable]
public var bgCorners:Array = null;
[Bindable]
public var bgAlpha:Number = 1;
[Bindable]
public var bgEnabled:Boolean = true;
[Bindable]
public var bgBorderThickness:Number = NaN;
[Bindable]
public var bgBorderColor:Number = 0xFFFFFF;
[Bindable]
public var bgFillAlpha:Number = 1;
[Bindable]
public var bgBorderAlpha:Number = 1;
]]>
</fx:Script>
<shapes:Rectangle id="background" width="{width}" height="{height}"
corner="{bgCorner}" corners="{bgCorners}"
color="{bgColor}"
alpha="{bgEnabled?bgAlpha:bgAlpha*0.3}"
borderColor="{bgBorderColor}"
borderThickness="{bgBorderThickness}"
fillAlpha="{bgFillAlpha}" borderAlpha="{bgBorderAlpha}"
/>
</common:BaseContainer>
一个Canvas就是这么简单！下面，建立Image控件，这个Image支持九宫格（如果不知道九宫格，请Google之）：
View
Code
package orc.controls
{
import flash.display.AVM1Movie;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.net.URLRequest;
import orc.common.Avm1Loader;
import orc.common.BaseComponent;
import orc.common.ScaleBitmap;
[Event(name="complete",type="flash.events.Event")]
public class Image extends BaseComponent
{
public static const MODE_9GRID:String = "9grid";
private var _source:*;
public function get source():*
{
return _source;
}
[Bindable]
public function set source(value:*):void
{
_source = value;
this.onInvalidate(null);
}
[Bindable]
public var sourceScale9Grid:Rectangle;
public var mode:String = MODE_9GRID;
public function Image():void
{
super();
}
public override function draw():void
{
super.draw();
if(source)
{
if(source is BitmapData)
{
drawBitmapData(source);
}
else if(source is Bitmap)
{
drawBitmapData(Bitmap(source).bitmapData);
}
else if(source is Class)
{
var bmp:Bitmap = new source() as Bitmap;
if(bmp != null)
{
drawBitmapData(bmp.bitmapData);
}
}
else if(source is String)
{
if(_loader != null)
{
_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loadCompleted);
}
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadCompleted);
_loader.load(new URLRequest(source));
}
}
else
{
clear();
}
}
private function loadCompleted(e:Event):void
{
clear();
var d:DisplayObject = _loader.content;
var child:DisplayObject = d;
if(d is AVM1Movie)
{
var bmpData:BitmapData = new BitmapData(d.width,d.height,true,0);
bmpData.draw(d);
child = new Bitmap(bmpData,"auto",true);
}
else if(d is Bitmap)
{
Bitmap(d).smoothing = true;
}
if(this.width > 0 && this.height > 0)
{
var xx:Number = this.width / child.width;
var yy:Number = this.height / child.height;
var scale:Number = Math.min(xx,yy);
child.scaleX = scale;
child.scaleY = scale;
}
else
{
this._width = child.width;
this._height = child.height;
this.dispatchEvent(new Event(Event.RESIZE));
}
this._bgBitmap = child;
addChild(child);
this.dispatchEvent(new Event(Event.COMPLETE));
}
private var _loader:Loader;
private var _bgBitmap:DisplayObject = null;
private function clear():void
{
if(_bgBitmap != null)
{
this.removeChild(_bgBitmap);
_bgBitmap = null;
}
}
protected function drawBitmapData(bmpData:BitmapData):void
{
clear();
if(bmpData == null) return;
if(this.width == 0 || this.height == 0)
{
this._width = bmpData.width;
this._height = bmpData.height;
this.dispatchEvent(new Event(Event.RESIZE));
}
var sb:ScaleBitmap = new ScaleBitmap(bmpData,"auto",true);
sb.scale9Grid = this.sourceScale9Grid;
sb.setSize(this.width,this.height);
_bgBitmap = sb;
this.addChild(sb);
this.dispatchEvent(new Event(Event.COMPLETE));
}
public function getBitmap():Bitmap
{
if(this._bgBitmap == null) return null;
var bmpData:BitmapData = new BitmapData(this._bgBitmap.width,this._bgBitmap.height, true, 0);
bmpData.draw(this._bgBitmap, new Matrix(this._bgBitmap.scaleX,0,0,this._bgBitmap.scaleY));
var bmp:Bitmap = new Bitmap(bmpData);
return bmp;
}
}
}
那么，我们如何让Canvas或BaseContainer中显示背景图呢？简单，在里面放个Image控件即可，比如，这是我写的ImageButton控件：
View
Code
<common:BaseContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:oc="orc.controls.*"
xmlns:common="orc.common.*"
buttonMode="true" useHandCursor="true"
mouseChildren="{enable}" mouseEnabled="{enable}"
mouseOver="{if(enable == true) alpha=0.6;}"
mouseOut="{if(enable == true) alpha=1;}"
>
<fx:Script>
<![CDATA[
[Bindable]
public var source:*;
public function get enable():Boolean
{
return img ? img.enabled : true;
}
[Bindable]
public function set enable(value:Boolean):void
{
img.enabled = value;
if(value == true) alpha = 1;
}
]]>
</fx:Script>
<oc:Image id="img" source="{source}" mouseChildren="false" mouseEnabled="false" />
</common:BaseContainer>
Label控件离不了，恩，就在网上的一份代码基础上写个Label控件：
View
Code
package orc.controls
{
import flash.display.DisplayObjectContainer;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import orc.common.BaseComponent;
import orc.common.Style;
[Event(name="resize", type="flash.events.Event")]
public class Label extends BaseComponent
{
protected var _autoSize:Boolean = false;
protected var _text:String = "";
protected var _tf:TextField;
public var fontName:String = Style.fontName;
public var fontSize:Number = Style.fontSize;
public var fontColor:uint = 0x000000;
public var align:String = "left";
public var bold:Boolean = false;
public function Label(parent:DisplayObjectContainer = null, xpos:Number = 0, ypos:Number = 0, text:String = "")
{
this.text = text;
super(parent, xpos, ypos);
}
override protected function init():void
{
super.init();
mouseEnabled = false;
mouseChildren = false;
}
override protected function addChildren():void
{
_height = 18;
_tf = new TextField();
_tf.height = _height;
_tf.selectable = false;
_tf.mouseEnabled = false;
_tf.text = _text;
addChild(_tf);
draw();
}
override public function draw():void
{
super.draw();
var f:TextFormat = new TextFormat(fontName,fontSize,fontColor);
f.align = this.align;
f.bold = this.bold;
_tf.defaultTextFormat = f;
_tf.text = _text;
if(_autoSize)
{
_tf.autoSize = TextFieldAutoSize.LEFT;
_width = _tf.width;
dispatchEvent(new Event(Event.RESIZE));
}
else
{
_tf.autoSize = TextFieldAutoSize.NONE;
_tf.width = _width;
}
_height = _tf.height = 18;
}
public function set text(t:String):void
{
_text = t;
if(_text == null) _text = "";
invalidate();
}
public function get text():String
{
return _text;
}
public function set autoSize(b:Boolean):void
{
_autoSize = b;
}
public function get autoSize():Boolean
{
return _autoSize;
}
public function get textField():TextField
{
return _tf;
}
}
}
接下来Button控件呼之欲出：
View
Code
<containers:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:common="orc.common.*"
xmlns:controls="controls.*"
xmlns:oc="orc.controls.*"
xmlns:containers="orc.containers.*"
width="120" height="24"
bgColor="{isMouseOver?mouseOverColor:defaultColor}"
bgCorner="6"
buttonMode="true" useHandCursor="true"
mouseOver="{isMouseOver = true}"
mouseOut="{isMouseOver = false}"
>
<fx:Script>
<![CDATA[
[Bindable]
public var label:String = "";
[Bindable]
public var labelHeight:Number = 20;
[Bindable]
public var defaultColor:uint = 0xCCCCCC;
[Bindable]
public var mouseOverColor:uint = 0xDDDDDD;
[Bindable]
public var isMouseOver:Boolean = false;
]]>
</fx:Script>
<oc:Label id="lbLabel" text="{label}" width="{width}" y="{0.5*(height-labelHeight)}"
mouseEnabled="false" height="{labelHeight}" fontSize="12" align="center"
/>
</containers:Canvas>
进度条Progress就太容易了：
View
Code
<?xml version="1.0" encoding="utf-8"?>
<containers:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:common="orc.common.*"
xmlns:controls="orc.controls.*"
xmlns:containers="orc.containers.*"
xmlns:shapes="orc.shapes.*"
bgBorderThickness="1" bgColor="0xFFFFFF" bgBorderColor="0x333333"
width="200" height="20"
>
<fx:Script>
<![CDATA[
[Bindable]
public var percent:Number = 0;
[Bindable]
public var fillColor:uint = 0x0000FF;
private function getWidth(val:Number):Number
{
var ww:Number = this.width - 2;
return ww * val;
}
]]>
</fx:Script>
<shapes:Rectangle x="1" y="1" color="{fillColor}" height="{height-2}" width="{getWidth(percent)}" />
</containers:Canvas>
定位？容易！有数据绑定，想让它在哪里就在哪里，如：
x="{0.5*width-borderThickness*0.5}" y="{-handleLength}"
带图标的按钮ComboButton：
View
Code
<?xml version="1.0" encoding="utf-8"?>
<containers:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:containers="orc.containers.*"
xmlns:controls="orc.controls.*"
mouseChildren="false"
bgCorner="5"
buttonMode="true" useHandCursor="true"
mouseOver="{alpha=0.9;}"
mouseOut="{alpha=1;}"
width="200" height="50"
>
<fx:Script>
<![CDATA[
[Bindable]
public var source:Class;
[Bindable]
public var label:String;
]]>
</fx:Script>
<controls:Image x="30" y="10" source="{source}" />
<controls:Label x="70" y="18"
text="{label}"
fontSize="12"
width="120"
/>
</containers:Canvas>
HSlider:
View
Code
<?xml version="1.0" encoding="utf-8"?>
<containers:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:common="orc.common.*"
xmlns:controls="controls.*"
xmlns:containers="orc.containers.*"
xmlns:shapes="orc.shapes.*"
width="264" height="22"
bgAlpha="0"
inited="onInited()"
>
<fx:Metadata>
[Event(name="drag",type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import orc.events.MoveEvent;
import orc.utils.DragHelper;
[Bindable]
public var maximum:Number = 3;
[Bindable]
public var minimum:Number = 0;
[Bindable]
public var value:Number = minimum;
private var dragHelper:DragHelper = new DragHelper();
private function get minX():Number
{
return 0;
}
private function get maxX():Number
{
return this.width - btnDrag.width + 1;
}
private function checkX(val:Number):Number
{
val = Math.max(val,minX);
val = Math.min(val,maxX);
return val;
}
private function checkValue(val:Number):Number
{
val = Math.max(val,minimum);
val = Math.min(val,maximum);
return val;
}
private function getX(val:Number, min:Number = NaN, max:Number = NaN):Number
{
val = this.checkValue(val);
return minX + (maxX - minX) * (val - minimum ) / (maximum - minimum);
}
private function onInited():void
{
dragHelper.bind(btnDrag, this);
dragHelper.addEventListener(MoveEvent.MOVING, onDrag);
}
private function onDrag(event:MoveEvent):void
{
var xx:Number = checkX(event.xOffSet/this.scaleX + btnDrag.x);
dragToX(xx);
}
private function dragToX(val:Number):void
{
this.value = convertX2Value(val);
this.dispatchEvent(new Event("drag"));
}
private function convertX2Value(x:Number):Number
{
var val:Number = minimum + (maximum - minimum) * (x - minX ) / (maxX - minX);
return checkValue(val);
}
private function onMouseStick(e:Event):void
{
var step:Number = 5;
var xx:Number = this.btnDrag.x;
if(this.btnDrag.mouseX > 0)
{
xx += step;
}
else
{
xx -= step;
}
dragToX(xx);
}
]]>
</fx:Script>
<controls:ImageButton y="1.4"
width="264" height="22"
enableMouseStick="true"
mouseStick="onMouseStick(event)"
mouseStickIntervalMiniSeconds="40"
source="@Embed(source='assets/hsliderBg.png')"
/>
<controls:ImageButton source="@Embed(source='assets/slider.png')"
id="btnDrag" x="{getX(value, minimum, maximum)}"
width="25" height="25" />
</containers:Canvas>
图像拉伸、旋转、缩放、删除的控制框控件复杂一点，400多行，代码贴时出错了，就不贴了，效果图：
当然，滚动条啥的控件就复杂一点，不想写可以就拿Flash里自带的包装一下，照样用。
然后是动画，动画也很容易，下面是让一个界面慢慢的变小的代码：
View
Code
[Bindable]
public var centerX:Number = 0;
[Bindable]
public var centerY:Number = 0;
[Bindable]
public var targetWinth:Number = 0;
[Bindable]
public var targetHeight:Number = 0;
private var _percent:Number = 0;
public function get percent():Number
{
return _percent;
}
[Bindable]
public function set percent(value:Number):void
{
if(value == 1) cvs.visible = true;
else if(cvs.visible == true) cvs.visible = false;
_percent = value;
this.width = targetWinth * value;
this.height = targetHeight * value;
this.callLater(
function():void
{
x = centerX - width * 0.5;
y = centerY - height * 0.5;
});
}
public function min():void
{
TweenLite.to(this,0.5,{percent:0});
}
看看我做的一个项目的整体效果图，这些界面大部分都是从Draw API一步步绘制的：
as3有个叫haXe的兄弟语言，haXe写的代码可以在Flash平台运行，可以在js环境运行，铺平了向html5的过渡之途。
下面，回答前面提出的四个问题：我会哪些？我学了哪些？我能做什么？做这些我相对于别人有哪些优势？
我会哪些？我学了哪些？
Flash CS系列工具会吗？不会！
Flex会吗，会一点点而已。
还就只懂几个API和数据绑定和几个Flash基本类。其实这就够了。有基本类、有几个API，有数据绑定，组合起来就是非常强大的工具，我们不需要学习多少东西，却可以非常高效率的开发很多应用，且开发的这些应用可以分发到各大平台。不需要学习多少控件，有学习的时间，就够写一个自己的了。自己写的控件没有冗余，性能高，编译后的尺寸小，且修改方便。
我能做什么？
通常的，对特效要求不是特别高的Flash App都能做，这意味着，某些桌面软件，某些Web应用，某些ios应用和某些android应用。额，Html5也算顺便能做，今年顺手用haXe做了个html5的项目。
我相对于别人有哪些优势？
那些用Flash CS开发的，开发效率低，代码可维护性差。那些用Flex开发的，代码尺寸大，程序性能差。俺这样的优势就是Flex般的开发效率和灵活性，Flash般的性能和代码尺寸，且什么都是自己写的，出了问题自己也好弄，不像Flex那样是代码迷宫。
学的少，可做的多，相对别人还有优势，这是不是就是遁去的一呢？要是按照书本学，按照别人的建议学，东西学了一大堆，能做多少还是个问题，能以什么效率做也是个问题，更可怕的是，学完了还不知道自己学习的是什么。
只学一点点，不累！剩下的，交给狗爹度娘吧。
注：本文代码只有主要代码，那些不影响阅读的代码就没贴出来，不然太长了。又由于和业务代码在一个项目里，也不方便打包放出。见谅！
作者：xiaotie , 集异璧实验室(GEBLAB)
出处：http://www.cnblogs.com/xiaotie/
若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.
《只爱一点点》 ：
不爱那么多，
只爱一点点；
别人的爱情像海深，
我的爱情浅。
不爱那么多，
只爱一点点；
别人的爱情像天长，
我的爱情短。
不爱那么多，
只爱一点点；
别人眉来又眼去，
我只偷看你一眼。
一点足够。在黄易的大唐双龙传中有个说法叫《遁去的一》，也就是说任何事情在纷杂万象之中都有一个消失的一，把这个消失的一找到，就可以事半功倍。
在学技术中，很多人纠结于掌握与精通。掌握是能够熟练的使用该技术实现自己的目标，而精通，则是对该技术的常用及半常用的场景都熟悉，能够处理常见或非常见的问题，是广泛的掌握。
在宅男和腐女眼中，万事万物皆为攻受。学习务必精通，则是绝世小受，学习只求掌握，则是偏向于攻。孙子曰：善攻者动于九天之上，善守（受）者藏于九地之下。下面看看动于九天之上的学习方法。
作为一个上个世纪就开始写网页的程序员，你如果问我这个css怎么写，这个js怎么写，我的回答一般就是两个字：“不会”。做为一个从.net 1.0就开始写C#程序的程序员，如果你问常见的.net问题，50%情况下我的回答还是“不会”或者“查MSDN”。有不少人加我QQ讨论技术问题，我最多的回答是“不会”，“不知道”，“Google”。时至如今，也就会些用了理所当然就能记住的知识，其它的都不会，IDE的快捷键也记不住几个。当然，也有碰巧那个东西我懂的，这种情况极少。
技术是来解决问题的，不是增加心智负担的。承担进攻任务的行军不会带太多的累赘。我的开发任务中数据库、查询类的不重要，linq不用学，自从接触代码生成后，ORM的也全部都扔了，因为ORM需要学习，且可控性没有代码生成的好。自从项目主要是图形图像方面的后，asp.net等也都丢了，因为这类项目需求变动大、技术支持困难。直到后来才找到.net对我而言的遁去的一：unsafe + 指针。有了unsafe + 指针，图像程序性能大增，相比C/C++而言，生产力也得到了极大的提高——什么新东西都不用学（指针还没忘记）。
知识是基于过去经验的总结，而我们面对的是未来，因此，对于过往知识需要谨慎的辨识，对于他人经验需要参考性的采纳。MSDN中明白的说，不鼓励使用unsafe，而在.net图像程序中大量的使用后，才能感觉到它的爽。如果看到MSDN上不推荐用，看见别人也几乎不这么用，自己就给自己设置禁区，那我就找不到这个遁去的一。
下面是个更深刻的例子。今年应该是我写Flash程序的第三个年头。俺，是一个不会Flash的Flash程序员。你如果让我用Flash CS工具做一个动画，很抱歉，不会。那么看看，我会哪些？我学了哪些？我能做什么？做这些我相对于别人有哪些优势？从这个例子看看什么是进攻式学习。
普遍看来，Flash是一个动画工具。全球数百万Flash动画设计师。好吧，俺美工差，如果它是个动画工具，俺就不玩了。
在我最初看来，Flash是一个运行在绝大多数PC机上的虚拟机平台，擅长处理图形图像，可以用它来快速开发程序。这样看，就可以玩玩它。为什么？图形图像类应用是我给自己确立的方向，而Flash是一个适合的平台。
这样的认识还没有触及遁去的一。随着开发经验的增加，一个遁去的一开始浮现：
Flash是一个最简单的虚拟机，它只封装了最基本的操作（图形图像、声音、视频、XML以及现在的3D），连Button控件都没有，凡是可有可没有的都没有。
用普通的眼光看，这个虚拟机简单、弱小。换一种方式看：尺寸小，平台小，容易移植。用html5/js来写一套Flash的基本API也没多少代码。因此，Flash/AIR才这么容易的打入iOS之中，且各类平台间Flash代码保持非常好的兼容性。
Flash提供了一套简洁的API，跨各种平台。Flash以库的形式扩展（这一点与.Net很大不同），Flash CS工具里自带了一套简单、开源的UI控件库，Flex则提供了一套复杂的、全功能的UI库，这些都是Flash平台外部的（这也与.Net不同，WPF是在SDK里面的，而不是外面）。在平台外部，就拥有了很好的灵活性。
这个简单的弱小的小玩意怎么能算遁去的一呢？
算不上！
它充其量就是一个灰尘大小的卵细胞。
下面，一个微不足道的、看似毫无关联的玩意出场了：数据绑定。它就像一个小蝌蚪一样，向卵细胞游啊游，在两者接触的瞬间，一个生命诞生了！
Flash开发遁去的一就是Flash的底层API + 数据绑定。
Flash底层API很简单很少，各大平台都支持（Web，桌面，移动）。它就是中国移动全球通，什么地方都有它——我能！
光能还不行，直接用Flash底层API开发，就像用GDI+一笔笔绘制一样，麻烦的要命，直到数据绑定出现，数据绑定让基于Flash API的开发有了质的飞跃——它好我也好！
因此，掌握Flash只需要掌握两个东西：底层API和数据绑定，剩下的都是细枝末节的，用的时候查文档和搜索引擎就可以了。我们需要学的东西是多么的少，而我们能做的事情是多么的多！
首先，得学习开发语言。Flash平台的官方开发语言是actionscript3，简称as3，每当说起as3时，人们总会谈起as2，你就当as2从没出现过，了解as2一点用都没有，不闻、不问、不看。
as3和主流开发语言很类似。package 机制、类机制和java相似，继承是extends，实现接口是implements。区别：
（1）变量声明是var i:int；函数声明是：function foo(i:int):int; 不支持方法重载，支持默认参数。函数可以作为参数传递。支持闭包。
（2）Getter和Setter分别为：function get foo():int; 和function set foo(i:int):int;
（3）抛出事件：dispatchEvent;监听事件addEventListeneraddEventListener。事件支持弱引用。
（4）for each可以遍历集合；
（5）支持动态类，Object是动态类，for可以遍历Object:
for (var key:String in obj)
{
...
}
（6）[ ]里写元数据。常用的有三个：事件申明，嵌入资源和数据绑定：
数据绑定是 [Bindable]，这个在后面会详述。
嵌入资源的例子一看就明白：
[Embed(source="assets/blackStyle/iconPlayStart36.png")]
private var buttonForwardPlay36:Class;
事件申明用在类中，申明之后，IDE会对该类给出对应事件的智能提示，例子：
[Event(name="inited", type="flash.events.Event")]
as3很快就学会了，拿本语法书，扫一眼就行了。不用Flash CS工具的话，主流IDE就是Flash Builder，它是基于Eclipse开发的，用过Eclipse的拿过来就会用。
下面进入主题：Flash API和数据绑定。需要掌握的Flash API：
（1）绘制的API：绘制线、绘制曲线、填充/梯度填充、蒙版、混合模式（貌似除了蒙版外，Html5都有！）
（2）滤镜和变换
（3）文本处理：TextField
（4）核心UI类：Sprite、它的生命周期及对交互的响应
上面这些是我们的钢筋水泥，下面，就用这些钢筋水泥来搭建我们自己的应用。有人可能会问：控件呢？有了数据绑定，我们并不需要控件，或者换句话说，有了数据绑定，我们可以很容易由底层API搭建自己需要的控件。
数据绑定非常容易！
数据绑定是Flex的mxml（Flex描述界面的语言）编译器提供的一个功能。下面，我们只用Flex的 mxml编译器，而不用Flex的任何控件，来从Flash API搭建我们自己的控件或其它应用。Mxml就不介绍了，看一眼就会了。下面是一个mxml中数据绑定的例子：
<shapes:Rectangle id="background" width="{width}" height="{height}"
corner="{bgCorner}" corners="{bgCorners}"
color="{bgColor}"
alpha="{bgEnabled?bgAlpha:bgAlpha*0.3}"
borderColor="{bgBorderColor}"
borderThickness="{bgBorderThickness}"
fillAlpha="{bgFillAlpha}" borderAlpha="{bgBorderAlpha}"
/>
很简单、很容易理解、理解了就再也忘不了：大括号{}中的就是数据绑定内容，{}中的所有可绑定的变量构成绑定链，绑定链上的绑定源出现了任何变化，都会激发运算，将运算结果付给被绑定的字段。
如果给一个类加了元数据[Bindable]，则该类实例的字段和getter/setter就成了绑定源。如果不想把全部字段和getter/setter弄成绑定源，可对字段或setter单独增加元数据[Bindable]。
这个数据绑定比WPF/SL的数据绑定简洁多了、易用多了。
下面，就靠这些开始征程。
先解决多语言的问题：
View
Code
package
{
import orc.common.RpcRequest;
public dynamic class l extends Object
{
[Bindable]
public static var i:l = new l();
public function s(key:String, defaultString:String = null):String
{
return getString(key,defaultString);
}
public static function s(key:String, defaultString:String = null):String
{
return i.s(key,defaultString);
}
public function getString(key:String, defaultString:String = null):String
{
if(this.hasOwnProperty(key)==false)
{
var lowKey:String = key.toLowerCase();
if(this.hasOwnProperty(lowKey) == false)
{
return defaultString ? defaultString : key;
}
else
{
return this[lowKey];
}
}
else
{
return this[key];
}
}
public static function loadRemote(url:String, callback:Function = null, failCallback:Function = null):void
{
new RpcRequest(url, null,
function(obj:Object):void
{
loadXml(new XML(obj));
if(callback != null) callback();
},
failCallback
);
}
public static function loadXml(xml:XML):void
{
if(xml == null) return;
var lang:l = new l();
// 第一遍
for each(var node: XML in xml.item)
{
lang[node.@key]=String(node.@value);
}
// 第二遍，存储小写的key
for each(var node: XML in xml.item)
{
var lkey:String = String(node.@key).toLowerCase();
if(lang.hasOwnProperty(lkey) == false)
{
lang[lkey] = String(node.@value);
}
}
i = lang;
}
}
}
RpcRequest 的代码就不贴了，它的功能就是从url取回个xml文件。这个类在根命名空间中，这样不用import就能用了。名字是l，代表language，有一个静态实例i，代表instance，它设为可Bindable，方法s代表取的是string。Xml文件中存储的是键值对，这样写：
<Button label="{l.i.s('Yes')}" />
就绑定了多语言，如果不加载任何语言文件的话，显示的是“Yes”，如果加载了的话，如果该文件中存在键“Yes”，则加载对应的值，如果不存在，则寻找是否有小写后为“yes”的键，加载对应的值，如果都不存在，则显示“Yes”。而当更改语言时，由于i发生了变化，由于数据绑定的关系，该Button的label值也马上得到了更新。
寥寥几行代码就实现了多语言解决方案。
接着是三个基础类：Application、BaseComponent 和 BaseContainer。Application 顾名思义，是App的入口类，提供了一些基本的功能。BaseComponent 是UI类的基类。BaseContainer 是容器类的基类。这三个类的代码如下：
View
Code
package orc.common
{
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import mx.binding.utils.BindingUtils;
import mx.core.Application;
import mx.events.PropertyChangeEvent;
[DefaultProperty( "children" )]
[Bindable]
[Event(name="inited", type="flash.events.Event")]
public class Application extends Sprite
{
protected var _width:Number = 0;
protected var _height:Number = 0;
public var fillMode:Boolean = true;
private var inited:Boolean = false;
public static var instance : Application = null;
public function Application()
{
super();
x = 0;
y = 0;
instance = this;
if(stage != null)
{
stage.showDefaultContextMenu = false;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
}
addEventListener(Event.ENTER_FRAME, onInvalidate);
}
private var _children:Vector.<DisplayObject>;
private var childrenChanged:Boolean = false;
public function get children():Vector.<DisplayObject>
{
return _children;
}
public function set children( value:Vector.<DisplayObject> ):void
{
if ( _children != value )
{
_children = value;
childrenChanged = true;
invalidate();
}
}
protected function invalidate():void
{
removeEventListener(Event.ENTER_FRAME, onInvalidate);
addEventListener(Event.ENTER_FRAME, onInvalidate);
}
protected function onStageResize(event:Event):void
{
if(fillMode == true)
{
if(this.width != stage.stageWidth) this.width = stage.stageWidth;
if(this.height != stage.stageHeight) this.height = stage.stageHeight;
}
}
protected function onInvalidate(event:Event) : void
{
if(fillMode == true && stage.stageWidth > 0)
{
if(this.width != stage.stageWidth) this.width = stage.stageWidth;
if(this.height != stage.stageHeight) this.height = stage.stageHeight;
}
if(stage.hasEventListener(Event.RESIZE) == true)
{
stage.removeEventListener(Event.RESIZE, onStageResize);
}
stage.addEventListener(Event.RESIZE, onStageResize);
if ( childrenChanged )
{
while ( numChildren > 0 )
{
removeChildAt( 0 );
}
for each ( var child:DisplayObject in children )
{
addChild( child );
}
childrenChanged = false;
}
removeEventListener(Event.ENTER_FRAME, onInvalidate);
if(inited == false)
{
inited = true;
this.dispatchEvent(new Event("inited"));
}
}
override public function set width(w:Number):void
{
_width = w;
invalidate();
dispatchEvent(new Event(Event.RESIZE));
}
override public function get width():Number
{
return _width;
}
override public function set height(h:Number):void
{
_height = h;
invalidate();
dispatchEvent(new Event(Event.RESIZE));
}
override public function get height():Number
{
return _height;
}
override public function set x(value:Number):void
{
super.x = Math.round(value);
}
override public function set y(value:Number):void
{
super.y = Math.round(value);
}
public function removeAllChildren():void
{
while(this.numChildren > 0)
{
this.removeChildAt(0);
}
if(this._children != null)
{
this._children = null;
childrenChanged = true;
}
}
}
}
package orc.common
{
import flash.display.DisplayObjectContainer;
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.DropShadowFilter;
import orc.containers.PopUpCanvas;
import orc.utils.CallLaterHelper;
import orc.utils.MouseHelper;
[Bindable]
[Event(name="resize", type="flash.events.Event")]
[Event(name="mouseStick",type="flash.events.Event")]
[Event(name="closed",type="flash.events.Event")]
[Event(name="draw",type="flash.events.Event")]
public class BaseComponent extends Sprite
{
protected var _width:Number = 0;
protected var _height:Number = 0;
protected var _tag:int = -1;
protected var _enabled:Boolean = true;
public static const DRAW:String = "draw";
public var maskCanvas:PopUpCanvas;
private var _mouseHelper:MouseHelper;
private function get mouseHelper():MouseHelper
{
if(_mouseHelper == null) _mouseHelper = new MouseHelper();
return _mouseHelper;
}
public function get mouseStickIntervalMiniSeconds():uint
{
return mouseHelper.stickHelper.intervalMiniSeconds;
}
public function set mouseStickIntervalMiniSeconds(value:uint):void
{
mouseHelper.stickHelper.intervalMiniSeconds = value;
}
private var _enableMouseStick:Boolean = false;
public function get enableMouseStick():Boolean
{
return _enableMouseStick;
}
public function set enableMouseStick(value:Boolean):void
{
_enableMouseStick = value;
if(value == true)
{
var self:BaseComponent = this;
mouseHelper.stickHelper.bind(this);
mouseHelper.stickHelper.callback =
function():void
{
self.dispatchEvent(new Event("mouseStick"));
};
}
else
{
mouseHelper.stickHelper.unbind();
}
}
public function show(x:Number = NaN, y:Number = NaN):void
{
var pop:PopUpCanvas = new PopUpCanvas();
pop.show();
pop.setContent(this,x,y);
}
public function showDialog(x:Number = NaN, y:Number = NaN):void
{
var pop:PopUpCanvas = new PopUpCanvas();
pop.showDialog();
pop.setContent(this,x,y);
}
public function BaseComponent(parent:DisplayObjectContainer = null, xpos:Number = 0, ypos:Number = 0)
{
move(xpos, ypos);
if(parent != null)
{
parent.addChild(this);
}
init();
}
protected function init():void
{
addChildren();
invalidate();
}
protected function addChildren():void
{
}
protected function invalidate():void
{
removeEventListener(Event.ENTER_FRAME, onInvalidate);
addEventListener(Event.ENTER_FRAME, onInvalidate);
}
protected function getShadow(dist:Number, knockout:Boolean = false):DropShadowFilter
{
return new DropShadowFilter(dist, 45, Style.DROPSHADOW, 1, dist, dist, .3, 1, knockout);
}
public static function initStage(stage:Stage):void
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
}
public function move(xpos:Number, ypos:Number):void
{
x = Math.round(xpos);
y = Math.round(ypos);
}
public function setSize(w:Number, h:Number):void
{
_width = w;
_height = h;
invalidate();
}
public function draw():void
{
dispatchEvent(new Event(BaseComponent.DRAW));
}
protected function onInvalidate(event:Event):void
{
removeEventListener(Event.ENTER_FRAME, onInvalidate);
draw();
}
override public function set width(w:Number):void
{
_width = w;
invalidate();
dispatchEvent(new Event(Event.RESIZE));
}
override public function get width():Number
{
return _width;
}
override public function set height(h:Number):void
{
_height = h;
invalidate();
dispatchEvent(new Event(Event.RESIZE));
}
override public function get height():Number
{
return _height;
}
public function set tag(value:int):void
{
_tag = value;
}
public function get tag():int
{
return _tag;
}
public function set enabled(value:Boolean):void
{
_enabled = value;
mouseEnabled = mouseChildren = _enabled;
tabEnabled = value;
alpha = _enabled ? 1.0 : 0.5;
}
public function get enabled():Boolean
{
return _enabled;
}
public function close():void
{
if(this.parent != null)
{
this.parent.removeChild(this);
}
if(this.maskCanvas != null)
{
this.maskCanvas.close();
}
this.dispatchEvent(new Event("closed"));
}
public function callLater(callback:Function):void
{
new CallLaterHelper(this.stage,callback);
}
}
}
package orc.common
{
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import flash.display.Shape;
import flash.events.Event;
import flash.geom.Point;
[DefaultProperty( "children" )]
[Bindable]
[Event(name="inited", type="flash.events.Event")]
public class BaseContainer extends BaseComponent
{
private var _children:Vector.<DisplayObject>;
private var childrenChanged:Boolean = false;
protected var inited:Boolean = false;
protected function s(key:String,defaultValue:String = null):String
{
return l.i.getString(key,defaultValue);
}
/**
* Array of DisplayObject instances to be added as children
*/
public function get children():Vector.<DisplayObject>
{
return this._children;
}
public function set children( value:Vector.<DisplayObject> ):void
{
if ( _children != value )
{
if(_children != null)
{
for each(var item:DisplayObject in value)
{
_children.push(item);
}
}
else
{
_children = value;
}
childrenChanged = true;
invalidate();
}
}
public function BaseContainer(parent:DisplayObjectContainer = null, xpos:Number = 0, ypos:Number = 0)
{
super(parent, xpos, ypos);
}
override protected function onInvalidate(event:Event) : void
{
if ( childrenChanged )
{
while ( numChildren > 0 )
{
removeChildAt( 0 );
}
if(children != null)
{
for each ( var child:DisplayObject in children )
{
addChild( child );
}
}
childrenChanged = false;
}
if(this.mask != null)
{
if(this.contains(this.mask))
{
this.removeChild(this.mask);
}
}
super.onInvalidate(event);
if(inited == false)
{
inited = true;
this.dispatchEvent(new Event("inited"));
}
}
public function removeAllChildren():void
{
while(this.numChildren > 0)
{
this.removeChildAt(0);
}
if(this._children != null)
{
this._children = null;
childrenChanged = true;
}
}
public function setCenter(obj:DisplayObject):void
{
obj.x = 0.5 * (this.width - obj.width);
obj.y = 0.5 * (this.height - obj.height);
}
}
}
几个Helper类代码：
View
Code
package orc.utils
{
import flash.display.Stage;
import flash.events.Event;
public class CallLaterHelper
{
public function CallLaterHelper(stage:Stage, callback:Function)
{
this.callback = callback;
this.stage = stage;
stage.addEventListener(Event.ENTER_FRAME, onStageEnterFrame);
}
private var stage:Stage;
private var callback:Function;
private function onStageEnterFrame(event:Event):void
{
stage.removeEventListener(Event.ENTER_FRAME, onStageEnterFrame);
if(callback != null)
{
callback();
}
}
}
}
package orc.utils
{
public class MouseHelper
{
private var _stickHelper:MouseStickHelper;
public function get stickHelper():MouseStickHelper
{
if(_stickHelper == null) _stickHelper = new MouseStickHelper();
return _stickHelper;
}
}
}
package orc.utils
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
public class MouseStickHelper
{
private var target:Sprite;
private var timer:Timer = new Timer(intervalMiniSeconds);
private var active:Boolean = false;
private var mouseEvent:MouseEvent;
private var _intervalMiniSeconds:uint = 100;
public function get intervalMiniSeconds():uint
{
return _intervalMiniSeconds;
}
public function set intervalMiniSeconds(value:uint):void
{
_intervalMiniSeconds = value;
timer.delay = value;
}
public var callback:Function = null;
public function bind(obj:Sprite):void
{
unbind();
target = obj;
if(target != null)
{
target.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
target.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
target.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
target.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
}
public function unbind():void
{
if(target != null)
{
target.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
target.removeEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
target.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
target.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
target = null;
reset();
}
}
private function onMouseDown(event:MouseEvent):void
{
active = true;
timer.stop();
if(timer.hasEventListener(TimerEvent.TIMER) == false)
{
timer.addEventListener(TimerEvent.TIMER,
function(e:*):void
{
fireEvent();
}
);
}
timer.start();
fireEvent();
}
private function fireEvent():void
{
if(this.callback != null)
{
this.callback();
}
}
private function onMouseMove(event:MouseEvent):void
{
if(active == false) return;
}
private function onMouseOut(event:MouseEvent):void
{
reset();
}
private function onMouseUp(event:MouseEvent):void
{
reset();
}
private function reset():void
{
active = false;
timer.stop();
}
}
}
下面开始搭积木。先是Shape。只要有背景的地方，都有Shape。下面是Shape的基类：
View
Code
package orc.shapes
{
import flash.display.BitmapData;
import orc.common.BaseComponent;
public class BaseShape extends BaseComponent
{
private var _color:uint = 0xFFFFFF;
public function get color():uint
{
return _color;
}
public function set color(value:uint):void
{
if(_color == value) return;
_color = value;
this.invalidate();
}
private var _fillAlpha:Number = 1;
public function get fillAlpha():Number
{
return _fillAlpha;
}
public function set fillAlpha(value:Number):void
{
_fillAlpha = value;
this.invalidate();
}
private var _texture:BitmapData;
public function get texture():BitmapData
{
return _texture;
}
public function set texture(value:BitmapData):void
{
_texture = value;
this.invalidate();
}
private var _borderAlpha:Number = 1;
public function get borderAlpha():Number
{
return _borderAlpha;
}
public function set borderAlpha(value:Number):void
{
_borderAlpha = value;
this.invalidate();
}
private var _borderColor:uint;
public function get borderColor():uint
{
return _borderColor;
}
public function set borderColor(value:uint):void
{
_borderColor = value;
this.invalidate();
}
private var _borderThickness:Number = NaN;
public function get borderThickness():Number
{
return _borderThickness;
}
public function set borderThickness(value:Number):void
{
_borderThickness = value;
this.invalidate();
}
private var _descriptor:Descriptor;
public function get descriptor():Descriptor
{
return _descriptor;
}
public function set descriptor(value:Descriptor):void
{
_descriptor = value;
if(_descriptor != null)
{
_descriptor.resize(this);
}
}
}
}
BaseShape 继承了BaseComponent的x,y,width,height等属性，另外提供了填充色，填充透明度，纹理，边界色，边界透明度，边界厚度等属性。而又因为有些形状，比如圆，不方便用x,y,width,height等描述，更方便用圆心和半径描述，因此又提供了descriptor的属性。如，CircularDescriptor：
View
Code
package orc.shapes
{
public class Descriptor
{
public function resize(shape:BaseShape):void
{
}
}
}
package orc.shapes
{
public class CircularDescriptor extends Descriptor
{
public var centerX:Number;
public var centerY:Number;
public var radius:Number;
public function CircularDescriptor(centerX:Number,centerY:Number,radius:Number):void
{
this.centerX = centerX;
this.centerY = centerY;
this.radius = radius;
}
public override function resize(shape:BaseShape):void
{
shape.x = centerX - radius;
shape.y = centerY - radius;
shape.width = radius * 2;
shape.height = radius * 2;
}
}
}
接着是矩形控件：
View
Code
package orc.shapes
{
import flash.display.Graphics;
public class Rectangle extends BaseShape
{
private var _corner:Number = NaN;
public function get corner():Number
{
return _corner;
}
public function set corner(value:Number):void
{
_corner = value;
this.invalidate();
}
private var _corners:Array = null;
public function get corners():Array
{
return _corners;
}
public function set corners(value:Array):void
{
_corners = value;
this.invalidate();
}
public override function draw():void
{
var g:Graphics = this.graphics;
g.clear();
if(width > 0 && height > 0)
{
var c0:Number = corner;
var c1:Number = corner;
var c2:Number = corner;
var c3:Number = corner;
var c:Array = this.corners;
if(c != null && c.length == 4)
{
c0 = Number(c[0]);
c1 = Number(c[1]);
c2 = Number(c[2]);
c3 = Number(c[3]);
}
if(isNaN(c0)) c0 = 0;
if(isNaN(c1)) c1 = 0;
if(isNaN(c2)) c2 = 0;
if(isNaN(c3)) c3 = 0;
if(isNaN(borderThickness) == false && borderThickness > 0)
{
g.lineStyle(this.borderThickness, this.borderColor, this.borderAlpha,true);
}
if(this.texture)
{
g.beginBitmapFill(this.texture);
}
else
{
g.beginFill(color, this.fillAlpha);
}
if(c0 == 0 && c1 == 0 && c2 == 0 && c3 == 0)
{
g.drawRect(0,0,width,height);
}
else
{
g.drawRoundRectComplex(0,0,width,height,c0,c1,c2,c3);
}
g.endFill();
}
}
}
}
这个矩形控件可以设置圆角。有了这个控件，各种各样的背景图就都可以实现了：有圆角的、没圆角的、有纹理的、有边界的，等等。
椭圆/圆也经常用，写一个：
View
Code
package orc.shapes
{
import flash.display.Graphics;
import orc.common.BaseComponent;
public class Ellipse extends BaseShape
{
public override function draw():void
{
var g:Graphics = this.graphics;
g.clear();
if(width > 0 && height > 0)
{
if(isNaN(borderThickness) == false && borderThickness > 0)
{
g.lineStyle(this.borderThickness, this.borderColor, this.borderAlpha);
}
if(this.texture)
{
g.beginBitmapFill(this.texture);
}
else
{
g.beginFill(color, this.fillAlpha);
}
g.drawEllipse(0,0,width,height);
g.endFill();
}
super.draw();
}
}
}
下面，我们建立一个简单的Canvas类，这个Canvas类可以设置背景，可以设置边界（背景和边界是用上面的Rectangle 类实现的。
View
Code
<?xml version="1.0" encoding="utf-8"?>
<common:BaseContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:common="orc.common.*"
width="400" height="300"
xmlns:controls="orc.controls.*"
xmlns:shapes="orc.shapes.*"
>
<fx:Script>
<![CDATA[
[Bindable]
public var bgColor:uint = 0xFFFFFF;
[Bindable]
public var bgCorner:Number = NaN;
[Bindable]
public var bgCorners:Array = null;
[Bindable]
public var bgAlpha:Number = 1;
[Bindable]
public var bgEnabled:Boolean = true;
[Bindable]
public var bgBorderThickness:Number = NaN;
[Bindable]
public var bgBorderColor:Number = 0xFFFFFF;
[Bindable]
public var bgFillAlpha:Number = 1;
[Bindable]
public var bgBorderAlpha:Number = 1;
]]>
</fx:Script>
<shapes:Rectangle id="background" width="{width}" height="{height}"
corner="{bgCorner}" corners="{bgCorners}"
color="{bgColor}"
alpha="{bgEnabled?bgAlpha:bgAlpha*0.3}"
borderColor="{bgBorderColor}"
borderThickness="{bgBorderThickness}"
fillAlpha="{bgFillAlpha}" borderAlpha="{bgBorderAlpha}"
/>
</common:BaseContainer>
一个Canvas就是这么简单！下面，建立Image控件，这个Image支持九宫格（如果不知道九宫格，请Google之）：
View
Code
package orc.controls
{
import flash.display.AVM1Movie;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.net.URLRequest;
import orc.common.Avm1Loader;
import orc.common.BaseComponent;
import orc.common.ScaleBitmap;
[Event(name="complete",type="flash.events.Event")]
public class Image extends BaseComponent
{
public static const MODE_9GRID:String = "9grid";
private var _source:*;
public function get source():*
{
return _source;
}
[Bindable]
public function set source(value:*):void
{
_source = value;
this.onInvalidate(null);
}
[Bindable]
public var sourceScale9Grid:Rectangle;
public var mode:String = MODE_9GRID;
public function Image():void
{
super();
}
public override function draw():void
{
super.draw();
if(source)
{
if(source is BitmapData)
{
drawBitmapData(source);
}
else if(source is Bitmap)
{
drawBitmapData(Bitmap(source).bitmapData);
}
else if(source is Class)
{
var bmp:Bitmap = new source() as Bitmap;
if(bmp != null)
{
drawBitmapData(bmp.bitmapData);
}
}
else if(source is String)
{
if(_loader != null)
{
_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,loadCompleted);
}
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadCompleted);
_loader.load(new URLRequest(source));
}
}
else
{
clear();
}
}
private function loadCompleted(e:Event):void
{
clear();
var d:DisplayObject = _loader.content;
var child:DisplayObject = d;
if(d is AVM1Movie)
{
var bmpData:BitmapData = new BitmapData(d.width,d.height,true,0);
bmpData.draw(d);
child = new Bitmap(bmpData,"auto",true);
}
else if(d is Bitmap)
{
Bitmap(d).smoothing = true;
}
if(this.width > 0 && this.height > 0)
{
var xx:Number = this.width / child.width;
var yy:Number = this.height / child.height;
var scale:Number = Math.min(xx,yy);
child.scaleX = scale;
child.scaleY = scale;
}
else
{
this._width = child.width;
this._height = child.height;
this.dispatchEvent(new Event(Event.RESIZE));
}
this._bgBitmap = child;
addChild(child);
this.dispatchEvent(new Event(Event.COMPLETE));
}
private var _loader:Loader;
private var _bgBitmap:DisplayObject = null;
private function clear():void
{
if(_bgBitmap != null)
{
this.removeChild(_bgBitmap);
_bgBitmap = null;
}
}
protected function drawBitmapData(bmpData:BitmapData):void
{
clear();
if(bmpData == null) return;
if(this.width == 0 || this.height == 0)
{
this._width = bmpData.width;
this._height = bmpData.height;
this.dispatchEvent(new Event(Event.RESIZE));
}
var sb:ScaleBitmap = new ScaleBitmap(bmpData,"auto",true);
sb.scale9Grid = this.sourceScale9Grid;
sb.setSize(this.width,this.height);
_bgBitmap = sb;
this.addChild(sb);
this.dispatchEvent(new Event(Event.COMPLETE));
}
public function getBitmap():Bitmap
{
if(this._bgBitmap == null) return null;
var bmpData:BitmapData = new BitmapData(this._bgBitmap.width,this._bgBitmap.height, true, 0);
bmpData.draw(this._bgBitmap, new Matrix(this._bgBitmap.scaleX,0,0,this._bgBitmap.scaleY));
var bmp:Bitmap = new Bitmap(bmpData);
return bmp;
}
}
}
那么，我们如何让Canvas或BaseContainer中显示背景图呢？简单，在里面放个Image控件即可，比如，这是我写的ImageButton控件：
View
Code
<common:BaseContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:oc="orc.controls.*"
xmlns:common="orc.common.*"
buttonMode="true" useHandCursor="true"
mouseChildren="{enable}" mouseEnabled="{enable}"
mouseOver="{if(enable == true) alpha=0.6;}"
mouseOut="{if(enable == true) alpha=1;}"
>
<fx:Script>
<![CDATA[
[Bindable]
public var source:*;
public function get enable():Boolean
{
return img ? img.enabled : true;
}
[Bindable]
public function set enable(value:Boolean):void
{
img.enabled = value;
if(value == true) alpha = 1;
}
]]>
</fx:Script>
<oc:Image id="img" source="{source}" mouseChildren="false" mouseEnabled="false" />
</common:BaseContainer>
Label控件离不了，恩，就在网上的一份代码基础上写个Label控件：
View
Code
package orc.controls
{
import flash.display.DisplayObjectContainer;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import orc.common.BaseComponent;
import orc.common.Style;
[Event(name="resize", type="flash.events.Event")]
public class Label extends BaseComponent
{
protected var _autoSize:Boolean = false;
protected var _text:String = "";
protected var _tf:TextField;
public var fontName:String = Style.fontName;
public var fontSize:Number = Style.fontSize;
public var fontColor:uint = 0x000000;
public var align:String = "left";
public var bold:Boolean = false;
public function Label(parent:DisplayObjectContainer = null, xpos:Number = 0, ypos:Number = 0, text:String = "")
{
this.text = text;
super(parent, xpos, ypos);
}
override protected function init():void
{
super.init();
mouseEnabled = false;
mouseChildren = false;
}
override protected function addChildren():void
{
_height = 18;
_tf = new TextField();
_tf.height = _height;
_tf.selectable = false;
_tf.mouseEnabled = false;
_tf.text = _text;
addChild(_tf);
draw();
}
override public function draw():void
{
super.draw();
var f:TextFormat = new TextFormat(fontName,fontSize,fontColor);
f.align = this.align;
f.bold = this.bold;
_tf.defaultTextFormat = f;
_tf.text = _text;
if(_autoSize)
{
_tf.autoSize = TextFieldAutoSize.LEFT;
_width = _tf.width;
dispatchEvent(new Event(Event.RESIZE));
}
else
{
_tf.autoSize = TextFieldAutoSize.NONE;
_tf.width = _width;
}
_height = _tf.height = 18;
}
public function set text(t:String):void
{
_text = t;
if(_text == null) _text = "";
invalidate();
}
public function get text():String
{
return _text;
}
public function set autoSize(b:Boolean):void
{
_autoSize = b;
}
public function get autoSize():Boolean
{
return _autoSize;
}
public function get textField():TextField
{
return _tf;
}
}
}
接下来Button控件呼之欲出：
View
Code
<containers:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:common="orc.common.*"
xmlns:controls="controls.*"
xmlns:oc="orc.controls.*"
xmlns:containers="orc.containers.*"
width="120" height="24"
bgColor="{isMouseOver?mouseOverColor:defaultColor}"
bgCorner="6"
buttonMode="true" useHandCursor="true"
mouseOver="{isMouseOver = true}"
mouseOut="{isMouseOver = false}"
>
<fx:Script>
<![CDATA[
[Bindable]
public var label:String = "";
[Bindable]
public var labelHeight:Number = 20;
[Bindable]
public var defaultColor:uint = 0xCCCCCC;
[Bindable]
public var mouseOverColor:uint = 0xDDDDDD;
[Bindable]
public var isMouseOver:Boolean = false;
]]>
</fx:Script>
<oc:Label id="lbLabel" text="{label}" width="{width}" y="{0.5*(height-labelHeight)}"
mouseEnabled="false" height="{labelHeight}" fontSize="12" align="center"
/>
</containers:Canvas>
进度条Progress就太容易了：
View
Code
<?xml version="1.0" encoding="utf-8"?>
<containers:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:common="orc.common.*"
xmlns:controls="orc.controls.*"
xmlns:containers="orc.containers.*"
xmlns:shapes="orc.shapes.*"
bgBorderThickness="1" bgColor="0xFFFFFF" bgBorderColor="0x333333"
width="200" height="20"
>
<fx:Script>
<![CDATA[
[Bindable]
public var percent:Number = 0;
[Bindable]
public var fillColor:uint = 0x0000FF;
private function getWidth(val:Number):Number
{
var ww:Number = this.width - 2;
return ww * val;
}
]]>
</fx:Script>
<shapes:Rectangle x="1" y="1" color="{fillColor}" height="{height-2}" width="{getWidth(percent)}" />
</containers:Canvas>
定位？容易！有数据绑定，想让它在哪里就在哪里，如：
x="{0.5*width-borderThickness*0.5}" y="{-handleLength}"
带图标的按钮ComboButton：
View
Code
<?xml version="1.0" encoding="utf-8"?>
<containers:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:containers="orc.containers.*"
xmlns:controls="orc.controls.*"
mouseChildren="false"
bgCorner="5"
buttonMode="true" useHandCursor="true"
mouseOver="{alpha=0.9;}"
mouseOut="{alpha=1;}"
width="200" height="50"
>
<fx:Script>
<![CDATA[
[Bindable]
public var source:Class;
[Bindable]
public var label:String;
]]>
</fx:Script>
<controls:Image x="30" y="10" source="{source}" />
<controls:Label x="70" y="18"
text="{label}"
fontSize="12"
width="120"
/>
</containers:Canvas>
HSlider:
View
Code
<?xml version="1.0" encoding="utf-8"?>
<containers:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:common="orc.common.*"
xmlns:controls="controls.*"
xmlns:containers="orc.containers.*"
xmlns:shapes="orc.shapes.*"
width="264" height="22"
bgAlpha="0"
inited="onInited()"
>
<fx:Metadata>
[Event(name="drag",type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import orc.events.MoveEvent;
import orc.utils.DragHelper;
[Bindable]
public var maximum:Number = 3;
[Bindable]
public var minimum:Number = 0;
[Bindable]
public var value:Number = minimum;
private var dragHelper:DragHelper = new DragHelper();
private function get minX():Number
{
return 0;
}
private function get maxX():Number
{
return this.width - btnDrag.width + 1;
}
private function checkX(val:Number):Number
{
val = Math.max(val,minX);
val = Math.min(val,maxX);
return val;
}
private function checkValue(val:Number):Number
{
val = Math.max(val,minimum);
val = Math.min(val,maximum);
return val;
}
private function getX(val:Number, min:Number = NaN, max:Number = NaN):Number
{
val = this.checkValue(val);
return minX + (maxX - minX) * (val - minimum ) / (maximum - minimum);
}
private function onInited():void
{
dragHelper.bind(btnDrag, this);
dragHelper.addEventListener(MoveEvent.MOVING, onDrag);
}
private function onDrag(event:MoveEvent):void
{
var xx:Number = checkX(event.xOffSet/this.scaleX + btnDrag.x);
dragToX(xx);
}
private function dragToX(val:Number):void
{
this.value = convertX2Value(val);
this.dispatchEvent(new Event("drag"));
}
private function convertX2Value(x:Number):Number
{
var val:Number = minimum + (maximum - minimum) * (x - minX ) / (maxX - minX);
return checkValue(val);
}
private function onMouseStick(e:Event):void
{
var step:Number = 5;
var xx:Number = this.btnDrag.x;
if(this.btnDrag.mouseX > 0)
{
xx += step;
}
else
{
xx -= step;
}
dragToX(xx);
}
]]>
</fx:Script>
<controls:ImageButton y="1.4"
width="264" height="22"
enableMouseStick="true"
mouseStick="onMouseStick(event)"
mouseStickIntervalMiniSeconds="40"
source="@Embed(source='assets/hsliderBg.png')"
/>
<controls:ImageButton source="@Embed(source='assets/slider.png')"
id="btnDrag" x="{getX(value, minimum, maximum)}"
width="25" height="25" />
</containers:Canvas>
图像拉伸、旋转、缩放、删除的控制框控件复杂一点，400多行，代码贴时出错了，就不贴了，效果图：
当然，滚动条啥的控件就复杂一点，不想写可以就拿Flash里自带的包装一下，照样用。
然后是动画，动画也很容易，下面是让一个界面慢慢的变小的代码：
View
Code
[Bindable]
public var centerX:Number = 0;
[Bindable]
public var centerY:Number = 0;
[Bindable]
public var targetWinth:Number = 0;
[Bindable]
public var targetHeight:Number = 0;
private var _percent:Number = 0;
public function get percent():Number
{
return _percent;
}
[Bindable]
public function set percent(value:Number):void
{
if(value == 1) cvs.visible = true;
else if(cvs.visible == true) cvs.visible = false;
_percent = value;
this.width = targetWinth * value;
this.height = targetHeight * value;
this.callLater(
function():void
{
x = centerX - width * 0.5;
y = centerY - height * 0.5;
});
}
public function min():void
{
TweenLite.to(this,0.5,{percent:0});
}
看看我做的一个项目的整体效果图，这些界面大部分都是从Draw API一步步绘制的：
as3有个叫haXe的兄弟语言，haXe写的代码可以在Flash平台运行，可以在js环境运行，铺平了向html5的过渡之途。
下面，回答前面提出的四个问题：我会哪些？我学了哪些？我能做什么？做这些我相对于别人有哪些优势？
我会哪些？我学了哪些？
Flash CS系列工具会吗？不会！
Flex会吗，会一点点而已。
还就只懂几个API和数据绑定和几个Flash基本类。其实这就够了。有基本类、有几个API，有数据绑定，组合起来就是非常强大的工具，我们不需要学习多少东西，却可以非常高效率的开发很多应用，且开发的这些应用可以分发到各大平台。不需要学习多少控件，有学习的时间，就够写一个自己的了。自己写的控件没有冗余，性能高，编译后的尺寸小，且修改方便。
我能做什么？
通常的，对特效要求不是特别高的Flash App都能做，这意味着，某些桌面软件，某些Web应用，某些ios应用和某些android应用。额，Html5也算顺便能做，今年顺手用haXe做了个html5的项目。
我相对于别人有哪些优势？
那些用Flash CS开发的，开发效率低，代码可维护性差。那些用Flex开发的，代码尺寸大，程序性能差。俺这样的优势就是Flex般的开发效率和灵活性，Flash般的性能和代码尺寸，且什么都是自己写的，出了问题自己也好弄，不像Flex那样是代码迷宫。
学的少，可做的多，相对别人还有优势，这是不是就是遁去的一呢？要是按照书本学，按照别人的建议学，东西学了一大堆，能做多少还是个问题，能以什么效率做也是个问题，更可怕的是，学完了还不知道自己学习的是什么。
只学一点点，不累！剩下的，交给狗爹度娘吧。
注：本文代码只有主要代码，那些不影响阅读的代码就没贴出来，不然太长了。又由于和业务代码在一个项目里，也不方便打包放出。见谅！
作者：xiaotie , 集异璧实验室(GEBLAB)
出处：http://www.cnblogs.com/xiaotie/
若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 只学一点点：我的技术学习策略（虽然不赞同，但可以参考一下，针对不常用的技术可以这样，同时可以：寻找遁去的一，不用管别人怎么想；有学习的时间，不如自己写、自己实践，否则学完了都不知道是什么东西）
- 学习Duwamish7的MSDN说明及相关技术策略
- 精华 | 深度学习中的【五大正则化技术】与【七大优化策略】
- （学习|小结）SET协议里面的一个重要技术（策略） - 双重数字签名
- 学习Duwamish7的MSDN说明及相关技术策略
- 技术学习之迭代策略
- 我的技术投资策略：如何决定学习哪一个新技术的？
- 网络技术学习摘要
- hibernate学习8之lazy策略
- 关于Enumeration的一点点学习体会。。。
- ASP.NET MVC：多语言的三种技术处理策略
- 小白入门：大型网站技术架构负载均衡技术介绍及学习资源推荐
- Linux设备驱动程序学习（2）-调试技术
- 值得学习的品牌突围策略
- JDBC以及相关技术学习(七)----事务机制与保存点
- 跟着BOY 学习COCOS2D-X 网络篇---强联网（采用技术 BSD SOCKET+多线程技术 +protobuf）客户端实战篇
- Asp.net2.0身份验证技术学习入门---角色管理（一）
- 跟我一起学习MySQL技术内幕（第五版）：（第二章学习日记1）
- 技术转载：Jni学习四：如何编写jni方法