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

あたしっ!!
ホントは、こんなに親切じゃないんだからねっ☆
ち、ちょっとだけ気が向いたから、こんなに長々解説してるだけなんだからっ!
決して、誰かのためとか、言ってるワケじゃないんだからねっ。
なによっ!
そんな期待した目で見たって、これ以上サービスなんてしてあげないわよっ!!
 
と、気持ちデレてみたところで、続きです(笑)
 
【前述記事】
Palafra!で、BlogPetのFlash背景を作ってみる1
Palafra!で、BlogPetのFlash背景を作ってみる2
Palafra!で、BlogPetのFlash背景を作ってみる3
Palafra!で、BlogPetのFlash背景を作ってみる4
 
おさらいはしませんので、各自復習するように(笑;)  
ここまで付いてきて下さった方、実はもう、基本力は付いていると思って下さい。
残りは、ASとか、動かすとか、細かい作業を覚えるだけです。
 
ちなみに。
私だって、コレを書くためにParaFla入れたので、
ぜんぜん初心者です(苦笑)
ParaFla歴、1カ月未満w
これで解説書こうってんだから、無謀もいいところ。
むしろ。
書きながら、調べて覚えていってるカンジf(^_^;)
だから、あんまり詳しく解説するとボロが出ます☆
が、まぁ。
知っている限りは出しましょうってんで。
今回は、ASをちょっとだけ、かじりましょうねぇ♪
 
よく私はASと書きますが。
これは、Action Scriptの略です。
Flashの、実行命令文と思っていただいたら、いいでしょう。
Flashの動きは、このASで制御します。
Scriptって、プログラムみたいで難しいじゃんっ☆
・・・って、思う方もいらっしゃるでしょう。
実に、その通りです(苦笑)
自分の思うとおりにやろうとすると、とっても難しいです。
ただし、ルールを覚えれば、簡単なコトは出来るようになると思います。
ってゅーか。
決まったルールがあるんだから、簡単なASなら丸暗記丸写しも可能w
では、始めたいと思います。
 
BlogPet背景で一番使うのって何だろう?
汎用性がかなりあるので、広範囲すぎて絞れませんが。
私のところに来る問い合わせは、ランダムが多いので。
今回は、背景を読み込む度に変化させる、
ランダムスクリプトを学習しましょうw
複数の背景を持っていて、公式サイトのアップロード数では足りない方、
これを使えば、解決です(笑)
 
※【注意!!】
画像ですが、余所から勝手に持ってきてはいけません。
自分で用意したモノにして下さい。
例えそれが、BlogPet用に公開されていたとしても、です。
(画像改変に当たるからです。)
どうしても扱いたい方は、作家様の許可を得て下さい。
それが基本ルールです。



ではまず。
作業をするための画像を、数枚用意しましょう。
今回は、ランダムに表示させて、そこで止まるので、
別々の独立した絵がいいかもしれませんね。
試しに作業してみる方のために、今回もサンプル画像をご用意しました。
用意するのが面倒な方は、↓お使い下さいw
 
画像
画像
画像
画像
画像
取り敢えず、5枚w

わかりやすいように、ナンバー振ってみましたw
 
前々回『Palafra!で、BlogPetのFlash背景を作ってみる3』でやったように。
5枚全部、左ペイン→右ペイン表示まで、やってみてください。
わからない方は、前々回へ戻って復讐復習して来てくださいねw
スペースの都合で、ここでは説明を割愛します。
 
画像
今の段階では、こんな風になっていると思います。
この5枚を、ペットが読み込み表示される度に、違う画像に変わるよう、
「ランダムスクリプト」を埋め込みます。
今の状態でプレビューすると、 目にもとまらぬ早さで、
絵が次々表示されるはずです。
これは、配置した絵を静止するスクリプトを書いていないためです。
なので、ランダムに選んで、そこで止まる、ってぃうASを書きます。
 
gotoAndStop(Math.floor(Math.random()*X)+Y);
 
これが、そのスクリプトです。
gotoAndStopは、指定した場所にいって、そこで止まりなさいって命令。
Math.randomは、0~1の間の少数をランダムに返す記述です。
0.123456789・・・みたいな数値です。
Math.floorは、その少数を切り捨てる処理をしてくれる記述。
つまり、ランダムに出てきた数値を、小数点以下切り捨てて、
その数値の場所へ飛んで、止まってねw
・・・って、記述なんです。
 
ここまでは、理解できる?
 
さて。
ここで、XとかYとか、出てきてるんですが(笑)
この数値について説明しましょう。
Xには、表示したい画像の数が入ります。
ここでは画像を5枚用意しましたから、X=5です。
このXを掛けるコトにより、5までのランダム数が得られます。
0に5を掛けたら、0、(小数点以下はMath.floorで切り捨てられる)
1に5を掛けたら、5だからです。
(再度書きますが、Math.randomは、
0~1の間の少数をランダムに返す記述です。)

次に、Y。
これが、厄介なんですよねぇ☆
上の式までだと、0~5までの数が返って来ます。
しかし、0枚目って言う表示はあり得ません。
1枚目からです。
なので、この数を補正してやらなければならないんですね。
Flashの場合、「何枚目」って指定は、フレーム数で指定します。
画像が1フレーム目から5フレーム目にあるのならば、
Y=1で、1~5の数値がランダムに返されます。
2フレーム目から始まるのなら、Y=2で、2~6の数値が返されます。

理解できたでしょうか?

で、この記述を、1フレーム目に記述してやります。
なんで1フレーム目かって言うと、読み込んだ時に画像を変えるんだから、
他の作業をしてからでは遅いわけです。
ぃゃ、そう言う指定をする場合は別なんですが。。。
一番上のフレームにある画像をクリックで反転しておいて、右クリック。
[アクションを挿入]を選びます。
すると、イベントのプロパティが開きますから、
[アクションの設定]→[スクリプト]を選択します。
そして、下のスクリプトエディタ欄へ、さっきのASを記入します。

画像


1フレーム目に、スクリプトが挿入されたために、
自動的に画像は2フレームからに押し下げられていると思います。
なので、ASは、

gotoAndStop(Math.floor(Math.random()*5)+2);

と、なります。

さて、この段階でムービーをプレビューすると、なんだかまだパタパタしてます。
各画像が固定されていないせいなんですね。
なので、各画像を動かないように固定してやる指示が必要です。

stop();

これが、本来の指定ASです。
でも、ParaFlaには、固定させるための設定が、
もっと簡単にできるようになっています。

右ペインの画像をダブルクリックして、「イベントのプロパティ」を開きます。
[ボタンにする]にチェックを入れると、[アクション]の選択が出来ようになります。
その中の[停止]を選んで、確定します。

画像


この作業を、全画像で行って下さい。
でも、これでもまだ、不十分です。
アクションが確定するまでの間、ちょっとチラチラしちゃうんですよねー。
1フレームの記述と、2フレームを読み込むまでのシークタイムのせいです。
ここで登場するのが、「FPS」。
以前の解説にありますが、これでコマ送りの早さを設定します。
ランダム確定までの速度を上げてやるんです。

[ファイル]→[プロジェクトのプロパティ]を選択して、ウィンドウを表示させます。
で、コマ数を上げます。
100とかに設定すると、ちらつきは見えなくなります。
50~の値で充分かもですがw

で、まず、このファイルを、名前をつけて保存して下さい。
その後、SWFファイルの生成で、フラッシュファイル化します。

はい!
5枚の画像をランダムに表示する背景の完成です\(^o^)/
枚数を増やす場合は、画像を多く右ペインに書き出して、
ランダムASのX値を変えてやって下さい。

取り敢えず、これでParaFla講座は修了です。
まだ、たくさん説明項目はあるのですが。
ここからは、ご自身で学んでいって下さい。
こちらも、また、気が向いたら続きをやります。

お疲れ様でした(*^-^*)
願わくば。
5回に分けて解説したこの記事たちが、
あなたのお役に立ちますように。。。。。。。☆


ぞっ、続編なんて期待しても、ダメなんだからねっ!(爆)


ParaFla!Wiki

ブログ気持玉

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

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

→ログインへ

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

気持玉数 : 3

驚いた
ナイス
かわいい

この記事へのコメント

2007年09月18日 20:36
マニュアルを読むのにいっぱいいっぱいで(^-^;、今はまだ実際にこちらの演習をやってません。でもとてもわかりやすいです。ただやっぱやってみないとイメージだけではダメなのでこちらをブックマークします!
「1」を読んでまずPalafra最新バージョンだけはDL済み。次回時間を取って「2」に挑戦です。
ととろにはサンプルつきなのが感激でした。

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