FlashLite1.1やる人が初日に覚えるといいことクイズ

2011-12-05 (月) 15:24
flash lite

Flashの経験がない状態でFlashやりなさいといわれた時に、最初の1,2時間ぐらいで覚えたほうがいいFlashの基本事項をクイズ形式にしてみました。
※主にソーシャルゲーム用FlashLite1.1開発する人 with 経験者の先輩の手ほどきを受けながらというイメージです。
間違いあったらすいません。

画面にならぶパネルのうち、名称を覚えておくべきパネルは、オブジェクトを置く舞台となるステージ、コマ割りのようにアニメーションを設定するためのタイムライン、選択／描画／塗り／テキスト等のツールが並ぶツールバー、選択したオブジェクトの詳細情報を確認・設定できるプロパティパネル、ActionScriptを記述するアクションパネル、作成したシンボル（※後述）を一覧できるライブラリパネルです。

作ったFlashを実際にどう動くかをプレビューすることをパブリッシュするといいます。プレビューのショートカットは「Ctrl(Macはcommand) + Enter」です。パブリッシュすると、作業フォルダ（.flaファイルと同じ場所）SWFファイルができるという認識をしましょう。

タイムラインパネルは、Flashをパブリッシュプレビューすると、左から右方向へ再生されます。

横方向に並んでいる数字はフレーム数を表し、1秒間に12フレーム進むように設定されている場合は、1秒かけて12フレームまで移動します。

タイムラインは区切りを付けない限り、アニメーションしません。区切りをつける行為をキーフレーム化するといいます。

フレームを伸ばす
フレームを削除する
キーフレームを作成する
キーフレームを削除する

上の各行為をちゃんと理解しましょう。ショートカットキーもありますが、タイムライン上で右クリックすれば全て設定できますので、まずはこのやり方を覚えましょう。

タイムラインのフレームをドラッグして伸ばしたり区切ったりすることもできます。このとき、フレームの選択のしかたに癖があるので注意して慣れましょう。

タイムラインは、最終フレームまで再生されると、１フレーム目に戻り、延々と再生されます。これを止めたい場合はアクションパネルにActionScriptを書きます。例えば、指定のフレームに到達したら再生を止めたい場合はそのフレーム（キーフレーム）にstop();と記述します。

タイムラインパネルの縦方向はレイヤーを表します。Photoshopと同じく、上のレイヤーの方が、表示の重なりは上になります。

例えば人があるくアニメーションを作る時、Flashでは頭／手／足／胴／腰という感じにパーツ化して、各パーツに対して個別にアニメーション設定をするのが一般的です。
このパーツ化することをシンボル化するといいます。

シンボルの種類にはボタンシンボルとムービークリップシンボルとグラフィックシンボルいう３種類があります。
現在のPC用Flashではボタンシンボルは使いませんが、携帯用FlashLite1.1では使います。

シンボル化するには、ステージ上のシンボル化したいオブジェクトを選択した状態で修正>シンボルに変換…（ショートカットキーのF8キー）、または右クリックして「シンボルに変換..」できます。

シンボル化を意識せずに、トゥイーンアニメーション設定をすると、Flashが勝手にシンボル化してくれるようになっていますが、シンボル名が「トゥイーン１」といったふうに分かりにくいシンボルができるので避けましょう。

※新規に空っぽのシンボルを作って、その中にオブジェクトを描いていくアプローチもあります。

シンボル化すると、ライブラリウィンドウにシンボルとして登録され、表示されます。シンボルというのは、おおもとの概念だとイメージしましょう。例えばDogというシンボルをステージ上に３個作ることができますが、シンボルから生成したこの３つを、Dogシンボルのインスタンスと呼びます。この３個のインスタンスを個別に操作する必要があるので、それぞれを選択した状態でプロパティパネルからインスタンス名を設定します。

シンボルの中にも時間軸、つまりタイムラインが存在します。例えば、「部屋」をステージ上に作ったとして、そのステージ上に「時計」シンボルを用意し、その時計シンボルの中のタイムライン上で針を延々と動かせる、といった風に使います。
このように、シンボルの中に置かれたシンボルの内部でアニメーションが動いている、さらにそれが入れ子構造になって複雑なアニメーションを作ることができます。この入れ子構造を「シンボルの入れ子構造」といい、この入れ子構造が理解できればもうFlasherです。

シンボルの中のタイムラインを「時計シンボルのタイムライン」と呼び、対して、一番上にあたる「部屋」のタイムラインをルートのタイムラインと呼ぶのが通例です。

自分がシンボルの中身を見ているのか、ルートを見ているのかを確認するには、画面上部に表示されている階層表示を見ましょう。

アニメーションの設定は、タイムラインパネル上で区切り（キーフレーム）を作ることで実現できます。

１フレームごとにキーフレームを作って「コマ撮りアニメ」のようなこともできますが、Flashにはもう一つのアニメーションがあります。始点と終点を決めれば、中間の移動はFlashが自動的に補完してくれる「トゥイーンアニメーション」と呼ばれる手法です。

トゥイーンアニメーションを設定する場合も、タイムライン上で右クリックすれば設定できます。

滑らかに止まる演出をする場合は、プロパティパネルでトゥイーンのイージング設定してみましょう。

トゥイーンさせる時は、動かしたいものだけが１枚のレイヤー上に置いてあるようにしましょう。（他の物体が同じレイヤー上にあるとおかしくなります。）

ActionScriptについて

アクションパネルに記述します。（ショートカットキーはF9です）
行末に「;」を記述してもしなくてもOKですが、一応書くようにしましょう。
コメントアウト（SWF生成時には影響しない記述。備忘録やメモとして活用）する場合は「//１行コメント」や「/*複数行（改行）コメント*/」を使います。
スクリプトはタイムラインのフレームに書くフレームスクリプトと、ボタンに直接書くボタンスクリプトがあります。

フレームスクリプトを記述したフレームは、タイムライン上でaと表示されます。スクリプトだけを書くレイヤーを用意するのが通例です。

とりあえず覚えておいた方がいいコードとして


//タイムラインを止める
stop();


//指定のフレームに移動して、そこから再生
gotoAndPlay(5);


//シンボルに対して命令する
tellTarget("対象のインスタンス名"){
    //例：半透明にする
    _alpha = 50;
}


//ボタンスクリプト（エンターボタンを押すと実行）
on(keyPress "<enter>"){
    //例：5フレーム目に移動
	gotoAndPlay(5);
}
//ボタンスクリプト（携帯の５キーを押すと実行）
on(keyPress "5"){
    //例：5フレーム目に移動
	gotoAndPlay(5);
}


//重要！例：Flash内で定義した変数（hensuu）を確認する
trace(hensuu);

を覚えましょう。

シンボルの中からルートを操作したい時は、tellTarget(“/”){ （以下略）と指定します。

覚えておきたい基本操作

ステージ上で、「Ctrl(Macはcommand)+Shift+拡大したい場所をドラッグ」でその部分だけ拡大表示できます。
ステージ上のものをCtrl(Macはcommand)+Xでカットですが、ペーストはCtrl(Macはcommand)+Shift+Vで同位置ペーストです。なので、レイヤー分けを目的にオブジェクトを別のレイヤーにカット＆ペーストするときはShiftペーストです。
ビットマップ画像を小数点の位置にレイアウトしてしまうと画像が荒れます。ただし、画像にスムージングをかければ荒れないようにできます
パネルを誤って閉じたり、ドラッグして変な場所に移動してしまったのを戻したい。そういう時は「ウィンドウ＞ワークスペース＞初期設定」で、パネルのレイアウトを元に戻せます。

ステップアップの為に：携帯FlashLite初心者にオススメのサンプルソース
この携帯ゲームのソースを改造するのはいかがでしょう？
http://thinkit.co.jp/article/144/4/
制限時間内に画面上にランダムで表示される数字をクリックし、その点数を競うゲームですが、
・時間制限タイマーを作る
・ボタンイベント（ボタンを押したら次の画面に移動）
・基本的なスクリプト
が学べます。
例えば数字を押させるのではなく、エンターキーを押させるだけにすれば、モバゲーにもあるようなタイミングゲームができます。

参考リンク
以下２つは鉄板記事

基本操作を網羅
「Flash Lite 1.1 の基本が分かる8つのポイント – 1ka2ka.com」

あわせておすすめ。ActionScriptを書き出したらきちんと全部読みましょう。
「これだけは知っておきたい「FlashLite入門」 || _level0.KAYAC」

余力あれば以下を読み進めましょう

Flashで使う画像は何形式にすればいいの？
「Flash Lite 1.1 のファイルサイズ(容量)を節約する９の方法」

「知らないと損をするよ！携帯Flash軽量化メモ〜デザイン編〜 | _level0.KAYAC」

ここに気が回ればもう完璧、どんどん作ってー。
「携帯Flash　さらなる軽量化 | _level0.KAYAC」

最後に：
ざざっと書いたので「FlashLite1.1のはActionScriptじゃねーよ」とか、そういう細部は無視してください。
時間かけてちゃんと勉強したい人はやっぱり書籍がおすすめです。

FLASH Professional CS5　スーパートレーニング