Features

今回の特集は、CSS Niteの主催、 株式会社スイッチの鷹野雅弘氏とのコラボレーション企画、FlashのTips特集です！
本特集は、実際にプロとしてWeb業界の前線で活躍しているクリエイターの方々がFlashの基礎から一歩進んだ「達人」のスキルを紹介するFlashの解説書 『1ランク上の技を身につけるFlashの強化書』（毎日コミュニケーションズ）の中から、使える技をご紹介。また、特集の最後には本のプレゼントのお知らせもありますので、Webクリエイターのみなさんは必見です!!

それでは、鷹野さん、よろしくお願いします！

こんにちは、スイッチの鷹野と申します。　1月の末に毎日コミュニケーションズから『1ランク上の技を身につけるFlashの強化書』というムックが発売になりました。
前半（1章から3章）はこれからFlashをはじめようと思っている方、再挑戦しようと思っている方向けに、アニメーションやActionScriptの基本を。後半（4章-5章）は、さらにステップアップしていきたい方向けに、実例や実用度の高いサンプルをご用意しています。さらに、タナカミノル、中村洋基、城戸雅行などの著名なクリエイターのインタビューや作品紹介も掲載しています。
今回は、ロフトワークの登録クリエイターでもある、伊藤　紀之（NORI）さんに制作・執筆いただいた『背景がスクロールするアニメーション』（4章、pp.94-97に掲載）を、連動企画として抜粋いたします。

FlashはActionScript 3.0が出てきたりと、スクリプトに偏りがちな感じもしますが、タイムラインのアニメーションと、簡単なスクリプトで、楽しくてインタラクティブなムービーを作成することができる好例として参考にしていただければと思います。
ぜひ、書店で見かけたら、ムックも手にとってみてくださいね。

サンプルは『マカロニアンモナイト／ギャラリー「デジタル・モビール」』で「楽しいドライブ」という名で公開されています。
http://ammo.jp/gallery/mobile/top.html

キャラクターが乗ったクルマが野原を走り、山を登り、池を泳ぎ（？）、背景が左から右へスクロールします。そして背景の左端は右端に繋がっており、延々とループする。キャラクターをクリックするとラッパを吹きます。
この作品は誰でも調整しやすいように、フレーム主体でクルマの動くアニメーションを作成し、後からスクリプトで背景が動くようにしています。

走っているクルマの動きを演出するために、「car1」ムービークリップでは、2フレームずつのフレームアニメーションを設定します。
3フレーム目と4フレーム目では、若干ですが車高が下がるように設定。ムービークリップはループするので、タイムラインに配置したクルマはずっと走っているような動きになります。

クルマが走っている限り、タイヤはずっと回っている必要があります。そこで、タイヤを別シンボルとして作成し、回転のアニメーションを設定します。

「car1」ムービークリップに配置後、［ループ］の設定を行います。

走る場所は、盛り上がった山や沈み込む池もあるので、クルマは上下するはずです。そこで、モーションガイド（青い線）を利用したトゥイーンでクルマが移動するアニメーションを作成します。
フレーム主体のアニメーションであれば、アクションスクリプトの習熟度とは無関係に気に入った動きを作りこめて純粋に動きだけに注意を払えばよいのです。
何度もプレビューして動きを確認し、違和感のないように微調整を行いましょう。

「car_mc」では、2フレーム目以降で、ラッパを吹くアニメーションが描画されています。

キャラクターをクリックするとステージの動きとは無関係に、ムービークリップを2フレーム目から再生してラッパを吹くように、「car_mc」の「as」レイヤーのフレーム1にアクションを記述します。

stop();
this.onMouseDown = function() {
//クリックされたらラッパを吹く
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
gotoAndPlay(2);
}
};


クリックの対象領域を広げるため「ヒット領域」レイヤーには、アルファ「0%」に設定した楕円形の「塗り（黄土色に見える部分）」を配置します。

//しぶきを非表示
car_mc.shibuki_mc._visible = false

水しぶきは、アクションで制御できるようにムービークリップに変換し、「shibuki_mc」というインスタンス名を付けておきます。メインのタイムライン「as」レイヤーの「フレーム1」で、水しぶきが表示されないようにアクションを記述します。

//しぶきを表示
car_mc.shibuki_mc._visible = true

クルマが池にかかる「フレーム49」で、水しぶきを表示するようにアクションを記述します。
「フレーム49」から「フレーム86」まで、「comment」レイヤーにはサウンドを「ストリーミング」として埋め込んでいます。

//しぶきを非表示
car_mc.shibuki_mc._visible = false

クルマが池から離れる「フレーム84」で、水しぶきが再び非表示になるようにアクションを記述します。

背景は右端へ消えると左端から出現します。Flashのアニメーションは最後のフレームの次に１フレーム目が自動的に来るので、最初と最後のフレームの背景がつながるようにします。背景がループするためにはステージ幅の2倍必要です。黄色い道がないところはステージに表示されません。

ステージは背景画像を覗く窓のようなもので、小さくしても背景画像はステージの外に存在します。
画面の中央に常にクルマが見えるためにはFlashを覗く窓（ステージ）がクルマを追いかければいいのです。

今回は、クルマのムービークリップ（car_mc）が中央になるように_root（ステージ）のX座標を計算し表示しています。そのためクルマが移動すれば、それにつれてステージも移動します。
キャラクターのインタラクションはステージの移動とは無関係なので、ボタンなどのシンプルな方法が利用できます。


this.onEnterFrame = function() {
_root._x = (this.car_mc._x - 380) * (-1);
};


移動する「car_mc」がステージの中央に表示され続ける（＝ステージがスクロールする）スクリプトです。
「-380」は、ステージ横幅600から計算した値です。「car_mc」が左右の中央になるように指定します。

自然にループしているか、池に入ったときに水しぶきが出るか、クリックするとラッパを吹くかなど、細かくチェックしましょう。

FlashアニメーションのTips特集は、いかがでしたか？Flashが初めての人から、基本からのスキルアップを目指すクリエイターのみなさんへ、一流のクリエイターからのとっておきTipsが詰まった1冊『1ランク上の技を身につけるFlashの強化書』。 今回、特集と連動して10名の方に、この本をプレゼントします。みなさん、是非奮ってご応募下さい！ プレゼント応募期間：2007年2月19日（火）～2008年3月3日（月） 『1ランク上の技を身につけるFlashの強化書』　プレゼントへの応募はこちら≫