Palafra!で、BlogPetのFlash背景を作ってみる3

ここから読まれた方。
ここからでは、多分用をなさないので。
前述記事からご覧いただけると、非常にありがたいです(笑)
 
【前述記事】
Palafra!で、BlogPetのFlash背景を作ってみる1
Palafra!で、BlogPetのFlash背景を作ってみる2
 
ここからは、ちょっと実践的に作ってみましょう。
とは言え。
極端に難しいコトはやりませんので。
興味がある方は、付いてきていただけると嬉しいです。
出来る限り丁寧に、ご説明いたしますのでw
 
Flashの概念を説明する時、何がわかりやすくていいかなぁ、と、
しばし考えたのですが。
基本的には、アニメーションの作り方と似ていると思っていただきたいです。
アニメって、複数のセルを重ねて、一コマ一コマ撮影して作るんですよ。
Flashも、よく似ています。
複数のセルは、レイヤーに置き換えられます。
ParaFlaにレイヤーは無いんですがf(^_^;)
その代わりに、「深度」と言う設定があります。
この数値の大小で、表示位置が変わります。
数が少なければ奥。
数が大きければ、手前に表示されます。
複数の画像を扱う場合、ゼヒ押さえておきたいポイントです。
 
一個一個、コマを進める。
それを再生するコトで、いかにも動いているように見せる。
アレに似ていますね。
そう。
教科書の端っことか、ノートとかに書いたパラパラ漫画w
今回はその、パラパラ漫画的表現を、やってみましょうw
 
用意するのは、複数の画像。
パラパラ動かしたいから、そんかなカンジの画像がいいです。
そうそう、Flashに使う元画像の内、jpgを使う方は要注意☆
プログレッシブ圧縮された画像は適しません。
気をつけて下さい。
お使いの画像ソフトに、プログレッシブ設定がある場合は、
チェックを外すようにして下さいね。
今回も、テスト用にサンプル画像をご用意しました。
↓実験的に使いたい方は、ご利用下さい(笑)
 
画像
画像
画像
画像
画像
取り敢えず、5枚w

 
前回のおさらい。
Palafra!で、BlogPetのFlash背景を作ってみる2』でやってみた、
画像を右ペインへ読み込ませる方法。
覚えてますか?
まず、そこまでやってみましょう。
 
左ペインに、全部の画像を表示させます。
左ペイン上で右クリック、
[アイテムを追加]→[ファイル]で、画像指定をします。
このケースだと、5枚読み込ませるので、
同一作業を5回繰り返します。
読み込ませる時に、このソフトはどうしても、
実行ファイルの置いてあるディレクトリを示してしまいますので、
「最近表示した場所」を使うと楽かと思います。
 
次に、左ペインより、右ペインに表示するよう指示を出します。
左ペインの、画像名上で右クリック。
「イベントに追加」を選んで、右ペインへ。
この時、気をつけたい点。
画像は、左ペインへ読み込ませた状態では、降順になっています。
なので、表示させたい順番に読み込ませる場合、
下のファイル名から指示して下さい。
或いは。
「ID」と言う文字をクリックすると、昇順・降順が切り換えられます。
間違えそうな方は、先に昇順にした方が便利かも知れませんね。

さて。
全部、読み込みが終わりましたでしょうか?
今の画面は、こんな風になっているかと思います。

画像


これを、上部メニューバーより、
[プレビュー]→[プレビューウィンドウ]で、
現在の状態を確認してみましょう。

画像早っ☆
。。。こりゃ、あんまりだろう(笑)

※諸事情により参考用にはアニメーションGIF加工したので、
画像が粗いのは気にしないw
実物は、こんなに粗くはならないはずです。



で、前回FPSについて説明したのを思い出して欲しいんです。
フレームレート。
現時点では、FPS12に設定されています。
1秒間に12コマ表示する設定です。
今現在、表示が速くて笑っちゃう状態なので、
これを何とかするには、フレーム速度を落としてやればいいんです。

では。
どのぐらいが丁度いいのか?

画像
画像


左が、FPS1、右が5です。
1では遅いですよね。
1秒ってのは、案外長いんです(笑)
5では、ちょっと早すぎる感じがします。
2か3辺りがベストのようですねw
では、FPS3に設定して、
まず、元ファイルの保存をしてから、[ファイル]→[SWFファイル生成]で、
実際のFlashファイルを作成してみましょう。

画像

ま、こんなカンジで出来上がればいいかな?

本来のFlashは、葉っぱだけをパーツとして取り扱い、
背景等を別の深度に置きます。
そうするコトによって、もっとスムーズで複雑な動きが可能になります。
今回は、全体のイメージをわかっていただくために、
敢えて全部一緒に描かれた画像を用意しました。
ま、ParaFlaの場合、パーツを用意するには、これとは別に、
ParaDrawと言う画像ツールを組み合わせるコトによって可能となります。
ここでは、ParaFlaだけの解説をしていますので、
敢えて、その解説は外させていただきました。

あと、コレはエンドレスにループしています。
ParaFlaの場合、作りっぱなしだと、エンドレスループになるようです。
ですので、最後まで行った時に、動きを止めたい場合、
別処理をしてやる必要があります。
この辺は、後日解説出来たらいいなぁ・・・って思っています。
そこまで行くと、スクリプトが避けて通れないのでw

使う画像によって、このような簡単なパラパラ漫画でも、
もっと様々なモノが作れるでしょう。
あとは、アイデア次第だと思いますので、
ここまで出来たなら、頑張って、色々作ってみて下さい♪
枚数を増やして、細かく動かしてパラパラすると、
もっとスムーズに動いているように見えるでしょう。
逆に、もっとのんびり動く、
カメのようなのを作ってみても面白いかも知れませんね。


次は、もちょっとだけ、小難しくなります( ̄ー ̄)ニヤリッ


ここまでが簡単すぎる方。
或いは、もっと自力で色々やってみたい方。
ParaFlaにはWikiが存在しますので、そちらで調べてみるのもいいと思います。
とっても便利なサイトですよ~♪

【ParaFla!Wiki】


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 1

なるほど(納得、参考になった、ヘー)

この記事へのコメント

cyonsa
2009年07月23日 21:46
ここあさ~ん!!ここまでできました♪♪
すみません。たくさん聞いてしまって(;^_^A アセアセ・・・
続きはまた少しずつ勉強してみます。
m(__)m

この記事へのトラックバック