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

Flash って何? 正式名 : Adobe Flash 音声や画像のアニメーションを組み合わせて Web コンテンツを作成するソフトウェアソフトウェアによって作成されたコンテンツのことも Flash と呼ぶドロー形式なので拡大縮小しても画質が変わらないファイルサイズが小さく表示が速いマウスの動きなどに反応するようなコンテンツも作成できる Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 6

Flash の利用 Web ブラウザで見る : Adobe Flash Player が必要 Adobe Flash Player: Web ブラウザへのプラグインプラグイン : Web ブラウザにはもともと用意されていない機能を追加するための仕組み ( 追加する機能そのもの ) Flash を作る : Adobe Flash が必要 MML の何台かのコンピュータにインストール済み自分のコンピュータに Flash がなければ他のコンピュータを使うこと Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 8

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

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

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 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 17

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

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

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

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

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

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

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

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

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

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

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

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 32 Web ページへの貼り付け以下のタグを書いておく <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 ファイルの説明 </object>

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

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