Flash / Flex / ActionScript/TextField/MouseEvent

Add mouse click listener to TextField

 
package{
    import flash.display.GradientType;
    import flash.display.Sprite;
    import flash.geom.Matrix;
    import flash.events.*;
    import flash.text.*;     
    public class Main extends Sprite {
    
         public function Main() {
            var t:TextField = new TextField(  );
            t.text = "click here";
            t.autoSize = TextFieldAutoSize.LEFT;
            stage.addChild(t);
            
            stage.addEventListener(MouseEvent.CLICK, clickListener, true);
            
            stage.addEventListener(MouseEvent.CLICK, clickListener, false);
         }
        private function clickListener (e:MouseEvent):void {
          var phase:String;
        
          switch (e.eventPhase) {
            case EventPhase.CAPTURING_PHASE:
            phase = "Capture";
            break;
        
            case EventPhase.AT_TARGET:
            phase = "Target";
            break;
        
            case EventPhase.BUBBLING_PHASE:
            phase = "Bubbling";
            break;
          }
          trace("Current event phase: " + phase);
        }
    }
}

Clickable TextField

 
package{
    import flash.display.GradientType;
    import flash.display.Sprite;
    import flash.geom.Matrix;
    import flash.text.TextField;     
    
    
    public class Main extends Sprite {
    
         public function Main() {
            var head:ClickableHeading = new ClickableHeading("ActionScript","http://www.wbex.ru");
            addChild(head);
         }
    
    }
}
class ClickableHeading extends flash.text.TextField {
    public function ClickableHeading (headText:String, URL:String) {
      //this.html = true;
      //autoSize = TextFieldAutoSize.LEFT;
      htmlText = "<a href="" + URL + "">" + headText + "</a>";
      border = true;
      background = true;
    }
  }

Disappearing TextField

 
The immutable event flow
package {
  import flash.display.*;
  import flash.events.*;
  import flash.text.*;
    import flash.events.*;  
  public class Main extends Sprite {
    private var textField:TextField;
    public function Main(  ) {
      textField = new TextField(  );
      textField.text = "Click here";
      textField.autoSize = TextFieldAutoSize.LEFT;
      addChild(textField);
      stage.addEventListener(MouseEvent.CLICK, stageClickListener, true);
      textField.addEventListener(MouseEvent.CLICK, textFieldClickListener);
    }
    private function stageClickListener (e:MouseEvent):void {
      if (e.target == textField) {
        removeChild(textField);
        textField = null;
      }
    }
    private function textFieldClickListener (e:MouseEvent):void {
      trace("textFieldClickListener triggered");
    }
  }
}

Drag and drop text

 
package {
    
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  import flash.text.TextField;
  import flash.text.TextFieldAutoSize;
  import flash.display.StageAlign;
  import flash.display.StageScaleMode;
  
  public class Main extends Sprite {
    
    public function Main(  ) {
        
      stage.align = StageAlign.TOP_LEFT;
      stage.scaleMode = StageScaleMode.NO_SCALE;
        
      var example:String = "A B C";
      var words:Array = example.split(" ");
      var word:Sprite;
      var wordText:TextField;
      for ( var i:int = 0; i < words.length; i++ ) {
        word = new Sprite(  );
        addChild( word );
        
        wordText = new TextField(  );
        word.addChild( wordText );
        
        wordText.autoSize   = TextFieldAutoSize.LEFT; // Left-justify the text
        wordText.border     = true;
        wordText.background = true;
        wordText.selectable = false;
            
        wordText.text = words[i];
        
        word.addEventListener( MouseEvent.MOUSE_DOWN, handleDrag );
        word.addEventListener( MouseEvent.MOUSE_UP, handleDrop );
        
        word.x = 10*i;
        word.y = 10*i;
      }
    }
    
    private function handleDrag( event:MouseEvent ):void {
      var word:Sprite = event.target.parent;
      
      setChildIndex( word, numChildren - 1 );
      
      word.startDrag(  );
    }
    
    private function handleDrop( event:MouseEvent ):void {
      var word:Sprite = event.target.parent;
      
      word.stopDrag(  );
    }        
  }    
}

Highlight a paragraph when the user clicks a character

 
package {
  import flash.display.Sprite;
  import flash.text.TextField;
  import flash.events.MouseEvent;
  import flash.geom.Rectangle;
  import flash.text.TextLineMetrics;
  public class Main extends Sprite {
    private var _field:TextField = new TextField(  );
    private var _highlight:Sprite = new Sprite(  );
    public function Main(  ) {
      _field.border = true;
      _field.background = true;
      _field.multiline = true;
      _field.wordWrap = true;
      _field.selectable = false;
      _field.width = 400;
      _field.height = 400;
      addChild(_field);
      _field.text = "Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text ";
      _field.addEventListener(MouseEvent.CLICK, onDoubleClick);
      addChild(_highlight);
    }
    
    private function onDoubleClick(event:MouseEvent):void {
      var index:int = _field.getCharIndexAtPoint(mouseX, mouseY);
      var startIndex:int = _field.getFirstCharInParagraph(index);
      var stopIndex:int = startIndex + _field.getParagraphLength(index);
      var startLine:int = _field.getLineIndexOfChar(startIndex);
      var stopLine:int = _field.getLineIndexOfChar(stopIndex - 1);
      var metrics:TextLineMetrics;
      var lineCharacter:int;
      var rectangle:Rectangle;
      _highlight.graphics.clear(  );
      _highlight.graphics.lineStyle(0, 0, 0);
      for(var i:int = startLine; i <= stopLine; i++) {
          lineCharacter = _field.getLineOffset(i);
          rectangle = _field.getCharBoundaries(lineCharacter);
          metrics = _field.getLineMetrics(i);
        _highlight.graphics.beginFill(0x00FFFF, .25);
        _highlight.graphics.drawRect(rectangle.x, rectangle.y, metrics.width, metrics.height);
        _highlight.graphics.endFill(  );
      }
    }
    
  }
}

To remove the highlight when the mouse moves away from both text fields, we would first register both text fields to receive the MouseEvent.MOUSE_OUT event

 
package {
  import flash.display.*;
  import flash.text.*;
  import flash.events.*;
  public class WordHighlighter extends Sprite {
    private var word1:Sprite;
    private var text1:TextField;
    private var word2:Sprite;
    private var text2:TextField;
    private var bgRect:Shape;
    public function WordHighlighter (  ) {
      word1 = new Sprite(  );
      text1 = new TextField(  );
      text1.text = "Products";
      text1.selectable = false;
      text1.autoSize = TextFieldAutoSize.LEFT;
      word1.addChild(text1)
      text1.addEventListener(MouseEvent.MOUSE_OUT, mouseOutListener);
      word2 = new Sprite(  );
      text2 = new TextField(  );
      text2.text = "Services";
      text2.selectable = false;
      text2.autoSize = TextFieldAutoSize.LEFT;
      word2.x = 75;
      word2.addChild(text2)
      text2.addEventListener(MouseEvent.MOUSE_OUT, mouseOutListener);
      addChild(word1);
      addChild(word2);
      bgRect = new Shape(  );
      bgRect.graphics.lineStyle(1);
      bgRect.graphics.beginFill(0xCCCCCC, 1);
      bgRect.graphics.drawRoundRect(0, 0, 60, 15, 8);
      
    }

    private function mouseOutListener (e:MouseEvent):void {
      // If the highlight is present...
      if (e.target.parent.contains(bgRect)) {
        // ...remove it
        e.target.parent.removeChild(bgRect);
      }
    }
  }
}

Unicode characters

 
package{
  import flash.display.Sprite;
  import flash.text.*;
  public class Main extends Sprite{
    public function Main(){
      var field:TextField = new TextField(  );
        field.maxChars = 12;
        field.type = flash.text.TextFieldType.INPUT;
        field.border = true;
        field.background = true;
        field.text = "The greek letter delta looks like so: \u0395";
        addChild(field);
    }
  }
}

Using multiLine and TextMetrics: set the characters in the line underneath the user"s mouse to red.

 
package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.text.TextFormat;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
public class Main extends Sprite
{
    private var multilineField:TextField;
    private var redFormat:TextFormat;
    private var blackFormat:TextFormat;
    public function Main()
    {
        stage.align = StageAlign.TOP_LEFT;
        stage.scaleMode = StageScaleMode.NO_SCALE;
        redFormat = new TextFormat();
        redFormat.color = 0xFF0000;
        blackFormat = new TextFormat();
        blackFormat.color = 0x000000;
        multilineField = new TextField();
        multilineField.multiline = true;
        multilineField.wordWrap = true;
        multilineField.height = 400;
        multilineField.width = 400;
        multilineField.mouseEnabled = true;
        multilineField.addEventListener(MouseEvent.MOUSE_MOVE, 
            getMouseOverLine);
        multilineField.addEventListener(MouseEvent.MOUSE_OUT, 
            getMouseOutLine);
        multilineField.text = "Returns .";
        addChild(multilineField);
    }
    private function getMouseOverLine(mouseEvent:MouseEvent):void
    {
        var characterInLine:int = multilineField.getCharIndexAtPoint(10, mouseEvent.stageY);
        if(characterInLine != -1) {
            var lineIndex:int =  multilineField.getLineIndexOfChar(characterInLine);
            var firstCharIndex:int = multilineField.getLineOffset(lineIndex);
            var lastCharIndex:int = firstCharIndex + multilineField.getLineLength(lineIndex);
            multilineField.setTextFormat(blackFormat); 
            multilineField.setTextFormat(redFormat,firstCharIndex, lastCharIndex);
        }
    }
    private function getMouseOutLine(mouseEvent:MouseEvent):void
    {
        multilineField.setTextFormat(blackFormat);
    }
}
}

Working with Advanced Text Layout

 
package {
  import flash.display.Sprite;
  import flash.text.TextField;
  import flash.events.MouseEvent;
  import flash.geom.Rectangle;
  public class Text extends Sprite {
    private var _field:TextField;
    private var _highlight:Sprite;
    public function Text(  ) {
      _field = new TextField(  );
      _field.border = true;
      _field.background = true;
      _field.multiline = true;
      _field.wordWrap = true;
      _field.selectable = false;
      _field.width = 400;
      _field.height = 400;
      addChild(_field);
      _field.text = "Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text ";
      _field.addEventListener(MouseEvent.CLICK, onClick);
      _highlight = new Sprite(  );
      addChild(_highlight);
    }
    
    private function onClick(event:MouseEvent):void {
      var index:int = _field.getCharIndexAtPoint(mouseX, mouseY);
      var rectangle:Rectangle = _field.getCharBoundaries(index);
      _highlight.graphics.clear(  );
      _highlight.graphics.lineStyle(0, 0, 0);
      _highlight.graphics.beginFill(0x00FFFF, .25);
      _highlight.graphics.drawRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
      _highlight.graphics.endFill(  );
    }
    
  }
}