駄フラを作ろう Edit

 このページは「Webおしゃれさん」便乗記事です
「Webおしゃれさん」作成管理こやすとは関係ありません

 こやすの作った駄フラがもっと見たい
無意味なのとか馬鹿馬鹿しいのとか大好きだ
という事でFlash作成フリーウェア「Suzuka」を使って講座ぽい事をしてみます

 なるべく短くと思いながら書いているけれどもそれでも長いので
読むの面倒ってこやすは手順の部分だけ読んでいってもどうにかなるかもしれない
駄目かもしれない

2ページ目
3ページ目(アクションスクリプト)

目次 Edit

Flash作成ソフト「Suzuka」の用意 Edit

 ソフトがないと話になりませんのでダウンロードしましょう
大まかな説明も行いますが弄っているうちに理解できるでしょう
できるといいな

■ Suzukaを導入してみようFlash □

ソフトのダウンロード Edit

 まずは作成ソフトの用意をしましょう
下記リンク先のページからダウンロードしてください
それぞれの説明も記述されていますので詳しい事を確認したい場合は読んでみてください

  • Windows用のフリーソフトSuzuka
    • 対応OSはWindows 98/98SE/Me/2000/XP

びすたけさんならリッチエディット版で動くという報告があるようです
音声ファイルを扱うと挙動がおかしくなるそうですが
Suzuka.exeを右クリック、プロパティの「互換」でWindows98/Meに設定で回避できるとの事

その際「名前をつけて保存」ができないらしいので
予め新規の空ファイルを作っておき上書き保存する、という方法が必要らしいです

ダウンロード・圧縮ファイルの解凍などについては説明しませんが大丈夫よね

Suzuka0.8.1.0 と RegisterSonEditX それからヘルプファイルをDLすれば大体OKな筈

「Suzuka」の起動と各部の説明 Edit

 ショートカットをダブルクリックなりすればソフトが起動し次のような画面が現れます

http://notarejini.orz.hm/up2/file/qst050402.jpg

 以下大まかに解説しますが読むのが面倒臭い場合は各部名称だけ覚えて
次へ進んでいただいても大丈夫だと思います

  • メニューバー
    • 色々な機能をまとめてあります
  • シンボルリスト
    • 上段が確認枠、下段がリスト枠です
      • リスト枠に素材をドラッグ&ドロップすることによって素材登録を行います
      • [Ctrl]キー+[F]キーでも読み込みが可能です
    • 上部の[<<]をクリックすれば切り離しが出来ます
      • 切り離し後は[>>]をクリックすれば元に戻ります
  • レイヤーリストとタイムライン編集枠
    • 向かって左側がレイヤーリスト、右側がタイムライン編集枠です
      • シンボルリストからレイヤーリストへドラッグ&ドロップすることによって画面に素材配置を行います
      • タイムライン編集枠でレイヤーリスト上の素材をどのタイミングで表示するかを編集します
  • 編集キャンバス
    • 今現在どのような画面になっているか表示します
      • 素材をドラッグして大まかに配置を変える事ができます
  • キーフレーム編集枠
    • 選択されている素材の細かい状態編集をします

 場合によっては上記以外に「スクリプトエディタ」という枠が編集キャンバスの下に表示されているかもしれません
今回は使用しませんので[<<]をクリックして切り離し[X]をクリックして表示を消しておきましょう

とりあえず作って感覚をつかもう Edit

 練習に簡単なものを作りながら基本的な操作を覚えてしまいましょう
まずは簡単な2コマアニメFlashを作成してみます

準備 Edit

 進めていく準備をしましょう
素材の用意、ソフトの大まかな説明をします

素材の用意 Edit

 講座用に素材を用意しましたので下記からダウンロードしてください
もちろん面白げな素材が手元に有るこやすさんはそちらを利用して下さって構いません

 適当な場所に「Flash作成」フォルダを作り、その中へ素材フォルダごと入れておきます

ファイルの新規作成 Edit

 立ち上げたばかりの状態なら何も入っていないはずですが一応新規ファイルを作成します

メニューバー「ファイル」>「新規作成」(ショートカットは[Ctrl]キー+[N]キー)

初期設定 Edit

 初期設定を行います
駄フラの仕上り画面サイズ・FPS・SWFバージョンをそれぞれ指定します
後からでも変更は出来ますが変更後の調整は非常に面倒くさいですから最初に決めておきましょう

 今回は幅300ピクセル・高さ200ピクセル・FPS12・SWFバージョン8に設定します

  • FPSは再生速度の事で、秒間に何コマ再生するのかを指定します
  • SWFのバージョンはいくつかありますがとりあえずはSWF8にしておけば問題無いでしょう

http://notarejini.orz.hm/up2/file/qst050403.jpg

メニューバー「ファイル」>「プロジェクトのプロパティ」
「プロジェクトのプロパティ」ダイアログが表示されます
幅を300 高さを200 FPSを12 SWFのバージョンをSWF8 と指定して[OK]をクリック

素材の登録 Edit

 使用する素材をSuzukaに登録します
素材ファイルをシンボルリストにドラッグ&ドロップして登録する方法と
[Ctrl]キー+[F]キーを押してファイルの追加ダイアログから登録する方法があります
どちらでもやりやすいと感じた方法で登録してください

 ドラッグ&ドロップの場合シンボルリスト上部の[<<]をクリックして切り離しておくと作業がしやすいかもしれません

シンボルリストに素材をドラッグ&ドロップ

もしくは

[Ctrl]キー+[F]キーを押して登録したいファイルを選択

一つずつ行わなくても丸ごと放り込めます フォルダごと放り込む事も可能です

素材の登録が出来ていれば次のように素材名がリスト表示されているはずです
http://notarejini.orz.hm/up2/file/qst050404.jpg

ファイルの保存 Edit

 素材の登録が済んだらここで一度ファイルの保存を行いましょう
以後まめに保存すると良いと思います

メニューバー「ファイル」>「名前をつけて保存」

もしくは

メニューバー「ファイル」>「プロジェクトを保存」(ショートカットは[Ctrl]キー+[S]キー)
「test-01」と名前をつけて「Flash作成」フォルダへ保存してください(test-01.csfというファイルが作成されます)

ファイルの読み込みをしたい場合は「プロジェクトを開く」([Ctrl]キー+[O]キー)です

基本は2コマ Edit

 一通り準備が出来たら早速つくってみましょう
基本は2コマといわれるように2枚の違う絵を交互に動かす事によって簡単なアニメーションを作ります

新しいスプライトを作る Edit

 スプライトって何よって話になると思いますが詳しい事を語りだすと長いので割愛します
喩えていうなら役者を用意するようなものと思ってみてくれないか

 単純な2コマアニメ程度であればメインタイムラインに画像を直接置いても問題はないのですが
例えば後々にそのアニメをさせながら横移動したい、フェードアウトさせたい、ボタンに登録したいといった場合
スプライトとしてまとめておいたほうが何かと便利なのよ

  http://notarejini.orz.hm/up2/file/qst050405.jpg http://notarejini.orz.hm/up2/file/qst050406.jpg

シンボルリスト上で右クリック>アイテムを追加>スプライト追加(ショートカットは[Ctrl]キー+[R]キー)
「スプライトのプロパティ」ダイアログが表示されます
スプライト名を「パターン1」に変更してサイズが幅300高さ200になっている事を確認します
[OK]をクリックして閉じます

 ここでシンボルリストを見てください
リストに新しく「スプライト □ パターン1」という項目が増えていればOKです
プロパティの内容を修正したい場合はパターン1の名前の部分をダブルクリックすれば再度ダイアログが表示されます

http://notarejini.orz.hm/up2/file/qst050407.jpg

スプライトの内容を編集する Edit

 パターン1という名前の役者が出来たと思います
でもこの役者はまだどういった演技をするのか全く知らされていません
ではパターン1を編集してどんな演技をして欲しいのか伝えてみましょう

シンボルリスト内の「パターン1」をクリックして選択します
確認枠の[編集]をクリックします

http://notarejini.orz.hm/up2/file/qst050407.jpg

 上記の作業を行うと地味に画面が切り替わります
レイヤーリストの上段に青枠表示されていた「メイン(SWF8〜)」がピンク枠の「パターン1(ID:7)」になっているのを確認してください

http://notarejini.orz.hm/up2/file/qst050408.jpg

これは「今現在何を編集しているのか」が表示されています
この表示をダブルクリックすることで「メイン」の編集に戻る事が出来ます

 編集対象が「パターン1」に切り替わっている事を確認したら次は素材の配置です
役者にどんな行動をさせるか指示するのです

シンボルリストの「画像:A-1」「画像:A-2」をレイヤーリストへドラッグ&ドロップします
(リスト上のアイテムを複数選択したい場合は[Shift]キーを押しながらアイテム名をクリックして下さい)

 レイヤーリスト上に次のように表示され、タイムライン上に赤と青の四角ができていると思います
このタイムライン上の赤い四角はキーフレームという名前で、その画像をどのタイミングで表示させるかという目印になります
青色は現在選択されているキーフレームの表示です

 キーフレームを増やしたい場合は任意のタイムライン上で[Ctrl]キーを押しながらクリックしてください
レイヤーリストには画像だけではなく音や他のスプライトを配置する事も可能です

http://notarejini.orz.hm/up2/file/qst050409.jpg

 画像の位置を調整します(仕上りサイズと素材サイズが同じであれば不要な作業ですが解説の為に違うサイズにしてあります)

レイヤーリスト内の「画像:A-1」をクリックして選択します
キーフレーム編集枠が「画像:A-1」の情報に切り替わった事を確認してください
開始フレームを1 フレームカウントを4 位置・変形タブのX:を50にそれぞれ書き換えます

http://notarejini.orz.hm/up2/file/qst050410.jpg

同じようにレイヤーリスト内の「画像:A-2」をクリックして選択します
開始フレームを5 フレームカウントを4 位置・変形タブのX:を50にそれぞれ書き換えます

 上記の作業を行うとタイムラインが次のように変化していると思います
http://notarejini.orz.hm/up2/file/qst050411.jpg
 想像がつくとは思いますが「開始フレーム」はそのアイテムをどのタイミングでスタートするか
「フレームカウント」はそのアイテムをどれ位再生しておくのか、という情報です
グレーの部分が長い程長く表示されている訳です

 因みにキーフレームをダブルクリックすればマウスで移動させたり伸び縮みさせることも可能です
感覚的に移動させたい時はこちらの操作方法が向いているかもしれません

見てみよう Edit

 説明しながらなのでやや長く感じられたかもしれませんがそろそろ動くかどうか試してみましょう
先ずは念のために[Ctrl]キー+[S]キーを押して保存をしてください

 保存が出来たら仮再生をしてみましょう
タイムライン上の虫眼鏡アイコンをクリックするかメニューバー>ウインドゥ>プレビューを選択、
もしくは手っ取り早く[F5]キーを押してください

 無事に繰り返しアニメーションが表示されたでしょうか?
すぐに飽きるとおもいますので[X]ボタンを押して閉じてしまいましょう

BGMをつける Edit

 素材を組み合わせて新しく2コマアニメの素材を作りました
これとBGMをメインのタイムラインへ配置してみましょう
現在は編集対象が「パターン1」になっているので対象をメインへ戻します

レイヤーリストの上のピンク枠「パターン1(ID:7)」をダブルクリックして編集対象をメインに切り替えます

 編集対象がメインに切り替わった事を確認してからアイテムを配置し、長さを調節します

シンボルリストから「スプライト □ パターン1」「サウンド □ BGM:01」をレイヤーリストにドラッグ&ドロップしてタイムラインに配置します
レイヤーリストの「パターン1」を選択し、キーフレーム編集枠のフレームカウントを10に書き換えます
レイヤーリストの「BGM:01」を選択し、キーフレーム編集枠のループ回数を999に書き換えます

http://notarejini.orz.hm/up2/file/qst050412.jpg

 今プレビューするととてもうるさい事になるのでやっちゃ駄目よ
なんでこんな事をするのか詳しい解説は省きますが次の作業を行ってください

どのアイテムでも構わないのでタイムライン編集枠の10フレーム目をクリックして濃灰色の表示に変えます
レイヤーリスト上で右クリックして「アクションレイヤーを挿入」を選択します
レイヤーリストにフレームアクションというレイヤーが挿入されます
フレームアクションが選択されていない状態であればクリックして選択します
キーフレーム編集枠の簡易モードという項目にチェックを入れます
キーフレーム編集枠最下段のプルダウンメニューから停止を選びます

http://notarejini.orz.hm/up2/file/qst050413.jpg

 とりあえずおまじないだと思ってやっておいてください

SWFファイルを生成する Edit

 作業が終わったらセーブを行ってからプレビューしてみましょう
問題なく動くのを確認したらSWFファイルを生成します

メニューバー>SWFファイル生成>[保存]をクリック

 指定したフォルダにSWFファイルが生成されているはずです
何の問題も無く再生できれば完成です、お疲れ様でした!

もう少し作りこんでみたい Edit

  • 完成した!
  • 飽きた!
  • もうやめる!

 ですよねー
もう少しいじってみたいなーと思えたなら次行ってみましょうか

クリックしたら反応してほしい Edit

 それでは前回作成した2コマアニメFlashに手を加えてクリックした時に別の動きをするように改造してみましょう
方法はいくつかあるのですが、今回は「ボタンにアニメを仕込む」という方法を使います
いきなり言われても意味がつかめないとは思いますがとりあえずそういう物かと思っておいて下さい

 大まかな操作感覚は掴めたかと思いますので、ここから先は細かい指定は省いていきます

ファイルの複製を作る Edit

 まずはファイルの複製から行います

メニューバー>ファイル>プロジェクトを開く を選択して前回作成した「test-01.csf」を開きます
名前をつけて保存 を選択 test-02.csfとして保存します

新しいパターンを付け加える Edit

 クリックした時に再生されるパターンを付け加えます

[Ctrl]キー+[R]キーを押して新に「パターン2」というスプライトを作成します
編集対象を「パターン2」に切り替え、「効果音:ミポッ」「画像:A-3」を配置します
「画像:A-3」のキーフレーム編集枠 Xを50 Yを-2 に書き換えます

 同じ画像を位置を変えて表示するには新しいキーフレームを作成します
タイムライン編集枠に表示されている赤い印がキーフレームです
新しいキーフレームを作成するにはタイムライン編集枠上の任意の位置で[Ctrl]キーを押しながらクリックします

レイヤーリスト「画像:A-3」に対応するタイムライン編集枠の2フレーム目を[Ctrl]キー+クリックして新しいキーフレームを作成します
キーフレーム編集枠の[>>]をクリックすると一つ前のキーフレームの内容がコピー&ペーストされます
Xが50 Yが-2 となっているので Yを0 に書き換えます
フレームカウントを4 に書き換えます

 アニメがループすると音が鳴りっぱなしになるのでそれを防ぐ為に「停止」を指定します

フレームアクションレイヤーを挿入し5フレーム目にキーフレームを作成します
キーフレーム編集枠で簡易モードを指定し最下段で停止を選びます

 同じようにして「パターン3」を作成します

「パターン3」というスプライトを作成します
編集対象を「パターン3」に切り替え、「画像:A-1」「効果音:シュ」を配置します
「画像:A-1」のキーフレーム編集枠 フレームカウントを5 Xを50 に書き換えます

 フレームアクションの5フレーム目で「停止」を指定します

 不要なキーフレームがあった場合はクリックで指定したあと[Delete]キーで削除できます

ボタンを作る Edit

 ボタンには以下の様な状態に画像やスプライトを割り当てる事が出来ます

  • 通常時(必須)
    • ボタンに触れていない時の表示
  • 押下時
    • ボタンをクリックした時の表示
  • マウスカーソル通過
    • ボタンをクリックしてはいないがマウスカーソルが重なっている時

 今回のFlashは上記の割り当てを利用してそれぞれにアニメを割り当てて絵を切り替える手法という事です

 それではボタンアイテムを作成してみましょう
スプライトを作成した時と同じメニューからも作成できますがショートカットの[Ctrl]キー+[B]キーを押した方が楽です

[Ctrl]キー+[B]キーを押して「ボタンのプロパティ」ダイアログを表示します
ボタン名を「アニメボタン」に書き換えます
通常時・押下時・マウスカーソル通過をそれぞれ「パターン1」「パターン2」「パターン3」と設定します
当たり判定の自動判定項目に忘れずにチェックを入れておきます

http://notarejini.orz.hm/up2/file/qst050414.jpg

メインに配置する Edit

 メイン編集に戻って今作成した「アニメボタン」と「パターン1」を置き換えましょう

レイヤーリスト上の「パターン1」を選択して[Delete]キーで削除する(シンボルリストのパターン1が消されていないか確認しましょう)
「アニメボタン」を配置し開始フレームを1 フレームカウントを10 に書き換えます

完成 Edit

 念のために保存を行い、プレビューを行ってください
問題なく動いたらSWFファイルを生成して確認、完成です
お疲れ様でした!

おしまいに Edit

 なるべく文章量を減らして駆け足で解説してみましたがそれでも読む気が起こらない文章量だと思います
あちこち端折ったりしているので判りづらい部分などはだんだんと修正していこうかなとは思っています
最後まで真面目に読んでくれたこやすありがとう、おつかれさま!

何かあればコメントアウトにでもよろしくです

Edit


Last-modified: 2012-09-20 Thu 00:55:07 JST (2558d)