BACK STEP1 STEP2 STEP3 STEP4

SETP2.FLASH BGMを作ってみよう2！

今回はSETP1で作ったBGMにON/OFFスイッチをつけてみます。

完成品サンプル

1. SETP1で保存したbgm.flaをWクリックするかFLASHを起動後 ファイル＞開くで bgm.flaを開いてください。
※FLAとはFLASHのソースファイルのことで重要なファイルですからバックアップをお勧めします。

2. 作業がやりやすいのでスイッチ用のレイヤーを作りましょう。
レイヤーの追加ボタンを押してレイヤー2を作ります。

※黒くなっているレイヤーはアクティブなレイヤーでレイヤーが多くなって作業がやりにく
くなったら Lockや非表示にすることでアクティブレイヤーを限定することもできます。
※レイヤーに好きな名前を付けることもできますのでレイヤー名部分をWクリックして
サウンド、 ボタン等に変えてみましょう。



3. ここではスイッチになるボタンはサンプル ライブラリのものを使用することにします。
ウィンドウ＞サンプルライブラリ＞ボタンを選択してライブラリ- ボタン.flaを表示させます。
ライブラリ内の終わりにPush Barがありますのでこれを使います。

4. ライブラリのウィンドウからPush Barを作業エリアにドラッグします。

※ウィンドウ＞ライブラリで今ドラッグしたボタンがbgm.flaのライブラリに挿入されたことが
確認できます。


5. ボタンが選択(水色の線で囲まれている)されている状態で伸縮ボタンをクリックします。
※もしボタンが非選択状態では伸縮ボタンはクリックできませんので、その場合はボタンを
クリック して選択してください。
※伸縮ボタンをクリックするとボタンの周りに伸縮ハンドルが表示されます。



6. 下か上の端の伸縮ハンドル上にマウスポインタを移動するとマウスポインタが矢印になります。
その状態でドラッグしてボタンのサイズを小さくしてみます。
※伸縮はこの方法以外にサイズを指定する方法があり、ウィンドウ＞パネル＞情報や修正＞
変形＞伸縮と回転等でできます。



7. 次はテキストツールをクリックしてからボタン上でクリックしSTOPと入力します。
※文字入力モードを終了するにはテキストツール以外のツール、例えば矢印ツール等をクリックします。

8. 入力した文字が選択(水色の線で囲まれている)されている状態でウィンドウ＞パネル＞文字
を表示させFONT等を指定します。
※例ではフォントはArial、フォントの高さは12、トラッキングは 5、テキストの塗りカラーは白にしています。

9. テキストが中心あたりになるようにドラッグするか情報パネル等で移動しウィンドウ＞
パネル＞ 段落の中央揃えをクリックします。

10. レイヤーを追加してアクションと言う名前にします。

11. アクションレイヤーの1フレームをWクリックしてフレームアクションパネルを表示させます。

12. フレームアクションパネルで基本アクションをクリックして基本アクション内のStopを
WクリックするかStopを右のウィンドウにドラッグします。
※今回のムービーは2フレーム使い各フレームをStopする必要があります。
もしフレームにStopアクションを設定しないと再生時に1、2フレームを繰り返し再生
することになります。

13. アクションレイヤーの1フレームからサウンドフレームの1フレームまで縦にドラッグして
選択し右クリックしてフレームをコピーします。

14. アクションレイヤーの2フレームからサウンドフレームの2フレームまで縦にドラッグして
選択し右クリックしてフレームをペーストします。
※1フレームの内容を2フレームにコピーするには2フレームで右クリックしてキーフレーム
の挿入でもできますがその場合アクションはコピーされません。
今回のようにアクションもコピーしたいときはこの方法が便利です。
また、レイヤーが1つの場合は単にコピーしたいフレームを選択してペーストしたい
フレームでペーストします。

15. タイムラインが1フレームの状態でボタンを選択しウィンドウ＞アクションでオブジェクト
アクションパネルを表示させ、基本アクションのGo ToをWクリックします。

16. gotoAndPlay (1)が選択されている状態でタイプを次のフレーム にします。

17. 再生ヘッドを2フレームにドラッグするかボタンレイヤーの2フレームをクリックして
からボタンを選択します。

18. 先ほどと同様にウィンドウ＞アクションでオブジェクトアクションパネルを表示させ、
基本アクションのGo ToをWクリック して、今度はタイプを前のフレームにします。

19. タイムラインが2フレームの状態でテキスト(STOPの文字)を Wクリックしてもう一度
WクリックしてSTARTに変更します。
※Wクリックを1かいして前の文字(STOP)を削除してからSTARTを入力することもできます。

20. サウンドレイヤーの2フレームをクリック(選択)しウィンドウ＞パネル＞サウンドを表示し
同期をストップにします。

21. これで完成ですので試しに制御＞ムービープレビューを選択してみてください。
クリックするたびにSoundがOFF/ONできるはずです。

22. 上手くいったらムービープレビューウィンドウを閉じてファイル＞保存かファイル＞
名前を付けて保存してください。
「STEP1の時みたいにパブリッシュしないの？」と突っ込まれそうですが、FLASHを
閉じてデスクトップ上のbgm.swfをWクリックしてみてください。
実は書き出しやパブリッシュしなくてもプレビューするだけで FLAのあるディレクトリ
にSWFが生成されます。
STEP1ではバージョンの指定やHTMLの書き出しが必要だったのでパブリッシュ
しましたが同ファイルの2回目以降の書き出しは私の場合、ムービープレビューで
やってます。


23. ページに貼り付けてみる
貴方が借りているサーバーに bgm.swfをバイナリ(データ形式)でFTPします。
※Gaiaxの画像アップローダーではSWFはアップできません。

Gaiax系のページに貼り付けるには<embed タグを使用します。
仮に bgm.swfをhttp://www.hogehoge.co.jp/~anata/にアップしたとすると
<EMBED src=http://www.hogehoge.co.jp/~anata/bgm.swf quality=high bgcolor=#000000 WIDTH=100 HEIGHT=30>
と言う記述になります。
bgcolor はページと同系色を16進数で指定します。

Gaiax系以外のページに貼り付ける場合はパブリッシュしたHTMLを流用するか

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" WIDTH=100 HEIGHT=30>
<PARAM NAME=movie VALUE="bgm.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#000000>
<EMBED src="bgm.swf" quality=high bgcolor=#000000 WIDTH=100 HEIGHT=30
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>
</OBJECT>

と、します。
※この例は bgm.swfとHTMLが同じディレクトリにある場合です。

つづく？

BACK STEP1 STEP2 STEP3 STEP4