Tuesday, July 17, 2007

AIR Custom Chrome 2: Apple-shaped Application

In a recent AIR tutorial I showed how to make a window with custom chrome. A reader wrote a comment asking, "What about odd shaped windows? For example, an apple shape…" This question was among other requests for multiple windows and resizing with custom chrome. Today I'll tackle the apple-shaped window. Here is a screenshot of the completed application:




The first thing you need is an image of an apple that has a transparent background. I recommend *.gif format. You can use Adobe Fireworks to set the transparency. After you use the magic wand tool to remove the background, click "Save as" then open up options and you can set the transparent colors. Alternatively, you can just use this image.


We can re-use the code from the Custom Chrome AIR Tutorial, but we will have to change a few lines to get this to work.

1. Set up a new project and give it a name as described in the first steps of the Custom Chrome example. Then, in Flex Builder, right-click (PC) or ctrl-Click (Mac) on the name of the project and select "New -> Folder". Name the folder "images" and copy the transparent apple.gif file (referenced above) to that folder. If you do this outside of Flex Builder, you will have to tell Flex Builder to "refresh" the folders under the project. To do this, right-click (PC) or ctrl-Click (Mac) on the name of the project and go down the list to click "refresh". Flex Builder now sees the file.

2. Since we are making a transparent window the shape of an apple, the root pane must not have any visible rectangular components.

To get rid of the rectangular title window, remove these lines of code (basically everything in between the opening and closing <mx:titlewindow> and </mx:titlewindow> elements):


<mx:TitleWindow id="mainPanel" backgroundColor="#0326FD" layout="absolute" cornerRadius="15" alpha="1.0"
color="#FFFEFE" width="465" height="160" backgroundAlpha="0.7" borderColor="#1FBDF7" themeColor="#2FE7FD"
x="0" showCloseButton="true" close="closeEvent(event)">

<mx:Label text="Look mom - no chrome!" width="400" textAlign="center" fontFamily="Verdana" fontSize="15" fontWeight="bold" x="22.5" y="10"/>
<mx:Label x="62.5" y="92" text="(c) Duane Nickull - samples at technoracle.blogspot.com"/>
</mx:TitleWindow>
 

Replace them with this code for the apple-shaped window (cut-and-paste this if you're lazy like me or simply grab the full code from the end):


<mx:Image id="mainPanel" x="42" y="10" width="363" height="343"
source="images/apple.gif" scaleContent="true" autoLoad="true"/>
<mx:Button x="176" click="close()" y="305" label="Close" width="60" height="21"/>
 

If you named your directory something other than "images" you should change the code above to reflect this.

3. Now we need to add in the function "close()" that is called when the button is clicked. The function is only a few lines of code. Put this inside the existing <mx:script> element:


public function close():void {
stage.window.close();
}
 

That’s basically it. The complete code is below. Of course, you could use other methods to close the window. I just put the ugly button in the middle of the apple for convenience since I only had 15 minutes to write this.

Complete code (please feel free to cut-and-paste, use for your own purposes):


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:utils="utils.*" creationComplete="init()" height="424" width="465" >

<mx:Style>
Application
{
/*make app window transparent*/
background-color:"";
background-image:"";
padding: 0px;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
</mx:Style>

<mx:Script>
<![CDATA[
import flash.display.Bitmap;
import mx.events.CloseEvent;

public function init():void {

// Move the app when the panel is dragged
mainPanel.addEventListener( MouseEvent.MOUSE_DOWN, startMove );

}
public function startMove(event:MouseEvent):void {
stage.window.startMove();
}

public function close():void {
stage.window.close();
}
]]>

</mx:Script>


<mx:Image id="mainPanel" x="42" y="10" width="363" height="343"
source="images/apple.gif" scaleContent="true" autoLoad="true"/>
<mx:Button x="176" click="close()" y="305" label="Close" width="60" height="21"/>


</mx:Application>

Monday, July 16, 2007

Vancouver Flash/Flex/AIR event!!

From Ross Ladell:

Thurday July 19th the Vancouver Flash User Group is hosting an evening
with Paul Ortchanian. We're flying Paul up from San Francisco to give
a 2 hour presentation on getting the most out of the powerful
BitmapData class. Paul will also be taking us through a number of the
flash experiments on his site, www.reflektions.com .

This event is FREE, but you will need to create an account on the
Flash User Group's meetup website: You can get more information on the
event here: http://flash.meetup.com/110/calendar/5982036/ .

The VFUG website is www.flashinvan.com.

Wicked stuff. Vancouver is really starting to take off. Our August 30 RIA training is still in discussion but we are doing everything we can to put a full day together.

What is up with Air Canada anyways?

A while ago, I wrote a blog post about some genius at Air Canada who decided the company really needed to start charging $2.00 for a blanket. This in itself is completely asinine but nothing compared to their IT system. Matt MacKenzie just had an experience that shows the fragile state of their IT organization. This is a good read and reveals just how bad the state of things is.

What is the issue? I really though that once they got rid of car salesman/CEO Robert Milton and got a really good CEO like Monty Brewer in charge things would change.

Here is another treat from the fine folks at Air Canada. When you become "Elite" you get this special card with "Air Canada Elite Priority Contacts" on the back. The number on the top left for Toll Free North American is 1-800-401-7201. These are purported to be "special" numbers only for elites. If you call in, it asks you to enter your mileage number, then redirects you based on your query to the inevitable conclusion - a recording that says "Please hang up and call the Air Canada Elite Priority Contact" number on the back of your card.

Now the staff at Air Canada are really nice people and for the large part they go over their heads to be nice, helpful, cheerful on flights. Some of the best service I have had has been on Air Canada but they have to fix their management. PLEASE!!!