CREATE A DESKTOP AGGREGATOR FOR ANY EXISTING BLOG

IF YOU LIKE to keep up to date with all the latest happenings on the internet, you might have a few desktop widgets that read XML from different sources or load up your blog aggregator, which you have a scan of with your morning coffee and doughnut. Well, have you ever wondered how they create the desktop widget? In this walkthrough, you will learn how to pull in the blog feed from the Web Designer blog and display on a desktop widget, which you can drag, minimise and maximise. This tutorial will be your first steps to creating your own desktop aggregator, because once you have learnt how to create the widget with one feed, it will not be hard to extend the application to display other feeds. So enough talk, and let’s get on with creating your first Adobe AIR application.

Download the Tutorial Files
Originally appeared in Web Designer Issue 153 – Author: Darren Richardson

01 AIR

First things first, let’s get the latest version of the Adobe AIR runtime. Copy http://get.adobe.com/air/ into your browser’s address bar and follow the install instructions. After the
installation, open up Flash CS4 and select Flash File (Adobe AIR). Save your file as ‘RSSReader.fla’.

02 AIR settings

Select the main stage and open the Properties window. There will an Edit button next to the AIR Settings label. Click this and you will see the AIR Application & Installer Settings. Fill in the File name, Name and ID with ‘RSSReader’ and then select Custom Chrome (transparent) from the Window style. Last of all, press OK.

03 Logo header

On the cover disc, you will find a PNG copy of our logo in the folder for this tutorial – or feel free to use your own! Import this to the stage and make it a Movie Clip (Ctrl+F8). Inside the Movie
Clip, create a new layer called ‘hit’ and create a rectangle covering the logo. Make this a Movie Clip and make the Alpha equal zero. In the Property Inspector, make sure you name the instance ‘logo_mc’.

04 Loader

Create a new layer on the main timeline and call it ‘loader’, then create a new Movie Clip also called ‘loader’. On the first layer, create a rectangle inside the Movie Clip and make the Stroke equal three and the Rectangle Options equal 20 in the Property Inspector. Create another layer, calling it ‘mask’, then copy the inner of the rectangle and copy in the same place on the mask layer.

05 Loader animation

Next, create the animation layer, draw a pulse line as shown and create Keyframes at frame 10 for all three layers. On the animation layer, create a classic Tween and move the animation
to the right. Last of all, right-click the mask layer to make it mask over the animation. Back on the main timeline, open the Property Inspector and make the instance name ‘loader_mc’.

06 Close

Navigate back to the main timeline and create a new layer called ‘close’, then create a new Movie Clip called ‘close’. Inside the Movie Clip, draw a circle with an orange stroke colour and black inner, approximately 25px high and wide, then create a new layer. Using the Text tool, write ‘X’ as a Static text field. Back on the main timeline, open the Property Inspector and make the instance
name ‘close_mc’.

07 Max and min

Create two more layers on the main timeline called ‘min’ and ‘max’. As you have just done with the close Movie Clip, create new Movie Clips for each using the same names as the layers, and giving them symbols that represent minimise and maximise, as above. Back on the main timeline, open the Property Inspector and make the instance names ‘min_mc’ and ‘max_mc’.

08 Post background

This time there’s no need to create a layer. Create a new Movie Clip called ‘Post’, and tick both the linkage checkboxes in the Symbol Properties. Draw a rectangle with a curve using the Rectangle Options, then draw a circle over the top as above. Last of all, select the circle part that’s in the rectangle and delete it.

09 Post content

Create two new layers in the Post Movie Clip called ‘title’ and ‘number’. Using the Text tool, add Dynamic text fields to the rectangle and circle. In the Property Inspector, set the instance name for the rectangle as ‘title’ and select the Render Text As HTML option. For the other one, add ‘no’ in the instance name then save your work.

10 Imports

Create a new layer on the timeline called ‘code’, then open the Actions panel (Ctrl+F9). You will be adding some code on the timeline that acts as the controller, and some in a class that deals with the data and view. First, add the import statements, which will add the classes for the Mouse event and stage.

11 Stage constants
To ensure the application is always positioned at the top of the screen and to the left, you have to assign these constants to the scale mode and align properties of the stage object. Create two variables to hold a min and max size. These will be used to scale the application up and down.

this.stage.scaleMode=StageScaleMode.NO_SCALE;
this.stage.align=StageAlign.TOP_LEFT;
var minSize:int=75;
var maxSize:int=800;

12 Drag me
You created your ‘logo_mc’ at the beginning of this tutorial, and now you need to add a mouseDown event so you can drag the application around the whole desktop. Also, create the function for the event to call that will trigger the native window, which is your application to start to drag.

logo_mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
function mouseDown(evt:MouseEvent):void {
stage.nativeWindow.startMove();
}

13 Close button
Because the close Movie Clip is, in fact, a Movie Clip and not a button, you need to set the buttonMode property to equal true. Then, using the MouseEvent mouseDown constant, trigger the function called closeMouseDown and create the function, remembering to parse in an event of type MouseEvent as a parameter. Last of all, tell the native window to close.

*/
close_mc.buttonMode=true;
close_mc.addEventListener(MouseEvent.MOUSE_DOWN, closeMouseDown);
function closeMouseDown(evt:MouseEvent):void {
this.stage.nativeWindow.close();
}

14 Minimise button
Again, set the buttonMode to equal true and assign an Event Listener to the mouseDown event, and then create a function that is triggered by the mouseDown event. Inside the minimise function, set the stage height to the variable minSize that you created earlier.

min_mc.buttonMode=true;
min_mc.addEventListener(MouseEvent.MOUSE_DOWN, minMouseDown);
function minMouseDown(evt:MouseEvent):void {
this.stage.stageHeight=minSize;
}

15 Maximise button
This is the last bit of timeline code for now. Add the buttonMode to equal true for the ‘max_mc’ and then like before, add a mousedown Event Listener and create the function. This time set the stage height to the maxSize variable. Before you do anything else, save all your hard work.

/*
max
*/
max_mc.buttonMode=true;
max_mc.addEventListener(MouseEvent.MOUSE_DOWN, maxMouseDown);
function maxMouseDown(evt:MouseEvent):void {
this.stage.stageHeight=maxSize;
}

16 Package structure
Create a new ActionScript file and save it as ‘WebDesignerRssViewer.as’ in the same directory as your FLA file. First create a package structure, then add your imports and your class definition. Note the URL string, which is the Web Designer blog RSS feed. Also create variables for the external XML, loader and one for your currentY position.

package {
import flash.display.MovieClip;
import flash.net.URLRequest;
import flash.net.URLLoader;
import flash.events.Event;
import flash.xml.*;
import flash.events.IOErrorEvent;
public class WebDesignerRssViewer extends MovieClip {
// the web designer blog rss feed url
public var url:String=”http://www.webdesignermag.co.uk/feed/”;
// The XML object containing the Web Designer RSS data
private var externalXML:XML;
// Used to load RSS data.
private var loader:URLLoader;
// used to place posts
private var currentY:int = 40;

17 Constructor
Create the class constructor and inside declare a new URL request object, parsing in the URL string. Next, create a new instance of the URL loader and add an error Event Listener to it as well as a complete event, which will both trigger function calls.

var request:URLRequest=new URLRequest(url);
loader = new URLLoader();
loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
loader.addEventListener(Event.COMPLETE,
loaderCompleteHandler);

18 Exception handling
Before you fire off the loader.load event, wrap the call in a try and catch statement. This will tell Flash to try your loader function. If it has any errors, it will trigger the catch statement, which will then trace out an error. If, on the other hand, the loader doesn’t error, the catch statement is ignored.

try {
loader.load(request);
} catch (error:SecurityError) {
trace(“A SecurityError has occurred.”);
}
}

19 Complete
Create a new function called ‘loaderCompleteHandler’, parsing in an event as the parameter. As you did before, add a try and catch statement. In the try statement, make the loader data object a new XML object, then parse that new XML object in to the function readNodes.

private function loaderCompleteHandler(event:Event):void {
try {
externalXML = new XML(loader.data);
readNodes(externalXML);
} catch (e:TypeError) {
trace(“Could not parse the XML file.”);
}
}

20 readNodes
Create the function ‘readNodes’, parsing in the new XML as a node. Add a variable called ‘count ‘ and assign it to equal one, then in a for each loop, go through the XML nodes and in each one assign the variable ‘itemTitle’ and ‘itemLink’ to the XML data title and link.

private function readNodes(node:XML):void {
var count:int = 1;
for each (var item:XML in node..item) {
// assign the RSS data
var itemTitle:String=item.title.toString();
var itemLink:String=item.link.toString();
//

21 The post object
Create a new Post object, which is the Movie Clip you created earlier. Assign the title a HTML string that includes the link variable, and also assign the counter, placing the post X and Y co-ordinates. To make sure you can see the post, add to the stage using addChild, and then hide the loader Movie Clip.

create a new post object
var p:Post = new Post();
// assign the title some text and a link
p.title.htmlText = “<a href=’” + itemLink + “’>” + itemTitle + “</a><br>”;
// add 1 to the counter
p.no.text = String(count++);
// place the post item
p.x = 20;
currentY += 55;
p.y = currentY;
// add to the stage
addChild(p);
// load completed
loader_mc.visible = false;
}

22 Trapping an error
Last of all, before you close the package and class braces, add one last function that will trigger if the loader has an error getting the data. Save the ActionScript file and reopen the FLA. Open the Property Inspector and add the class name ‘WebDesignerRssViewer’ into the class input field.

private function errorHandler(e:IOErrorEvent):void {
trace(“Had problem loading the XML File.”);
}
}
}

23 The final result
Finally, in the Property Inspector press the Edit button next to AIR and then hit Publish. You have to create a certificate next, so follow the steps as instructed. When you have finished, you should have created an AIR installer. To test, install on your machine.