Cooking with ActionScript

Related Reading Actionscript Cookbook Solutions and Examples for Flash MX Developers By Joey Lott

Editor's note: We asked Joey Lott, the author of ActionScript Cookbook, to select some recipes from his book to showcase here on the Web DevCenter. He came up with quite a diverse slate. Today, you'll find recipes that deal with currency formatting, how to use a unique depth when creating a new movie clip, and how to perform actions at set intervals as well as create a clock showing the absolute time. Next Friday, we'll conclude this series with recipes on pausing and resuming a sound, saving a local shared object, and searching XML. This diversity of offerings reflects the sheer volume of solutions to common ActionScript problems that you'll find in Joey's book.

Recipe 5.6: Formatting Currency Amounts

Problem

You want to format a number as currency, such as dollars.

Solution

Create a custom Math.currencyFormat( ) method.

Discussion

Unlike some other languages, such as ColdFusion, ActionScript does not have a built-in function for formatting numbers as currency amounts. That's the bad news. The good news is that it is not too difficult to create a custom method to format numbers as currency amounts.

Our custom Math.currencyFormat( ) method accepts up to seven parameters:

• num
  The number to format.

• decimalPl
  The number of decimal places in the formatted number.

• currencySymbol
  The symbol, such as a dollar sign ($), to use.

• thousandsDelim
  The characters used to delimit thousands, millions, etc.

• decimalDelim
  The characters used to delimit the fractional portion from the whole number.

• truncate
  If true, truncate the number to the specified number of decimal places; otherwise, round the number.

• spaceFill
  The number of spaces the entire formatted string should occupy.

Here is our custom Math.currencyFormat( ) method. The method converts a numeric parameter into a currency-formatted string. Include this method within Math.as along with the custom roundDecPl( ), numberFormat( ), and zeroFill( ) methods in this chapter, on which this example relies.

Math.currencyFormat = function (num, decimalPl, currencySymbol, thousandsDelim,
                      decimalDelim, truncate, spaceFill) {

  // Default to two decimal places, a dollar sign ($), a comma for thousands, 
  // and a period for the decimal point. We implemented the defaults using 
  // the conditional operator. Compare with Recipe 5.5.
  decimalPl      = (decimalPl == undefined)      ? 2   : decimalPl;
  currencySymbol = (currencySymbol == undefined) ? "$" : currencySymbol;
  thousandsDelim = (thousandsDelim == undefined) ? "," : thousandsDelim;
  decimalDelim   = (decimalDelim == undefined)   ? "." : decimalDelim;

  // Split the number into the whole and decimal (fractional) portions.
  var parts = String(num).split(".");

  // Truncate or round the decimal portion, as directed.
  if (truncate) {
    parts[1] = Number(parts[1]) * Math.pow(10, -(decimalPl - 1));
    parts[1] = String(Math.floor(parts[1]));
  } else {
    // Requires the roundDecPl(  ) method defined in Recipe 5.3
    parts[1] = Math.roundDecPl(Number("." + parts[1]), decimalPl);
    parts[1] = String(parts[1]).split(".")[1];
  }

  // Ensure that the decimal portion has the number of digits indicated. 
  // Requires the zeroFill(  ) method defined in Recipe 5.4.
  parts[1] = Math.zeroFill(parts[1], decimalPl, true);
  
  // If necessary, use the numberFormat(  ) method from Recipe 5.5 to 
  // format the number with the proper thousands delimiter and leading spaces.
  if (thousandsDelim != "" || spaceFill != undefined) {
    parts[0] = Math.numberFormat(parts[0], thousandsDelim, "",
                spaceFill - decimalPl - currencySymbol.length);
  }

  // Add a currency symbol and use String.join(  ) to merge the whole (dollar)
  // and decimal (cents) portions using the designated decimal delimiter.
  return currencySymbol + parts.join(decimalDelim);
};

Here are a few examples of Math.currencyFormat ( ) in action:

trace(Math.currencyFormat(1.2));                    // Displays: $1.20
trace(Math.currencyFormat(.3));                     // Displays: $0.30
trace(Math.currencyFormat(1234567));                // Displays: $1,234,567.00
trace(Math.currencyFormat(12.34, 2, "\u20AC"));     // Displays: €12.34 (euros)
trace(Math.currencyFormat(12.34, 2, "\u00a3"));     // Displays: £12.34 (pounds)
trace(Math.currencyFormat(12.34, 2, "\u00a5"));     // Displays: ¥12.34 (yen)
trace(Math.currencyFormat(1.2, 2, "", ".", ","));   // Displays: 1,20
trace(Math.currencyFormat(1234, 2, "", ".", ","));  // Displays: 1.234,00

See Also

Recipe 5.3 and Recipe 5.5. See Appendix A for creating special characters, including the euro, yen, and British pound symbols. To align currency amounts in text fields, use a monospaced font and set the field's format to right justification using the TextFormat.align property.