Are spark elements changed asynchronously?

Question

I have a spark element, and I want to change the color of this element, then draw this element to a .png.

However, when I do these things one after another, the picture is taken before the color is changed.

Example:

//color is previously red
rectColor.color=0x000000;
trace("color set");
takeScreenShot();

private function takeScreenShot():void{
    trace("screenshot taken");
    //stuff
}

This prints

color set
screenshot taken

However, the "screenshot" image appears with the rectangle as red. The color has not changed.

Is this asynchronous? Does the color not actually update until the next frame?

Answer 1

The update won't happen until the next frame has been constructed. You're taking a screenshot of one frame and the changes you made won't be active until the next frame.

rectColor.color=0x000000;
trace("color set");
this.addEventListener( Event.FRAME_CONSTRUCTED, frameConstructedHandler );

private function frameConstructedHandler( e:Event ):void {
    this.removeEventListener( Event.FRAME_CONSTRUCTED, frameConstructedHandler );
    takeScreenShot();
}

private function takeScreenShot():void{
    trace("screenshot taken");
    //stuff
}

That will delay the screenshot until the following frame has finished construction. That may or may not be too soon (I can't remember the order of GUI events and I don't have time to look it up). If that doesn't work. swap FRAME_CONSTRUCTED with ENTER_FRAME and it should work. Regardless of which event needs to be used, that is your problem here

Answer 2

You can also take advantage of this little trick:

rectColor.color=0x000000;
setTimeout(takeScreenShot, 0);

Answer 3

As others have mentioned, yes, flex components are 'asynchronous' (google "flex component lifecycle" for more info).

The simplest way to wait for the next frame is to use the callLater method - every component has it. This will call your code on the next frame.

So instead of:

takeScreenShot();

Just use:

callLater(takeScreenShot);

If you want to pass parameters too, you can. Instead of:

takeSnapshot(myArg1, myArg2);

you pass all the arguments in an Array as the second parameter:

callLater(takeScreenShot, [myArg1, myArg2]);