Really poor performances

Question

Hi everyone,
first of all, sorry for my poor english.
I'm trying developing a simple app using Flash CS5.
I've tested my app on a pc and it was ok but when I tried it on the Iphone performances became pretty bad.
I did some animation  using the timeline and reading this forum I realized that probably this is the reason of my problems.
Now I'm trying to find a best way to make my animation running smoothly.
I'm not such experienced programmer so maybe things really oblivious for you could be new for me.
I'll start fixing thing step by step, so this is my first question:
My app start with a picture that goes from alpha=0 to alpha=100 and then back to 0, doing it using the timeline produce a choppy animation.
I' ve also tried to convert my animation in this code:
import fl.motion.Animator;
var test_xml:XML = <Motion duration="30" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
<source>
<Source frameRate="24" x="320" y="480" scaleX="1" scaleY="1" rotation="0" elementType="graphic" symbolName="Tween 21">
<dimensions>
<geom:Rectangle left="-320" top="-480" width="320" height="480"/>
</dimensions>
<transformationPoint>
<geom:Point x="1" y="1"/>
</transformationPoint>
</Source>
</source>
<Keyframe index="0" tweenSnap="true" tweenSync="true">
<color>
<Color alphaMultiplier="0"/>
</color>
<tweens>
<SimpleEase ease="0"/>
</tweens>
</Keyframe>
<Keyframe index="29">
<color>
<Color/>
</color>
<tweens>
<SimpleEase ease="0"/>
</tweens>
</Keyframe>
<Keyframe index="78">
<color>
<Color/>
</color>
<tweens>
<SimpleEase ease="0"/>
</tweens>
</Keyframe>
<Keyframe index="106">
<color>
<Color alphaMultiplier="0" />
</color>
</Keyframe>
</Motion>;
var test_animator:Animator = new Animator(test_xml, test);
test_animator.play();
But the animation is still slow.
I'm sure there is a more efficent way to do this. Someone could help me?

Answer 1

@Arnold, the slowdown occurs because each bitmap (as you cycle through them) is being sent to the GPU. Transferring data to the GPU is slow, but once it is there it is fast.
Sorry, Arnold, this is because I missed out some code - when the frames are cached, they should be placed outside the screen area on the stage. Something like:
// This is the initialisation and should only happen once. This takes each of
// the frames of animation (BitmapData) and place them inside a Bitmap. These
// are stored in an array, and placed offscreen so they are not visible. This last
// is done so that Flash caches the BitmapData objects on the GPU. I have
// read that if the objects are not on stage, they are flushed from the GPU.
var animFrames : Vector.<Bitmap>;
var animFrameIndex : int = 0;
var frameCounter : int = 0;
animFrames = new Vector.<Bitmap>();
animFrames.push( new Bitmap( new AnimFrame1(0,0), PixelSnapping.ALWAYS, false ) );
animFrames.push( new Bitmap( new AnimFrame2(0,0), PixelSnapping.ALWAYS, false ) );
animFrames.push( new Bitmap( new AnimFrame3(0,0), PixelSnapping.ALWAYS, false ) );
// --- this was missing
// Place the frames off screen to force the GPU to cache them. Make sure that
// they do not (completely) overlap or Flash may not cache them.
var i : int;
var xPos : int = -100;
for (i=0; i<animFrames.length; i++){
     xPos -= animFrames[i].width;
     animFrames[i].x = xPos;
     addChild(animFrames[i]);
// --- this was missing
// This is your sprite. It's bitmapData is set to one of the ones in your vector
var mySprite : Bitmap = new Bitmap( animFrames[0].bitmapData, PixelSnapping.ALWAYS, false );
// Register your game loop
addEventListener(Event.ENTER_FRAME,onEnterFrameDraw);
// Game loop that runs every frame, but only updates the animation every second frame. A
// much better technique would be to use the elapsed time since the app started (using
// getTimer() ) to determine when to change frames. This avoids any differences in speed
// between devices (e.g. iPhone 1st gen, iPhone 4 etc).
function onEnterFrameDraw( e : Event ):void{
  // Odd numbers only
  if (frameCounter & 1){
    // Update animation to next frame
    mySprite.bitmapData = animFrames[ animFrameIndex ];
    // Update frame index to next frame of animation
    animFrameIndex++;
    if (animFrameIndex == animFrames.length) animFrameIndex = 0;
  frameCounter++;
Edited 1 Nov 2010: Based on information in this thread, it seems you cannot stack the images to cache them as Flash is smart enough not to cache any hidden images. I have updated the code to stagger the images. I wonder, though, if Flash is smart enough to cache them if they are off-screen?