States in Flex 4

One way to architect the code for a "lesson" is as a series of states. Flex 4 (now in beta) has improved its support for states, so this seems like a reasonable approach to explore.

Here's a program that demonstrates a trivial use of states in Flex 4 Beta 2 (source code here):

A ButtonBar at the bottom is initialized with the names of each of three states, and a label reflects the name of the currently-selected state. When the ButtonBar is clicked, the state is changed. Whenever a new state is entered, a short narration is played.

To use this approach in my courseware, I'll need to break each lesson up into a series of states, and define the actions to be taken whenever a new state is entered. Flex 4's new-and-more-general animation model should make it easier to define these actions than was previously the case.

I have no idea whether this is the "best practice" way to architect interactive courseware in Flex. I'm kinda flying blind here. Suggestions welcome.

[Postscript: All three ButtonBar-buttons display properly in Safari on my Mac, but the rightmost part of the StateTest1 widget, including most of the third ButtonBar button, is clipped off in Internet Explorer on my Windows machine.  I don't know why.  Welcome to the joys of cross-browser incompatibility, I guess.]