はじめてのムービークリップ

TOP > はじめてのムービークリップ

はじめてのムービークリップ

今回はムービークリップを使ってみます
ところでムービークリップってなんでしょう？簡単に説明しますと
ムービー内のフレームで再生されるムービー(子供のムービー)のことで
プログラム(ActionScript)する事により
マウスの動きを受けとってボタンのような役目をさせたり
数値による拡大・縮小・回転等、複雑な動きができる
という代物です。が、ここではムービー内のムービーというところまでやります
プログラムについては、また別の機会にさせていただきますね

今回の作業内容は以下の通りです

作成するムービーの下準備を行う

ムービークリップ用のムービーを作成する

作ったムービーをムービークリップに変換する

ムービークリップの移動とトゥイーン数の変更

ちなみに今回作るものはこんな感じ、みんなの大好きなこの人(？)を使ってみました

一見、複雑そう(でもない？)な動きもムービークリップを使うと案外簡単に実現する事ができます

作成するムービーの下準備を行う

まず、ステージのサイズを設定してみましょうサイズはドラッグで変えられるのですが今回は数値で設定してみますやり方は [ムービー]メニュー ⇒ [幅／高さ] または [画面上で右クリック] ⇒ [幅／高さ] で【ムービーサイズ】画面を表示し幅：400ピクセル・高さ：200ピクセルにします
次に、再生速度の設定をしてみましょうやり方は [ムービー]メニュー ⇒ [再生速度]で【再生速度】画面を表示し再生速度：20ｆｐｓにします
再生速度(ｆｐｓ)とは１秒間に切り替える画面数と思っていただければいいと思いますパラパラまんがで考えると１秒にめくるページ数ということですこの数値が大きいほどスムーズに動き、小さいほど粗くカクカクした動きになりますあまり高く設定すると処理能力の低いマシンでは動き自体が重くなります
ついでに、デフォルトトゥイーンも設定してみましょうやり方は [ムービー]メニュー ⇒ [デフォルトトゥイーン]で【デフォルトのトゥイーン】画面を表示しキーフレームごとのトゥイーン：８にします
トゥイーンとは次のキーフレームに移動するまでに自動的に作成される画面数のことでデフォルトは初期値(あらかじめセットされる値)を意味しますキーフレームを追加したときにここで設定した値がセットされて作成されます
ここで設定した状態は作成中でも変更する事ができますそれから作品を作るごとに毎回この設定をしなければいけないわけではありませんまた、一度設定すると次の作品を作るときに前回の状態が継承されますみなさんの作品や状況に応じて変更していただければ結構です他にも設定するところはあるのですが今回はこのぐらいで勘弁してください

ページの先頭へジャンプ

ムービークリップ用のムービーを作成する

ここで作業する内容ははじめてのFlashとほぼ同じ内容なので
直接ここを見られた方はそちらも参考になるかもしれません
まずはこんな感じのムービーを作ってみましょう

ツールボックスのテキストを追加

アイコンを選択しマウスカーソルが十字になっていることを確認したら
ステージ左上でクリックし【テキストとフォント】画面を表示します

∧＿∧ （　´∀｀）（　　　　）｜｜　| （_＿）＿）

次に▲このテキストをコピーして【テキストとフォント】画面内のテキストに貼り付けます

設定はフォント：ＭＳ　Ｐゴシック、スクリプト：Japanese、スタイル：Regular 12pt でいいと思います
ここまでできたら[ＯＫ]ボタンをクリックして【テキストとフォント】画面を閉じます

ステージの左上にうまくテキストが作成できましたか？
おかしな位置にできていたらステージ左上にドラッグして下さい

次にキーフレームを２つ追加します
[フレーム]メニュー ⇒ [Add Copy of Frame(フレームのコピーを追加)]を選択
もしくは、この

アイコンをクリック ⇒ [Add Copy of Frame]を選択
この操作を２回繰り返せばキーフレーム３まで出来ていると思います

キーフレーム３が出来たらキーフレームのスクロールや【タイムライン】画面を使って
キーフレーム２に移動しテキストを下に下げます

まっすぐ移動したいときは対象を選択し、キーボードの[矢印]キーで移動できます(拡大倍率×１で１ドット分)
また[Shift]＋[矢印]キーだともう少し大きく動かす事が出来ます(拡大倍率×１で１０ドット分)

ここまで出来たらブラウザで表示してみましょう
表示の仕方は[再生]メニュー(または[ムービーを再生]アイコン) ⇒ [Webブラウザで再生]を選択するか
またはショートカットキー[Ctrl]＋[スペース]キーでしたね
サンプルのように動きましたか？上手く出来たら製品版の方はここで保存しておきましょう
上手く動かなかった人はもう一度やってみてください

ページの先頭へジャンプ

作ったムービーをムービークリップに変換する

さて、ムービークリップを作成するときが来ましたといっても今回は先ほど作ったムービーを変換するだけですツールボックスの選択アイコンを選択し、選択範囲をすべてのフレームにしますその状態でどのキーフレームでもいいのでテキストをクリックしますこれですべてのフレームのテキストが選択されているはずですすべてのフレームで選択されたかを確認するには【タイムライン】画面が便利です【タイムライン】画面の表示は[表示]メニュー ⇒ [スコア／タイムライン]を選択するか、このアイコンをクリックしますなお、この選択が上手く出来ていないと正しく変換できないのでよく確認してください
上手く選択できたらムービークリップに変換しますやり方は [図形]メニュー ⇒ [ムービークリップへ変換]で変換できますまたはツールボックスの上から３番目の左列アイコンの右下向きの小さな三角をクリックして[ムービークリップに変換]アイコンを選択してください (小さな三角のクリックは慣れてないとチョット難しいかもしれません) 正しく変換できると【タイムライン】画面のテキストの名前とアイコンが変わっているはずです
選択に失敗したまま変換すると【タイムライン】画面がこんな風に表示されていたりします初心者の方がこの状態からやり直すことは困難なのでムービークリップ用のムービーを作成するから作成してください正しく変換出来ているようでしたらブラウザで確認してみましょう成功していれば先ほど作ったものと同じように動いているはずです ▼これは失敗例です上手く動きましたか？先ほど作ったものと動きが同じなのでムービークリップの威力が良く分りませんねとりあえず成功した製品版の方はここで保存しておくといいかもしれませんさて…残念ながら失敗してしまった人は次の２通りに分かれますムービークリップ用のムービーを作成するで保存してある人　⇒ 保存してあるファイルを呼び出して、もう一度作ったムービーをムービークリップに変換するから確認してくださいムービークリップ用のムービーを作成するで保存してない人　⇒ もう一度ムービークリップ用のムービーを作成するから作成してください

ページの先頭へジャンプ

ムービークリップの移動とトゥイーン数の変更

いよいよ今回の作業の最後です。ここで行う作業は
キーフレーム２のムービークリップの移動とキーフレーム間のトゥイーン数の変更です

まずツールボックスの選択アイコンを選択し、選択範囲を現在編集中のフレームにします

つぎに【タイムライン】画面やキーフレームのスクロールを使って
キーフレーム２に移動しムービークリップをステージ右いっぱいに移動します

これでキーフレーム２のムービークリップの移動の移動が完了しました

あとはキーフレーム間のトゥイーン数の変更です

←このボタンをクリックして
【このキーフレームと次のキーフレームの間】画面を表示し
60トゥイーンにします
この操作をキーフレーム１・キーフレーム２で行います

ここまで出来れば完成です。ブラウザで確認してみてください

サンプルのように動いた方、おめでとうございます
あとはパブリッシュしてswfファイルを作成すれば完成です
成功した製品版の方はここで保存しておくといいかもしれません

以上で今回の作業は終わりです。お疲れ様でした
また最後までお付き合いいただきまして、ありがとうございました

ページの先頭へジャンプ

あとがき
今回行った作業は上下に動くムービーを作成 ⇒ ムービークリップに変換し
ムービークリップを左右に動かす事でステージいっぱいに動き回る
というものを作成してみましたが、いかがでしたでしょうか？
ムービー内のムービー(子ムービー)のイメージが掴めましたでしょうか？
他にも歩いている人や動物・羽ばたいている鳥のムービークリップを作成し
それを動かす事で活き活きとした表現が出来たりといろいろなことに流用できます
慣れないうちは、とっつきにくいかもしれませんが使い慣れるととても便利な機能です
ぜひいろいろ試して使いこなしてみてください

また、最初に書きましたようにムービークリップはボタンのような使い方をしたり
プログラムで複雑な動きや時間を監視させるといったことができます
とにかくムービークリップはいろいろな使い方が出来るのでマスターしておくといいと思います

ご意見・ご要望がありましたら掲示板に書き込んでいただけますとありがたく存じます

フレームを表示

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送