RSSMy first Adobe Air Application
28 Jan 2010 No Comments
in code, Design, flash, tutorial Tags: actionscript, adobe air, flash
To help improve my AS3 skills I thought a good starting project would be to challenge myself to create an Adobe Air desktop application, and after working on a Christmas countdown, I decided it would be rather nice to make a Countdown timer.
This article runs through a few things I had to learn in AS3 to create it.
Getting Adobe Air working
First thing I needed to do was ensure that Adobe Air was installed and that everything working.
- Install Adobe Air
- Ensure Flash is updated, and install all the available updates. For Flash CS4 they are here.
- Get the Adobe AIR SDK. Once downloaded this needs to be copied into the AIK folder in the Flash program folder – i.e. C:\Program Files\Adobe\Adobe Flash CS4\AIK.
Phew! Now creating the application…
First step was to get an accurate countdown mechanism. I found this Countdown example which was a good starting point to create a Countdown class in AS3. The basic idea is that it takes the current date and the specified event date then works out the difference.
Creating the event date input
I used Flash UI components for the drop down menus, but controlled their content using my Countdown class. To style the UI combo box component you can edit it in the FLA file, but to change the font you need create a TextFormat variable, then apply it to the component.
var comboFont : TextFormat = new TextFormat ();
comboFont.font = "Calvert MT Light";
comboFont.color = 0x333333;
comboFont.size = 12;
eventDayCombo.textField.setStyle ("embedFonts", true);
eventDayCombo.textField.setStyle ("textFormat", comboFont);
eventDayCombo.dropdown.setRendererStyle ("embedFonts", true);
eventDayCombo.dropdown.setRendererStyle ("textFormat", comboFont);
I then added data to the combo box. It is important to add this data dynamically to ensure that the Countdown is always up to date.
eventDayCombo.addItem ({label: dayStr, data: day})
Reading, saving and using XML data
Check if the data exists
Every time the application opens it checks to see if the user has already set an event date. The first thing it does is specify the name of the file, then where this file should be located. In my Countdown example the application creates an XML file called CountdownPrefs in the user’s My Documents folder.
var prefs:String = "CountdownPrefs.xml";
var prefsFile:File = File.documentsDirectory.resolvePath (prefs);
To check if a file exists on the system you can use prefsFile.exists; this will give a true or false result.
if (prefsFile.exists){
AS3 uses file streams to manipulate data; this makes the process much simpler than in AS2. It opens a file stream and reads the data. When it has completed reading the data the event listener calls the function processXMLData.
readStream = new FileStream ();
readStream.addEventListener (Event.COMPLETE, processXMLData);
readStream.openAsync (prefsFile, FileMode.READ);
}
Processing the data
So, to process the XML data I just use the function to specify the data then close the file stream. Now I can set my event date from the data in the XML file.
function processXMLData (event : Event) : void {
var prefsXML: XML = XML (readStream.readUTFBytes (readStream.bytesAvailable));
readStream.close ();
TITLE = prefsXML.child ("title");
YEAR = prefsXML.child ("year");
MONTH = prefsXML.child ("month");
DAY = prefsXML.child ("day");
HOUR = prefsXML.child ("hour");
MINUTE = prefsXML.child ("minute");
startCountdown ();
}
Saving new data
When the user sets their event date in the application it creates an XML file. First I defined what the content of the XML should be.
var dateStr:String = "<?xml version=\"1.0\" encoding=\"utf-8\"?><countdown><title>" + TITLE + "</title><year>" + YEAR + "</year><month>" + MONTH + "</month><day>" + DAY + "</day><hour>" + HOUR + "</hour><minute>" + MINUTE + "</minute></countdown>";
It then opens a file stream and writes the data to the location specified previously using the string variable to construct the XML content.
var newStream:FileStream = new FileStream();
newStream = new FileStream();
newStream.open(prefsFile, FileMode.WRITE);
newStream.writeUTFBytes(dateStr);
newStream.close();
Delete the data
To reset the countdown application all you need to do is simply delete the XML file then I called my reset function to restart the application.
if (prefsFile.exists){
prefsFile.deleteFile ();
resetCountdown ();
}
Using the Timer Class
So my Countdown function returns an object with the years, months, days, hours, minutes, seconds and milliseconds, then to update my countdown display I need to repeat the call every millisecond. I can use the Timer class to repeat the function call and get the updated countdown object.
timerObject:Timer = new Timer (delay, repeatCount );
timerObject.addEventListener (TimerEvent.TIMER, updateCountdown);
timerObject.start ();
The finishing touches
Creating a custom chrome
To make the application visually nicer I added my own chrome to it with minimise and close buttons, here is how: http://www.adobe.com/devnet/air/flash/articles/custom_chrome_app.html
Creating an application icon
This is very simple. All you need to do is create little image files in the sizes: 128×128, 48×48,32×32, 16×16 then on the publish settings you can add the icon images.
Publishing the application
All you have to do then is publish the application and it’s ready to go. Look out for my next post if you want to download the application and try it out.