Differences

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

tutorial 2008/07/27 16:38 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 217: Line 217:
One thing to note about the Flex compiler -- by default, it only includes the classes that you actually you use in your application. So even if you import a very large library, the size of your final .swf file can still be quite small. However, beware that this can cause issues if you use reflection to perform dynamic class loading in your application (a more advanced feature not covered in this tutorial). One thing to note about the Flex compiler -- by default, it only includes the classes that you actually you use in your application. So even if you import a very large library, the size of your final .swf file can still be quite small. However, beware that this can cause issues if you use reflection to perform dynamic class loading in your application (a more advanced feature not covered in this tutorial).
-===== Basic Animation: Tween, Sequence, and Parallel =====+==== Basic Animation: Tween, Sequence, and Parallel ====
Ok, now let's animate! The ''flare.animate.Transition'' class is the base class for all animations. Important subclasses of ''Transition'' are the ''Tween'', ''Sequence'', and ''Parallel'' transitions. Tweens are used to animate properties of a single object. Sequences are used to run a series of animations in order. Parallel transitions run a collection of transitions simultaneously. Let's start with Tween. Ok, now let's animate! The ''flare.animate.Transition'' class is the base class for all animations. Important subclasses of ''Transition'' are the ''Tween'', ''Sequence'', and ''Parallel'' transitions. Tweens are used to animate properties of a single object. Sequences are used to run a series of animations in order. Parallel transitions run a collection of transitions simultaneously. Let's start with Tween.
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 {
                var ds:DataSet = loader.data as DataSet;                 var ds:DataSet = loader.data as DataSet;
-                buildVis(Data.fromDataSet(ds));+                visualize(Data.fromDataSet(ds));
            });             });
        }         }
-        private function buildVis(data:Data):void+        private function visualize(data:Data):void
        {         {
            vis = new Visualization(data);             vis = new Visualization(data);
Line 458: Line 458:
The constructor is simple: it just calls the ''loadData'' method. The constructor is simple: it just calls the ''loadData'' method.
-The ''loadData'' method creates a new data source and loads it using the methods described earlier. In this case, the data set is reported homicides in Los Angeles county in 2007, stored in tab-delimited format. When the load is complete, the loaded data tuples are added to a ''Data'' instance using the ''fromDataSet'' convenience method. Under the hood, this results in the creation of ''NodeSprites'' for visualizing each data item. Finally, the ''buildVis'' method is called.+The ''loadData'' method creates a new data source and loads it using the methods described earlier. In this case, the data set is reported homicides in Los Angeles county in 2007, stored in tab-delimited format. When the load is complete, the loaded data tuples are added to a ''Data'' instance using the ''fromDataSet'' convenience method. Under the hood, this results in the creation of ''NodeSprites'' for visualizing each data item. Finally, the ''visualize'' method is called.
-The ''buildVis'' method sets up the visualization. Here's what is happening in each step:+The ''visualize'' method sets up the visualization. Here's what is happening in each step:
  * Part 1: Initialization   * Part 1: Initialization
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.