Create Your Own Adobe AIR Application with Flash

In this tutorial we’ll create a Twitter Reader application, fed from your own Twitter updates. We’ll look at some of the features of the nativeWindow class, how to sign it and make an install package.

Final Result Preview

Let’s take a look at the final application we’ll be working towards:

Step 1: Install Adobe AIR Runtime

With this player we can run any application with the .air extension, like the new Adobe Media Player. First we need install the Adobe AIR player, so go to Adobe and download the player. Choose your operating system and click download. When the download’s complete, install it.

Step 2: Install Adobe AIR Extension for Flash CS3 and CS4

Now we need our second element to develop AIR applications: the extension. In this case I’m using the one for Flash CS3 but it’s available for Flash CS4 too. Go to the Adobe Flash Support Center. Before you install the Flash update for Adobe AIR, you need to download and install the latest Flash Player update (9.0.2), which you can download here: http://www.adobe.com/support/flash/downloads.html#902.

Then you need to download and install the Adobe AIR Update for Flash CS3 Professional: http://www.adobe.com/support/flash/downloads.html.

Step 3: Document Setup

At this point, when you start Flash CS3 or CS4, on the welcome screen you’ll have the option of creating an Adobe AIR Flash file. Do it! Set the stage size to 300px wide and 500px high with 30 fps. I’ve chosen a white color for the background. Save it as "my-twitter-updates.fla".

Step 4: Creating the Background

We’re going to use an iPhone image as the background, so go to Sam Brown’s website (nice vectors) and download the package of iPhone images. Open the file with Fireworks or Photoshop and choose any size (without text) then export as "bg_iphone.png".

In Flash, choose File > Import then import the "bg_iphone.png" to stage. Select it and align it vertically and horizontally center. Convert this image to a movieclip symbol named "mcIphone", then go to properties and assign "twitterApp" as its instance name. Double-click the symbol and rename the first layer as "bg_iphone". You should now have something like the following image:

Step 5: Creating the Dynamic Textfields

Now go and create a new layer for the title of our application. Draw a dynamic text field and assign it "title_app" as an instance name.

Then add two new layers; the first named "my updates" and the second named "follow me". Create a multiline dynamic text field on the "my updates" layer with the following properties:

• 11 font size
• multiline textfield
• white color
• activate render text as html
• assign "myUpdates" as the instance name

We’ll need a button for Follow Me on the "follow me" layer, so go to draw a rectangle at the bottom of the iPhone area and convert it to a button symbol with the text "Follow Me". Afterwards, assign "btFollowme" as the instance name.

Step 6: Add Scroll Buttons

At this point we need two buttons; up and down for scrolling the content of the "my updates" textfield. Go to the timeline panel and add a new layer. Type the name "scroll buttons", then draw an arrow on stage and convert it to a movieclip symbol. For the other button copy, paste and flip it verticaly. Assign "btUp" and "btDown" as an instance name. Finally, go back to the main timeline. When you finish you should have something like the following image.

Step 7: Getting Twitter Feed URL

Firstly, we need your RSS feed URL, so go to your Twitter home page. Now click on the Profile button in the top bar navigation. Go to the right panel, right-click on "Rss Feed of username" and copy the URL.

Step 8: Anatomy of Twitter RSS Feed

Let’s examine the structure of our Twitter RSS updates. The first part is the channel rss info and the second part is the loop of updates. We’ll use some basics nodes: the link of the first part, title, pubDate and the link of the loop item.

Step 9: Begin Scripting XML

Go back to Flash and create a new layer for the actions, it’s time to start coding. As you can see, the first variable contains the RSS feed URL from your Twitter profile, so paste in yours:

var twitterURL:String = "http://twitter.com/statuses/user_timeline/16211488.rss"; 
  var twitterXML:URLRequest = new URLRequest(twitterURL); 
  var myLoader:URLLoader = new URLLoader(twitterXML); 
myLoader.addEventListener("complete", xmlLoaded);

Step 10: Begin the XmlLoaded Function

With this function we can load the RSS and each node listed, before starting to define the variables of the xml nodes:

function xmlLoaded(evtObj:Event) { 
var twitter:XML = new XML(myLoader.data); 
var TwitterTitle:String = twitter.child(0).description; 
var UserUrl:String = twitter.child(0).link; 

Step 11: The Updates Loop

In this part we need to get the values of the xml nodes and assign them to a myUpdates variable. Use a for statement to do so.

var myUpdates:String = ""; 
   
  for each (var nodo:XML in twitter..item) { 
  myUpdates += "<a href='"+nodo.link+"'><font color='#a4917c'>"+nodo.title+"</font></a><br>"+"<font color='#a4bc34'>"+nodo.pubDate +"</font><br/><br/>"; 
}

Step 12: Text Fields and Event for Follow Button

First we display the title of the application, then we get the updates and finally add a EventListener for the follow button with the user’s url (Example: http://twitter.com/_dariux).

//THE TITLE APP > "Twitter updates from Darío Gutiérrez / _dariux." 
twitterApp.titleApp.text = TwitterTitle; 
 
//Display the value of myUpdates into the textfield 
twitterApp.myUpdates.htmlText = myUpdates; 
 
//Actions for Follow Me button 
twitterApp.btFollowme.addEventListener(MouseEvent.CLICK, btFollowme_CLICK);

  function btFollowme_CLICK(e:MouseEvent):void{ 
  var targetURL:URLRequest = new URLRequest(UserUrl); 
  navigateToURL(targetURL); 
  } 
   
  }

Step 13: Actions for the Scroll Buttons

Simple code for the scroll buttons, check this code:

//Listeners and functions for scroll buttons 
  twitterApp.btUp.addEventListener(MouseEvent.CLICK, scrollUp); 
twitterApp.btDown.addEventListener(MouseEvent.CLICK, scrollDown);

  function scrollUp(Event:MouseEvent):void { 
  twitterApp.myUpdates.scrollV -=5; 
  }
  
  function scrollDown(Event:MouseEvent):void { 
  twitterApp.myUpdates.scrollV +=5; 
  }

Step 14: Testing the Application

Test the movie (Menu Control + Test movie or cmd + enter). As you can see, it’s a normal window just as when you use the typical flash player. In the following step we’ll customize our application and you’ll notice the difference..

Step 15: Application and Installer AIR Settings

For the AIR Settings in Flash CS4 go to File > AIR Settings and for Flash CS3 go to Commands > AIR Application and Installer Settings. In this window we’ll begin to customize the application, so let’s go to the description field and write some general info.

Window Style
The Window Style is interesting. There are three styles: chrome, opaque and transparent. The Chrome style is like a simple window with buttons, background and border, the Opaque is a window with background but without buttons and the last style Transparent is a window without buttons and background. In our case, choose the Transparent style.

Icon
Choose an icon (or design one) for your application in differents sizes 16px, 32px, 48px, 128px with .png extension.

Advanced
In this option you can select the differents settings for the window when your application is launched, options for folders to install and updates.

Digital Signature
When you want to ship your AIR application, you’ll need a digital signature for the installer to install in other user’s systems. In this case we’ll sign our application with untrusted certificate to allow runtime AIR to install as Unverified publisher. If you need more details on how to get a certificate visit the following link: Digitally signing Adobe AIR applications.

Destination
Choose the folder destination and a name for your application.

Include files
Automatically Flash selects some files that are needed to run the application. If you are using other files in your app (like a caurina tween for example) you must include these files as part of the app.

Step 17: Scripting Window Move

In this part we’ll use the "NativeWindow" class and the function "startMove()", to allow our application to move across the whole stage. Go to the actions layer and add the following code. Then test it:

stage.addEventListener(MouseEvent.MOUSE_DOWN, moveWin);

  function moveWin(e:MouseEvent):void 
  { 
  stage.nativeWindow.startMove(); 
  }

Step 18: Close and Minimize Buttons

Now our application can move over the whole stage, but if you want to close or minimize, you can’t. Go and design two buttons: minimize (btMinimize instance name) and close (btClose instance name) such as the next picture, but this time you must use the main movie clip (twitterApp). Finally, add the following code:

//Minimize button 
  twitterApp.btMinimize.addEventListener(MouseEvent.CLICK, btMinimize_CLICK); 
  function btMinimize_CLICK(e:MouseEvent):void 
  { 
stage.nativeWindow.minimize(); 
}

  //Maximize button 
  twitterApp.btClose.addEventListener(MouseEvent.CLICK, btClose_CLICK); 
  function btClose_CLICK(e:MouseEvent):void 
  { 
  stage.nativeWindow.close(); 
  }

Step 19: Always in Front Feature

This feature is very simple. Just add a button below the Follow Me button, so it creates a new layer inside the main movieclip "twitterApp". Write "btAlwaysfront" as an instance name:

Once you’ve created this button, go inside and create another frame, each one with a stop action. The objective is to have two states for the button. Frame one deactivated and the second frame activated. This feature uses the alwaysInFront method from the nativeWindow class. After this we must add the actions to the btAlwaysfront button, so go to actions frame and paste the following code:

//Activate window always front 
  stage.nativeWindow.alwaysInFront=false; 
  twitterApp.btAlwaysfront.addEventListener(MouseEvent.CLICK, btAlwaysfront_CLICK); 
  function btAlwaysfront_CLICK(e:MouseEvent):void 
  { 
if ( stage.nativeWindow.alwaysInFront!=true){ 
twitterApp.btAlwaysfront.gotoAndStop(2); 
stage.nativeWindow.alwaysInFront=true; 
}else{ 
twitterApp.btAlwaysfront.gotoAndStop(1); 
stage.nativeWindow.alwaysInFront=false; 
} 
 
}

Step 20: The Complete Code

//Twitter rss url 
  var twitterURL:String = "http://twitter.com/statuses/user_timeline/16211488.rss"; 
  var twitterXML:URLRequest = new URLRequest(twitterURL); 
  var myLoader:URLLoader = new URLLoader(twitterXML); 
  myLoader.addEventListener("complete", xmlLoaded);
  
  function xmlLoaded(evtObj:Event) { 
  var twitter:XML = new XML(myLoader.data); 
  var TwitterTitle:String = twitter.child(0).description; 
  var UserUrl:String = twitter.child(0).link; 
   
  var myUpdates:String = ""; 
   
  //The loop 
   
  for each (var nodo:XML in twitter..item) { 
  myUpdates += "<a href='"+nodo.link+"'><font color='#a4917c'>"+nodo.title+"</font></a><br>"+"<font color='#a4bc34'>"+nodo.pubDate +"</font><br/><br/>"; 
  } 
   
  //THE TITLE APP > "Twitter updates from Darío Gutiérrez / _dariux." 
  twitterApp.titleApp.text = TwitterTitle; 
   
  //Display the valor of myUpdates into the  textfield 
  twitterApp.myUpdates.htmlText = myUpdates; 
   
  //Actions for Follow Me button 
  twitterApp.btFollowme.addEventListener(MouseEvent.CLICK, btFollowme_CLICK);
  
  function btFollowme_CLICK(e:MouseEvent):void{ 
  var targetURL:URLRequest = new URLRequest(UserUrl); 
  navigateToURL(targetURL); 
  } 
   
  }
  
  /****************************************************** 
  Listeners and functions for scroll buttons 
  ******************************************************/ 
  twitterApp.btUp.addEventListener(MouseEvent.CLICK, scrollUp); 
  twitterApp.btDown.addEventListener(MouseEvent.CLICK, scrollDown);
  
  function scrollUp(Event:MouseEvent):void { 
  twitterApp.myUpdates.scrollV -=5; 
  }
  
  function scrollDown(Event:MouseEvent):void { 
  twitterApp.myUpdates.scrollV +=5; 
  } 


/****************************************************** 
  AIR Zone 
  ******************************************************/ 
  //Window move 
  stage.addEventListener(MouseEvent.MOUSE_DOWN, moveWin);
  
  function moveWin(e:MouseEvent):void 
  { 
  stage.nativeWindow.startMove(); 
  } 


  //Minimize button 
  twitterApp.btMinimize.addEventListener(MouseEvent.CLICK, btMinimize_CLICK); 
  function btMinimize_CLICK(e:MouseEvent):void 
  { 
  stage.nativeWindow.minimize(); 
  }
  
  //Maximize button 
  twitterApp.btClose.addEventListener(MouseEvent.CLICK, btClose_CLICK); 
  function btClose_CLICK(e:MouseEvent):void 
  { 
  stage.nativeWindow.close(); 
  } 


  //Activate window always front 
  stage.nativeWindow.alwaysInFront=false; 
  twitterApp.btAlwaysfront.addEventListener(MouseEvent.CLICK, btAlwaysfront_CLICK); 
  function btAlwaysfront_CLICK(e:MouseEvent):void 
  { 
if ( stage.nativeWindow.alwaysInFront!=true){ 
twitterApp.btAlwaysfront.gotoAndStop(2); 
stage.nativeWindow.alwaysInFront=true; 
}else{ 
twitterApp.btAlwaysfront.gotoAndStop(1); 
stage.nativeWindow.alwaysInFront=false; 
} 
 
}

Step 21: Creating the AIR File

To publish your .air file in flash CS4 go to File > AIR Settings menu and click on the "Publish AIR file button".

For flash CS3 go to Commands > AIR – Create AIR File.

Then you’ll see a new window (the Digital Signature). Choose a certificate and type your password. It takes some time to create the .air file, but when finisedh you’ll see another window with the following text "AIR file has been created". The .air file is created in the same work directory as your .fla file.

Step 22: Final details

As you can see, my app has a drop shadow. If you want a mac windows style just select the main movie clip "twitterApp" and apply:

Conclusion

So there we have our AIR application! It’s a little application, but I hope it helps you as a reference to developing your own. With this technology we can develop awesome applications, mashable with APIs like Twitter, Gmaps and Flickr. There are many other features not covered in this tutorial, plenty of scope for a future tutorial or quick guide! Thanks for reading.