You can read the full article here: Creating Application Menus in Mac OSX with Adobe AIR.

What You’ll Need

To get the beer glass image I used 7 pieces of equipment:

1. A beer
2. A beer glass
3. A coaster (this is optional)
4. Some (cheapie shop) lighting equipment
5. A large piece of white paper and something to prop it up
6. A camera
7. A siphon

Photographing

The setup was to fill the glass with beer and place it and the coaster on the sheet of paper.  The paper was then propped up (I used a wine bottle), turning it into a backdrop.  The lights were setup so I could get some highlights.  The paper being white is important here because I wanted the glass to be transparent and white lends itself to becoming transparent better than say, black.

Once had the scene setup I placed my camera on a tripod and framed the shot I wanted.  It really helps here to have a camera with a manual focus option and to triple check your focus unless you want to drink a few beers through a siphon.  It wasn’t very enjoyable.  Additionally, you’ll want to do this on a stable surface as the goal is to never move the cup at all.

With the stage set I snapped a pic of the full beer glass and then put the siphon in the beer and sucked out a little bit of beer and removed the siphon from the frame.  Rinse and repeat until the glass is empty.  After you have all your images it’s time to get them into Photoshop.

Masking

With your images in Photoshop it’s time to create some masks so we can knockout the beer glass and coaster. One of the nice things about this is that, for the shape we are masking (the beer glass), all of these images are essentially the same thanks to the tripod. So take your time with your masking technique of choice and make a really good mask on one of the images and then copy and paste it into all the other images. You’ll end up with something like this:

Once I had all my images masked I collected them into a single layered file, one image per frame, and cropped the image down to just the glass. This is a good point to save your work.

The next thing to do is add some transparency the to progressively more empty images of the glass. To do this I merged each of my layers with an empty layer. This has the effect of eliminating the mask used to knockout the glass producing a flat image with transparency where the mask was. I then created a new layer mask for each layer and used a brush set to about 25% opacity and 25% hardness to slowly paint over the areas where one would expect to be able to see through the beer glass. I found it helpful to make a screen cap of my desktop and throw it in under all the layers so I could see if the transparency looked good against it.

Creating all these transparencies for the glass is quite time consuming but in the end it creates a very nice effect. Be sure to save the layered file as a PSD so you can come back to it later if need be. At this point you have all your assets and now it’s time to make a decision about how to use them. In my case one of my goals with Beer Near Here Desktop was to create a completely Flex-based solution. Specifically, I wanted the animation I created with the beer glass to be done with Flex so I exported all of the layers out as individual 24-bit PNGs (preserving the nice transparency I worked so hard at creating) and imported them into my Flex project.

These PNGs look great but they also now account for the bulk of BNHD’s file size. An alternative approach is to import the layered PSD into Flash, create the animation there and then import the resultant SWF into your Flex project. This will almost certainly result in a smaller size for the app, which is ideal unless you have other goals like I did.

Beer Near Here Desktop (BNHD) is a very simple app.  All it needs to do is take a location as input and display the results.  As such my feature list is very short:

• Search for beer near a given location
• Display results
• Display app info

This list makes up the core of what BNHD does; nothing more, nothing less.  I told you it was simple.

Additionally I plan to add:

• Printing
• Maps
• Directions

These three features will add some serious utility to BNHD and take the app from being a neat little experiment to a truly useful desktop tool.  These three features are also the most labor-instense and add little toward my personal goals for developing the app so they’re getting put off til a later date.

The real purpose of BNHD is give AIR a spin.  Specifically, I wanted to see how dynamic I could make an AIR application using only Flex — no Flash for animations or anything like that.  I already know I can use Flash to handle animations quite nicely and I’m interested in seeing Flex … errr … flex (sorry) it’s muscle.

So I hinted at animation being one of my “personal” features, to clarify I wanted to have a loading animation that centered around beer.  I also wanted to have a custom skin that really said, “beer”.  These two things definitely needed to come together and, if you’ve used the app you know how.

I also wanted to steal an effect from Apple’s dashboard widgets.  Most dashboard widgets have an info button that flips the widget over like a card to display settings or other information about the widget.  BNHD is really more of a widget than a full-fledged application so I think this effect fits nicely.  Also it’s just cool and a bit of a challenge.

This gives me a list of “personal” features that looks something like this:

• Custom skin
• Loading animation tied into the custom skin
• Flip effect to display app info

I now have my list of features for BNHD, but there is still one more thing to consider.  One of the features for BNHD is “Search for beer near a given location” which cannot be handled entirely within the app.  The reason this cannot be handled locally is because the database BNHD searches is stored on a remote web server so as part of the search I’ll be making a request to a web server which means that, as part of the search feature, I’ll need to consider how this request will be made and handled.

The web server in question is running Drupal so the quick and easy answer is to write a module that handles remote search requests.  I took this a step further by setting up a sub domain of beernearhere.net that exclusively handles remote requests.  Doing this allows me to segregate and better track the traffic on beernearhere.net.  Having a remote client also increases the likelihood of some kind of hack or exploit since I’m relinquishing some control by creating a remote client that is installed on a user’s machine so this allows me to quickly shut off all remote requests if something bad happens.

So my revised list of features to implement for a version 1.0 release are:

• Create a custom skin for the app
• Search for beer near a given location by making a request to a remote server
• Display a loading animation that integrates with the custom skin while waiting for the response to the search request
• Display app info using a flip effect

Pretty straightforward stuff.  Next time we’ll start by setting up our project and creating the custom skin.

Read Part 3.

I could do much of what BNH Desktop does on the web, but I’d have to rely on users having Flash and for the users that don’t, well, I have to handle them as well, usually by gracefully degrading the experience.  All of this is a lot of work and testing and, again, in my humble opinion, not usually worth it.  From a design standpoint I think a website should be embraced for what it is and not shoehorned into some Flash app that just happens to run in a web browser.

I’ll now step down off my soapbox and get back to the point of this post: Beer Near Here Desktop is a cool example of an AIR application and I want to cut it open and share all it’s secrets.  When I decided to write this app the first thing I did was check out what else is out there for AIR and something that kept showing up was Kuler for AIR.

Kuler, is an Adobe application for creating color swatches and, from everything I read, the AIR version is something that was written to show off some of the cool things you can do with AIR.  And sure enough it does show these things off.  It has custom skin and some neat effects.  The trouble is that there is no explanation of how to accomplish any of this.  It’s almost a tease, “See, you can do all this cool stuff…but we’re not going to tell you how.”

Undeterred, I went on to do some more Googling and reading with the end result being Beer Near Here Desktop.  You should check it out.  FYI, I’m not paying $300 to sign my code with Verisign so you’ll have to just trust me on the install.

Some of the neat features of BNH Desktop include:

• A custom skin.  In Flex/AIR parlance this is “custom chrome”.
• A loading/waiting animation that integrates with the skin.
• A flip effect.
• Custom roll-over buttons.

So now you know you can do these things and I aim to explain them as well.  But for that you’ll have to stay tuned until next time as I want to give each feature it’s due.

Read Part 2.