2008.05.31 初心者DAY！3 Step Script と事例祭り

2008.05.31 初心者DAY！3 Step Script と事例祭り [Edit]

最終更新日：2013.07.02

demo1「3 stepで始めるAS3のスクリプト」　野中文雄氏
demo2「職業別バナー事例集」　徳久氏、沖氏、A.e.Suck氏
　＋バナー自慢　宇都宮頼子、笠居トシヒロ、熊谷由美子
demo3「続・ディレクション塾mini～公開直後！アレがデキルまで」　サブリン氏

当日はあいにくの雨にも関わらず、169名の来場者を迎え濃密なデモが繰り広げられました。

追記

2008.6.30: demo3のレポートを公開しました。
2008.6.25: demo1のレポートを公開しました。
2008.6.16: demo2のレポートを公開しました。

demo1:3 stepで始めるAS3のスクリプト

講師：野中文雄
ActionScript 3.0（以下、AS3）というと、特にエンジニアでない方にとっては取っつきにくい印象を持たれることが多いと思います。今回は初心者でもわかるよう、AS3でよく使われる基本的な型を3つご紹介いただきました。

なお、本セミナーをまとめた野中氏の詳しいレジュメは、下記でご覧いただけます。サンプルファイルもダウンロードできます。
http://www.fumiononaka.com/Sample/F-site/FF080531.html

AS3で書くのは面倒か

AS3は以前のバージョンと比べて、書くのが面倒になったといわれる。しかし、一見わずらわしく思えても、AS3の作法にしたがいさえすれば、型どおりの書き方で様々なコードを作成できる。今回はAS3の中でも、もっとも基本的な型を3つ紹介する。

1. インスタンスをつくって表示する

インスタンスをつくるには、そのクラスを確かめて、new演算子(演算記号)でクラス名の特別な関数(コンストラクタ)を呼出す。インスタンスは、ActionScriptにおけるメモリである変数に入れておかないと、あとで扱えない。変数はvar宣言して、変数名のあとにコロン(:)をつけて、インスタンスのクラスを指定する(データ型の指定という)。なお、変数名には、基本的に半角の英数字を使う。

基本その1●インスタンスをつくる

var 変数名:クラス名 = new クラス名(ここにパラメータを入れることもある);

インスタンスをつくっても、まだステージには表示されない。表示するには、タイムラインの子として表示階層(表示リスト)に加える必要がある。使う命令(メソッド)は、addChild()だ。パラメータ(引数)には、表示したいインスタンスを指定する。

基本その2●インスタンスをタイムラインに表示する

addChild(表示したいインスタンス);

スクリプト例■TextFieldインスタンスをつくりステージに配置してテキストの設定
var _txt:TextField = new TextField(); addChild(_txt); _txt.text = "F-site Seminar";

図■フレームアクションを[ムービープレビュー]で確かめる

2. [ライブラリ]からインスタンスをつくる

ムービークリップ(MovieClip)の場合

[ライブラリ]のシンボルからインスタンスをつくりたい場合、シンボルにはデフォルトではクラスがない。[ライブラリ]にあるシンボルを選んで、[リンケージプロパティ]ダイアログボックス([ライブラリ]のオプションポップアップメニューから[リンケージ])で[ActionScriptに書き出し]をチェックしたうえで、[クラス]に任意の名前を入力する(たとえば「Pen」)。[クラス]に指定する名前も、変数と同じく、半角の英数字を用いる。

図■[ライブラリ]のシンボルに[リンケージプロパティ]ダイアログボックスで[クラス]を設定

ひとたび[クラス]が設定できてしまえば、インスタンスをつくってステージに表示する方法は、TextFieldの場合と同じだ。つまり、new演算子でインスタンスをつくり、addChild()メソッドによりタイムラインに加えればよい。

スクリプト例■MovieClipシンボルからインスタンスをタイムラインに配置
var _mc:MovieClip = new Pen(); addChild(_mc); _mc.x = 120; _mc.y = 90;

[リンケージプロパティ]ダイアログボックスで[クラス]を設定した場合、データ型の指定には[基本クラス]のフィールドにデフォルトで記載されているクラスを使う。なお、インスタンスの水平および垂直座標のプロパティは、xとyである。[ムービープレビュー]を確かめると、インスタンスがタイムラインの指定座標に配置される。

サウンドの場合

[ライブラリ]のサウンドを再生する場合、ステージに表示することはないのでaddChild()メソッドは使わない。[リンケージプロパティ]ダイアログボックスで[クラス]を設定するのは、MovieClipシンボルの場合と同じだ(たとえば「MySound」)。サウンドのインスタンスはnew演算子でつくる。そのインスタンスに対してplay()メソッドを呼出せば、サウンドが再生される。

スクリプト例■[ライブラリ]のサウンドを再生
var _sound:Sound = new MySound(); _sound.play();

ビットマップの場合

[ライブラリ]のビットマップをステージに表示するには、MovieClipシンボルの場合よりひと手間加わる。というのは、ビットマップのインスタンスは、addChild()のパラメータに指定できる資格がないからだ。そのため、その資格のあるBitmapインスタンスという容れ物に入れたうえで、タイムラインに配置しなければならない。まず、[リンケージプロパティ]ダイアログボックスで[クラス]を設定したうえで、インスタンスをnew演算子でつくる。

Bitmapインスタンスも、原則どおりnew演算子でつくる。ただし、その中に入れるビットマップのインスタンスを、パラメータとしてコンストラクタの括弧()内に指定する。そして、そのBitmapインスタンスを、addChild()メソッドでタイムラインに配置すればよい。

ビットマップのインスタンスを作成する

new Bitmap(ビットマップのインスタンス)

スクリプト例■[ライブラリ]のビットマップをタイムラインに配置
var myBitmapDataa:BitmapData = new Pen(0, 0); var myBitmap:Bitmap = new Bitmap(myBitmapDataa); addChild(myBitmap); myBitmap.x = 30;

[ライプラリ]で[クラス]を設定したビットマップのインスタンスを作成するとき、ふたつの数値がパラメータとして必要とされる。この値はともに0でよい。[ムービープレビュー]を実行すると、ビットマップがタイムラインに表示される。なお、「ビットマップをダイナミックに配置する」も、併せて参照してほしい。

ここまで、AS3では、new演算子とクラスのコンストラクタによりインスタンスを作成し、(必要があれば)addChild()メソッドでタイムラインに配置するというふたつの基本を確認した。では、ActionScript 2.0（以下、AS2）ではどうだったのか、ポイントとなる命令文(ステートメント)を比較してみよう。

表■AS3とAS2の処理の違い

TextFieldインスタンスを配置
3.0	var _txt:TextField = new TextField(); addChild(_txt);
2.0	var _txt:TextField = createTextField("my_txt", getNextHighestDepth(), 0, 0, 100, 25);
MovieClipシンボルのインスタンスを配置
3.0	var _mc:MovieClip = new Pen(); addChild(_mc);
2.0	var _mc:MovieClip = attachMovie("Pen", "my_mc", getNextHighestDepth());
サウンドの再生
3.0	var _sound:Sound = new MySound();
2.0	var _sound:Sound = new Sound(this); _sound.attachSound("MySound");
ビットマップの配置
3.0	var myBitmapDataa:BitmapData = new Pen(0, 0); var myBitmap:Bitmap = new Bitmap(myBitmapDataa); addChild(myBitmap);
2.0	var myBitmapDataa:BitmapData = BitmapData.loadBitmap("Pen"); var _mc:MovieClip = createEmptyMovieClip("my_mc", getNextHighestDepth()); _mc.attachBitmap(myBitmapDataa, _mc.getNextHighestDepth());

AS2はAS3と比べて一般にステートメント数は少ない傾向があるものの、その分パラメータは煩雑になりがちだ。しかも、呼出すメソッド名とそのターゲットには、はっきりとした決まりがない。

3. 外部ファイルをロードする

つぎに、外部ファイルのロードについて、サンプルをいくつか紹介する。外部MP3サウンドファイルをストリーミング再生する例から始めよう。new演算子でインスタンスをつくり、play()メソッドで再生するという流れは、前掲スクリプト例と同じだ。変わる点は、ふたつある。

[ライブラリ]のサウンドではないので、クラスを設定する必要はない。クラスは、AS3に定義済みのSoundを使う。
外部MP3ファイルをロードするには、Soundインスタンスをターゲットとしてload()メソッドを呼出す。このとき、パラメータには、MP3ファイルのURLを指定する。URLは単なるテキストだが、このURLもnew演算子でインスタンスにしなければならない。クラスはURLRequestで、URLのテキストをパラメータにする。

new URLRequest(URLのテキスト)

スクリプト例■外部MP3サウンドファイルをストリーミング再生する
var _sound:Sound = new Sound(); var myRequest:URLRequest = new URLRequest("sound.mp3"); _sound.load(myRequest); _sound.play();

外部JPEGファイルをロードして、タイムラインに配置するというのも、基本的にMP3ファイルの再生と同じ処理の流れだ。ただし、ふたつ注意すべき点がある。第1に、JPEGファイルをロードするインスタンスは、Loaderクラスで作成する。第2に、インスタンスをタイムラインに表示するには、addChild()メソッドを呼出す必要がある。

外部JPEGファイルをロードするメソッドはload()で、パラメータにはURLを指定したURLRequestインスタンスをつくる、といった点はMP3ファイルの再生と同じである。

スクリプト例■外部JPEGファィルをロードする
var myLoader:Loader = new Loader(); addChild(myLoader); myLoader.x = 30; var myRequest:URLRequest = new URLRequest("PenBitmap.jpg"); myLoader.load(myRequest);

Loaderクラスを使うということ以外は、 MovieClipシンボルのインスタンス配置と、外部MP3ファイルのロードについての知識を組合わせれば、理解できるスクリプトだろう。[ムービープレビュー]を実行すると、外部JPEGファイルがタイムラインの指定座標に配置される。

4. イベントを待受けて処理する

最後に、外部テキストファイルをロードして、タイムラインに表示してみよう。外部テキストファイルを読込むのに用いるのは、URLLoaderクラスだ。すると、つぎのようなフレームアクションで、外部テキストファイル"test.txt"が読込めそうだ。

var myLoader:URLLoader = new URLLoader(); var myRequest:URLRequest = new URLRequest("test.txt"); myLoader.load(myRequest);

確かに、これで外部テキストファィルのロードはできる。しかし、このままでは、タイムラインに表示されない。そして、URLLoaderインスタンスは、addChild()メソッドのパラメータとしての資格がないだけでなく、表示そのものができないのだ。

したがって、タイムラインに表示するには、そのためのTextFieldインスタンスを別途配置し、URLLoaderインスタンスにロードしたテキストをTextFieldのtextプロパティに設定する必要がある。URLLoaderインスタンスに読込まれたテキストは、dataプロパティで取出せる。では、フレームアクションをつぎのように直せばよいだろうか。

var _txt:TextField = new TextField(); addChild(_txt); var myLoader:URLLoader = new URLLoader(); var myRequest:URLRequest = new URLRequest("test.txt"); myLoader.load(myRequest); _txt.text = myLoader.data;

[ムービープレビュー]で試すと、エラーが出る。これは、URLLoaderインスタンスのdataプロパティに、まだテキストが読み込まれていないためだ。外部テキストファイルがロードし終えるまで、TextFieldインスタンスへのテキストの設定は待たなければならない。

データのロードの完了とか、ユーザーがボタンをクリックしたとか、処理の要となるタイミングのことを「イベント」という。AS3では、イベントには関数を登録して処理する。イベントをいわば待受ける関数は、リスナー関数とも呼ばれる。イベントの待受けは、つぎのように行う。

基本その3●イベントを待受けて処理する

インスタンス.addEventListener(イベント, 関数名);
function 関数名(eventObject:イベントのデータ型):void {
　待受けてやりたい処理;
}

外部テキストファイルのロードの完了というイベントを待受けるためには、以下のスクリプトのように、リスナー関数をURLLoaderインスタンスに登録する。addEventListener()メソッドにパラメータとして指定するロード完了のイベントは、[ヘルプ]で調べればEvent.COMPLETEだとわかる。関数名は、変数やクラスの名前と同じく、半角英数字で任意に決めてよい。

関数は一般にfunctionキーワードで定義し、関数名に続けて括弧()を記述する。括弧()内はパラメータを指定する場合もあれば、しないこともある。リスナー関数には、パラメータをひとつ設定する必要がある。コロン(:)に続けて指定するデータ型(Event)は、addEventListener()メソッドのパラメータに指定したイベント(Event.COMPLETE)のクラスと一致させる。

スクリプト例■外部テキストファイルをロードしてタイムラインに配置
var _txt:TextField = new TextField(); addChild(_txt); var myLoader:URLLoader = new URLLoader(); var myRequest:URLRequest = new URLRequest("test.txt"); myLoader.addEventListener(Event.COMPLETE, xSetText); myLoader.load(myRequest); function xSetText(eventObject:Event) { _txt.text = myLoader.data; }

これで、URLLoaderインスタンスに外部テキストファイルがロードし終わると、そのイベントEvent.COMPLETEに登録したリスナー関数が呼出され、関数内に定義した処理が行われる。つまり、読込んだ外部ファイルのテキストが、タイムラインに配置したTextFieldインスタンスのtextプロパティに設定される。

図■URLLoaderインスタンスにロードされた外部ファィルのテキストとがTextFieldに設定

— 以上、3つの型で覚えるAS3入門編でした。AS3の基本的な手順を一度覚えてしまえば、他の様々な動作に応用出来るということがよくわかりますね。まだAS3に取り組んだことのない皆さんも、この機会にぜひチャレンジしてみてください。

demo2:職業別バナー事例集

講師：徳久達彦&沖良矢&A.e.Suck
職業の異なる3人からそれぞれの視点で苦労した事や工夫した点についてお話していただきました。

デザイナー：徳久達彦さん

某携帯サイト誘導バナーを例にバナーを作るときの注意点や制作方法などについて実際の作業手順でお話いただきました。

商品の特徴は下記の５点

モーションセンサー（振ったり、縦横感知機能がある）
タッチセンサー（指でセンサーをなぞって操作できる）
スライダー携帯
3.2インチフルワイドＶＧＡ液晶
5色バリエーション

使える写真を選定
「コピー」､「伝えたい特徴」､「選んだ写真」
これらを素にどう動かすかをイメージする（特徴を伝えるための動きを考える）
ラフの制作（徳久さんの場合はFireworksを使用）
Fireworksのフレームを使い絵コンテを制作。絵コンテの段階で必要な写真加工（切抜きなど）は済ませておく
絵コンテをswfで書き出しFlashで読み込む。急ぐときはこのままシンボル化して制作する
（時間短縮になるが､写真の修正はFireworksに戻る必要がある）
商品なので写真にも気を配り、斜めに配置したときのジャギーはベクターにする事で解消した

出来上がったバナーは写真だけでなく、文字の動きも携帯の特徴を現すなど、見ている人に特徴を印象付けるバナーでした。その他、少ない素材でも動きが出るように工夫した某自動車会社誘導バナーの例も見せていただきました。

オーサリングエンジニア：沖良矢さん

沖氏の発表資料は、下記でご覧いただけます。
http://f-site.org/articles/2008/05/20080531_demo2-oki.zip
※右上のグレイの四角ボタンで送り戻しができます。

Yahoo!などポータルサイトに掲載するバナーには使えるActionScriptが限られていることを説明した上で、今回はActionScriptの制限を受けずに制作したバナーの例をお話いただきました。

女の子を楽しむMy占いサイト『Plumoi（プルモア）』に掲載しているバナーの特徴

外部XMLを読み込むことによって、以下のようなしくみを実現しています。

リンク先、文言を更新できる
アニメーションのパターンを更新できる
表示スピード、タイミングなどを変更できる

基本的に外部リンクで制作しており、更新が容易にできる工夫をした。(表示速度も１行変更するだけで可能な作りとなっている)

また、ディレクションやデザインなど外部関係者との共同作業だったので、いかに“効率よく分業するか”ということにも気を配った。

作る前に決めておきたいこと

ステージサイズ
カラーモード（RGB・CMYK）
フォント
レイヤーやオブジェクトの整理
Flash Playerのバージョン
余裕があればシンボル名も（効率との兼ね合いだが、シンボルの入れ替わりを防げる）

完成したバナーは、こちらよりご覧いただけます。

アニメーター：A.e.Suckさん

容量に苦戦した制作事例を、アニメーターならではのFlashと共にお話いただきました。

バナーの特徴

新春キャンペーンバナー
サイズの極端に異なる２種類を制作
受注から納品まで約２週間
既にポスターがある
プロデューサー、コピーライター、デザイナーとの共同作業

打合せで出たクライアントの要望

春らしいイメージで
ポスターとテイストを合わせる
景品写真は載せられない

クライアントの提案では桜が散るアニメーションだったが、新春ということで桜が咲くバナーを制作。
テンポ良く動かし、咲くイメージを印象付けるために粒を飛ばすなど細部にも工夫を凝らしたラフを制作。
気に入っていただいたが、容量オーバーであることがわかり、動きや粒を減らすなど細かい調整を繰り返し完成。

バナーの動きもさることながら、この日のために制作されたアニメーションも力作とあり、最後まで楽しみながら聞くことができました。

もちよりバナー自慢

個性豊かなバナーを、製作過程で工夫した話を交えて紹介していただきました。

宇都宮さん

［TVO テレビ大阪］The Fishing
［TVO テレビ大阪］世界を魅了したRimpaと若冲
［テレビ東京］TVチャンピオン2

テンポ良く動くテレビ番組サイト誘導バナーが紹介されました。動きだけでなく、番組の内容に合わせたイメージを使うなど様々な工夫がこらされていました。

熊谷さん

［JAL］ICクーポン
［東急リバブル］東急リバブル
［namco］DEATH BY DEGREESレポート誘導
［セブンイレブン］う・カール

クライアントの「春らしく」という要望に答え、“桜が開くとお菓子に変わる”というストーリーのバナーなど、イラストレーターならではの作品が紹介されました。

笠居さん

［SoftBank］「旅する父」篇
［SoftBank］イルカゲーム誘導
映画：スウィーニー・トッドフリート街の悪魔の理髪師
書き下ろし：FPS2008 告知

CMをバナーで流すだけでは面白みが無いと、上映会という設定で制作されたバナーの他、この日のために書き下ろされたバナーも発表されました。
また、今年4年ぶりにFPS(Flash Power Session) が9月13日に大阪で開催されることが発表されました。

demo3：続・ディレクション塾mini～公開直後！アレがデキルまで

講師：サブリン氏
前回に引き続きサブリンさんに、フルフラッシュサイト『LISMO』の制作裏話続編などをディレクター的観点から語っていただきました。

まずは前回のおさらい

資料を作成する際には相手の意向を考慮し、配慮しながら組み上げて行く。
また、相手の属性を重要視する事で効果的な方法を発見できる。
それぞれ相手の属性にあわせたアイテムを用意する。

今回は『JYONGRI』さんタイアップのスクリーンセーバー

前回よりもさらに人が増えた今回。
クライアント1、クライアント2、クライアント3、代理店、アーティスト、アートディレクターなど
様々な立場たちとのやり取りが増えてさらに大変だった。

「今回予算が無いので作らないで下さい」と言われた。　→　これはチャンス!!

新人のタレントさんなので知名度が低い＝売り出したい。
プロジェクトの予算が低い＝自由度が比較的高い。
仕事を『売る』仕事とお金を『生む』仕事がある＝両立させたいが、困難。

今回はWeb制作会社ではなかなかハンドリングの難しい、「タレントさんの扱い」、
「撮影現場での振る舞い」、「ビデオまわりのクオリティー」を売り込みました。

プロモーションビデオの撮影現場に同行させてもらった。
楽屋をお借りしてそこに撮影ブースとハイビジョンカメラを設置して衣装替えの合間に、用意した絵コンテを元に撮影させてもらった。
壁紙用に用意した動画は30数種類作りました。
多様なスクリーンセーバーを提案すると、時計のような物はできないかとクリエイティブディレクターから返ってきた。
最初は時計だけだっが、西暦が加わり10分に1回拡大版のイベントを加えたバージョンになった。
秒はスクリプトで早回しにするのではなく早い動画を用意した。
作業やコストといった所は動画の数が大量にあり加工も大変だったが、「このくらい『できる』事を披露しておけば、実績を作ることが出来、今後の案件で提案も説得しやすくなる。」

ちなみに
次回のタイアップは大物アーティストだと言う話を聞いた。
このタイミングで、この仕事を入れておけば話を通しやすくなる……はずだが、

大物だけに、どこまで提案が通るかわからないんだよね（笑）

お楽しみじゃんけん大会

今回も参加者の方が携わられた本を提供いただきました。たくさんのプレゼントありがとうございました。

オーム社さんより

FLASHアニメーション制作バイブル 3冊

大重美幸さんより

Adobe Flash CS3 詳細！ActionScript 3.0 入門ノート 2冊

むらけんさんより

Flashデザインラボ -プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-2) 1冊

JaGra(「社団法人日本グラフィックサービス工業会」)さんより

JaGra Web講座無料受講権5万円以下の1講座 1名

中垣茂さんより

「FlexBuilder 3 Professional」のライセンス 1名

二次会

今回の二次会は50名オーバーの大宴会！
毎度おなじみ新宿西口石狩川でおこなわれました。
参加者ひとりひとりの自己紹介を交えつつ、Flash談義に花を咲かせました。
三次会以降も適当な人数に分散して宴会はつづきました。

レポート作成: 高杉美紀、五十嵐武志、森聖師
写真: 笠居トシヒロ、AYA、佐々木史織、森聖師

（敬称略）

F-site