スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

[Flash CS5]文字が少しずつ書かれるアニメーションを作る

記事タイトル枠

こんにちは!ちょっとご無沙汰していましたが皆様いかがお過ごしでしょうか。

今日は、Flashコンテンツでよく見る、文字が少しずつ書かれていくというアニメーションの作り方を紹介します。簡単ですよ!

Adobe Flash Player を取得

以下、大まかな手順です。

  1. 新規ファイルを開く。
  2. テキストツールで文字を入力する。
  3. テキストを2回分解し、シェイプにする。
  4. キーフレームを挿入→文字の後ろをちょっと消す。
  5. 4を、文字が全て消えるまで繰り返す。
  6. フレームを全て選択し、「フレームを反転」する。
  7. 最後でアニメーションを止める場合、ActionScriptを設定する。

1.新規ファイルを開く。

Flash Professionalを立ち上げ、新規ファイルをActionScript3.0で開く。

ステージサイズの変更をする場合は、プロパティパネルの「サイズ」右の[編集]ボタンをクリック後、ドキュメント設定ダイアログにて幅・高さの数値を入力する。
ステージの色も変えられます。

110721_01.jpg

110721_02.jpg

2.テキストツールで文字を入力する。

好きなフォントで好きな文字を入力します。後でシェイプにしてしまうので、他のPCでの表示可否を気にしなくてもいいです。

110721_03.jpg

3.テキストを2回分解し、シェイプにする。

テキストが入力できたら選択ツールに持ち替え、テキストを選択します。
テキストの上で右クリックし、[分解]を選択。1度目の分解でオブジェクトになりますので、続けてもう一度右クリック→[分解]でシェイプにします。

110721_04.jpg

110721_05.jpg

4.キーフレームを挿入→文字の後ろをちょっと消す。

[F6]キーでキーフレームを挿入したら、消しゴムツールに持ち替え、文字の後ろを少し消します。

110721_06.jpg

5.4を、文字が全て消えるまで繰り返す。

キーフレームを挿入→後ろをちょっと消す、の作業をひたすら繰り返します。
長いテキストだとちょっと大変ですが…。

110721_07.jpg

6.フレームを全て選択し、「フレームを反転」する。

フレームを全て選択し、フレームの上で右クリック→[フレームを反転]を選択します。

110721_08.jpg

※フレームを選択する際は、いったんタイムラインパネルの何もないところをクリックして(フレームが一つも選択されていない状態)からドラッグ、または1フレーム目をクリック後、最後のフレームを[Shift]キーを押しながらクリックして選択します。

[Ctrl+Enter]でムービープレビューしましょう。
できましたね!

7.最後でアニメーションを止める場合、ActionScriptを設定する。

最後のフレームでストップさせる場合。まず新規レイヤーを作成します。
新規レイヤーの最後のフレームを右クリック→[空白キーフレームを挿入」します。
そのフレームを選択して、[F9]キーでアクションパネルを開き、1行目に「stop();」と記述します。

110721_09.jpg

これで完成。簡単でしたね!

文字だけでなく、線で描かれたオブジェクトがだんだん現れるとか消えていくとかいうような表現にも使えそうですね。

お疲れさまでした!

このエントリーをはてなブックマークに追加
ページトップへ戻る

コメントの投稿

非公開コメント

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。