駄フラを作ろう † 
このページは「Webおしゃれさん」便乗記事です
「Webおしゃれさん」作成管理こやすとは関係ありません
こやすの作った駄フラがもっと見たい
無意味なのとか馬鹿馬鹿しいのとか大好きだ
という事でFlash作成フリーウェア「Suzuka」を使って講座ぽい事をしてみます
なるべく短くと思いながら書いているけれどもそれでも長いので
読むの面倒ってこやすは手順の部分だけ読んでいってもどうにかなるかもしれない
駄目かもしれない
2ページ目
3ページ目（アクションスクリプト）
目次 †
Flash作成ソフト「Suzuka」の用意 †
ソフトがないと話になりませんのでダウンロードしましょう
大まかな説明も行いますが弄っているうちに理解できるでしょう
できるといいな
■ Suzukaを導入してみようFlash □
ソフトのダウンロード †
まずは作成ソフトの用意をしましょう
下記リンク先のページからダウンロードしてください
それぞれの説明も記述されていますので詳しい事を確認したい場合は読んでみてください
- Windows用のフリーソフトSuzuka
- 対応OSはWindows 98/98SE/Me/2000/XP
びすたけさんならリッチエディット版で動くという報告があるようです
音声ファイルを扱うと挙動がおかしくなるそうですが
Suzuka.exeを右クリック、プロパティの「互換」でWindows98/Meに設定で回避できるとの事
その際「名前をつけて保存」ができないらしいので
予め新規の空ファイルを作っておき上書き保存する、という方法が必要らしいです
ダウンロード・圧縮ファイルの解凍などについては説明しませんが大丈夫よね
Suzuka0.8.1.0 と RegisterSonEditX それからヘルプファイルをDLすれば大体OKな筈
「Suzuka」の起動と各部の説明 †
ショートカットをダブルクリックなりすればソフトが起動し次のような画面が現れます
以下大まかに解説しますが読むのが面倒臭い場合は各部名称だけ覚えて
次へ進んでいただいても大丈夫だと思います
- シンボルリスト
- 上段が確認枠、下段がリスト枠です
- リスト枠に素材をドラッグ＆ドロップすることによって素材登録を行います
- [Ctrl]キー+[Ｆ]キーでも読み込みが可能です
- 上部の[＜＜]をクリックすれば切り離しが出来ます
- レイヤーリストとタイムライン編集枠
- 向かって左側がレイヤーリスト、右側がタイムライン編集枠です
- シンボルリストからレイヤーリストへドラッグ＆ドロップすることによって画面に素材配置を行います
- タイムライン編集枠でレイヤーリスト上の素材をどのタイミングで表示するかを編集します
- 編集キャンバス
- 今現在どのような画面になっているか表示します
- 素材をドラッグして大まかに配置を変える事ができます
場合によっては上記以外に「スクリプトエディタ」という枠が編集キャンバスの下に表示されているかもしれません
今回は使用しませんので[＜＜]をクリックして切り離し[Ｘ]をクリックして表示を消しておきましょう
とりあえず作って感覚をつかもう †
練習に簡単なものを作りながら基本的な操作を覚えてしまいましょう
まずは簡単な２コマアニメFlashを作成してみます
準備 †
進めていく準備をしましょう
素材の用意、ソフトの大まかな説明をします
素材の用意 †
講座用に素材を用意しましたので下記からダウンロードしてください
もちろん面白げな素材が手元に有るこやすさんはそちらを利用して下さって構いません
適当な場所に「Flash作成」フォルダを作り、その中へ素材フォルダごと入れておきます
ファイルの新規作成 †
立ち上げたばかりの状態なら何も入っていないはずですが一応新規ファイルを作成します
メニューバー「ファイル」＞「新規作成」（ショートカットは[Ctrl]キー+[N]キー）
初期設定 †
初期設定を行います
駄フラの仕上り画面サイズ・FPS・SWFバージョンをそれぞれ指定します
後からでも変更は出来ますが変更後の調整は非常に面倒くさいですから最初に決めておきましょう
今回は幅300ピクセル・高さ200ピクセル・FPS12・SWFバージョン8に設定します
- FPSは再生速度の事で、秒間に何コマ再生するのかを指定します
- SWFのバージョンはいくつかありますがとりあえずはSWF8にしておけば問題無いでしょう
メニューバー「ファイル」＞「プロジェクトのプロパティ」
「プロジェクトのプロパティ」ダイアログが表示されます
幅を300 高さを200 FPSを12 SWFのバージョンをSWF8 と指定して[ＯＫ]をクリック
素材の登録 †
使用する素材をSuzukaに登録します
素材ファイルをシンボルリストにドラッグ＆ドロップして登録する方法と
[Ctrl]キー+[Ｆ]キーを押してファイルの追加ダイアログから登録する方法があります
どちらでもやりやすいと感じた方法で登録してください
ドラッグ＆ドロップの場合シンボルリスト上部の[＜＜]をクリックして切り離しておくと作業がしやすいかもしれません
シンボルリストに素材をドラッグ＆ドロップ
もしくは
[Ctrl]キー+[Ｆ]キーを押して登録したいファイルを選択
一つずつ行わなくても丸ごと放り込めます フォルダごと放り込む事も可能です
素材の登録が出来ていれば次のように素材名がリスト表示されているはずです
ファイルの保存 †
素材の登録が済んだらここで一度ファイルの保存を行いましょう
以後まめに保存すると良いと思います
メニューバー「ファイル」＞「名前をつけて保存」
もしくは
メニューバー「ファイル」＞「プロジェクトを保存」（ショートカットは[Ctrl]キー+[S]キー）
「test-01」と名前をつけて「Flash作成」フォルダへ保存してください（test-01.csfというファイルが作成されます）
ファイルの読み込みをしたい場合は「プロジェクトを開く」（[Ctrl]キー+[O]キー）です
基本は２コマ †
一通り準備が出来たら早速つくってみましょう
基本は２コマといわれるように２枚の違う絵を交互に動かす事によって簡単なアニメーションを作ります
新しいスプライトを作る †
スプライトって何よって話になると思いますが詳しい事を語りだすと長いので割愛します
喩えていうなら役者を用意するようなものと思ってみてくれないか
単純な２コマアニメ程度であればメインタイムラインに画像を直接置いても問題はないのですが
例えば後々にそのアニメをさせながら横移動したい、フェードアウトさせたい、ボタンに登録したいといった場合
スプライトとしてまとめておいたほうが何かと便利なのよ
シンボルリスト上で右クリック＞アイテムを追加＞スプライト追加（ショートカットは[Ctrl]キー+[R]キー）
「スプライトのプロパティ」ダイアログが表示されます
スプライト名を「パターン１」に変更してサイズが幅300高さ200になっている事を確認します
[ＯＫ]をクリックして閉じます
ここでシンボルリストを見てください
リストに新しく「スプライト □ パターン１」という項目が増えていればＯＫです
プロパティの内容を修正したい場合はパターン１の名前の部分をダブルクリックすれば再度ダイアログが表示されます
スプライトの内容を編集する †
パターン１という名前の役者が出来たと思います
でもこの役者はまだどういった演技をするのか全く知らされていません
ではパターン１を編集してどんな演技をして欲しいのか伝えてみましょう
シンボルリスト内の「パターン１」をクリックして選択します
確認枠の[編集]をクリックします
上記の作業を行うと地味に画面が切り替わります
レイヤーリストの上段に青枠表示されていた「メイン（SWF8〜）」がピンク枠の「パターン１（ID:7）」になっているのを確認してください
これは「今現在何を編集しているのか」が表示されています
この表示をダブルクリックすることで「メイン」の編集に戻る事が出来ます
編集対象が「パターン１」に切り替わっている事を確認したら次は素材の配置です
役者にどんな行動をさせるか指示するのです
シンボルリストの「画像：A-1」「画像：A-2」をレイヤーリストへドラッグ＆ドロップします
（リスト上のアイテムを複数選択したい場合は[Shift]キーを押しながらアイテム名をクリックして下さい）
レイヤーリスト上に次のように表示され、タイムライン上に赤と青の四角ができていると思います
このタイムライン上の赤い四角はキーフレームという名前で、その画像をどのタイミングで表示させるかという目印になります
青色は現在選択されているキーフレームの表示です
キーフレームを増やしたい場合は任意のタイムライン上で[Ctrl]キーを押しながらクリックしてください
レイヤーリストには画像だけではなく音や他のスプライトを配置する事も可能です
画像の位置を調整します（仕上りサイズと素材サイズが同じであれば不要な作業ですが解説の為に違うサイズにしてあります）
レイヤーリスト内の「画像：A-1」をクリックして選択します
キーフレーム編集枠が「画像：A-1」の情報に切り替わった事を確認してください
開始フレームを1 フレームカウントを4 位置・変形タブのＸ：を50にそれぞれ書き換えます
同じようにレイヤーリスト内の「画像：A-2」をクリックして選択します
開始フレームを5 フレームカウントを4 位置・変形タブのＸ：を50にそれぞれ書き換えます
上記の作業を行うとタイムラインが次のように変化していると思います
想像がつくとは思いますが「開始フレーム」はそのアイテムをどのタイミングでスタートするか
「フレームカウント」はそのアイテムをどれ位再生しておくのか、という情報です
グレーの部分が長い程長く表示されている訳です
因みにキーフレームをダブルクリックすればマウスで移動させたり伸び縮みさせることも可能です
感覚的に移動させたい時はこちらの操作方法が向いているかもしれません
見てみよう †
説明しながらなのでやや長く感じられたかもしれませんがそろそろ動くかどうか試してみましょう
先ずは念のために[Ctrl]キー+[S]キーを押して保存をしてください
保存が出来たら仮再生をしてみましょう
タイムライン上の虫眼鏡アイコンをクリックするかメニューバー＞ウインドゥ＞プレビューを選択、
もしくは手っ取り早く[F5]キーを押してください
無事に繰り返しアニメーションが表示されたでしょうか？
すぐに飽きるとおもいますので[Ｘ]ボタンを押して閉じてしまいましょう
ＢＧＭをつける †
素材を組み合わせて新しく２コマアニメの素材を作りました
これとＢＧＭをメインのタイムラインへ配置してみましょう
現在は編集対象が「パターン１」になっているので対象をメインへ戻します
レイヤーリストの上のピンク枠「パターン１（ID:7）」をダブルクリックして編集対象をメインに切り替えます
編集対象がメインに切り替わった事を確認してからアイテムを配置し、長さを調節します
シンボルリストから「スプライト □ パターン１」「サウンド □ BGM：01」をレイヤーリストにドラッグ＆ドロップしてタイムラインに配置します
レイヤーリストの「パターン１」を選択し、キーフレーム編集枠のフレームカウントを10に書き換えます
レイヤーリストの「BGM：01」を選択し、キーフレーム編集枠のループ回数を999に書き換えます
今プレビューするととてもうるさい事になるのでやっちゃ駄目よ
なんでこんな事をするのか詳しい解説は省きますが次の作業を行ってください
どのアイテムでも構わないのでタイムライン編集枠の10フレーム目をクリックして濃灰色の表示に変えます
レイヤーリスト上で右クリックして「アクションレイヤーを挿入」を選択します
レイヤーリストにフレームアクションというレイヤーが挿入されます
フレームアクションが選択されていない状態であればクリックして選択します
キーフレーム編集枠の簡易モードという項目にチェックを入れます
キーフレーム編集枠最下段のプルダウンメニューから停止を選びます
とりあえずおまじないだと思ってやっておいてください
SWFファイルを生成する †
作業が終わったらセーブを行ってからプレビューしてみましょう
問題なく動くのを確認したらSWFファイルを生成します
メニューバー＞SWFファイル生成＞[保存]をクリック
指定したフォルダにSWFファイルが生成されているはずです
何の問題も無く再生できれば完成です、お疲れ様でした！
もう少し作りこんでみたい †
ですよねー
もう少しいじってみたいなーと思えたなら次行ってみましょうか
クリックしたら反応してほしい †
それでは前回作成した２コマアニメFlashに手を加えてクリックした時に別の動きをするように改造してみましょう
方法はいくつかあるのですが、今回は「ボタンにアニメを仕込む」という方法を使います
いきなり言われても意味がつかめないとは思いますがとりあえずそういう物かと思っておいて下さい
大まかな操作感覚は掴めたかと思いますので、ここから先は細かい指定は省いていきます
ファイルの複製を作る †
まずはファイルの複製から行います
メニューバー＞ファイル＞プロジェクトを開く を選択して前回作成した「test-01.csf」を開きます
名前をつけて保存 を選択 test-02.csfとして保存します
新しいパターンを付け加える †
クリックした時に再生されるパターンを付け加えます
[Ctrl]キー+[R]キーを押して新に「パターン２」というスプライトを作成します
編集対象を「パターン２」に切り替え、「効果音：ミポッ」「画像：A-3」を配置します
「画像：A-3」のキーフレーム編集枠 Xを50 Yを-2 に書き換えます
同じ画像を位置を変えて表示するには新しいキーフレームを作成します
タイムライン編集枠に表示されている赤い印がキーフレームです
新しいキーフレームを作成するにはタイムライン編集枠上の任意の位置で[Ctrl]キーを押しながらクリックします
レイヤーリスト「画像：A-3」に対応するタイムライン編集枠の２フレーム目を[Ctrl]キー+クリックして新しいキーフレームを作成します
キーフレーム編集枠の[＞＞]をクリックすると一つ前のキーフレームの内容がコピー＆ペーストされます
Xが50 Yが-2 となっているので Yを0 に書き換えます
フレームカウントを4 に書き換えます
アニメがループすると音が鳴りっぱなしになるのでそれを防ぐ為に「停止」を指定します
フレームアクションレイヤーを挿入し５フレーム目にキーフレームを作成します
キーフレーム編集枠で簡易モードを指定し最下段で停止を選びます
同じようにして「パターン３」を作成します
「パターン３」というスプライトを作成します
編集対象を「パターン３」に切り替え、「画像：A-1」「効果音：シュ」を配置します
「画像：A-1」のキーフレーム編集枠 フレームカウントを5 Xを50 に書き換えます
フレームアクションの５フレーム目で「停止」を指定します
不要なキーフレームがあった場合はクリックで指定したあと[Delete]キーで削除できます
ボタンを作る †
ボタンには以下の様な状態に画像やスプライトを割り当てる事が出来ます
- 通常時（必須）
- 押下時
- マウスカーソル通過
- ボタンをクリックしてはいないがマウスカーソルが重なっている時
今回のFlashは上記の割り当てを利用してそれぞれにアニメを割り当てて絵を切り替える手法という事です
それではボタンアイテムを作成してみましょう
スプライトを作成した時と同じメニューからも作成できますがショートカットの[Ctrl]キー+[B]キーを押した方が楽です
[Ctrl]キー+[B]キーを押して「ボタンのプロパティ」ダイアログを表示します
ボタン名を「アニメボタン」に書き換えます
通常時・押下時・マウスカーソル通過をそれぞれ「パターン１」「パターン２」「パターン３」と設定します
当たり判定の自動判定項目に忘れずにチェックを入れておきます
メインに配置する †
メイン編集に戻って今作成した「アニメボタン」と「パターン１」を置き換えましょう
レイヤーリスト上の「パターン１」を選択して[Delete]キーで削除する（シンボルリストのパターン１が消されていないか確認しましょう）
「アニメボタン」を配置し開始フレームを1 フレームカウントを10 に書き換えます
完成 †
念のために保存を行い、プレビューを行ってください
問題なく動いたらSWFファイルを生成して確認、完成です
お疲れ様でした！
おしまいに †
なるべく文章量を減らして駆け足で解説してみましたがそれでも読む気が起こらない文章量だと思います
あちこち端折ったりしているので判りづらい部分などはだんだんと修正していこうかなとは思っています
最後まで真面目に読んでくれたこやすありがとう、おつかれさま!
何かあればコメントアウトにでもよろしくです
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")