画面にならぶパネルのうち、名称を覚えておくべきパネルは、オブジェクトを置く舞台となるステージ、コマ割りのようにアニメーションを設定するためのタイムライン、選択／描画／塗り／テキスト等のツールが並ぶツールバー、選択したオブジェクトの詳細情報を確認・設定できるプロパティパネル、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ペーストです。
• ビットマップ画像を小数点の位置にレイアウトしてしまうと画像が荒れます。ただし、画像にスムージングをかければ荒れないようにできます
• パネルを誤って閉じたり、ドラッグして変な場所に移動してしまったのを戻したい。そういう時は「ウィンドウ＞ワークスペース＞初期設定」で、パネルのレイアウトを元に戻せます。

基本操作を網羅
「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　スーパートレーニング

（上から最近のお仕事）

ヤン極志（携帯ソーシャルゲーム）

http://nijibox.jp/yngk/
今年7月にmobageとgreeでリリースした「ヤンキー＋三国志」なカードゲーム。Flashを担当。
携帯ソーシャルゲームに最適なアニメーション演出からロジック実装、軽量化の工夫（＋超大量の作業）など、FlashLite1.1のことを広範囲に考えて作成しました。
携帯ソーシャルのFlashは、ゲームをインストールしたてのユーザーさんが「おっ！」って感じでパッと見で興味を持てる掴みと、以降は何度も繰り返してみることになる邪魔な存在になってしまうこととのジレンマを、気持ちのいいボタンスキップでストレスを減らしていく、そんなことを考えて作ってました。
この「ヤン極志」はじめ、そこからの横展開でできたゲーム「妖女大戦（ようじょたいせん）」と「レジェンドオブオーディン」もgree,mobageで公開中。

戦争ウォーズ（Yahoo!モバゲー）

http://yahoo-mbga.jp/game/12003225/detail
コミカルなドット絵の兵器ユニットをユニットコスト（10ポイント）を使ってユニット編成して、他ユーザーのユニットと戦ってエリア制圧していくPC用簡単タクティクスゲーム。
兵士から爆撃機まで、全８種類のユニットにはそれぞれ相性があるので、一概に強いユニット構成というのはなく、相手に応じた編成で勝ち進んでいくところにゲーム性があります。
このプロジェクトは企画とFlashモック作成をした状態で、僕はヤン極志に注力することになったので、社内メンバーさんといつもお世話になっている外部のFlasherさんに引き継がせてもらって、2011年8月リリース。そこから運用に関わらせてもらって現在も上り調子で公開中です。
下の「おしゃれ泥棒」同様、チュートリアルや画面上での説明やキャンペーン案内、操作導線等、企画〜操作の全フェーズでユーザーが迷わないよう案内することの大切さを学びました。

おしゃれ泥棒（Yahoo!モバゲー）

http://yahoo-mbga.jp/game/12003250/detail
去年7月、ひょんなことから企画制作することになった僕がはじめて携わったソーシャルゲーム。
まさか30過ぎたオッサンFlasherが作ったとは思えないであろう”女性向け洋服コレクションゲーム”ですが、そのゲーム内容は「他人の洋服をこっそり借り、相手にバレずに一定時間をやりすごせるとゲーム内通貨が稼げる」という、なぜかバトルゲーム。
Flashを作ってくれたのは、なんとClockmaker池田さん（Clockmakerブログでもバナー貼ってくださってました）なので、外見はカワイイ感じのゲームですが、裏は超絶AS実装。
去年10月にリリースしてからは矢継ぎ早にキャンペーンをしたり、洋服や機能を追加したり、問い合わせ対応、バナー作りまで、「リリースしてからが勝負」といわれるソーシャルゲームですが、それを実感いたしました。リリースから1年以上経ちましたが今も育ち続けているYahoo!モバゲーのゲーム。

これから

以上ソーシャルゲームを中心に1年やってきました。
ソーシャルゲームに携わり、いろいろ得るものもありましたが、一方で、新しいことを自分で0から勉強しつつ全部作ることへの憧れが再燃してきたこともあり、心機一転10月からはスマートフォンアプリの開発をしています。
CoronaSDKはじめました。CoronaSDK開発のレポートも含め、スマホ系のあれこれは、弊社ブログ「ニジボスマホ部」で書いています。

あと、CS3の時の.flaファイルをCS5で開いてパブリッシュしたら、フォント埋め込みのダイナミックフォントが一切表示されなくて焦った。
textField.embedFonts = true;
をコメントアウトすれば動くので、理由を探ったところ ActionScript 上の TextFormat インスタンスでのフォント指定文字列がCS5だと変わっていた。（※どうやらCS4から変わったらしい）
大重さんの「フォントの英語名を調べる – ActionScript 3.0入門ノート CS4」のエントリを見て英語名を調べて指定し直したところ、きちんとテキストが表示されるようになった。
※実は変更前も英語指定だったんだけど、なんか違う英語表記に変わっていた。

if(hoge){
panel.btn1.addEventListener(MouseEvent.CLICK, mouseDownHandler);
}else{
panel.gotoAndStop(2);
panel.btn2.addEventListener(MouseEvent.CLICK, mouseDownHandler);
}

要はフレーム移動直後に、その移動先フレームにのみ存在するボタンに対して addEventListener するケース。

FlashIDE上でのパブリッシュ設定が FlashPlayer10 の時は動くのに、FlashPlayer9 設定に切り替えると null エラーになる。

ビックリした。

ちなみに両フレームともにまたがるように配置されたボタンなら大丈夫、あくまでgotoAndStop移動後に初登場のオブジェクトに対してイベント付けた時に起こる。

link: flashゲーム作成記 | Box2Dを簡単に扱えるようにするGravity2D

ということで、5年前くらいの AirMac Express、僕みたいに突然電源入らなくなることがあるかもです。

アップルコンピュータ AirMac Express ベースステーション with Air Tunes MB321J/A

往路は富士宮ルート、復路は御殿場ルート。

会社の富士登山経験者のご意見やウェブサイトを見たりして、かつできるだけ持ち物を少なくしようと心がけて現在リュックに入っている持ち物をリストアップ。

• ハンドタオル2枚
• ヒートテックの長袖シャツ
• ヒートテックのタイツ
• 薄手のダウンジャケット
• 防水のナイロンジャケット
• パンツ1枚
• 靴下2枚（重ねて履く予定）
• 軍手1セット
• マスク
• ハンカチ2枚
• ヘッドライト
• バンドエイド５枚
• ウェットティッシュ10枚入り
• 日焼け止め
• ジップロック2枚
• スーパーのレジ袋2枚
• 歯ブラシ
• 糸ようじ1本
• ボールペン
• iPhone
• docomo携帯
• 水1.5リットル
• クリーム玄米ブラン3袋
• デジカメ(FinePix F10)
• 1dayコンタクト2セット

当日着ているもの

• 半袖シャツ
• 防水ナイロンパンツ
• パンツ
• 靴下
• ブーツ
• ハーフパンツ
• ブリーズライト（鼻のやつ）

天気とこないだギックリ腰になったのが不安。

ほぼCMみたいなオープニングの動画のあと、コンテンツが始まります。アンジェラベイビーさんの縦長全身写真レイヤーの上に、コンテンツレイヤーが重なっている二層構造になっていますが、手前と奥のレイヤーでスクロール移動速度を変えることで奥行き感・移動の気持ち良さを表現。

余談だけど、髪のCMで髪が奇麗すぎて艶が波紋のようになる映像、男の僕からするとCGすぎてシュール。そういや誇大広告を避けるためでしょうか、洗顔フォームCMの汚れが毛穴から追い出されるイメージアニメで、毎回ちょっとだけ汚れが残るのが、いつも、いつも、ずっと、ずっと気になって生きてきました。

このサイト（yossyさんのサンプルだったっけ？）の見せ方も同様に二層のレイヤーの移動量を変える事で奥行き表現。

ということで

• 奥行きに意味を持たせる使い方（奥に常時表示させたいものを置くとか）
• 手前と奥の移動量の違いによる演出（浅めor深め）
• 平行に重なってるんじゃなくって、傾斜して重なってたらどんなだろう。気持ち悪いかなぁ
• 二層以上重ねて面白い事できるかな

みたいなことを考える機会が持てました。

ヴィダルサスーン｜FASHION, MUSIC, VIDAL SASSOON

via jehmlich + matthes mikysec: racer

場所とモノヅクリのスキルがあるとこういうことができる。
※ちなみに運転をブラウザ側で体験させるサイトもありましたね。

場所がなくてもこういうことができる。

どちらもウェブであまねく多くの人々に！ではなく、うちうちで楽しむために作られていて、Web上では「才能の無駄遣い」という褒められ方をするのだけど、今の時代、こういうことが個人レベルでできるようになってきてるので、ほんとにワクワクする。ドムぐらいなら僕でも動かせる。

ド派手な演出でダンスミュージックを鳴らす海外アーティスト PLASTICMAN 氏のサイト。文字の表示のさせかたが参考になりました。

Flash的にいうと、一連の文章であっても行ごとに別テキストフィールドに流し込むアプローチだとしましょう。
いろんな場所で同時多発的に一斉に左から右に流れ出るテキストってのは以下の理由でナイスだなと。

• 複数行の場合、折り返しの処理で勝手に文字送りされてカッコ悪い場合が起こるけど、このやり方ならそれは起こらない。更新のないテキストであればこういうアプローチはありだな。
• 全部表示するまでの時間も短くてすむ。

もちろん演出なしでとっとと出すのが正解って場合が多いですが、カッコ良くしたい時もあるので。テキスト選択できた方がいいなとは思いましたけど、この表示させ方、MATRIXみたいで「おっ！」てなりますよね。

plasticman.LIVE