スマホサイト・アプリをつくろう。スマホサイト・アプリをつくろう。-携帯Flashを作成していくと、Flash内の配色を動的にカスタマイズする必要が出てくるケースもあるかと思います。今回はFlash内の文字・背景・ベクター画像の配色をswfmillで動的に変更する方法についてご紹介します。画面イメージ実現方法swfmillで変換されたXML内の色要素の文字列を置換することで実現できます。swfファイルを作成する際にあらかじめ設定別に各テキスト・ベクター画像の配色を分けて作成しておきます。テキストの色も同じ方法で置換できてしまいますのでテキストと別の色設定にしたい場合はテキストも別の色を指定しておきます。※テキストは静止テキスト・ダイナミックテキスト・テキスト入力のいずれでも色変更可能です。グラデーションもグラデーション内の特定のカラーがデータとして存在しますので、それぞれ変換すれば色を変更することができます。同じグラフィックでもビットマップ画像の場合はXMLにした際にカラーが取得できませんのでこちらは別の方法で置換する必要があります。XMLの内部では配色はRed,Green,Blueの各色要素別に10進数で表現されています。blue="0"/></color>↓これをXML内で検索して特定の文字に変換しておき、再度変換したい配色を指定した文字列に変換してswfに戻すことで配色を変更することができます。一度全て特定の文字に置換してから変換先の色設定に置換するように注意してください。swfmillで変換出力されるXML内の配色の書式については下記をご参照下さい。※XMLをオブジェクトや配列に変換して扱った方が厳密な置換処理が可能ではあるのですが、本サンプルではシンプルに考えるために文字列として扱っています。・ステージ上には静止テキストが3つ、グラデーションを設定したシェイプが一つ、線が一つ配置されています。・スキンを変更すると各スキンに設定された配色に変更して出力されます。・パブリッシュバージョンはFlashLite1.1とします。・ステージサイズは240px×240pxとします。・静止テキストを作成し、「_等幅」12pxで配置します。・矩形ツールで四角いシェイプを配置し、40×480pxで左寄せ、Y座標-120の位置に配置します。四角いシェイプは左から右にかけて線形グラデーションを指定します。右側の色は背景と同じにします。・幅2pxの線ツールで線を2つ配置します。2つの線は同じ色にしておきます。・パブリッシュして完成です。$output;}※今回からはswfmill変換処理を関数にまとめてみました。※UTF-8で記述しています。※同階層に書き込み可能権限で「error-output.txt」を配置しています。・FlashLite2.0以降の場合はActionScriptを併用することでFlash内でさらに文字列や文字列の一部の配色を変更することができます。・ビットマップ画像を差し替える場合はバイナリデータを置換することで可能です。実行例はこちらからご確認下さい。→URLをメールで送るhttp://ookura.tanikaze.com/Sample/post5057/サンプルファイルsample5057.zip上記サンプルのFlashファイル一式です。スマホサイト・アプリをつくろう。まめの木|モバイルSEO見積ツール株式会社セルバは携帯サイト作成・制作、メール配信、店舗検索など、携帯サイトの様々なサービスをご提供しています。