ささきち流 Suzuka & ParaDraw 講座
Suzuka & ParaDraw
TOP
PROFILE
ActionScript Editor
LINK
BBS


フリーのFlash作成ソフト SuzukaParaDraw でFlashな生活を楽しもうというサイトです。
Suzuka 基礎・基本 スプライトやボタンを作る

Suzuka の使い方の基礎・基本ということで,スプライトやボタンの作成方法の説明です。説明に使っているSuzuka のバージョンは Ver. 0.7.2 です。

1 スプライト

 Suzuka でのスプライトとは,Adobe Flash のムービークリップに該当するもので,スプライトの中には独自のタイムラインを持つことができます。したがって,「チョウが1回はばたく」とか「星が1回またたく」というアニメーションをスプライト内に作って,そのスプライト自体をレイヤーに配置して動かすと,「チョウがはばたきながら飛ぶ」とか「星がまたたきながら流れる」というアニメーションが作成可能になります。
 また,複数のビットマップ画像や複数のPraDrawの画像を1つのまとめたものとして扱うことも可能になります。さらにスプライトの中にスプライトを入れることもできるので,複雑なアニメーションやインタラクティブに動くインターフェイスにも活用できます。
 このページの説明で,ActionScript は関係しませんが,先述の通り,スプライトは Adobe Flash ではムービークリップに相当するものなので,スプライトインスタンスに ActionScript を使用する場合は,MovieClipクラス のスクリプトを使います。
 (さらにややこしい注釈は下の※↓ を参照のこと)

 まず,「シンボルリスト」を右クリックし,スプライトに使用するビットマップ画像やParaDrawの画像をシンボルリスト内に用意します。
 今回の場合は,青い玉である「blue.pdr」と,その影になる「shadow.pdr」を組み合わせて1つのスプライトにする方法の説明です。両方とも ParaDraw で作成したものです。
 シンボルリストに画像の追加ができましたら,シンボルリストを右クリック→「アイテムを追加」→「スプライト追加」でシンボルリスト内にスプライトを追加します。
 スプライトの名前もサイズも任意ですが,この説明では,スプライト名に「青玉」という名前を付け,サイズは PRD ファイルと同じ大きさの 幅30px,高さ35px にしています。
 これで,シンボルリスト内に「青玉」スプライトが用意されますから,その「青玉」を選択し,上の「編集」ボタンをクリックします。
 すると,レイヤーがメインになっていたものが「青玉」スプライト内のタイムラインのレイヤーに変わります。
 この「青玉」スプライト内のタイムラインのレイヤーに「shadow.pdr」と「blue.pdr」を追加します。
 「青玉」スプライト内のタイムラインのフレーム1に「shadow.pdr」と「blue.pdr」が追加された状態です。影「shadow.pdr」は青い玉「blue.pdr」よりも向こう側に見えなければおかしいので,影のレイヤーは下,青い玉のレイヤーは上になるようにします。
 ParaDraw ではアルファやグラデーション入りの画像を作成することができますし,グラデーションがかかった絵の変形もできます。単に,Suzuka に,お絵かきソフトの機能を分担させるということの例です。
 レイヤーの上のシンボル名になっている部分をダブルクリックするとメインのタイムラインの編集に戻ることができます。
メインのタイムラインでスプライトの「青玉」を右クリック→「レイヤーに追加」で,メインのタイムラインのレイヤー上にスプライトを配置することができます。

 

2 ボタン

 ボタンは,文字どおり,ボタンとして活用するのに便利なシンボルです。
 ボタンを作成する場合は,少なくとも1つはボタンにする画像を指定する必要があります。
 まず,「シンボルリスト」を右クリックし,ボタン用の画像をシンボルリスト内に用意します。
 ボタンにする画像は1パターン分(1ファイル)でもかまいませんが,3パターン分のファイルを用意しておくとボタンらしく動作するものが作成できます。

 

 シンボルリストを右クリック→「アイテムを追加」→「ファイル追加」でボタンにする画像ファイルをシンボルリストに追加します。
この例では,「btnUP.pdr」「btnOVER.pdr」「btnDown.pdr」を追加します。
 シンボルリストにボタン用画像を追加しましたら,シンボルリストを右クリック→「アイテムを追加」→「ボタン追加」でボタンを追加します。
 すると「ボタンのプロパティ」パネルが出てきますから,通常時,押下(マウスダウン時),マウスカーソル通過(ロールオーバー時)の画像をそれぞれシンボルから選択します。
 当たり判定は,通常時と同じ画像を指定しておくと無難に動作します。
 メインのタイムラインの編集画面にもどって,上で作成したボタンをレイヤーに追加すれば,ボタンが表示されるようになります。
 何のアニメーションも動作もしませんが,この状態で,「ファイル」→「SWFファイル生成」をすると,一応 Flash の SWF ファイルが生成されます。

 

 Suzuka のシンボルリスト内の画像は,Suzukaファイル内に埋めこまれるものではなく,常に外部ファイルを相対パスで参照使用しています。
 したがって,Suzuka で使用する画像ファイルは,このサンプル↓にもあるように, SCF ファイルと同じフォルダに置くか,SCF ファイルのあるフォルダ内にフォルダを作ってその中に置いておく方が,平行移動させる場合も使い易いと思います。

 

 スプライトに関するややこしい話です。
   Adobe Flash CS3 Professional の ActionScript 3.0 からは
   スプライト(Sprite)が新たなオブジェクト(クラス)に加わっています。
   AS3 での Spriteオブジェクト は,
   MovieClip(Suzuka での スプライト) と似ていますが,
   タイムラインをもちません。
   この ActionScript 3.0 以降のスプライトと Suzuka のスプライトは
   基本的に別物です。

 

サンプルダウンロード
PDRファイル・CSFファイル在中
「kiso011.zip」 2.47 KB (2,538 バイト)