Honey　Flash

これまでは、サンプルのswfファイルをseesaaブログにアップして、単にそのファイルへの直リンクをはっていたわけだが、これだと表示サイズが本来の趣旨とは異なるサイズで表示されてしまうので、エントリー内にFlashを表示させたい、と思ってやり方をあれこれ調べてみたら、方法があった。

他のブログは検証していないので分からんが、seesaaブログにおけるFlashの表示方法は次の通り。

1. swfファイルを「ファイルの追加」でアップロードする
2. アップロード先のURLをコピーしておく
3. エントリーする際に「HTML」ボタンをクリックする→別ウインドウが開く
4. デフォルトで</br></br>が入っているので、下記のソースを入力する→完了！

ソースは以下の通り。

<embed width="swfファイルの横幅の数値" height="swfファイルの縦幅の数値" src="2でコピーしたURL"></embed>

例）横幅300px、縦幅200pxのtest.swfの場合：アップ先はhttp://test.comとする

<embed width="300" height="200" src="http://test.com/test.swf"></embed>

こうすると、Flashがいい感じに表示される。いい感じだ(*´∇｀*)

作ってもらった音声ファイルを早速FlashのBGMとして使おうとしたら
悲しいことに、後半部分は音が入っておらず、まんま使えず( ；∀；)
この状態のまま使うと、おかしなことになるので、音声ファイルを編集することにした。

そこで、フリーの音声ファイル編集ソフトが登場。
使ったソフトは、「Audacity」。mp3やwav形式などの音声ファイルを編集できる多機能ソフトで、余計な部分を削除したかったり、無音部分を挿入したり、さらには複数の音声ファイルを合成できる。

ダウンロードはこちら（for windows)
http://audacity.sourceforge.net/download/windows

削除したい場合は、範囲を選択して削除。
複数の音声ファイルを合成したい場合は、それぞれのファイルをソフトのUI上にドラッグして、wav形式で書き出し、としてあげればよい。なんて便利なんだ！
いろいろと便利な使い方が紹介されているページはこちら。
http://xucker.jpn.org/pc/audacity/

ちなみに・・・・・
単に余計な部分を削除したい程度の場合は、「soundengine」がいい感じ。
http://www.cycleof5th.com/products/soundengine/

ただし、soundengineはmp3が読み込めない。これは残念。
なので、変換ソフトが必要である。

そんな時は、「午後のこ〜だ」。ちょっと萌え系なのが抵抗あるけど・・・（ｗ
でも、なかなか便利であった。
http://www.marinecat.net/free/windows/mct_free.htm

最初は、単に不要部分を削除するだけ、と思っていて、soundengine→午後のこ〜だとインストールしたのだが、最終的にその音源に波の音をかぶせたくなり、仕方なしにAudacityもインストールした。思えば、最初からAudacityにしておきゃ、全ては解決だった・・・orz

単純な動きは、ステージに矩形を描き、それをモーショントゥイーンで動かせばよかった。しかし、これでは表現に限界がある。複雑な動きは「シンボルを入れ子構造にする」必要がある。サンプルのような動きを実現するには、以下の通り。

＜1：まずは単に輪が回転するアニメーションを作る＞

1. Illustratorデータをステージに読み込む（グループ化された状態）
2. 読み込んだ図形を選択して、シンボル化（グラフィック）
3. グラフィックシンボル化された図形を選択して、さらにシンボル化（ムービークリップ）
4. ムービークリップ化されたシンボルをWクリックする（シンボルの編集画面に移動）
5. 24フレーム目のところに時間確保とキーフレーム挿入（F6）
6. 24フレームに挿入したキーフレームを25フレーム目にドラッグして移動
7. 1フレーム目を選択してモーショントゥイーンを作成
8. 1フレーム目を選択して、プロパティウインドウの「回転」を「時計回り」に設定
9. 24フレーム目を選択してキーフレームを挿入（F6）
10. 25フレーム目を選択して、フレーム削除（Shift+F5）
11. 1フレーム目を選択して、プロパティウインドウの回転回数を「0」にする

上記までを実行すると、こんなものができる。
さて、なぜ、25フレームで一度作って、1フレーム切る作業をわざわざやっているかというと、単に、25フレーム設定で回転数1にすると、ループした時に1フレーム目と25フレーム目が同じ動きのため、一瞬動きが止まったように見えてしまう。スムーズな動きに見せるためには、この重複を解消しなければならない。しかし、24フレーム目の輪の傾きを自分で設定するのは困難。そのため、一度、25フレームでモーショントゥイーンを実行し、24フレームの傾きを自動的に作ったところにキーフレームを挿入して動きを固定し、不要な25フレームを削除している。

＜2：回転するインスタンスを上下に弾ませるアニメーションを作る＞

1. シーン1に戻り、ムービークリップのインスタンスを画面上のほうに配置する
2. インスタンスの中心点を下中央に移動しておく
   
3. 24フレーム目にキーフレーム挿入（F6）
4. 11フレーム目にもキーフレーム挿入（F6）
5. インスタンスを下に移動する
   
6. 12、13フレーム目にもキーフレーム挿入（F6）
7. 1フレーム目を選択し、モーショントゥイーンを作成する
8. 1フレーム目を選択し、イージングを-100（イン）にする
9. 13フレーム目を選択し、モーショントゥイーンを作成する
10. 13フレーム目を選択し、イージングを100（アウト）にする
11. 12フレーム目のインスタンスを自由変形ツールで扁平をかける

上記までを実行すると、輪が回転しながら、上下するアニメーションができる。こんな感じ。
ちなみに、12フレーム目のインスタンスに扁平をかけるのは、弾んむような表現をするためのもの。

＜2：弾む輪を左右に移動させる＞

1. 2で作ったアニメーションをシンボル化する
   1. シーン1の1〜24フレーム目を選択（Shift+始点+終点）
   2. 編集→タイムライン→フレームをコピー
   3. 空のシンボルを作る（挿入→新規シンボル：グラフィック→シンボル編集画面へ移動
   4. 新規シンボルの1フレーム目を選択し、編集→タイムライン→フレームをペースト
2. 中心点を中央に移動する
   
   1. 1フレーム目を選択し、複数フレーム編集ボタンをクリック
   2. フレームの上にオニオンスキンマーカーが表示されるので、24フレーム目まで右にドラッグして対象範囲を伸ばす
   3. 【・】アイコンをクリックして、オニオンスキンマーカーを固定する
   4. ＋の中心点が中央下にある基準点と一致するよう移動する（3つの画像ごと移動しないと壊れる。下に移動した際の輪が地面に接触するように）
   5. 複数フレーム編集ボタンをクリックしてを解除する
      
3. シーン1に戻り、2〜24フレームを削除（Shift+F5）
4. 1フレーム目を選択し、プロパティウインドウでトゥイーンを「モーション」から「なし」に変更
5. ステージに残ったインスタンスを削除し、1で作ったシンボルのインスタンスをステージの左側枠外に配置する。この際、中心点が地面に接触するようにインスタンスを配置（中心点はインスタンスからはみ出て下にあるので注意）
6. 24フレーム目にキーフレームを挿入
7. 1フレーム目を選択し、モーショントゥイーンを作成
8. 24フレーム目を選択し、インスタンスをステージの右側枠外に配置
9. 1フレーム目のイージングを0にする→完成

これでようやく、一番最初に示したサンプルの動き（回転した輪が左右に弾むアニメーション）が完成する。

F5で一度時間確保してしまうと、フレームをドラッグするなどして短縮（対象フレーム数を削除）することはできない。時間短縮したいフレームを選択（複数フレームの場合は、削除したいフレームの始点から終点をShiftキーを押しながらクリック）し、Shift+F5で削除することができる。
また、キーフレームの削除は、Shift+F6で可能。

時間の短縮＝Shift+F5
キーフレームの削除Shift+F6

シンボルのサイズがだんだん拡大する、または縮小するアニメーションを作りたい場合、終点のシンボルサイズを自由変形ツールで拡大または縮小してあげればよい。

1. ステージにインスタンスを配置
2. 終点（サンプルは12フレーム）にキーフレームを配置し、インスタンスを移動
3. モーショントゥイーンを設定する
4. 終点（サンプルは12フレーム）フレームを選択した後、インスタンスを選択
5. 終点のインスタンスを自由変形ツールで拡大、または縮小する

サンプルはこちら