Measuring Drawing API 2.0 performance

While I was writing the Drawing API chapter in my new book I had to do some benchmarks. The first thing which came to my mind was comparing the new methods like drawPath, drawTriangles with the classics moveTo and lineTo methods.

So here is the kind of code I tried :

1. var container:Shape = new Shape();
3. var currentTime:Number = getTimer();
5. for (var i:int = 0; i< 15000; i++)
6. {
7. container.graphics.clear();
8. container.graphics.beginFill ( 0×990000, 1 );
9. container.graphics.drawPath ( commands, coords );
10. }
12. // outputs : 16
13. trace( getTimer() - currentTime );

var container:Shape = new Shape();

var currentTime:Number = getTimer();

for (var i:int = 0; i< 15000; i++)
{
container.graphics.clear();
container.graphics.beginFill ( 0x990000, 1 );
container.graphics.drawPath ( commands, coords );
}

// outputs : 16
trace( getTimer() - currentTime );

With the code above, it took around 16ms to execute. Then, I did the same test with old methods :

1. var container:Shape = new Shape();
3. var currentTime:Number = getTimer();
5. for (var i:int = 0; i< 15000; i++)
6. {
7. container.graphics.clear();
8. container.graphics.beginFill ( 0×990000, 1 );
9. container.graphics.moveTo ( coords[0], coords[1] );
10. container.graphics.lineTo ( coords[2], coords[3] );
11. container.graphics.lineTo ( coords[4], coords[5] );
12. container.graphics.lineTo ( coords[6], coords[7] );
13. container.graphics.lineTo ( coords[8], coords[9] );
14. container.graphics.lineTo ( coords[10], coords[11] );
15. }
17. // outputs : 31
18. trace( getTimer() - currentTime );

var container:Shape = new Shape();

var currentTime:Number = getTimer();

for (var i:int = 0; i< 15000; i++)
{
container.graphics.clear();
container.graphics.beginFill ( 0x990000, 1 );
container.graphics.moveTo ( coords[0], coords[1] );
container.graphics.lineTo ( coords[2], coords[3] );
container.graphics.lineTo ( coords[4], coords[5] );
container.graphics.lineTo ( coords[6], coords[7] );
container.graphics.lineTo ( coords[8], coords[9] );
container.graphics.lineTo ( coords[10], coords[11] );
}

// outputs : 31
trace( getTimer() - currentTime );

As we can see, the drawPath method is actually faster than the classic moveTo and lineTo methods, which is quite logical cause we need less lines of code to produce the same result. But there is something important that we have to keep in mind.

What is actually faster here ?

What we are measuring here is not rendering time but the time it takes to push all the commands to the renderer. With the test above, we see that the execution time is faster with drawPath but we don’t know yet in terms of rendering time. Don’t forget that Flash Player rendering is asynchronous, so rendering will occur on next frame and we have to take care of that.

The trick is to force the Flash Player to call the renderer synchronously. The only method which can do that for us is BitmapData.draw(). So if you want to measure rendering time performance you would write the following :

1. var bitmap:BitmapData = new BitmapData ( 400, 400 );
3. var container:Shape = new Shape();
5. for (var i:int = 0; i< 15000; i++)
6. {
7. container.graphics.clear();
8. container.graphics.beginFill ( 0×990000, 1 );
9. container.graphics.drawPath ( commands, coords );
10. }
12. var currentTime:Number = getTimer();
14. // forces the player to render graphics synchronously
15. bitmap.draw ( container );
17. // outputs : 1
18. trace( getTimer() - currentTime );

var bitmap:BitmapData = new BitmapData ( 400, 400 );

var container:Shape = new Shape();

for (var i:int = 0; i< 15000; i++)
{
container.graphics.clear();
container.graphics.beginFill ( 0x990000, 1 );
container.graphics.drawPath ( commands, coords );
}

var currentTime:Number = getTimer();

// forces the player to render graphics synchronously
bitmap.draw ( container );

// outputs : 1
trace( getTimer() - currentTime );

If we then calculate rendering time with old methods :

1. var bitmap:BitmapData = new BitmapData ( 400, 400 );
3. var container:Shape = new Shape();
5. for (var i:int = 0; i< 15000; i++)
6. {
7. container.graphics.clear();
8. container.graphics.beginFill ( 0×990000, 1 );
9. container.graphics.moveTo ( coords[0], coords[1] );
10. container.graphics.lineTo ( coords[2], coords[3] );
11. container.graphics.lineTo ( coords[4], coords[5] );
12. container.graphics.lineTo ( coords[6], coords[7] );
13. container.graphics.lineTo ( coords[8], coords[9] );
14. container.graphics.lineTo ( coords[10], coords[11] );
15. }
17. var currentTime:Number = getTimer();
19. // forces the player to render graphics synchronously
20. bitmap.draw ( container );
22. // outputs : 1
23. trace( getTimer() - currentTime );

var bitmap:BitmapData = new BitmapData ( 400, 400 );

var container:Shape = new Shape();

for (var i:int = 0; i< 15000; i++)
{
container.graphics.clear();
container.graphics.beginFill ( 0x990000, 1 );
container.graphics.moveTo ( coords[0], coords[1] );
container.graphics.lineTo ( coords[2], coords[3] );
container.graphics.lineTo ( coords[4], coords[5] );
container.graphics.lineTo ( coords[6], coords[7] );
container.graphics.lineTo ( coords[8], coords[9] );
container.graphics.lineTo ( coords[10], coords[11] );
}

var currentTime:Number = getTimer();

// forces the player to render graphics synchronously
bitmap.draw ( container );

// outputs : 1
trace( getTimer() - currentTime );

If we want to have a global benchmark, including commands submit and rendering time we could write :

1. var bitmap:BitmapData = new BitmapData ( 400, 400 );
3. var container:Shape = new Shape();
5. var currentTime:Number = getTimer();
7. for (var i:int = 0; i< 15000; i++)
8. {
9. container.graphics.clear();
10. container.graphics.beginFill ( 0×990000, 1 );
11. container.graphics.drawPath ( commands, coords );
12. }
14. // forces the player to render graphics synchronously
15. bitmap.draw ( container );
17. // outputs : 17
18. trace( getTimer() - currentTime );

var bitmap:BitmapData = new BitmapData ( 400, 400 );

var container:Shape = new Shape();

var currentTime:Number = getTimer();

for (var i:int = 0; i< 15000; i++)
{
container.graphics.clear();
container.graphics.beginFill ( 0x990000, 1 );
container.graphics.drawPath ( commands, coords );
}

// forces the player to render graphics synchronously
bitmap.draw ( container );

// outputs : 17
trace( getTimer() - currentTime );

So the final conclusion is that drawPath or drawTriangles gives better performance than traditional moveTo, lineTo in terms of ActionScript code execution. So you will get nice improvements with the new Graphics methods if most of the time you were wasting was sending the commands to the renderer. Otherwise in terms of rendering performance, the new Graphics methods does not really bring any performance improvements.

Thank you Lee from the Flash Player team for telling me about the BitmapData.draw() synchronous trick

Flasher video player with FLA source

Posted by Amu Ku, Flash Designer/Developer

I have just finished creating a simple custom video player for Flasher Magazine. It isn’t as full-featured as some players but I wanted to make it look and feel fairly raw to match the style of the videos. There is a basic click-to-seek functionality rather than a more traditional scrubber. Doing true scrubbing requires more work and in my opinion is not even that useful. You can download the source FLA file to see how it was made and also to use it in your own projects if you want. All I ask is that you change the style so it isn’t an exact duplicate of the one I use for Flasher.

New tutorial on parallax 3D effects

Posted by Amu Ku, Flash Designer/Devloper

I just uploaded a new tutorial that shows you how to create a subtle 3D effect on photographs. This effect is widely used in documentary film making. This is the first tutorial in a long time that contains no ActionScript. Most of the time is spent in Photoshop preparing the photographs for Flash. Then I show you how to do the parallax animation on the Flash CS4 timeline. This may be my favorite tutorial that I have done so far simply because it is such an easy way to add pizazz to an otherwise boring photo.

Flash 10 Experiments: The Warholizer (Loading and Processing Local Images)

Posted by Amu Ku, Flash Designer/Devloper

One of the new features in Flash Player 10 is the ability to read local files. We’ve been looking at this feature for some of our upcoming components, and built a small example that demonstrates how to load, display, and process local images.  This example, dubbed “The Warholizer”, allows you to open any image file on your machine, and without uploading it to the server, extract the image’s bitmap data, and run it through some color filters, achieving an effect not unlike the one in some of Andy Warhol’s work. Try it out by dropping in a photo of your own for those 15 minutes of fame (though make sure the image is not too large: Flash has an upper limit on the size of bitmaps):

Note: The proper version of Flash Player is not installed or JavaScript is not enabled. Unable to display SWF content.

The code for the example is below the fold.

Google learns to crawl Flash

Posted by Amu Ku, Flash Designer/Devloper

Google has been developing a new algorithm for indexing textual content in Flash files of all kinds, from Flash menus, buttons and banners, to self-contained Flash websites. Recently, we’ve improved the performance of this Flash indexing algorithm by integrating Adobe’s Flash Player technology.

In the past, web designers faced challenges if they chose to develop a site in Flash because the content they included was not indexable by search engines. They needed to make extra effort to ensure that their content was also presented in another way that search engines could find.

Now that we’ve launched our Flash indexing algorithm, web designers can expect improved visibility of their published Flash content, and you can expect to see better search results and snippets. There’s more info on the Webmaster Central blog about the Searchable SWF integration.

Permalink