Microsoft PowerPoint - ?????????????H27.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - ?????????????H27.pptx"

いおりしげい
5 years ago
Views:

1 マルチメディア教材作成講座情報スキルの向上 (2 日目 ) 平成 27 年度免許状更新講習藤田修大阪教育大学

2 本日の予定 1 時限目 9:00 ~ 10:30 概要説明 : マルチメディア教材と Adobe Flash について実習 : モーショントゥイーンを利用したアニメーション作成と WEB 表示 2 時限目 10:40 ~ 12:10 実習 : 各種ツールを利用したアニメーション { モーションエディタームービークリップシェイプトゥイーンボーンツール } 3 時限目 13:20 ~ 14:50 概要説明 : ActionScript について実習 : コードスニペットコンポーネント { ボタンテキストスライダー等 } を利用したインターラクティブ機能の実現 4 時限目 15:00 ~ 16:00 実習 : 高度なアニメーションの作成実技試験 16:00 ~ 16:30 この資料の最終ページの注意書きを読んでおいて下さい

3 1 時限目 Adobe Flash を使ってアニメーション作成

4 マルチメディア教材作成文書 Word, Excel, PowerPoint 映像音声ビデオカメラ + 映像編集ソフトインターラクティブ機能アニメーション & GUI プログラム Adobe Flash, ActionScript HTML5 + Javascript JavaFX, Scratch, Squeak etoys, Unity, etc.

5 Adobe Flash Flash とは? アニメーション作成ツールが原型動的 WEB アプリケーション総合開発ツールモーショングラフィックスインターラクティブビデオゲーム Action Script 開発編集用ファイル (*.fla) 実行環境 Flash Player (*.swf) : PC Adobe AIR (*.air): PC & SmartPhone etc: HTML5 & Javascript (*.js) : PC & SmartPhone etc: ( )

6 学習用 WEB 資料 Flash Professional 入門ヘルプとチュートリアルビデオ解説その他個人の私的解説サンプル多数

7 実習環境 PC: Apple imac ( MacOS X) アニメーションソフト : Adobe Flash Professional CS6 WEBブラウザ : Safari, FireFox, SeaMonkey 文書作成ソフト : Ms Word ファイル管理ソフト : Finder 保存先 : user_home > 書類 > Flash-1234 ( 受講者 IDの下 4 桁番号 ) 実習時間中に作成したファイルはすべて保存しておいて下さい実技試験で使用します実習関連ファイル : moodle にログイン ( )

8 Adobe Flash Professional CS6 ワークスペースメニューバーツールパネルステージプロパティインスペクタタイムラインレイヤーモーションエディターライブラリサンプルライブラリアクションコンポーネント

10 ツールパネルコードスニペットメニューバーステージモーションエディタタブコンポーネントプロパティインスペクターレイヤータイムライン

11 Adobe Flash 基本操作ファイル > 新規作成 (ActionScript 3.0) 名称未設定.fla ファイル > 名前をつけて保存 *.fla ( 半角英数字を推奨 ) ステージ上に図形等を描画レイヤータイムラインを選択して各フレームを編集ウィンドウ > アクションで ActionScript 編集制御 > ムービープレビュー (Command + Enter) *.swf ~ ( ムービー書き出し *.swf ) パブリッシュ *.html HTML5 & javascript: ウィンドウ > 他のパネル > Toolkit for CreateJS *.html ( Windows では Ctrl )

12 実習課題 1 アニメーション作成題材は自由ロゴ表示 : 団体名称等図形表示 : 数学理科美術教材その他 : 漫画等モーショントゥイーンを利用すると簡単表示位置色形フィルター等の設定可変名前をつけて保存 (*.fla) WEB ページで実行表示ムービーの書き出し (*.swf) パブリッシュ (*.html)

13 モーショントゥイーン例題 : 図形の移動や特性値変化を設定編集基本操作図形描画挿入 > モーショントゥイーン終点フレームにおいて図形を終点位置に移動モーションパスプロパティの編集制御 > ムービープレビュー (Command + Enter) 高機能ツールモーションエディタ ( ) ( ) ( )

14 2 時限目高機能ツールでアニメーション作成

15 実習課題 2 アニメーション作成の便利ツールの利用ムービークリップの階層構造 ( タイムラインの階層 ) モーションエディタ各種プロパティの数値の時間変化グラフを編集シェイプトゥイーン異なる図形への変形を自動補間ボーンツール骨と関節のように連動するオブジェクト 3D グラフィック

16 ムービークリップの階層構造各ムービークリップに独自のタイムラインあり例題 : 横に動く箱の中で球体が上下動基本操作箱を描画シンボル 1 インスタンス名付与箱 ( シンボル 1) を横方向にモーショントゥイーン箱 ( シンボル 1) をダブルクリックしてシンボル 1 の編集箱 ( シンボル 1) のタイムラインで ( レイヤーを追加してもよい ) 箱の中に球体 ( シンボル 2) を作成球体 ( シンボル 2) を縦方向にモーショントゥイーンムービープレビューで動作確認 ( )

17 モーションエディタ ( ) ( )

18 シェイプトゥイーン例題 : 図形の形状変化を自動補間基本操作始点フレームに初期図形描画終点フレームに空白キーフレーム作成終点フレームに変形後の図形描画中間フレームに挿入 : シェープトゥイーン高機能ツールシェイプヒント ( 形状変化の調整 ) 字 ( )

ボーンツール例題 : 骨と関節のように複数のオブジェクトを連動基本操作 1 図形描画単一シェイプ内で複数シンボル間でボーンツールで始点を連続的に配置高機能化 ActionScript で制御可能 ( 後述 ) ( http://www.adobe.

19 ボーンツール例題 : 骨と関節のように複数のオブジェクトを連動基本操作 1 図形描画単一シェイプ内で複数シンボル間でボーンツールで始点を連続的に配置高機能化 ActionScript で制御可能 ( 後述 ) ( es/character_animation_ik.edu.html ) ( ) ( es/bone_interaction.edu.html )

20 3D グラフィック例題 : 3D 移動と 3D 回転 3D 位置とビューの設定遠近の角度消失点基本操作 3D 移動ツール /3D 回転ツールを選択ムービークリップ選択 X,Y,Z 軸 / 回転軸コントロールの調整 ( )

21 3 時限目 Action Script の便利ツールでインターラクティブアニメーション

22 ActionScript 3.0 Action Script とは Flash に使用されるプログラミング言語 Action Script 1.0 ~ Javascript Action Script 2.0 ~ Java ( オブジェクト指向 ) Action Script 3.0 ~ 高性能化先進的新機能追加無償開発ソフトウェア Adobe Flex 2 SDK FlashDevelop 他多数 ( ) ( )

23 ActionScript 3.0 インターラクティブツール図形のドラッグ & ドロップボタンテキスト入力スライダー : 数値の調整高度なアニメーション力学シミュレーション軌跡

24 ActionScript 3.0 実例 : 図形のドラッグ & ドロップ // ドラッグ & ドロップ操作で指定したシンボルインスタンスを移動できるようにします movieclip_1.addeventlistener(mouseevent.mouse_down, fl_clicktodrag); function fl_clicktodrag(event:mouseevent):void { movieclip_1.startdrag(); } stage.addeventlistener(mouseevent.mouse_up, fl_releasetodrop); function fl_releasetodrop(event:mouseevent):void { movieclip_1.stopdrag(); }

25 実習課題 3 定型スクリプト ( コードスニペット ) の利用アクションタイムラインナビゲーションアニメーションオーディオ / ビデオ操作マウス操作キー入力コンポーネントの利用ボタンチェックボックステキスト入力サンプルライブラリの利用ボタン : 各種デザインの既製品編集可能

26 アクションコードスニペット各種クリックして WEB ページに移動乱数を生成タイマーを作成タイムラインナビゲーションフレームの移動実行停止実行開始アニメーション図形の属性を時間変化オーディオとビデオサウンドやビデオの操作イベントハンドラーマウスクリックキー入力 ( ) ( )

27 コードスニペットの利用機能別の定型 ActionScript 例題 : 図形のドラッグ & ドロップ図形描画シンボルに変換プロパティ > インスタンス名を設定コードスニペットアクション > ドラッグ & ドロップ ( 前述の Action Script が自動設定される ) ( )

28 コンポーネントボタン ( サンプルライブラリ利用可能 ) チェックボックスラベルリストテキスト入力スライダー ( 数値調整 ) ビデオ画面と制御ボタン ( ) ( )

29 サウンドライブラリに読み込みタイムラインへの追加挿入 > タイムライン > レイヤーライブラリパネルからステージにサウンドをドラッグフレームを選択プロパティ > サウンドを設定ボタンへの追加ボタンを選択挿入 > タイムライン > レイヤーフレームを選択プロパティ > サウンドを設定 ( f10cb1fe1af6-7ce8a.html )

30 4 時限目 Action Script で本格的アニメーション

31 実習課題 4 Action Script でアニメーション作成図形の属性数値を数式で演算処理応用力学シミュレーション軌跡描画

32 コードスニペットの利用基本操作図形描画してシンボルに変換インスタンスを選択して名前をつけるコードスニペットのアニメーションを選択ウィンドウ > アクションのスクリプトを編集フレーム移動毎に図形の属性値を増減させる時間を表す変数を定義してフレーム毎に増加させ図形の属性値をその関数として計算する etc

33 Action Script でアニメーション例題 : 図形を水平方向に振動させる /* ENTER_FRAME イベントが発生するたびに x プロパティを増減してシンボルインスタンスを移動させる 1. 時間ステップを表す変数を t として定義し初期値を t = 0 とする 2. ENTER_FRAME イベントが発生するたびに実行する関数において t を一定値増加させ x を t の関数として数値計算します */ var t = 0; Moviecrip_1.addEventListener(Event.ENTER_FRAME, fl_animatehorizontally); function fl_animatehorizontally(event:event) { t += 1; Moviecrip_1.x = * Math.sin( t * 0.1 ); }

34 本格的アニメーション力学シミュレーション位置座標と速度の数値計算連立 1 階微分方程式の差分近似軌跡表示 obj.x += v.x t; obj.y += v.y t; v.x += f t; v.y += g t; 図形の座標を終点とする直線を描く var g:graphics = this.graphics; g.linestyle(2, 0xFF0000, 0.7); g.lineto(obj.x, obj.y); 高精度近似計算にはルンゲクッタ法を適用

35 実技試験について 1 時限目から4 時限目までの実習で作成したファイルを使用しますのですべて保存しておいて下さい試験内容と方法などの詳細については試験時間中の指示に従ってください

36 マルチメディア作成講座終了ですお疲れ様でした

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

コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには? コンピュータ 3C ~ マルチメディア ~ 第 7 回 Flash で簡単なアニメーション人間科学科コミュニケーション専攻白銀純子 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 1 Copyright (C) Junko Shirogane, Tokyo Woman's