Data Binding With Nested Ternary Operators

Ternary operators provide a simple mechanism for applying conditional logic to components that use data-binding.

[Bindable] private var highlighted : Boolean = false; <mx:Button id=”someButton”     styleName=”{highlighted ? ‘highlightButton’ : ‘normalButton’}” />

By nesting ternary operators, you are able to create chains of conditionals that would otherwise only be possible within an AS3 <Script> tag:

[Bindable] private var highlighted : Boolean = false; [Bindable] private var highlightColor : String = “green”; <mx:Button id=”someButton”     styleName=”{highlighted ? (highlightColor == “green”         ? ‘greenHighlightButton’ : ‘defaultHighlightButton’)         : ‘normalButton’}” />

Needless to say, this is incredibly powerful.

Although if you need more than two or three nested levels I’d still recommend using a <Script> tag. Otherwise reading through the conditional logic starts to feel a bit like trying to see the sailboat in a Magic Eye picture.

How to Compare Two Dates in ActionScript 3

Date objects don’t have a built-in compare() method, but comparing dates is still pretty easy.

The key is to not even look at the Date objects themselves, but rather the values represented by the objects using the Date.getTime() method:

Returns the number of milliseconds since midnight January 1, 1970, universal time, for a Date object. Use this method to represent a specific instant in time when comparing two or more Date objects.

This makes comparing dates as trivial as comparing numbers.

Here’s a simple method that compares two dates, returning -1 if the first date is before the second, 0 if the dates are equal, or 1 if the first date is after the second:

public function compare (date1 : Date, date2 : Date) : Number {     var date1Timestamp : Number = date1.getTime ();     var date2Timestamp : Number = date2.getTime ();     var result : Number = -1;     if (date1Timestamp == date2Timestamp)     {         result = 0;     }     else if (date1Timestamp > date2Timestamp)     {         result = 1;     }     return result; }

Scaling Bitmap Data

I’ve posted before on caching and smooth-scaling images, but these tips don’t apply when you want to manipulate bitmap data directly.

Let’s say you want to create a scaled copy of an existing bitmap that is 25% of its original width and height.

Here’s a basic example of how to do that using a matrix transformation:

// creates a matrix to scale the bitmap data var matrix : Matrix = new Matrix (); matrix.scale (0.25, 0.25); // ’source’ is the existing bitmap data we want to scale var width : Number = source.width / 4; var height : Number = source.height / 4; var data : BitmapData = new BitmapData (width, height); data.draw (source, matrix);

The problem with this approach is that the scaled bitmap data often looks terrible when you load it into an Image control.

BitmapData objects have no concept of smoothing. Transformations performed directly on the bitmap data are not going to look as good as transformations performed on an image or bitmap that loads the bitmap data.

Here’s an alternative approach to scaling the bitmap that uses an Image control and a Bitmap object with smoothing enabled:

// ’source’ is the existing bitmap data we want to scale var image : Image = new Image (); image.load (new Bitmap (source, “auto”, true)); var width : Number = source.width / 4; var height : Number = source.height / 4; // scales the image image.content.width = width; image.content.height = height; var data : BitmapData = new BitmapData (width, height); data.draw (image.content);

This approach has two advantages.

One, it uses bitmap smoothing to produce a cleaner image. Two, it prevents the flicker that occurs when you load bitmap data into an Image control with dimensions that are smaller than the original size of the bitmap. In these cases the bitmap data will still scale appropriately, but not before it displays temporarily at its full size.