进入flash mx组件时代之六 改善组件用户体验

anchen

登录/注册后可看大图

　　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面板 　　为了解决此类问题，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所示：

登录/注册后可看大图

图87 fbrowserwindow(mc)的参数设置 　　我们再查看一下fbrowserwindow(mc)的内容，可以发现它的场景内容与tooltip的场景内容也是相似，只包含了一个action层和一个fbrowserwindowicon层（图标显示层），如下图88所示：

登录/注册后可看大图

图88 fbrowserwindow的场景内容 　　不同于tooltip组件，在该fbrowserwindow组件中我们为创建的类添加了属性、方法等内容，这使得我们的组件拥有更强的可操作性。如果大家回顾tooltip组件的运用方式或许可以发现tooltip只能在parameters参数面板中设置参数。但在fbrowserwindow中由于为fbrowserwindowclass添加了属性与方法，我们就可以在flash的action面板中用代码操作的方式来设置相应的参数使之fbrowserwindow组件生效了。 　　例如：我们在parameters面板中设置了toolbar、status、centered为true，而将url设置为http://www.macromedia.com，width与height设置为300和400，以此来进行新窗口弹开。 　　以上的参数设置状况现在就可以在action通过输入如下代码实现同样效果： //----------------------------------------------------------------------------- //此处的fbrowserwindow为fbrowserwindow组件在场景中的实体名 //----------------------------------------------------------------------------- with (fbrowserwindow) { centered = true; status = true; toolbar = true; width = 300; height = 400; url = "http://www.5dmedia.com"; } 　　fbrowserwindow组件ui参数设置界面的制作 　　完成了组件的编写需要继续进行的就是custom ui的制作，而这要求我们首先得另行再创建一个新文件，我们将该文件保存为ui.fla。 　　custom ui的场景大小需设置为宽为406高为72象素，这是由于parameters面板的显示大小只能容纳如此面积的大小，我们在ui场景中设置了一些文件框及一些复选框，如下图89所示：

登录/注册后可看大图

图89 ui的场景内容 　　这将是关键的一步，我们将设置场景中的相应文本框的属性，而这些属性将会让我们明白ui的运行机制。

登录/注册后可看大图

图90 curl文本框属性 　　由于我们将会在parameters面板中输入参数内容，因而我们将文本框的类型设置为input text，并将var设置为xch.curl、xch.cheight、xch.cwidth等内容，如图90所示。值得注意的是这里我们必须加上xch这个名称，其实xch相当于“exchange”的意思，即ui界面中的参数与主文件中的组件进行一个参数传递，而xch的功能就是保存当前组件参数的对象。恰恰因为如此，我们需在ui文件中创建一个新层xch，同时再创建一个新的内容为空的mc，将它拖放至xch层，并将此mc的实体名命名为xch，如图89所示。 　　为了确保数据输入的正确性，我们在设置width、height等数字类型的文本内容时我们可以将character中的字符类型范围设置成numerals(0-9)，这样我们在该类文本框中只能输入0-9之间的数字了。 　　在此还需注意的一点是文本框变量名的设定，我们需要强调的是，此处的文本框变量并非随意拟定，请大家回顾一下“图87 fbrowserwindow(mc)的参数设置”的内容，那里我们为fbrowserwindow组件设置了许多的变量，而我们得注意的是，在此我们设置的文本框变量名应当与前面fbrowserwindow组件中的variable对应起来，这样才能做到ui的变量与fbrowserwindow中的变量等同起来。 　　相似的，由于checkbox没有var的参数设置内容，因而我们将场景中checkbox的实体名设置为相应的variable的名称，如ccentered、cfullscreen等，然后在各个checkbox的change handler参数设置中设置为getvalues（此处的getvalue为我们自定义的函数）。 //----------------------------------------------------------------------------- //利用getvalues函数来获取场景中checkbox的value值 //即：场景中的checkbox哪些为true哪里为false //----------------------------------------------------------------------------- fscommand("allowscale", "false"); function getvalues(sender) { xch[sender._name] = sender.getvalue(); } //----------------------------------------------------------------------------- //利用onenterframe事件来保存ui参数值的设置 //即：每次组件参数设置后如进行再设置需保存前次组件参数设置的内容 //----------------------------------------------------------------------------- function onenterframe() { for (i in this) { this.setvalue(xch); } delete this.onenterframe; } 　　在完成上述内容的操作后我们将ui.fla发布成影片格式，然后再次打开fbrowserwindow进行操作。 　　我们右键点击fbrowserwindow组件，再次打开component definition面板，在parameters项目内容下面我们会看到custom ui参数设置（如图91所示），我们当点set按钮将会调出custom ui选择面板，如图92所示。

登录/注册后可看大图

图91 custom ui参数设置

登录/注册后可看大图

图92 custom ui参数选择面板 　　为了以后的操作方便，我们将type类型选择为custom ui with .swf file embedded in类型（即ui面板植入该组件中），而将display选择为display in property inspector，然后我们按下browser选择我们刚才制作的ui.swf影片，至此我们就完成了组件ui参数面板界面的设置工作。 　　为了检验我们的成果，我们将fbrowserwindow组件拖至场景的某一个按钮上，然后点击选中该组件，此时按下ctrl+f3调出参数设置面板我们可以发现原来的parameters的面板已经被替换成我们刚才制作的ui界面了，如图93所示。

登录/注册后可看大图

图93 fbrowserwindow的ui界面 　　到此刻我们已经基本学会了ui参数面板的制作与运用了，但是由于在此实例中我们只运用了text与checkbox，因而还有许多功能未曾涉及，例子radiobox等，所以我们必须仔细理解ui的运行机制，清楚ui影片与组件之间的参数是利用xch来保存与传递的，这一点的理解非常重要。 　　6.3利用livepreview迅速查看组件效果 　　在我们完成tooltip与fbrowserwindow组件后也许会意识到一个不引人注意的问题，这两个组件均为隐式组件，不同与checkbox、listbox或是scroll等组件一般，它们在影片运行期在场景中是不显示的。大家对它们化码中初始化操作里的_visiable或许记忆犹新，那么显式的组件又该如果制作呢？而显式组件与livepreview又有何对应关系呢？我们带着这些问题，带着我们的思考，带着疑问来完成本节的内容，相信在你阅读完该部分内容以后这些难题都将会迎刃而解了。 　　对于显式组件的应用我们在flashmx内置组件部分应当说介绍的十分详实了，而大家在使用那些组件的时候是否曾有所感觉：在完成对组件的参数设置以后，组件无法立即显示出参数更改后的状态，而只能通过ctrl+enter发布影片进行效果查看，这不仅为我们影片制作增添了许多手续，而且还随之带来了许多时间上的浪费。于是我们产生了如此的想法：是否有一种途径能够让我们在对组件完成参数设置以后，该组件在场景中会立即产生反映而将组件的外观等内容马上显示为影片测试时的效果状态。万幸的是，该问题的答案是肯定的，组件的livepreview为我们提供了此项功能。下面我们就带领大家对于这里提及的几个问题一同继续前往flashmx组件的天堂，通过制作一款新的显式组件axisgrid来分析显式组件与livepreview的结合运用的功能。 　　axisgrid组件的制作 　　相信大家对于axisgrid这个词的概念还未曾了解，对于axisgrid组件的功能更是莫提。为了不至于让大家产生莫名其妙的感觉我们将axisgrid组件欲实现的目标作以简要描述：我们都清楚在flashmx中绘制网格线是件十分麻烦的事情，axisgrid组件就是为了解决该问题而编写制作的。我们只需将axisgrid组件拖放至场景中，设置组件的相应参数，即可使组件在影片中显示相应行与列的网格表格。 　　如tooltip与fbrowserwindow组件的制作过程一般，我们先在影片中创建一个movieclip，并定义它的component definition，如下图94所示：

登录/注册后可看大图

图94 axisgrid的component definition 　　在此我们为axisgrid组件设置了类似于坐标轴颜色、网络线颜色、网格宽度、网格高度等变量，这些变量中包括了前面我们未曾用过的color类型。 　　然后我们又为该组件的linkage设置为axisgrid。 　　显然上述几个步骤应该是组件编写的必要操作了，希望大家能够经过这里反复的阐述培养出自己良好的组件编写习惯。 　　接下来的操作是为了让我们在组件应用时能够有一个显式的界面外观，我们又创建了一个名为boundingbox的movieclip，它包括了一个大小为200×200象素的正方形色块，如下图95所示，它将为该组件起到网格边界判定的作用。

登录/注册后可看大图

图95 boundingbox的内容 　　我们将该movieclip拖放至axisgrid中，并设置该mc场景中的实体名称也为boundingbox。 　　然后在axisgrid中再新建一层class层，用以放置我们编写的代码内容。 　　由于axisgrid组件的代码编写部分的方式与fbrowserwindow基本无异，并且其中的代码内容亦无太复杂难懂之处，因而我们不作太多分析。需要注意的一点是，在redraw函数中我们通过with(this)来引用对象进行操作，而此对象就是组件其本身。介于组件的实物内容中包含了一个boundingbox的对象，因而该对象即成为了网格绘制的边界线的起终点了。 　　在完成了该组件以后，我们想在场景中运用该组件，并且渴望达到在场景中更改参数即可更改组件显示样式的效果，那么我们即需要来继续下面这些有关liveprevie制作与应用的操作步骤了。 　　axisgrid组件livepreview界面的制作 　　首先我们将axisgrid.fla文件另存为axisgrid_lp.fla，然后我们将场景大小设置为200×200象素大小。 　　接下来我们将刚才制作的axisgrid组件从library中拖放至场景中，由于原先组件的大小也应为200×200，因而组件在场景中的位置应该与场景大小一致，如下图96所示。

登录/注册后可看大图

图96 axisgrid的场景内容 　　然后我们新建一层actionscript层，用以输入代码以便进行操作，其actionscript层代码内容如下： //更新参数事件 function onupdate() { axisgrid.axiscolor = xch.axiscolor; axisgrid.linecolor = xch.linecolor; axisgrid.cellw = xch.cellw; axisgrid.cellh = xch.cellh; axisgrid.xmin = xch.xmin; axisgrid.xmax = xch.xmax; axisgrid.ymin = xch.ymin; axisgrid.ymax = xch.ymax; axisgrid.redraw(); } 　　特别注意：如ui界面制作中一样，在livepreview中我们仍需要xch（exchange）来收集参数设置中传递过来的变量，以便通过传递过来的参数对组件进行应用与更新。而提到更新，livepreview中又提供了onload（组件放置到场景中时执行的事件句柄）、onupdate（组件参数更新后所执行的事件句柄）来进行相应操作。 　　上述代码通过xch传递参数变量，再利用onupdate对组件更新后作以相应的操作，最终完成livepreview的制作。 　　现在我们就将axisgrid_lp.fla发布成影片，等待我们返回组件中进行再设定。 　　现在我们应该做的就是返回axisgrid.fla内继续我们尚未完全完工的axisgrid组件的livepreview的设定。 　　依旧打开的是组件的component definition参数设置面板，大家应该注意到在custom ui设定的内容下面还有一项live的设置项，如下图97所示：

登录/注册后可看大图

图97 axisgrid的component definition中live的设置项 　　我们点击set按钮弹出参数设置对话框，在选项live preview with .swf file embedded被选中的情况下我们再选择刚才制作完成的axisgrid_lp.swf，那么现在我们就将可以感受到livepreview的魅力所在了。 　　现在我们只需要场景中新建一层，然后将axisgrid从library中拖放至场景，然后按下ctrl+f3调出属性设置的parameters面板进行网格设置，当我们进行参数设置以后场景中立即会更新组件内容而显示为符合相应参数内容的界面样式，如图98所示，应当说它与组件发布成影片后的显示样式无太大差异，对比图99所示。

登录/注册后可看大图

图98 即设即显的axisgrid组件在场景中的显示状态（livepreview应用）

登录/注册后可看大图

图99 axisgrid组件应用发布成影片后样式 　　到这，关于组件livepreview的内容也差不多介绍完毕，而再次起到关键作用的仍有xch的影响，当然还不应该忘记onupdate的更新作用哦。相信大家都已经急不可耐的想尝试编写自己的livepreview的新组件了，现在可以展开你的想象力，动起你的手指，进行我们的全新组件新进程了。 　　icon的设置、custom ui界面的制作以及livepreview组件的深入，上面的几部分内容其实都还是独立的技术内容，将它们分开叙述并不是说它们在组件制作中只能存在其一，我们只是想通过各部分的剖析让诸位能够更完美的理解各部分的内容。恰恰相反的是我们以后组件编写过程中应当将这些部分完善的结合起来，将它们撮合成一个有机的整体，让我们的组件拥有最完美的用户体验感觉。当然，这部分的内容有待于各位亲自去体验其中的乐趣了。

登录/注册后可看大图