Printing with Flash has always been one of those nagging issues I’ve never been able to successfully defeat, using the Flash PrintJob class that is. Although I want to sit here, and tell you how awful the PrintJob class is, I’ll let you try to explore that rocky road all by yourself; When you get to the point when you’re trying to use PixelBender for possibly getting a better algorithm for blending from pixel to pixel, and its still not working let me know, I could’ve saved you like 2 weeks worth of hair pulling by simply telling you to use: AlivePDF.

Once you have the source (or swc) downloaded, and imported into a project there is one important thing to remember, since we’re doing this is PureAS3:
You need to add this to your compiler arguments or it won’t work:

-static-link-runtime-shared-libraries=true

Outside of that… Here’s the Code, and a link to download it, as well as use it:

*Thanks to Keith Peters for MinimalComponents

[update] Thanks to Joe Campbell, I’ve added the create.php file that allows you to proxy your save request to a server. This can be useful for two reasons:

1. If you need to save out of Flash Player 9, this is the only route you have.
2. If you need to get a preview back before actually saving. I worked on a solution before that converted the output then returned a small preview png.

package com.juanbonfante.blog.demos {
	import com.bit101.components.HBox;
	import com.bit101.components.Label;
	import com.bit101.components.PushButton;
	import com.bit101.components.VBox;
 
	import org.alivepdf.display.Display;
	import org.alivepdf.display.PageMode;
	import org.alivepdf.layout.Layout;
	import org.alivepdf.layout.Mode;
	import org.alivepdf.layout.Orientation;
	import org.alivepdf.layout.Position;
	import org.alivepdf.layout.Resize;
	import org.alivepdf.layout.Size;
	import org.alivepdf.layout.Unit;
	import org.alivepdf.pdf.PDF;
	import org.alivepdf.saving.Method;
 
	import flash.display.DisplayObject;
	import flash.display.Graphics;
	import flash.display.Loader;
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.FileReference;
	import flash.net.URLRequest;
 
	/**
	 * @author jbonfante
	 *
	 * This demo is used to show the usage of AlivePDF inside of a PureAS3 file.
	 *
	 * This shows how to print both Images as well as vector art.
	 */
	public class AliveDemo extends Sprite {
		//Define wethere an image has been loaded
		private var _imageLoaded : Boolean = false;
		//Define wether the vectors button has been activated
		private var _vectors : Boolean = false;
 
		//Container for the image display
		private var _imageDisplay : Sprite = new Sprite();
		//Container for the vector display
		private var _vectorDisplay : Sprite = new Sprite();
 
		//Total number of vectors
		private var numVectors : Number = 20;
		//Class member for lading image
		private var loader : Loader = new Loader();
 
		/**
		 * Important: Printing container is the container that is fed into
		 * the AlivePDF instance. Anything we add to printing container gets
		 * added to the print out PDF... with some consequences, but those are
		 * beyond the scope of this tutorial
		 */
		private var _printingContainer : Sprite = new Sprite();
		//PDF Class instance
		private var myPDF : PDF;
		//Label
		private var imgText : Label;
		private var defaultLabel : Label;
		private var myVbox : VBox;
		private var myPrintButton : PushButton;
 
		public function AliveDemo() {
 
			/**
			 * Here we set up the UI items for the class, as well
			 * as add an empty printing container to the stage.
			 *
			 * Setup the button and their listeners
			 */
			addChild(_printingContainer);
 
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			var aHbox : HBox = new HBox();
			var myImageButton : PushButton = new PushButton(aHbox, 0, 0, "Image");
 
			var myVectorButton : PushButton = new PushButton(aHbox, 0, 0, "Vector");
			var myBlendButton : PushButton = new PushButton(aHbox, 0, 0, "Blend");
			myPrintButton = new PushButton(aHbox, 0, 0, "Print");
			var myText : Label = new Label(null, 0, 0, "Alive PDF - Printing Demo - Pure AS3 | for blog.juanbonfante.com");
			myVbox = new VBox();
			addChild(myVbox);
			myVbox.addChild(myText);
			//myVbox.addChild(myPushButton);
			myVbox.addChild(aHbox);
 
			myImageButton.addEventListener(MouseEvent.CLICK, OpenImage, false, 0, true);
			myVectorButton.addEventListener(MouseEvent.CLICK, OpenVector, false, 0, true);
			myBlendButton.addEventListener(MouseEvent.CLICK, ShowBlend, false, 0, true);
 
			defaultLabel = new Label(myVbox,0,0,"Please Make a Selection")
			defaultLabel.scaleX = defaultLabel.scaleY = 3;
		}
 
		/**
		 * Activated when the Blend Button is clicked
		 */
		private function ShowBlend(event : MouseEvent) : void {
			if(_imageLoaded)_printingContainer.addChild(_imageDisplay);
			if(_vectors)_printingContainer.addChild(_vectorDisplay);
 
			if(!_imageLoaded && !_vectors)myVbox.addChild(defaultLabel);
			else if(myVbox.contains(defaultLabel))
			{
				myVbox.removeChild(defaultLabel);
				myPrintButton.addEventListener(MouseEvent.CLICK, CreatePDF, false, 0, true);
			}
		}
 
		/**
		 * Activated when the Vector button is clicked. Auto populates empty container and adds it to the display list
		 */
		private function OpenVector(event : MouseEvent) : void {
			if(_imageLoaded) {
				if(_printingContainer.contains(_imageDisplay))_printingContainer.removeChild(_imageDisplay)
			}
			_vectorDisplay.x = 10;
			_vectorDisplay.y = 50;
			if(!_vectors) {
				for(var i : int = 0 ;i < numVectors ;i++) {
 
					var aChild : DisplayObject = _vectorDisplay.addChild(addVectors());
					aChild.x = Math.random() * 450;
					aChild.y = Math.random() * 800;
				}
				_vectors = true;
			}
			_printingContainer.addChild(_vectorDisplay);
			if(myVbox.contains(defaultLabel))myVbox.removeChild(defaultLabel);
			myPrintButton.addEventListener(MouseEvent.CLICK, CreatePDF, false, 0, true);
		}
		/**
		 * Function to randomly create vector drawing
		 */
		private function addVectors() : DisplayObject {
			var aVector : Shape = new Shape();
			var g : Graphics = aVector.graphics;
			g.beginFill(Math.random() * 0xFFFCCC);
			g.lineTo(0, Math.random() * 90);
			g.lineTo(Math.random() * 180, Math.random() * 75);
			g.lineTo(Math.random() * 13, Math.random() * 5);
			g.lineTo(0, 0);
			g.endFill();
			return aVector;
		}
		/**
		 * Used to load the image one the image button is clicked.
		 *
		 * If the image is already loaded, it is simply displayed.
		 */
		private function OpenImage(event : MouseEvent) : void {
 
			if(!_imageLoaded) {
				var url : String = "assets/demo.jpg";
				var req : URLRequest = new URLRequest(url);
 
				_imageDisplay.addChild(loader);
				//addChild(_imageDisplay);
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE, ShowImage);
				_imageLoaded = true;
				loader.load(req);
			} else {
				_printingContainer.addChild(_imageDisplay);
			}
			if(_printingContainer.contains(_vectorDisplay))_printingContainer.removeChild(_vectorDisplay);
			if(myVbox.contains(defaultLabel))myVbox.removeChild(defaultLabel);
		}
 
		private function ShowImage(event : Event) : void {
			_imageDisplay.alpha = 1;
			_imageDisplay.x = 10;
			_imageDisplay.y = 50;
			loader.scaleX = loader.scaleY = .25;
			imgText = new Label(_imageDisplay, 0, 0, "Image reduced to 25%");
			_printingContainer.addChild(_imageDisplay);
			myPrintButton.addEventListener(MouseEvent.CLICK, CreatePDF, false, 0, true);
		}
 
		/**
		 * Initializes AlivePDF class member
		 * and sets up image to printed or previewed
		 * @see http://alivepdf.org for documentation
		 */
		private function CreatePDF(event : MouseEvent) : void {
 
			/**
			 * The PDF Contructor takes the orientation of what you intend to print (i.e. paper orientation),
			 * as well as the units you wish it to measure the paper in,
			 * and the projected dimenstion of the sheet of paper LETTER, LEGAL, A4, etc...
			 */
			myPDF = new PDF(Orientation.PORTRAIT, Unit.POINT, Size.LETTER);
 
			/**
			 * Before we can do anything with our PDF class it needs to contain a Page.
			 */
			myPDF.addPage();
 
			/**
			 * Used to determine how we want our information to fit on the paper.
			 *
			 * Resize takes two variables:
			 * 1: Mode - How to resize: includes FIT_TO_PAGE , NONE, RESIZE_PAGE
			 * 2: Position - How to position resized image: includes CENTERED, LEFT, RIGTH
			 */
			var resMode : Resize = new Resize(Mode.FIT_TO_PAGE, Position.CENTERED);
			/**
			 * This adds a copy of our _priting container with the descriptor set up under resMode.
			 * THis is added to the current page of the PDF (first page in this case)
			 * and gives it a x,y offseet. Which is actually modified in this case by the Position variable
			 */
			myPDF.addImage(_printingContainer, resMode,20,30);
 
			/**
			 * setDisplayMode is used to setup how the PDF will actually open up in the
			 * respective viewer (Acrobat, Preview)
			 * and does not impact the actual print out in any ways
			 */
			myPDF.setDisplayMode(Display.REAL, Layout.SINGLE_PAGE, PageMode.USE_NONE, 1);
			//myPDF.setFont(IFont(FontFamily.ARIAL), 8);
			/**
			 * Setup  file metadata information. This is later written into the PDF headers
			 */
			//#######METADATA
			myPDF.setAuthor("Juan Bonfante | blog.juanbonfante.com");
			myPDF.setCreator("2010 © Juan Bonfante");
			myPDF.setKeywords("Juan Bonfante, AlivePDF, Demo, PureAS3, Flex, Flash, Actionscript");
			myPDF.setTitle("Alive PDF Demo | PureAS3");
			myPDF.setSubject("AlivePDF Demo");
			//#######METADATA
 
			/**
			 * Adds a peice of descriptive text to the document.
			 * You can *cautiously* use this to also format blocks and paragraphs onto your documents
			 * with dynamic text.
			 */
			myPDF.addText('PDF Generated by AlivePDF | blog.juanbonfante.com', 25, 25);
 
			/**
			 * Defines how the PDF should be saved
			 *
			 * By using Method.LOCAL the save function simply returns the newly created ByteArray.
			 *
			 * By using Method.REMOTE you would need a proxy file setup on the server in order to send the byte array
			 * to, and automatically attemps to download it.
			 *
			 * Method.Remote can be used if you don't have access to Flash Player 10
			 * otherwise with the FileReference class under FP10 you can simply just save it out.
			 */
			var output:* = myPDF.save(Method.LOCAL);
			var aFile:FileReference = new FileReference();
			aFile.save(output,"AlivePDFAS3Demo.pdf");
 
                       /**
			* If You wish to output using for Flash Player 9
			* You need to use a proxy in the language of your choice
			* For this example we use PHP
			*
			* Thanks to Joe Campbell for digging it up, since they've
			* been removed from the AlivePDF examples
			* AND COMMENT THE ABOVE 3 lines out
			*/
 
			//myPDF.save( Method.REMOTE, "create.php", "AlivePDFAS3Demo.pdf");

		}
	}
}

So if you’re on a Mac, and like me have multiple installations of Eclipse, you want to set them apart in your dock, and when you alt+tab. I put together this icon file that will give your Eclipse icons a new look, its a mini droid! Enjoy.

You have to goto your Eclipse installation directory, Right-Click your Eclipse Icon -> Show Package Contents -> Contents -> Resources -> REPLACE ECLIPSE.ICNS

Reboot Eclipse

should look like:

This is the OpenZoom viewer found in the downloads of the OpenZoom project under examples/cs4/multiScaleImage.

All I did was change the AS to look for a ‘source; property in the FlashVars object of the HTML page.

Enjoy.

I used this template for a presentation, now I’m sharing it with everyone.

OpenZoom_Presentation_Template

http://github.com/openzoom

I recently did a presentation for at DePaul University here in Chicago, for Upsilon Pi Epsilon, International Honor Society for the Computing and Information Disciplines. The talk focuses more on my view of Creativity as applied to Rich Internet Applications, and how I apply an Agile methodology in order to iterate quickly, and get a working product out of the door.

These are my “slides”… Well I Love Flash, and Hate PowerPoint. Google Docs is okay, but if I’m going to present I’m going to use the tools I use everyday, which in turn makes for a pretty cool presentation. I used OpenZoom for the presentation, its kind of a nice format if you have ALOT of ideas… but don’t feel like shrinking them into puny little slides.

OpenZoom Presentation

Work in progress

UPDATE: USE AT YOUR OWN RISK. HIGH LIKELIHOOD OF CRASHING YOUR BROWSER

Here is basic proof of concept inserting OpenZoom interfaces within openzoom interfaces to make a basic image gallery. Further tweak of the controls will prove a very nice browsing experience. Also pairing with Flash Player 10′s capabilities for 3D and we make something quite impressive, and very lightweight (this swf being 76k).

I realized the mixture of OpenZoom with AS3′s 3D capabilities offers a pseudo-3D engine. That doesn’t mean OpenZoom won’t play well with a fully loaded 3D engine….

If you’re an Actionscript programmer, you should probably at least know of FDT. If you don’t, travel over to their site, and download a copy of the software (free trial for 30 days). I’m assuming in this post you already have it installed, and you know how to compile files, and maybe even know how write your own ANT scripts.

One of the nicest features of FDT is its debugger, it is full of features you would never find in the IDE’s (CS3/4/5), and if you’re used to debugging in Eclipse it follows that same route.

Quite often I’ll be brought onto a project in the middle of its development cycle, so I don’t have an option on how it’s setup. Quite often in Flash, I end up dealing with a bunch of FLA files and I’m forced to use the IDE for compiling. Same thing with Flex, but luckily FDT can run MXML, so that’s not much of an issue, it might just take a little extra time to setup your Flex project in FDT. What I’m trying to say here is don’t worry how you’re getting your original project (Flash, Flex, in case of a miracle its already FDT), with a little bit of configuration time, you can get just about any Actionscript project to run in FDT.

So How DO I debug in the Browser using FDT?

Regardless of your project you have to do the following to Eclipse:

1. Goto Eclipse Preferences
2. General -> Web Browser
3. Click on RadioBox “Use External Web Browser”
4. Pick your browser of choice… that has the Flash Debug Player installed (Firefox for me)
   1. If you need to install the debug player: Flash Download Center and scroll down to “Adobe Flash Player 10 — Debugger Versions…” and pick the appropriate one for your environment.

Now Eclipse and FDT are ready for some remote debugging.

Now there are a few different cases you will probably end up doing a remote debug with. Sometimes you might be running a local html file, and sometimes you will be accessing a local running server. Both of these cases apply regardless of whether you are doing Flash (IDE) or a Flex project, or even if you don’t have either and all you have is a running swf that has debugging enabled.
*important note, if you’re not compiling with FDT, you have to make sure whatever swf you intend to target was compiled with a -debug flag. In the Flash IDE you can find this in the Profile settings of the FLA. Under Flex you have to add it to the compiler arguments.

(case: Flash IDE compilation)
Now you have a project setup in FDT, and you’re running the IDE to get your swf published. In FDT:

1. Create a new Class:
   1. name: DebugInBrowser
   2. package: doesn’t matter
   3. extends: flash.display.Sprite
2. You can leave it empty.
3. Click the little ARROR NEXT TO THE BUG – > Debug Configurations…

4. Once you create a new debug configuration under FDT AS3 Application, you can leaver pretty much everything the same, except for the start tab, change it to reflect the following… edit to match your project:
   

   Change for your setup.

5. That’s it. In case you want to target localhost, just change the “Open URI after compilation” to = http://localhost/mysite/index.html or somespecialpage.php or .asp or .py or .jsp it doesn’t matter as long as you know the swf you want to debug is there, and it has debugging enabled.

Over the past year I realized my blog was an unorganized collection of random thoughts I decided to compile on a whim… which is okay, I like my train of thought, its sporadic. I’m sure like myself and anyone who’s ever read my blog, you’ve realized you never really know what to expect.

Well that’s going to change.

Over the past year I’ve been studying some really cool facets about multiple different languages, teaching myself Python (which has more functionality than i ever imagined), started learning OpenFrameworks, and started learning some juicy tid bits about Android development.  Then there’s always Actionscript, where I’ve increased my knowledge by leaps and bounds…

After using wxPython, i realized Flex is actually ok. So I’m using Flex “a little” more (the Framework, not the SDK, I use the SDK ALL the time, duh); that and the newest version of FDT (beta) helped — full MXML-autocompletion.

Then there is the Library mayhem, where with the proper library you can do anything in Flash, so I will cover some of the ones I’ve been using, and some of the ones I’ve forgotten. Didn’t do much 3D work this past year, so I will revisit Away3D and Papervision3D as well as Maya, so expect articles on all. Then the few I’ve been promising articles on for like 2 months, AlivePDF and OpenZoom.

….*maybe even some Silverlight….

So WHAT’s this NEW format??

Well realizing I need to con myself into actually posting blogs, I will be posting on a schedule.
1 post a week.
Sunday seems like an appropriate day to do it.

Also to keep myself on track, I will have the next posts listed with their due dates. So if a post starts with a date… It hasn’t been published yet, and you’ll know when it will be

I will be doing a few video tutorials as well, since that format seems to lend itself much better for certain things.

Anyways, Happy 2010! This year is gonna be awesome I have new bionic spine!

The Scar a Week Later

I will explore writing an android application, that will let me transfer geo-location along with other data (pictures,video,etc) from android device, to the web using both Google Earth API (plugin) and Flash as Front-End(s).

I will explore using Python to push hi resolution images into Google Earth.

Ok… So they don’t have anything to do with each other directly. But they do in my case! Since I love Gran Turismo and Actionscript… and although I can’t get better at Gran Turismo by using AS3, I can get better at AS3 while playing Gran Turismo (*this is highly speculative, and probably false considering I’ve just been putting quick hax apps with the IDE… ohh did I mention I hate the IDE… well I found a use for it… ). Because of my surgery (Spinal Fusion… it was awesome) I have a bit of time to lay on my back and stare at screens…. here’s a result:

Ok… So that was the not very useful animation of the physics of turning…. hey they apply to real life to. But the actual purpose for all of this, was I found a settings guide for cars online (considering I’ve been playing the game for 7 years… I finally looked for help). Cool guide to you can find it here. But it was giving me percentages and I was just using Quicksilver to calculate it all, and well that was taking forever. I can write a post just about Quicksilver since it’s like the best thing you could ever use on your mac… but I’m not going there right now, this is about GT4. So I build a little something for you to see what settings stuff should be at. Theres a couple of other settings in the guide I’ve been meaning on putting in there… but I’m going back to the game now. Enjoy!

Source
All it does is takes a low limit number, the high limit number, then the percentage in decimal notation (i.e. 40% = .4)… then returns the number in relation to the original number.

*two swtich statements were harmed during the making of this swf