ケータイFlashのテキストにHTMLのようなリンクをつけるには

By ookura - 09/05/29 -

今回はケータイFlashでテキストをHTMLっぽく表示する方法について紹介します。
こちらで紹介する方法はFlashLite2.0以上のFlashで使用できます。
　
　

実行例

実行例はこちらからご確認下さい。

→URLをメールで送る
http://ookura.tanikaze.com/Sample/post3579/
　
　

画面イメージ

ケータイFlashテキストの修飾とリンク

Flash上の文字にアンダーラインをつけてリンクしたい、着色したいというケースがあるかと思います。
　
テキストの一部を着色するだけなら簡単ですが、下線をつけたりリンクをつけたりするにはどうすればよいのでしょうか？
　
このようなケースでは、PCのFlashの場合はTextField.htmlTextで指定してHTMLタグで対応できますが、
ケータイFlashではテキストオブジェクト内のリンクを選択できません。
　
そこでTextField.textFormatを使用します。
textFormatを使うとテキストオブジェクトやその一部に対してフォーマットを指定できます。

sample_txt.text = "次のページはこちらをクリックしてください";
linkFormat = new TextFormat();
linkFormat.color = 0x0000FF;
linkFormat.underline = true;
// 開始位置(6)から終了位置(9)までフォーマット(linkFormat)を適用
sample_txt.setTextFormat(6, 9, linkFormat);

上記の例では「こちら」の３文字にだけ青い下線がセットされます。
　
リンクについてはボタンに対するロールオーバー・ロールアウトアクションでtextFormatを切り替えて、キープッシュ時にURLへのリンクを実行するようにします。
　
スクロールの方法は以前紹介させていただいた以下のサンプルを参考にして下さい。
参照：ケータイFlashで縦スクロールするページを作ってみよう（３ボタン制御編）
　
　

Flashの作成方法

パブリッシュバージョンはFlashLite2.0で作成します。
　
三つのレイヤーを用意し、上から「action」「text」「button」とします。
ActionScriptでtextFormatを切り替えたいので、textレイヤーにダイナミックテキスト(_等幅12px複数行)を配置します。
インスタンス名として「sample_txt」を指定しておきます。
→[図132]
　
また、スクロール用にヒット領域だけにシェイプを配置して見えなくしたボタンをbuttonレイヤーに３つ設置しておきます。
各ボタンにアクションを設定します。
　
ボタン１

on (rollOver) {
	currentBtn = 1;
	rollOverAction();
}
on (rollOut) {
	rollOutAction();
}
on (press, keyPress "<Enter>") {
	pressAction();
}

　
ボタン２

on (rollOver) {
	currentBtn = 2;
	rollOverAction();
}
on (rollOut) {
	rollOutAction();
}

　
ボタン３

on (rollOver) {
	currentBtn = 3;
	rollOverAction();
}
on (rollOut) {
	rollOutAction();
}

　
ステージのactionレイヤーにフレームアクションを配置します。
初期設定・毎フレーム処理・イベント処理を記述します。

// ボタンフォーカスを消す
_focusrect = false;
// テキストフォーマットを設定
// 通常のテキスト（濃いグレー）
textFormat = new TextFormat();
textFormat.color = 0x333333;
// リンクのフォーマット(青アンダーライン)
linkFormat = new TextFormat();
linkFormat.color = 0x0000FF;
linkFormat.underline = true;
// ロールオーバーのフォーマット（赤アンダーライン）
alinkFormat = new TextFormat();
alinkFormat.color = 0xFF0000;
alinkFormat.underline = true;
// 選択番号初期化
if (!selectNo) {
    selectNo = 0;
}
// 表示する文字列を指定
sample_data = "携帯端末は世代やキャリアなどによって実に様々な種類が存在しています。";
sample_data += "\n";
sample_data += "それぞれの携帯端末によって画面のサイズが違ったり、文字コードが違ったりするため、絵文字や画像形式、サイズ等それぞれに合わせた形で表示させてあげるなど、PCサイトとは違い、携帯端末やキャリアごとに表示させる内容を変える必要があります。";
// リンクする文字とリンク先のフォーマット
linkData = Array();
linkData[0] = Array();
linkData[0]['text'] = "キャリア";
linkData[0]['url'] = "/Sample/post3579/link/key/1/";
linkData[1] = Array();
linkData[1]['text'] = "文字コード";
linkData[1]['url'] = "/Sample/post3579/link/key/2/";
linkData[2] = Array();
linkData[2]['text'] = "絵文字";
linkData[2]['url'] = "/Sample/post3579/link/key/3/";
sample_txt.text = sample_data;
// 全体にtextFormatを適用
sample_txt.setTextFormat(textFormat);
// 各リンク文字が最初に出てきた場所にlinkFormatを適用
for (i=0; i<linkData.length; i++) {
    sample_txt.setTextFormat(sample_data.indexOf(linkData[i]['text']), sample_data.indexOf(linkData[i]['text'])+linkData[i]['text'].length, linkFormat);
}
// ロールオーバー時のアクション
function rollOverAction() {
    // ボタンの上下移動を元にスクロール番号を増減
    if (currentBtn == 1) {
        if (scrollId == 2) {
            scrollFlg = "up";
        } else {
            scrollFlg = "down";
        }
    } else if (currentBtn == 2) {
        if (scrollId == 3) {
            scrollFlg = "up";
        } else {
            scrollFlg = "down";
        }
    } else if (currentBtn == 3) {
        if (scrollId == 1) {
            scrollFlg = "up";
        } else {
            scrollFlg = "down";
        }
    }
    scrollId = currentBtn;
    if (scrollFlg == "up") {
        selectNo--;
    }
    if (scrollFlg == "down") {
        selectNo++;
    }
    // スクロール番号の下限・上限を制限
    if (selectNo<1) {
        selectNo = 1;
    } else if (selectNo>linkData.length) {
        selectNo = linkData.length;
    }
    // ロールオーバーした文字のフォーマットをalinkFormatに変更 
    sample_txt.setTextFormat(sample_data.indexOf(linkData[(selectNo-1)]['text']), sample_data.indexOf(linkData[(selectNo-1)]['text'])+linkData[(selectNo-1)]['text'].length, alinkFormat);
}
// ロールアウト時のアクション
function rollOutAction() {
    // ロールアウトした文字のフォーマットをlinkFormatに変更
    sample_txt.setTextFormat(sample_data.indexOf(linkData[(selectNo-1)]['text']), sample_data.indexOf(linkData[(selectNo-1)]['text'])+linkData[(selectNo-1)]['text'].length, linkFormat);
}
//ボタンクリック時のアクション
function pressAction() {
    getURL(linkData[(selectNo-1)]['url']);
}

　
indexOf()は文字列を特定のワードで検索して最初に出現する文字位置を調べる関数です。
lengthは配列の場合は要素数を、文字列の場合は文字数を返すプロパティです。
　
上記サンプルではtextFormatをセットする位置をlinkDataの内容を検索することで決めています。
　
　

サンプルファイル

sample3579.zip
上記サンプルのFlashファイル一式です。
　
　

備考

textFormatにはcolorやunderline以外にも色々あります。
詳細はマニュアルをご参照下さい。
　
　

参考URL

TextField.setTextFormat メソッド－ Flash Lite 2.x ActionScript リファレンスガイド
http://www.adobe.com/livedocs/flashlite/2_jp/main/00000846.html#485961
　
TextFormat － Flash Lite 2.x ActionScript リファレンスガイド
http://www.adobe.com/livedocs/flashlite/2_jp/main/00000868.html
　
　

スマホサイト・アプリをつくろう。

おすすめ

カテゴリー