Drawing a Flex Group to a bitmap, then attaching it

Question

A little context: I want to animate in a popup (extends Spark Group) in Flex using the Greensock Tweenlite class. I have an elastic ease that I'm really keen on but when I tween the scale of my popup, the text in the Flex Group jumps around a little, wiggles, and generally looks bad until the tween has come to a halt.

I've considered fading in the text once the intro animation has completed, but I'm not happy with that solution. My only other option (as far as I can see it) is to draw the entire group to a bitmap, include that bitmap in the popup, hide the rest of the content in the popup, and remove the bitmap (and reveal the "real" content) once the tween has completed.

No idea how to do this in Flex, though, since I can't addChild(bitmap) in there.

Here's a simplified version of my code.

<fx:Script>
    <![CDATA[
    import com.greensock.TweenLite;
    import com.greensock.easing.Elastic;
    import com.greensock.plugins.TweenPlugin;

    import mx.events.FlexEvent;


    private function creationComplete(event : FlexEvent) : void
    {
        addEventListener(MouseEvent.CLICK,
                         function (m : MouseEvent) : void {
                             TweenLite.killTweensOf(rect);
                             TweenLite.killTweensOf(content);

                             TweenLite.fromTo(rect,
                                              .8,
                                              {
                                                  scaleX: .8,
                                                  scaleY: .8
                                              },
                                              {
                                                  scaleX: 1,
                                                  scaleY: 1,
                                                  ease:   Elastic.easeOut
                                              });
                         });
    }
    ]]>
</fx:Script>

<s:HGroup width="100%"
          height="100%"
          horizontalAlign="center"
          verticalAlign="middle">

    <s:Group id="rect"
             width="120"
             height="120">

        <s:Rect width="100%"
                height="100%"
                radiusX="10"
                radiusY="10">

            <s:fill>
                <s:SolidColor color="0x000000" />
            </s:fill>

        </s:Rect>

        <s:VGroup id="content"
                  width="100%"
                  height="100%"
                  padding="10"
                  horizontalAlign="center"
                  verticalAlign="middle">
            <s:Label width="100%"
                     text="Hello world foo bar abcdefg 123 Hello world foo bar abcdefg 123 Hello world foo bar abcdefg 123"
                     color="0xffffff" />
        </s:VGroup>

    </s:Group>

</s:HGroup>

Answer 1

I figured it out. Did what I planned out and after a little more research found the BitmapImage class.

Final code:

<fx:Script>
    <![CDATA[
    import com.greensock.TweenLite;
    import com.greensock.easing.Elastic;

    import mx.events.FlexEvent;


    private function creationComplete(event : FlexEvent) : void
    {
        addEventListener(MouseEvent.CLICK,
                         function (m : MouseEvent) : void {
                             var bitmapData : BitmapData = new BitmapData(content.width,
                                                                          content.height,
                                                                          true,
                                                                          0x000000);
                             bitmapData.draw(content);
                             bitmapImage.source  = bitmapData;
                             bitmapImage.visible = true;
                             content.visible     = false;
                             trace(bitmapImage.smoothingQuality);

                             TweenLite.killTweensOf(rect);
                             TweenLite.killTweensOf(content);

                             TweenLite.fromTo(rect,
                                              .8,
                                              {
                                                  scaleX: .8,
                                                  scaleY: .8
                                              },
                                              {
                                                  scaleX:     1,
                                                  scaleY:     1,
                                                  ease:       Elastic.easeOut,
                                                  onComplete: onComplete
                                              });
                         });
    }

    private function onComplete() : void
    {
        bitmapImage.visible = false;
        content.visible     = true;
    }
    ]]>
</fx:Script>

<s:HGroup width="100%"
          height="100%"
          horizontalAlign="center"
          verticalAlign="middle">

    <s:Group id="rect"
             width="120"
             height="120">

        <s:Rect width="100%"
                height="100%"
                radiusX="10"
                radiusY="10">

            <s:fill>
                <s:SolidColor color="0x999999" />
            </s:fill>

        </s:Rect>

        <s:BitmapImage id="bitmapImage"
                       smooth="true"
                       smoothingQuality="high" />
        <s:VGroup id="content"
                  width="100%"
                  height="100%"
                  padding="10"
                  horizontalAlign="center"
                  verticalAlign="middle">
            <s:TextInput width="100%"
                         text="Hello world foo bar abcdefg 123 Hello world foo bar abcdefg 123 Hello world foo bar abcdefg 123"
                         color="0x0000ff" />
        </s:VGroup>

    </s:Group>

</s:HGroup>