Flex 4 Wizard Component with Progress Indication and Move Effects

December 10, 2009 6:08 PM
I love the Insuricorp demo. The wizard in that has two distinguishing features. A subtle animated progress indication that not only denotes the current step, but also the fact that you are progressing. And the other thing - a neat move effect between each step so that it looks like the next step is sliding in from the right. I built a Flex 4 component that does exactly this. Use it similar to our good old Flex 3 view stack and voila!

Wizard Component

Only a demo (view source enabled) can do it justice. Click the image below to try it out:

You can also download the FXP. The source is licensed under MPL 1.1.

Try clicking next and previous pretty fast. The move effects play in parallel so that there is a kinetic feel to it.

Usage

First, declare the step names:

[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"})
 ]);

Now declare the view elements of the wizard as a child to the 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>

The only difference from a view stack is that since GraphicElements do not have a "label" property, you have to provide the step name via a wizardViews property. Internally, the children passed to the component gets added to a Group and its visibility is toggled based on the current step.

Effects

Pressing "Next" causes the next step to slide in and the current step to slide out. Then the progress indicator grows to cover the new step while the color of the indicator changes from white to blue. I used the new Flex 4 AnimateColor effect for this.

The move effects work in parallel so that multiple next / previous does not cause abrupt changes.

Conclusion

This was my first Flex 4 component. I had forgotten about it till I was cleaning up my Eclipse workspace. Let me know if you guys find it useful.

CategoryFlex Comment(s)