Question

Basically what Im trying to do is have a TileGroup component’s horizontalCenter and verticalCenter attributes modified inversely of the mouses movement, and use an spark move effect to make that motion be smooth. The TileGroup is a child of a mx:Canvas that is set to be 100% wide and 100% tall. Their are about 20 or so BorderContainers inside of the TileGroup.

For an example of how it should be working, look at http://gallery.artofgregmartin.com/

My version moves just like that one, but its not nearly as smooth. Looking at CPU usage both mine and his use about the same (80-90% when the motion is going) but we differ in GPU usage. Mine only utilizes about 4% while his is near 10%.

Here is my movement code:

private function onMouseMove(event:MouseEvent):void{
    var stageCenterX:Number = this.stage.stageWidth/2;
    var stageCenterY:Number = this.stage.stageHeight/2;
    var sliderPanelCenterX:Number = sliderPanel.width/2;
    var sliderPanelCenterY:Number = sliderPanel.height/2;
    var mouseX:Number = event.stageX;
    var mouseY:Number = event.stageY;
    var offsetX:Number = 0;
    var offsetY:Number = 0;
    var padding:Number = 400;

    var multX:Number = (stageCenterX - mouseX)/stageCenterX;
    offsetX = (multX * sliderPanelCenterX);

    if(mouseX <= stageCenterX){
        offsetX = offsetX - Math.abs(multX * stageCenterX) + Math.abs(multX * padding);
    }
    else {
        offsetX = offsetX + Math.abs(multX * stageCenterX) - Math.abs(multX * padding);
    }

    var multY:Number = (stageCenterY - mouseY)/stageCenterY;
    offsetY = (multY * sliderPanelCenterY);

    if(mouseY <= stageCenterY){
        offsetY = offsetY - Math.abs(multY * stageCenterY) + Math.abs(multY * padding); 
    }
    else {
        offsetY = offsetY + Math.abs(multY * stageCenterY) - Math.abs(multY * padding);
    }

    panelHC = Math.round(offsetX);
    panelVC = Math.round(offsetY);

    movePanel.captureStartValues();
    sliderPanel.verticalCenter = panelVC;   //sliderPanel is the id for the TileGroup
    sliderPanel.horizontalCenter = panelHC;
    movePanel.play();
}

And here is the reverent mxml code:

<fx:Declarations>
    <s:Move id="movePanel" target="{sliderPanel}" />
</fx:Declarations>
<mx:Canvas width="100%" height="100%" backgroundColor="#111111" 
    horizontalScrollPolicy="off" 
    verticalScrollPolicy="off">
    <s:TileGroup id="sliderPanel" horizontalGap="2" verticalGap="2" width="2010" 
       horizontalCenter="0" verticalCenter="0" z="1" />
</mx:Canvas>

Answer 1

Well it would seem that the built in animation routines are not exactly optimized. I switched all the tweening methods out for TweenMax ( http://www.greensock.com/tweenmax/ ) as well as followed some of the optimization tips on that site and its running smooth as butter now.

Thanks for all the helpful response!

-Nigel

TweenMax method:

Replaced

movePanel.captureStartValues();
movePanel.easer = powerEasing;
sliderPanel.verticalCenter = panelVC;
sliderPanel.horizontalCenter = panelHC;
movePanel.stop();
movePanel.play();

With

TweenMax.to(sliderPanel,2.5,
  {verticalCenter:panelVC,horizontalCenter:panelHC, ease:Back.easeOut});