MultiColumnText AS3 class
Nadat ik de 'MultiColumnText' class had bekeken die in de ActionScript 3.0 voorbeelden zat, wilde ik eigenlijk dat het allemaal net iets anders zou werken. Zo wilde ik niet een hoogte opgeven die de kolommen moesten krijgen. In plaats daarvan juist alleen een kolom breedte en dat de hoogte zelf bepaald werd aan de hand van de hoeveelheid tekst. Hier is de volgende class uit voortgekomen.
-
//ActionScript 3.0
-
package {
-
import flash.display.Sprite;
-
import flash.text.TextField;
-
import flash.text.TextFieldAutoSize;
-
import flash.text.TextFormat;
-
-
public class MultiColumnText extends Sprite{
-
-
private var columnArray:Array;
-
private var cols:Number = 2;
-
private var columnWidth:Number = 100;
-
private var columnSpacing:Number;
-
private var maxLines:Number;
-
private var textStr:String;
-
private var textformat:TextFormat;
-
-
-
// constructor
-
public function MultiColumnText(cols:Number, columnWidth:Number, colSpacing:Number = 10) {
-
this.cols = cols;
-
this.columnWidth = columnWidth;
-
this.columnSpacing = colSpacing;
-
textformat = new TextFormat();
-
-
createColumns(cols);
-
}
-
-
/**
-
* createColumns
-
* Creates the number of textfields needed.
-
*
-
* @param cols Number Number of columns.
-
*/
-
private function createColumns(cols:Number):void {
-
columnArray = new Array();
-
for (var column:int = 0; column <cols; column++) {
-
var columnField = createColumnTextField();
-
columnField.x = column * columnWidth + (column * columnSpacing);
-
columnArray.push(columnField);
-
addChild(columnField);
-
}
-
}
-
-
/**
-
* createColumnTextField
-
* Creates the textfield for each column.
-
*
-
* @return TextField Textfield to be returned.
-
*/
-
private function createColumnTextField():TextField {
-
var columnTextField:TextField = new TextField();
-
columnTextField.autoSize = TextFieldAutoSize.LEFT;
-
columnTextField.border = false;
-
columnTextField.width = columnWidth;
-
columnTextField.wordWrap = true;
-
columnTextField.multiline = true;
-
return columnTextField;
-
}
-
-
/**
-
* text
-
* Set the multicolumn text.
-
*
-
* @param textString String String to be places on the textfield columns.
-
*/
-
public function set text(textString:String):void {
-
textStr = textString;
-
fillColumns();
-
}
-
-
-
/**
-
* setTextFormat
-
* Set the column textfield textformat.
-
*
-
* @param tformat TextFormat TextFormat to be attached to the column textfields.
-
*/
-
public function setTextFormat(tformat:TextFormat):void {
-
textformat = tformat;
-
fillColumns();
-
for (var i:int = 0; i <columnArray.length; i++) {
-
columnArray[i].setTextFormat(textformat);
-
}
-
-
}
-
-
/**
-
* fillColumns
-
* Calculates the number of lines for each column according to the text to be placed.
-
* Next is inserts the text pieces to each column.
-
*/
-
private function fillColumns():void {
-
var invisibleTextField:TextField = new TextField();
-
invisibleTextField.autoSize = TextFieldAutoSize.LEFT;
-
invisibleTextField.multiline = true;
-
invisibleTextField.wordWrap = true;
-
invisibleTextField.width = columnWidth;
-
invisibleTextField.text = textStr;
-
invisibleTextField.setTextFormat(textformat);
-
-
maxLines = Math.ceil(invisibleTextField.numLines / cols);
-
-
for (var i:int = 0; i <cols; i++) {
-
var startIndex:Number;
-
var endIndex:Number;
-
var lineStart:Number = ((maxLines * i)> 0) ? (maxLines*i) : 0;
-
try {
-
startIndex = invisibleTextField.getLineOffset(lineStart);
-
}
-
catch(e:RangeError) {
-
//trace(e);
-
}
-
-
var lineEnd:Number = ((maxLines * (i+1))> 0) ? (maxLines*(i+1)) : 0;
-
try {
-
endIndex = invisibleTextField.getLineOffset(lineEnd);
-
}
-
catch(e:RangeError) {
-
//trace(e);
-
endIndex = textStr.length;
-
}
-
columnArray[i].text = textStr.substring(startIndex, endIndex);
-
}
-
-
invisibleTextField = null; // deletes the textfield.
-
}
-
}
-
}
Een vervolg op deze class zou er een zijn die html text over kolommen verdeeld. Hier is een andere methode voor nodig aangezien je niet op character index kunt splitsen omdat er ook opmaak code in html staat.
Ik hoor graag jullie opmerkingen/verbeteringen.

