Flash / Flex / ActionScript/TextField/MouseEvent
Содержание
- 1 Add mouse click listener to TextField
- 2 Clickable TextField
- 3 Disappearing TextField
- 4 Drag and drop text
- 5 Highlight a paragraph when the user clicks a character
- 6 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
- 7 Unicode characters
- 8 Using multiLine and TextMetrics: set the characters in the line underneath the user"s mouse to red.
- 9 Working with Advanced Text Layout
Add mouse click listener to TextField
<source lang="java">
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);
}
}
}
</source>
Clickable TextField
<source lang="java">
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;
}
}
</source>
Disappearing TextField
<source lang="java">
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");
}
}
}
</source>
Drag and drop text
<source lang="java">
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( );
}
}
}
</source>
Highlight a paragraph when the user clicks a character
<source lang="java">
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( );
}
}
}
}
</source>
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
<source lang="java">
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);
}
}
}
}
</source>
Unicode characters
<source lang="java">
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);
}
}
}
</source>
Using multiLine and TextMetrics: set the characters in the line underneath the user"s mouse to red.
<source lang="java">
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);
}
} }
</source>
Working with Advanced Text Layout
<source lang="java">
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( );
}
}
}
</source>
