This tutorial extends the earlier tutorial about making Apollo JukeBox. In this tutorial we will see how to make application’s window transparent.

 

When we compile an Apollo app it uses the default set of window properties like rectangular shape with the usual minimize, maximize and close button. But Apollo provides features to make windows transparent and features to move the application on the desktop.

 

We have to perform following two task to achieve our result.

  1. Making the window transparent.
  2. Providing features such as closing and moving the application.

Task 1:Making the window transparent

As we will not be using the default systemChrome ,we have to make change at two places

  1. Open the ApolloJukeBox.mxml file in the Flex Builder.Change the start tag from <mx:ApolloApplication> to <mx:Application> and the end tag from </ApolloApplication> to </Application>.

Then open the ApolloJukeBox-app.xml file.Here you will see the following line

<rootContent systemChrome=”standard” transparent=”false” visible=”true”>[SWF reference is generated]</rootContent> .Now modify the attribute systemChrome from “standard” to “none” and the transparent attribute from “false” to “true”.

The code will look like this

<rootContent systemChrome=”none” transparent=”true” visible=”true”>[SWF reference is generated]</rootContent>.

  1. Now we have to make our own style statement for the application’s window such as color or background image etc.

Type this code in the ApolloJukeBox.mxml

<mx:Style>

Application

{

background-color:””;

background-image:””;

padding: 0px;

}

</mx:Style>

And we are done. Now if you can compile the file and the app will render windowless.

 

Task 2: Providing custom features like and closing and moving the application.

Type the following code to add the close button to the panel

<mx:Button x=”173″ y=”10″ label=”X” click=”onClose(event)”/>

Now declare the function onClose() inside the <mx:Script> tag

private function onClose(evt:MouseEvent):void {

stage.window.close();

}

On clicking the “X” button the mouse event fires the onClose function whch closes the window.

You can Run the file and test it.The app will appear window-less.Click the “X” marked button to close it.

Now let’s think about moving the app on desktop.

The user will hold the mouse down on the application and try to move it. For this the app has to listen to and respond to the mouse event after it initializes.

The event we will use here is MouseEvent.MOUSE_DOWN.

So change the appCompleteHandler() function from

private function appCompleteHandler():void

{

defaultFile = File.documentsDirectory.resolve("test.txt");

stage.window.width = 500;

stage.window.height = 500;

stage.window.x = 10;

stage.window.y = 10;

stage.window.visible = true;

}

to

private function appCompleteHandler():void

{

defaultFile = File.documentsDirectory.resolve("test.txt");

stage.window.width = 500;

stage.window.height = 500;

stage.window.x = 10;

stage.window.y = 10;

stage.window.visible = true;

this.jkBox.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

}

Now lastly modify the panel a little bit.

<mx:Panel x=”112″ y=”68″ width=”243″ height=”137″ layout=”absolute” id=”jkBox”

label=”Music Tunes” title=”Apollo JukeBox” borderColor=”#00003c” backgroundColor=”#a3cafa” cornerRadius=”8″ themeColor=”#0080ff”>

<mx:Button x=”10″ y=”13″ label=”Browse” id=”openId” click=”openFile()” fillColors=”[#203fd0, #203fd0]”/>

<mx:Button x=”56″ y=”43″ label=”Play” click=”startPlay()” fillColors=”[#203fd0, #203fd0]”/>

<mx:Button x=”113″ y=”43″ label=”Stop” click=”stopPlay()” fillColors=”[#203fd0, #203fd0]”/>

<mx:Label x=”10″ y=”70″ text=”Song:” fontWeight=”bold” color=”#804040″/>

<mx:Label x=”46″ y=”70″ text=”{songName}”/>

<mx:Button x=”173″ y=”10″ label=”X” click=”onClose(event)”/>

</mx:Panel>

And your app is now ready.

You can save and Run it to see if everything works OK. If everything works OK, export it and distribute it.

 

Something for you to Try:

Try using a background image for your app.

Download Source

Download Application

Here are the alternative download links from rapidshare.com(Use this in case the above links do not work ).

Link for source file

http://rapidshare.com/files/22820898/jukebox2_source.zip.html

Link for application file

http://rapidshare.com/files/22821214/apollo_jukebox_1.1_air.zip.html

Please report  in case of broken links .

Advertisements