みなさんこんにちは、丸山です。
先日ケータイ版Flashの作成時に容量削減するには？という内容についてご紹介しましたが、本日はその続編です。
前回は基本的なチェックポイントでしたが、今回は覚えておいて損はない、ActionScriptのチェックポイントをご紹介します。
■前提
「ケータイ版Flashのファイルサイズは100KBに照準を合わせる」
ケータイのキャリア、バージョンによってもう少し上の容量でも良いのですが、対応範囲を拡げて考えた場合、100KBが適切になるかと思います。
■チェックポイント
「FlashLiteは、true=1, false=0 という処理ができる」というポイントです。要するに、数値として扱うことにより、数値演算してしまう、という考え方がポイントになります。
以下、代表的な例になります。
(例) ”&&”(AND演算子)の使い方を考える
例えば、if( A && B && C && D )という条件を指定するときは、以下のように記述します。
if ( A + B + C + D = = 4 )
if( A && B && C && D )という条件の意味は、「AかつBかつCかつD」という意味なので、true=1 であることを利用すれば、この条件は加算して 4 になれば真である、と判別することができます。
実は、この”&&”はスクリプト処理の中ではちょっと容量が大きくなってしまうみたいなのです。
空のFlashファイルに以下のコードを書くことで容量チェックをしてみると、以下のようになります。
A = B = C = D = 1;
if( A && B && C && D ) { trace("hello"); }
これは、160Bytesとなりました。
A = B = C = D = 1;
if( A + B + C + D = = 4 ) { trace("hello"); }
こちらは、148Bytesとなりました。
わずかながら、数式計算した方が容量は軽くなっていますね。
“&&”が増えれば増えるほど、容量が増えるため、この差が大きくなります。Flashで条件分岐する処理は画面数が多かったり、何かの計算や当たり判定をするときに使うことが多いので気にしながら作っていくと良いと思います。
地味なことですが、容量削りの対策としては、前回のチェックポイントと合わせて、こういったスクリプトのチェックも入れていくことで、効率的に容量削減ができます。
みなさんこんにちは、丸山です。
FlashTips集、今日のお題は「ケータイ版Flash作成時の軽量化」についてご紹介します。
モバイルサイトのFlashというと、小さい画面の中でダイナミックな演出ができるので、訴求力満点の表現としてよく使われますよね。「ガラケーでここまで…」と驚くことも多いです。
実はこの開発の舞台裏には色々な苦労があるのですが、その中でもよくあるパターンとしてswfファイルの容量を100KB以下に抑える、という話があります。
ムービーの長さや使用する画像によって容量が跳ね上がってしまって、泣く泣く調整する羽目になった…という経験をされた方もいらっしゃるかと思います。
基本的なこともたくさんありますが、以下に簡単なチェックポイントをお知らせします。
■1 オブジェクトはインスタンス化
一回一回オブジェクトを作成していては容量が増える一方です。ムービークリップなど、インスタンス化して再利用することでファイルサイズは大幅に減らすことができます。
また、ムービークリップなどは入れ子で作成していくことも効果的です。
■2 インスタンスを色変え
同じ形状・処理のオブジェクトで色を変えたい場合は、インスタンスの色替え機能で対応できます。
新たなインスタンスを配置せずに流用できるなら、その方がおすすめです。
■3 グループ化
文字などは、分解してグループ化しておいた方が軽くなる場合が多いです。
描画オブジェクトのときと比較すると僅かな差ですが、1ファイルで見ると、数KBの単位で容量圧縮ができます。馬鹿に出来ませんね…。
■4 微妙な形のオブジェクトは整える
フォントをアウトライン化した際など、ちょっと曲線になっている場合は直線化した方が余分なパスが減って軽くなったりします。
作業も大変な割に、少ししか効果が得られなかったりします…。
■5 スクリプトコードは短く
当たり前といえば、当たり前ですが…。特に変数名やインスタンス名などは、アクションスクリプトコード内では何回も出てきたりします。
このコードを書くだけでファイルサイズを増やすことは避けたいので、できるだけ短く記述しましょう。
コメントなども、短くすることが大事です。
■6 パブリッシュ前にtrace文を削除
Flashのパブリッシュ機能で「Traceアクションを省略」がありますが、これを実施しても良いですが、手作業で trace コードを消してあげると、上記のようにコード自体がなくせるので、容量が軽くなります。
納品や本アップ前など、最終のタイミングでやるのが効果的だと思います。
ここに挙げたのは基本的なことが多いですが、ケータイ版Flashを作っているときにハマってしまった場合など、チェックしてみてください。
※画像はサンプルイメージです。
みなさんこんにちは、丸山です。
今日はテクニカルなこととして、Flashに関することを書いてみようと思います。
Flashは見た目にインパクトのあるムービーやアニメーションが作れるアプリケーションとして有名ですが、以前作ったFlashゲームのときに学んだことがありましたのでご紹介します。
軽いFlashデータを作りたい、と考えたときに、
1) ベクターやシンボルを軽くする
2) スクリプト処理を軽く＆高速化する
といった案があります。
1はデザインやオブジェクトの作り方次第になるため割愛させていただきますが、ハマりどころがあるのが2です。
今回は、初歩的ですがハマりがちなポイントを挙げてみます。
ムービークリップをタイムライン制御せずに、スクリプト制御で動かす場合のイベントハンドラとして onEnterFrame ハンドラがあります。
これをムービームリップに定義しておくと、ステージ上に存在している限り、フレームを読み込む毎にずっとその中のイベントが発生し続けます。
onEnterFrameが複数あったり、イベント中に重い処理があるとメモリが浪費されたり、CPUパワーを使ってしまったり、など案外とマシンパフォーマンス面での問題が起こります。
1回動かしたいだけなのに、作りによっては何回も処理を重複して走らせていたり、ほったらかしにしてずっと無駄な処理が走ってる…なんてこともあります。
回避策としては、
myMC.onEnterFrame = function()
{
if( 止めたい条件 )
{
delete this.onEnterFrame;
}
else
{
// 処理
}
};
や
function myfunction()
{
delete myMC.onEnterFrame;
}
と記述することで、処理が止められます。
AS2.0まではこれでOKですが、AS3.0の場合はちょっと違って、以下のようになりますのでご注意ください。
myMC.addEventListener(Event.ENTER_FRAME,myfunction);
function myfunction(eventObj:Event){
if( 止めたい条件 ){
myMC.removeEventListener(Event.ENTER_FRAME,myfunction);
}else{
// 処理
}
}
普段何気なく EnterFrame を使っている方は、意識してみていただけるといいかもしれません。
インクレイブでもHTML/CSS/JavaScript/PHP…など、さまざまな開発言語を取り扱っていますが、どの言語においても、目立つところ・目立たないところを含め、無駄をなくし、かつ効率的に実装していくことはとても大事ですね。
このブログを購読する
2010.09.13 
