Differences

This shows you the differences between the selected revision and the current version of the page.

tutorial 2008/07/28 12:35 tutorial 2009/01/11 16:19 current
Line 18: Line 18:
    * The software is currently an alpha version, and so some bugs and limitations are to be expected. We will fix problems as soon as we can, and the link above will always point to the most recent version.     * The software is currently an alpha version, and so some bugs and limitations are to be expected. We will fix problems as soon as we can, and the link above will always point to the most recent version.
-===== Introduction to Flash and ActionScript 3 =====+==== Introduction to Flash and ActionScript 3 ====
Flash is a great environment for interactive graphics and with the recent addition of the ActionScript 3 programming language, it just became a lot more powerful and efficient. While a complete introduction to AS3 is beyond the scope of this tutorial, here are some resources you will find useful: Flash is a great environment for interactive graphics and with the recent addition of the ActionScript 3 programming language, it just became a lot more powerful and efficient. While a complete introduction to AS3 is beyond the scope of this tutorial, here are some resources you will find useful:
Line 28: Line 28:
This tutorial assumes a basic familiarity with ActionScript syntax and types, as well as concepts of object-oriented programming. This tutorial assumes a basic familiarity with ActionScript syntax and types, as well as concepts of object-oriented programming.
-===== Part 1: DisplayObjects and the Flash Display List =====+===== Part 1: DisplayObjects =====
==== Introduction ==== ==== Introduction ====
Line 166: Line 166:
There's a lot more you can do with the basic options Flash provides. Unfortunately, they are a bit beyond what we have time for here. Some things to explore include image filters (see the ''flash.filters'' package), which allow you to add visual effects to display objects using their ''filters'' property, and the different options available in the ''flash.display.Graphics'' class, including fill and line styles, and many more 2D drawing routines. There's a lot more you can do with the basic options Flash provides. Unfortunately, they are a bit beyond what we have time for here. Some things to explore include image filters (see the ''flash.filters'' package), which allow you to add visual effects to display objects using their ''filters'' property, and the different options available in the ''flash.display.Graphics'' class, including fill and line styles, and many more 2D drawing routines.
-===== Part 2: Animation and Transitioners using flare.animate =====+===== Part 2: Animations =====
Now that we can create visual objects, it's time to start giving them some life. Flare includes the ''flare.animate'' package to help make this easy. First, we need to import the flare libraries for use in Flex Builder. Now that we can create visual objects, it's time to start giving them some life. Flare includes the ''flare.animate'' package to help make this easy. First, we need to import the flare libraries for use in Flex Builder.
Line 312: Line 312:
Transitioners are used extensively throughout the ''flare.vis'' package, allowing visualization designers to control which updates should be animated and how. Transitioners are used extensively throughout the ''flare.vis'' package, allowing visualization designers to control which updates should be animated and how.
-===== Part 3: Building Visualizations using flare.vis =====+===== Part 3: Visualizations =====
==== Loading Data ==== ==== Loading Data ====
Line 337: Line 337:
<code actionscript> <code actionscript>
var ds:DataSource = new DataSource( var ds:DataSource = new DataSource(
-    "http://www.cs.berkeley.edu/~jheer/data/test.tab.txt", "tab"+    "http://flare.prefuse.org/data/test.tab.txt", "tab"
); );
var loader:URLLoader =  ds.load(); var loader:URLLoader =  ds.load();
Line 427: Line 427:
        {         {
            var ds:DataSource = new DataSource(             var ds:DataSource = new DataSource(
-                "http://www.cs.berkeley.edu/~jheer/data/homicides.tab.txt", "tab");+                "http://flare.prefuse.org/data/homicides.tab.txt", "tab");
            var loader:URLLoader = ds.load();             var loader:URLLoader = ds.load();
            loader.addEventListener(Event.COMPLETE, function(evt:Event):void {             loader.addEventListener(Event.COMPLETE, function(evt:Event):void {
Line 523: Line 523:
    import flare.animate.Transitioner;     import flare.animate.Transitioner;
    import flare.display.TextSprite;     import flare.display.TextSprite;
-    import flare.vis.palette.ColorPalette;+    import flare.util.palette.ColorPalette;
</code> </code>
Now you should be able to compile and run the application. Clicking the "Color by Gender" label should animate the change in color encoding. Now you should be able to compile and run the application. Clicking the "Color by Gender" label should animate the change in color encoding.
-===== Going Forward =====+===== Next Steps =====
The above examples show the basics of Flash and the Flare library, but there are many more features that have yet to be covered. Going forward, we recommend (a) inspecting both the Flash and Flare API documentation to get a sense of all the available classes, and (b) digging through the Flare demos to see how the same principles shown here can be used to construct a number of other visualizations. Or, better yet, dig through the Flare source code to learn what's going on under the hood. The above examples show the basics of Flash and the Flare library, but there are many more features that have yet to be covered. Going forward, we recommend (a) inspecting both the Flash and Flare API documentation to get a sense of all the available classes, and (b) digging through the Flare demos to see how the same principles shown here can be used to construct a number of other visualizations. Or, better yet, dig through the Flare source code to learn what's going on under the hood.