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

コンピュータ

3C

～マルチメディア～

第

_10回

Flashで簡単なアニメーション(続き),

Flashでボタン作成

人間科学科コミュニケーション専攻

第

10回の内容



Flashで簡単なアニメーション(続き)

Flashの起動



MMLのMac: Finder→「

アプリケーション

」→「

Adobe

Flash

」→「

_{Flash CS4}

」

_{or 「}

_{Flash CS5}

」



「

Flashファイル(AS 3.0)

」を選択

メインウィンドウ

描画領域

タイムラインの

設定領域

ツールボックス

& プロパティウィンドウ

描画ツールボックス

色の設定

(上: 縁取り,

下: 塗りつぶし)

画像の大きさと

背景色の設定

GIFアニメーションとの違い



GIFアニメーション: 1枚1枚絵を用意しておく



今回

_{: 絵の中で動く部分がたどる道筋を指定しておく}



ただし、

1枚1枚を入れ替えることで絵が動いている

ように見せるという原理は同じ

あまりたくさんの枚数は用意できない

何枚でも用意できる

Flashアニメーションの基本



何フレームでアニメーションをするかを決める



動かす絵

(オブジェクト)を決める



1フレーム目の絵の位置と、絵が動く軌跡を決める

各フレームごとの絵の位置を計算し、アニメーションを

作ってくれる

例えば

_{...3フレームで矢印の方向に赤丸が動くとき}

1フレーム目 2フレーム目 3フレーム目

Flashアニメーションの例



基本

:

http://www.twcu.ac.jp/~junko/MultiMedia/3C/Sample/

Animation-1.swf



色変更

_:

http://www.twcu.ac.jp/~junko/MultiMedia/3C/Sample/

Animation-2.swf



自由移動

:

http://www.twcu.ac.jp/~junko/MultiMedia/3C/Sample/

Animation-3.swf



回転

_:

http://www.twcu.ac.jp/~junko/MultiMedia/3C/Sample/

Animation-4.swf

Flashでの概念



トゥイーンアニメーション

:

2つのフレーム間で自動的にフレームを作成して

作るアニメーション



キーフレーム

_{: 変化の基点になるフレーム}

例えば

_{...赤丸が黒い矢印のように動くとき}

キーフレーム

_{: 青い四角の位置に赤丸があるフレーム}



アニメーションが始まるフレーム



動き方が変わるフレーム



アニメーションが終わるフレーム

アニメーションの設定

タイムライン

_{: アニメーションのフレーム}

(何フレームでアニメーションをするかを

指定するところ)

アニメーションの速さ

_{(1秒間に何フレーム切り替えるか)}

レイヤー



オブジェクトを描くための透明なシート



複数のオブジェクトを、異なる動作で動かしたいときに

利用

(1つのレイヤーに1つのオブジェクトを描き、

それぞれの動作内容を設定する

₎

レイヤー

_{: メニューバーの「挿入」→「レイヤー」で}

新しいレイヤーを作成

_{(ダブルクリックでレイヤーの}

名前を指定可能

₎

アニメーション作成

(直線移動)(1)

1.

動作する絵

(オブジェクト)を用意する

2.

選択ツールで、オブジェクトを選択する



マウスをドラッグ

_{&ドロップ}

3.

「

修正

」→「

シンボルに変換

」を選択する

4.

表示されたウィンドウで「名前」の欄に何か名前を

入力、「種類」の欄を「

ムービークリップ

」にして「

_OK

」

ボタンを押す

アニメーション作成

(直線移動)(2)

4.

タイムラインの

1番目のフレームでマウス長押し→

「

モーショントゥイーンを作成

」にマウスを合わせて離す

タイムラインがこの状態になる

_{(タイムラインの区切りが}

なくなる

₎



このタイムラインの長さが、アニメーションの

このあたりにマウスを持っていくと⇔の形になるので、⇔の形の時に

マウスでタイムラインを引っ張ると、タイムラインの長さを調節可能

アニメーション作成

(直線移動)(3)

5.

タイムライン上で、アニメーションの最後のフレームを

クリックしておく

6.

オブジェクトを、アニメーションが終了する地点に

移動させる



これで、アニメーションが終了したときのオブジェクトの

位置を指定することになる

7.

メニューバーの「

制御

」→「

再生

」で動作の確認を

する



_{or メニューバーの「}

ファイル

」→「

書き出し

」→「

ムービーの

書き出し

」でファイルに保存し、

_{Safariで開く}

アニメーション作成

(移動経路)(1)



オブジェクトの移動経路を形状を変える

:

移動経路を表す線の「・」をマウスで引っ張る

マウスで引っ張ると経路の形状が

変わる



_{1つ1つの「・」が1枚1枚の}

フレームに対応

動作させながら色を変化させる

(1)

1.

タイムラインで、変化し終わるフレームをクリックして

おく

動作させながら色を変化させる

(2)

3.

「

プロパティ

」タブの「

カラー効果

」の欄の「スタイル」で

「

着色

」を選択する

4.

オブジェクトの動作が終わった時の色や濃淡の

度合いなどを選択する

動作が終わった時のオブジェクトの色

動作させながらサイズを変化させる

(1)

1.

タイムラインで、変化し終わるフレームをクリックして

おく

動作させながら色を変化させる

(2)

3.

「

プロパティ

」ウィンドウの「

位置とサイズ

」の欄の「

W

」と

「

_H

」の数値をクリックする



W: 幅



H: 高さ

4.

数値を入力する

動作が終わった時のオブジェクトのサイズ

(Wが幅, Hが高さ)

オブジェクトの角度を変える

1.

タイムラインで、変化し終わるフレームをクリックして

おく

2.

「

プロパティ

」ウィンドウの「

回転

」の欄で、回転の

方法を選択



「

方向

」の欄で「時計回り」または「反時計回り」を

選択する

or 「パスに沿って回転」にチェックする

どちらかを選択

ファイルへの保存



メニューバーの「

ファイル

」→「

保存

」で、「

.fla

」という

形式で保存



「

.fla

」という形式は、後からまた編集できるファイル



Webページには貼り付けることはできないファイル



メニューバーの「

ファイル

」→「

書き出し

」→「

ムービーの

書き出し

」で、「

_.swf

」というファイルが作成される



「

_.swf

」というファイルが

_{Webページに貼り付けるための}

ファイル



後から編集はできないファイル

Webページへの貼り付け



以下のタグを

HTMLファイルに書く



HTMLファイルとFlashのファイルは同じフォルダ内に置く



Flashのファイルは「.swf」のファイルを使う

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/

cabs/flash/swflash.cab"

width="

横幅の大きさ

_{" height="}

縦幅の大きさ

_">

<param name="movie" value="

Flashファイル名

">

Flashファイルの説明

Flashでボタン



作成手順



ボタンシンボル

_{(ボタンの形)を作成}



ボタンシンボルをキャンバス上に配置

_{(配置されたものが}

ボタンになる

₎



ボタンが押された時の処理を定義



ボタンで使う絵



アップ

_{: 通常のボタンの状態}



オーバー

_{: マウスポインタがボタンの上に来た状態}



ダウン

_{: マウスがボタンの上で押された状態}

(押したままで離さない状態)

ボタンシンボル作成

(1)

1.

「

挿入

」→「

新規シンボル

」を選択

2.

「

名前

」の欄にボタンシンボルの名前を入力、

「

種類

」の欄で「ボタン」を選択

3.

「アップ」の状態の絵を作成



2. によりタイムラインが、「アップ」・「オーバー」などの

ボタンシンボル作成

(2)

4.

タイムラインの「

オーバー

」の下を選択し、その後

マウス長押し→「

キーフレームの挿入

」



「オーバー」の絵を描画可能に

5.

「オーバー」の絵を作成



「ダウン」の絵も同様にして作成

6.

メニューバーの「

編集

」→「

ドキュメントの編集

」を

選択



タイムラインがもとの形式に

ボタンシンボル作成

(3)

7.

周辺にあるウィンドウの「

ライブラリ

」タブをクリック

すると、作成したボタンシンボルが存在

8.

ボタンシンボルをキャンバス上にドラッグ

&ドロップ

9.

「

制御

」→「

ムービープレビュー

」→「

Device

Central

」で動作確認

ページ移動の設定

(1)



「ボタンシンボル」をキャンバス上に配置すると、

ボタンを押したときの処理の設定開始

1.

キャンバス上に配置したボタンを選択し、周辺にある

ウィンドウの「

プロパティ

」タブをクリック

2.

最上部にボタンの名前を入力

ページ移動の設定

(2)

1.

新しいレイヤを作成し、その新しいレイヤを選択

2.

プロパティウィンドウの「

名前

」の欄にレイヤの名前を

入力

(半角英数で)

3.

新しいレイヤの

1つ目のフレームを選択

ここをクリック

ページ移動の設定

(3)

4.

「

ウィンドウ

」→「

アクション

」で、表示されたウィンドウに

ボタンの動作を記述



大文字・小文字、記号など、スペルミスをしないよう注意す

ること

this.

XXXX

.addEventListener(MouseEvent.CLICK, goToPage);

function goToPage(e:MouseEvent):void {

var url:URLRequest = new URLRequest("

YYYY

");

navigateToURL(url);

}

ページ移動の設定

(4)

5.

「

チェック

」ボタンを押すと、エラーがあるかどうかが

表示



タイムラインが表示されているところに新しいタブが追加

され、表示される



エラーがあれば修正する

_{(エラーの先頭にある数字が、}

エラーが存在する行番号なので、その行をよく見ること

₎

6.

「

制御

」→「

ムービープレビュー

」→「

Device

Central

」で動作確認



動作確認時にも、エラーが出ることもあるので、その場合は

また修正すること

画像切り替えの設定

(1)

1.

1フレームごとに1枚切り替わるアニメーションを用意

a.

キャンバスに絵を書く

_{or 絵を貼り付ける}



写真などを貼り付ける場合には、そのファイルを

_Finderから

ライブラリにドラッグ

_{&ドロップ}



ライブラリから、画像ファイルをキャンバスにドラッグ

_{&ドロップ}

b.

タイムラインで、

_{a. の次のフレームでマウス長押し→}

「

キーフレームの挿入

」

c.

a. の次のフレームの絵を書く or 絵を貼り付ける

画像のファイルを

ドラッグ

_{&ドロップ}

必要なだけ繰り返す

画像切り替えの設定

(2)

3.

新しいレイヤを

1つ作成する

4.

3.のレイヤにボタンシンボルを1つ配置する

5.

4.のボタンをクリックし、「

プロパティ

」欄の「

名前

」の

欄に「

nextBut

」

(すべて半角)と入力する



1つ次の画像を表示するためのボタン

6.

新しいレイヤを

_{1つ作成する}

7.

6.のレイヤにボタンシンボルを1つ配置する

8.

7.のボタンをクリックし、「

プロパティ

」欄の「

名前

」の

欄に「

_backBut

」

_{(すべて半角)と入力する}



1つ前の画像を表示するためのボタン

画像切り替えの設定

(3)

9.

新しいレイヤを

1つ作成する

10.9. のレイヤのタイムラインの1フレーム目をクリックし、

「

ウィンドウ

」→「

アクション

」を選択する

11.10. のウィンドウに、ボタンの動作を記述する

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();

}

画像切り替えの設定

(4)

12.

「

チェック

」ボタンを押すと、エラーがあるかどうかが

表示



タイムラインが表示されているところに新しいタブが追加

され、表示される



エラーがあれば修正する

_{(エラーの先頭にある数字が、}

エラーが存在する行番号なので、その行をよく見ること

₎

13.

「

制御

」→

「

ムービープレビュー

」→「

Device

Central

」で動作確認



動作確認時にも、エラーが出ることもあるので、その場合は

画像切り替えの設定

(5)



設定後のタイムライン

「

_{nextBut」のボタンのレイヤ}

「

_{backBut」のボタンのレイヤ}

画像を配置したレイヤ

ボタンの動作を設定したレイヤ