FLASH WORKSHOP 1-04　FLASH入門編　〜玉葱の皮を使ってアニメーションを作ろう！〜

前回では、フレームと時間の概念についてお話ししました。

「１つのフレーム」は、ぱらぱら漫画でいう、「１ページ」に該当するもので、タイムラインに沿った「フレームの配置」は、ページをめくる「タイミングを決めること」に該当します。

さて、このぱらぱら漫画ですが、（実際に作ったことのある人は分かると思うのですが）、意外と思った通りにキャラクターや物が動いてくれなくて困ったという経験はなかったでしょうか。

動きをつけるときに、前ページのキャラクターの形をまねつつ、少しずつ足や腕を動かしていく・・・。この作業は余程の上級者でない限り、慣れないと結構難しいです。

そういう事情があるものだから、小学校の頃、ぱらぱら漫画を作るとき、初心者の子は決まってうつし紙と呼ばれるトレーシングペーパー（半透明の紙）を使用していました。こうすることで、前のキャラクターの形を把握しつつ、部分的に動きの変化をつけていけるのです。

実はFLASHでは、このトレーシングペーパーのような機能を搭載しています。

「オニオンスキン」機能と聞いて、ピンとこないでしょうか。オニオンスキンとはまさに、フレームを玉葱の皮のような薄い紙にしてしまうのです。

使い方は簡単で、タイムライン下のオニオンスキンボタンをクリックし、オニオンスキンで透かしたいフレームの範囲をドラッグして引き延ばし、設定してあげるだけです。

ちなみに下のサンプルでは、キャラクターが腕を振り上げる動作をオニオンスキンで表示しています。

このようにオニオンスキン機能とは、よりわかりやすくアニメーションを作成するための便利なツールなのです。

それでは次に、ボールが弾む動きをFLASHで作成しましょう。まずは、フレームを100フレーム作って、１フレーム１フレームに ボールを描画していきます。

・・・・・・と、これではあまりにも膨大な時間と根気が必要になってしまいますよね。

そんな手間を省くために、FLASHにはまだまだたくさんの便利な機能が搭載されています。 

ということで次回は、「シンボル」という仕組みを作った簡単なアニメーションの作成についてレクチャーしていきます。

FLASH WORKSHOP 1-03　FLASH入門編　〜フレームと時間の概念〜

タイムラインとフレーム

まずは下の画面を見て下さい。

 

これはタイムラインと呼ばれる物で、右へ進めば進む程、時間が経過していきます。

ここに、「フレーム」と呼ばれる枠を作っていき、アニメーション等を表示させるタイミングを決定します。

（つまり…私達がよく目にするアニメーションがあのように動いて見えるのは、ぱらぱら漫画のように、いくつもの静止画が連続的に流れているからで、FLASHでは、このフレームを何個も作り、ぱらぱらするタイミングをタイムラインに沿ったフレームの配置で決めていくのです。）

フレームレートについて 

最初に設定するのは、「フレームレート」。１秒間に何フレーム再生されるかを決めます。オーソドックスな数値は１秒間に12フレームで、アニメーションを滑らかにしたい場合は１秒間に24フレーム、36フレームが一般的です。 また、25フレームを設定すると、100フレームで４秒と成るので、音楽とムービーを同期させたい場合に非常に便利です。

↓ちなみにフレームレートの設定場所はタイムライン直下のこの部分。

 

デフォルトでは、 12fps（１秒間に12フレーム進む）となっています。数値を変えたい場合は、ここをクリックして変更します。余程滑らかなアニメーションを作りたい場合でなければ、12fpsにしておく事が無難です。出来上がったFLASHムービーの重さも、フレームレートが高ければその分重たくなります。

フレームを作る 

さて、フレームレートを設定した次にやる事は、実際にタイムライン上にフレーム（枠）を配置していく事です。枠って言われても、何を入れる枠？と思われるかもしれませんが、このフレームの中には、ずばり「表示させたいもの」を入れます。

どうやって枠に表示させたい物を入れるかは…、先ずは 枠を作るところから始めます。枠を作るのは簡単で、

タイムライン上で右クリック＞キーフレームを挿入

 

これで、タイムライン上の好きな場所に好きなだけ枠を作ることができます。

 

 

アニメーションの作成

それでは実際に、「表示させたいもの」を枠の中に入れて、簡単なアニメーションを作ってみましょう。

まずは、「表示させたいもの」を入れたい枠をクリックして、下にあるステージに円ツールで円を描画します。
すると、そのフレームが、グレーに変わるのはずです。これは、フレーム枠の中に何かが入っているという証拠です。

 

それでは次に、その隣のフレームを選択して今度はステージ上に四角描画しましょう。それが終わると次のフレームに円、その次のフレームに四角、その次の次に円…

どんどん、空っぽだったフレームがグレーになるはずです。

最後に、制御＞ムービープレビュー　を実行すると、「今作ったもの」が再生されます。円と四角が交互に表示されるムービーが再生されているでしょうか？

Action Script 3.0の変更点まとめ

「ドラムマシン TR909をFLASHで！　FLASHで音の波形編集が可能になった！！」で書いたpopforgeを使って簡単なテルミンっぽいものを作ってみようと思い、今更ながらAction Script 3.0についてちゃんと理解するためにいろいろ調べた結果のメモとしてAction Script 3.0の変更点の中で特に重要なもの書いておきます。

• Movie Clip にスクリプトが書けない
• イベントの処理の変更
• getURLが使えなくなった代わりにURLRequestとnavigateToURLを使う
• プロパティ名の変更
• クラス定義に関する変更点
• 新しく追加されたSpriteクラス
• リンケージやattachMovieがなくなって代わりにクラスやaddChildを使う 
• 正規表現が使えるようになった！
• XMLのparse（解析）が簡単になった！
• 定数を宣言するconstキーワード

詳しい説明は追記にあります。↓ボタンをクリックしてください。尚この記事のサンプルコードはまだ動作チェックしてません。参考サイトを見て自分なりに書いただけですので動かないかもしれません。

Movie Clip にスクリプトが書けない

AS3.0ではMovieClipインスタンスにスクリプトを書くことができません。AS2.0までのようにMovieClipインスタンスにスクリプトを直接書くことができなくなりました。 AS3.0ではフレームにしかスクリプトを書くことができなくなります。

ウチの会社ではMCに直接スクリプトを書くとどこに書いたか分からなくなるから以前からほとんどのスクリプトをrootのフレームに記述していたた め、個人的にはこの変更はあまり気にならないですが、ボタンをクリックしたらURLに移動するだけのようなスクリプトしか書いていない人は要注意です。

例えば、ボタンをクリックするとURLを開く、以下のようなスクリプトの場合、AS3.0ではエラーになります。

//MovieClipインスタンスに直接記述されたスクリプト
this.onRelease = function() {
        this.getURL("http://www.google.co.jp/","_blank");
};

AS3.0ではこれを以下のように書く必要があります。

//MovieClipインスタンスが配置されたタイムラインのフレームに記述されたスクリプト
this.btnGoogle.onRelease = function() {
       this.getURL("http://www.google.co.jp/","_blank");
};
//MovieClipインスタンスの名前が「btnGoogle」の場合

ただし、イベントに関する扱いも変更されたのでこのスクリプトは正しく動作しません。 詳しくは後述します。

イベントの処理の変更

AS2.0まではonRollOver、onRollOut、onRelease、onReleaseOutside、onClipEvent などのイベントハンドラを利用していましたが、AS3.0ではイベントリスナーを使う必要があります。具体的には addEventListener() を使ってイベントリスナーを登録します。

上記のスクリプトをイベントリスナーを使って記述すると以下のようになります。

 //MovieClipインスタンスが配置されたタイムラインのフレームに記述されたスクリプト
this.btnGoogle.addEventListener(MouseEvent.CLICK, function(e:MouseEvent) {
       this.getURL("http://www.google.co.jp/","_blank");
});
//MovieClipインスタンスの名前が「btnGoogle」の場合

ただし、AS3.0ではgetURLが使えなくなったので、これでもまだこのスクリプトは正しく動作しません。

getURLが使えなくなった代わりにURLRequestとnavigateToURLを使う

AS2.0まではgetURLで簡単にURLの移動ができましたが、AS3.0ではnavigateToURL関数を使う必要があります。しかもこ のnavigateToURLにはURLを文字列として直接渡すことができず、URLRequestクラスを使う必要があります。上記のスクリプトを navigateToURL使って記述すると以下のようになります。

 //MovieClipインスタンスが配置されたタイムラインのフレームに記述されたスクリプト
this.btnGoogle.addEventListener(MouseEvent.CLICK, function(e:MouseEvent) {
       var url:URLRequest = new URLRequest("http://www.google.co.jp/");
       navigateToURL( url, "_blank" );
});
//MovieClipインスタンスの名前が「btnGoogle」の場合

http://weblogs.macromedia.com/akamijo/archives/2006/03/navigatetourl.cfm 

プロパティ名の変更

AS3.0では2.0までのようにプロパティ名の前に「_」（アンダースコア）が付きません。だから「_root」や「_alpha」は「root」「alpha」というように記述しなければなりません。

また、「_xmouse」や「_xscale」は「mouseX」や「scaleX」に名称自体が変更になりました。

変更内容	AS1.0/2.0	AS3.0
「_」がなくなった	_root、_alpha、_height、_parent、_rotation、_visible、_width、_x、_y	root、alpha、height、parent、rotation、visible、width、x、y
名称変更	_xmouse、_xscale、_ymouse、_yscale	mouseX、scaleX、mouseY、scaleY

クラス定義に関する変更点

AS3.0では次のクラスの定義について次の点に注意する必要があります。
以下のURLに詳しく解説されています。
http://weblogs.macromedia.com/akamijo/archives/2005/12/package.cfm

• packageキーワード
  AS3.0では「パッケージ」の中にクラスを定義します。
  http://www.fumiononaka.com/TechNotes/Flash/FN0608005.html
  
• 属性キーワードpublic
  AS3.0では外部からクラスのメソッドにアクセスできるようにするために属性キーワードpublicをclassキーワードの前につける必要があります。
  http://www.fumiononaka.com/TechNotes/Flash/FN0608006.html 
  

新しく追加されたSpriteクラス

AS3.0で追加されたSpriteクラスはMovieClipと同様にグラフィック要素を表示でき、子を持つこともできる DisplayObjectContainerクラスのサブクラスです。MovieClipとほぼ同様のことができますが、タイムラインを持ちません。ア ニメーションをすべてスクリプトで制御する場合やタイムラインを必要としないユーザーインターフェイスなどの用途ではMovieClipではなく Spriteクラスのインスタンスを生成する方が軽いみたいです。MovieClipはSpriteのサブクラスになります。

http://weblogs.macromedia.com/akamijo/archives/2005/11/splite.cfm
http://www.fumiononaka.com/TechNotes/Flash/FN0607002.html

リンケージやattachMovieがなくなって代わりにクラスやaddChildを使う 

スクリプトで生成したSpriteインスタンスやMovieClipインスタンスをステージ上に配置するにはDisplayObjectContainer.addChild()メソッドを使います。また、リンケージ詳しくは以下のサイトを参照してください。

http://www.fumiononaka.com/TechNotes/Flash/FN0607001.html
http://f-site.org/articles/2006/07/07074143.html
http://weblogs.macromedia.com/akamijo/archives/2005/11/splite.cfm

正規表現が使えるようになった！

AS2.0でもこのRegExpクラスを使えばできましたが、やっと標準でサポートされるようになりました。以下のような感じで使えます。

var srcStr:String =  '<a href="http://www.google.co.jp/" target="_blank">Google Japan</a><a href="http://www.yahoo.co.jp/" target="_blank">Yahoo Japan</a>';
//パターンを指定してRegExpのインスタンスを生成します
var regPattern:RegExp = new RegExp('href="[^"]*"','ig');
//matchesに文字列として「href="http://www.google.co.jp/"」と「http://www.yahoo.co.jp/」が格納されます。
var matches:Array = srcStr.match(regPattern);

XMLのparse（解析）が簡単になった！

E4X (ECMAScript for XML)のクラスがサポートされるようになったのでXMLデータの扱いがかなり簡単になりました。以下に簡単なサンプルを書いときます。

var strXML:String = '<work>'+
'<url>http://www.starryworks.co.jp/</url>'+
'<creator type="art director">Koji Kimura</creator>'+
'<creator type="flash developer">Miyako Ueki</creator>+
'</work>;
var objXML:XML = new XML(strXML);
//ノードへのアクセス
trace(objXML.work.url);                                           //http://www.starryworks.co.jp/
//ノードリスト内のへのアクセス
trace(objXML.work.creator[0]);                                //Koji Kimura
//属性へのアクセス
trace(objXML.work.creator[1].@type);                      //flash developer
//条件を指定したノードへのアクセス
trace(objXML.work.creator.(@type=="art director");    //Koji Kimura
//要素の追加
objXML.work.appendChild(<creator>Ryoji Murai</creator>);
//属性の追加
objXML.work.creator[2].@type = "designer";

詳しくは以下のサイトを参考にしてください。

http://weblogs.macromedia.com/akamijo/archives/2006/02/e4x.cfm
http://weblogs.macromedia.com/akamijo/archives/2006/02/xml_1.cfm
http://weblogs.macromedia.com/akamijo/archives/2006/02/xml.cfm

定数を宣言するconstキーワード

AS3.0では定数の定義にconstキーワードを使うようになりました。

この記事を書くにあたって参考にしたサイト

http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/migration.html
http://www.adobe.com/jp/devnet/flash/articles/writing_actionscript.html
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/
http://weblogs.macromedia.com/akamijo/archives/actionscript_30/index.cfm
http://f-site.org/articles/as/as3/
http://www.fumiononaka.com/TechNotes/Flash/index.html#ActionScript3

FLASH WORKSHOP 1-02　FLASH入門編　〜各ツールの使い方〜

FLASHを起動すると画面下側に表示される「プロパティウィンドウ」や、画面左側に表示される「ツールウィンドウ」の中の主なツールについて説明します。

プロパティウィンドウ
画面の下にあるプロパティウィンドウでは、シェイプの幅、高さ、X座標、Y座標や線の色／太さ／種類、塗りの色などが設定できます。

ツールウィンドウ
下記が各ツールの説明となります。 （ツール名の横のカッコはショートカットです。）

矩形ツール(R)、 楕円ツール(O)
これらの使い方はillustratorとほぼ同じです。ステージ上でドラッグして矩形や円を描きます。
illustratorと同様にShiftキーを押しながらドラッグすると真円や正方形を描くことができます。

線ツール(N)、 ペンツール(P)
これも使い方はillustratorとほぼ同じです。ベジェ曲線がわからない人は以下のサイトなどを参考にしてください。このWORKSHOPではillustratorとphotoshopをある程度使いこなせる人を対象にしているので、細かい説明は省きます。

http://www.dodofactory.net/bezier1/index.html
http://park17.wakwak.com/~hal/lecture/bezier.html

 

選択ツール(V)、 ダイレクト選択ツール(A)
これらもillustratorとほぼ同じです。ただ、FLASHでは塗りと線が別物として扱われるので、選択ツールで塗りの部分をクリックすると塗りだけが選択され、線の部分をクリックすると線（一辺のみ）だけが選択されます。
また、選択ツールではダブルクリックやドラッグで以下のようなことができます。

• 塗りをダブルクリックすると、その周りの線も選択されます。
• 線をダブルクリックすると、つながっている線が全て選択されます。
• 線や塗りの端をドラッグすると、illustratorのワープツールに近い感覚で変形できます。

ダイレクト選択ツールではillustratorと同様にパスのポイントやハンドルを操作することができます。

線と塗りの色
illustratorやphotoshopとは若干違い、WEBセーフカラーから選択するようにするか、HTMLやCSSなどで使う１６進数の数値入力をする画面を使うか、

右上にあるカラーミキサーを使うとRGBでの色指定などもできます。

塗りの変形ツール(F)[illustratorのグラデーションツールのようなもの]
塗りを選択して、カラーミキサーでタイプを「線状」や「放射状」に選択すると、塗りをグラデーションにすることができます。illustratorと違う点はアルファ（不透明度）も設定できる点です。だんだん透明になっていくグラデーションが作れるので、illustratorではやりにくい（ブレンドを乗算やスクリーンにして近いことはできる）表現ができます。

自由変形ツール(Q)
illustratorではバウンディングボックスを表示していると、わざわざ拡大縮小ツールを使わなくても拡大、縮小、変形ができますが、FLASHでは自由変形ツールに持ち変える必要があります。
テキストツール(T)、テキストの分解(Command+B)
テキストツールの使い方もillustratorとほぼ同じで、ステージ上をクリックして文字を入力します。フォントや色、字間などの設定はプロパティパネルで行います。プロパティパネルの左上にあるセレクトボックスはテキストの種類で「静止テキスト」「ダイナミックテキスト」「テキスト入力」が選択できますが、ここでは「静止テキスト」を選択してください。「ダイナミックテキスト」と「テキスト入力」についてはActionScriptをやるときに説明します。
テキストは後から書き換えることができますが、シェイプとして扱うことができません。テキストを選択してCommand+B（Windowsの場合はCtrl+B）でテキストを分解できます。一回分解すると文字がばらばらのテキストになります。さらに分解するとシェイプになります。

バケツツール(K)、 インクボトルツール(S)
バケツツールはphotoshopの塗りつぶしツールとほぼ同じで、閉じられたパス内を塗りつぶします。
インクボトルツールはFLASH独特のツールです。FLASHでは同時に描画したものでも塗りと線が分離して扱われますが、塗りを選択してこのツールを使 うとそのシェイプの周りに線ができます。illustratorではテキストに線をつけて塗りをなしにするには線の色を指定して塗りの色を消せば簡単にで きますが、FLASHで同じことをするためにはテキストを一度分解して、そのシェイプを選択してからインクボトルツールでパーツごとにひとつずつクリック していく必要があります。

ストレートオプション、 スムースオプション、 マグネットオプション 
線や塗りを選択して「ストレートオプション」をクリックするとカクカクした角張った線になり、「スムーズオプション」にすると柔らかい線に変形します。マグネットオプションは ON/OFF切り替えることができ、ONの場合は、オブジェクトをポイントの近くに持っていくと、オブジェクトがポイントに吸着しやすくなります。

illustratorとのパスの扱いの違い 

FLASH WORKSHOP 1-01　FLASH入門編　〜FLASHの基本操作〜

ここではFLASHで新規ドキュメントの作成やパブリッシュの設定、ステージサイズやフレームレートの設定、各操作パネルの名称などFLASHの基本的な使い方について説明します。

新規ドキュメントの作成
「ファイル」メニューから「新規...」を選択するかCommand+N（Windowsの場合はCtrl+N）で新規ドキュメントを作成できます。

各ウィンドウ、操作パネルの名称
それぞれのウィンドウは「ウィンドウ」メニューから表示／非表示を切り替えることができます。カッコ内はショートカットです。

【ツール】
シェイプやテキストの描画や変形などに使うツール群が配置されています。

【プロパティ】
ドキュメントや選択されたシェイプ、インスタンスなどのプロパティを設定できます。

【タイムライン】
時間軸となるタイムラインやレイヤーを操作するためのウィンドウです。

【カラーミキサー】
シェイプの色や透明度、グラデーションを設定できます。

【整列】(Command+K)
シェイプやインスタンスを整列したり等間隔に分布したりします。

【変形】 (Command+T)
数値入力によるシェイプやインスタンスの拡大／縮小や回転などができます。

【ライブラリ】(Command+L)
読み込んだ画像や作成したシンボルの一覧です。

ドキュメントの設定
新規ドキュメントを作成した状態ではステージサイズは「550x400」、フレームレートは「12」になっています。画面下プロパティパネルで設定を変更できます。フレームレートは１秒間に何フレーム再生するかで、数字が大きいほど早くなります。ただ、フレームレートを上げ過ぎると再生環境によってはコンピュータの処理速度が追いつかなくなります。

プロパティパネルの「パブリッシュ」の「設定」ボタンをクリックするとパブリッシュ設定ウィンドウが開きます。ここで対応するFLASH PLAYERのバージョンやActionScriptのバージョン埋め込まれた画像の画質やサウンドの圧縮率などが設定できます。