Flash, Flex and ActionScript Resources -
Using TextFlowFramework and associating mouse clicks with text details
Oz DiGennaro
Oz has been building a startup developing 4Dtext tools for three years now. The user interface is coded in Actionscript (now using Burrito). Substantial communication with the server, 4Dtext tools implement a display engine that is configurable and run-time and completely data-driven. I am not a coding God. I am a coding Priest. 
By Oz DiGennaro
Published on March 1, 2011

Actionscript – TextLayoutFramework and exact location of mouse events

If you want beautiful text and to have close user interaction, the TextLayoutFramework is the thing.  You can discover exactly which characters the user has selected and clicked on.

Actionscript – TextLayoutFramework and exact location of mouse events

 If you want beautiful text and to have close user interaction, the TextLayoutFramework is the thing.

This required Adobe Flex 4 or the corresponding Actionscript version with the Open Source compiler.  I’m using “Burrito” the newest beta version of the Flash Builder, because I need some of the newest TextLayoutFramework features.  This includes the ability to include inline graphics in a text chunk.

 You’ll see some references to tr.*.  Debug stuff that you can ignore.

 The critical part for detecting user events, of course, is:


 and then catching the event and using the selectionState to find the characters of text.

[as]var selectionState:SelectionState = textFlow.interactionManager.getSelectionState();
var start:int = selectionState.absoluteStart;
var end:int = selectionState.absoluteEnd;[/as]

 The values absoluteStart and absoluteEnd are indices into the text, which you can get with

[as]var textString:String = richText.text;[/as]


[as]<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx=""







            name="4D Text Hero"

            pageTitle="4D Text Hero (loading 11012)"



            minWidth="955" minHeight="600">





            import flash.text.engine.TextLine;

            import flashx.textLayout.elements.*;


            import mx.managers.BrowserManager;

            import mx.managers.IBrowserManager;

            import spark.utils.TextFlowUtil;


            private var cN:String = "4D Text Hero";

            private var bm:IBrowserManager;


            private function onPreinitialize():void


                  var mN:String = cN + ".onPreinitialize ";


                  bm = BrowserManager.getInstance();            



                  if (tr.traceStartup) tr.output(cN+".onPreinitialize");




            private var textFlow:TextFlow;


            private function initApplication():void {

                  var mN:String = cN + ".initApplication ";



                  var textString:String;


                  textString = "<div color=\"#444444\" fontFamily=\"Times New Roman\" fontSize=\"20\" paragraphSpaceAfter=\"15\" textIndent=\"10\" >" +


                                    "<p>" +

                                      "<span>" +

                                          "Alice, really, was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do:  once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, \`and what is the use of a book,\' thought Alice \`without pictures or conversation?\'" +

                                      "</span>" +

                                    "</p>" +


                                    "<p>" +

                                          "<img source=\"assets/images/White Rabbit.png\" height=\"auto\" width=\"auto\" float=\"left\" paddingRight=\"10\" />" +

                                          "<span>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</span>" +

                                    "</p>" +


                                    "<p>" +

                                      "<span>" +

                                          "There was nothing so VERY remarkable in that; nor did Alice think it so VERY much out of the way to hear the Rabbit say to itself, \`Oh dear!  Oh dear!  I shall be late!\'  (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually TOOK A WATCH OUT OF ITS WAISTCOAT-POCKET, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge." +

                                      "</span>" +

                                    "</p>" +




                  richText.width = 800;


                  richText.editable = false;

                  richText.selectable = true;

//                richText.addEventListener(FlowElementMouseEvent.MOUSE_MOVE,mouseEvent);





                  textFlow = TextFlowUtil.importFromString(textString);


                  richText.textFlow = textFlow;



            private function statusChangeHandler(event:Event):void


                  var mN:String = cN + ".statusChangeHandler " + tr.enquoteEvent(event.type);




            import flashx.textLayout.edit.SelectionManager;

            import flashx.textLayout.edit.SelectionState;


            private function mouseEvent(event:MouseEvent):void {

                  var mN:String = cN + ".mouseEvent " + tr.enquoteEvent(event.type);


                  var selectionState:SelectionState = textFlow.interactionManager.getSelectionState();

                  var start:int = selectionState.absoluteStart;

                  var end:int = selectionState.absoluteEnd;

                  tr.output(mN + tr.selectionToString(start,end) + tr.locationToString(event.stageX,event.stageY) + tr.getClassShort(;

//                tr.output(mN + tr.locationToString(event.localX,event.localY) +;







<s:BorderContainer width="95%" height="95%" x="20" y="20">


            <s:RichEditableText id="richText">