Invalid Bitmap Data error when Flex tries to play a Crossfade transition?

Question

Hi All,
I've got a Grid like this in my Flex 4 app.  When the view that contains this Grid is visible, and the view is changed to another view, my application tries to play the Crossfade effect as the transition to the other view.  My transition is defined like this:
     <s:transitions>
          <s:Transition fromState="*" toState="*">
               <s:Parallel>
                    <s:CrossFade duration="150" target="{this}" />
               </s:Parallel>
          </s:Transition>
     </s:transitions>
This applies the transition to any view.  There's only one effect in there at the moment but it's in a Parallel block since I've experimented with multiple transitions.
Now, when I'm on a view where this Grid is visible, and I try to transition to another view, I get an "Invalid BitmapData" error.  HEre's the complete stack trace:
ArgumentError: Error #2015: Invalid BitmapData.
     at flash.display::BitmapData/ctor()
     at flash.display::BitmapData()
     at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:99]
     at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
     at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
     at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
     at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
     at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
     at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
     at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
     at spark.utils::BitmapUtil$/getRealBounds()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:135]
     at spark.utils::BitmapUtil$/getSnapshot()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\utils\BitmapUtil.as:63]
     at spark.effects::AnimateTransitionShader/getValueFromTarget()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\effects\AnimateTransitionShader.as:283]
     at mx.effects::Effect/http://www.adobe.com/2006/flex/mx/internal::captureValues()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\effects\Effect.as:1462]
     at mx.effects::CompositeEffect/http://www.adobe.com/2006/flex/mx/internal::captureValues()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\effects\CompositeEffect.as:377]
     at mx.effects::CompositeEffect/captureStartValues()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\effects\CompositeEffect.as:358]
     at mx.core::UIComponent/commitCurrentState()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9778]
     at mx.core::UIComponent/setCurrentState()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9701]
     at mx.core::UIComponent/set currentState()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:6087]
     at main/previousButton_clickHandler()[C:\Data\dev\Flex\main\src\main.mxml:48]
     at main/__previousButton_click()[C:\Data\dev\Flex\main\src\main.mxml:241]
Here's what the grid looks like.  I experimented with adding and removing controls from the grid, and eventually narrowed it down to a a VGroup I've got in the grid.  If I remove that VGroup (and all it's children), the transition plays fine.  Add it back in, and everything blows up again.  I tried using a VBox instead of a VGroup, but there was no change--same error.  I also tried getting rid of horizontalAlign="center", and again, no change.
<mx:Grid id='membershipGrid' >
     <mx:GridRow>
          <mx:GridItem>
          </mx:GridItem>
          <mx:GridItem>
               <s:Label text="One Year" fontWeight="bold"/>
          </mx:GridItem>
          <mx:GridItem>
               <s:Label text="Two Year" fontWeight="bold"/>
          </mx:GridItem>
          <mx:GridItem>
               <s:Label text="5 Year" fontWeight="bold"/>
          </mx:GridItem>
          <mx:GridItem>
               <!-- Comment out this VGroup, and everything works fine -->
               <s:VGroup horizontalAlign="center">
                    <s:Label text="Monthly Autorenew"  fontWeight="bold"/>
                    <s:Label text="Payment plan option is not available" fontStyle="italic" />
                    <s:Label text="for multiple year memberhips." fontStyle="italic" />
               </s:VGroup>
          </mx:GridItem>
     </mx:GridRow>
     <mx:GridRow>
          <mx:GridItem>
               <s:Label text="Standard Membership" />
          </mx:GridItem>
          <mx:GridItem>
               <s:RadioButton id="standardOneYear" group="{membershipTypeSelection}"
                                 label="{pricing.getMembership(MembershipName.STANDARD_ONE_YEAR).currencyPrice}" />
          </mx:GridItem>
          <mx:GridItem>
               <s:RadioButton id="standardTwoYear" group="{membershipTypeSelection}"
                                 label="{pricing.getMembership(MembershipName.STANDARD_TWO_YEAR).currencyPrice}" />
          </mx:GridItem>
          <mx:GridItem>
               <s:RadioButton id="standardFiveYear" group="{membershipTypeSelection}"
                                 label="{pricing.getMembership(MembershipName.STANDARD_FIVE_YEAR).currencyPrice}" />
          </mx:GridItem>
          <mx:GridItem horizontalAlign="center">
               <s:RadioButton id="monthlyAutorenew" group="{membershipTypeSelection}"
                                 label="{pricing.getMembership(MembershipName.MONTHLY_AUTORENEW).currencyPrice}" />
          </mx:GridItem>
     </mx:GridRow>
</mx:Grid>
So, what's going on?  How can I get this transition to work?  Thanks!

Answer 1

Flex harUI wrote:
Sometimes that can happen if something gets sized too small.
Thanks for suggesting that.  It got me thinking about some other things, and I then realized that the Grid itself was in a container with TileLayout, and a requestedColumnCount of 5.  That was a mistake--I had initially been playing with the TileLayout for my "grid" but then switched to using an actual mx:Grid control, and should have gotten rid of the TileLayout with the requestedColumnCount of 5.
I changed my layout object to an instance of VerticalLayout, and now the problem has gone away.
My theory, based on your suggestion that something might be sized "too small," is that when I added enough controls to my Grid (which all appeared in tile 1), tiles 2 through 5 got "too small" and thus Invalid BitmapData errors were thrown when the transition tried to figure out what bitmaps to fade in/out.
Sound reasonable?
Now I just have to re-enable all the other controls that I disabled while trying to hunt down this problem, and hopefully the Invalid BitmapData error won't recur.
  -Josh