UIPig——有关UI设计，插画，动画的个人站点

Data List的应用——Flash Catalyst入门教程

June 9th, 2009 at 11:22pm hanyan

在这个教程中，我将为大家讲述Flash Catalyst组件Data List的应用。首先在Photoshop中设计好所要呈现内容的界面，这里我构思了一个RSS Widget，主要是帮助我们实时地订阅信息，无论是twitter上的即时信息，还是facebook上的朋友动态。需要注意的，在设计时要把图层规划好（这也是交互设计的一要点），方便后来导入到Flash Catalyst中操作。在Photoshop中的设计稿好下图：

Layers in Photoshop

接着我们把RSS Widget PSD文件导入到Flash Catalyst中，其步骤如下图：

导入到Flash Catalyst中

导入选项

上图是有关导入PSD文件的选项，我们可以在左边改变Artboard的大小和背景颜色，在高级选项中可以选择图层进行导入，非常好的自定义操作（符合交互设计中允许用户自定义原则），点击OK键，完成导入。

我们可以看到在Flash Catalyst中图层效果的变化，在Photoshop中对图层的混合选项进行了设置（例如描边、斜面和浮调等），导入到Flash Catalyst后，Flash Catalyst对图层效果进行了分离，单独分为一个图层，下图是导入到Flash Catalyst中的的图层：

Layers in Flash Catalyst

选择如下图所示的几个图标，如下图所示，然后把它们删除，虽然删除了它们，但它们还会保留在Library中。这步骤是为了以后在Data List中替换图标。

RSS Windows

选择所有图形，把其转化为Data List，具体操作方法如下图所示：

seclect all

转化为data list

双击图形，进行编辑状态，选把右边的下拉条，把其转化为Vertical scrollbar（右键单击），操作方法如下图所示：

转化为滚动条

选择右上方（短的矩形）的滚动条，进行如下图所示的操作：

选择更长的矩形（滚动条的轨迹），进行如下图所示的操作：

选择RSS图标和相对应的文件，进行如下图所示的操作（勾选Repeated Item）：

然后我们双击进入其子页面进行编辑，到Design-Time-Data选项中进行相应的操作，我们可以在此对图标进行替换，文件进行修改，还可以增加列数。只需点击相应的图标就到弹出一个窗口，我们就可以选择相应的图标进行替换。如下图所示：

接着我们可以用同样的方法把Search转化为Text Input。
最后按ctrt+Enter进行测试，保存文件，最终效果如下图：

源文件下载地址：
http://drop.io/uf8kstx6015

http://cid-5dbd5ed5b5f62f82.skydrive.live.com/self.aspx/.Public/RSSwidget.rar

Tags: UCD, ui design, 交互设计, 用户体验
原文链接：Data List的应用——Flash Catalyst入门教程，转载请留下本文链接！

Entry Filed under: UI design, 用户体验&UCD