Designing Apollo apps in Fireworks/Photoshop

June 11th, 2007

p>The great thing about designing applications in Apollo/Flex is that it’s so easy. You can draw the entire window in Fireworks, save as a png, and then use straight in Flex without any modifications. Below is an example window, made in Fireworks (download here).

You can give the window a transparent background, rounded corners and a shadow - you can practically make it in any shape you want.

To use your custom chrome, you’ll need to edit the Apollo ‘app.xml’ file as below:

<rootContent systemChrome="none” transparent=”true” visible=”true”>

So, to import the image and allow drag drop and closing, do something like the following:

 <?xml version="1.0" encoding="utf-8"?>
  <mx:Application
		xmlns:mx="http://www.adobe.com/2006/mxml"
		creationComplete="init(event)"
		layout="absolute" height="486"  width="911"
		verticalScrollPolicy="off"
		horizontalScrollPolicy="off">

		<mx:Script>
			<![CDATA[

			   [Embed(source="AirShare.png")]
			   [Bindable]
			   public var main:Class;

    		]]>

		</mx:Script>

    <mx:Image mouseDown="stage.window.startMove()"
		x="0" y="0" source="{main}"/>

    <mx:Button click="stage.window.close()"
		x="868" y="10" width="27"
		alpha="0.0"  height="32.8"/>

  </mx:Application> 

You may need to edit the pixel values depending on your window size, you can easily do this by temporarily drawing something over the appropriate area in Fireworks and using the x and y coords of that.

You you’ve got the basic layout, but what about styling? The easiest way is to grab one of Juan’s themes, or by styling the css yourself using the Flex Style Explorer. TheFlexBlog has got a good example of this designing technique.

Below is a screenshot of AirShare, an Apollo app for file sharing on LANs.

Uncategorized | Comments | Trackback