携帯Flashを作成していくと、配色を動的にカスタマイズする必要が出てくるケースもあるかと思います。
今回は文字色をActionScriptで動的に変更する方法についてご紹介します。
実現方法
FlashLite2.0以降で使用できるTextFormatオブジェクトを使うことで実現できます。
TextFormatインスタンスを作成し、colorプロパティに配色の値をセットします。
テキストインスタンスにTextFormatを適用すればテキストの文字列が指定した配色に変化します。
入力値としてカラーコードを指定するケースが多いかと思いますので「#」から始まるカラーコードを指定する形でサンプルを用意しました。
仕様
・ステージ上にはダイナミックテキストが配置されています。
・ボタンが7つあり、それぞれをクリックすると各ボタンに指定されたカラーコードに沿ってダイナミックテキストの色が変化します。
・PHPからの動的置換などで初期状態で色を変えておきたいケースを想定して初回も色変更を実行します。
最初オレンジ色(#FF9900)ですが実行後は白色(#FFFFFF)になります。
制作手順
・パブリッシュバージョンはFlashLite2.0とします。
TextFormatオブジェクトがFlashLite2.0以降でしか扱えないためです。
・ステージサイズは240px×240pxとします。
・ダイナミックテキストを作成し、「_等幅」12pxでオレンジ色で文字を記述しておきます。
・カラーコードを静止テキストで書いたボタンを7つ配置します。
・actionレイヤーとlabelレイヤーを作成し、2フレーム目を追加します。
actionレイヤーとlabelレイヤーのみキーフレームにします。
・labelレイヤーの1フレーム目のフレームラベルは「init」,2フレーム目は「changeColor」とします。
・フレームアクションを記述します。
1フレーム目
// 初期カラーコード設定
textColorCode = "#FFFFFF";
// 文字色変更を実行
call("changeColor");
stop();
フォーカス枠はあえて消さずにおいておきます。
2フレーム目
// カラーコードを10進数に変更
if (textColorCode.indexOf('#') == 0) {
textColorValue = parseInt('0x'+substring(textColorCode, 2, -1));
}
// テキストフォーマットを作成
textFormat = new TextFormat();
// テキストフォーマットに配色を適用
textFormat.color = textColorValue;
// 文字列にテキストフォーマットを適用
sampleText.setTextFormat(textFormat);
・ボタンアクションを記述します。
1つ目のボタン
on(press){
textColorCode="#0000FF";
call("changeColor");
}
※2つ目以降はtextColorCodeの値を変更して記述します。
・パブリッシュして完成です。
備考
・文字列の一部の配色を変更する場合はこの方法を少し応用すれば実現可能です。
→参照：「ケータイFlashのテキストにHTMLのようなリンクをつけるには」
・ベクターデータになっているシェイプの色変更や背景色の変更はswfmillを使うことで可能です。
・本サンプルはFlashLite2.0以降の端末でのみ確認可能です。
実行例
実行例はこちらからご確認下さい。
→URLをメールで送る
http://ookura.tanikaze.com/Sample/post4870/
サンプルファイル
sample4870.zip
上記サンプルのFlashファイル一式です。
