2008年01月18日

シンボルの入れ子

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

<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にする→完成
これでようやく、一番最初に示したサンプルの動き(回転した輪が左右に弾むアニメーション)が完成する。


ラベル:入れ子 重要
posted by tama at 04:54| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

2008年01月17日

時間の短縮とキーフレーム削除

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

posted by tama at 01:36| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

だんだん大きくなる(小さくなる)

シンボルのサイズがだんだん拡大する、または縮小するアニメーションを作りたい場合、終点のシンボルサイズを自由変形ツールで拡大または縮小してあげればよい。
  1. ステージにインスタンスを配置
  2. 終点(サンプルは12フレーム)にキーフレームを配置し、インスタンスを移動
  3. モーショントゥイーンを設定する
  4. 終点(サンプルは12フレーム)フレームを選択した後、インスタンスを選択
  5. 終点のインスタンスを自由変形ツールで拡大、または縮小する
サンプルはこちら
posted by tama at 01:30| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

だんだん消える(アルファの設定)

要素がだんだんと消えていくようにするには、アルファ(透明度)の設定を行う。シンボルが左→右へ移動しながら、徐々に消えていくアニメーションを作ってみる。
  1. カラー設定ステージにインスタンスを配置
  2. 終点(サンプルは12フレーム)にキーフレームを配置し、インスタンスを移動
  3. モーショントゥイーンを設定する
  4. 終点(サンプルは12フレーム)フレームを選択した後、インスタンスを選択
  5. 画面下のプロパティウインドウにあるカラー設定をアルファにし、0%にする(透明になる)
アルファ設定は、インスタンスに対して設定すること。サンプルはこちら
ラベル:アルファ
posted by tama at 01:25| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

動きの加速と減速

モーショントゥイーンを単純に設定しただけでは、動きは一定の速度を保ったままだ。加速させたり、減速させたりして動きに変化を持たせたい時はイージングを設定を行う。
設定は単純。画面下のプロパティウインドウのイージングの設定(デフォルトは0)を以下のようにする。
  • 加速させたい=イージングを-100(イン)にする
  • 減速させたい=イージングを100(アウト)にする
イージング設定画面

それぞれのサンプルは次の通り。加速サンプル減速サンプル

追記:サンプルを見たら、加速がうまくいってない。減速で上書きしちゃったかも(w 作り直すのが面倒なので、そのまま放置する。ちなみに、加速は遅い→速い、減速は速い→遅い、という感じに見えるはず。
ラベル:イージング
posted by tama at 01:00| Comment(1) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

アニメーションを作る(基本編)

アニメーションをさせるには、インスタンスを使う。なので、矩形は必ずシンボル化すること。また、一つの動きは一つのレイヤーでしか表示できない。複数動きを設定する場合は、レイヤーを分けること。まずは、基本なので、単純な円形を左右に動かすアニメーションを作る。
  1. ステージに円形を描き、シンボル化(F8)
  2. 時間の確保。デフォルトの設定は、12fps(1秒12コマ)なので、12フレーム目を選択し、F5。こうすると、12フレームまで時間が確保され、長方形の□が表示される<図1>
  3. 終点にキーフレームを挿入。12フレーム目を選択し、F6。確保したい時間と終点が一致するならば2を飛ばして、いきなりF6でキーフレームを打ってもよい。キーフレームが打たれると、終点(この場合は12フレーム目)に●が表示され、一つ前のフレーム(この場合は11フレーム)に□が移動する<図2>
  4. 終点が選択されている状態で、ステージにあるインスタンスを、最終到達地点まで移動する
  5. モーショントゥイーンを設定する。始点(この場合は1フレーム目)を選択し、右クリック→モーショントゥイーンを作成するを選ぶ。そうすると、始点から終点までの間に→が表示される<図3>
  6. プレビューすると、円形が左から右に移動する(特に設定していないので動きがループする)
fla_ex04.gif
なお、サンプルアニメはこちらから
時間確保=F5(長方形□が表示される)
キーフレーム挿入=F6(●が表示される)

posted by tama at 00:33| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

2008年01月16日

インスタンスの一部だけ色を変更する

シェイプをコピーして、ステージに複数配置すると、その分だけデータは重くなる。
単純な言い方をすると、シェイプ1つのデータが10だとして、10個配置すると、10×10個=100となる。
これに対して、シンボル化したものをインスタンスとしてステージに配置し、このインスタンスをコピーして複数配置しても、データの重さに変化はない。インスタンスとはいわばエイリアスのようなもので、10×1個という計算になる。

ということは、シンボルは親のようなもので、親に変化を加えると、当然子たるコピー群は、直接触らずとも親の変化をまんま反映するということになる。つまり、青い円形のシンボルを緑に変更すると、すべてのインスタンスが緑になるというわけである。

しかし、複数配置したインスタンスのうち、たとえば1つだけ色を変更したい場合がある。この時は、変更を加えたいインスタンスを「分解」(Ctrl+B)する必要がある。

インスタンスの一部だけ色を変更する際のイメージ図図では、まずは青い円形を1つ作り、それをシンボル化した。さらに、このシンボルを4つステージに配置した。このうち、Dだけを緑にする方法は次の通り。
  1. Dを選択し、分解する=Ctrl+B→シェイプに戻る
  2. Dを選択し、色を変更する(こうすると、ABCには影響がないまま、Dだけ色の変更が可能)
  3. 色が変更されたDを選択しF8でシンボル化
さて、では、AもDと同じ色に変更したくなった場合はどうするか。
その場合は以下の通り。
  1. Aを選択し、画面下のプロパティウインドウにある「入れ替え」ボタンをクリック
  2. シンボルが選択できるので、上記3で色変更したシンボルを選択、完了
この時、DとAの基準点が異なると、入れ替えした時に配置が崩れてしまうので注意が必要。基準点の変更の方法はこちらで確認できる。
分解=Ctrl+B
ラベル:重要
posted by tama at 23:57| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

インスタンスと基準点の変更方法

ステージ(Flashのカンバス)に描かれたシェイプ(矩形)をF8でシンボル化したものは、画面右ウインドウにある「ライブラリ」に収容される。このライブラリからシンボルを選択して、そのままカンバスにドラッグ&ペーストすると、これが「インスタンス」となる。

インスタンスの表示イメージ図インスタンスは、図のように、選択すると周囲を水色のラインが表示される。また、シンボル化する際に指定した基準点が「+」で表示される。図の場合はデフォルトの左上を基準点としたため、左上の角のところに、「+」が表示されている。なお、中心にある◎は、自由変形ツールを使用する際の中心点である。デフォルトはその名の通り中心に位置しているが、これを移動することも可能。

<基準点の変更の仕方>
  1. ライブラリにあるシンボルをWクリック
  2. 修正→整列→ステージに合わせる、を選択(チェックが入る)
  3. 修正→整列→中心点を移動したいところに合うように整列を選択(「+」が移動する)
ちなみに、中心点の移動は、◎をドラッグすればOKだ。
posted by tama at 23:27| Comment(2) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

何はともあれシンボル化

アニメーションを作るには、要素…たとえばシェイプをシンボル化しないことにはできない!何はともあれ、シンボル化をしなくては事が進まない。シンボル化するには、次の通り。
  1. 要素(シェイプ)をクリックして選択
  2. ファンクションキーのF8→シンボル化完了

シンボル化=F8
posted by tama at 01:47| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

PhotoshopデータをFlashに読み込む方法

Photoshop(フォトショ)のデータをFlashに読み込む方法は次の通り。
  1. フォトショでデータのカンバスサイズを確認する
  2. Flashのカンバスサイズを1に合わせる
  3. フォトショで各要素をスライスする。この時、要素の周辺2pxほどの余白をとり、ぎりぎりにスライスしない
  4. 3をWeb用に保存する(ファイル形式はPING24)
  5. フォトショでスライスした要素のサイズ、座標位置(X,Y座標)を確認
  6. Flashで「ファイル」→「読み込み」→「ステージに読み込み」で4を読み込む
  7. Flashのカンバスの左上に読み込んだデータが配置される。これを選択し、画面下にあるプロパティウインドウのXY値に5で確認した数値を入力する
ラベル:フォトショ 重要
posted by tama at 01:37| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

IllustratorデータをFlashに読み込む方法

Illustrator(イラレ)のデータをFlashに読み込む場合、単純なコピペだと正確には読み込めない。正しくは次の通り。
  1. イラレで、「ファイル」→「書き出し」→SWF形式
    • 「HTMLを生成する」のチェックを外す
    • 「曲線の精度」が10であることを確認(デフォルト値)
  2. Flashで「ファイル」→「読み込み」→「ステージに読み込み」で(1)で保存したSWFファイルを選択
読み込まれたデータのシェイプは、グループ化されているが、シェイプをWクリックすると編集できる。
ラベル:イラレ 重要
posted by tama at 01:25| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

クループ化と分解

Flashの場合、シェイプを重ねて描いてしまうと、下のシェイプが上のシェイプに上書きされてしまい、合体してしまう。
これを回避する方法は、次の2つがある。
  • 各シェイプをグループ化する
  • 各シェイプを別々のレイヤーに配置する
グループ化を解除して、シェイプをバラバラにして扱いたい時は、分解を行う。分解の方法は、ショートカットで「Ctrl+B」である。
分解(=グループ化解除)=Ctrl+B
posted by tama at 00:45| Comment(0) | TrackBack(0) | Flash | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。