进入Flash MX组件时代之六 改善组件用户体验

　　6.1 设置组件图标

　　原先我们在制作完成ToolTip组件以后，Library中的组件图标是以显示，这是组件的默认样式。假若Library库中使用的组件较多，而这些组件的图标样式又都是默认样式而无区别，这样便会极容易造成误认后果，因而不利用影片的设计制作。还有一点是，每位组件开发人员都希望自己编写的组件拥有自己的“个性化因素”，别人只要看见你组件的外观就知道这组件是由你编写制作，这就是所谓的“组件品牌”，即：类似于C++ Builder或是Delphi的第三方组件开发商一样，好的组件开发商都已拥有自己得一套品牌内容了。幸运的是，FlashMX已经轻易的解决了该问题，我们只需完成简单的步骤就可将原来的组件图标样式改换成自己想替换成的自定义图标样式，也让该组件的图标个性化。

　　首先，我们回顾一下原来ToolTip的Library的内容，如下图81所示，组件图标样式无“特殊性”。

图81 默认组件图标样式的Library

　　然后我们再在Photoshop或是FireWork中绘制一个拥有自己特色的自定义图标样式。当然，它的尺寸有所限制，宽×高为24×20象素。完成绘制以后将它们导出来Gif或是Png图形格式并保存。

图82 尺寸为24×20象素的自定义图标

　　我们再返回FlashMX的Library库中，在Library中创建一个名称为“FCustomIcons”的文件夹（切记：此处名称不可另行更换改变）。

图83 在Library中创建名为FcustomIcons的文件夹

　　然后我们按下Ctrl+R将原先制作完毕的用户自定义图标文件导入Library中，将它拖

　　放至FcustomIcons文件夹目录下，然后将它的名称更换为与组件名一样的名字（我们的实例中为toolTip）。

图84 FcustomIcons文件夹中的自定义图标文件

　　现在我们已经完成了设置自定义组件图标的操作，如果现在的Library中ToolTip图标还没有马上更换成你所希望改换成的图标样式，那请你暂时将Library关闭，然后再打开就可以观看到如图84所演示的效果了。

　　6.2 利用UI界面美化参数设置

　　到此各位对组件的Parameters参数设置面板的运用应该已十分的明了了，通过对Component的Parameters面板的参数设定可以设置一些组件的系统变量。但有些组件的参数内容十分的烦多，而且参数类型也十分的烦多，因而普通的Parameters参数设置面板就会使参数设置显得十分的不方便（如图85所示，在Parameters面板中对某些参数进行设置需要滚动条拖动以后才可进行，显得十分的不易操作。而且参数设置后的样式也十分的不直观）。

图85 普通的Parameters面板

[1] [2] [3] [4] [5] [6] 下一页  

　　为了解决此类问题，FlashMX的Component支持了Parameters面板的Custom UI界面的更改操作。如图86所示，我们将原来普通的Parameters面板的参数设置更换成了Custom UI的面板，在参数设置功能相同的基础上，不仅在界面上作以了极大的美化功能，而且在参数设置的直观性上作了极大的改进。试想，在普通面板里进行布尔类型的Ture或是False进行选择显得直观性强些还是在Custom UI面板里用CheckBox进行选中或不选中来显得更为的直观？

图86 与图85参数设置相同功能的Custom UI界面

　　下面我们就将制作一个fBrowserWindow的FlashMX组件，并使该组件的Parameters面板用Custom UI样式进行参数设置与显示来阐述“利用UI界面美化参数设置”的用户体验内容。而在fBrowserWindow的制作过程中我们还将涉及到前面ToolTip制作过程中一些组件编写中未曾谈及的内容与技术。

　　fBrowserWindow组件的制作

　　依旧如前面组件制作方式一般，首先我们需要明确的是该组件需要实现的功能，即：想利用fBrowserWindow达到什么样的目的。经过提炼总结后得出此问题的答案：我们需要将组件绑定到一个按钮，可以使此按钮按下以后就弹出一个指定地址的窗口，而此窗口可以由我们进行自定义，就如一般的javascript的openwindow的弹出窗口一般，我们可以根据自己的需要设置是否有工具栏、状态栏、地址栏，窗口的宽与高的大小等等内容，还可以设置在指定的时间内窗口自行关闭等。

　　如ToolTip组件的制作方式雷同，制作fBrowserWindow的第一步我们创建了一个MC，并定义该MC的参数设置的内容，如下图87所示：

[1] [2] [3] [4]  下一页