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