17 December 2009

ActionScript TextFormat Animation Effect

Something I haven't seen around and I have need for is multiple selection tool. What is functionality of it? I want to paste any text inside TextField, than to be able to select one sentence from beginning of text with mouse drag action, then select another sentence from distant part of the text while selection of first sentence stays visible, and so on. After I select everything I wanted, button click action needs to copy multiple selected text inside new TextField, so I can use it in for something else. If I had to select 20 different sentences I'm saving time significantly. Anyone knows about such tool?

Problem is you can set background color only to entire TextField. Now, I'm not familiar with Text Layout Framework and I'm not sure if this can be resolve using it, but even if it can then I need to target only latest Flash Player.

Only solution left is to use TextFormat class to make selected text different from not selected one. Until I make it work, here is one example how to use TextFormat ActionScript class for animation effect.

First we need to do is import some stuff.

import flash.events.Event;
import flash.events.MouseEvent;

Next thing we do is to create our input text field and two text formats, default format and selected text format:

var txtFld:TextField = new TextField();

var defaultFormat:TextFormat = new TextFormat();
defaultFormat.color = 0x000000;
defaultFormat.underline = false;
defaultFormat.bold = false;

var selectedFormat:TextFormat = new TextFormat();
selectedFormat.color = 0x0000FF;
selectedFormat.underline = true;
selectedFormat.bold = true;

We set look and feel for our input text field, some random lorem ipsum text and we add the text field to the stage:

txtFld.name = 'input_field';
txtFld.width = 300;
txtFld.height = 400;
txtFld.x = 50;
txtFld.y = 50;
txtFld.alwaysShowSelection = true;
txtFld.border = true;
txtFld.borderColor = 0x000000;
txtFld.defaultTextFormat = defaultFormat;
txtFld.multiline = true;
txtFld.wordWrap = true;
txtFld.background = true;
txtFld.backgroundColor = 0xCCCCCC;
txtFld.type = TextFieldType.INPUT;
txtFld.text = "Lorem ipsum dolor sit ...";

In order to make multiple selection functionality work I'll need another output text field, but right now for this example we don't need it, so let's skip that step and write some code to animate our formats:

var i:int = 3;
addEventListener(Event.ENTER_FRAME, onEF, false, 0, true);

function onEF(evt:Event):void {
if (i < txtFld.length-1){
txtFld.setTextFormat(selectedFormat, i, i+1);
txtFld.setTextFormat(defaultFormat, i-2, i-1);

This on enter frame function means text format will change only for 2 characters at the time, while previously changed characters return to default format.




template by blogger templates