代码改变世界

创建Flash CS3组件(三) 规划组件

2008-10-28 20:19  宝宝合凤凰  阅读(311)  评论(0编辑  收藏  举报

创建Flash CS3组件(三) 规划组件

上一篇 / 下一篇  2008-08-07 10:15:27 / 个人分类:组件

创建Flash CS3组件(三) 规划组件
从现在开始,让我们真正创建一个组件,来深入了解Flash CS3的组件体系.
创建什么组件呢?就用即简单,又实用,而CS3还偏偏没有的Accordion组件作为例子.

1.规划组件功能
我们要创建一个简单而实用的组件,先要规划它的功能.
参考v2版的组件,我们的Accordion也应当有标题按钮,自定义图标,以及不同子项的载入,切换功能.但是不同的是,在组件中加入切换动画有些难,不适合拿来当示例.于是,组件的功能就确定了
(1)创建并管理标题按钮,用户可以单击这些按钮在 accordion 的子项之间浏览.
(2)呈纵向布局,其标题按钮横跨整个组件.
(3)一个子项与一个标题关联,而每个标题均从属于 accordion,而不从属于子项.
(4)当用户单击某个标题时,关联的子项即会显示在该标题下方,过渡到新的子项的过程不使用过渡动画.
(5)不同的标题按钮可以有不同的图标,也可以没有图标.
(6)当带有子项的 accordion 接受焦点时,其标题的外观将发生变化以显示焦点(使用selectedUp外观).
(7)不带子项的 Accordion 不会接受焦点.

2.确定组件事件
组件与AS交互的很重要的一点是事件,组件只有广播恰当的事件才能方便使用者使用.
如何确定组件事件?
首先,要根据组件的功能,确定要广播的事件.对于Accordion组件,肯定要广播change事件,还可能广播标题按钮的click事件,rollOver事件,rollOut事件.
接着根据组件的特点,选择恰当的事件类.Accordion组件的事件最好包括一个index来标明发生更改的标题按钮,所以我们选择ListEvent类,对于change事件,可以简单的选择Event类.当然,如果在fl.events包和flash.events包中都找不到合适的类,那么就可以自己写一个.
现确定组件事件如下
Event.CHANGE: 显示的子项发生了改变时调度.
ListEvent.ITEM_CLICK:用户在标题栏按钮上单击鼠标以后调度.
ListEvent.ITEM_DOUBLE_CLICK:用户在标题栏按钮上快速连续单击鼠标两次以后调度.
ListEvent.ITEM_ROLL_OUT:用户将鼠标指针从标题栏按钮上移开以后调度.
ListEvent.ITEM_ROLL_OVER:用户在标题栏按钮上悬停鼠标指针时调度.

3.确定组件样式
(1)组件都要有什么外观?
组件的外观最好全一些,又不能太多.比如一个按钮的外观,最好根据不同的状态分别绘制(Up,Over,Down,SelectedUp,SelectedOver,SelectedDown,如果必要的话再加上DisabledUp,SelectedDisableUp),这样会方便使用者创建自己的样式.但是,外观不要太多,至少不要让使用者被复杂的外观设置弄晕了.
(2)组件要有什么其它样式?
除了外观,组件还把一些不常用的设置放到样式中去设置,比如textFormat,还有列表组件的cellRenderer,这些设置在平常的应用中基本不会用到,所以把它们放到样式中比为此而写的方法要好得多.
最后,我们确定组件要用的所有样式
headerHeight:标题按钮的高度,默认值为20.
skin:组件的背景,默认值为"Accordion_skin".
upSkin:标题按钮弹起时的外观,默认值为"Accordion_upSkin".
overSkin:标题按钮鼠标经过时的外观,默认值为"Accordion_overSkin".
downSkin:标题按钮按下时的外观,默认值为"Accordion_downSkin".
selectedSkin:标题按钮被选时弹起时的外观,默认值为"Accordion_selectedSkin".
contentPadding:载入的子项与边框间的距离,默认值为2.
textPadding:标题栏按钮边框与图标,图标与文字间的内容,默认值为2.
注意,这里并没有分SelectedUp,SelectedOver,SelectedDown,因为我们完全不需要它们.
在这里,提醒一下外观的命名:最好以组件名开头,然后在"_"后写上外观名,这样可以最大程度上防止产生命名冲突.

4.完成了的外观
皮肤:

库:

组件定义:(记得更改图标)

组件下载