While working on KatanaPG (picture uploader) I ran into a memory issue. Pictures, especially those taken with 6+MP cameras, are HUGE. When I was creating the thumbnails for them in the TileList was was simply resizing them. This kept all that 6MP of data in memory just loooked smaller. I needed to resample it at a lower resolution and then dispose of the original. I tried it multiple ways, first using an Image and setting the source and then the width and height.  Then using a bitmap and scaleX and scaleY (as well as ImageSnapshop, but never go that to even work).  After posting a question to flexcoders a very kind replier said: “Use bitmap.draw.”  That method worked great.  Below is a chart of the Flex Profile peak memory for each method. Pictures imported: 23 Photo Booth pictures 640 x 480 and about 150KB on disk each.

I don’t know exactly why the first two methods take up almost as much memory as Firefox, but I am glad I managed to reduce the memory significantly. Now for he part you all have been waiting for, CODE. I used this code for a TileList.itemRenderer.

	<?xml version="1.0" encoding="utf-8"?>
	<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100" initialize="init();" creationComplete="created();" dataChange="init()">
	    <mx:Script>
	        <![CDATA[
	            import mx.graphics.ImageSnapshot;
	            import mx.core.UIComponent;

	       		private var _created:Boolean = false;

		        private function created():void
		        {
		            _created = true;
		            init();
		        }
		        private var contentLoader:Loader;
		        private function init():void
		        {
		            if(!_created)
		                return;
		            removeAllChildren();
		            contentLoader = new Loader();
		            contentLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadComplete);
		            contentLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, IOErrorHandler);

		            var request:URLRequest = new URLRequest(data.url);
		            contentLoader.load(request);
		        }

		        //When image loaded, create scaled bitmap
		        private function LoadComplete(evt:Event):void
		        {
		            evt.stopImmediatePropagation();
		            var loader:Loader = Loader(evt.target.loader);
		            var image:Bitmap = Bitmap(loader.content);

		            var sxy:Number = (image.width > image.height)?(95/image.width):(95/image.height);
		            var scaleMatrix:Matrix = new Matrix();
		            scaleMatrix.scale(sxy,sxy);

		            var container:UIComponent = new UIComponent();
		            addChild(container);

		            var scaledImage:Bitmap = new Bitmap(new BitmapData(95,95,true,0));
		            scaledImage.bitmapData.draw(image,scaleMatrix);

		            container.addChild(scaledImage);
		            contentLoader = null;
		            image.bitmapData.dispose();
		        }
		        private function IOErrorHandler(evt:IOErrorEvent):void
		        {
		            trace("Error loading",data.url);
		        }
		    ]]>
		</mx:Script>
	</mx:Canvas>

I made a simple AIR app to upload pictures to my buddy’s online photo gallery, Katana Photo Groups.  The AIR app is very basic (first workign version released); but it does in fact work.  So this is what you do:

1. Select directory to upload pictures from.
   OR
2. Drag and Drop files onto app.
3. Slecect the pictures you would like to upload.
4. Login to KatanaPG.
5. Click upload to upload pictures.

The above order clearly isn’t set in stone, but it gives you a basic idea of how the application works.

After that your pictures will be uploaded into your Inbox. You will need to already have a KatanaPG account for this to work.

It uses FZip (Actionscript zipping library) to compress the images into a zip and then uploads the zip to Katana.  I hope to had some basic images editing, drag and drop support, and it also needs some optimization.

Here is the package: katanapgair.zip

You will need Adobe AIR to run this.

UPDATE:

Added drag and drop from the PC and also fixed some memory issues.

I added some updates to the Magic Deck Builder.

• Double click on a card to see a detailed view of the card.
• Keyword search, so if you want to search for “slivers” type it in and only slivers will show.
• Added mana images and the ability to sort cards by mana amount in the Library Grid.
• Can save decks (only for the current session) and double click on decks to simulate the different ones.

Still need to develop the database and get all those card images in there…

The guys at work and I like to play Magic The Gathering. After a while, we started to want an easier way to make and organize our decks. Most use spreadsheets, others nothing and hope the deck works out. Some how, after “Evil Jar” stayed up till 3:32 AM looking for “Deck Builders,” he wanted to make one. Me, being bored and looking for something to do, decided to try and make on Flex. I decided not to deal with the database yet, just creating the interface; and since everyone else is dumping that on him, I conned “H” into being the DB guy.

So the Magic Deck Builder is up and running. Just for playing around and so “Rat Bastard” can tell me how he likes it! (There is also a link to the right under “Apps.”)

This is a little “Hello World!” with a button tutorial for Jeff, since he was having trouble with Flex. So, Jeff, start a new project in Flex Builder. Let’s call it, “HelloSape”. Now, go to the Design view of HelloSape.mxml and drop in a Label, fill in the ID with “sapeLabel“, and fill the Text with “Hello Sape!“. Now drag in a Button next to the Label, fill in the Button Label field with “Goodbye!“, and fill in the On click with “DoClick()“. Switch to Source view.

Enter this code above the Label:

<mx:Script>
<![CDATA[
private function DoClick():void
{
sapeLabel.text = "Goodbye Sape!";
}
]]>
</mx:Script>

Save and run the application! Click the button and it should change the label!