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

第１回 ActionScriptへの招待

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

★本日のテーマ

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

講義について

★進め方について

★講義資料について

★持参するもの

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

●教科書 ●参考書

★グループ

グループで課題に取り組む。

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

※ インタラクティブ映像制作実習Iを受講していない学生は、所属グループについて教員に問い合わせること。　

★課題について

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

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

ActionScript3.0の概要

★ActionScrip3.0とは

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

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

また、昨今では、iOSに対応しiPhoneアプリの開発が可能になったことでさらに可能性が広がった。ひとつのソースコードから、Web、デスクトップ（Windows、Mac、Linux）、iPhone、Android携帯の各プラットフォーム上で動作するアプリを作ることが出来る。

→ 参考サイト

★ActionScritp1.0/2.0との互換性

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

★ActionScript開発ツール

★ActionScriptを記述する方法と場所

「フレームアクションとして記述する方法」と「外部ドキュメントクラスを作成する方法」の２種類の方法がある。
  1. フレームアクション
    タイムライン上のキーフレームに記述。
    メインタイムライン（rootのタイムライン）だけでなく、ムービークリップシンボル内部のタイムラインにも記述できる。 フレームアクションが設定されたキーフレームには、「a」が表示される。


    ●アクションパネル
    ActionScriptは、アクションパネルで編集する。

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

    ※下記の「外部ドキュメントクラス」の場合は、（アクションパネルでなくともその他の）テキストエディタで編集可能。

  2. 外部ドキュメントクラスファイル（.as）
    Flashのソースファイル（.fla）と、ActionScriptを外部ドキュメントクラスファイル（.as）として別ファイルに記述することが可能である。これにより、コンテンツ開発では、アニメーションやスクリプトの開発が分離でき、複数人で作業するような大規模開発がやりやすくなった。

    基本的にドキュメントクラスはSpriteクラスかMovieClipクラスを継承するクラスで、SWFのメインクラスとして使用される。

    ●ドキュメントクラスのスケルトン(Example.as) 
    package {
	import flash.display.Sprite;

	public class Example extends Sprite{

		public function Example(){
			//コンストラクタ
			init();
		}

		private function init():void{
		//以下に任意の処理内容を記述する。
		}
	}
}
    クラス名とコンストラクタ関数名は同じものをつけること。ここでは「Example」。
    ファイル名は、クラス名.asとする。

    ●Flashにおけるドキュメントクラスの設定
    外部ドキュメントクラスとflaファイルは同じフォルダ内に保存する。
    ステージの「プロパティ」における「ドキュメントクラス:」にクラス名を記述する。ファイルの拡張子(.as)は不要。

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

ActionScriptの基本をマスターするにあたり、まず、「プロパティ」 「メソッド」「イベント」という３つの概念について理解しよう。

★プロパティ

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

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

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

●試してみよう!

各自、絵を描き、ActionScriptを記述することでオブジェクトのプロパティを変更してみよう。

★メソッド

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

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

car.stop();

となる。

【参考】 ムービークリップ(MovieClip)のプロパティとメソッドの一覧。
Adobeによる公式リファレンスMovieClipの項目

●試してみよう!

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

★イベント

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

「ボタンをクリックしたらアニメーションを再生する」という場合、 という流れ（関連付け）になる。このように、イベント処理の設定は「オブジェクト」「イベント」「処理」の関連付けだといえる。
そして、イベントに関連付けられた処理（関数）のことを「イベントハンドラ」と呼ぶ。

【参考】イベントには、下記の２種類がある。
  1. ユーザの動作によるイベント
    例えば、マウスのクリックされた時に発生するイベントなど。
  2. 自動的に発生するイベント
    フレームが読み込まれた時に発生するイベントなど。

そして、本講義の前半より何度か登場している「addEventListener」は、 このイベント処理を定義するためのもの。
なお、addEventListenerは、ActionScript3.0の基礎をマスターする上での重要事項。したがって、次回、十分時間をとって解説する予定である。

[補足]ドットシンタックス

「 . 」（ドットシンタックス）は、オブジェクトのプロパティやメソッドへのアクセスを提供する。
例えば、carというインスタンスのプロパティxにアクセスしたい場合は、

car.x;

と記述する。「trace(car.x);」でcarのx座標を表示させることができるし、「car.x = 300;」でcarの座標を300に設定できる。

また、carというインスタンスのタイムラインの再生を停止させたい場合は、stopメソッドを用いて

car.stop();

と記述する。

プログラミングの基本事項の確認

★ActionScriptにおける変数

★traceメソッド

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

trace(100);

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

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

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


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

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

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

●試してみよう!

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

★コメントアウト

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

★制御文

if、switch、while、forなどの制御文は基本的にC言語と同じ。

クリック→ 参考サイト

★本日の課題


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

１）オブジェクトを作成する。
２）オブジェクトをシンボル化する（ムービークリップ）。
３）インスタンス名を設定する。
--------------------以下AS記述------------------------
４）traceコマンドで値を出力する。この際、「＋」演算子を用いて変数と文字列を連結し、「高さは●です。」 「幅は●です。 」「xは●です。」「yは●です。」といった具合に出力すること。

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

発展課題 (時間があまった人は挑戦)

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



※提出時のファイル名は、名字_名前_日付hatten.拡張子とする。ex)saito_sihnya_110608hatten.fla ※発展課題を解くためには、まだ習っていない知識が必要とされます。

是非、グループメンバーと力を合わせてチャレンジしてください。

発展課題２（さらに時間がありあまっている人）

縦横の値を入力するためのテキストフィールドをステージ上に用意し、ユーザが そこに値を入力し、ボタンを押したら、入力値に応じオブジェクトの大きさが変 化するよう上記課題を改造しなさい。
※提出時のファイル名は、名字_名前_日付hatten2.拡張子とする。ex)saito_sihnya_110608hatten2.fla

※補足：テキストフィールドに数値を表示させたい場合は注意が必要。

１）テキストフィールド名に「.text」をつけること。
	ex)テキストフィールド名（インスタンス名）が「hyoji」の場合
	    hyoji.text
２）文字列型(String)は数値(int、Number)にキャスト(型変換)すること。    
int(文字列の格納された変数);でキャストできる。

	ex)
	sikaku.width = int(hyoji.text);

【参考】数値から文字列への変換
String(数値の格納された変数);でキャストできる。
	ex)
	var a:int = 100;

	hyoji.text = String(a);


[Home] [Next]