FLASH自定义组件

由于工作需要，最近开始学习FLASH自定义组件的开发。在开发过程中遇了了很多问题，通过搜索发现相关的资料并不多，苦苦摸索了一段时间后终于有了一些眉目。由于本人水平有限，不当之处还请大虾门指正。学习过程中参考了一些国外的资料，非常感谢这些国外的老师，另外我的英文水平确实需要恶补了，呵呵。

 

参考网站地址：

http://hi.baidu.com/design9/blog/item/8948948f3ff8c4e0f11f3635.html

http://f9foractions.tumblr.com/post/903211215/inspectable-parameters-not-showing-up-on-custom

 

参数的定义：

使用 [Inspectable] 元数据标签定义参数

 

		[Inspectable (name = "color", variable = "color", type = "Color", defaultValue = "FF0000")]
		public function get color():int { 
			return _color; 
		}
		public function set color(value:int):void {
			_color = value;
			draw();
		}
		
		[Inspectable (name = "radius", variable = "radius", type = "Number", defaultValue = "10")]
		public function get radius():Number { 
			return _radius; 
		}
		public function set radius(value:Number):void {
			_radius = value;
			draw();
		}

 

 

 需要注意的地方：

1：每个参数的name和variable必须相同。

2：参数必须是按字母顺序排列。

3：参数必须设置设置默认值。

4：为参数设置getter和setter方法。

5：颜色默认值是一个十六进制字符串表示，没有“＃”或“0X”。

6：CS5特别需要注意一个地方， [Inspectable] 和对应参数的set/get必须放在一起，否则组件使用时无法设置组件参数。

也许这些并不全是一定需要遵守的规则，不过注意这几点有利于自定义用户界面组件检查和实时预览组件。

 

setSize()方法：

用于设置组件的尺寸大小，FLASH会自动调用些方法实现实时预览，所以它必须是public的。draw用于重绘及调整组件的大小。参数的set方法执行draw()，方便预览。

 

public function setSize(w:Number, h:Number):void {
	_width = w;
	_height = h;
	draw();
}

private function draw():void { 
	_background.graphics.clear();
	_background.graphics.beginFill(_color, 1);
	_background.graphics.drawRoundRect(0, 0, _width, _height, _radius, _radius);
	_background.graphics.endFill(); 
	
	_tf.text = Math.floor(_width) + " x " + Math.floor(_height);
	_tf.x = (_width - _tf.width) * 0.5;
	_tf.y = (_height - _tf.height) * 0.5 + 2; 
} 

 

重写width和height的set/get方法：

 

		override public function get width():Number { return _width; }
		override public function set width(value:Number):void {
			_width = value;
			draw();
		}
		
		override public function get height():Number { return _height; }
		override public function set height(value:Number):void {
			_height = value;
			draw();
		}

必须重写width和height的set/get方法，否则当FLASH调用set/get改变组件尺寸只会拉伸或者压扁，而不是重绘组件。

 

编译和测试：

1：在库中右键点击需要编译为组件的元件，选择“属性”并绑定类文件。

2：在库中右键点击需要编译为组件的元件，选择“组件定义”并勾选“参数被锁定在实例中”和“显示在组件面板中”两个选项。

3：在库中右键点击需要编译为组件的元件，选择“导出SWC文件”并保存。

4：可能需要在“发布设置”中设置SWC文件的库路径，如果你保存的不是标准组件的路径。

5：打开组件面板并点击右上角“重新加载组件”。

这时候应该可以看见你新编译的组件了。把新的组件拖进舞台，并设置组件的参数，即可使用。

 

补充：

1：组件中包含的元件需要重新定义，即使该元件已经包含在组件中并命名。如：组件中包含名为：avatar的TextField。在类代码中仍然需要声明：public var avatar:TextField;

2：代码的执行顺序：构造函数-组件参数set(以参数字母排序)。如果在构造函数使用组件参数，则会提示错误。