Flash Liteで作成したswfファイルのテスト・動作確認まとめ

PC版Flash Playerでは、携帯向けに作成したデータの確認ができません。
例えば、
・携帯では動かないような重いデータでも動作してしまう
・携帯専用のActionScriptが動作しない
などの違いがあります。

そのため専用のツールや実機を使用して検証を行います。
この記事では3パターンの確認方法を書いています。

 PC上でのエミュレーション実機確認デバッグ用のツールを使用する
メリット様々な環境でどう動作するか見られるPC上では再現しきれない不具合もカバーできる不具合の原因箇所がわかりやすい
デメリット実機と動作が完全に一致しない場合がある本体や確認環境を用意しないと検証ができない扱うのに知識が必要

PC上でのエミュレーション

Adobe Device Centralを使用する
CS3以降のFlashやPhotoshopに付属するツールです。
機種ごとのプロファイルが用意されていて、各機種でのメモリ使用量やエラーログ、スクリプトの動作状況を見られます。
iモードHTMLシミュレーターIIを使用する (Windowsのみ)
docomoから提供されている無料の開発用ツールです。
fscommand2で取得できる値をツール側で設定できます。
電池最大容量等も変更できるため、au、softbank向けのデバッグができます。

実機確認

実機でswfファイルをダウンロード&再生する方法は、各キャリアごとに異なります。

docomoswfをサーバーにアップロード後、DL
auPCからswfファイルをメール添付
swfをサーバーにアップロード後、DL
待受として設定したり、データフォルダからすするには、実行できます。
Softbankswfをサーバーにアップロード後、ブラウザで開く
Softbankはデータフォルダ内でキー入力を拾えないため、ASでoncommandを使用している場合の動作検証はブラウザで行います。

デバッグ用のツールを使用する

・trace関数を使う
 ActionScriptの関数のひとつで、動作確認に使われます。
 ASの動作がわからない時、変数にどんな値が代入されているかが見られます。

Flash Decompiler Trillixを使用する
 swf内部の画像やシェイプ、AS等を見られるツールです。
 動作がおかしい場合の不具合箇所を見つけるのに使います。

今からFlashLiteを始める人にこれは読んでおけと薦めるリンク集

FlashLite初心者の時に参考にしていたサイトのメモが出てきたので、まとめました。
はじめてFlashに触れるデザイナー向けなので、慣れてる方は(3)あたりから読んでください。

(0)Flash Liteについて

携帯向けのFlashです。待ち受け、Flashゲーム、きせかえ、携帯向けサイト、デコメなどで使われています。
バージョンが1.0から3.1までありますが、古い機種にも対応させるため1.1が主流。次に2.0。
この記事はだいたい1.1向けに書いています。

(1)ソフトを揃える

Flash(swfファイル)を作成するためのソフトと、作成したデータを確認するためのソフトを用意します。

●作成ツール
・Flash MX 2004以降のFlashが、FlashLite1.1に対応しています。
MX2004またはFlash8では、Professional版を使用してください。
お手持ちのFlashがBasic版かMX2004以前の場合は、Flash4でパブリッシュすると携帯でも動きます。
これはFlash Lite1.1が、Flash4を基にして携帯用のスクリプトが動くように拡張されたものだからです。
Flash4で携帯向けのActionScriptを書くとパブリッシュ時にエラーが出ますが、書き方さえ合っていればちゃんと動作します。

・フリーソフトで揃えるならPalaFla、またはSuzukaが使えます。
この記事ではFlashMX 2004以降での参考URLを貼っていますので、適宜読み替えてください。

●動作確認用のツール
Adobe Device Central
端末上での動作をシミュレーションでき、Heapメモリ消費量も見られます。
FlashCS3以降に付属しています。

iモードHTMLシミュレータII
携帯向けFlashのシミュレーションができます。
電池電波や時刻表示関連の値を変更することができ、待受Flashのテストに最適。
電池電波は最大値の変更ができますので、auやSoftBank向けのActionScript検証にも使えます。

(2)アニメーションするデータを作れるようになる

FLASH・アニメーション・ActionScript1.0,2.0,3.0の学習サイト Flashの枝
パソコンで再生するためのFlashの作り方を説明しているサイトですが、基本的な操作方法を覚えるのに便利なので挙げています。
こちらの目次の「シンボルとインスタンス」から「マスクとは?」までを一通り読んで、更に余裕があれば「ActionScript とは?」から「gotoAndStop() gotoAndPlay()」までを読んでください。
上に挙げなかったページは、Flashの操作に慣れるまではまだ読まないことをおすすめします。
パソコン向けのFlashと携帯向けのFlashでは、少しずつできる事が違います。
このサイトには携帯Flashで出来ないことも書いてありますので、全てのページを読むと混乱してしまうかも。

(3)時間や電池残量で表示の変わる待受の作り方を覚える

動く待ち受けはFlashの操作を覚えれば作れますが、
電池残量によって絵柄が変わる待受や、時計付きの待受を作るにはActionScript(AS)という簡単なプログラムを書く必要があります。

Design Flash Wall Gallery!
FlashLite1.1でサンプル付きのActionScriptリファレンスがあります。
最新機種に合わせるにはちょっと記述が古い(09年11月現在)ので、_level0.KAYACのまとめ記事や、このブログの記事もあわせて読んでください。

(4)もっと詳しく

ここまで挙げた記事よりも、もう少し細かいことの書いてある入門記事です。
Flash Lite 1.0/1.1メモ
Flash Lite入門講座 第1回 日本のFlash Liteの仕様
Flash Lite 1.1 の基本が分かる8つのポイント

待ち受け制作でハマりがちなこと

FlashLiteでも特に待受で起こる事についてメモ。
Flash全般の問題は「Flash Lite1.1のバグ?とその対処法」を参照ください。

音量に連動するActionScriptは使用しない

待ち受けでは、fscommand2(“GetVolumeLevel”);が動作しません。
待受設定時のFlashでは、音が鳴らない仕様で音系関数の戻り値も0(またはサポート外)です。

画像の大きさはFlash上で変更しない方がよい

一部機種では、待受の表示に時間がかかったり、「展開中」と表示されることがあります。
ビットマップ画像が原寸よりも拡大(縮小)されている時に起こりやすく、
何らかレンダリングが上手くいかない機種があるのだと思います。

画像はscaleの変更や回転をせずに原寸で配置します。
変更の必要がある場合はPhotoshop等でリサイズしたものを使用してください。
また、幅240(QVGA)の機種と幅480(VGA)の機種ではファイルを分けてください。
幅240pxで制作した待受を、幅480pxの機種で表示した際にも
ビットマップ画像が原寸よりも拡大されて表示されていることになりますので、
機種によっては表示エラーを起こすことがあります。

Flaファイル内の画像を取り出す方法3通り

(1)コピー&ペースト

 ・透過していない画像
 ・面積の小さいもの、または画質が多少劣化しても構わない場合
以上のような画像であれば、直接photoshop等の画像編集ツールにコピペできます。
その際、Flashの[編集]→[環境設定]→[クリップボード]を以下の設定にしてください。
 ・色深度…32ビットカラー(アルファチャンネル)
 ・解像度…72dpi
 ・サイズ制限…5000KB
画像編集ソフトの標準が72dpiであることが多いため、解像度が72dpi以外のものに設定されているとコピー&貼り付け前後で画像の縦横サイズ(px)が変わることがあります。標準では「画面サイズに合わせる」になっているので注意してください(windowsの標準は96dpiのためズレが生じます)。
画像が透過を含む場合は透過部分が黒く表示されてしまいますので、次の(2)(3)のいずれかの方法を使います。

(2)swfから画像を抽出する

 ・8ビットカラーの透過を含むPNG画像、透過しているGIF画像
 ・JPEG画像
以上のような画像は、一度swfにパブリッシュしてからHugFlashのようなswfから画像を抽出できるツールを使用するとファイルをまとめて取り出すことができます。
Flash上でJPEG画像の圧縮を使用していると、圧縮後の劣化した画像が取り出されます。
圧縮を使用しているかどうかは、[ライブラリ]パネルからプロパティを選択して確認できます。PNGやGIFの場合は[圧縮:]で[ロスレス]を選択、JPEG画像の場合は「読み込んだJPEGデータを使用する」にチェックを入れてください。
また、半透明を含む24ビットPNG画像を取り出した際には半透明部分の色調が黒色ががって見える場合があります。
その際は(3)の方法で画像を取り出してください。

(3)Flashの書き出しを使用する

・24ビットの半透明を含むPNG画像
・各種画像やFlash上のパスを画質を劣化させず正確に抽出したい
以上のような場合はFlashの書き出しを使用します。
1.新規作成したFlashのステージ上に取り出したい画像を配置します。
2.[ファイル]→[書き出し]→[イメージの書き出し]を選択します。
3.ダイアログで保存先とファイル名を指定し、種類をpngにして保存します。
4.次のダイアログで[解像度:72dpi]、[範囲:イメージサイズ]、[カラー:24ビット(アルファチャンネル)]を選択し、[OK]を押します。

携帯Flash向け:PNG画像の最適化バッチファイル

主にモバイルFlash向けに、PNG画像を減色→最適化するバッチファイルです。
アルファチャネル付きの24ビットPNG画像も減色、最適化できます。

使い方

  1. pngquantPNGrewriteOptiPNGPNGOUTをそれぞれダウンロードし、解凍します。
  2. 以下のコードをメモ帳にコピー&貼り付けします。
  3. SETLOCAL
    ::------------------------------------------------ここから設定項目
    ::何色きざみで減色を行うか、イコール(=)の右側に数値を半角で入力してください。
    SET /A color=16
    ::軽量化処理に使用する各ソフトのファイルパス(それぞれのソフトを解凍した場所)を、イコール(=)の右側に入力してください。
    SET pngquant=pngquant-0.95-win32\pngquant.exe
    SET pngrewrite=pngrewrite-1.3.0\pngrewrite.exe
    SET optipng=optipng-0.6.1-exe\optipng.exe
    SET pngout=pngout.exe
    ::------------------------------------------------ここまで設定項目
    md result\fullcolor
    copy "*.png" result\fullcolor\
    %optipng% result\fullcolor\*.png -o7
    for %%V in (result\fullcolor\*.png) do %pngout% /y %%V %%V
    for /L %%M in (%color%,%color%,256) do md result\%%Mcolor
    :LOOP
    SET /A clr+=%color%
    IF %clr% GTR 256 GOTO END
    %pngquant% %clr% *.png
    move "*-fs8.png" result\%clr%color\
    for %%R in (result\%clr%color\*.png) do %pngrewrite% %%R %%R
    %optipng% result\%clr%color\*.png -o7
    for %%V in (result\%clr%color\*.png) do %pngout% /y %%V %%V
    GOTO LOOP
    :END
    ENDLOCAL

  4. 説明にしたがい、設定項目を記入したらお好きなファイル名で保存します。
  5. 保存したテキストファイルの拡張子を「.txt」から「.bat」に変更します。
  6. このバッチファイル(.bat)と同じフォルダに最適化したいPNG画像をコピーします。
    圧縮したいPNG画像が複数枚ある場合は、すべてコピーしてください。
    (同じフォルダにあるすべてのPNGファイルが最適化されます)
  7. バッチファイルを実行すると、最適化処理が始まります。
    終了までしばらくお待ちください。
  8. バッチファイルのあるフォルダに、「result」という名前のフォルダができます。
    このフォルダの中に、減色&最適化済みのPNGファイルが色数別に保存されます。

利用上の注意

    変換後のPNGファイルはアルファチャンネル付きインデックスカラーPNGです。
    photoshop等の画像編集ツールで正常に開けない場合がございますので、必ずバックアップをとってください。

高圧縮になった分、展開にHeapメモリを消費しないかどうかが若干心配になり
こちらの記事のサンプルデータで比較してみたのですが、全く変わりませんでした。
どの圧縮方式を利用しても変わらないのかな。

このバッチファイルは各種最適化ツールを順番に実行しているだけなので、PNGgauntletやBlastPNGとやってる事は大体同じです。
重ねがけはそんなに意味がないので、最近はこれ1つで全て済ませています。

モーショントゥイーンをActionScriptに置き換えると軽くなる

Flashではタイムラインが長くなるほどメモリを消費し、ファイルサイズも大きくなります。
ゆっくりとしたアニメーションでは長いモーショントゥイーンが使われることもありますが、これらはASで書いて軽量化できます。

サンプル:流れる雲(A、B)

このサンプルでは、インスタンス “cloud” がx座標-110に配置されています。
そこから約1分(12fpsで800フレーム)かけて右に500ピクセル動きます。

サンプルAではモーショントゥイーンを使って動かします。
サンプルBでは以下のASを1フレーム目に書き、2フレーム目ではcall(1);として同じスクリプトを実行。1フレーム目と2フレーム目をループさせています。
[code lang=”js”]
//1フレームに0.6ずつ右に動かす
//("cloud"のx座標プロパティに、0.6を加算して代入)
cloud._x += 0.6;
//雲が410pxよりも右に移動したら、-110pxへ戻してループさせる
//("cloud"のx座標プロパティが410以上になったら、-110を代入する)
if (cloud._x>410) {
cloud._x = -110;
}
[/code]

AとBの比較では、ファイルサイズは70.3KBから1.2KBに、
消費メモリは217~223KBから184~190KBになりました
(Flash CS3+DeviceCentralCS3+プロファイルW52Kで確認)。

使うプロパティを変えたり複数のプロパティを組み合わせて使えば、複雑なアニメーションもASで書けます。
以下、使いそうなプロパティ。

_x x座標。数値が増えるほど右へ移動
_y y座標。数値が増えるほど下へ移動
_alpha 透明度(%)
_height インスタンスの高さ
_width インスタンスの幅
_xscale インスタンスの横の拡大率(%)
_yscale インスタンスの縦の拡大率(%)
_rotation 回転。正の値で時計回りに回る。

FlashLiteのファイルサイズオーバー対策まとめ

そのうち補足を足さなくちゃとは思いつつメモ的に箇条書きで。
このブログ内に関連エントリがあるものはリンクを貼ってあります。

この対処法はファイルサイズを減らすためのものです。
こちらの対策を行うことで端末での再生に使用するHeapメモリが増えることがあります。
メモリオーバー対策まとめ記事もあわせて参照してください。

シンボル、シェイプ

Flash内のビットマップ画像の最適化

ActionScript

  • 複数フレームで同じASを実行する場合は1フレームにのみアクションを書いておき、他のフレームからはcall()でアクションが書いてあるフレームを呼ぶようにします。
  • できるだけ簡単なコードを書き、説明はコメント内に書きます。コメントはパブリッシュ後のswfファイルに含まれません。
  • 変数名とフレーム名はできるだけ短いものにします。

その他

携帯でグラデーションをきれいに表示する

携帯は、最新機種でも16ビットカラー(65536色)表示の機種が多く、グラデーションのような階調のある画像で色むらが起きます。

 
左:PCでの見た目(32bit) 右:携帯での見え方(16bit:イメージ)

これは減色でパターンディザをかけると目立ちません。
photoshopの場合、[Web用に保存]から[PNG-8]、または[GIF]を選択し、[ディザアルゴリズムの指定]を[パターン]にします。
色数はグラデーションがなめらかに見えるぎりぎりまで減色します。


30色に減色してパターンディザをかけたもの(16bit:イメージ)

VGA端末のQVGAモードでディザのドットが見えることがありますが、それでも減色した方がきれいです。

パスとビットマップのメモリ/ファイルサイズ比較

Flashで画像を置く際の最適化のポイントとして
「複雑で面積の小さなものはビットマップで、単純で面積の大きい図形はパスで」
というのは良く聞かれますが、その面積のボーダーラインを正確に把握していなかったので実験してみた。


この画像で大きさを変えながら検証。使ったFlaファイルはこちら

以下、FlashCS3、DeviceCentralCS3+プロファイルW52Kでのテスト結果

26x26px 76x76px 180x180px 240x240px
パス
(Flash上での曲線数:360)
Heapメモリ 145KB 152KB 155KB 156KB
ファイルサイズ 1KB 1.1KB 1.4KB 1.5KB
PNG-24
(Photoshop「Web用に保存」)
Heapメモリ 108KB 130KB 238KB 340KB
ファイルサイズ 0.5KB 2.4KB 7KB 10.4KB
PNG-8 16色
(PNG-24→Pngquant→OptiPNG)
Heapメモリ 107KB 113KB 142KB 169KB
ファイルサイズ 0.4KB 1.6KB 4.6KB 6.6KB

おおよそこんな感じのまとめ。
 ・アイコンのような要素はビットマップ画像が向いている
 ・背景にあたるような要素はパスが向いている
 ・どちらとも言えない大きさの画像の場合、メモリ重視ならビットマップ、ファイルサイズ重視ならパス
 ・VGA端末向けのデータの場合、パスを使用した方が良い場面が多い
 ・QVGA端末向けのデータの場合、ビットマップ画像を使用した方が良い場面が多い

なお、この結果はパスの曲線数や複雑さ、ビットマップ画像にした際は色数に左右されます。

 ・サンプルファイルよりパスの曲線数が多い場合
  …ビットマップにした方が良い場合が増える

 ・サンプルファイルよりビットマップ画像の色数が多い場合や画像が複雑な場合
 ・またはビットマップ画像としてJPEG形式の画像を使用する場合
  …パスにした方が良い場合が増える

適宜読み替えて、どちらを使ったら良いかの判断の目安にしてください。
迷ったら両方作って比較するのが一番。

個人的には
・PNGを減色すると消費メモリもかなり大きく落ちる
・明らかにビットマップの方が良い面積と、明らかにパスの方が良い面積の中間にあるグレーゾーンがとても広い
の2点が「ここまで大きく出るのか、、」という感想。

FlashLiteのメモリーオーバー対策まとめ

そのうち補足を足さなくちゃとは思いつつメモ的に箇条書きで。
このブログ内に関連エントリがあるものはリンクを貼ってあります。

この対処法は端末での再生に使用するHeapメモリを減らすためのものです。
こちらの対策を行うことでファイルサイズが増えることがあります。
ファイルサイズ対策まとめ記事もあわせて参考にしてください。

シェイプとビットマップ

シンボルとインスタンス

  • インスタンスのタイプはできるだけ(ムービークリップではなく)グラフィックにします。
    アニメーションするタイムラインを持たないインスタンスや、ASが関わらないインスタンスはグラフィックにしても動作は変わりません。
  • シンボルの数を減らす、複数のシンボルを一つにまとめる等、ステージ上に読み込まれるオブジェクトの数を減らします。
  • インスタンスに対して[プロパティ]パネルのカラーで変化をつけると、メモリを大きく消費します。
    透明度や色調変更目的でのカラー適用は極力避け、元のシェイプやビットマップの色調を編集してください。
    同一のシンボルでバリエーションをつけている場合でも、すべて分解して個々に色調編集を加えることでメモリ消費をおさえられる場合があります。

モーションとアニメーション

PNGquantの使い方(windows)

PNGquantは、アルファチャンネルつきの256色PNG画像を作るためのオープンソース(フリーソフト)の減色ツールです。
FlashLiteで半透明を含むビットマップ画像を扱う際はこちらのツールを使用すると、24bitアルファチャンネルつきPNG画像を使用する場合に比べてファイルサイズ、消費メモリを落とすことができます。

(1)ツールの入手

http://www.libpng.org/pub/png/apps/pngquant.html
Binaries:の右側、 Windows 9x/NT/etc. のリンク先がダウンロードページです。

(2)使用準備

ダウンロードしたソフトを解凍してできたフォルダに、以下のファイルを解凍したバッチファイルをコピーします。
pngquant_bat_pw6jp.zip

(3)画像の減色

pngquant.exeの入っているフォルダに減色したい画像をコピーし、pngquant_bat_pw6jp.batを実行します。
減色された画像がresultフォルダ内に、色数別にフォルダ分けされて保存されます。
・複数枚のPNG画像をコピーすれば、一度に処理することができます。
・不要なファイルはresultフォルダごと削除できます。

補足など

8bit半透過PNG画像はPhotoshopなどの編集ソフトで正しく開くことができません。
もしも間違って減色元のファイルを削除してしまい、再編集できなくなった場合は
以下の手順で24bitPNGとして保存し直すことができます。
(1)減色後のPNG画像をFlashに配置する。座標は0,0
(2)右下を基準点にしてグラフィックシンボルに変換(画像の座標ずれ対策)
(3)[ファイル]→[書き出し]→[イメージとして書き出し]でPNGを選択
(4)PNG書き出しダイアログで「解像度:72dpi」「カラー:24ビット(アルファチャンネル)」を選択して保存

シンボルの使い回し方4通り

Flashでは同一のパーツを使い回すことでファイルサイズを減らしたり、制作過程を効率化することができます。
以下は、できるだけファイルサイズを増やさずに見た目のバリエーションを作るための方法です。

(1)インスタンスに明度/着色/アルファ/詳細を設定し、カラーバリエーションを作る

インスタンスを選択した状態で[プロパティ]パネルの[カラー]の欄から色をつけることができます。
はじめは[なし]に設定されています。

・明度…プラスに設定すると明るく、マイナスに設定すると暗くなります。
・着色…指定した1色で塗りつぶします。塗りつぶしの濃さを設定できます。
・アルファ…透明度を調整します。0%で完全に透明になります。

[詳細]は色調の変更を行う時や、着色とアルファの効果を同時に適用する時に使います。
[詳細]を選択後、[設定…]ボタンをクリックするとカラー設定のためのダイアログが出てきます。
赤、緑、青のそれぞれの値が色調、アルファの値が透明度に影響します。

(2)共通部分のある画像は使いまわし、差分はレイヤで重ねる

例えば、白馬とシマウマが並んでいるようなイラストの場合では、
「白馬」と「シマウマ」で別々のシンボルを用意するよりも
「白馬」と「シマだけ」のシンボルを用意し、2つのシンボルをFlash上で重ね合わせる方がデータが少なくて済みます。

「人A」「人B」「人C」を描く場合にも、
・「顔シンボルA+髪型シンボルA」
・「顔シンボルB+髪型シンボルB」
・「顔シンボルA+髪型シンボルB」
のようにパーツを使いまわすことで、ファイルサイズを膨らませずにバリエーションを作れます。

(3)変形・斜形・反転を使用する

インスタンスに変形をかけることで、共通のシンボルを使用できる場合があります。
例)真正面から見た蝶のイラストのような、対象の画像の場合
…半分だけの蝶のシンボルを作り2つ配置、片方を反転させます。
例)同じ形の花びらが5つ並んだ桜のような画像の場合
…1枚の花びらをシンボル化し、コピーしたものを回転させて配置します。

(4)テクスチャやパターン画像は塗りに指定して敷き詰める

テクスチャの当たっている部分や、水玉模様などの繰り返しのある画像の場合、シェイプの塗りにシームレスパターン(並べてもつなぎ目の見えない画像)を指定することで軽量化できます。

1.photoshopなどでシームレス画像を作成
2.Flashにドラッグ&ドロップし、ライブラリに登録する
3.ステージ上にシェイプを作成する
4.[カラー]パネルでタイプを[ビットマップ]に変更、サムネイルからシームレス画像を選択

以上の手順で、シェイプの塗りに画像を隙間なく敷き詰めることができます。
敷き詰めた画像が歪んだりズレが発生した場合は、シェイプを基準点右下でシンボル化してください。

補足など

・複数組み合わせて活用するといい感じ
例えば以下のような手順では、Flash上でパターンのカラーバリエーションを作れます。
1.透過PNGで作ったシームレスパターンをシェイプの塗りに指定
2.[カラー]で色のバリエーションをつける
3.下に敷くシェイプの色との組み合わせで複数カラーバリエーション作成

・(4)を除く(1)~(3)の手法は、制作のスピードアップやファイルサイズの軽量化には役立ちますが、携帯での再生時にメモリを食うことがあるため注意してください。

きせかえや待ち受けには#FFFFFFを避けた方がいいのかも

就活の時に携帯のGUI周りを作った方とお話する機会があり、苦労話として
「有機EL液晶は焼きつきを起こしやすいので、#FFFFFFの代わりに微妙なグレーを使う」
と伺ったことがある。

ITmedia +D Lifestyle: au新モデル、「映像のキレイさ」はどれほどか (1/2)

> 有機ELディスプレイ自体はさほど新しい技術ではないが、液晶に比べて寿命が短く、焼き付きに弱いという弱点もあり、携帯電話への利用例はさほど多くなかった。
> 色再現性とコントラスト比以外のスペックは非公開だが、「半永久的とはいえないが、携帯電話での利用に耐えられるだけの寿命を確保することに成功」(KDDI)したほか、「焼き付きを起こさないよう、GUIや配色なども工夫した」(同)と実装のめどが立ったことから、製品への投入となったようだ。

この「配色も工夫した」のひとつが「#FFFFFFを使わない」かな?
確かに実機で標準ピクト+白ベタ待受にすると、他の白は若干暗く見えなくもない。

MEDIASKINを2年以上使って未だ焼きついていないので、それこそプリインストールでもなければ神経質になる必要はなさそうですが。。

#MEDIASKINはブラウザのbackgroundのデフォルト色もグレーなので、透過していない画像は白い角が見えて残念なことになる

docomo新機種で電池残量まわりの仕様変更

ドコモ2009年夏新機種(一部除く)から、
fscommand2(“GetBatteryLevel”);
で返ってくる電池残量の値が3段階→100段階に変更になっていました。
以下対応のためのサンプルコード。

旧機種と表示を共通化する場合(既存の待ち受けflash等の場合)

最大電池残量(MaxBatteryLevel)が100だった場合、3段階にあてはめるASを書いて共通化します。

mxbt = fscommand2("GetMaxBatteryLevel"); //電池の最大値を取得
bt = fscommand2("GetBatteryLevel"); //現在の電池残量を取得
if (mxbt == 100) { //電池の最大値が100段階だった場合
if (bt>60) {bt = 3;} //残量100~61の場合、電池残量は3とする
else if (bt>20) {bt = 2;} //残量60~21の場合、電池残量は2とする
else if (bt>0) {bt = 1;} //残量20~1の場合、電池残量は1とする
}

3段階と100段階で表示を分ける場合

MaxBatteryLevelが100だった場合と、3だった場合で条件式(if)を書いて分岐させます。
このサンプルでは、100段階の電池を20段階ずつで5つのフレームに飛ばします。

mxbt = fscommand2("GetMaxBatteryLevel"); //電池の最大値を取得
bt = fscommand2("GetBatteryLevel"); //現在の電池残量を取得
if (mxbt == 100) { //電池の最大値が100段階だった場合
if (bt>80) {gotoAndStop(2);} //残量100~81の場合、2フレーム目で停止
else if (bt>60) {gotoAndStop(3);} //残量80~61の場合、3フレーム目で停止
else if (bt>40) {gotoAndStop(4);} //残量60~41の場合、4フレーム目で停止
else if (bt>20) {gotoAndStop(5);} //残量40~21の場合、5フレーム目で停止
else if (bt>0) {gotoAndStop(6);} //残量20~1の場合、6フレーム目で停止
}
else if (mxbt == 3) { //電池の最大値が3段階だった場合
if (bt>2) {gotoAndStop(7);} //残量3の場合、7フレーム目で停止
else if (bt>1) {gotoAndStop(8);} //残量2の場合、8フレーム目で停止
else if (bt>0) {gotoAndStop(9);} //残量1の場合、9フレーム目で停止
}

FlashLite1.1でのアナログ時計の作り方

アナログ時計の一周は360度です。文字盤はそれを12分割したものなので、数字の間の角度は30度です。
それを利用して、取得した時間をムービークリップの角度(_rotation)に指定することでアナログ時計を作ります。

サンプルコードは以下。
//の書いてある行はコメントとして扱われるため、このままコピー&貼り付けして使うことができます。

//日付・時計を取得する
hour = fscommand2(“GetTimeHours”);
minutes = fscommand2(“GetTimeMinutes”);
seconds = fscommand2(“GetTimeSeconds”);

//取得した時間から針の角度を計算して代入する
xhour._rotation = hour*30+minutes*0.5;
xminutes._rotation = minutes*6;
xseconds._rotation = seconds*6;

コードをコピペしたらインスタンス名をつけます。
インスタンス名は、ムービークリップを選択した状態で「プロパティ」のパネルから設定ができます。
上のコードをそのまま使う場合、短針は「xhour」長針は「xminutes」秒針は「xseconds」としてください。

各ムービークリップの変形点が針の回転の軸になりますので、変形点は時計の中心に合わせてください。

Illustrator のパスを Flash Lite 1.1に移行する際の注意点いろいろ

イラレからFlashへのパスの移行には、Flash Lite 1.1の仕様上さまざまな制約があります。

(1)Flashで扱えないパスがある
以下のパスはFlash上でパスとして扱うことができません。
書き出しやAIインポート時にビットマップとして貼り付けることもできますが、
画質の調整が必要な際はphotoshopなどで保存し、画像としてFlashに配置してください。
・Illustratorの「効果」でつけられているドロップシャドウ、3D効果等
・塗りがグラデーションメッシュ

また以下のようなパスはそのままFlashにコピーすることはできませんが、アピアランスの分割や分割・拡張等を行うことによりFlashにインポートできるようになります。
・ブラシのストローク
・ブレンド
・パスの変形(パンク・膨張、歪み系など)

(2)Flash Lite 1.1の仕様上扱えないパスがある
Flash Lite 1.1では、線の拡張機能は使えません。
(線の拡張機能が使われている場合、パブリッシュ時にエラーが出ます)
flash上で線を選択し、「伸縮:標準」「線幅:丸型」「結合:丸型」にすることで回避できます。
この線のオプションは、イラレでは「線の位置:線を中央に揃える」「線端:丸型線端」「結合:ラウンド結合」にあたります。
イラレの[選択]→[共通]→[線]などを使用し、あらかじめ全ての線のオプションを変更しておくと便利。

またこの線の拡張機能はFlash 8以降の機能であるため、
Flash 8を使用できる場合は一度「名前をつけて保存」からFlash MX 2004 を選択して保存してからパブリッシュすると解決します。

移し方は、FlashCS3以降の場合はコピペでOK。
Flash8以前の場合は、イラレ上で[ファイル]→[書き出し]からswfを選択して書き出し、Flashから[ファイル]→[読み込み]でライブラリorステージに配置を選択すると配置することができます。

どちらもパスが多数グループ化された状態で配置されるためメモリを多く消費します。配置後、グループ化の解除やシンボルの分解を行ってください。

Flash Lite 1.1 で画像がずれるバグの対処法チェックリスト

Flash Lite 1.1でビットマップ画像(GIF、JPEG、PNG画像)を配置した際に正しく配置されないバグの対処法をリストにしました。
まずこのリストの(1)~(6)を同時に試し、それでもだめなら(7)~(9)をやってみることで大抵解決できる(はず)。

(1)画像をシンボル化する
ビットマップ画像をステージに配置したら、シンボル化を行います。
シンボルのタイプをグラフィックに、基準点を右下に設定してください。

(2)画像の大きさを変更する
縦横が奇数 px の大きさの画像の場合、width、height 共に偶数 px になるよう加工します。

(3)配置位置に小数点がないか確認する
小数点があると、補間が行われるためずれが発生することがあります。

(4)縮小・拡大がされていないかを、[変形]タブで確認する
画像の拡大縮小が行われていると配置がずれてしまうことがあります。
ビットマップ画像はFlash上の変形を使わず、PhotoShop等で拡大縮小を行い
常に100%表示で配置するようにしてください。

(5)アルファトゥイーンをしている場合は透明度を変える
例えば、0% から100%へフェードインするようなトゥイーンの場合、
1%から99%へフェードインするアニメーションに変更してください。

(6)ライブラリのビットマッププロパティでスムージングのチェックを外す

以下は、それでもダメだった場合に試してみてください。
(1)~(6)とは同時に使えない小技だったり、ヒープメモリ消費上あまりやりたくない小技です。

(7)ビットマップ画像を分解する
ビットマップ画像を分解すると、シェイプの塗りにビットマップ画像が指定された状態になります。

(8)画像の上下左右に透過で 2px くらい余裕をつけ、マスクをかける
画像の 1px ずれが直らない時は、ある程度ずれても構わないように作ります。
例えば、100 x 200px の画像を配置したかった場合、画像は102 x 202 pxで制作し、その画像の中心に100 x 200 px のシェイプを配置しマスクにします。
ズレを完全に取り除くことにはなりませんが、見た目上問題のない程度には持っていくことができます。

(9)それでもだめだった時は
Flash Lite 1.1は PC 版の Flash4 に携帯向けの拡張を行ったものであるため、
PC版 Flash4 で確認されていた不具合がそのまま残っています。
上記のチェックリストが役に立たない時や異なる不具合が発生している時は、PC向けFlash4以前の対策が有効なこともあります。

Flash Liteメモリ対策 ビットマップ(パターン)編

繰り返すことのできるパターン画像の場合、どのように配置するのが最も効果的か検証しました。
シェイプを置いてその塗りにビットマップを指定するのが、最もHeapメモリとファイルサイズを節約できました。

(1)静止画一枚をべた貼りする

パターンのある画像を240x432pxのPNG画像にしてべた置きしました。
メモリ消費、ファイルサイズ共に最も大きくなります。

(2)静止画を分割して並べる
パターンのある画像を絵柄の単位ごとで切り出して、並べて配置します。
このサンプルでは80x80pxのものを使用しました。

メモリ消費、ファイルサイズ共に大分良くはなりましたが、ビットマップ画像がズレるバグを回避するために一度シンボル化することを考えるとあまりすっきりしません。

(3)シェイプの塗りにパターン画像を設定する
シェイプの塗りをビットマップにし、繰り返し配置する画像を指定することで表示します。

ファイルサイズも消費メモリも最も少なく、配置も再編集も簡単。

同じ画像を10x10pxまで縮小してみると、更に消費メモリが減った

繰り返しで敷き詰められる画像は小さく軽く、シェイプの塗りに指定してください。

Flash Lite1.1のバグ?とその対処法

・配置した画像が歪む、ずれる
ビットマップ画像を配置する際、恐らくFlashPlayer4時代のものと思われるずれや歪みが発生します。
回避のしかたはこちら。→Flash Lite 1.1 で画像がずれるバグの対処法チェックリスト

・透過GIFが、Flash上で透過にならないことがある
GIF画像は保存するソフトによってヘッダ部分が異なることがあり、
Photoshop5.0等でこの現象が確認されているようです。
異なるソフトで上書きすることにより直る場合があります。

・_rotationで回転させたシンボルが徐々に小さくなる
回転時に出る小数点の処理により表示されているシンボルが小さくなります。
特にアナログ時計の秒針などで目立ちやすい現象です。
 A.[変形]タブで、全てのシンボルの表示倍率を100%にする
 B.数値入力でシンボルの位置を決めるのではなく、マウスでドラッグして位置を決める
等で解決することがあります。
それでもだめな場合は、_xscaleと_yscaleを100に設定するASを書いて
都度拡大率を100%にし直すことで対応します。

・複数枚重ねた画像やシンボルの辺に線が出る
同じ大きさの画像や、辺が重なっている部分に線が出ることがあります。
重なり合ったインスタンスを1pxずつずらす、大きさを変える、等で解決することがあります。

・複数枚重ねた画像が真っ白になる
重ねた枚数がある程度以上になると、その画像に含まれる透過が効かなくなることがあります。
画像を重ねあわせる枚数を減らしてください。

・スタック限界到達エラー
シンボルの入れ子の数が8以上になると再生ができなくなります。仕様です。
このエラーはAdobe Device Centralでも確認することができます。

・1フレーム目にASを書くと正常に実行されない場合がある
メインのタイムラインの1フレーム目に記述してあるAS(gotoAndStop()等のタイムラインコントロール系)を無視して、2フレーム目を再生してしまう場合がある。
ファイルによっては1フレーム目に書いてあっても正常に実行される場合もあり、どういった場合に発生するかは未検証。
この現象はiモードHTMLシミュレータ等のエミュレータでも確認できる。
対応策
 ・1フレーム目は空けておき、2フレーム目からASを記述する(推奨)
 ・空白のキーフレームだった場合、何かシェイプを置くことで正常に実行される場合がある

・画像が表示できない、取得できない
プログレッシブJPEGは機種により表示ができないため、Flash内には配置しないようにします。

flashlite1.1でのデジタル時計の作り方(1)

(0)携帯用のパブリッシュ設定をする
flashclock01-a
携帯で再生をするためには、PCとは違う設定でパブリッシュ(swfを保存)する必要があります。
ここでは、サイズを「240x320px」パブリッシュ設定を「Flash Lite 1.1」に設定します。

(1)アクションをコピペする
fscommand2という関数を使うと、携帯の時計から数字を持ってきてflash内で使うことができます。
フレームを選択したら、「アクション」タブに以下のスクリプトをコピー&ペーストします。

hour = fscommand2(“GetTimeHours”);
minutes = fscommand2(“GetTimeMinutes”);

☆解説
アクションスクリプトの「=」は、「代入」を意味しています。
数学で習った、「xに2を代入する」の「代入」です。
この場合、左側(hour、minutes)に、それぞれ携帯の時計で使っている数字を代入しています。

また、アクションスクリプトでは左側の文字のことを「変数」と呼びます。

(2)ダイナミックテキストで文字を配置する

まず、テキストツールを使って適当なテキストを作成します。
プロパティの[変数:]と書いてある枠の中に、先ほどアクションで使った変数(hour、minutes)を入れます。

その後、「プロパティ」左上の「静止テキスト」を「ダイナミックテキスト」に変更すると、変数に代入された数字がそのテキストの枠の中に表示されるようになります。

fscommand2は携帯専用の書き方のため、パブリッシュしたファイルをそのままパソコンで見ても時間が正しく表示されませんが、それが正常です。
表示の確認には、docomoのimodeHTMLシミュレーターか、Adobe Device Centralなどのエミュレーターを使いましょう。

ここまでのサンプルデータはこちらからダウンロードができます。