コンピュータ中級B ～Javaプログラミング～ 第3回 コンピュータと情報をやりとりするには?

Transcription

1 コンピュータ 3C ~ マルチメディア ~ 第 10 回 Flash で簡単なアニメーション ( 続き ), Flash でボタン作成 人間科学科コミュニケーション専攻 白銀純子 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 1

2 第 10 回の内容 Flash で簡単なアニメーション ( 続き ) Flash でボタン作成 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 2

3 Flash Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 3

4 Flash の起動 MML の Mac: Finder アプリケーション Adobe Flash Flash CS4 or Flash CS5 Flash ファイル (AS 3.0) を選択 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 4

5 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 5 メインウィンドウ 描画領域 タイムラインの設定領域

6 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 6 ツールボックス & プロパティウィンドウ 描画ツールボックス 色の設定 ( 上 : 縁取り, 下 : 塗りつぶし ) 画像の大きさと背景色の設定

7 Flash でアニメーション Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 7

8 GIF アニメーションとの違い GIF アニメーション : 1 枚 1 枚絵を用意しておく あまりたくさんの枚数は用意できない 今回 : 絵の中で動く部分がたどる道筋を指定しておく 何枚でも用意できる ただし 1 枚 1 枚を入れ替えることで絵が動いているように見せるという原理は同じ Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 8

9 Flash アニメーションの基本 何フレームでアニメーションをするかを決める 動かす絵 ( オブジェクト ) を決める 1 フレーム目の絵の位置と 絵が動く軌跡を決める 各フレームごとの絵の位置を計算し アニメーションを作ってくれる 例えば...3 フレームで矢印の方向に赤丸が動くとき 1 フレーム目 2 フレーム目 3 フレーム目 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 9

10 Flash アニメーションの例 基本 : Animation-1.swf 色変更 : Animation-2.swf 自由移動 : Animation-3.swf 回転 : Animation-4.swf Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 10

11 Flash での概念 トゥイーンアニメーション : 2 つのフレーム間で自動的にフレームを作成して作るアニメーション キーフレーム : 変化の基点になるフレーム 例えば... 赤丸が黒い矢印のように動くとき キーフレーム : 青い四角の位置に赤丸があるフレーム アニメーションが始まるフレーム 動き方が変わるフレーム アニメーションが終わるフレーム Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 11

12 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 12 アニメーションの設定 タイムライン : アニメーションのフレーム ( 何フレームでアニメーションをするかを指定するところ ) アニメーションの速さ (1 秒間に何フレーム切り替えるか ) fps: Frame Per Second( ダブルクリックで設定 )

13 レイヤー オブジェクトを描くための透明なシート 複数のオブジェクトを 異なる動作で動かしたいときに利用 (1 つのレイヤーに 1 つのオブジェクトを描き それぞれの動作内容を設定する ) レイヤー : メニューバーの 挿入 レイヤー で新しいレイヤーを作成 ( ダブルクリックでレイヤーの名前を指定可能 ) Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 13

14 アニメーション作成 ( 直線移動 )(1) 1. 動作する絵 ( オブジェクト ) を用意する 2. 選択ツールで オブジェクトを選択する マウスをドラッグ & ドロップ 3. 修正 シンボルに変換 を選択する 4. 表示されたウィンドウで 名前 の欄に何か名前を入力 種類 の欄を ムービークリップ にして OK ボタンを押す Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 14

15 アニメーション作成 ( 直線移動 )(2) 4. タイムラインの 1 番目のフレームでマウス長押し モーショントゥイーンを作成 にマウスを合わせて離す このあたりにマウスを持っていくと の形になるので の形の時にマウスでタイムラインを引っ張ると タイムラインの長さを調節可能 タイムラインがこの状態になる ( タイムラインの区切りがなくなる ) このタイムラインの長さが アニメーションのフレームの枚数 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 15

16 アニメーション作成 ( 直線移動 )(3) 5. タイムライン上で アニメーションの最後のフレームをクリックしておく 6. オブジェクトを アニメーションが終了する地点に移動させる これで アニメーションが終了したときのオブジェクトの位置を指定することになる 7. メニューバーの 制御 再生 で動作の確認をする or メニューバーの ファイル 書き出し ムービーの書き出し でファイルに保存し Safari で開く Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 16

17 アニメーション作成 ( 移動経路 )(1) オブジェクトの移動経路を形状を変える : 移動経路を表す線の をマウスで引っ張る マウスで引っ張ると経路の形状が変わる 1 つ 1 つの が 1 枚 1 枚のフレームに対応 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 17

18 動作させながら色を変化させる (1) 1. タイムラインで 変化し終わるフレームをクリックしておく 2. オブジェクトをクリックしておく Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 19

19 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 20 動作させながら色を変化させる (2) 3. プロパティ タブの カラー効果 の欄の スタイル で 着色 を選択する 4. オブジェクトの動作が終わった時の色や濃淡の度合いなどを選択する 動作が終わった時のオブジェクトの色 どの程度色を変化させるか (100% で完全に変化 ) 同様にして オブジェクトの形も変化させることができる

20 動作させながらサイズを変化させる (1) 1. タイムラインで 変化し終わるフレームをクリックしておく 2. オブジェクトをクリックしておく Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 21

21 動作させながら色を変化させる (2) 3. プロパティ ウィンドウの 位置とサイズ の欄の W と H の数値をクリックする W: 幅 H: 高さ 4. 数値を入力する 動作が終わった時のオブジェクトのサイズ (W が幅, H が高さ ) 同様にして オブジェクトの形も変化させることができる Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 22

22 オブジェクトの角度を変える 1. タイムラインで 変化し終わるフレームをクリックしておく 2. プロパティ ウィンドウの 回転 の欄で 回転の方法を選択 方向 の欄で 時計回り または 反時計回り を選択する or パスに沿って回転 にチェックする どちらかを選択 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 23

23 ファイルへの保存 メニューバーの ファイル 保存 で.fla という形式で保存.fla という形式は 後からまた編集できるファイル Web ページには貼り付けることはできないファイル メニューバーの ファイル 書き出し ムービーの書き出し で.swf というファイルが作成される.swf というファイルが Web ページに貼り付けるためのファイル 後から編集はできないファイル Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 24

24 Web ページへの貼り付け 以下のタグを HTML ファイルに書く HTMLファイルとFlashのファイルは同じフォルダ内に置く Flashのファイルは.swf のファイルを使う <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" cabs/flash/swflash.cab" width=" 横幅の大きさ " height=" 縦幅の大きさ "> <param name="movie" value="flash ファイル名 "> Flash ファイルの説明 </object> Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 25

25 Flash でボタン作成 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 26

26 作成手順 Flash でボタン ボタンシンボル ( ボタンの形 ) を作成 ボタンシンボルをキャンバス上に配置 ( 配置されたものがボタンになる ) ボタンが押された時の処理を定義 ボタンで使う絵 アップ : 通常のボタンの状態 オーバー : マウスポインタがボタンの上に来た状態 ダウン : マウスがボタンの上で押された状態 ( 押したままで離さない状態 ) ヒット は気にしなくて良い Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 27

27 ボタンシンボル作成 (1) 1. 挿入 新規シンボル を選択 2. 名前 の欄にボタンシンボルの名前を入力 種類 の欄で ボタン を選択 3. アップ の状態の絵を作成 2. によりタイムラインが アップ オーバー などのボタンモードに Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 28

28 ボタンシンボル作成 (2) 4. タイムラインの オーバー の下を選択し その後マウス長押し キーフレームの挿入 オーバー の絵を描画可能に 5. オーバー の絵を作成 ダウン の絵も同様にして作成 6. メニューバーの 編集 ドキュメントの編集 を選択 タイムラインがもとの形式に Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 29

29 ボタンシンボル作成 (3) 7. 周辺にあるウィンドウの ライブラリ タブをクリックすると 作成したボタンシンボルが存在 8. ボタンシンボルをキャンバス上にドラッグ & ドロップ 9. 制御 ムービープレビュー Device Central で動作確認 ここで作成したものは あくまで ボタンシンボル ( ボタンの形 ) ボタンシンボル を使って 実際のボタンを作成 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 30

30 他のページに移動 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 31

31 ページ移動の設定 (1) ボタンシンボル をキャンバス上に配置すると ボタンを押したときの処理の設定開始 1. キャンバス上に配置したボタンを選択し 周辺にあるウィンドウの プロパティ タブをクリック 2. 最上部にボタンの名前を入力 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 32

32 ページ移動の設定 (2) 1. 新しいレイヤを作成し その新しいレイヤを選択 2. プロパティウィンドウの 名前 の欄にレイヤの名前を入力 ( 半角英数で ) 3. 新しいレイヤの 1 つ目のフレームを選択 ここをクリック Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 33

33 ページ移動の設定 (3) 4. ウィンドウ アクション で 表示されたウィンドウにボタンの動作を記述 大文字 小文字 記号など スペルミスをしないよう注意すること 2. の手順でつけたボタンの名前 this.xxxx.addeventlistener(mouseevent.click, gotopage); function gotopage(e:mouseevent):void { var url:urlrequest = new URLRequest("YYYY"); navigatetourl(url); } 設定したい URL Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 34

34 ページ移動の設定 (4) 5. チェック ボタンを押すと エラーがあるかどうかが表示 タイムラインが表示されているところに新しいタブが追加され 表示される エラーがあれば修正する ( エラーの先頭にある数字が エラーが存在する行番号なので その行をよく見ること ) 6. 制御 ムービープレビュー Device Central で動作確認 動作確認時にも エラーが出ることもあるので その場合はまた修正すること Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 35

35 画像の切り替え Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 36

36 画像切り替えの設定 (1) 1. 1 フレームごとに 1 枚切り替わるアニメーションを用意 a. キャンバスに絵を書く or 絵を貼り付ける 写真などを貼り付ける場合には そのファイルを Finder からライブラリにドラッグ & ドロップ 画像のファイルをドラッグ & ドロップ ライブラリから 画像ファイルをキャンバスにドラッグ & ドロップ b. タイムラインで a. の次のフレームでマウス長押し キーフレームの挿入 c. a. の次のフレームの絵を書く or 絵を貼り付ける 必要なだけ繰り返す Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 37

37 画像切り替えの設定 (2) 3. 新しいレイヤを 1 つ作成する のレイヤにボタンシンボルを 1 つ配置する のボタンをクリックし プロパティ 欄の 名前 の欄に nextbut ( すべて半角 ) と入力する 1 つ次の画像を表示するためのボタン 6. 新しいレイヤを 1 つ作成する のレイヤにボタンシンボルを 1 つ配置する のボタンをクリックし プロパティ 欄の 名前 の欄に backbut ( すべて半角 ) と入力する 1 つ前の画像を表示するためのボタン Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 38

38 画像切り替えの設定 (3) 9. 新しいレイヤを 1 つ作成する のレイヤのタイムラインの 1 フレーム目をクリックし ウィンドウ アクション を選択する のウィンドウに ボタンの動作を記述する stop(); this.nextbut.addeventlistener(mouseevent.click, shownext); this.backbut.addeventlistener(mouseevent.click, showprev); function shownext(e:mouseevent):void { this.nextframe(); } function showprev(e:mouseevent):void { this.prevframe(); } Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 39

39 画像切り替えの設定 (4) 12. チェック ボタンを押すと エラーがあるかどうかが表示 タイムラインが表示されているところに新しいタブが追加され 表示される エラーがあれば修正する ( エラーの先頭にある数字が エラーが存在する行番号なので その行をよく見ること ) 13. 制御 ムービープレビュー Device Central で動作確認 動作確認時にも エラーが出ることもあるので その場合はまた修正すること Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 40

40 画像切り替えの設定 (5) 設定後のタイムライン backbut のボタンのレイヤ nextbut のボタンのレイヤ 画像を配置したレイヤ ボタンの動作を設定したレイヤ Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2013, All rights reserved. 41