2010年度 インタラクティブ映像制作実習II(1)
[Prev] [Home] [Next]

第1回 ActionScriptへの招待

担当者:斎藤進也(saitos[at]fc.ritsumei.ac.jp)

★本日のテーマ

本日は、本講義の進め方、到達目標などについて説明する。 そして、本講義の実習に用いるActionScript3.0について概説する。


講義について


★進め方について


★講義資料について


★持参するもの


★教科書・参考書について


★グループ

4名1組で課題に取り組む。

目的: メンバー間で知識の共有をはかることで、学習効果を高める。
協力して課題をこなすことで、よりレベルの高い成果を提出する。

★課題について

課題は、日によって「グループ課題」が出される場合と「個人課題」が出される 場合がある。
個人課題に取り組む場合も、グループで着席し、知識/技術の共有をはかること。

★ファイルアップロードの方法(Web公開時)



ActionScript3.0の概要


★ActionScrip3.0とは

Flashプラットフォームにおける公式のプログラミング言語。

もともとは、アニメーションを制御するための簡単なツールとして着想されたが、Webやモバイルデバイス、デスクトップ用のコンテンツやアプリケーションを作成するための洗練されたプログラミング言語へと進化。 強力なオブジェクト指向プログラミング(OOP)機能が注目されている。

★ActionScritp1.0/2.0との互換性

ActionScript1.0/2.0と、ActionScript3.0は全く別の言語と考えて差し支えない。
したがって、ActionScript3.0に準拠したソースコードと、ActionScript1.0/2.0のそれとを同居させることはできない。

★ActionScript開発ツール

★ActionScriptの記述場所(p.14)


アクションパネル

ActionScriptは、アクションパネルに記述する。

[ウインドウ] →[アクション]で開く。



プログラムを構成する基本概念


「プロパティ」「メソッド」「イベント」は、ActionScriptによるプログラムを構成する3大要素であるといえる。
ActionScriptの習得には、この3要素についての理解が不可欠であるといえる。

★プロパティ

プロパティは、オブジェクトを修飾する形容詞のようなもの。
オブジェクトの位置や大きさ、色などを設定できる。
説明プロパ ティ値を設定するシンタックス単位(範囲)
位置 x,ybox.x=100;ピクセル
box.y=100;
スケール(1) scaleX,scaleYbox.scaleX=0.5;パーセント(0から1)
box.scaleY=0.5;
スケール(2) width,heightbox.width=80; ピクセル
box.height=80;
回転 rotationbox.rotation=45;度(0から360)
透明度 alphabox.alpha=0.5;パーセント(0から1)
可視性 visiblebox.visible=false;ブール値

<注意!>「値を設定するシンタックス」の各項目にあるboxは、インスタンス名である。したがって、boxの部分は毎回異なる記述になる。
ActionScriptで、オブジェクトを制御する際には必ず、インスタンス名を設定しておく必要がある。
例えば、下の図では、インスタンス名が「car」と設定されている。

インスタンス名の設定は、[プロパティ]パネルにておこなう。

●試してみよう!

サンプルファイルをダウンロードし、ActionScriptを記述することでオブジェク トのプロパティを変更してみよう。 →[download]


★メソッド

メソッドは、ActionScript言語の動詞であり、オブジェクトに対してアクションを起こすように命令する。例えば、ムービークリップに対しては、stop()メソッドを使うことで再生を停止することができる。

具体的には、メインのタイムインにあるムービークリップの"car"がstopメソッドを発するシンタックスは、

car.stop();

となる。

●試してみよう!

サンプルファイルをダウンロードし、実際にスクリプトを書いてみよう。 → [download]

★イベント

イベントは、アクションを引き起こす「きっかけ」のこと。
あるイベント(きっかけ)を機に、オブジェクトに対しプロパティを設定したり、メソッドを呼び出したりできる。
例えば、ユーザーがマウスボタンをクリックしたときに、そのクリックをイベント(きっかけ)として設定できる。
そして、そのイベント(きっかけ)によって、希望するアクションを実行させる ことができる。

「ボタンをクリックしたらアニメーションを再生する」という場合、 という流れ(関連付け)になる。このように、イベント処理の設定は「オブジェ クト」「イベント」「処理」の関連付けだといえる。
そして、イベントに関連付けられた処理のことを「イベントハンドラ」と呼ぶ。 なお、イベントは、ActionScript3.0の基礎をマスターする上での最重要事項 。 したがって、次回、十分時間をとって解説する予定である。

基本事項の補足など


★ActionScriptにおける変数

★traceコマンド(p.39)

trace()は、「()」の中に入れた値を出力パネルに表示するというコマンド。
例えば、

trace(100);

を実行すれば「100」と表示され、

trace("映像学部さいこー!!");

を実行すれば「映像学部さいこー!!」と表示される。
※文字は""で囲む。


trace()は、スクリプトを記述する際に、テストやデバッグに用いるテクニック として役立つ。
*出力結果は、Flashの出力パネルに表示されるので、swfファイルを単体で実行した場合は、出力結果は得られない。

文字列連結に使える「+」演算子

算術演算子「+」を用いて文字列を連結させることが出来る。

●試してみよう!

実際に、trace()を使って、任意の文字や数字を表示してみよう。 → [download]

★コメントアウト(p.24)

「コメント」とはスクリプトコードの実行に含まれない部分のこと。スクリプト についての説明、メモ、注意書きなどをコード中に残しておく場合に用いる。

★本日の課題


ステージ上に、好きなオブジェクトを作成し、traceコマンドを用いて、大きさ(height,width)、位置(x,y)情報を出力しなさい。なお、以下の手順を守ること。

1)オブジェクトそ作成する。
2)オブジェクトをシンボル化する(ムービークリップ)。
3)インスタンス名を設定する。
--------------------以下AS記述------------------------
4)プロパティ値height,width,x,yにそれぞれ対応する変数を宣言する。
5)各変数に各プロパティの値を代入。
6)traceコマンドで値を出力する。この際、「+」演算子を用いて変数と文字列を連結し、「高さは●です。」 「幅は●です。 」「xは●です。」「yは●です。」といった具合に出力すること。

なお、本日の課題は「個人課題」である。

発展課題(提出する必要はありません)

教科書やWebサイトなどを各自で調べ、ボタンを押すと、各プロパティの値が出 力されるように、上記課題プログラムを改造しなさい。



※発展課題を解くためには、まだ習っていない知識が必要とされま す。
挑戦してみたものの最終的に解けなかったという人も出てくると考えられるが、 次回講義にて解説するので安心してください。

発展課題は、「自分で調べて 解決する力」を養うためのものです。また、習う前に試行錯誤しておくことで、 次回講義の理解度や知識の定着が飛躍的に向上します。
是非、グループメンバーと力を合わせてチャレンジしてください。

[Prev] [Home] [Next]