Smooth sliding animation in Flex with large amounts of components

Question

I have a component I created that works like a Viewstack but the next index component slides in from one of the four sides. I've got it working well enough that it's acceptable to use, but I want to make it more efficient.

Right now I'm using a Canvas as the base component, I create a snapshot of the current view using an ImageSnapshot (new Bitmap( ImageSnapshot.captureBitmapData( this ) )), and I slide the new index on top of that image on index change.

I'm basically looking for suggestions on how to do this a better way. By taking the Image after the component loads, and after the slide happens, I've gotten the initial jaded moves down to a minimum, but we normally use this for transitioning grids so it's almost always slow on the first or first couple slides.

Here's what some of it looks like so far:

private function creationComplete(e:Event):void
{
  tmpImage.source = new Bitmap( ImageSnapshot.captureBitmapData( this ) );
}

public function set selectedIndex(value:int):void
{
  if(_selectedIndex == value + 1)
    return;
  _selectedIndex = value+1;

  var obj:UIComponent;

  tmpImage.height = height;
  tmpImage.width = width;
  tmpImage.visible = true;
  tmpImage.x = 0;
  //tmpImage.includeInLayout = true;

  for (var i:int = 1; i < numChildren; i++)
  {
    obj = UIComponent(getChildAt(i));
    //obj.x = width;
    if(i == _selectedIndex){
      obj.visible = true;
      objDisplay = obj;
    }
    else
      obj.visible = false;
  }

  mv1.target = tmpImage;
  mv2.target = objDisplay;

  switch ( direction )
  {
    // X/Y sliding logic
  }
  parEfect.play();

  tmpImage.source = new Bitmap( ImageSnapshot.captureBitmapData( this ) );
}

If you're wondering, I'm using index 0 of the canvas for the image, and offset my custom selectedIndex by 1.

I'll post more of it if need be, but I want to keep the question down to a minimum and this pretty much sums it up.

Any help is greatly appreciated! I really want to get this component to perform better. Also, this has to be done using Flex 3

Answer 1

What are mv1 and mv2? Are they Flex Effects? If so they are notoriously slow, I recommend using TweenLite. If you absolutely need to use them set suspendBackgroundProcessing = true on them. Last but not least, make sure you do not have a layout set on them. If you do you are causing a re-layout every frame which can easily bog down animation.