Tutorial on Oct 14, 2009. (Slides)

Tutorial by Jason Chuang.


If you would like to follow the programming tutorial on your own laptop, please install Flex Builder and download the Flare visualization libraries before the tutorial. A set of sample Flex applications will be also posted before the tutorial.

  • Install Adobe Flex Builder

    • Flex Builder is a development environment for Action Script/Flex applications, and is based on the Eclipse IDE. You have the option to install Flex Builder as a separate program or as an Eclipse plug-in. Either option is okay.
  • Download Flare Libraries

    • Inspired by Prefuse, Flare is an Action Script library for creating visualization for Adobe Flash Player. The tutorial is aimed at familiarizing you with some of the packages in Flare.

  • Download sample project

    • Please download the project file if you wish to follow along on your laptop. We will go through the four example applications contained in this Flex project.

License for Flex Builder

You may also wish to apply for the (free) education license in order to continue using Flex Builder after the trial period.

You will need to a proof of enrollment which can be downloaded from Axess by visiting the "Student Center" and clicking on "Request Enrollment Certification".


To enable debugging, you need to install Debugger Version of Flash Player for your browser. You can use the command "trace" to print out debugging information in the console.

    trace( x );
    trace( "The variable x contains: " + x );

Using Flash Components in Flex

You can insert Flash components into Flex by importing from fl.controls.* package.

You will need the following FlashControls.swc file, in order for the compiler to recognize the package path. Download the file. In your project properties, go to "ActionScript BuildPath", select the tab "Library Path", and click on "Add SWC..." to add FlashControls.swc to your build path.

More specifically, the SWC makes available the following components: Button, Check Box, Color Picker, Combo Box, Data Grid, Label, List, Numeric Stepper, Progress Bar, Radio Button, Scroll Pane, Slider, Text Area, Text Input, Tile List, UI Loader, and UI Scroll Bar.

The example code below demonstrates the use of a Slider.

    import fl.controls.Slider;
    import fl.events.SliderEvent;
    import flare.display.TextSprite;
    import flash.display.Sprite;

    public class SliderExample extends Sprite
        private var txt:TextSprite;
        private var slider:Slider;

        public function SliderExample()
            txt = new TextSprite();
            txt.text = "Drag the slider";
            txt.x = 100;
            txt.y = 135;
            this.addChild( txt );
            slider = new Slider();
            slider.x = 100;
            slider.y = 100;
            slider.minimum = 0;
            slider.maximum = 100;
            slider.addEventListener( SliderEvent.CHANGE, showSliderValue );
            this.addChild( slider );

        private function showSliderValue( sliderEvent:SliderEvent ):void
            txt.htmlText = "Slider = " + sliderEvent.value.toString();


  • Required

    • Flare Visualization Toolkit Tutorial

    • Prefuse: A Toolkit for Interactive Information Visualization. Heer, Card, & Landay. ACM CHI 2005. (pdf, wmv video)

    • Protovis: A Graphical Toolkit for Visualization. Michael Bostock & Jeffrey Heer. IEEE InfoVis 2009. (pdf)

  • Optional

    • Software Design Patterns for Information Visualization. Heer & Agrawala. IEEE InfoVis 2006. (pdf)

    • Building Highly-Coordinated Visualizations In Improvise. Chris Weaver. IEEE InfoVis 2004. (pdf)

    • ActionScript Reference