Changing Background Images per state

Question

I have a Component that has a specific background image. The code looks like:

<mx:backgroundImage>@Embed(source='img1.png')</mx:backgroundImage>

<mx:states>
  <mx:State name='state2'>
    <mx:SetStyle name="backgroundImage">
      <mx:value>@Embed(source='img2.png')</mx:value>
    </mx:SetStyle>
  </mx:State>
</mx:states>

But when I change the state to 'state2', it doesn't actually change anything.

Am I missing anything specific here?

Answer 1

I haven't dealt with this specifically, but my intuition is that it is having a problem with the way the value is set. Have you tried this:

mx:setStyle setStyle name="backgroundImage value="@Embed(source='img2.png')" />

Answer 2

The default target is the main app. So you are actually setting the background of the entire app in state2 and not the Component. Here is an example with the VBox

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:states>
    <mx:State name="state2">
        <mx:SetStyle name="backgroundImage" target="{VBox1}">
            <mx:value>
                @Embed(source='img2.jpg')
            </mx:value>
        </mx:SetStyle>
    </mx:State>
</mx:states>
<mx:VBox id="VBox1" x="0" y="0" width="50%" height="50%">
    <mx:backgroundImage>
        @Embed(source='img1.jpg')
    </mx:backgroundImage>
</mx:VBox>

</mx:Application>

Also if you are using Flex 3 Builder you can always switch to Design mode to see changes from Base state to a new state. It should be in the top right corner.

EDIT for components

Main file

<cbsh:BackSwitch>

</cbsh:BackSwitch>

</mx:Application>

Component

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:states>
    <mx:State name="state2">
        <mx:SetStyle name="backgroundImage" target="{this}">
            <mx:value>
                @Embed(source='img2.jpg')
            </mx:value>
        </mx:SetStyle>
    </mx:State>
</mx:states>
<mx:backgroundImage>
        @Embed(source='img1.jpg')
    </mx:backgroundImage>
<mx:Button x="437" y="269" label="Switch!" click="currentState='state2';"/>
</mx:VBox>

Answer 3

Because this seems to be kind of a weird error, my temporary solution is to have two canvases with different backgrounds that flip visibility depending on the state