带进度指示和移动效果的Flex4 精灵组件

本文来自：http://anirudhs.chaosnet.org/blog/2009.12.10.html

我喜欢Insuricorp Demo。里面的精灵wizard有两个明显的特点。一个巧妙的动态进度指示，不仅显示了现在的步骤，还说明了“你在进步”。另外一点就是，在每个步骤之间的有序的移动效果，这样子看上去，下一个步骤都是从右边“顺滑”过来的。我创建了一个 Flex 4组件，就能够执行这个操作。使用方法和我们旧版的 Flex 3视图堆栈类似，太棒了！

精灵组件

只有DEMO（启动查看源代码）可充分利用它的功能。点击下面的图，试下吧：

你还可以下载FXP。源在MPL1.1下被授权。

尝试快速点击下一个和前一个步骤。移动效果均衡发挥作用，这样产生一种动感。

使用

首先，声明步骤名称：

[Bindable] private var wizardViews:ArrayCollection = new ArrayCollection( [new WizardStepVO({name:"PICK PLAYLIST", state: "selected"}), new WizardStepVO({name: "SOURCE", state: "normal"}), new WizardStepVO({name: "DESTINATION", state: "normal"}) ]);

现在，声明精灵wizard的图元为WizardPanel tag的子标签：

<wizard:WizardPanel id="wizard" change="trace('step: ' + wizard.currentStepTitle)" wizardViews="{wizardViews}"> <steps:PickPlaylist width="100%" top="40" bottom="30" /> <steps:PickSource width="100%" top="40" bottom="30" /> <steps:PickDestination width="100%" top="40" bottom="30" /> <steps:Finish width="100%" top="40" bottom="34" /> </wizard:WizardPanel>

与视图堆栈的唯一区别就是：GraphicElements没有一个“标签“属性，你不得不通过一个wizardViews属性提供步骤名称。在内部，传递到组件的子标签被添加到GROUP组下，其可视性根据现有步骤确定。

效果

按“下一个”，就进入了下一个步骤，而现有步骤退出。然后，进度指示符增长，覆盖新的步骤，而指示符的颜色从白色变成蓝色。我为此使用新的 Flex 4 动态色彩效果。

移动效果均衡发挥作用，这样多个下一步/前一步不会造成突然的改变。

结论：

这是我第一个 Flex  4组件。我都忘记它了，直到我清理Eclipse空间的时候才记起来。如果你们觉得有所帮助， 请 告诉我。

【国内下载】Flex 3 Builder :http://g.csdn.net/5120749
【国内下载】Adobe Flash Builder 4 :http://g.csdn.net/5105812
【官方下载】Flex 3 Builder :http://g.csdn.net/5121278
【官方下载】Adobe Flash Builder 4 :http://g.csdn.net/5120750