About the Site

This weblog is edited and run by members of reallyenglish, a company offering a total English learning solution based in London, Beijing, Shanghai and Tokyo. Visit our corporate site to know more about what we do.

Notes are posted by members from various cultural and geographical backgrounds, and the topics range from education, business and international communication to software development, the internet culture, and more.

Staff

Masatomo Nakano http://twitter.com/masatomon /m/mt-static/support/assets_c/userpics/userpic-2-100x100.png simonl davida jeremyw Go Kameda gavin b No name tomoyukis

 

Highlighting Text in TextField

| No Comments

Manipulating text presentation in a Flash interface is a very common task when developing a interface for learning applications at reallyenglish. "Highlighting" a certain parts of the text in a Flash TextField is just one of them and unlike doing it in HTML, it could be a bit cumbersome task sometimes. This time I tried to modularize the functionality.

View Demo
Source files (.zip, 356KB)

Rough description of how to use (please refer to the demo and the source code as well);

 // Create a TextHiliter class instance, passing references for the TextField and a Sprite to draw hilighting marker;
_textHiliter = new TextHiliter(refTextField, refCanvas);

// Hilight the 1st to 4th letters, with #C4E1FF (100% alpha) marker
_textHiliter.hilite(0, 4, 0xC4E1FF, 1);

// Hilight the letters "unable to stop herself to assist her" between "Margaret, " (please note the spaces)  and ", was involuntarily" with #D3FD2D (100% alpha) marker
// The current implementation hilights the 1st match only
_textHiliter.hiliteByLetters("unable to stop herself to assist her",  0xD3FD2D, 1, "Margaret, ", ", was involuntarily");

Although it's still under improvement, I think that the logic for extracting area of certain part of the text can be applied to some other purposes. (And please enlighten me if you know a better way of doing it..!)

2009/12/20:
Made the following changes.

  • Changed hilite() method so that it does not include the character specified by the argument "end(index)". Now it takes effect to the part specified by start and all characters up to end - 1, just like String.substring() method.
  • Changed the Demo so that the text can be highlighten just by selecting a certain part of it.

reallyenglishに参加してから、ActionScriptでのテキストの加工(特に表示面での加工)を行うことが多くなりました。ダイナミックテキストの特定の複数箇所をハイライト(マーキング)するといった処理もその一つです。HTMLだと楽勝ですが、Flashの場合やってみたらかなりめんどくさい感じだったのでこの機能を切り出したものをつくってみました。

View Demo
Source files (.zip, 356KB)

TextHiliterクラスのおおまかな使い方(詳しくはデモ及びソースコードを参照);

// TextField、及び描画用Spriteの参照を引数にTextHiliterのインスタンスをつくる
_textHiliter = new TextHiliter(refTextField, refCanvas);

// 1文字目から4文字目までを、#C4E1FF、100%アルファでハイライトする場合
_textHiliter.hilite(0, 4, 0xC4E1FF, 1);

// "Margaret, " と ", was involuntarily"(スペースに注意) という文字列に挟まれた "unable to stop herself to assist her" という文字列を、#D3FD2D、100%アルファでハイライトする場合
// (現状の実装では、条件を満たすものが複数あった場合も、一番初めにマッチしたものにしか適用されないです)
_textHiliter.hiliteByLetters("unable to stop herself to assist her",  0xD3FD2D, 1, "Margaret, ", ", was involuntarily");

まだ発展途上ですが、TextField内の文字列のエリアを取得する部分のロジックは他の用途にも応用できると思うので、何かの参考にでもなれば嬉しいです。あともっといいやり方があれば教えてください。。!

2009/12/12 追記:
下記を変更しました。

  • hilite()メソッドをString.substring()メソッドと同様、startで指定したindexからendで指定したindexの一文字前までハイライトするように変更(以前はendで指定したindexの文字を含んでました、ごめんなさい)
  • デモにおいて、テキストをセレクトするとセレクトした部分がハイライトされるよう変更

Leave a comment