スプライト　こいつ・・・動くぞ！？

今回は、「スプライト」というアイテムについての説明をします。
まず、スプライトというのがどういったものなのか

実際に確認用の簡単なFLASHを用意してみました。


(製作者は至って真面目です！！)

これがスプライトを使用したFLASHです。

見た目は今までで教えた内容でも作れそうなFLASHに見えますが。
このFLASHのスプライトの正体は「停止したとき」に現れます。



では実際に停止させてみましょう。
FLASH内に入れてある「■」を押すか、または上のFLASH内で右クリックを押し「再生」を選びます。











すると、背景は停止したにも関わらず、
回転している部分は動き続けたと思います。




「スプライト」の詳しい説明は難しく、うまく言い表すことができませんが。
あえて言い表すとすれば、これは「動く素材」です。







では早速、この「スプライト」を制作してみましょう。

まずはこの練習用の画像をどこかしらに保存してください。

　　
１つ目の画像は物体を持つキャラクター、背景色は黄色[R:255 G:255 B:0]
２つ目の画像は背景
３つ目の画像は動き続ける物体、背景色は黄色[R:255 G:255 B:0]です。

今回はこれらを使って上の確認用FLASHと同じものを作れれば終了です。

では、さっそくやっていってみましょう。
まずは練習用画像をパラフラ内に素材追加し、「プロジェクトのプロパティ」でFLASHサイズを300x300とします。（画質とFPSも変えておきましょう）





そこまでできたら、まずはイベント内にキャラクターを配置します。
１つ目の画像を「イベントに追加」し、好きな位置に配置します。
この画像の場合は下半身が切れているので、切れている部分が見えないように配置しましょう。



こんな感じでしょうか。
配置できたらフレームカウントを０にして「適用」します。





次は、二つ目の画像を使ってゆっくり通常ループする背景を作ります。
この背景ループの作り方は地味に使えるのでしっかり覚えましょう。

まずは、「イベントに追加」で２つ目の画像をイベントに追加します。
位置は１つ目の画像イベントの下がいいでしょう。


追加したら、「イベントのプロパティ」を開き。深度を「-１」にしてフレームカウントを「１００」ぐらいにします。

そして、「移動先」のｘの数値をこの２つ目の画像の幅と同じ数値にします。
この場合はｘ：300とします。



ここまでできたら「適用」します。



これで背景完成ではありません。
これだと、ただスライドしていくだけです。


先ほど作った２つ目の画像のイベントの下に「＜ロールバック＞」を追加し、カウントを同じ数値にします（１００ぐらい

「＜ロールバック＞」を追加できたらその下に再度２つ目の画像をイベント追加します。

イベントを追加したら「イベントのプロパティ」を開き。今度は深度を「-２」にしてフレームカウントを先ほどと同じ「１００」ぐらいにします。
そして、「描写位置」のｘの数値を、「-画像の幅」とします。この場合はｘ：-300とします。






ここまでできたら、ちゃんとできているかプレビューしてみましょう。





こんな具合になっていたらOKです。

背景をループさせるには、同じ画像を同時にスライドさせるのがコツです。






ここからいよいよ「スプライト」の制作に移ります。

まずは、素材スペースのところで右クリックを押し、「アイテムを追加」から「スプライト」を選びます。






するとこういった場面が出てくると思います。
それぞれの必要な項目の説明をします。



①スプライトの名前
②スプライトのサイズ
③初期の中心位置の設定

①はそのままの意味で、そのスプライトが何の素材だったかわかりやすいように名前を付けるだけです。
③は初期の中心位置を設定できるのですが。特にしなくても困ることはありません。

そして、②ですが。その素材のサイズを設定します。
これは難しく考えることはないです。要は画像と同じでその素材の幅と高さを決めるだけです。
ちなみに、初期で入っている値はこのFLASH自体のサイズの数値が入っています。



なんとなく理解できたらさっそく数値などを変えていきます。
スプライト名はわかりやすい名前を入れ。サイズには今回はｘ：340 ｙ：340といれます。
基準点はそのままでいいです。



ここまでできたら「OK」を押します。





「OK」を押して、ファイルのプロパティを閉じると、素材のところに☆マークの素材が追加されたと思います。
これがスプライト素材となります。

しかし、このスプライト素材の中身はまだ作成していないので空です。
この状態でイベントに追加しても意味がありません。




というわけで、中身を作成しましょう。
素材のところにあるスプライト素材を左クリックし、選択してみます。



選択すると、左上のスペースにそのファイルの詳細とともに「スプライトを編集」というボタンが出てきたと思います。
それを左クリックします。



「スプライトを編集」のボタンを押すと、このように右のイベントが全て消えてしまいました。
ここであわてないようにしてください。

よく見てみると、イベントの一番上の部分の色と内容が変化しています。



この肌色（？）の部分をダブルクリックしてみると、元通りのイベントに戻ります。



「スプライト」の内容の制作方法は、今までのイベント制作とほぼ同じです。
「スプライトを編集」のボタンを押した状態で素材をイベントに追加し、動きを作るのがスプライト制作のやり方です。

物はためし、さっそく３つ目の画像をスプライトイベント内に追加します。
そして「イベントのプロパティ」から前回と同じやり方で３つ目の画像をループ回転させます。
フレームカウントは自由でいいです。






中心位置をしっかり設定してきれいに回転するようにしましょう。


では、この状態でプレビューしてみます。
「選択イベントのみ」ではなくても、このスプライトの状態で「プレビューウィンドウ」を選ぶと、スプライト内をプレビューします。


（このFLASHは厳密には普通のですが、確認用です）

こんな感じのプレビューが出てくればOKです。




ここまでできたら上の肌色の部分をダブルクリックして、「メイン」の制作画面にもどります。







「メイン」の制作画面に戻れたら
先ほど制作したスプライトを「イベントに追加」で右側に追加します。
場所は、キャラクターの上下いずれかがいいでしょう。



追加できたら、「プロパティ」を開いてみます。


（画像だと動いてないのでわかりにくいですがネギが動いているはずです）

すると、先ほど制作したスプライトが画像と同じ要領で出てくると思います。


基本的には画像と同じ要領で配置してかまいません。
なので、キャラクターを一度「プレビュー」したあと、手の位置にスプライトが来るように配置しましょう。



こんな感じでしょうか、
配置できたらフレームカウントを「０」にし、深度を「１」にして「適用」します。




ここまでできたらプレビューしてみます。




これで、完成です。
ためしに、FLASH内で右クリックを押して「再生」を選ぶと、ネギだけ回転して背景は止まるはずです。



今回の講義はここまでです。

スプライトは、動き続ける素材。
使いどころといっては、車のタイヤ部分・回転し続ける歯車・一定の動きを繰り返すキャラ・ループし続ける背景　など
さまざまな部分で使うことができます。
これらを作りかたを覚えることでまた制作バリュエーションが増えるというものです。

少々難しいですが、使いこなせるようになりましょう。

次回は、ほとんどのFLASH作品にはついているであろう
「ローディング画面」の作り方を教えたいと思います。
「ローディング画面」には「スプライト」の技術を使うので今回の講義をしっかり身に着けてくださいね。

戻る　　　　　講座TOPに戻る　　　　　次へ