[ActionScript3.0]Flashで複数行のテキストを表示するリストボックスを作ってみた。

公開日：2009/10/06

Flashで複数行のテキストを表示するリストボックスを作ってみた。
こんなものがあった。
リストボックスのように使えて、複数行つかえるというのだ！
これは便利なフラグだ。
いざ、利用しようとしたら・・・
AS2.0環境で作られてたのでAS3.0では使えんかった・・・
てことで、AS3.0で書き直して作ってみた。

[結果]
作成物を以下に示す。
サンプル – multilinelistbox.swf
ソース – multilinelistbox.zip
※10/03/25追記：現在削除されてしまった為残っていないのでソースだけ書いときます。

package { import flash.display.Sprite; import flash.display.MovieClip; import flash.display.Loader; import flash.events.Event; import flash.text.TextField; import flash.text.TextFormat; import flash.net.URLRequest; import flash.text.StyleSheet; import fl.containers.ScrollPane; import flash.events.MouseEvent; import flash.net.navigateToURL; import flash.text.TextFieldAutoSize; /** * 複数行リストボックス生成 */ public class MultilineListbox extends Sprite { private var url:Array = new Array(); private var contents:MovieClip = new MovieClip(); private var sp:ScrollPane; public function MultilineListbox () { } public function makeListbox (basis_sp:ScrollPane, data_array:Array, hovercolor:String = "#499300", markflag:Boolean = true, coverflag:Boolean = true, hoverflag:Boolean = true, text_width:Number = 446 ): void { var setheight:Number = 0;//テキストフィールドの高さ var setdepth:Number = 0;//階層 var setx:Number = 0;//テキストフィールドのX地点 var test:ScrollPane; //CSS if (hoverflag) { var styles = new StyleSheet(); styles.setStyle("a:hover", {color:hovercolor}); } for (var i=0; i<data_array.length; i++) { //Mark if (markflag) { var mark_mc:MovieClip = new mark(); mark_mc.name = "mark_" + i; mark_mc.x = 0; mark_mc.y = setheight; mark_mc.mouseEnabled = false; this.contents.addChild( mark_mc ); setx = mark_mc.width+2; setdepth++; } //TextField var content_txt:TextField = new TextField(); content_txt.htmlText = data_array[i].label + "\n"; content_txt.x = setx; content_txt.y = setheight; content_txt.width = text_width; content_txt.multiline = true; content_txt.wordWrap = true; content_txt.autoSize = TextFieldAutoSize.LEFT; //CSS if (hoverflag) { content_txt.styleSheet = styles; } this.contents.addChild( content_txt ); setdepth++; //Cover if (coverflag) { var cover_mc:MovieClip = new cover(); cover_mc.x = 0; cover_mc.y = content_txt.y; cover_mc.height = content_txt.textHeight + 2; cover_mc.width = text_width; cover_mc.alpha = 0; cover_mc.name = i; cover_mc.addEventListener( MouseEvent.MOUSE_OVER, _onRollOver ); cover_mc.addEventListener( MouseEvent.MOUSE_OUT, _onRollOut ); this.contents.addChild( cover_mc ); setdepth++; } //今までの高さの合計 setheight += content_txt.textHeight; } basis_sp.source = this.contents; //ScrollPaneに追加する this.sp = basis_sp; } public function _onRollOver ( e:Event ):void { e.currentTarget.alpha = 0.3; } public function _onRollOut ( e:Event ):void { e.currentTarget.alpha = 0; } public function removeListbox(): void { if ( this.sp != null ) { this.sp.source = null; } for ( var i = 0; i < this.contents.numChildren; i++ ) { this.contents.removeChildAt(0); } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

package
{
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.events.Event;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.net.URLRequest;
import flash.text.StyleSheet;
import fl.containers.ScrollPane;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.text.TextFieldAutoSize;
/**
* 複数行リストボックス生成
*/
public class MultilineListbox extends Sprite {
private var url:Array = new Array();
private var contents:MovieClip = new MovieClip();
private var sp:ScrollPane;
public function MultilineListbox ()
{
}
public function makeListbox (basis_sp:ScrollPane, data_array:Array, hovercolor:String = "#499300", markflag:Boolean = true, coverflag:Boolean = true, hoverflag:Boolean = true, text_width:Number = 446 ): void
{
var setheight:Number = 0;//テキストフィールドの高さ
var setdepth:Number = 0;//階層
var setx:Number = 0;//テキストフィールドのX地点
var test:ScrollPane;
//CSS
if (hoverflag) {
var styles = new StyleSheet();
styles.setStyle("a:hover", {color:hovercolor});
}
for (var i=0; i<data_array.length; i++) {
//Mark
if (markflag) {
var mark_mc:MovieClip = new mark();
mark_mc.name = "mark_" + i;
mark_mc.x = 0;
mark_mc.y = setheight;
mark_mc.mouseEnabled = false;
this.contents.addChild( mark_mc );
setx = mark_mc.width+2;
setdepth++;
}
//TextField
var content_txt:TextField = new TextField();
content_txt.htmlText = data_array[i].label + "\n";
content_txt.x = setx;
content_txt.y = setheight;
content_txt.width = text_width;
content_txt.multiline = true;
content_txt.wordWrap = true;
content_txt.autoSize = TextFieldAutoSize.LEFT;
//CSS
if (hoverflag) {
content_txt.styleSheet = styles;
}
this.contents.addChild( content_txt );
setdepth++;
//Cover
if (coverflag) {
var cover_mc:MovieClip = new cover();
cover_mc.x = 0;
cover_mc.y = content_txt.y;
cover_mc.height = content_txt.textHeight + 2;
cover_mc.width = text_width;
cover_mc.alpha = 0;
cover_mc.name = i;
cover_mc.addEventListener( MouseEvent.MOUSE_OVER, _onRollOver );
cover_mc.addEventListener( MouseEvent.MOUSE_OUT, _onRollOut );
this.contents.addChild( cover_mc );
setdepth++;
}
//今までの高さの合計
setheight += content_txt.textHeight;
}
basis_sp.source = this.contents; //ScrollPaneに追加する
this.sp = basis_sp;
}
public function _onRollOver ( e:Event ):void
{
e.currentTarget.alpha = 0.3;
}
public function _onRollOut ( e:Event ):void
{
e.currentTarget.alpha = 0;
}
public function removeListbox(): void
{
if ( this.sp != null ) {
this.sp.source = null;
}
for ( var i = 0; i < this.contents.numChildren; i++ ) {
this.contents.removeChildAt(0);
}
}
}
}

[使い方]
multilinelistbox.asを同じフォルダにぶち込んで、以下の関数を実行するだけ

MultilineListbox( スクロールパネル, 表示する配列データ, テキストフィールドの横幅, 行頭マークの有無, マウスオーバー背景色の有無, マウスオーバー文字色の有無, マウスオーバー文字色 );

1
2
3
4
5
6
7

MultilineListbox( スクロールパネル,
表示する配列データ,
テキストフィールドの横幅,
行頭マークの有無,
マウスオーバー背景色の有無,
マウスオーバー文字色の有無,
マウスオーバー文字色 );

[詳細]
main.flaのほうに実行する準備が書かれているので、それを見ていただければとおもうが、一応説明。
1.1個目の引数　-　スクロールパネル
今回は、元々おいてあるスクロールパネルを利用したが、新しく作ったやつでもいいとおもう。
2.2個目の引数　- 表示する配列データ
こんなかんじで配列作って入れてください。

var sample_array:Array = new Array();
sample_array.push({label:”デジアナウェア”,data:”http://www.d-a-w.jp/”})
sample_array.push({label:”オリジナルスキンが反映できる無料のティッカー型RSSリーダー！RSSリーダー『mimiタブ』“,data:”http://www.d-a-w.jp/mimitab/”})
sample_array.push({label:”デスクトップキャラクター応援モンキーおうえモン“,data:”http://www.d-a-w.jp/oemon/”})
sample_array.push({label:”画に宿る神の姿を具現化する神力を持った鏡、『画神鏡』。
最強の神を見つけた者には、その恩恵にあやかることができると言う―“,data:”http://www.d-a-w.jp/gashinkyo/”})
sample_array.push({label:”デジタルカタログ作成ツール
「デジパラブー」
Vista・Mac対応！デジアナウェアの商用使用OKなシェアウェアFlash”,data:”http://www.d-a-w.jp/digiparaboo/”})

labelに表示したい、文字
dataにアドレスいれればおｋ
3.3個目の引数 – テキストフィールドの横幅
そのまんま。
数字入れればおｋ
4.4個目の引数 – 行頭マークの有無
trueにすれば、行頭に、
・
↑がつきます
5.5個目の引数 – マウスオーバー背景色の有無
trueにすると、マウスオーバーしたとき背景色が変わります。
6.6個目の引数 – マウスオーバー文字色の有無
trueにすると、マウスオーバーしたとき、文字色が変わります。
7.7個目の引数 – マウスオーバー文字色
16進数でHTMLみたいに指定してください。
と、まぁこんなかんじで頑張ったのだが、いろいろ調べてるとこんなものがあった。
[as3]ActionScript3でUIコンポーネントを作ってみる
これ使えばはやかったかもしれない＼(^o^)／
ところで、最近弟がインフルエンザにかかり、私もちょっと体調がわるいです・・・
新型インフルエンザ・クライシス (岩波ブックレット)