keyword

Here is an example bouncy graph that I built using Degrafa. It was a pretty fun little experiment

The code for the Degrafa graph is shown below:

<?xml version="1.0" encoding="utf-8"?>
<dg:Surface xmlns:dg="com.degrafa.*" xmlns:geometry="com.degrafa.geometry.*" xmlns:paint="com.degrafa.paint.*"
  xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="updateData();">
<mx:Script>
<![CDATA[
import mx.effects.Effect;
 
[Bindable]
public var dataChangeEffect:Effect = null;
 
private var _data:Array = [];
 
private var _scale:Number = 1;
 
public function get scale() : Number {
  return _scale;
}
 
public function set scale( newScale:Number ) :  void {
  _scale = newScale;
  updateData();
}
 
public function get data() : Array {
  return _data;
}
 
public function set data( newData:Array ) : void {
  _data = newData;
  if ( initialized )
    updateData();
  if ( dataChangeEffect != null )
    dataChangeEffect.play([this]);
}
 
private function updateData() : void {
  var min:Number = Number.MAX_VALUE
  var max:Number = Number.MIN_VALUE;
 
  for each ( var dp1:Number in _data ) {
    min = Math.min( dp1, min );
    max = Math.max( dp1, max );
  }
 
  var ybase:Number = min - ( ( max - min ) * 0.2 );
  var yrange:Number = ( max - min ) * 1.4;
  var yscale:Number = height / yrange;
  var xscale:Number = width / ( _data.length - 1 );
 
  var points:Array = [];
  points.push( new Point( 0, height ) );
  var curx:Number = 0;
  for each ( var dp2:Number in _data ) {
    points.push( new Point( curx, height - ( ( ( dp2 - ybase ) * yscale ) * _scale ) ) );
    curx += xscale;
  }
  points.push( new Point( width, height ) );
  points.push( new Point( 0, height ) );
  chartPoly.points = points;
}
]]>
</mx:Script>
  <dg:fills>
    <paint:LinearGradientFill id="backfill" angle="90">
      <paint:GradientStop color="#000066" />
      <paint:GradientStop color="black" />
    </paint:LinearGradientFill>
    <paint:SolidFill id="solidblack" color="black" />
  </dg:fills>
  <dg:strokes>
    <paint:SolidStroke id="axis" color="#cccccc" weight="2" />
    <paint:SolidStroke id="chartstroke" color="#666666" weight="2" />
  </dg:strokes>
  <dg:graphicsData>
  <dg:GeometryGroup>
  <geometry:RegularRectangle width="400" height="300" fill="{solidblack}" />
  <geometry:Polygon id="chartPoly" fill="{backfill}" stroke="{chartstroke}" />
  <geometry:VerticalLine y="0" y1="{height}" stroke="{axis}" />
  <geometry:HorizontalLine y="{height}" x="0" x1="{width}" stroke="{axis}" /> 
  </dg:GeometryGroup>
  </dg:graphicsData>
</dg:Surface>

Juan Sanchez has a great Introduction to Degrafa up on InsideRIA. Degrafa is well worth the look. It makes building custom graphics in Flex applications a snap. Plus it fits nicely into the framework so that you can do things like use Degrafa for control skinning.

Looks like states will be getting more attention in the next release of Flex. Thank goodness. I think states are one of the defining features of Flex, and yet are the most uncovered. We spend so much time talking about the control set that we don't spend enough time covering the entire body of the UI and it's interaction modes with the customer. And that's where states really come in handy.

Book update: The title is now officially 'Getting Started With Flex 3'.

You should have a look at the Thermo demo from MAX. It looks really good.

I love it when I have a little project in mind and it comes together really quickly. I wanted to build an image uploader that used Amazon's S3 storage service as a back-end. One Google search got me the S3 AS3 library and within an hour I was done. What a great little API. I've worked with S3 API's before and this one is by far the cleanest. My only complaint is that it doesn't give me the ability to specify public/private access controls on objects that I upload.

The big news of the day is that a beta of Flash Player 10 has been released. Astro has 3D rendering built-in, as well as a new filtering suite. This is going to be an amazing release for Adobe and give a big boost to the Flex community. I can't wait to dig in.

I spent some time this weekend figuring out how to automate Sketchup with Ruby. Once I had that going I wrote a script that would rotate around an object taking a snapshot every five degrees. From there it's pretty simple to use them in a Flex application to simulate 3D.

If you have a complex model, like this Colonial Viper, it's a lot more efficient to pre-render all of the shots and just flip through them like a picture book.

Plus there is the problem of Collada import into PaperVision 3D. Not all Collada models work, in fact, most don't. So using this technique I'm guaranteed that the model will render properly.

BTW, this particular model is part of my ongoing effort to give slicker example images and such. Too many authors use drab images when they put together examples. The technology is great, but the example shown in the result is drab. Thus, a Colonial Viper from the new Battlestar Galactica, since, seriously, what is cooler than that?

ILOG has updated their licensing and loosened it up for small businesses. That's good news. This is an amazing set of 2D and 3D charting components. I've used it a lot and I intend to make it a centerpiece of an upcoming book.