Step 1: Create a New AIR Document

Start Flash, create a new Adobe AIR document and save the document as “drag_drop_mp3.fla”.

If you already have a blank Actionscript 3.0 document open, simply go to Commands > AIR – Application and Installer Settings. Flash will give an alert saying that it will target all the appropriate files for you. Click “Ok” at the prompt, Flash will then show the application publish settings. Click “Ok” again and we’re ready to start.

Step 2: Setting up the Stage and Document Class

Go to File > New and create a new ActionScript file. Save the blank file as “drag_drop_mp3.as”. In the “Properties” panel, resize the stage to 210 x 110 pixels. Next, in the “Document class” text box, type in the name of the newly created actionscript file; leaving out the file extension.

Step 3: Creating the Player Background

Select the rectangle tool. In the rectangle tool options of the “Properties” panel, click the lock to unlock the rounded corners option. Enter 5 for the top corners and 0 for the bottom corners. Also, make the fill color black and give the stroke a color of #CCCCCC.

Next, draw a rectangle that is 200 x 100 pixels. Make sure nothing is selected. Select the bottom line of the stroke and delete it. Now, there should be a rectangle with rounded corners at the top, square corners at the bottom and a stroke that wraps around the top of the rectangle but not the bottom. If the stroke is hanging down past the bottom of the black square, simply double click on the stroke. With the stroke selected, in the “Properties” panel, click on “Cap:” and select “None”. Select the square and stroke, then place them at an x position of 5 and a y position of 2.5.

Step 4: Giving the Background its Look and Feel

Select the entire rectangle and stroke, then hit F8 to convert it into a symbol. Turn it into a Movieclip and give it a name of “background”. In the “Properties” panel, give the newly created movieclip an instance name of background.

Double-click on the movieclip to go into edit mode. Select the stroke and go to Edit > Cut to cut the stroke out. Then go to Insert > Timeline > Layer to create a new layer. When the new layer is created, go to Edit > Paste in Place. This will put the stroke on the top layer. Lock the stroke layer. Next, create a new layer and place it between the stroke layer and rectangle layer. Now, select the rectangle, go to Edit > Copy. Select the empty middle layer and “Paste in Place” a copy of the rectangle. With the new rectangle selected, change its color to something bright (I use bright green) to remind us that we need to change this color at some point.

Step 5: Continuing with the Background

Now we need to add another layer ontop of the green rectangle layer. In this layer, create a black 5 x 5 circle with no stroke. Hit “Ctrl-k” to bring up the align options. With the stage icon selected, align the circle to the top-left corner of the movieclips stage. With the circle selected, hold down “Alt” and drag out another instance of the circle. Place the cirlce at 10 for x and 0 for y. Continue to drag new copies of the circle out, placing them 10 pixels apart from each other until you reach the end of the green rectangle.

Now select all the circles, hold down “Alt” and drag down new copies. Offset the x postion of the new circles by 5px and give them a y position of 5. Continue to do this copy/paste technique until the whole green movieclip is covered. Delete any circles that aren’t covering the green rectangle.

Next, select all the circles in the layer. With all the circles selected, cut them out of the layer. In the green rectangle layer, “Paste in Place” all the circles and deselect everything. This will turn the entire layer into one shape. Now click the keyframe in the green rectangle layer to select everything. With everything selected, hold down “Shift” on the keyboard and click the green shape. This will deselect the green rectangle; leaving only the black circles selected. Then hit “Delete” to delete the black circles. We now have the top layer of our grate look. To view this, you can turn off the visibility of the black layer underneath.

Step 6: Finishing the Background

The next step is to select the green rectangle. Copy the green rectangle, and “Paste in Place” on the bottom black rectangle layer. When you paste the layer, you’ll probably get some weird empty holes. Just fill in those holes with black using the paint bucket tool.

When all the black holes are filled, once again make sure nothing is selected, so that the layer will turn everything into one shape. Click on the green part of the layer and delete. Now we should have a bottom layer of holes and the layer above should have the fill.

Next, select the green rectangle in the layer above the black circles. In the “Color” panel, select the fill color picker and select the black-to-white circular gradient. Change the color of the white end to #5E5E5E and give it an alpha of 60%. Next, select the black end and give it an alpha of 88% and turn it into a movieclip. Give it an instance name of “winBack”. Now in the “Filters” panel, click the plus sign and assign it a new bevel filter. Give the bevel 1 for the blur x and y, a strength of 50%, a quality of high, an angle of 210 and a distance of 1. Delete all the empty layers, lock the rest and exit the movieclips editing mode.

On the stage of the main file, select the movieclip and go to the “Filters” panel. In the filters panel, give the movieclip a dropshadow. Give the dropshadow 4 for the blur x and y, a strength of 66%, a quality of high, an angle of 90 and a distance of 4.

Step 7: Building the Playback Buttons

Next, select the rectangle tool. In the “Properties” panel, make sure that all the rounded corners are locked together with a value of 2.5. Draw out a rectangle that is approximately 28.5 pixels wide and 19.5 pixels in height without any stroke. In the “Color” panel, select the linear black-to-white gradient. With the shape selected, hit “f” on the keyboard to bring up the “Gradient Transform Tool”. Rotate the gradient 90 degrees, so that the white is at the top of the shape. Adjust the color sliders, so that each color is about half way. Now double-click on the little black square and enter in #BFBFBF as the color.

Select the rectangle shape and convert it to a movieclip. Give it a name of “buttonBackground”. Now create a new layer above the background layer. Drag out three instances of the “buttonBackground” movieclip. Give the first one an x position of 41.2 and a y position of 76.8. Give the second one an x position of 42.8 and a y position of 76.8. Give the third one an x position of 72.8 and a y position of 76.8. This will align all the buttons to the same y position and slightly space them out.

Next with “Webdings” font, the static text tool, and on top of the “buttonBackground” movieclip, give the first one the symbol for “Previous”. The middle button has the symbol for “Play” and the last button has the symbol for “Next”. Select all the newly created text boxes, and hit “Ctrl-b” until the text is broken into shapes. Select the first “buttonBackground” movieclip and the “Previous” shape and convert them into a movieclip. Do the same for the other two. Give the left movieclip an instance name of “prevBtn”. Next, select the movieclip in the middle and give it an instance name of ‘”playBtn”. Finally, select the button on the right and give it an instance name of “nextBtn”.

Step 8: The Playlist Button

The next step is to create the playlist button. Select the rectangle tool. Give it a rounded corner of 5 and make a shape that is 80.5 pixels in width and 19.9 pixels in height. Give the shape the same fill color as the previously created buttons. Place the shape at 108.2 for x and 76.8 for y. Select the shape and convert it to a movieclip. Inside the new movieclip, select the type tool and create a dynamic text box over the shape that says “Show Playlist”. Make the text box 80.3 in width and 16.2 in height with an x position of 0.0 and a y position of 1.8.

Give the text box an instance name of “ty”. Give the movieclip an instance name of “playToggle”.

Step 9: The Volume Slider

Now we’ll create the volume slider. Select the line tool, make sure that the color is set to #999999 and the stroke thickness is 1. Draw a line out that is 45 pixels tall. Select the line and convert it into a movieclip with an instance name of “volControl”. Next, double-click the movieclip to enter its edit mode. Copy/paste the line and change the color to white. Move the line over 1 pixel. Next select the rectangle tool and make sure that the rounded corners are set to 0. Draw a rectangle that is 10 pixels wide and 5 pixels in height. Place the rectangle at -4.5 for x and 0 for y. Select the rectangle, convert it into a movieclip and give it an instance name of “slider”.

With the “slider” movieclip selected, go to the “Filters” panel and give it a dropshadow with a 1 for the blur x and y, 66% for its strength, a quality of high, an angle of 90 and a distance of 1. Finally, exit the edit mode of the movieclip and on the stage of the main file, place the “volControl” movieclip at 195.6 for x and 45.4 for y.

Step 10: Finalizing the Top Half of the App

The next step is to create two buttons. The first button is for minimizing the application, and the second is for closing it.

Select the rectangle tool, give the rounded corners a value of 2, and create a square that is 10.9 pixels. Apply the same fill settings as the other buttons on the stage and convert it to a movieclip. Drag out two instances for the new movieclip onto the stage. With the “Webdings” font, place the minimize character over one of the movieclips. Break apart the font until it becomes a shape, select both the new shape and the movieclip below it, and convert it to a Button. Give the new button an instance name of ‘mini,’ a x position of 178.4 and a y position of 5.5. Do the same process for the second movieclip, only give it a close character, an x position of 190.4 and a y position of 5.5.

Finally, create a blank dynamic text field on the stage. Give the textfield an instance name of “tf”, a color of #0000FF, a width of 188, a height of 14.1, a font size of 9, an alignment of center, an x value of 11 and a y value of 20.3.

Step 11: Setting up the Play Button

Next we’re going to set up the ability to toggle the play button. Double click on the “playBtn” movieclip to enter its edit mode. Make sure that the “Play” character is on a separate layer. Go to frame 6 on the “Play” characters layer and hit F6 to create a new keyframe. Delete the “Play” character, and, using the “Webdings” font, place a “Stop” character there. Break the character apart until it becomes a shape.

Next, click to frame ten and hit F5 on both layers. Now add two more layers above the character layer. On the layer directly above the character layer, place a keyframe on frame 6 and extend it to frame 10. Click back to frame 1, and in the “Frame” text box, give it a label of “play”. Now click to frame six and give it a label of “stop”. Finally, on the top most layer, hit “F9″ on the keyboard to bring up the actions panel. In the actions panel, type:

stop();

Now, we’ll be able to toggle back and forth depending on whether a song is playing or not.

Step 12: The Playlist Window

Let’s create the playlist window. We’ll be able to control this window later from actionscript. Go to Insert > New Symbol… to create a new symbol. Select “Movie clip” and give it a name of “window”. Next, under “Linkage”, check “Export for ActionScript” and give it a class name of “Window”. Click “Ok”, this will bring up a blank stage.

Next, select the rectangle tool. Now, make sure to unlock the rounded corners. Give the rectangle top corners a value of 0 and the bottom corners 5. Make sure the fill color is black and the stroke color is #CCCCCC. Draw out a rectangle that is 200 pixels wide and 400 pixels tall. Select the rectangle and its stroke, then convert them to a movieclip. Give the movieclip an instance name of “windowBackground”. Now double-click on the movieclip to enter its editing mode. Inside the movieclip, go through steps 3 – 6 again until the movieclip is similar to the main player’s background movieclip. Also, just like the first one, make sure to give the movieclip with the bevel an instance name of “winBack”.

So now, to clarify, inside the “Window” class, there should be one movieclip with an instance name of “windowBackground”. Inside “windowBackground”, there should be a movieclip with an instance name of “winBack”. Finally, there should be no instance of the “Window” class on the stage at all. This will all be controlled dynamically.

Step 13: Adding the Datagrid Component

We’ll use the datagrid component to control our playlist. In the “Window” movieclip class, add a new layer. From the components panel, drag out an instance of the Datagrid. Give it an instance name of “grid” and an x position of 10.8 and a y position of 42.5. Resize the datagrid component to a width of 178 and a height of 314.9. Finally, in a new layer under the grid component, create a white rectangle the same size as the datagrid component. This is helpful with any transparency issues that the component has without having to reskin it.

Step 14: Finalizing the Design

The last thing we need to add to the Window is the ability to delete items from out playlist. Drag out a copy of the “Show Playlist” button. Give the movieclip an instance name of “deli”, an x position of 108.6 and a y position of 366.9. Don’t worry about the text box saying “Show Playlist”, we’ll control that via actionscript.

Step 15: The Document Skeleton

Open up the blank actionscript file that we created. Here’s the skeleton for the document class we’ll be using.

package {

	public class drag_drop_mp3 extends Sprite {

		public function drag_drop_mp3()
		{

		}
	}
}

Step 16: The Imports

Here are the import statements that we’ll be using..

	import fl.controls.DataGrid;
	import fl.data.DataProvider;

	import flash.data.SQLConnection;
	import flash.data.SQLStatement;
	import flash.desktop.Clipboard;
	import flash.desktop.ClipboardFormats;
	import flash.desktop.NativeDragManager;
	import flash.display.MovieClip;
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowSystemChrome;
	import flash.display.NativeWindowType;
	import flash.display.SimpleButton;
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.NativeDragEvent;
	import flash.events.TimerEvent;
	import flash.filesystem.File;
	import flash.filters.DropShadowFilter;
	import flash.media.ID3Info;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.media.SoundMixer;
	import flash.media.SoundTransform;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.utils.Timer;

Step 17: The Variables

..and here’s a list of the variables that we’ll be using. We’ll be using an SQLConnection to feed information about our mp3’s into the SQLLite database. Also, we’ll be using a sound object to track which song we’re currently playing. There is also a variable for us to create a NativeWindow object for our playlist. That way we can move the window anywhere on the screen we want, as well as have it be independent of the main window. We also create a tracer variable. This will help keep track of which song is playing.

private var connect:SQLConnection;
		private var currentSound:Sound;
		private var yOffset:Number;
		private var st:SoundTransform;
		private var nw:NativeWindow;
		private var window:MovieClip;
		private var tracer:int;
		private var channel:SoundChannel;
		private var tfText:String;
		private var len:int;

Step 18: The Init Functions

When the app launches, it’ll call these two functions: init and listeners. The init function calls for the database to be set up, as well as creates the new window instance. Finally, it calls the function that sets buttonModes and visibilty of objects. After the init function, the listeners function is called which adds the event listeners to everything. Most importantly, it calls the NativeDragEvent. This allows us to drag mp3’s from our desktop (from anywhere really) to the app.

public function drag_drop_mp3()
		{
			init();
			listeners();
		}
		private function init():void
		{
			initDB();
			buildWindow();
			initObjects();
		}
private function listeners():void
		{
			closer.addEventListener(MouseEvent.CLICK, handleWindow);
			mini.addEventListener(MouseEvent.CLICK, handleWindow);
			background.addEventListener(MouseEvent.MOUSE_DOWN, moveWindow);
			playToggle.addEventListener(MouseEvent.CLICK, togglePlayList);
			volControl.slider.addEventListener(MouseEvent.MOUSE_DOWN, sliderDown);
			prevBtn.addEventListener(MouseEvent.CLICK, buttonClick);
			playBtn.addEventListener(MouseEvent.CLICK, buttonClick);
			nextBtn.addEventListener(MouseEvent.CLICK, buttonClick);
			this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, dragEnter);
		}

Step 19: The Secondary Init Functions

Here are the functions that will set up the database, the properties of the objects on the stage and the function that creates a new NativeWindow.

The initObject is fairly self explanatory. I use a try/catch statement just in case the database is empty. In the initDB function, the database file is created, if it doesn’t already exsist. It then creates a table called “Playlist” with three columns; one for the artist, one for the song and the last is for the url of the song. Finally, we create a new instance of the “Window” object that we created earlier. The text of the delete button is changed. A dropshadow to match the top portion of the app is created as well. The window is chromeless and it creates a lightweight type of window. That means that the playlist window won’t have any system chrome and when it’s opened, there won’t be any option for it in the toolbar.

private function initObjects():void
		{
			background.winBack.mouseEnabled = false;
			playToggle.buttonMode = true;
			playToggle.mouseChildren = false;
			tf.background = true;
			tf.backgroundColor = 0x000000;
			tf.mouseEnabled = false;
			tf.text = "Drag and Drop an MP3 File Here";
			prevBtn.buttonMode = true;
			playBtn.buttonMode = true;
			nextBtn.buttonMode = true;
			st = new SoundTransform(1, 0);
			channel = new SoundChannel();
			try
			{
				currentSound = new Sound(new URLRequest(window.grid.getItemAt(0).Location));
			}
			catch(event:Error)
			{
				//
			}
		}
		private function initDB():void
		{
			var file:File = File.applicationStorageDirectory.resolvePath("playlist.db");
			connect = new SQLConnection();
			connect.open(file);
			var statement:SQLStatement = new SQLStatement();
			statement.sqlConnection = connect;
			statement.text = "CREATE TABLE IF NOT EXISTS PLAYLIST (Artist TEXT, Song TEXT, Location TEXT)";
			statement.execute();
		}
private function buildWindow():void
		{
			var nwo:NativeWindowInitOptions = new NativeWindowInitOptions();
			nwo.maximizable = false;
			nwo.resizable = false;
			nwo.transparent = true;
			nwo.systemChrome = NativeWindowSystemChrome.NONE
			nwo.type = NativeWindowType.LIGHTWEIGHT;
			nw = new NativeWindow(nwo);
			nw.title = "Playlist";
			window = new Window();
			window.deli.ty.text = "Delete";
			window.windowBackground.winBack.mouseEnabled = false;
			window.windowBackground.addEventListener(MouseEvent.MOUSE_DOWN, moveNatWin);
			nw.stage.stageWidth = window.width+10;
			nw.stage.stageHeight = window.height+10;
			nw.stage.scaleMode = StageScaleMode.NO_SCALE;
			nw.stage.align = StageAlign.TOP_LEFT;
			window.filters = [new DropShadowFilter(4, 90, 0x000000, 1, 4 ,4, 0.66, 3)];
			window.x = 5;
			window.y = 0;
			nw.stage.addChild(window);
			setCoords();
			window.grid.addEventListener(Event.CHANGE, gridChange);
			window.deli.addEventListener(MouseEvent.CLICK, deliClick);
			loadData();
		}

Step 20: The Other Functions

The setCoords function is called when showing the playlist window. It resets the x and y of the playlist window, so that it’s easier to find when you toggle the visibility. The loadData function selects all the information from the database and populates the datagrid component.

private function setCoords():void
		{
			nw.x = stage.nativeWindow.x;
			var theY:Number = (stage.nativeWindow.y + stage.nativeWindow.height)
			nw.y = theY;
		}
private function loadData():void
		{
			var statement:SQLStatement = new SQLStatement();
			statement.sqlConnection = connect;
			statement.text = "SELECT * FROM PLAYLIST";
			statement.execute();
			try
			{
				var dp:DataProvider = new DataProvider(statement.getResult().data);
				window.grid.dataProvider = dp;
			}
			catch(event:Error)
			{
				//
			}
			len = window.grid.length;
		}

Step 21: Handling the Drag and Drop

The first function, dragEnter, is called when someone tries to drag a file onto the stage. The file checks to see if the extension is correct. If it is, the drag is accepted. If someone decides that they don’t want to drag a file, the dragExit function is called. It resets the text on the main window of the application. However, if the user picks the right file format and decides that they want to add the file to their playlist, the dragDrop function is called and the sound is loaded.

private function dragEnter(event:NativeDragEvent):void
		{
			this.removeEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, dragEnter);
			this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, dragDrop);
			this.addEventListener(NativeDragEvent.NATIVE_DRAG_EXIT, dragExit);
			var clip:Clipboard = event.clipboard;
			var object:Object = clip.getData(ClipboardFormats.FILE_LIST_FORMAT);
			tfText = tf.text;
			if (object[0].extension.toLowerCase() == "mp3")
			{
				NativeDragManager.acceptDragDrop(this);

			tf.text = "GIVE IT TO ME BABY...";
			}
			else
			{
				tf.text = "EWW...GET THAT AWAY FROM ME!";
			}
		}
		private function dragExit(event:NativeDragEvent):void
		{
			this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, dragEnter);
			this.removeEventListener(NativeDragEvent.NATIVE_DRAG_EXIT, dragExit);
			tf.text = tfText;
		}
		private function dragDrop(event:NativeDragEvent):void
		{
			this.removeEventListener(NativeDragEvent.NATIVE_DRAG_EXIT, dragExit);
			this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, dragEnter);
			this.removeEventListener(NativeDragEvent.NATIVE_DRAG_DROP, dragDrop);
			var clip:Clipboard = event.clipboard;
			var object:Object = clip.getData(ClipboardFormats.FILE_LIST_FORMAT);
			var req:URLRequest = new URLRequest(object[0].url);
			var sound:Sound = new Sound();
			sound.addEventListener(Event.COMPLETE, soundLoaded);
			sound.load(req);
			tf.text = "LOADING...";
		}

Step 22: Loading the Sound

After the sound is loaded, we take the artist and song information from the ID3Info object. We then insert it into the database, as well as the url of the song we just loaded. We then reload the datagrid with the new sound data.

private function soundLoaded(event:Event):void
		{
			currentSound = event.target as Sound;
			var id:ID3Info = currentSound.id3;
			var artist:String = id.artist;
			var song:String = id.songName;
			var url:String = currentSound.url
			var statement:SQLStatement = new SQLStatement();
			statement.sqlConnection = connect;
			statement.text = "INSERT INTO PLAYLIST (Artist, Song, Location) VALUES (?, ?, ?)";
			statement.parameters[0] = artist;
			statement.parameters[1] = song;
			statement.parameters[2] = url;
			statement.execute();
			loadData();
			window.grid.selectedIndex = len-1;
			tracer = -1;
			tf.text = "THANK YOU!";
			var timer:Timer = new Timer(1000);
			timer.addEventListener(TimerEvent.TIMER, onTimer);
			timer.start();
		}
		private function onTimer(event:TimerEvent):void
		{
			if(tf.text == "THANK YOU!")
			{
				tf.text = tfText;
			}
			var timer:Timer = event.target as Timer;
			timer.stop();
		}

Step 23: Working with the Button Controls

We’ll control the song control buttons with one function. We check to see if the “playBtn” was clicked, if so, we check to see which label the button is currently on and, if the currentSound object isn’t null, we call the playSong function. If one of the other buttons was clicked, we call the appropriate function.

private function buttonClick(event:MouseEvent):void
		{
			var mc:MovieClip = event.target as MovieClip;
			var string:String = mc.name;
			switch(string)
			{
				case "playBtn" :
				if(mc.currentLabel == "play")
				{
					try
					{
						playSong(currentSound.url);
					}
					catch(event:Error)
					{
						//
					}
				}
				else
				{
					mc.gotoAndStop("play");
					SoundMixer.stopAll();
				}
				break;
				case "nextBtn" :
				playNextSong();
				break;
				case "prevBtn" :
				playPrevSong();
				break;
			}
		}

Step 24: The Song Functions

Here are the functions for working with the sound. Both the playNextSong and playPrevSong functions call the handleNextPrev function. This function uses the tracer variable to keep track of which song is playing. The handleNextPrev function then assigns the selected sound to the currentSound object. After that, we call the playSong function. In the playSong function, we tell the datagrid to highlight which song is playing, we set the text field to show the artist and song information from the database, and we listen for the SOUND_COMPLETE event. When the sound is complete, we load the next song.

private function playNextSong():void
		{
			if(tracer == len)
			{
				tracer = 0;
			}
			else
			{
				tracer++;
			}
			handleNextPrev();
		}
		private function playPrevSong():void
		{
			if(tracer == 0)
			{
				tracer = len;
			}
			tracer--;
			handleNextPrev();
		}
		private function handleNextPrev():void
		{
			var string:String;
			try
			{
				string = window.grid.getItemAt(tracer).Location;
				currentSound = new Sound(new URLRequest(string));
				SoundMixer.stopAll();
				playSong(string);
			}
			catch(event:Error)
			{
				string = window.grid.getItemAt(0).Location;
				currentSound = new Sound(new URLRequest(string));
				SoundMixer.stopAll();
				playSong(string);
			}
		}
		private function playSong(string:String):void
		{
			try {
				playBtn.gotoAndStop("stop");
				for(var i:int; i<len; i++)
				{
					if(string == window.grid.getItemAt(i).Location)
					{
						tracer = i;
						window.grid.selectedIndex = i;
					}
				}
				var object:Object = window.grid.getItemAt(tracer);
				if(object.Artist == null)
				{
					object.Artist = "";
				}
				if(object.Song == null)
				{
					object.Song = "";
				}
				tf.text = object.Artist + " - " + object.Song;
				channel = currentSound.play();
				channel.addEventListener(Event.SOUND_COMPLETE, onSoundComplete);
			}
			catch(event:Error)
			{
				//
			}
		}
private function onSoundComplete(event:Event):void
		{
			playNextSong();
		}

Step 25: Volume Control

What good would an mp3 player be without the ability to control the volume? Here we set up the slider to control the volume. We pass the value of the slider to the updateVolume function which updates the volume.

private function sliderDown(event:MouseEvent):void
		{
			volControl.slider.removeEventListener(MouseEvent.MOUSE_DOWN, sliderDown);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, sliderMove);
			stage.addEventListener(MouseEvent.MOUSE_UP, sliderUp);
			yOffset = mouseY - event.target.y;
		}
		private function sliderMove(event:MouseEvent):void
		{
			var mc:MovieClip = volControl.slider;
			mc.y = mouseY - yOffset;
			if(mc.y <= 0)
			{
				mc.y = 0;
			}
			else if(mc.y >= (50))
			{
				mc.y = (50);
			}
			updateVolume(mc.y);
			event.updateAfterEvent();
		}
		private function sliderUp(event:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, sliderMove);
			stage.removeEventListener(MouseEvent.MOUSE_UP, sliderUp);
			volControl.slider.addEventListener(MouseEvent.MOUSE_DOWN, sliderDown);
		}
		private function updateVolume(num:Number):void
		{
			var vol:Number = (100 - (num*2))/100;
			SoundMixer.soundTransform = st;
			st.volume = vol;
		}

Step 26: Handling the Main Window

Here is the functions for controlling the main window. When the mouse is down on the “background” movieclip, we call the startMove method of the nativeWindow object. This is why we had to give our grate movieclip an instance name of “winBack”; we had to set the mouseEnabled property to false, eliminating any confusion. If we hadn’t done that, we would only be able to drag on the black circles, not the whole movieclip. The handleWindow function handles both the minimize and close buttons. Also, when we call thaose function, we set some control for our playlist window.

private function moveWindow(event:MouseEvent):void
		{
			stage.nativeWindow.startMove();
		}
		private function handleWindow(event:MouseEvent):void
		{
			if(event.target == closer)
			{
				stage.nativeWindow.close();
				nw.close();
			}
			else
			{
				stage.nativeWindow.minimize();
				nw.minimize();
			}
		}

Step 27: The Final Functions

Here are final functions for our player. When we decide that we no longer want a song on our playlist, we can simply press the delete button to remove the song. When we press the “deli” button, we call the deliClick function. The function removes the item from the database, as well as lining up another song if the deleted song was the next song to play. The gridChange function is called everytime we add or remove an item from the database. This way the playlist will always stay up-to-date.

Finally, we need to be able to move the playlist around as well. We can call the moveNatWin function which works the same way as the functions for moving the main player window. Now the playlist can move all over screen without any limitation set by the stage of the main player window.

private function deliClick(event:MouseEvent):void
		{
			try
			{
				var statement:SQLStatement = new SQLStatement();
				statement.sqlConnection = connect;
				statement.text = "DELETE FROM PLAYLIST WHERE Location = ?";
				statement.parameters[0] = window.grid.selectedItem.Location;
				var string:String = window.grid.selectedItem.Location;
				var item:int = window.grid.selectedIndex;
				statement.execute();
				loadData();
				if(currentSound.url == string)
				{
					currentSound = new Sound(new URLRequest(window.grid.getItemAt(0).Location));
				}
				len = window.grid.length;
				try
				{
					window.grid.selectedItem = window.grid.getItemAt(item-1);
				}
				catch(event:Error)
				{
					window.grid.selectedItem = window.grid.getItemAt(0);
				}
			} catch (event:Error) {
				//
			}
		}
		private function gridChange(event:Event):void
		{
			var dg:DataGrid = event.target as DataGrid;
			currentSound = new Sound(new URLRequest(dg.selectedItem.Location));
		}
		private function moveNatWin(event:MouseEvent):void
		{
			var mc:MovieClip = event.target as MovieClip;
			var st:Stage = mc.parent.parent as Stage;
			st.nativeWindow.startMove();
		}

Step 28: Publishing the Application

The final step to this tutorial is to publish your application. Once it is tested and you’re satisfied with it, go to Commands > AIR – Application and Installer Settings. Make sure to set the “Window style” to “Custom Chrome (transparent)”. This way, we can see our dropshadows and the alpha we applied to the window backgrounds.

Once all your settings are applied, click the publish button, sign the application with our certificate and your new AIR mp3 player is ready to be installed.

Conclusion

We covered quite a few new techniques in this tutorial. Each one can be applied in its own way or combined to produce something completely different. I hope this tutorial has sparked some ideas. Read up on AIR in the Adobe LiveDocs and don’t forget to subscribe to the Tuts+ feed. Thanks for reading!

Follow along and see if you can come up with your own uses for Custom File Extensions..

Step 1: Setting up the Document

Open a new Flash Air document, name it “saveFile”, and save it in a new folder. Then, open a new ActionScript file, give it the same name, and save it into the same folder as the newly created Flash document.

If the prompt screen doesn’t appear when Flash starts, simply create a new Flash ActionScript 3 document. Save the file, then go to Commands > AIR – Application and Installer Settings. Flash will convert the file to an Air document.

In the properties panel of the Flash document, type “saveFile” into the Document class field. This will associate the new ActionScript file (our document class) with the Flash document.

Step 2: Adding the Controls

Create a black square with a height of 52, set the width to be the stage width, and align it to the bottom-left of the stage. Give the square an alpha of 33. In the components panel, drag out three buttons and place them on top of the black square.

Give one of the buttons an instance name of “open” and change its label to say “Open”. The next button will have an instance name of “save” and its label will be “Save”. The third buttons name will be “image” and have a label of “Image”. Spread them out however you want, select all three buttons and the black square and turn them into a single movieclip that has an instance name of “footer”.

Step 3: Little Circles

On the stage, create a red circle with a height and width of 50px. Convert it to a movieclip, then in the dialog box, press the “Advanced” button. Under “Linkage” check the “Export for ActionScript” box. Give it a class name of “Red” and click “OK”.

Next, create a blue circle that is the same size as the red circle. Convert it to a movieclip, export it for ActionScript and give it a class name of “Blue”. Delete the two circles from the stage, so that the only remaining movieclip is the footer movieclip.

Step 4: Download the Adobe JPEG Encoder

Go to http://code.google.com/p/as3corelib/ and download the as3corelib zip folder. With the JPEG encoder, we’ll be able to save an image of our little cirlces.

Step 5: The Document Class Skeleton

This is the basic frame where we’ll put all our code.

package {
	import flash.display.Sprite;

	public class saveFile extends Sprite
	{

		public function saveFile()
		{

		}
	}
}

Step 6: The Imports

Here are the import statements to make the Air application work. These will go in the file right below the package declaration and above the public class statement.

import com.adobe.images.JPGEncoder;

	import flash.desktop.NativeApplication;
	import flash.display.BitmapData;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.InvokeEvent;
	import flash.events.MouseEvent;
	import flash.filesystem.File;
	import flash.filesystem.FileMode;
	import flash.filesystem.FileStream;
	import flash.net.FileFilter;
	import flash.utils.ByteArray;

Step 7: The Variables and Set up Functions

Here are the variables that we’re using to create the two little circles on the stage. The offset variables will be used later for the dragging and dropping of the circles.

I have also assigned an invoke event listener to the NativeApplication. This will fire when the application is either launched or when the custom file is clicked. The invoke function will check to see how the app was launched. If it was from a file, it will load the file. If not, it will call the init function.

public class saveFile extends Sprite
	{
		private var red:MovieClip;
		private var blue:MovieClip;
		private var currentClip:MovieClip;
		private var xOffset:Number;
		private var yOffset:Number;

		public function saveFile()
		{
			NativeApplication.nativeApplication.addEventListener(InvokeEvent.INVOKE, onInvoke);
			movieClips();
			listeners();
		}
		private function init():void
		{
			var sw:int = stage.stageWidth;
			var sh:int = stage.stageHeight-footer.height;
			red.x = sw * Math.random();
			red.y = sh * Math.random();
			blue.x = sw * Math.random();
			blue.y = sh * Math.random();
		}
		private function movieClips():void
		{
			red= new Red();
			blue = new Blue();
			this.addChildAt(red, 0);
			this.addChildAt(blue, 1);
			this.addChildAt(footer, 2);
		}

Step 8: The Listeners Function

This function simply sets up the event listeners for all the buttons and circles on the stage.

private function listeners():void
		{
			red.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
			blue.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
			footer.open.addEventListener(MouseEvent.CLICK, openClick);
			footer.save.addEventListener(MouseEvent.CLICK, saveClick);
			footer.image.addEventListener(MouseEvent.CLICK, imageClick);
		}

Step 9: Moving the Little Circles

Here we set up the functions to move the circles around the stage.

private function onDown(event:MouseEvent):void
		{
			currentClip = event.target as MovieClip;
			xOffset = mouseX - currentClip.x;
			yOffset = mouseY - currentClip.y;
			currentClip.removeEventListener(MouseEvent.MOUSE_DOWN, onDown);
			this.addEventListener(MouseEvent.MOUSE_UP, onUp, false, 0, true);
			this.addEventListener(MouseEvent.MOUSE_MOVE, onMove, false, 0, true);
		}
		private function onMove(event:MouseEvent):void
		{
			currentClip.x = mouseX - xOffset;
			currentClip.y = mouseY - yOffset;
			event.updateAfterEvent();
		}
		private function onUp(event:MouseEvent):void
		{
			this.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
			this.removeEventListener(MouseEvent.MOUSE_UP, onUp);
			currentClip.addEventListener(MouseEvent.MOUSE_DOWN, onDown, false, 0, true);
		}

Step 10: Saving the Image

When the “Image” button is clicked, it will call the “imageClick” function. This function opens up a dialog save box and you can give your image any name you want. When the user names the image, it will call the “imageSave” function. Inside that function, we use the JPGEncoder class to create the image. The Air app then saves the image and listens for the “onClose” function. That function simply reassigns the little circles to the stage from the temp sprite that was created.

private function imageClick(event:MouseEvent):void
		{
			var file:File = File.desktopDirectory;
			file.browseForSave("Save Image");
			file.addEventListener(Event.SELECT, imageSave);
		}
		private function imageSave(event:Event):void
		{
			var temp:Sprite = new Sprite();
			var len:int = this.numChildren;
			temp.addChild(red);
			temp.addChild(blue);
			var bitmapData:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
			bitmapData.draw(temp);
			var jpg:JPGEncoder = new JPGEncoder(100);
			var byteArray:ByteArray = jpg.encode(bitmapData);
			var saveFile:File = File(event.target);
			var directory:String = saveFile.url;
			if(directory.indexOf(".jpg") == -1)
			{
				directory += ".jpg";
			}
			var file:File = new File();
			file = file.resolvePath(directory);
			var fileStream:FileStream = new FileStream();
			fileStream.addEventListener(Event.CLOSE, onClose);
			fileStream.openAsync(file, FileMode.WRITE);
			fileStream.writeBytes(byteArray);
			fileStream.close();
		}
		private function onClose(event:Event):void
		{
			this.addChildAt(red, 0);
			this.addChildAt(blue, 1);
		}

Step 11: Saving the File

After we’ve moved the little circles around a bit, we can then save their location for further editing. Here we create our custom file. First we put coordinates into an array, then the arrays are put inside an object. The object is written to a file with our custom file extension. You can give it any extension you want.

After that, we set the app to be the default application for the newly created file extension.

private function saveClick(event:Event):void
		{
			var file:File = File.desktopDirectory
			file.browseForSave("Save");
			file.addEventListener(Event.SELECT, onSaveSelect);
		}
		private function onSaveSelect(event:Event):void
		{
			var object:Object = {};
			var redArray:Array = [red.x, red.y];
			var blueArray:Array = [blue.x, blue.y];
			object.RED = redArray;
			object.BLUE = blueArray;
			var saveFile:File = File(event.target);
			var directory:String = saveFile.url
			if(directory.indexOf(".tuts") == -1)
			{
				directory += ".tuts";
			}
			var file:File = new File();
			file = file.resolvePath(directory);
			var fileStream:FileStream = new FileStream();
			fileStream.open(file, FileMode.WRITE);
			fileStream.writeObject(object);
			fileStream.close();
			NativeApplication.nativeApplication.setAsDefaultApplication("tuts");
		}

Step 12: Opening the File

If you want to open your newly created file, simply click the “Open” button. A dialog box appears that looks only for that file extension. The app will then read the object inside the file and places the little circles accordingly.

private function openClick(event:MouseEvent):void
		{
			var file:File = File.desktopDirectory;
			file.addEventListener(Event.SELECT, onSelect);
			file.browseForOpen("Open",[new FileFilter("Tuts Files (*.tuts)", "*.tuts")]);
		}
		private function onSelect(event:Event):void
		{
			var file:File = File(event.target);
			var fileStream:FileStream = new FileStream();
			fileStream.open(file, FileMode.READ);
			var object:Object = fileStream.readObject();
			red.x = object.RED[0];
			red.y = object.RED[1];
			blue.x = object.BLUE[0];
			blue.y = object.BLUE[1];
			fileStream.close();
		}

Step 13: Invoking the App

This is the invoke function. Without this function, if you were to launch the application from your new file, it wouldn’t know to load it. This function checks to see what told it to open. If it was a file, then it will load that file. If it wasn’t, then it simply calls the “init” function which gives the circles a random placement.

private function onInvoke(event:InvokeEvent):void
		{
			if(event.currentDirectory != null && event.arguments.length > 0)
			{
				var directory:File = event.currentDirectory;
				var file:File = directory.resolvePath(event.arguments[0]);
				var fileStream:FileStream = new FileStream();
				fileStream.open(file, FileMode.READ);
				var object:Object = fileStream.readObject();
				red.x = object.RED[0];
				red.y = object.RED[1];
				blue.x = object.BLUE[0];
				blue.y = object.BLUE[1];
				fileStream.close();
			} else
			{
				init();
			}
		}

Step 14: The Publish Settings

When the file is all tested and working correctly, we are ready to publish. Go to Commands > AIR – Application and Installer Settings, and bring up the publish settings.

Step 15: Setting up the Custom File Extension

In the Air publish settings, click on the advanced settings.

It will bring up another dialog box. Click on the “plus” button to add a file extension.

Fill out the file descriptions, select your custom icons, and click “OK” until you’re back to the first publish settings window.

Step 16: Publish Your File

The last thing to do is to publish your file. Click on the “Publish AIR File” button. You will need to create a certificate to sign the app with. Simply click “Create” to bring up the settings.

Fill out the form and click “OK”. Flash will prompt you when the certificate is created. When the certificate is made, enter the password and your file will be created.

Conclusion

This was just a basic example of what can be done with this technique. You could also create some kind of drawing application where you could either save out what you’ve drawn, or keep editing it. Or if you wanted to create a custom MP3 player, and have your own playlist file format. The possibilities are endless..

I hope you enjoyed following the tut.

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.