CODEWITHSUNDEEP
apache-flexactionscript-3performancedrawingbitmapdata
Jordan
Jordan

Reputation: 411

AS3/Flex: Improving slow performance of drawing Application using BitmapData.draw()

I am using a custom Flex skin to create an active blur/frosted glass effect on the background of floating Panels, TitleWindows, and other containers (similar to http://www.pixelfumes.com/blog/apr07/activeBlurClass.html). There is a background image in the Application skin, and potentially any number of other components above and below the active blur component. Here's some relevant code within the skin:

public static const BLUR_FILTER :BlurFilter = new BlurFilter(16, 16, BitmapFilterQuality.HIGH);

private var _bitmapFill :BitmapFill = new BitmapFill;

private var _matrix :Matrix = new Matrix;

protected function handleEnterFrameEvent (event :Event) :void {

    var bitmapData :BitmapData,
        matrix :Matrix;

    // only run if component has width and height
    if (unscaledWidth && unscaledHeight) {
        bitmapData = new BitmapData(unscaledWidth, unscaledHeight, false);
        // use the component's transform matrix to source the area to draw
        matrix = transform.concatenatedMatrix;
        _matrix.tx = -matrix.tx;
        _matrix.ty = -matrix.ty;
        // hide component to draw what's behind it
        visible = false;
        // this is the performance hit: draw the application to a bitmap
        bitmapData.draw(IBitmapDrawable(parentApplication), _matrix);
        visible = true;
        bitmapData.applyFilter(bitmapData, bitmapData.rect, new Point, BLUR_FILTER);
        _bitmapFill.source = bitmapData
        backgroundRect.fill = _bitmapFill;
    }

}

Unfortunately, the performance of this when the component is being resized, and especially when moved, is poor. There is noticeable drag delay and overall slowdown, and this is with only one popped-up TitleWindow in the test application. There is especially poor performance when components inside the TitleWindow are changed (button hover states, etc.)

I've attempted to optimized a little bit by avoiding reinstantiation of the blur filter, bitmap fill, and matrix, but this has had little or no effect. I removed the blur at one point, just drawing the Application to a bitmap, and the performance is still poor, so it's clear that it's mostly the BitmapData.draw() call.

I've read about using scrollRect and cacheAsBitmap, but I'm not sure where to apply these properties (or other optimizations I'm not aware of) within the Application or its components.

I've been at this problem for a while, and decided it was time to reach out. Thanks in advance!

Upvotes: 2

Views: 2804

Answers (2)

Max Volos
Max Volos

Reputation: 56

this one is really interesting.. did u test adding eventlisteners for say, layoutmanager for triggering redraw and replacing blur filter with same pixelbender shader?

Upvotes: 2

J_A_X
J_A_X

Reputation: 12847

You should learn how to create proper Flex component using Flex's lifecycle functions. Right now, you're drawing at every frame, which is extremely wasteful and useless. Also, why do you need to draw the whole application over and over again?

You might want also look at a technique called double buffering and bitmap blitting.

Upvotes: 1

Related Questions