Change the Text Column Layout with Flash CS5 and AS3

In this first Flash CS5 tutorial, let’s start exploring Flash CS5 new features by creating an app using the Text Layout Framework where the user can change the text column layout.

View DemoDownload Source

1. With Flash CS5, create a new Flash file (Actionscript 3.0) and save it as columns.fla.

2. Rename “Layer 1” to “Text”. With the Text tool selected, verify that it is set on TLF Text and draw a text box.

Screenshot

Give it an instance name of “tlf” and paste your text in it.

3. Create a new layer named “button”. Create 3 buttons and give them instance names of “btn1”, “btn2” and “btn3”.

4. Create a new “actions layer” and open the actions panel. First add the CLICK event listener to the three buttons.

btn1.addEventListener(MouseEvent.CLICK, layoutColumns);
btn2.addEventListener(MouseEvent.CLICK, layoutColumns);
btn3.addEventListener(MouseEvent.CLICK, layoutColumns);

5. Inside the layoutColumns() function we check which button has triggered the Click event to change the number of text columns and the gap between them accordingly. To do so we use the “columnCount” and “columnGap” properties of the new TextLayoutFormat class.

function layoutColumns(evt:MouseEvent):void {
	switch(evt.currentTarget.name){
		case "btn1" : 
			tlf.columnCount =  1;			
			break;
		case "btn2" : 
			tlf.columnCount =  2;			
			tlf.columnGap = 30;
			break;
		case "btn3" : 
			tlf.columnCount =  3;			
			tlf.columnGap = 20;
			break;
	}
}

6. That’s it, here’s the final code, test your movie to see it in action.

btn1.addEventListener(MouseEvent.CLICK, setColumn);
btn2.addEventListener(MouseEvent.CLICK, setColumn);
btn3.addEventListener(MouseEvent.CLICK, setColumn);

function setColumn(evt:MouseEvent):void {
	switch(evt.currentTarget.name){
		case "btn1" : 
			tf.columnCount =  1;			
			break;
		case "btn2" : 
			tf.columnCount =  2;			
			tf.columnGap = 30;
			break;
		case "btn3" : 
			tf.columnCount =  3;			
			tf.columnGap = 20;
			break;
	}
}

4 thoughts on “Change the Text Column Layout with Flash CS5 and AS3

Leave a Reply

Your email address will not be published. Required fields are marked *