blackcj.com » TextField http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Thu, 15 Dec 2011 01:01:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 Define Popup Window Size in HTML Text http://www.blackcj.com/blog/2010/03/01/define-popup-window-size-in-html-text/ http://www.blackcj.com/blog/2010/03/01/define-popup-window-size-in-html-text/#comments Mon, 01 Mar 2010 21:31:08 +0000 Chris Black http://www.blackcj.com/blog/?p=709 Executing JavaScript in a Flash HTML TextField is both cool and a little scary. You can throw some inline JavaScript in your htmlText to dynamically specify a pop up window size when using target="_blank." This works in both ActionScript 2.0 and ActionScript 3.0.

Pop up Window Example:

Example of Inline Java Script

Get Adobe Flash player

(click on the link above to open a 200 x 300 pop up window)

PLAIN TEXT
Actionscript:
  1. // myTextField is a dynamic text field instance on the stage
  2. var link:String = "http://www.blackcj.com/"
  3. var jsText:String = "window.open('" + link + "','win','height=200,width=300,toolbar=no,scrollbars=yes'); void(0);"
  4. myTextField.htmlText = "<a href=\"javascript:" + jsText + "\"><u>blackcj.com</u></a>";

Any JavaScript tag can be run this way. Try adding an alert right after the window.open script. Notice how they both execute. Yet another reason to ALWAYS validate your input fields when displaying htmlText. Nothing worse than somebody adding some inline JavaScript to your Flash form.

Resources
http://www.webmasterworld.com/html/3429895.htm
http://kb2.adobe.com/cps/141/tn_14192.html

]]> http://www.blackcj.com/blog/2010/03/01/define-popup-window-size-in-html-text/feed/ 0 Fix Disappearing Fonts Caused by SWC’s http://www.blackcj.com/blog/2010/01/03/resolve-swc-font-conflicts/ http://www.blackcj.com/blog/2010/01/03/resolve-swc-font-conflicts/#comments Mon, 04 Jan 2010 01:15:47 +0000 Chris Black http://www.blackcj.com/blog/?p=659 Have you ever had that feeling that something is very wrong in your project? Maybe that some paranormal force is working against you? Well, when embedded text starts disappearing after adding a SWC to a project, that's the feeling I used to get.

Problem:
Let me start by saying SWC's are great. I've been using them more and more to include third party API's, utilities and assets. There is one problem, embedding a font into an asset in a SWC will override the internally defined fonts in a project. Why is that bad? Well lets say you have a static text field in your SWC using Georgia and a TextField instance in your Flex project using Georgia. No text will show up in your Flex TextField. Check out this example (notice it starts invisible):

SWC Text Embed Conflict:

Example of Conflicting Fonts

Get Adobe Flash player

(switch between MyGeorgia and Georgia fonts to see the disappearing text)

Full source code can be found here.

Solution:
Define your embed tags in ActionScript with a different fontFamily and fontName. So, if your font is Georgia than name it EmbedGeorgia. This will allow your TextField to reference the correct class definition. In my experience the SWC will always win if there is a conflict.

PLAIN TEXT
Actionscript:
  1. [Embed(source="/assets/fonts/georgia.ttf", advancedAntiAliasing="true", fontFamily="MyGeorgia",
  2.     fontName="MyGeorgia", fontWeight="normal", mimeType="application/x-font" )]
  3. private var MyGeorgiaFont:Class;
  4. public static const MY_GEORGIA:String = "MyGeorgia";

rather than...

PLAIN TEXT
Actionscript:
  1. // This will conflict with Georgia references in a SWC!!!
  2. [Embed(source="/assets/fonts/georgia.ttf", advancedAntiAliasing="true", fontFamily="Georgia",
  3.     fontName="Georgia", fontWeight="normal", mimeType="application/x-font" )]
  4. private var GeorgiaFont:Class;
  5. public static const GEORGIA:String = "Georgia";

It's that easy?
Yup.

What if you have two SWC's with Georgia embedded text?
Will they conflict with each other? Based on the example above the answer is no. Awesome!

What if my fonts are stored in a SWF file?
Than duplicate the above code but reference your SWF instead of the font in the assets folder.

Code that results in invisible text:

PLAIN TEXT
Actionscript:
  1. // This will conflict with Georgia references in a SWC!!!
  2. [Embed(source="/assets/fonts/georgia.ttf", advancedAntiAliasing="true", fontFamily="Georgia",
  3.     fontName="Georgia", fontWeight="normal", mimeType="application/x-font" )]
  4. private var GeorgiaFont:Class;
  5. public static const GEORGIA:String = "Georgia";
  6.  
  7. private var georgiaFormat:TextFormat;
  8. private var georgiaText:TextField;
  9.  
  10. public function ConflictingFonts()
  11. {
  12.     // Component from SWC which uses Georgia in a static text field
  13.     var cc:ColorComponent = new ColorComponent();
  14.     cc.colorPicker.addEventListener(ColorPickerEvent.CHANGE, selectColor, false, 0, true);
  15.     cc.y = 30;
  16.     this.addChild(cc);
  17.    
  18.     // Create the local TextFormat
  19.     georgiaFormat = new TextFormat(GEORGIA, 18);
  20.    
  21.     // Create the local TextField (the text won't show up!)
  22.     georgiaText = new TextField();
  23.     georgiaText.embedFonts = true;
  24.     georgiaText.width = 300;
  25.     georgiaText.height = 20;
  26.     georgiaText.defaultTextFormat = georgiaFormat;
  27.     georgiaText.setTextFormat(georgiaFormat);
  28.     georgiaText.text = "Hello World";
  29.     this.addChild(georgiaText);
  30. }

Swap out the Embed tag, update the TextFormat and you will be good to go.

Rant:

On the way to this solution I came up with a number of hacks that appeared to work only to break at the worst time. These hacks included storing a second reference of the font in the SWC (assuming you have access to the source), enumerating through the font list at runtime (which only fixes the problem in debug), and breaking apart the text into bitmaps (you don't want to know how long that takes). Rather than stop using SWC's I started to create more and more of them pushing towards an acceptable solution. This is what I ended up on. Hopefully it will save everyone some time and a little sanity ;)

]]> http://www.blackcj.com/blog/2010/01/03/resolve-swc-font-conflicts/feed/ 6 Adding Server Side Captcha to Flash Forms http://www.blackcj.com/blog/2009/11/23/adding-server-side-captcha-to-flash-forms/ http://www.blackcj.com/blog/2009/11/23/adding-server-side-captcha-to-flash-forms/#comments Mon, 23 Nov 2009 17:06:40 +0000 Chris Black http://www.blackcj.com/blog/?p=587 Problem:
Flash forms are very vulnerable to attacks. Spiders may not be able to easily iterate through your Flash content but they can sure spam your form submission URL. How can you be sure your form was submitted through Flash?

Definition:
A CAPTCHA or Captcha is a type of challenge-response test used in computing to ensure that the response is not generated by a computer.

Solution:
What if we have a user drag a circle onto a box? A spider would have a pretty hard time with that, right? WRONG. While this may be a good filter at the view level it still does not solve our problem. All the hacker would need to do is submit the form correctly one time and use a program like Firebug to sniff the submission URL. They could then completely bypass your view and submit the form as many times as they want.

The only way to ensure the Flash form is being used is to pull the logic out of the view and onto the server. The Flash merely serves up content and never knows what the 'answer' is. In this example we will use PHP to generate the image, MySQL to store the key value pairs, and Flash to display the content. This implementation does not require any images to be stored on the server so it NEVER re-uses an existing image. The PHP generates the image on the fly and serves it directly to the Flash application.

Here is a diagram representing the high level information. Blue lines represent Captcha generation and the red lines represent the Captcha verification.

Server Side Captcha in Flash

Server Side Captcha in Flash

Let's start with the PHP. There are already plenty of PHP scripts out there to generate Captcha. In this example I re-purposed a script called Securimage.

First we need a script that will retrieve the image:

PLAIN TEXT
PHP:
  1. <?php
  2. $flash_id = $_GET['flash_id'];
  3. include 'securimage.php';
  4. $img = new securimage();
  5. $img->show($flash_id); // alternate use:  $img->show('/path/to/background.jpg');
  6. ?>

Next we will need one that verifies the user input with the image:

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. $flash_id = $_GET['flash_id'];
  4. $captcha_text = $_GET['captcha_text'];
  5.  
  6. if ($flash_id && $captcha_text){
  7.     $con = mysql_connect('localhost', 'DB_USERNAME', 'DB_PASSWORD');
  8.     if (!$con) {
  9.         die('Could not connect: ' . mysql_error());
  10.     }
  11.     mysql_select_db("utils", $con);
  12.     $result = mysql_query("SELECT * FROM captcha WHERE flash_id = '".$flash_id."'");
  13.     $match = 0;
  14.     $valid = 0;
  15.     $answer = "false";
  16.     while($row = mysql_fetch_array($result, MYSQL_ASSOC))
  17.     {
  18.         if($row['valid'] == 1)
  19.         {
  20.             $valid = 1;
  21.            
  22.             if($row['captcha_id'] == $captcha_text){
  23.                 $match = 1;
  24.                 $answer = "true";
  25.             }
  26.         }
  27.        
  28.     }
  29.     if($valid == 1){
  30.         mysql_query("UPDATE captcha SET valid = '0' WHERE flash_id = '".$flash_id."'");
  31.        
  32.     }
  33.     echo $answer;
  34.     mysql_close($con);
  35. }
  36. ?>

Now that we have the PHP in place we can create the Flash. The display logic is separated from the view so you can re-use this code with any server side script. The Captcha class requires an ID and a URL to the image to display. It has optional styling parameters to match the look and feel of your webpage.

Generating a Captcha in Flash:

PLAIN TEXT
Actionscript:
  1. // Create a Captcha object
  2. _captcha = new Captcha( );
  3.  
  4. // Create a unique ID so the server can identify the Flash
  5. var date:Date = new Date();
  6. var id:String = "" + Math.floor(Math.random()*1000) + date.time;
  7.  
  8. // Pass in the url along with the ID so the Captcha can load
  9. _captcha.loadCaptcha("http://www.blackcj.com/utils/securimage_show.php?flash_id=" + id, id);

Verifying a Captcha in Flash:

PLAIN TEXT
Actionscript:
  1. var loader:URLLoader = new URLLoader();
  2. loader.addEventListener(Event.COMPLETE, formSuccess, false, 0, true);
  3. var request:URLRequest = new URLRequest("http://www.blackcj.com/utils/check_captcha.php?flash_id=" + _captcha.id + "&captcha_text=" + _text.text);
  4. loader.load(request);

Flash Demo and Source:

Server Side Captcha for Flash

Get Adobe Flash player

(click the image to manually refresh the captcha)

Full source code for Flash & PHP can be found here.

In the source code you will need to replace DB_USERNAME and DB_PASSWORD with your username and password. This example also requires a MySQL database with a table called captcha containing rows flash_id, captcha_id and valid. Valid is used to ensure the Captcha is only submit one time. Since we are always generating a new image there is no reason the Captcha should be allowed to be submitted twice with the same id.

Next Steps:
Additional steps could be taken to prevent robots. Failure rates and number of attempts could be stored for each IP address. No human should ever attempt to re-submit an old Captcha since each time it is randomly generated. The system could block anyone that attempted to re-submit a Captcha.

I would eventually like to make this accessible by integrating audio support. This is a feature of Securimage and would make the utility more versatile.

]]> http://www.blackcj.com/blog/2009/11/23/adding-server-side-captcha-to-flash-forms/feed/ 7 Google Maps: InfoWindowOptions and TextEvents http://www.blackcj.com/blog/2009/08/11/google-maps-infowindowoptions-and-textevents/ http://www.blackcj.com/blog/2009/08/11/google-maps-infowindowoptions-and-textevents/#comments Tue, 11 Aug 2009 17:11:34 +0000 Chris Black http://www.blackcj.com/blog/?p=489 Problem:
Info windows in Google maps are great but how do you pick up specific text events? It is very common to have a 'learn more' or 'click here' link nested in your text fields. Without direct access to the TextField class in the InfoWindowOptions how do we pick up these events?

Solution:
Well, we could set the customContent variable and pass in a custom DisplayObject but that sounds like a lot of work just to get some simple interaction with the text. Luckily the TextEvent class bubbles by default. This is important since we do not have direct access to the TextField within the info window.

Sample:

Google Maps Text Event

Get Adobe Flash player

(click learn more, close the window and click on the map to re-open)

Code:

PLAIN TEXT
Actionscript:
  1. private var _map:Map;
  2. private var _infoWindow:InfoWindowOptions;
  3. private var _ready:Boolean = false;
  4.  
  5. public function GoogleMapsTextEvent()
  6. {
  7.     stage.scaleMode = StageScaleMode.NO_SCALE;
  8.     stage.align = StageAlign.TOP_LEFT;
  9.  
  10.     _map = new Map();
  11.     _map.key = "YOUR GOOGLE MAPS KEY";
  12.     _map.setSize(new Point(300, 300));
  13.     _map.addEventListener(MapEvent.MAP_READY, onMapReady);
  14.     _map.addEventListener(MapMouseEvent.CLICK, addInfoWindow);
  15.    
  16.     _infoWindow = new InfoWindowOptions();
  17.  
  18.     this.addChild(_map);
  19. }
  20.  
  21. private function onMapReady(event:Event):void
  22. {
  23.     _ready = true;
  24.     _map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
  25.     _map.addEventListener(TextEvent.LINK, testFunction, false, 0, true);
  26.     addInfoWindow();
  27. }
  28.  
  29. private function addInfoWindow(event:MapMouseEvent = null):void
  30. {
  31.     if(_ready){
  32.         _infoWindow.contentHTML = "Simple... <a href='event:myEvent'>Learn More.</a>";
  33.         _map.openInfoWindow(_map.getCenter(), _infoWindow);
  34.     }
  35. }
  36.  
  37. private function testFunction(event:TextEvent):void
  38. {
  39.     _infoWindow.contentHTML = "Extended text.";
  40.     _map.openInfoWindow(_map.getCenter(), _infoWindow);
  41. }

Useful Links:
InfoWindowOptions
TextEvent
Custom Google Map Markers

Enjoy!

]]> http://www.blackcj.com/blog/2009/08/11/google-maps-infowindowoptions-and-textevents/feed/ 1 Embedded Fonts and Filters with Input Text in ActionScript http://www.blackcj.com/blog/2009/03/30/embedded-fonts-and-filters-with-input-text-in-actionscript/ http://www.blackcj.com/blog/2009/03/30/embedded-fonts-and-filters-with-input-text-in-actionscript/#comments Mon, 30 Mar 2009 22:21:14 +0000 Chris Black http://www.blackcj.com/blog/?p=287 Problem:
We need a TextField of type TextFieldType.INPUT that has embedFonts set to true and has an inner drop shadow filter. Sounds easy enough right? The first problem is that DropShadowFilter's don't work correctly with TextFields created using ActionScript. The second problem is that setting embedFonts to TRUE and leaving default text empty on a TextField with type TextFieldType.INPUT causes the field not to be selectable.

Solution:
Lets tackle the DropShadowFilter first. After many failed attempts at getting filters to render correctly on TextFields the next best solution was to create a sprite that sites right behind the text field that renders the filter.

Filters for Input Text Fields

PLAIN TEXT
Actionscript:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.filters.DropShadowFilter;
  4.     import flash.text.TextField;
  5.     import flash.text.TextFieldType;
  6.  
  7.     [SWF(pageTitle="Text Field Filter", backgroundColor="#FFFFFF", frameRate="30")]
  8.     public class TextFieldFilter extends Sprite
  9.     {
  10.         public function TextFieldFilter()
  11.         {
  12.             var myTextField:TextField = new TextField();
  13.             myTextField.type = TextFieldType.INPUT;
  14.             myTextField.width = 100;
  15.             myTextField.height = 20;
  16.             myTextField.border = true;
  17.             myTextField.borderColor = 0x000000;
  18.            
  19.             var sprite:Sprite = new Sprite();
  20.             sprite.graphics.beginFill(0xFFFFFF, 1);
  21.             sprite.graphics.drawRect(0, 0, myTextField.width, myTextField.height);
  22.             sprite.filters =  [new DropShadowFilter(4, 45, 0x666666, .4, 6, 6, 1, 1, true)];
  23.             this.addChild(sprite);
  24.            
  25.             this.addChild(myTextField);
  26.         }
  27.     }
  28. }

Filters for Input Text Fields Sample

Next lets create an TextField with type TextFieldType.INPUT and set the embed property to TRUE. Lets set the TextFormat using the setTextFormat function of the TextField and see what happens. The text is not selectable and the input field can not be used. Instead use the defaultTextFormat property of TextField to set the format. Everything works great! My best guess at the reasoning behind this is that when the TextField class is set to type INPUT the set focus attempts to reset the format to the default format. Since the setTextFormat function only sets the initial format subsequent calls break the TextField.

Embed Input Text Issue

PLAIN TEXT
Actionscript:
  1. package {
  2.     import flash.display.Sprite;
  3.     import flash.text.AntiAliasType;
  4.     import flash.text.TextField;
  5.     import flash.text.TextFieldType;
  6.     import flash.text.TextFormat;
  7.  
  8.     [SWF(pageTitle="Embed Input Text", backgroundColor="#FFFFFF", frameRate="30")]
  9.     public class EmbedInputText extends Sprite
  10.     {
  11.         [Embed(mimeType='application/x-font', source="assets/arial.ttf", fontName="Arial")]
  12.         private var Arial:Class;
  13.  
  14.         public function EmbedInputText()
  15.         {
  16.             var myTextFormat:TextFormat = new TextFormat('Arial', 12, 0x000000);
  17.            
  18.             var myTextField:TextField = new TextField();
  19.             myTextField.x = 3;
  20.             myTextField.y = 1;
  21.             myTextField.text = "";  //<---SET TEXT HERE (*CURSOR FIX*)
  22.             myTextField.type = TextFieldType.INPUT;
  23.             myTextField.embedFonts = true;
  24.             myTextField.antiAliasType = AntiAliasType.ADVANCED;
  25.             myTextField.width = 100;
  26.             myTextField.height = 20;
  27.             myTextField.border = true;
  28.             myTextField.borderColor = 0x000000;
  29.             myTextField.selectable = true;
  30.             //myTextField.text = "";  //<---THIS PREVENTS THE CURSOR FROM WORKING (*CURSOR ISSUE*)
  31.            
  32.             //myTextField.setTextFormat(myTextFormat);  //<---THIS WILL NOT WORK (*EMBED ISSUE*)
  33.             myTextField.defaultTextFormat  = myTextFormat;  //<---THIS DOES WORK (*EMBED FIX*)
  34.             this.addChild(myTextField);
  35.  
  36.         }
  37.     }
  38. }

Comment out the FIX lines above and un-comment the ISSUE lines if you would like to see the fail cases.

Embed Input Text Sample

Cursor Issue:
Another interesting quirk. If you set the default text to an empty string AFTER setting the TextField properties when you initially click the input box the cursor is not displayed. The order of operations for setting properties of TextFields in ActionScript is VERY important.

Resources:
Flash Voodoo link
John Blanco's RIA Developer's Corner link
Adobe Livedocs DropShadowFilter link
Adobe Livedocs TextField link

]]> http://www.blackcj.com/blog/2009/03/30/embedded-fonts-and-filters-with-input-text-in-actionscript/feed/ 10 Anchor Tags in ActionScript Textfields http://www.blackcj.com/blog/2008/11/30/anchor-tags-in-actionscript-textfields/ http://www.blackcj.com/blog/2008/11/30/anchor-tags-in-actionscript-textfields/#comments Mon, 01 Dec 2008 03:38:36 +0000 Chris Black http://www.blackcj.com/blog/?p=109 This example is for anyone who needs to use anchor tags in ActionScript TextFields. If using AIR than the best route is to use an HTMLLoader to load in the raw HTML. If an HTMLLoader is not an option you can use this example to create a wrapper class that mimics the anchor tag functionality. Before we get started it is important to note that TextFields have a number of properties, formats and styles available which all have an effect on the way text is rendered. This example takes advantage of a specific set of properties in order to accurately determine the line number and char location of certain strings. Variables may require some adjustments / tweaks (or may not work at all) if the TextField properties are changed.

To get started lets take a look at the HTML we plan to load in:

PLAIN TEXT
HTML:
  1. <b>Index</b>
  2. <a href="#sectionA"><u>Jump to Section A</u></a>
  3. <a href="#sectionB"><u>Jump to Section B</u></a>
  4. <a href="#sectionC"><u>Jump to Section C</u></a>
  5. <a href="#sectionD"><u>Jump to Section D</u></a>
  6. <a href="#sectionE"><u>Jump to Section E</u></a>
  7. <span name="sectionA"><b>Section A</b></span>
  8. <p>...</p>
  9. <p>...</p>
  10. <a href="#top">Back to Top</a>
  11. <span name="sectionB"><b>Section B</b></span>
  12. <p>...</p>
  13. <p>...</p>
  14. <a href="#top">Back to Top</a>
  15. <span name="sectionC"><b>Section C</b></span>
  16. <p>...</p>
  17. <p>...</p>
  18. <a href="#top">Back to Top</a>
  19. <span name="sectionD"><b>Section D</b></span>
  20. <p>...</p>
  21. <p>...</p>
  22. <a href="#top">Back to Top</a>
  23. <span name="sectionE"><b>Section E</b></span>
  24. <p>...</p>
  25. <p>...</p>
  26. <a href="#top">Back to Top</a>

The content of the paragraph files has been removed to save space (you can view the source below to get a copy of the full file). Notice that the 'a name' tags have been replaced with 'span name.' This was a quick way to prevent the styling of the link tags from modifying the style of the headers. There is probably a better way to get around this but it's not within scope of this example. Speaking of the style sheet... here it is:

PLAIN TEXT
CSS:
  1. /* CSS file */
  2. a:hover {
  3.     color: #0000FF;
  4. }
  5.  
  6. a:link {
  7.     color: #555555;
  8.     text-decoration: underline;
  9. }
  10.  
  11. a:active {
  12.     color: #FF0000;
  13. }
  14.  
  15. a:visited {
  16.     color: #555555;
  17.     text-decoration: underline; 
  18. }

Lets start by loading in the HTML text:

PLAIN TEXT
Actionscript:
  1. import com.cb.util.AnchorText;
  2. import flash.text.TextField;
  3. import flash.events.TextEvent;   
  4.  
  5. private var _htmlLoader:URLLoader = new URLLoader();
  6.  
  7. private var html_url:String = "assets/test.html";
  8. private var myText:AnchorText;
  9.  
  10. private function init():void
  11. {
  12.     _htmlLoader.addEventListener(Event.COMPLETE, htmlLoadHandler);
  13.     _htmlLoader.load(new URLRequest(html_url));
  14. }
  15.  
  16. private function htmlLoadHandler(event:Event):void
  17. {
  18.     myText = new AnchorText(_htmlLoader.data, 300);
  19.     myTextComponent.addChild(myText);
  20. }

Now lets take a look at some of the key functions within the Anchor Text class. First we will want to replace the a href # tags with something ActionScript can understand:

PLAIN TEXT
Actionscript:
  1. // Replaces '#' with 'event:' to trigger actionscript events                   
  2. protected function createAnchors():void
  3. {
  4.     var regEx:RegExp = new RegExp("<a href=\"#", "ig");
  5.     _text = _text.replace(regEx, "<a href=\"event:");            
  6. }

Next we will want to add event listeners for the event and set up our dynamic text field:

PLAIN TEXT
Actionscript:
  1. // Constructor
  2. public function AnchorText(text:String, width:Number = 200, height:Number = 300)
  3. {
  4.     _width = width;
  5.     _height = height;
  6.     _text = text;
  7.    
  8.     // Add event dispatching to the a href tags
  9.     createAnchors();
  10.    
  11.     _dynamicText = new TextField();
  12.     _dynamicText.addEventListener(TextEvent.LINK, anchorText);
  13.     this.addChild(_dynamicText);
  14.  
  15.     _styleSheet = new StyleSheet();
  16.    
  17.     // Comment out the following three lines if you don't have an external stylesheet
  18.     _styleLoader = new URLLoader();
  19.     _styleLoader.addEventListener(Event.COMPLETE, styleLoadHandler);
  20.     _styleLoader.load(new URLRequest(css_url)); 
  21.    
  22.     updateFormat();  
  23. }
  24. // Set up the TextField
  25. protected function updateFormat():void
  26. {
  27.     _dynamicText.width = _width;
  28.     _dynamicText.height = _height; 
  29.         _dynamicText.styleSheet = _styleSheet;
  30.     _dynamicText.wordWrap = true;
  31.     _dynamicText.htmlText = _text;
  32.     _dynamicText.selectable = true; // Text MUST be selectable     
  33. }

Finally we will want to handle the mouse clicks to the events that we set up within the text string:

PLAIN TEXT
Actionscript:
  1. protected function anchorText(event:TextEvent):void
  2. {
  3.     // Recognize 'back to top' links
  4.     if(event.text == "top"){
  5.         _dynamicText.scrollV = 0;
  6.         return;
  7.     }
  8.    
  9.     // Set up ghost text field to match properties of the current one
  10.     var anchorText:TextField = new TextField();
  11.     anchorText.wordWrap = true;
  12.     anchorText.width = _width;
  13.     anchorText.styleSheet = _styleSheet;  // This is REQUIRED
  14.  
  15.     // Replace the name tag with a unique pattern (^#^)
  16.     var regEx:RegExp = new RegExp("<span name=\""+ event.text +"\">", "ig");
  17.     anchorText.htmlText = _text.replace(regEx, "^#^"); 
  18.    
  19.     // Replace newlines with '&' to keep char count consistant
  20.     regEx = new RegExp("^", "gm");
  21.     anchorText.htmlText = anchorText.htmlText.replace(regEx, "&"); 
  22.  
  23.     // Remove duplicate newlines
  24.     regEx = new RegExp("&&", "g");
  25.     anchorText.htmlText = anchorText.htmlText.replace(regEx, "x"); 
  26.    
  27.     // Find the char location of the unique pattern   
  28.     var myIndex:int = anchorText.text.indexOf("^#^") + 3;
  29.    
  30.     // Set the scroll index to the line number of the char index
  31.     var scrollIndex:int = _dynamicText.getLineIndexOfChar(myIndex) + 1;
  32.    
  33.     // Scroll to the necessary line
  34.     _dynamicText.scrollV = scrollIndex;
  35. }

Some key things to note would be:

  • The TextField MUST be selectable
  • A StyleSheet must be applied to the TextField (even if you don't load one in)
  • This example assumes '^#^' and '&&' are unique sequences
  • A TextFormat can not be used along with a StyleSheet
  • There are always exception cases when dealing with RegExp and TextFields (no warranty provided)


View Sample / Source Files

Here are a few resources I found helpful along the way:
http://www.kirupa.com/forum/showthread.php?t=303186

http://troyworks.com/blog/2008/03/14/flash-textfield-actionscript-hyperlink-in-as30/

]]> http://www.blackcj.com/blog/2008/11/30/anchor-tags-in-actionscript-textfields/feed/ 1