dougrdotnet

There are allot of applications where dynamic resizing of shapes is necessary, and useful. Dynamic data is one of the corner stones of Rich Internet Application (RIA) development. When combined with User Experience (UX) design elements, we can deliver meaningful information back to our users, creating a rich user experience, a greater degree of interest, along with interactivity. Involving our users in our applications and providing information dynamically elevates our applications dramatically from that of static content.
Dynamic resizing of shapes is just one way that we can utilize data and provide visual cues and feedback to our users, delivering meaningful information from data. In my following example, I am going to illustrate one way that dynamic resizing of shapes may be used. There are a myriad of different ways to use this technique, applied to various display objects, limited only by imagination.

Creating a UI Level Indicator

In this example, I am going to write a level indicator meter which responds dynamically to amplitude data from an audio file.  The applied use for this example would be, for instance, left and right meters for audio level indication.

Classes and Methods Used In This Example

The ActionScript Sprite Class

Sprite is a basic display object class which can display graphics.  Sprite can be a parent, meaning that Sprite can contain children.

with()

The ActionScript with method calls an object once and then allows successive properties to be accessed and modified within the with() statement.  This is a really nice convenience method, saving the need for calling the class over and over for each property.

The ActionScript Graphics Class

Graphics is a display class that provides us a means to create shapes, helper methods include: drawRect(), drawRoundRect(), drawCircle(), and drawEllipse(), I’ll be using the drawRect() method.  There are several public methods available in this class, of which I am going to use 4 in this example.

• lineStyle(thickness:Number= NaN, color:uint = 0, alpha:Number = 1.0, pixelHinting:Boolean = false, scaleMode:String = “normal”, caps:String = null, joints:String = null, miterLimit:Number = 3)
• beginFill(color:uint, alpha:Number = 1.0)
• drawRect(x:Number, y:Number, width:Number, height:Number)
• endFill()

lineStyle() is just as it reads, this method provides access to properties of the shape’s line styling, such as thickness, color, etc… as shown in the method’s properties above.

beginFill() provides access to the shape’s fill properties, such as color and alpha.

drawRect() does just that, it draws a rectangle, the available properties allow for x and y assignments, along with width and height of the rectangle.  Just gotta love self-documenting code

endFill() actually adds the fill properties to the shape, as defined in the beginFill() method.

The ActionScript SoundChannel Class

The SoundChannel class is the sound controller class.  In ActionScript, every sound is assigned to a channel, there can be multiple channels, just like having a left and right channel for stereo or having n-number of channels that may be mixed together.  In this example, I am going to be using 2 of the class’ public properties.

• leftPeak
• rightPeak

The leftPeak and rightPeak properties are read only and are used to assign the volume amplitude to the associated channels.

The ActionScript UIComponent Class

The UIComponent Class is the base class for all visual components in ActionScript.  I am going to create an instance of this class that will contain the level indicator display objects.  I will be adding this instance to the stage with all its children.

A Simple Dynamic Resizing Shape Example

In this example, the first thing I do is declare the private vars I’m going to need in the creation of left and right rectangle display objects which will, later, resize based upon dynamic data.  I also declare the SoundChannel class var and a UIComponent class var.  I then create an init method which sets up the left and right display objects and adds them to the base class levelUI UIComponent class instance.

In the onEnterFrame method, I update the left and right shape’s widths on each onEnterFrame event.  The data used to update these values is obtained from the left and right peak values accessed from the SoundChannel object.

private var channel:SoundChannel;
private var left:Sprite;
private var right:Sprite;
private var levelUI:UIComponent;

//setup left and right sprites and apply graphics style properties and positions
//on application initialization
private function init():void{
 //create the left sprite
 left = new Sprite();
 //define the left shape and properties
 with(left.graphics){
   lineStyle(0,0x00AF33,1);
   beginFill(0x00AF33,1);
   drawRect(0,0,1,5);
   endFill();
 }
 //position the left sprite
 left.y = 60;
 left.x = 20;

 //create the right sprite
 right = new Sprite();
 //define the right shape and properties
 with(right.graphics){
   lineStyle(0,0x00AF33,1);
   beginFill(0x00AF33,1);
   drawRect(0,0,1,5);
   endFill();
 }
 //position the right sprite
 right.y = 75;
 right.x = 20;

 //add left and right sprites as children to the levelUI display object
 levelUI.addChild(left);
 levelUI.addChild(right);
 //add levelUI to the display
 this.addChild(levelUI);
 }

//I want the shape's sizes to update at the beginning of entry into each frame
//A movie at 24 frames per second will call this method, using the onEnterFrame
//event, 24 times per second.
private function onEnterFrame(event:Event):void{
 //check and see if a sound channel object already exists
 if(channel != null){
   left.width = 50 * channel.leftPeak; //set the left shape's width
   right.width = 50 * channel.rightPeak; //set the right shape's width
 }
}

There is a bit more to do here in order to write a functional prototype that updates dynamically.  Namely, we need a sound object that holds the actual sound file.  This is beyond the scope of this article, however, additional information may be found in the livedocs.

HTH!

#100blogs challenge Day2 http://bit.ly/4MtAfx