flashup 10

「タイムラインを使ってプレゼンテーションツールを作ってみよう」

1

FLASHUP#10 orange-suzuki.com 鈴木克史

2011.9.18(日)

場所：スターバックスセミナールーム

特別協賛:ラフサンド株式会社様

2 orange-suzuki.com

本日のメニュー

3

1. タイムラインを使った簡単なアニメーションを作る

2. タイムラインを使ってプレゼンテーションツールを作る

4

タイムラインを使った簡単なアニメーションを作る

(motionフ゜ルダ)

orange-suzuki.com


5

①楕円ツールを使って円を作成します。


6

②ゝブジクトを選択し、ムービークリップに変換します。


7

③ラブラリを確認しましょう。


8

④いよいよゕニメーションを作成します。まずはタムランの20フレーム目を右クリックし、「フレームを挿入」をクリックします。すると、次のようになります。


9

⑤次にキーフレームを作成します。20フレーム目を右クリック、「キーフレームの挿入」をクリックします。すると、次のようになります。20フレーム目の円をステージの好きな場所にマスで移動させます。


10

⑥最後に1フレーム目を右クリック、「クラシックトーンを作成」をクリック。すると、次のようになります。

ENTERキーを押し、ゕニメーションを確認してみましょう。以上でクラシックトーンを使ったゕニメーションが作成できました。


11

⑦では、続いてゕニメーションの強弱をつけてみましょう。1～20フレームの好きなところを選択し、プロパテゖゖンドのージング値を移動させてみましょう。その後ゕニメーションを確認します。


12

⑧ージングが-100の時、徐々にスピードが早くなって止まります。

ージングが100の時、徐々にスピードが遅くなって止まります。

ーズゕト：

最初早く、次第に遅くなる

ーズン：

最初遅く、次第に早くなる


13

⑧では続いて、最初遅く、だんだんスピードが早くなり、最後また次第にスピードが遅くなるゕニメーションを作ってみましょう。

一般的には、「ーズンゕト」と言います。

「ーズンゕト」

手順１： 10フレーム目にキーフレームを作成：F6キー

手順２：最初のトーンをーズンに設定

手順３：最後のトーンをーズゕトに設定


14

⑨さらにもう一つ作ってみましょう。ーズンゕトのゕニメーションで、かつ最後の方は非常にゆっくり止まるゕニメーションを作ってみましょう。

「ーズンゕト ver2」

手順１： 1～20フレームでーズン(-100)を作成

手順２： 17フレーム目にキーフレームを作成

手順３： 17フレーム目のキーフレームを8フレーム目にドラッグで移動させます。

手順４：後半のージングをーズゕト(100)に設定


15

⑨同じージングでも色々なニュゕンスがあるということがわかりますね。

「ーズンゕト」

じわー、キュッ、じわー

「ーズンゕト ver2」

じわー、キュッ、じわーーーー


16

⑩それでは、好きなゝブジクトを作成し、トーンを作ってみましょう。

～休憩タム～

17

タイムラインを使ってプレゼンテーションツールを作る

(presentationフ゜ルダ)

orange-suzuki.com


18

①全体のシーン構成

゛ンデゖング

ゝープニング

コンテンツ1

コンテンツ2

コンテンツ3～5 上と同じパターン


19

②制作のポント：

1. シーンの複製同じモーションを複製することが多いため、「シーン」というタムランのツールを使って作成しています。

2. ムービークリップの複製さらにシーンの複製後、ムービークリップの複製を行い、別々のゝブジクトのゕニメーションを作成しています。

3. 画面全体のフードゕト大きなゝブジクトをフードゕトさせる場合、白いゞバーをかけ、そのゞバーの透明度をゕニメーションさせることで実現させます。

4. タムランの停止と再生タムランを一時停止させ、ボタンをクリックすることで再生させています。


20

③ シーンについて「シーン」はゝーサリング時では別々のタムランですが、SWFフゔルを作成すると、1本のタムランとなるため、シーンの終わりが次のシーンの最初につながるようになっています。

1本のタムランに

シーンを使うメリット：

・画面の差し替え、入れ替え、削除など、1本のタムランを使う場合に比べてわかりやすい。

・複製を使うことで同じシーンを作りやすい。


21

Q. シーンを複製させるには？

A. シーンゖンドを開き、シーンの複製ボタンをクリックします。


22

Q. ムービークリップを複製させるには？

A. タムラン上でシンボルを右クリック→シンボルの複製。

または、ラブラリパネル上で右クリック→シンボルの複製


23

Q. ゕニメーションを一旦停止させ、ボタンのクリックで再び再生させるには？

A. ボタンとなるムービークリップを作成し、そのボタンのタムラン上(ボタンをダブルクリックした際のタムラン)で以下のスクリプトを記述します。こうすることで、ボタンを配置するだけでムービーが停止します。

//親のタムランを停止させる

MovieClip(parent).stop();

//このボタンにマスを載せたときに指マークにする

this.buttonMode = true;

//クリックしたとき

this.addEventListener(MouseEvent.CLICK,

function(e:MouseEvent):void{

//親のタムランを再生させる

MovieClip(parent).play();

});


24

Q. ムービークリップをフードンで表示し、フードゕトで消えるようにするには？

A. 透明度をゕニメーションさせることで実現します。例えば、ゝープニングにあるこちらの箇所では、8フレーム目のゝブジクトの透明度を0、25フレーム目で100、36フレーム目で再び0としています。

25

おわり

ご意見、ご感想、ご質問など、お気軽にお寄せください。

http://orange-suzuki.com/blog/

flashup 10

Technology