Flashup第10回発表資料「タイムラインを使ってプレゼンテーションツールを作ってみよう」

1. 「タイムラインを使ってプレゼンテー
ションツールを作ってみよう」
2011.9.18(日)
場所：スターバックスセミナールーム
特別協賛:ラ゗フザンド株式会社様
FLASHUP#10
orange-suzuki.com 鈴木克史
1

2. 本日のメニュー
orange-suzuki.com
2

3. 1. タイムラインを使った簡単なアニメーションを作る
2. タイムラインを使ってプレゼンテーションツールを作る
3

4. タイムラインを使った
簡単なアニメーションを作る
(motionフ゜ルダ)
orange-suzuki.com
4

5. タイムラインを使った簡単なアニメーションを作る
①楕円ツールを使って円を作成します。
5

6. タイムラインを使った簡単なアニメーションを作る
②ゝブジ゚クトを選択し、ムービークリップに変換します。
6

7. タイムラインを使った簡単なアニメーションを作る
③ラ゗ブラリを確認しましょう。
7

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

9. タイムラインを使った簡単なアニメーションを作る
⑤次にキーフレームを作成します。20フレーム目を右クリック、
「キーフレームの挿入」をクリックします。すると、次のようになり
ます。20フレーム目の円をステージの好きな場所にマ゙スで移動さ
せます。
9

10. タイムラインを使った簡単なアニメーションを作る
⑥最後に1フレーム目を右クリック、「クラシックト゘゗ーンを作成」
をクリック。すると、次のようになります。
ENTERキーを押し、ゕニメーションを確認してみましょう。以上で
クラシックト゘゗ーンを使ったゕニメーションが作成できました。
10

11. タイムラインを使った簡単なアニメーションを作る
⑦では、続いてゕニメーションの強弱をつけてみましょう。1～20フ
レームの好きなところを選択し、プロパテゖ゙ゖンド゙の゗ージング
値を移動させてみましょう。その後ゕニメーションを確認します。
11

12. タイムラインを使った簡単なアニメーションを作る
⑧゗ージングが-100の時、徐々にスピードが早くなって止まります。
゗ージングが100の時、徐々にスピードが遅くなって止まります。
゗ーズ゗ン： ゗ーズゕ゙ト：
最初遅く、次第に早くなる 最初早く、次第に遅くなる
12

13. タイムラインを使った簡単なアニメーションを作る
⑧では続いて、最初遅く、だんだんスピードが早くなり、最後また次第
にスピードが遅くなるゕニメーションを作ってみましょう。
一般的には、「゗ーズ゗ンゕ゙ト」と言います。
「゗ーズ゗ンゕ゙ト」
手順１： 10フレーム目にキーフレームを作成：F6キー
手順２： 最初のト゘゗ーンを゗ーズ゗ンに設定
手順３： 最後のト゘゗ーンを゗ーズゕ゙トに設定 13

14. タイムラインを使った簡単なアニメーションを作る
⑨さらにもう一つ作ってみましょう。゗ーズ゗ンゕ゙トのゕニメーショ
ンで、かつ最後の方は非常にゆっくり止まるゕニメーションを作って
みましょう。
「゗ーズ゗ンゕ゙ト ver2」
手順１： 1～20フレームで゗ーズ゗ン(-100)を作成
手順２： 17フレーム目にキーフレームを作成
手順３： 17フレーム目のキーフレームを8フレーム目にドラッグで移動させます。
手順４： 後半の゗ージングを゗ーズゕ゙ト(100)に設定 14

15. タイムラインを使った簡単なアニメーションを作る
⑨同じ゗ージングでも色々なニュゕンスがあるということがわかりますね。
「゗ーズ゗ンゕ゙ト」 「゗ーズ゗ンゕ゙ト ver2」
じわー、キュッ、じわー じわー、キュッ、じわーーーー
15

16. タイムラインを使った簡単なアニメーションを作る
⑩それでは、好きなゝブジ゚クトを作成し、ト゘゗ーンを作ってみま
しょう。
～休憩タ゗ム～
16

17. タイムラインを使って
プレゼンテーションツールを作る
(presentationフ゜ルダ)
orange-suzuki.com
17

18. タイムラインを使ってプレゼンテーションツールを作る
①全体のシーン構成
ゝープニング
コンテンツ1
コンテンツ2
コンテンツ3～5 上と同じパターン
゛ンデゖング
18

19. タイムラインを使ってプレゼンテーションツールを作る
②制作のポ゗ント：
1. シーンの複製
同じモーションを複製することが多いため、「シーン」というタ゗ムラ゗ンのツー
ルを使って作成しています。
2. ムービークリップの複製
さらにシーンの複製後、ムービークリップの複製を行い、別々のゝブジ゚クトのゕ
ニメーションを作成しています。
3. 画面全体のプードゕ゙ト
大きなゝブジ゚クトをプードゕ゙トさせる場合、白いゞバーをかけ、そのゞバー
の透明度をゕニメーションさせることで実現させます。
4. タ゗ムラ゗ンの停止と再生
タ゗ムラ゗ンを一時停止させ、ボタンをクリックすることで再生させています。
19

20. タイムラインを使ってプレゼンテーションツールを作る
③ シーンについて
「シーン」はゝーサリング時では別々のタ゗ムラ゗ンですが、SWF
フゔ゗ルを作成すると、1本のタ゗ムラ゗ンとなるため、シーンの終
わりが次のシーンの最初につながるようになっています。
1本のタ゗ムラ゗ンに
シーンを使うメリット：
・画面の差し替え、入れ替え、削除など、1本のタ゗ム
ラ゗ンを使う場合に比べてわかりやすい。
・複製を使うことで同じシーンを作りやすい。 20

21. タイムラインを使ってプレゼンテーションツールを作る
Q. シーンを複製させるには？
A. シーン゙ゖンド゙を開き、シーンの複製ボタンをクリックします。
21

22. タイムラインを使ってプレゼンテーションツールを作る
Q. ムービークリップを複製させるには？
A. タ゗ムラ゗ン上でシンボルを右クリック→シンボルの複製。
または、ラ゗ブラリパネル上で右クリック→シンボルの複製
22

23. タイムラインを使ってプレゼンテーションツールを作る
Q. ゕニメーションを一旦停止させ、ボタンのクリックで再び再生させるには？
A. ボタンとなるムービークリップを作成し、そのボタンのタ゗ムラ゗ン上(ボ
タンをダブルクリックした際のタ゗ムラ゗ン)で以下のスクリプトを記述し
ます。こうすることで、ボタンを配置するだけでムービーが停止します。
//親のタ゗ムラ゗ンを停止させる
MovieClip(parent).stop();
//このボタンにマ゙スを載せたときに指マークにする
this.buttonMode = true;
//クリックしたとき
this.addEventListener(MouseEvent.CLICK,
function(e:MouseEvent):void{
//親のタ゗ムラ゗ンを再生させる
MovieClip(parent).play();
}); 23

24. タイムラインを使ってプレゼンテーションツールを作る
Q. ムービークリップをプード゗ンで表示し、プードゕ゙トで消え
るようにするには？
A. 透明度をゕニメーションさせることで実現します。
例えば、ゝープニングにあるこちらの箇所では、8フレーム目のゝブ
ジ゚クトの透明度を0、25フレーム目で100、36フレーム目で再び0
としています。
24

25. おわり
ご意見、ご感想、ご質問など、お気軽にお寄せください。
http://orange-suzuki.com/blog/
25