Sape’s Blog

I noticed that the max upload allowed was really 100KB and not 100MB, so I fixed the calculations and also added an address location in the browser. Hopefully the next update will have some basic photo editing features, like cropping, brightness, contrast. Maybe even add a feature that will email the link to the group. I will have to get with Nick, but it would also be cool to upload directly to a group and do some more managing in the air app, like moving pictures from group to group, etc.

Here is the new version: katanapg-v101-beta.air.zip

Monstagon was wanting to create a custom window for an AIR application at work and could not figure out how to do it. I had found a tutorial that used an apple shaped window, but I seem to have lost the bookmark. So I figured I’ll just post my own tutorial. Since that is what this dang blog is for!

First, create a new AIR application in Flex Builder. I called mine NonStandardGUI, but you can call it “whatever.” Then, open up the app-XML file (”NonStandardGUI-app.xml”) and we will edit the properties here first. This file is loaded automatically and contains all of the basic application properties. Set these properties to

systemChrome = none
transparent = true
visible = false
width = 800
height = 600
x = 100
y = 100

in the “initialWindow” section. The width, height, x and y are optional; you just need to make sure the size is big enough for the background image and the location on the screen allows you to see the whole window.

Now we will edit the NonStandardGUI.mxml (the main application file). To the WindowedApplication, add these attributes

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
        showTitleBar="false" showStatusBar="false"
        backgroundAlpha="0.0" borderThickness="0" >

This gets rid of the window. If you were to save and run the app now it would display nothing.

To add your image as the background, simply an Image tag with the source pointing to the actual image file. For better performance, we want to embed these static images. This could be a PNG, JPG, SWF… So the background can be anything you can create.

<mx:Image id="background" source="@Embed(source='nonStandard_GUI_test.png')" />

With the image in place a a background, you can add all the content you like to it. Due to the nonstandard shape of the new window, laying content out might be a little more time consuming since the Flex Builder Design view doesn’t load the image for you. I have attached the source code for my NonStandard GUI for you to dissect.

Source code: nonstandardgui.zip

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.

Method	Peak Memory (KB)
image.width/height	33,351
bitmap.scaleX/scaleY	61,837
bitmap.draw	7,107

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!