Like it or lump it

Category: Actionscript/AS3 Page 7 of 8

Flash AS3 PrintJob: Problems printing from Flash

Flash has a feature called PrintJob that allows you to print MovieClips – either by creating PDFs or simply sending them directly to a printer. Unfortunately, PrintJob has a poorly documented bug that can cause a lot of headaches. Sometimes, it will print blank pages. Other times, it will scale the pages incorrectly. The behavior is seemingly random and it is different on different computers. I had a lot of trouble printing from Flash with a recent project at work, but there is a remarkably simple solution. Read on…

In my project, I allowed a user to save PDFs to a print queue for printing at a later time. This was done by simply pushing the MovieClips onto an array. When a user hit the print button, I created a PrintJob and then looped through the array of MovieClips, scaling each one as needed to fill the page and then sending them to the printer. The actionscript code looked like this:

//-prints all saved pdfs:
public function printAllPages():void {
	if (savedPdfsArray.length > 0) { //if there are pdfs to print...
		var pj:PrintJob = new PrintJob(); //create printjob
		if(pj.start()) {
			for (var i:int=0; i < savedPdfsArray.length; i++) {            
				//scale it to fill the page (portrait orientation):
				var myScale:Number;
				myScale = Math.min(pj.pageWidth/savedPdfsArray[i].width, pj.pageHeight/savedPdfsArray[i].height);
				savedPdfsArray[i].scaleX = savedPdfsArray[i].scaleY = myScale;
				var printArea:Rectangle = new Rectangle(0, 0, pj.pageWidth/myScale, pj.pageHeight/myScale);

				pj.addPage(savedPdfsArray[i], printArea); //add page to print job
			}
			pj.send(); //send to printer
		}
		pj = null;
	}
	else { //if there are no pdfs in the queue...
		errorPopup.openMe("You do not have any pdfs saved in your queue.");
	}
}

This code worked perfectly on my PC, but occasionally gave me problems on an old iMac in the office. I had someone else test it on a newer Mac and it seemed fine, so I wrote it off as an outdated printer driver.

Then, when we sent it to the client, there were all sorts of problems. On some computers, it printed blank pages. On others, it scaled the pages incorrectly, so that the MovieClips didn't fill the page. It happened on both Macs and PCs. After a lot of Googling around without much success, I found this thread on Kirupa forum. One of the responders suggested that the MovieClips must be added to the stage or they won't print. I gave this a try and IT WORKED! It fixed all of the weird, unpredictable PrintJob behavior in my application. I quickly updated my code and the client was happy:

//-prints all saved pdfs:
public function printAllPages():void {
	if (savedPdfsArray.length > 0) { //if there are pdfs to print...
		var pj:PrintJob = new PrintJob(); //create printjob
		if(pj.start()) {
			for (var i:int=0; i < savedPdfsArray.length; i++) {
            
            			//========== printjob bug fix - prevent blank pages: ==========
                		savedPdfsArray[i].x = 2000; //keep it hidden to the side of the stage
                		stage.addChild(savedPdfsArray[i]); //add to stage - prevents blank pages
                		//=============================================================
                
				//scale it to fill the page (portrait orientation):
				var myScale:Number;
				myScale = Math.min(pj.pageWidth/savedPdfsArray[i].width, pj.pageHeight/savedPdfsArray[i].height);
				savedPdfsArray[i].scaleX = savedPdfsArray[i].scaleY = myScale;
				var printArea:Rectangle = new Rectangle(0, 0, pj.pageWidth/myScale, pj.pageHeight/myScale);

				pj.addPage(savedPdfsArray[i], printArea); //add page to print job
			}
			pj.send(); //send to printer
		}
        
        	//========== printjob bug fix - prevent blank pages: ==========
        	for (var j:int=0; j < savedPdfsArray.length; j++) {
        	    stage.removeChild(savedPdfsArray[j]); //don't forget to remove them from the stage
        	}
        	//=============================================================
        
		pj = null;
	}
	else { //if there are no pdfs in the queue...
		errorPopup.openMe("You do not have any pdfs saved in your queue.");
	}
}

I hope this post saves someone else a lot of hair-pulling. Thank you "orangehaze" and Kirupa forum!

Papervision3D: Max3DS vs. Collada performance

Papervision3D is an incredible open-source library for building 3D applications in Flash. You can create basic 3D objects and animate them with Actionscript, but if you really want to create something cool, you need to import a 3D model made with a program like 3D Studio Max, Maya, or Blender.

Several different 3D file formats can be imported into Papervision – the most popular format seems to be Collada (*.DAE), which is an XML format. However, I recently noticed that *.3DS files could also be imported to Papervision using the Max3DS class. 3DS is an old file format for 3D Studio Max, but many 3D programs will still export this format. Since it is a binary format, it creates much smaller files than Collada, which can significantly decrease model load times, but I was curious if there was any noticeable performance difference once the models were imported. In theory, the models should perform identically once they are imported.  So I created a test to see if this was true.

I created a quick model of a 57 Chevy station wagon in 3D Studio Max 9 for my test. The finished model has 1833 vertices and 1802 faces. Please note that I’m a noob when it comes to 3D modeling and I know that this model has some issues, but I really only cared that it imported correctly to PV3D. Anyway, I exported the model to both Collada and 3DS formats. The exported file stats are:

wagon5.3DS = 103 KB
wagon5.DAE = 488 KB

I then created 2 Flash files that are identical except for the type of model that is imported for rendering. Click one of the images below to view the results in Papervision.

papervision_collada_test papervision_max3ds_test

 

As you can see, they look essentially identical. Each SWF loads the model 5 times and renders it to the screen with a FlatShadeMaterial. How did they perform? Well, that depends…

When I first created these SWFs, I tested them on my work computer. It’s a pretty fast Dell desktop PC with lots of RAM running Windows Vista and Flash Player 10. The 3DS format performed noticeably better on my work machine. The frame rates were similar for both models, but the memory usage was much lower than the Collada format. The 3DS model rotation also looked smoother than the Collada model and the 3DS file had much quicker file load time. It looked like a clear winner.

Then I spent some time cleaning up the files on my laptop at home and the performance tests didn’t show the same results. My laptop is a Lenovo PC that isn’t as fast as my work computer and I run Windows XP with Flash Player 9. While testing at home, the 3DS file still had lower memory usage and the animations both looked the same. The frame rate difference was still marginal.

So, which one performs better? It may be  dependent on the machine, the operating system, and the version of Flash you are running. I still give the 3DS format the advantage for it’s lower file size and memory usage. It may be a good idea to build a toggle into your Papervision project that allows you to import either format and do a lot of testing as you go before deciding on one format or the other. As always, keep your target audience (and their computers) in mind.

Feel free to use the Flash and Actionscript files to run your own tests or simply steal the code for your project. The methods that I used for loading and initializing the models may save you some time and frustration when dealing with the quirks of both the Collada and Max3DS parsers in Papervision. For example, the Max3DS parser would not allow me to initialize the model with a FlatShadeMaterial, so I had to use a ColorMaterial. But, once it was loaded, it would allow me to replace the ColorMaterial with a FlatShadeMaterial.

Please do not use the 3D model I have provided for production work. I have provided the model for you to use in these experiments, but it is copyrighted and I would really appreciate you not using it for anything else.

As always, you can download the source files here.

Flash AS3: Smooth lines with the Drawing API

Flash’s drawing API is really useful for a lot of applications and games, but it has one major drawback: user-drawn lines are usually jagged and sloppy looking. The simple fact is that it’s really difficult to draw smooth lines with a mouse. In many cases, it’s not a big deal and it is an accepted drawback of drawing with a mouse.

Recently, however, I built a flash game and those jagged lines were a real problem. I was creating a linerider-style game similar to this one, in which a user draws a track and then clicks a button to watch a character sled down the lines that they have just drawn. It’s fun to draw loops and jumps and watch the rider flip and fly all over the place. The jagged lines created by the Flash drawing API were creating a lot of problems for the physics simulation. My sled never picked up any speed because of all the little bumps on the user-drawn lines.

After spending a lot of time Googling around, I found a forum post that suggested using a basic easing script to draw smooth lines. It was so simple and so clever at the same time! It solved my problem, so I created a demo to show how it works.

Check out the Flash demo below. When it loads, the ease factor is 1, meaning that there is NO EASING. Try drawing a few circles on the gray rectangle and you’ll see that it’s the usual jagged drawing tool. Now, drag the red slider down until the easing reads about 0.25 and try drawing the circles again. You should notice that the lines look much smoother. Try drawing lines at different speeds and with different easing amounts. Remember that lower numbers mean MORE EASING (I know, it seems backwards, but it prevents a deadly “divide by zero” issue that you get by doing it the other way).

There is one drawback to this method. The line lags behind your mouse a little bit as you draw. In most cases, this isn't a huge issue and the benefit of smoother lines outweighs this drawback.

As usual, you can download the complete source code packet here.

If you've never played Linerider, check out this killer version. Please note that I did not create this awesome game. I created a similar game for a client that wishes to remain anonymous.

Flash AS3: Sequential loading with BulkLoader

BulkLoader is an open source AS3 Library created by Arthur Debert that enables easy loading of multiple assets. This behavior is exactly what I needed for a recent project. I needed to break a large flash website into multiple swfs so that the site preload remained small. I wanted the remaining site pages (individual SWFs) to load in the background, one at a time, after the initial site load. If a user requested a page that hadn’t loaded yet, the background loading would pause and the requested page would load immediately. BulkLoader is designed for exactly this sort of heavy lifting and it saved me a lot of development time.

I’ve created a picture loading demo below to show exactly how this works:

As you can see, I have used BulkLoader as a sequential loader (loading only one image at a time). After bulk loading has begun, you can request any of the images immediately. At this point, BulkLoader will pause the current download and switch to loading the requested image. As soon as that is complete, it will resume the previous download.

There are a few important caveats when using the BulkLoader library:

  • BulkLoader behaves differently on a web server than in the Flash IDE. When testing BulkLoader, it is important to test it on a web server to get accurate results. The Flash IDE is not able to correctly simulate functions such as pause() and loadNow(), so they should be tested in a browser.
  • BulkLoader behavior also varies slightly between browsers . In Firefox3 and Safari, paused downloads are restarted from the beginning when they resume. Internet Exploder 7 actually pauses and resumes downloads correctly (go figure!).

As always, you can download source files here. The code is fairly straightforward and I have added lots of comments. Please note that this sample is designed as a demo only - I sacrificed a lot of elegance in the code for the sake of simplicity.

You can get the latest version of BulkLoader here. You will also find online docs and a very helpful discussion list moderated by Arthur Debert himself. It's a great place to get help using BulkLoader or just drop in and say thanks to Arthur.

Page 7 of 8

Powered by WordPress & Theme by Anders Norén