Differences

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

tutorial 2008/06/13 19:42 tutorial 2009/01/11 16:19 current
Line 1: Line 1:
====== Tutorial ====== ====== Tutorial ======
-This page provides a step-by-step tutorial for getting up and running with ActionScript and Flare.+A step-by-step tutorial for learning ActionScript and Flare.
===== Getting Started ===== ===== Getting Started =====
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 188: Line 188:
Here is a quick overview of the flare toolkit. Inside the ''flare'' project, look inside the "src/flare" folder. You'll find a number of packages providing different features: Here is a quick overview of the flare toolkit. Inside the ''flare'' project, look inside the "src/flare" folder. You'll find a number of packages providing different features:
-  * ''analytics'': operators for computing advanced statistics or other properties of a data set +  * ''analytics'': operators for computing statistics and analyzing data 
-  * ''animate'': animation tools+  * ''animate'': tools for creating animations
  * ''data'': methods for reading and writing data sets   * ''data'': methods for reading and writing data sets
-  * ''display'': new ''DisplayObject'' types that extend those provided by ''flash.display'' +  * ''display'': ''DisplayObject'' types that extend those provided by ''flash.display'' 
-  * ''flex'': a wrapper component for embedding Flare visualizations in Adobe Flex applications +  * ''flex'': a wrapper for embedding Flare visualizations in Flex applications 
-  * ''physics'': a physics engine, useful for physical effects or force-directed layout+  * ''physics'': a physics engine for physical effects or force-directed layout
  * ''query'': a query processor for ActionScript objects   * ''query'': a query processor for ActionScript objects
  * ''scale'': classes for handling data scales, such as linear, log, and time scales   * ''scale'': classes for handling data scales, such as linear, log, and time scales
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 402: Line 402:
    import flare.data.DataSet;     import flare.data.DataSet;
    import flare.data.DataSource;     import flare.data.DataSource;
 +    import flare.scale.ScaleType;
    import flare.vis.Visualization;     import flare.vis.Visualization;
    import flare.vis.data.Data;     import flare.vis.data.Data;
Line 407: Line 408:
    import flare.vis.operator.encoder.ShapeEncoder;     import flare.vis.operator.encoder.ShapeEncoder;
    import flare.vis.operator.layout.AxisLayout;     import flare.vis.operator.layout.AxisLayout;
-    import flare.vis.scale.ScaleType; 
    import flash.display.Sprite;     import flash.display.Sprite;
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 445: Line 445:
            vis.operators.add(new AxisLayout("data.date", "data.age"));             vis.operators.add(new AxisLayout("data.date", "data.age"));
            vis.operators.add(new ColorEncoder("data.cause", Data.NODES,             vis.operators.add(new ColorEncoder("data.cause", Data.NODES,
-                "lineColor", ScaleType.CATEGORIES);+                "lineColor", ScaleType.CATEGORIES));
            vis.operators.add(new ShapeEncoder("data.race"));             vis.operators.add(new ShapeEncoder("data.race"));
            vis.data.nodes.setProperties({fillColor:0, lineWidth:2});             vis.data.nodes.setProperties({fillColor:0, lineWidth:2});
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 494: Line 494:
  - Changes the ''source'' property for the color encoder to use the "data.sex" variable   - Changes the ''source'' property for the color encoder to use the "data.sex" variable
  - Sets a new color palette (in this case, red for females, blue for males -- the color order matches the alphabetical order of the labels)   - Sets a new color palette (in this case, red for females, blue for males -- the color order matches the alphabetical order of the labels)
-  - Animates the change by calling update with a ''Transitioner'' set for a two second animation. The ''vis.update'' method returns the ''Transitioner'', so we can call play on the return value of the update. +  - Animates the change by calling update with a ''Transitioner'' set for a two second animation. The ''vis.update'' method returns the ''Transitioner'', so we can call play on the return value of the update. (Note: you can also omit the ''Transitioner'' and just pass the number 2 as an argument to ''update''. A new ''Transitioner'' will be created automatically and returned.)
Now we need to wire up the application so we can interactively trigger the update. To do so, add the following code to the constructor: Now we need to wire up the application so we can interactively trigger the update. To do so, add the following code to the constructor:
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.
Line 534: Line 534:
To aid in this process, here is a general overview of the sub-packages in ''flare.vis'': To aid in this process, here is a general overview of the sub-packages in ''flare.vis'':
-  * ''flare.vis.axis'': represents axes, including axis labels and gridlines, and computes axis layout +  * ''flare.vis.axis'': provides axes, labels and gridlines 
-  * ''flare.vis.controls'': a set of controls for interacting with a visualization (e.g., dragging or selecting items, panning and zooming) +  * ''flare.vis.controls'': interaction handlers for selection, zooming, and more 
-  * ''flare.vis.data'': visual objects that represent data elements and classes for managing these objects +  * ''flare.vis.data'': visual objects that represent data elements 
-  * ''flare.vis.data.render'': pluggable renderers that do the actual drawing for ''DataSprites''+  * ''flare.vis.data.render'': pluggable renderers that draw ''DataSprites''
  * ''flare.vis.events'': event types used in the flare framework   * ''flare.vis.events'': event types used in the flare framework
  * ''flare.vis.legend'': represents legends for describing visual encodings   * ''flare.vis.legend'': represents legends for describing visual encodings
-  * ''flare.vis.operator'': operators for constructing visualizations and specifying visual encodings+  * ''flare.vis.operator'': building blocks for defining visualizations
  * ''flare.vis.palette'': palettes for color, shape, and size values   * ''flare.vis.palette'': palettes for color, shape, and size values
-  * ''flare.vis.util'': general utility classes for features not provided by the Flash Player API +  * ''flare.vis.util'': general utility classes
-You should now know enough to make sense of each of the demos in the ''flare.demos'' package! Feel free to play with, modify, copy, paste, and build upon the demos to gain a better understanding of how Flash and Flare work.+You should now know enough to make sense of the demos in the ''flare.demos'' package. Feel free to play with, modify, copy, paste, and build upon the demos to gain a better understanding of how Flash and Flare work.