Most Popular

• Create a sliding content in flash
• Flash Flip Letter Effect
• Create a Show/Hide Sliding Panel using Flex
• 3D rotation with Flash CS4
• Capture images from the webcam
• Sliding menu with actionscript 3 and TweenLite
• Create a 360° panorama viewer with AS3
• Create an Auto-Scrolling Vertical Content
• Eyes follow the cursor
• Circular rotation with as3

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.

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.

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;
	}
}