AS2 / Flash 8 and Apollo

Create a chromeless, transparent Apollo / Flash Widget for the desktop, complete with minimize and close buttons.

This should be a good starting point for those of you who would like to get on the flash widget train.

NOTE: If you are more comfortorable with Flash Remoting versus Flex Remoting, you will be pleased to know that I did do a quick test, and queries via CF from Flash worked fine in my wee Apollo app.

Download source

Apollo / Flex MXML

<?xml version="1.0" encoding="utf-8"?>

( 1 ) Change the ApolloApplication tag to Application. This is an important ingredient in making your app chromeless.
( 2 ) Call initApp on initialize from your Application tag. This will call the initApp function that creates the local connection that flash will use to communicate with flex.
( 3 ) Set your flex apps’ height and width to the height and width of your flash movie.
( 4 ) Set the style for the applications’ background color and image to nothin. This will allow you to acheive transparency, and therefore, total control of your look from within flash.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="145" height="145" initialize="initApp()" viewSourceURL="srcview/index.html">
<mx:SWFLoader source="stuff/myFlash.swf" x="0" y="0" width="145" height="145"/>
<mx:Style>
Application{
background-image:"";
background-color:"";
}
</mx:Style>
<mx:Script>
<![CDATA[
import flash.net.LocalConnection;
private var fromFlash:LocalConnection;
private function initApp():void{
fromFlash = new LocalConnection();
fromFlash.client = this;
fromFlash.connect("FlexConnection");
}

( 5 ) The following are the window functions that are called from flash to minimize, move and close the window. Gotta have a close button in a “chromeless” app.

public function closeApp():void{
this.stage.window.close();
}
public function maximizeWindow():void{
this.stage.window.maximize();
}
public function minimizeWindow():void{
this.stage.window.minimize();
}
public function onStartMove():void{
this.stage.window.startMove();
}
]]>
</mx:Script>
</mx:Application>

Apollo / Flex XML
( 6 ) Changing the value of “transparent” to true in your flex apps’ XML file. This is the second requirement for gaining transparency in your app.

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

Flash ActionScript – Nothin to it *thanks much to the posts of viconflex and getcrunk3000

( 7 ) Lastly, heres the way to call your LocalConnection from flash. These functions call the window functions in the flex container above.

closeBtn.onPress = function () {
var sendLC:LocalConnection = new LocalConnection ();
sendLC.send ("FlexConnection", "closeApp");
delete sendLC;
};
moveBtn.onPress = function () {
var sendLC:LocalConnection = new LocalConnection ();
sendLC.send ("FlexConnection", "onStartMove");
delete sendLC;
};
minBtn.onPress = function () {
var sendLC:LocalConnection = new LocalConnection ();
sendLC.send ("FlexConnection", "minimizeWindow");
delete sendLC;
};

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.