The Visual programing paradigm easily allows you to create prototypes by manipulating graphical API elements on the system rather than by specifying them textually as in traditional programming languages. These system API elements are referred to as patches and are connected to create a composition. As you work with a composition, you can visually see the results in a viewer window, no compilation required.

The following is a really simple Quartz example utilizing an Arduino Micro-Controller as an input. We will be connecting a pot (potentiometer ) to the Arduino and measuring the amount of voltage resistance as an analog value. The Arduino will convert the value to a number between 0 and 1023 and it will print the number to the serial port . We will set up Quartz to monitor the serial port and to display the incoming value in its viewer.

REQUIRED HARDWARE :

REQUIRED SOFTWARE :

I’m going to assume you are familiar with the Arduino board and you have already installed the Arduino Ide on your computer. If not, here’s a basic tutorial to get you up and running. I will walk you through the necessary steps to connect Quartz Composer to the Arduino.

Let’s start off by identifying your operating system version, and determine if your Mac’s graphics card supports Quartz Extreme or Core Image.

*NOTE : If you use Mac OS X v10.6, your Mac already meets the requirements for Quartz Extreme and Core Image graphics.

The following steps will help you identify your graphics card support for Quartz Extreme or Core Image.

(1) Open System Profiler (in /Applications/Utilities).
(2) Click “Graphics/Displays” under Contents.
(3) In the right pane under “Display,” look for the Quartz Extreme and Core Image lines; next to each, you will see either
“Supported” or “Not Supported.”

Computers that have a Core Image capable graphics card will sometime display “Hardware Accelerated” and those that do not will have software written in system profiler like so: “Software (Titanium PowerBook G4) ”

As you can see my Macbook Pro has the muscles needed to continue on to the next step of installing Apple’s Xcode suite of tools. If you haven’t already registered as an Apple Developer, (all the cool kids are doing it) this is the perfect opportunity to do so. The main reason to register is to be able to access the downloads section of the Developer Tools and of course to get support from Apple if ever needed. You don’t have to join the paid program, choose the FREE option.

Here’s the direct link to the Apple Developer tools section (you must be logged in to Apple Support to access the page). Peruse the list, download and install a compatible version of Xcode for your current operating system.

Once you have installed Xcode, you now have access to the Quartz Composer application. Quartz Composer is located under:

/Developer/Applications
(not in the standard/Applications directory)

Select the Quartz Composer.app icon and drag it to your dock for easier access. The next thing you need to do is register with Kineme to have access to their media patches. The patch we are most interested in is the Kineme Serial IO plugin (you need to be registered to access the Quartz patch). Once you have downloaded the patch, put it in the following folder:

/Users/[you]/Library/Graphics/Quartz Composer Patches/

If the folder doesn’t already exist, CREATE IT!.

That pretty much covers the software needs for the Quartz Composer end of the equation. Now, lets focus on setting up your Arduino. Grab the Arduino, jumper wire and potentiometer. Connect a wire from one of the outer pins of the potentiometer to the ground pin on the Arduino. Connect another wire to the other outer pin of the potentiometer to the 5 volts pin on the Arduino . Lastly, connect a wire from the middle pin of the potentiometer to the analog input pin 0 on the Arduino.

Connect your Arduino board via USB to your computer and open up the Arduino IDE.
Go to Tools->Serial Port and choose the entry that reads /dev/tty.usbserial-XXXXXXXX. Take note of the Serial port location, we will need to add it as a variable to the Serial IO patch in the Quartz Composer composition.

Next Go to Tools->Board and select your board.

You can either copy, type or download the source for the following Arduino sketch.

/*
This example shows the output of an analogRead() of a Potentiometer.
By M.Gonzalez
www.codingcolor.com
The example code is in the public domain
*/
int potentiometerPin = A0;    // select the input pin for the potentiometer
int potentiometerValue = 0;  // variable to store the value coming from the potentiometer

void setup() {

  Serial.begin(9600);
  pinMode(potentiometerPin, INPUT);
 
}

void loop() {
  // read the value from the potentiometer:
  potentiometerValue = analogRead(potentiometerPin);    
  // send the value to Quartz Composer with line break
  Serial.println( potentiometerValue);  
  delay(1000);
}

The sketch is relatively simple. All it’s doing is reading the input from the pot and printing the data. Upload the Sketch to your Arduino and open your Serial Monitor (click on the button directly to the right of the “Upload” button). You should see a steady stream of numbers ranging from 0-1023, correlating to the position of the pot. As you turn your potentiometer, these numbers will respond almost instantly. If all went well, you can close the Arduino Ide and open up Quartz Composer.

The first thing you will do is create a Blank Composition.

Next, select the Patch Creator button, which will spawn the Patch Creator utility window. The window enables you to browse the available Quartz Composer patches and clips. When you select a patch name, you can read its description and pertinent information about the patch .

In the search bar enter the text “clear”. The results should display the Clear patch. The Clear patch paints the entire rendering destination (Viewer Window) with a constant color and clears the depth buffer. Either double click on the patch or drag it to the composition editor window. If the Viewer Window is open, you will notice that it’s now rendering a black screen. To change the color, you select the Clear patch in the Editor window and click on the Patch Parameters button on the toolbar at the top of the editor window.

The patch parameters pane will be shown to the right of the workspace. The pane provides convenient access for editing input parameters. You will notice that the Clear Color input is set to black, this is where you would change the color if need be.

Next navigate back to the Patch Creator utility window and search for “Serial input”. If you followed the Quartz Composer set up, you will have successfully found the Serial input by Kineme. Double click on the Serial Input patch or drag it to the composition editor window. With the Kineme Serial Input patch selected in the editor window, select the Patch Inspector button on the toolbar to spawn the Patch Inspector utility window. Remember when I told you to take note of the Serial port location of your Arduino, well this is the time when you need it. Enter the location of your USB port, enter the Baud rate (by default 9600) and enter ‘\n’ into the Break String input field.

This Serial patch is all you need to receive data from your Arduino. Whatever the Arduino is printing out, will be available to the Quartz application. It is up to you to handle the data and transform it into a visual representation.

Navigate back to the Patch Creator utility window and run a search for “Image With String”. Double click on the patch or drag it to the composition editor window. Now here’s your first connection. Select the Data output on the Kineme Serial Input patch and connect it to the String input of the Image With String patch.

Navigate back to the Patch Creator utility window and run a search for “Billboard”. Double click on the patch or drag it to the composition editor window. Connect the Image output of the Image With String patch to the Image input on the Billboard patch.

There you have it, you should now be viewing the value of the Arduino pot in the Viewer Window. Turn the pot and the numbers will update in the viewer. This posting introduces you to the possibilities of interaction you can have between Quartz and the Arduino. If you are wondering if you can use Quartz to send data to Arduino, well the answer is yes, but I’ll save that for another post. For now get familiar with Quartz it’s a powerful application, take this example and plug it into a Particle system or make a blur filter. Swap out the pot for a Photocell, get creative!
Enjoy!

The Microsoft Kinect Controller seems to be the HOT hackable item in the interactive art world. Just like the Wii Remote, the Kinect has been hacked by interactive artists to control robots, scan environments, create sound instruments and much,much more. The Kinect is a robust sensor which features an “RGB camera, depth sensor and multi-array microphone running proprietary software”, which provide full-body 3D motion capture, facial recognition and voice recognition capabilities. The Kinect Hacker community and the Open Sourcing of device drivers have enabled the Kinect controller to be used directly from connected PC’s operating on Windows 7. I’ve been following the development of interactive installations and experimentation’s utilizing the Kinect sensor. I felt it was time to list a few of my favorites. Being an AS3 engineer, it’s only natural I start off with some of the cool AS3 examples.

My favorite to date is the Touchless Kinect AS3 application, which is developed with the OpenKinect AS3 API.

Click here to view the embedded video.

Silvio Paganini has also been quite busy, experimenting using AS3 TUIO and the UDP-Flash Bridge.

Click here to view the embedded video.

If you are Windows person, you can now control apps on Windows 7.

Click here to view the embedded video.

The Quadratura collective exhibited “Shadows of Light” a Kinect based art piece at the Ambika Gallery in London.

Click here to view the embedded video.

Cyber Sex anyone? This maybe a bit weird but yes, people are taking it to the next level.

Click here to view the embedded video.

You can find more information regarding open source Kinect at OpenKinect.org and if you want to stay up on hacked Kinect news, visit Kinect Hacks.

Now it’s only time till someone replicates the Minority Report-like interface.

(1) Open up your Library.
(2) Select the upper-right corner of the Library panel pop up menu.
(3) Select New Font.
(4) Enter a name for the font in the Name field.
(5) Select a font from the Font menu.
(6) Select your desired font style (Regular, Italic, Bold, or Bold Italic) from the Style drop-down menu.

*Note: The Size setting applies only when you use the Bitmap Text option. You’ll usually set the size of the text in a TextFormat object.

(8) Click the Advanced button
(9) Click Export for ActionScript and enter a class name.

*Note: I usually place my library items in a lib namespace, you don’t have to do that.

(10) Click OK.

The font utility simply creates a TextFormat object and sets its fontFamily property to the name of the embedded font, and applies the TextFormat object to a given TextField.

The following is the example swf:

Here’s the document class which displays examples on how to use the font utility.

/*******************************
* Author: Manuel Gonzalez      *
* www   : www.codingcolor.com  *
* email : design@stheory.com   *
********************************/
package{
   
import com.utils.TextFields.EmbedFontUtil;
import com.lib.Jazz;
import com.lib.Juice;
import com.lib.Banco;
import com.lib.HelveticaBlack;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
import flash.text.Font;
import fl.controls.Button;
import flash.events.MouseEvent;
   
public class DocApp extends Sprite{
       
private var embedUtil       :EmbedFontUtil;
private var exampleString_1 : String = 'A dynamic TextField displaying the Jazz Font';
private var exampleString_2 : String = 'A dynamic TextField with a TextFormat displaying the Juice Font.';
private var exampleString_3 : String = 'The Banco Font, TextFormat and other crap!';
private var exampleString_4 : String = 'Displaying Helvetica Bold in a text field on stage.';
private var exampleString_5 : String = 'Press the button to change my font';
//
private var changeFontButton:Button;
       
       
public function DocApp(){
 embedUtil = EmbedFontUtil.getInstance();

/******** simple example with a dynamic text field *************/
var testField_1:TextField = new TextField();
testField_1.autoSize = TextFieldAutoSize.LEFTtestField_1.x = 25;
testField_1.y = 25;
var JazzFont:Font = new Jazz();//make sure to import your font
embedUtil.embedFont(testField_1,JazzFont);
testField_1.text = exampleString_1;
addChild(testField_1);

/******** simple example with a text field placed manually on stage *********/
var helveticaBlackFont:Font = new HelveticaBlack();//make sure to import your font
embedUtil.embedFont(textFieldOnStage,helveticaBlackFont);
textFieldOnStage.text = exampleString_4;
/****************************************************************************/

/******** example with a dynamic text field & TextFormat object ************/
var testField_2:TextField = new TextField();
testField_2.autoSize = TextFieldAutoSize.LEFT;
testField_2.x = 25;
testField_2.y = 50;
var format_1:TextFormat = new TextFormat();
format_1.color = 0xff00ff;
format_1.align = TextFormatAlign.LEFT;
format_1.size = 14;
var juiceFont:Font = new Juice();//make sure to import your font
embedUtil.embedFont(testField_2,juiceFont,format_1);
testField_2.text =  exampleString_2;
addChild(testField_2);
           
/************************************************************************/
           
           
/******** example with a dynamic textfield & properties including TextFormat**********/
var testField_3:TextField = new TextField();
testField_3.width = 500;
testField_3.height = 22;
testField_3.background = true;
testField_3.backgroundColor = 0x000000;
testField_3.textColor = 0xffffff;
testField_3.x = 25;
testField_3.y = 85;
           
var format_3:TextFormat = new TextFormat();
format_3.size = 16;
format_3.align = TextFormatAlign.CENTER;
format_3.url = "http://codingcolor.com";
format_3.underline = true;
           
var bancoFont:Font = new Banco();//make sure to import your font
embedUtil.embedFont(testField_3,bancoFont,format_3);
testField_3.text =  exampleString_3;
addChild(testField_3);

/*************** example with a textfield on stage preserve format and string change font ****/
createButtonUI();
changeFontField.text = exampleString_5;

}
/*
Method: createButtonUI
Parameters:
Returns:
*/
private function createButtonUI():void
{
changeFontButton = new Button();
changeFontButton.width = 100;
changeFontButton.move(changeFontField.x,changeFontField.y + changeFontField.height+10);
changeFontButton.label = "Change Font";
changeFontButton.setStyle("textFormat", new TextFormat("Helvetica Black"));
changeFontButton.addEventListener(MouseEvent.CLICK, changeTheFont,false,0,true);
addChild(changeFontButton);
}

/*
Method: changeTheFont
Parameters:
evt:MouseEvent
Returns:
*/
private function changeTheFont(evt:MouseEvent):void
{
var JazzFont:Font = new Jazz();
embedUtil.embedNewFontPreserveString(changeFontField,JazzFont);
}
}
   
   
   
}

As you can see it’s pretty simple to use:
var helveticaBlackFont:Font = new HelveticaBlack();
embedUtil.embedFont(textFieldOnStage,helveticaBlackFont);
textFieldOnStage.text = exampleString_4;

Download the class and files below.
Enjoy!
Font Embed Util (41)

To state the obvious, flash readily allows a few ways to read the width and height of a TextField display object.
You can use the following properties of the TextField class:

textWidth: The width of the text in pixels.
textHeight: The height of the text in pixels

Or get the width and height using the TextField width and height properties, which will include the invisible frame which surrounds the text field.

TextField.width: The width of the TextField in pixels.
TextField.height: The width of the TextField in pixels.

And last but not least you can use the TextLineMetrics class which will contain information about the text position and pixel measurements of a line of text within a text field.

Anyhow the following example below displays two examples of the the StringUtils.as class in action. The first example takes a string and returns its width and height value which in turn uses the dimensions to display a blue rectangle. The Second examples takes in an array of strings and returns a number which represents the widest string in the array, which in turn uses the width dimension to display a red rectangle.

Here’s the StringUtils.as class in its entirety.

/************************************
* @author : Manuel Gonzalez         *
* @blog   : www.codingcolor.com     *
* @email  : design@stheory.com      *
* @www    : www.stheory.com         *
************************************/
package com.utils
{
    import flash.text.AntiAliasType;
    import flash.text.Font;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    import flash.text.TextFormatAlign;
    import flash.text.TextLineMetrics;

    public class StringUtils
    {
        public function StringUtils(){}
       
        /*
        Method: getTextLineWidth
        Parameters:
        inStr:String
        inFont:Font
        inTextFormat:TextFormat=null
        Returns:
        Number
        */
        public static function getTextLineWidth(inStr:String, inFont:Font,inTextFormat:TextFormat=null):Number
        {
            var tFormat:TextFormat;
           
            if(inTextFormat == null){
            tFormat = new TextFormat();
            tFormat.size = 12;
            tFormat.align = TextFormatAlign.LEFT;
            tFormat.font = inFont.fontName;
            tFormat.rightMargin = 1;

            }else{
           
                tFormat = inTextFormat;
               
            }
           
            var testField:TextField = new TextField();
            testField.autoSize = TextFieldAutoSize.LEFT;
            testField.multiline = false;
            testField.wordWrap = false;
            testField.embedFonts = true;
            testField.antiAliasType = AntiAliasType.ADVANCED;
            testField.defaultTextFormat = tFormat;
            testField.text = inStr;
           
            return Math.floor(testField.width);
        }
        /*
        Method: getTextLineHeight
        Parameters:
        inStr:String
        inFont:Font
        inTextFormat:TextFormat=null
        Returns:
        Number
        */
        public static function getTextLineHeight(inStr:String, inFont:Font,inTextFormat:TextFormat=null):Number
        {
            var tFormat:TextFormat;
           
            if(inTextFormat == null){
            tFormat = new TextFormat();
            tFormat.size = 12;
            tFormat.align = TextFormatAlign.LEFT;
            tFormat.font = inFont.fontName;
            tFormat.rightMargin = 1;

            }else{
           
                tFormat = inTextFormat;
               
            }
           
            var testField:TextField = new TextField();
            testField.autoSize = TextFieldAutoSize.LEFT;
            testField.multiline = false;
            testField.wordWrap = false;
            testField.embedFonts = true;
            testField.antiAliasType = AntiAliasType.ADVANCED;
            testField.defaultTextFormat = tFormat;
            testField.text = inStr;
           
            return Math.floor(testField.height);
        }
        /*
        Method: getTextWidthAndHeight
        Parameters:
        inStr:String
        inFont:Font
        inTextFormat:TextFormat=null
        Returns:
        Object {width:,height:}
        */
        public static function getTextWidthAndHeight(inStr:String, inFont:Font,inTextFormat:TextFormat=null):Object
        {
            var textObj:Object = {};
            var tFormat:TextFormat;
           
            if(inTextFormat == null){
            tFormat = new TextFormat();
            tFormat.size = 12;
            tFormat.align = TextFormatAlign.LEFT;
            tFormat.font = inFont.fontName;
            tFormat.rightMargin = 1;
            }else{
           
                tFormat = inTextFormat;
               
            }
           
            var testField:TextField = new TextField();
            testField.autoSize = TextFieldAutoSize.LEFT;
            testField.multiline = false;
            testField.wordWrap = false;
            testField.embedFonts = true;
            testField.antiAliasType = AntiAliasType.ADVANCED;
            testField.defaultTextFormat = tFormat;
            testField.text = inStr;
           
            textObj.width = Math.floor(testField.width);
            textObj.height = Math.floor(testField.height);
           
            return textObj;
        }
        /*
        Method: getWidthOfLongestStringInArray
        Parameters:
        inArray:Array
        inFont
        inTextFormat=null
        Returns:
        Number
        */
        public static function getWidthOfLongestStringInArray(inArray:Array,inFont:Font,inTextFormat=null):Number
        {
            var wResult:Number = 0;
            var tFormat:TextFormat;
           
            if(inTextFormat == null){
            tFormat = new TextFormat();
            tFormat.size = 12;
            tFormat.align = TextFormatAlign.LEFT;
            tFormat.font = inFont.fontName;
            tFormat.rightMargin = 1;
            }else{
           
                tFormat = inTextFormat;
               
            }
           
            var len:int = inArray.length;
           
            for(var i:int =0; i < len; i++)
            {
                var testField:TextField = new TextField();
                testField.autoSize = TextFieldAutoSize.LEFT;
                testField.multiline = false;
                testField.wordWrap = false;
                testField.embedFonts = true;
                testField.antiAliasType = AntiAliasType.ADVANCED;
                testField.defaultTextFormat = tFormat;
                testField.text = inArray[i] as String;
               
                var stringWidth:Number = Math.floor(testField.width);
               
                if(stringWidth > wResult){
                    wResult = stringWidth;
                }
                 
               
            }
           
            return wResult;
        }
       
       
    }
}

The download provides the above example including the StringUtils.as class.
Enjoy!

The code is quite simple :

/****************************
* Manuel Gonzalez           *
* design@stheory.com        *
* www.stheory.com           *
* www.codingcolor.com       *
*****************************/
package
{

    import flash.display.Sprite;
    import flash.system.Security;
    import flash.system.System;
    import fl.controls.Button;
    import fl.controls.TextArea;
    import fl.controls.RadioButton;
    import fl.controls.RadioButtonGroup;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.display.Loader;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;
    import flash.utils.Dictionary;

    public class DocApp extends Sprite
    {
        private var facebookXml:String = "FacebookLocales.xml";
        private var isoXml:String = "iso_3166-1_list_en.xml";
        private var facebookCountryCodes:Array;
        private var isoDataArray:Array;
        private var finalCountriesData:Array;
        private var outputField:TextArea;
        private var printOutputButton:Button;
        private var clipBoardButton:Button;
        private var rbg:RadioButtonGroup;


        public function DocApp()
        {
            Security.loadPolicyFile("your_path_to_cross_domain.xml");
            createUI();
            outputField.text = "loading data";
            loadXML(facebookXml, fbXMLLoaded);

        }
        /*
        Method: loadXML
        Parameters:
        inPath:String
        inCallback:Function
        Returns:
        */
        private function loadXML(inPath:String, inCallback:Function):void
        {
           
            var loader:URLLoader = new URLLoader ();
            var req:URLRequest = new URLRequest(inPath);
            loader.addEventListener(Event.COMPLETE, inCallback, false, 0, true);
            loader.load(req);
        }
        /*
        Method: fbXMLLoaded
        Parameters: evt:Event
        Returns:
        */
        private function fbXMLLoaded(evt:Event):void
        {

            var theXml:XML = new XML(evt.target.data);
            parseFbXml(theXml);
            arrayRemoveDup(facebookCountryCodes);
            //
            loadXML(isoXml, isoXMLLoaded);
        }
        /*
        Method: isoXMLLoaded
        Parameters: evt:Event
        Returns:
        */
        private function isoXMLLoaded(evt:Event):void
        {
            var theXml:XML = new XML(evt.target.data);
            parseIsoXml(theXml);

            buildCountryData();
            outputField.text = "Data Ready";
        }
        /*
        Method: parseIsoXml
        Parameters: inXml:XML
        Returns:
        */
        private function parseIsoXml(inXml:XML):void
        {
            var data:XML = inXml as XML;
            isoDataArray = [];
            var numCountries:int = data.ISO_3166_1_Entry.length();
            for (var i:int = 0; i < numCountries; i++) {
                var current:XML = data.ISO_3166_1_Entry[i];
                var cObj:Object = {};
                cObj.value = current.ISO_3166_1_Alpha_2_Code_element;
                cObj.label = current.ISO_3166_1_Country_name;
                isoDataArray.push(cObj);
            }
        }
        /*
        Method: parseFbXml
        Parameters: inXml:XML
        Returns:
        */
        private function parseFbXml(inXml:XML):void
        {
            var data:XML = inXml as XML;
            facebookCountryCodes = [];
            var numLocales:int = data.locale.length();
            for (var i:int =0; i< numLocales; i++) {
                var current:XML = data.locale[i];
                var rep:String = current.codes[0].code.*.representation;
                var pos:int = rep.indexOf("_");
                var countryCode:String = rep.substr(pos + 1);
                facebookCountryCodes.push(countryCode);
            }
        }
        /*
        Method: buildCountryData
        Parameters:
        Returns:
        */
        private function buildCountryData():void
        {
            var len:int = facebookCountryCodes.length;
            finalCountriesData = [];

            for (var i:int = 0; i < len; i++) {
                var codeStr:String = facebookCountryCodes[i];
                var isolen:int = isoDataArray.length;
                for (var j:int = 0; j < isolen; j++) {
                    if (codeStr.toLowerCase() == isoDataArray[j].value.toLowerCase()) {
                        finalCountriesData.push(isoDataArray[j]);
                        break;
                    }
                }


            }

        }
        /*
        Method: createUI
        Parameters:
        Returns:  
        */
        private function createUI():void
        {

            outputField = new TextArea();
            outputField.setSize(500, 500);
            outputField.move(25, 40);
            addChild(outputField);
            printOutputButton = new Button();
            printOutputButton.width = 75;
            printOutputButton.move(450,10);
            printOutputButton.label = "Print";
            printOutputButton.setStyle("textFormat", new TextFormat("Arial"));
            printOutputButton.toggle = true;
            printOutputButton.addEventListener(MouseEvent.CLICK, printToOutputField,false,0,true);
            addChild(printOutputButton);
            //
            clipBoardButton = new Button();
            clipBoardButton.width = 125;
            clipBoardButton.move(225,550);
            clipBoardButton.label = "Copy To Clipboard";
            clipBoardButton.setStyle("textFormat", new TextFormat("Arial"));
            clipBoardButton.toggle = true;
            clipBoardButton.addEventListener(MouseEvent.CLICK, copyData,false,0,true);
            addChild(clipBoardButton);
            //
            rbg = new RadioButtonGroup("options");
            createRadioButton("Xml", rbg,225,10);
            createRadioButton("Array of Obj", rbg,325,10);

        }
        /*
        Method: copyData
        Parameters: evt:MouseEvent
        Returns:
        */
        private function copyData(evt:MouseEvent):void
        {
            copyToClipboard(outputField);
        }
        /*
        Method: printToOutputField
        Parameters: evt:MouseEvent
        Returns:
        */
        private function printToOutputField(evt:MouseEvent):void
        {
            if (rbg.selection == null) {
                return;
            }

            outputField.text = "";
            if (rbg.selection.label == "Xml") {
                printXMLToOutput();
            } else {
                printObjArrayToOutput();
            }

        }
        /*
        Method: createRadioButton
        Parameters:
        rbLabel:String
        rbg:RadioButtonGroup
        xpos:Number
        ypos:Number
        Returns:
        */
        private function createRadioButton(rbLabel:String, rbg:RadioButtonGroup,xpos:Number,ypos:Number):void
        {
            var rb:RadioButton = new RadioButton();
            rb.group = rbg;
            rb.label = rbLabel;
            rb.move(xpos, ypos);
            addChild(rb);
        }
        /*
        Method: copyToClipboard
        Parameters: inTf:*
        Returns:
        */
        private function copyToClipboard(inTf:*):void
        {
            System.setClipboard(inTf.text);
        }
        /*
        Method: printObjArrayToOutput
        Parameters:
        Returns:
        */
        private function printObjArrayToOutput():void
        {
            finalCountriesData.sortOn("label");
            var len:int = finalCountriesData.length;
            outputField.text = 'var facebookCountries:Array = [';
            for (var i:int = 0; i < len; i++) {
                if (i == len - 1) {
                    outputField.appendText('{value:'+'"'+finalCountriesData[i].value+'"'+',label:"'+finalCountriesData[i].label+'"}];');
                } else {
                    outputField.appendText('{value:"'+finalCountriesData[i].value+'",label:"'+finalCountriesData[i].label+'"},\n');
                }
            }
        }
        /*
        Method: printXMLToOutput
        Parameters:
        Returns:
        */
        private function printXMLToOutput():void
        {
            outputField.text = '<facebook_countries_en xml:lang="en"> \n';
            finalCountriesData.sortOn("label");
            var len:int = finalCountriesData.length;
            for (var i:int = 0; i < len; i++) {
                outputField.appendText('<country_entry> \n');
                outputField.appendText(' <country_code>'+finalCountriesData[i].value+'</country_code> \n');
                outputField.appendText(' <country_name>'+finalCountriesData[i].label+'</country_code> \n');
                outputField.appendText('</country_entry> \n');
            }
            outputField.appendText('<facebook_countries_en>');
        }
       
        /***************** HELPER METHODS *********************************/
        /*
        Method: arrayRemoveDup
        Parameters: inArry:Array
        Returns:
        */
        private function arrayRemoveDup(inArry:Array):void
        {
            var i,j:int;
            for (i = 0; i < inArry.length - 1; i++) {
                for (j = i + 1; j < inArry.length; j++) {
                    if (inArry[i] === inArry[j]) {
                        inArry.splice(j, 1);
                    }


                }
            }
        }
    }
}

The code loads up FacebookLocale.xml, parses it and creates a facebook country code array. I proceed by removing duplicates in the array. Next, I load up the countries ISO xml , parse it and create a countries ISO data array with objects that contain the country name and country code. Lastly, I build my final country array by taking the Facebook country codes and searching for them in the countries ISO data array. If a country is found the ISO data Object is pushed to the final array. The rest of the code supports the UI. I’ve included everything you need in the download below. To keep the country list up to date you should always download the necessary xml files:

FacebookLocale.xml
iso_3166-1_list_en.zip

Also, Flash does not like the dash’s in the iso_3166-1_list_en.xml. If you download the zip from ISO and compare it with the xml I provided for you in the download, you will notice I replaced the dash with an underscore.
**** NOTE the duplicate function is not efficient, look over your output for doubles. I’ll release the fix when I get around to it. If you solved it, please post it …keep ActionScript open source.
Anyhow, enjoy!

The Arduino Pro Mini comes in two flavors, 3.3 volt or 5 volt. I prefer the 5 volt option. I alter the voltage when need be, especially when working with sensors that operate at 3.3V . A few other things you will find a bit different migrating from the Duemilanove are the RAW, VCC and RESET pins. The RAW pin enables you to supply the board with a raw unregulated voltage (5-12 volts, depending on the model). The VCC pins requires a regulated 3.3 or 5 volt supply (once again, depending on the model) to power the board. I usually power the board via the RAW pin and use the VCC pin to output a regulated 5v power source. The RESET pin is typically used to add a reset button to shields which block the one on the board.

You will notice that the board has analog pins 4(sda) and 5(scl) on the interior of the board. Pins 4 and 5 have a specialized functionality. The pins are used to support I2C (TWI) communications using the Wire library. That pretty much sums up the differences between the Duemilanove beginners board and the Arduino Pro Mini. I love the size of the Pro Mini. It compliments most of my prototyping applications and gives me the inputs and outputs I have grown to love from the Duemilanove.

I recommend you take an Arduino Pro Mini and set it up to be Breadboard friendly. To do this you will need a medium size Breadboard, a set of straight headers and (optional) a set of Right Angle breakaway headers. The next steps provide you with info on how to set up your Arduino Pro Mini to be Breadboard friendly.

Take the break away headers and cut them to fit the Arduino Pro Mini. You will need (2) 12 pin headers, (1) 6 pin header and (1) 2 pin header.

Now get your soldering iron out and lets solder the headers onto the board. The first thing I do is solder the 6 pin header to the top of the Arduino board. This is where the Arduino board will connect with the Basic FTDI board. I prefer to use Right Angle headers for the 6 pin. Place the 6 pin header on the Arduino board and flip the board over keeping the header pins in place and solder. Take a pair of wire snipers and snip the excess wire from the bottom of the board to allow the Arduino Mini to set flush up against a Breadboard. You should now have an Arduino board that looks like this (if you used the Right angle header):

Next, grab the medium size Breadboard and insert the 2 pin header into the Breadboard (shorter side of the pins up). Then flip the Arduino board over (backside up) and set the analog A4 and A5 holes of the Arduino onto the header pins. Align the Arduino board parallel to the Breadboard and solder. When you are done grab your snipers and cut the excess wire on the bottom of the Arduino board. You should now have 2 pins sticking out of the top of the Arduino board, enabling access to analog pins 4 and 5.

Placing the headers on a Breadboard prior to soldering helps, keep the Arduino Mini in place. In the next step we use this technique to add the 12 pin headers.

Simply place one of the 12 pin headers (short side of the pins up) onto the Breadboard. Place the Arduino Mini (top side up) onto the header. Take a mental note of the placement of the holes in relation to the Breadboard and place the other 12 pin header in its place. You should now have a stable Arduino Mini sitting on top of the 12 pin headers. All you have left to do is solder the headers in place. The end result should look like this:

That concludes my instructional.

I have one more cool tip for you. Look into Modern Devices wired Breadboard. They make a foolproof beginners PCB board that enables you to transfer your project directly from your solderless breadboard to the PCB, now that’s cool! This is just the tip of the iceberg, I will release other topics primarily featuring the Arduino Pro Mini, so subscribe to my RSS feed to get the latest and greatest on my Arduino adventures.
Till next time, Enjoy!