Flash CS3组件开发教程

Submitted by kinglong on 2007-6-18 13:10:18
Flash CS3组件开发教程

【教程说明】:应云开等朋友的要求,我今天把组件开发过程整理一下,写成这篇教程。通过此篇教程你可以大致了解Flash组件开发整个过程,希望对那些想自己开发Flash组件的朋友有所帮助。我这次主要开发Flash代码组件,甚至其他Flash组件,你可以自行研究或和我一起讨论。
【前提条件】:
    1、安装了Flash CS3软件;
    2、安装了 Adobe Extension Manager 1.8扩展管理器,如果没有请先到这里下载: http://www.adobe.com/cn/exchange/em_download/
【开发教程】:
    1、首先准备一个18x18的png图片,用来做Flash组件的图标。(我会在下面打包文件中会提供一个png图片的)
    2、写一个StringUtilComponent组件类,我的组件都没有去继承系统组件类(UIComponent),而是直接继承Sprite类。
    
  1. package com.klstudio.components {   
  2.        
  3.     import flash.display.*;   
  4.        
  5.     import com.klstudio.util.StringUtil;   
  6.        
  7.     //命名空间;   
  8.     use namespace klstudio_internal;   
  9.        
  10.     //设置组件图标;   
  11.     [IconFile("StringUtilIcon.png")]   
  12.        
  13.     public class StringUtilComponent extends Sprite{   
  14.         //定义组件显示框;   
  15.         //组件里已有的显示元素必须用命名空间作开头;   
  16.         klstudio_internal var boundingBox_mc:MovieClip;   
  17.         //定义LRC解析器;   
  18.         private var util:StringUtil;   
  19.         public function StringUtilComponent(){             
  20.             //移除组件显示框;   
  21.             boundingBox_mc.visible = false;   
  22.             addChild(boundingBox_mc);   
  23.             boundingBox_mc = null;             
  24.         }          
  25.     }      
  26. }   

    这用组件用到的StringUtil类,我之前已经提供过的“ [AS3]StringUtil类”。这里要注意一下,组件内所包含的显示元素一定要用命名空间来做前缀(就是上面“use namespace klstudio_internal;”代码),下面就命名空间定义变量。如果不加的话,就无法直接对boundingBox_mc显示元素操作(这一点和原来Flash组件开发不同的地方,原来是可以直接使用的),否则编译时就会报错。
    
  1. /**  
  2. * ...  
  3. * @author Kinglong  
  4. * @version 0.1  
  5. */  
  6.   
  7. package com.klstudio.components {   
  8.   
  9.     public namespace klstudio_internal = "http://www.klstudio.com/";   
  10.        
  11. }  

    
    3、建立一个StringUtil.fla文件,类型当然是选择“Flash File(ActionScript3)”。
    4、建立一个MovieClip元素,命名为“StringUtil”;然后按照下图所示设置Class路径。
    
    5、再建立一个新的MovieClip元素,命名为“boundingBox_mc”,用于来做组件显示框。
    
    6、然后将boundingBox_mc放到名叫“StringUtil”的MovieClip元素里,同时按下图所示将名字已经设置成“boundingBox_mc”。
    
    7、接下来开始定义组件了,设置Class类路径、提示信息等选项。再点击组件图标选择之前png图片。
    
    
    8、如果图标不能像下图所示的话,请按第4步重新确认一下就可以了。
    
    9、然后就是把这个StringUtil组件打包成SWC文件(其实就是一个zip压缩文件格式)。
    
    10、到第9步组件就算做成功了,但要发布给别人用的话,就可以把swc文件打包成mxp文件了,而打包之前首先要配置StringUtil.mxi文件(这个文件就是xml文件格式),内容如下:
    
  1. <macromedia-extension  
  2. name="StringUtil"  
  3. version="1.0"  
  4. type="Flash component"> <!-- Describe the author -->  
  5.   
  6. <author name="Kinglong" />  
  7.   
  8. <!-- List the required/compatible products -->  
  9.   
  10. <products>  
  11. <product name="Flash" version="9" primary="true" />    
  12. </products>    
  13.   
  14. <!-- Describe the extension -->  
  15.   
  16. <description>  
  17. <![CDATA[  
  18. StringUtil类<br>  
  19. 有关String工具类。  
  20. ]]>  
  21. </description>  
  22.   
  23. <!-- Describe where the extension shows in the UI of the product -->  
  24.   
  25. <ui-access>  
  26. <![CDATA[  
  27. This StringUtil Component is accessed by choosing Window > Components > StringUtil.  
  28. ]]>  
  29. </ui-access>  
  30.   
  31. <!-- Describe the files that comprise the extension -->  
  32.   
  33. <files>  
  34. <file name="StringUtil.swc" destination="$flash/Components" />  
  35. </files>  
  36.   
  37. </macromedia-extension>    

   官方提供有关mxi文件格式说明: mxi_file_format.pdf
    11、如果你已经安装了 Adobe Extension Manager 1.8扩展管理器的话,你可以直接双击StringUtil.mxi文件来生成StringUtil.mxp文件。或者你先打开 Adobe Extension Manager 1.8扩展管理器选择“文件”  - “将扩展打包...”,选择StringUtil.mxi文件,然后生成StringUtil.mxp了,到这里就贺喜你了,你的Flash CS3组件就开发完成了!

【打包下载】http://www.klstudio.com/download/stringutil.rar

 

Trackback:

TrackBack URL for this entry:
http://www.klstudio.com/cmd.asp?act=tb&id=129


Comments:

#1880 On 2007-6-19 11:12:03 breeze (e) said,

我按照以上的步骤做了个demo,但是得到以下错误信息:
ReferenceError: Error #1056: 无法为 com.aacc.components.LoginForm 创建属性 login_mc。
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
at com.webex.components::LoginForm$iinit()
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
还是无法访问可视化的组件。不知何故?

#1881 On 2007-6-19 12:31:42 kinglong (e) said,

你设置了命名空间了没?

#1882 On 2007-6-19 12:46:38 breeze (e) said,

name space:
package com.webex.components {
public namespace webex_internal = "http://www.webex.com";
}

AS class:
package com.webex.components {
import flash.display.*;
import flash.events.*;
import fl.controls.*;

use namespace webex_internal;

public class LoginForm extends Sprite {

webex_internal var ok_btn:Button;

public function LoginForm() {
ok_btn.addEventListener(MouseEvent.CLICK, onOK);
}

private function onOK(e:MouseEvent):void {
trace("from LoginForm: OK");
}

public override function toString():String {
var description:String = "LoginForm.class";
return description;
}
}
}
我的代码就是这样的,namespace设置过了。

#1883 On 2007-6-19 12:53:07 breeze (e) said,

我直接在下载的工程里改,是可以的,是不是要什么特别的设置?

#1885 On 2007-6-19 17:30:40 kinglong (e) said,

login_mc这个,在那里呢!

#1888 On 2007-6-20 8:45:26 breeze (e) said,

login_mc我后来去掉了,放了一个button在新建的MovieClip上,也出现Error #1056。不知为何?

#1892 On 2007-6-20 23:16:09 chl2006 (e) said,

kinglong:您好!我要把一个flash8.0的文件改为flash9.0,flash8.0中的功能是选择下拉菜单中的一个选项,可以把库中的一个影片剪辑载入到场景中,由于我不懂as3.0 ,现在又没有精力去学习,不知能不能麻烦您帮忙解决一下?

#1894 On 2007-6-21 10:43:46 kinglong (e) said,

to breeze:
你去掉login_mc或那个新建的MovieClip后会不会报错呢!
如果不报错的话,就是你添加东西不对!

to chl2006:
不懂不是理由,只是一种借口
到于如果把库的影片放到场景中,AS3做法很简单(比如说你的库里的影片的linkname为test)
var t1:test = new test();
t1.name = "t1";
t1.x = 0;
t1.y = 0;
addChild(t1);
上面代码就是把库中的一个影片剪辑载入到场景中!是不是很简单!
你看一看帮助文件就知道了,估计就是懒吧!

#1895 On 2007-6-21 12:24:39 chl2006 (e) said,

感谢kinglong的帮助和指教,“不懂不是理由,只是一种借口”,在各种各样的借口之下,我们的依赖会变得越来越强,而依赖又使我们的能力变得越来越弱,甚至丧失。这可能就是我flash水平提不高的原因吧。

#1896 On 2007-6-21 13:26:39 kinglong (e) said,

其实我之前也不写AS3代码的,自己也一直停留在AS2那个时期。但这几天都是通过看Flash帮助文件来学习AS3新规则,写了一些内容。知道我的朋友,都知道我的英文也不好,但我仍坚持从帮助文件中学习,其实国外软件的帮助文件都写得很好的,flash帮助文件也是这样的,它会每个说明下面提供一个调用实例。我个人认为看帮助文件比买书强多了(我是从来都没有买与flash相关图书)。
我的老师就是帮助文件,我的同学就是Google

#1898 On 2007-6-22 10:10:00 breeze (e) said,

不是符号不对,在AS class中用public声明就没有问题,我现在的做法就是new一个movieclip,然后把控件放到这个新建的movieclip上,在AS class声明这个movieclip为public,就可以访问了。
很感谢你的这篇文章,给我很多启发。3x!

#2198 On 2007-8-10 20:56:54 youxiazhu (e) said,

您订定义的组件类里没有构造函数,这样的组件怎么用new创建一个对象呢?
还有里面唯一的一个方法里,是在干什么呢,看不懂。
还有,这个组件没有参数吗,如何使用呢?

#2201 On 2007-8-11 9:02:14 kinglong (e) said,

对于你的第一个问题和第二个问题:
我这里是一个笔误,我现在已经改正过来了!
对于你的第三个问题:
因为我这个组件就是一个代码组件,无需组件参数!只要把它放到库里就可以直接调用里面提供的StringUtil类的方法了!

#2202 On 2007-8-11 11:15:47 youxiazhu (e) said,

我试着做了一个简单的,效果倒是有了,可又多了几个疑问:
1 关于命名空间:本来对这个就不熟,为什么要访问已经在元件定义好的可视对象需要用自定义的命名空间呢?还有,如果是普通的元件,其中静态设计了一个文本t,在类中可直接使用实例名t访问它,可是定义组件时还需要在类的属性中定义一次,并加名称空间,道理是什么?
2 只能做个swc类型的组件吗?Components文件夹中fla文件里都是组件,怎么能做这种类型的组件呢?
3 怎么才能使做好的组件在使用时可以在“参数”面板中出现一些参数呢?制作时我在“组件定义”面板中点+号添加了几个,但实际应用时并没有显示出来。
4 还有您用的那个[IconFile("*.png")]是什么用法?我怎么没有找到IconFile这个关键子呢?类似的关键字在哪里定义的?

问的可能有些多,让您受累了!

#2330 On 2007-9-4 15:54:32 aaa (e) said,

2 只能做个swc类型的组件吗?Components文件夹中fla文件里都是组件,怎么能做这种类型的组件呢?

#2361 On 2007-9-9 18:50:06 HBrO (e) said,

KingLong,你漏了说一个发布设置啊