back

Adobe AIR tutorial for Flash developers

by John Ulliman and Tommi West

If you've heard about Adobe AIR but haven't taken it for a test drive yet, there are many reasons to check it out — especially if you have a background in Flash development.

The Adobe AIR runtime enables you to use your existing web development skills and tools to build desktop applications that run on Mac OS X and Windows (and soon also on Linux). AIR applications have all the necessary functionality of standard desktop applications — including access to local files, drag-and-drop support, and more — while also providing the benefit of online and offline connectivity.

In addition, installing AIR apps is safe and transparent to end users thanks to support of digital signatures and the seamless badge install. (You can read Deploying Adobe AIR applications seamlessly with badge install by David Tucker in the AIR Developer Center for more information about that.)

Getting started

First, make sure that you have installed the current update for Flash. Next, be sure to read the Flash TechNote, Installing Adobe AIR 1.1 Update for Flash CS3 Professional, to ensure that you are working with the very latest software and tools. The installation process involves replacing the files in the AIK folder (inside the Flash CS3 installation folder) with the AIR SDK Integration Kit files you can download from the TechNote, and then downloading and installing the Adobe AIR 1.1 runtime.

This sample project is a memory game, reminiscent of the Concentration card game (see Figure 1). Click "new game" to start playing. (There is sound too.)

AlertThis content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of Adobe® Flash® Player.

Download the free Flash Player now!

Get Adobe Flash Player

Figure 1. Live example of the memory game.

Download the sample files:

memory_game.zip (ZIP, 668K)

Analyzing the ActionScript

This application is based on movie clips that display various shapes (hearts, clubs, stars, moons, and so forth) that are dynamically generated by manipulating an array of randomly ordered symbols:

function setUpSymbols():void {
   aShuffle = [];
   for (var i:int = 0; i<numSymbols*2; i++) {
      if ( i < numSymbols) {
         aSymbols[i] = i +10;
      } else {
         aSymbols[i] = i+1;
      }
   }

   for (var j:int = 0; j<numSymbols*2; j++) {
      var index:int = Math.floor(Math.random()*aSymbols.length);
      aShuffle.push(aSymbols[index]);
      aSymbols.splice(index,1);
   }

}

Each disk is assigned a symbol from the array in the drawSymbols function:

function drawSymbols():void {
   for (var i:int = 0; i<numSymbols*2; i++) {
      var currentRow:int = Math.floor(i/numColumns);
      var currentColumn:int = i - (currentRow * numColumns);
      aSpinners[i] = new Spinner(i);
      gameScreen.addChild(aSpinners[i]);
      aSpinners[i].x = currentColumn *hSpace;
      aSpinners[i].y = currentRow * vSpace;
      aSpinners[i].symbol = aShuffle[i];
      aSpinners[i].addEventListener(MouseEvent.CLICK, clickSpinner);
   }
}

The code above also adds an event listener to each disk to run the function that flips a disk when it is clicked. The clickSpinner function shown below not only flips each disk as it is clicked, but also checks to see whether that disk was the first or second disk clicked. If it was the second disk clicked, then it compares the symbol value of the first clicked disk to see if the two symbols match:

function clickSpinner(evt:MouseEvent):void {
   evt.target.spinOpen();
   if (clicks == 0) {
      firstClick = evt.target.index;
      clicks = 1;
   } else {
      if (evt.target.index != firstClick) {
         tries += 1;
         tTries.text = String(tries);
         secondClick = evt.target.index;
         if (evt.target.symbol == aSpinners[firstClick].symbol) {
            trace("match");
            ding.play();
            applause.play();
            correct += 1;
            tCorrect.text = String(correct);
            if (correct == numSymbols) {
               mWin.visible = true;
            }
         } else {
            trace("no match");
            var delay:Timer = new Timer(1000,1);
            delay.start();
            delay.addEventListener(TimerEvent.TIMER, noMatch);
         }
         clicks = 0;
      }
   }
}

If the function above detects a match between the two clicked disks, it also sets the visibility of the two disks to display their matching symbols. However, if the second clicked disk symbol does not match the first, the noMatch function is called:

function noMatch(evt:TimerEvent):void {
   aSpinners[firstClick].spinClose();
   aSpinners[secondClick].spinClose();
   buzz.play();
} 

Additional animation functionality is provided inside the external Spinner class. Open up the spinner.as file in the sample files folder to examine the code.

Choosing the right technology platform

Note: It is a best practice to separate reusable code into external classes whenever possible to build more modular applications.

The Spinner class first imports the movie clip display class and some of the transition classes that are used to control the animation effect as each disk flips over.

The spinOpen function scales the x value of each disk to make it appear to flip and uses the ease in transition to make the movement begin slowly and then speed up as the animation nears the end:

public function spinOpen():void{
    var openTween:Tween = new Tween(this, "scaleX", Regular.easeIn, 1, 0, .3, true);
    openTween.addEventListener(TweenEvent.MOTION_FINISH, finishOpen);
}

As the motion is completed, the spinOpen function calls the finishOpen function to complete the animation and display the disk's symbol:

private function finishOpen(evt:TweenEvent):void{
    this.gotoAndStop(this.symbol);
    var openFinishTween:Tween = new Tween(this, "scaleX", Regular.easeIn, 0, 1, .3, true);
}

A similar strategy is used for the function that animates the disk to flip back to its original position. The noMatch function (which is called whenever the second disk is clicked and the symbols do not match) calls the spinClose function:

public function spinClose():void{
    var closeTween:Tween = new Tween(this, "scaleX", Regular.easeIn, 1, 0, .3, true);
    closeTween.addEventListener(TweenEvent.MOTION_FINISH, finishClose);      
}

The private finishClose function is called by the spinClose function upon receiving the event that the motion is completed:

private function finishClose(evt:TweenEvent):void{
    this.gotoAndStop(1);
    var closeFinishTween:Tween = new Tween(this, "scaleX", Regular.easeIn, 0, 1, .3, true);
}

To play the memory game locally, download the SWF file and choose Control > Test Movie the same way you would test any Flash Player 9 SWF file.

Creating the AIR application

To convert the original Flash project to an Adobe AIR application, choose Commands > AIR – Application and Installer Settings to access the Settings dialog box (see Figure 2).

Update the settings in the AIR - Application & Installer Settings dialog box.

Figure 2. Update the settings in the AIR – Application & Installer Settings dialog box.

In the Settings dialog box, add the description and copyright information. Then click the Advanced: Settings button. This dialog box enables you to enter the minimum and maximum height and width of the application as well as choose the installation folder. After you are finished adding the settings, click OK to return to the AIR – Application & Installer Settings dialog box.

Click the Change button next to the Sign AIR With Selected Certificate option to add a digital signature.

Note: The digital signature is very important because you must digitally sign your AIR applications in order for the AIR runtime to install them on the end user's computer.

The Digital Signature dialog box appears (see Figure 3).

Click the Create button to make a new digital signature, or browse for an existing signature file.

Figure 3. Click the Create button to make a new digital signature, or browse for an existing signature file.

When you create the self-signed digital signature, you can browse to select the location where the certificate file will be saved. Choose the folder that contains the memory_air.fla file. The generated certificate uses the .p12 file extension.

Click OK to close the Digital Signature dialog box, and then click the Publish AIR File button.

To create the Adobe AIR installer file, simply choose Commands > AIR – Create AIR File.

Let's examine the published files. When you look at the folder where the memory_air.fla file lives, you'll see that the project now includes the Memory_AIR.air application installer, the digital certificate file, the application.xml file (which is based on the options selected in the Application Settings dialog box), and the SWF file ready for playback in the AIR player. Also included are the HTML and AC_RunActiveContent.js files created when the SWF file was first published.

To test the installation, double-click the AIR installer (it is cross-platform). Notice the message that is displayed during the installation process (see Figure 4).

This alert appears until you acquire your certificate from a certificate authority.

Figure 4. This alert appears until you acquire your certificate from a certificate authority.

A message like the one in Figure 4 might concern users who are attempting to install your AIR application. However, you can provide a sense of security to your users by digitally signing your applications with a security certificate from a trusted third-party certificate authority, such as Thawte or VeriSign. Doing so eliminates the warning messages that will otherwise appear as users install your application. Check out Digitally signing Adobe AIR applications by Todd Prekaski in the AIR Developer Center for more details.

Continue the installation of the AIR application by clicking Install. Notice that the path of the installation directory matches the folder name you provided. Also notice that users can choose to uninstall the AIR application just like any other application on their system. This is another reason why users will feel more at ease when installing your AIR applications.

Adding new functionality

If you'd like to take this sample project a step further, there are many other features you could incorporate. For example, you could add an audio on/off toggle switch. Or you could add a field to display the user's high score.

If you want to get fancy, you could add a login screen that prompts the user to enter a custom username and then display a personalized message such as, "Congratulations, Katie! You win!" You could also add a numeric limit to the number of tries the user has to successfully match all of the disks, and display a "Better luck next time" message when the number of tries is exceeded.

Where to go from here

As you can see, converting existing Flash applications to Adobe AIR is relatively easy, and AIR offers users additional benefits that Flash doesn't. Give it a try, and experiment with creative ways to make your current applications even more useful — or fun.

The AIR Developer Center is a great resource for further study. Understand how you can use AIR to bring distinct brand experiences to the desktop by reading Ethan Eismann's article, AIR and the experience brand. Learn also about the rationale behind the AIR security model and what you should consider when building AIR applications in Lucas Adamski's article, Introducing the AIR security model. (Both articles feature video interviews with the authors as well, which are definitely worth watching.)

 

‹ Back


John Ulliman founded On The Wave in 1991. His studio produces digital media, and he provides both live and DVD training. Ulliman is an Adobe Certified Expert and Instructor for Flash, Fireworks, Dreamweaver, Director, and mobile development.

Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.