Creating A simple AIR Application
By Riyadh Al-Balushi | Flash CS4 | ActionScript 3.0 | Beginner | Page 1, 2, 3This section will explain how to make the clock actually work by using the Date Class. We will also script our close button and make it possible for the user to drag the clock around the screen. The outline of this section is as follows:
- Coding the Clock.
- Coding the Close Button.
- Coding the Window Drag Movement.
Starting the Code
We are going to write all of our code in a single frame of a new layer. So access the Timeline, create a new layer and name it Actions. Now right-click the only frame on this new layer and select Actions to open up the Actions Panel.
All of our code will be written here.
Coding the Clock
The clock hands can be manipulated to indicate the time by using the Date Class. The clock code needs to be executed repeatedly. To do this we are going to create an event listener and register it for the ENTER_FRAME event so that the code is executed repeatedly at the entry of each new playback frame. The code below creates registers an event listener called timeUpdate() with the event ENTER_FRAME and the defines the event listener function.
function timeUpdate(e:Event):void{
}
We are going to create an instance of the Date Class inside the timeUpdate() event listener function which we will use in a bit to move the clock hands:
function timeUpdate(e:Event):void{
var my_date:Date = new Date();
}
We will now use the various properties of the Date Class to modify the rotation property of each of our clock hands. The value is modifying with a multiplier to make the hands have a full revolution per hour, minute, second, etc.
function timeUpdate(e:Event):void{
var my_date:Date = new Date();
hours_mc.rotation=Number(my_date.hours)*30;
minutes_mc.rotation=Number(my_date.minutes)*6;
seconds_mc.rotation=Number(my_date.seconds)*6;
}
That should do it for the clock. You can now test your movie by going through Control>Test Movie.
Coding the Exit Button
Making our exit button execute the function is pretty simple. We need to start off by registering an event listener with the MouseEvent.CLICK for close_btn. We will start by doing just that:
function timeUpdate(e:Event):void{
var my_date:Date = new Date();
hours_mc.rotation=Number(my_date.hours)*30;
minutes_mc.rotation=Number(my_date.minutes)*6;
seconds_mc.rotation=Number(my_date.seconds)*6;
}
close_btn.addEventListener(MouseEvent.CLICK, onClose);
function onClose(e:MouseEvent):void{
}
The command to make the application close is a method of the NativeApplication class called exit(). This method is executed in the following format:
function timeUpdate(e:Event):void{
var my_date:Date = new Date();
hours_mc.rotation=Number(my_date.hours)*30;
minutes_mc.rotation=Number(my_date.minutes)*6;
seconds_mc.rotation=Number(my_date.seconds)*6;
}
close_btn.addEventListener(MouseEvent.CLICK, onClose);
function onClose(e:MouseEvent):void{
NativeApplication.nativeApplication.exit();
}
You can now test your movie again to see that the window closes when you press on the close button! However, a small issue you might notice is that the cursor does not change to the finger pointer when you hover the mouse over it. To fix this problem we simply need to set the buttonMode property of our button to true:
function timeUpdate(e:Event):void{
var my_date:Date = new Date();
hours_mc.rotation=Number(my_date.hours)*30;
minutes_mc.rotation=Number(my_date.minutes)*6;
seconds_mc.rotation=Number(my_date.seconds)*6;
}
close_btn.buttonMode = true;
close_btn.addEventListener(MouseEvent.CLICK, onClose);
function onClose(e:MouseEvent):void{
NativeApplication.nativeApplication.exit();
}
Our close button is now ready.
Dragging the Window
Our end project will have a transparent chrome and no direct window outline around it. This means that we will have to manually create a method to let the user drag the window around. We are going to do this by attaching the code to drag the window to the body of the clock. Again, we are going to start by registering an event listener with the event MouseEvent.MOUSE_DOWN for body_mc.
function timeUpdate(e:Event):void{
var my_date:Date = new Date();
hours_mc.rotation=Number(my_date.hours)*30;
minutes_mc.rotation=Number(my_date.minutes)*6;
seconds_mc.rotation=Number(my_date.seconds)*6;
}
close_btn.buttonMode = true;
close_btn.addEventListener(MouseEvent.CLICK, onClose);
function onClose(e:MouseEvent):void{
NativeApplication.nativeApplication.exit();
}
body_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDragStart);
function onDragStart(e:MouseEvent):void{
}
The command to start dragging our window is a special method of the NativeWindow object. This method can be invoked this way:
function timeUpdate(e:Event):void{
var my_date:Date = new Date();
hours_mc.rotation=Number(my_date.hours)*30;
minutes_mc.rotation=Number(my_date.minutes)*6;
seconds_mc.rotation=Number(my_date.seconds)*6;
}
close_btn.buttonMode = true;
close_btn.addEventListener(MouseEvent.CLICK, onClose);
function onClose(e:MouseEvent):void{
NativeApplication.nativeApplication.exit();
}
body_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDragStart);
function onDragStart(e:MouseEvent):void{
stage.nativeWindow.startMove();
}
That should do it. You can now test your movie to see that you can drag the window around by pressing on the body of the clock.
We can make this effect a bit nicer by lowering the transparency of the movie and then restoring it when the mouse is raised. To do this, we first have to lower the alpha property to 0.5 from our onDragStart() event listener function:
function timeUpdate(e:Event):void{
var my_date:Date = new Date();
hours_mc.rotation=Number(my_date.hours)*30;
minutes_mc.rotation=Number(my_date.minutes)*6;
seconds_mc.rotation=Number(my_date.seconds)*6;
}
close_btn.buttonMode = true;
close_btn.addEventListener(MouseEvent.CLICK, onClose);
function onClose(e:MouseEvent):void{
NativeApplication.nativeApplication.exit();
}
body_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDragStart);
function onDragStart(e:MouseEvent):void{
stage.nativeWindow.startMove();
alpha=0.5;
}
We can restore the transparency by registering for the event of MouseEvent.MOUSE_UP and passing the code from there:
function timeUpdate(e:Event):void{
var my_date:Date = new Date();
hours_mc.rotation=Number(my_date.hours)*30;
minutes_mc.rotation=Number(my_date.minutes)*6;
seconds_mc.rotation=Number(my_date.seconds)*6;
}
close_btn.buttonMode = true;
close_btn.addEventListener(MouseEvent.CLICK, onClose);
function onClose(e:MouseEvent):void{
NativeApplication.nativeApplication.exit();
}
body_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDragStart);
function onDragStart(e:MouseEvent):void{
stage.nativeWindow.startMove();
alpha=0.5;
}
body_mc.addEventListener(MouseEvent.MOUSE_UP, onDragStop);
function onDragStop(e:MouseEvent):void{
alpha=1;
}
Great, test your movie now to see your effect in full!
This completes this section. In the next section we will have to configure the export settings and self-sign our AIR Application so that we can create the AIR installer.