Avg. Rating 4.5

Problem

How can I generate a formatted TextFlow Layout for plain text assets?

Solution

The following code demonstrates the solution for generating a formatted TextFlow layout for plain text assets using the TextLayout class.

Detailed explanation

The TextLayout class receives 3 parameters and operates by employing APIs from the Text Layout Framework. The first plainTextURL:String required parameter supplies the URLLoader's load function's URLRequest with the URL for the plain text asset.

The second containers:Vector.<Rectangle> required parameter provides the class with a vector array of one or more rectangles. Each rectangle produces a new ContainerController for the TextFlow based on the rectangle's coordinates and size. The index of containers and their subsequent flow of text is based on the indexed order of the vector's rectangles.

A TextLayoutFormat object with customized properties can be passed to the third textFormat:TextLayoutFormat optional parameter to format the supplied plain text asset.

[SWF(width="1000", height="600", frameRate="60", backgroundColor="#333333")]

import flashx.textLayout.formats.*;

//Create Format

var format:TextLayoutFormat = new TextLayoutFormat();

format.paddingLeft = format.paddingRight = format.paddingTop = format.paddingBottom = 42;

format.color = 0x999999;

format.fontSize = 10;

format.textAlign = TextAlign.JUSTIFY;

format.columnCount = 2;

//Create Layout Containers

var sw:Number = stage.stageWidth;

var sh:Number = stage.stageHeight;

var leftColumn:Rectangle = new Rectangle(0, 0, sw / 3, sh);

var centerColumn:Rectangle = new Rectangle(sw / 2 - sw / 6, sh / 3, sw / 3, sh / 3);

var rightColumn:Rectangle = new Rectangle(sw - sw / 3, 0, sw / 3, sh);

var containers:Vector.<Rectangle> = new Vector.<Rectangle>;

containers.push(leftColumn, centerColumn, rightColumn);

//Create Instance

var layout:TextLayout = new TextLayout("Lorem Ipsum.txt", containers, format);

addChild(layout);

 

package

{

import flash.display.Sprite;

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.events.Event;

import flash.events.IOErrorEvent;

import flash.geom.Rectangle;

import flashx.textLayout.container.ContainerController;

import flashx.textLayout.formats.TextLayoutFormat;

import flashx.textLayout.elements.Configuration;

import flashx.textLayout.elements.TextFlow;

import flashx.textLayout.edit.SelectionManager;

import flashx.textLayout.edit.EditingMode;

import flashx.textLayout.conversion.TextConverter;

import flashx.textLayout.conversion.ConversionType;


public class TextLayout extends Sprite

         {

         //Class Variables

         private var textFormat:TextLayoutFormat = new TextLayoutFormat();

         private var containers:Vector.<Rectangle>;


         //Constructor

         public function TextLayout(plainTextURL:String, containers:Vector.<Rectangle>, textFormat:TextLayoutFormat = null)

                  {

                  this.containers = containers;

                  this.textFormat = textFormat;

                  var textLoader:URLLoader = new URLLoader();

                  textLoader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                  textLoader.addEventListener(Event.COMPLETE, initiateLayout);

                  textLoader.load(new URLRequest(plainTextURL));

                  }

        

         private function errorHandler(evt:IOErrorEvent):void

                  {

                  throw(evt.text);

                  }


         //Layout Text

         private function initiateLayout(evt:Event):void

                  {

                  evt.target.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler);

                  evt.target.removeEventListener(Event.COMPLETE, initiateLayout);


                  var configuration:Configuration = new Configuration();

                  configuration.textFlowInitialFormat = textFormat;


                  var plainTextFile:String = evt.target.data;

                  var textFlow:TextFlow = TextConverter.importToFlow(plainTextFile, TextConverter.PLAIN_TEXT_FORMAT, configuration);


                  for each (var container:Rectangle in containers)

                           {

                           var sprite:Sprite = new Sprite();

                           sprite.graphics.drawRect(0, 0, container.width, container.height);

                           sprite.x = container.x;

                           sprite.y = container.y;

                           addChild(sprite);


                           textFlow.flowComposer.addController(new ContainerController(sprite, sprite.width, sprite.height));

                           }


                  textFlow.flowComposer.updateAllControllers();

                  textFlow.interactionManager = new SelectionManager();

                  textFlow.interactionManager.editingMode == EditingMode.READ_SELECT;

                  }

         }

}

Please see the attached zip file for the files associated with this solution.

This recipe was originally contributed by Geoffrey Mattie.


+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes