There isn't a way to do this from the Flash Catalyst UI currently. If you import the project into Flash Builder, there are a number of ways you can do it in code. Here's the simplest way:
1. In your Main.mxml file, assign an id to the instance of the component you want to control (in your example, Component B), like this:
<components:ComponentB x="100" y="100" id="compB"/>
(If it already has an id, just note it down and go to the next step.)
2. In the ComponentA.mxml file (which should be in the "components" folder in your project), add a click handler to the button, like this
<s:Button label="Click me!" x="100" y="100" click="FlexGlobals.topLevelApplication.compB.currentState='StateName'"/>
where StateName is the name of the ComponentB state you want to switch to when the button is clicked. (If the instance of the component in Main.mxml already had some other id, just use that here instead of "compB".)
Note that while this is the easiest way to do it, it's not the cleanest. A better way to do it is to have ComponentA dispatch an event when the button is clicked, and then have the application handle the event by changing ComponentB's state. That's a little more code though.
Let me know if this doesn't work for you.
thanks for your help Narciso. I had a play around with the code and ended up using:
protected function Button081_rollOver():void
is that the way you said would be cleaner but a bit more code?
That works too, but that's not quite what I meant. The "cleaner" version wouldn't directly call up to the top-level application and talk directly to another component. This isn't really important if you just have one-off components that you aren't reusing elsewhere in the app--in that case, it's fine to just access the other component directly. It's more of an issue if you're trying to build a component that's reusable in different contexts.