65
SSAW08 後期第4回 ActionScript 3.0 入門 2008年10月7日

Ssaw08 1007

Embed Size (px)

Citation preview

Page 1: Ssaw08 1007

SSAW08 後期第4回ActionScript 3.0 入門2008年10月7日

Page 2: Ssaw08 1007

今日の内容

• ActionScript 3.0について学ぶ• FlexSDKでの開発環境の構築• Xcodeの設定

• ActionScriptの文法について• PublicとPrivate• 簡単な図形を表示してみる• クラスの作成• アニメーションを生成する

• ENTER_FRAMEイベントリスナーを用いる方法• TweenMaxライブラリを使用する方法

Page 3: Ssaw08 1007

ActionScript開発環境

• ActionScriptで開発できるもの• Flash:Webコンテンツ• Flex:リッチインターネットアプリケーション• AIR:デスクトップアプリケーション

Page 4: Ssaw08 1007

ActionScript開発環境:開発スタイル

• Flash CS3 + テキストエディタ• フレームベースのアニメーションの利用• 画像素材の制作・管理が簡単• 有料

Page 5: Ssaw08 1007

ActionScript開発環境

• Flex Builder• Eclipseベースの統合開発環境• GUIエディターで視覚的にコンポーネントを配置できる• 有料 (ただし学生向け無料ライセンスあり)

• https://freeriatools.adobe.com/

Page 6: Ssaw08 1007

ActionScript開発環境

• Flex SDK + テキストエディタ• コマンドラインのコンパイラを利用• CUIベース• 無料• 今回の授業では、この環境を利用する

Page 7: Ssaw08 1007

FlexSDK 環境構築

• Adobe Open SourceのFlex SDKのページからFlex SDKをダウンロード• http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK• Zipファイルを展開• 生成されたフォルダ「flex_sdk_3」を以下の場所にインストール

• /Developer/SDKs/flex_sdk_3

Page 8: Ssaw08 1007

FlexSDK 環境構築

• パスの設定• Flexのコマンドラインツール群を利用し易いように、パスを張っておく• ホームディレクトリの「.bash_profile」に以下の設定を追加

export PATH=/Developer/SDKs/flex_sdk_3/bin:$PATHexport _JAVA_OPTIONS="-Duser.language=en -Dfile.encoding=UTF-8"

Page 9: Ssaw08 1007

• mxmlcのインストールを確認• 以下のコマンドをTerminal.appで入力してみる• きちんとメッセージが表示されればOK

$ mxmlc -versionPicked up _JAVA_OPTIONS: -Duser.language=en -Dfile.encoding=UTF-8Version 3.1.0 build 2710

FlexSDK 環境構築

Page 10: Ssaw08 1007

• rascutのインストール• rascut:RubyベースのActionScript開発ユーティリティー

$ sudo gem install rascut --include-dependencies

FlexSDK 環境構築

Page 11: Ssaw08 1007

• rascutのインストールの確認• Terminal.appで下記のコマンドを入力し確認する

$ rascut -helpUsage: $ rascut HelloWrold.as -b, --bind-address=VAL server bind address(default 0.0.0.0) -c, --compile-config=VAL mxmlc compile config ex:) --compile-config="- ...

FlexSDK 環境構築

Page 12: Ssaw08 1007

ActionScriptコーディング向きなテキストエディタfor Mac OSX

• Carbon Emacs + ECMAScript-mode• 独特のキーバインディングだが、慣れると快適• 他のエディターが使えなくなる?• ActionScriptの表示には、ECMASCript modeを使うと便利• フリー! (元祖フリーソフト)

• 入手先• Carbon Emacs

• http://homepage.mac.com/zenitani/emacs-j.html• ECMAScript-mode

• http://www.emacswiki.org/cgi-bin/wiki/ECMAScriptMode

Page 13: Ssaw08 1007

ActionScriptコーディング向きなテキストエディタfor Mac OSX

• Carbon Emacs + ECMAScript-mode• 表示例

Page 14: Ssaw08 1007

ActionScriptコーディング向きなテキストエディタfor Mac OSX

• TextMate• プログラム向け、高機能テキストエディタ• コード補完機能やマクロ機能など、使いこなすとかなり便利• 日本語入力・表示に難あり• 有料:39ユーロ

Page 16: Ssaw08 1007

Xcodeの環境設定

• XCode用のプロジェクト・ファイルテンプレートの「Core SWF」をインストールする• http://code.google.com/p/coreswf/

• ただし、今回はCoreSWFをSSAW08用にカスタマイズしたテンプレートファイルを利用する• 下記からダウンロード• http://idisk.mac.com/tadokoroatsushi-Public/flex_for_ssaw08.zip

Page 17: Ssaw08 1007

Xcodeの環境設定

• 各テンプレートファイルをインストール• Project Templateフォルダ内のActionScriptフォルダー

• 下記のフォルダー内にコピー• /Developer/Library/Xcode/Project Templates

• File Templateフォルダ内の Flex SDK フォルダー• 下記のフォルダー内にコピー• /Developer/Library/Xcode/File Templates

• Specificationsフォルダ内のファイル全て• 下記のフォルダー内にコピー• /Developer/Library/Xcode/Specifications

Page 18: Ssaw08 1007

XcodeでのActionScript開発

• 新規ActionScriptプロジェクトを作成• 「ファイル」 → 「新規プロジェクト」を選択• プロジェクトテンプレートから、「Flex SDK」→「AS3 Basic」を選択

Page 19: Ssaw08 1007

XcodeでのActionScript開発

• プロジェクト名を「Hello」に設定して保存• 「ビルドして進行」ボタンを押す• 自動的にWebブラウザが起動し、HelloWorldが表示されるはず

Page 20: Ssaw08 1007

ActionScriptクラスの構造

• 全体の構造• 全体をpackageで囲んでいる

• クラス名の重複を防ぐ• パッケージ名を付けると、同じディレクトリ名を参照する

• クラスの宣言• Spriteクラスの拡張クラスとして作成されている

Page 21: Ssaw08 1007

ActionScriptクラスの構造

package パッケージ名 { import ライブラリ名 [SWFのパラメータ指定] public class クラス名 extends Sprite { // パブリック変数 public var 変数名:タイプ; //コンストラクター public function クラス名() { ステートメント; } // プライベート変数 private var 変数名:タイプ; // パブリックメソッド public function メソッド名(引数1, 引数2, 引数3):タイプ { ステートメント; } // プライベートメソッド public function メソッド名(引数1, 引数2, 引数3):タイプ { ステートメント; } }}

Page 22: Ssaw08 1007

ActionScriptクラスの構造

• クラスの内容• 授業用のテンプレートでは、あらかじめ7つのパートに分割している

• CLASS CONSTANTS:クラスの定数• CONSTRUCTOR:コンストラクター• PRIVATE VARIABLES:プライベートな変数• GETTER/SETTERS:セッター・ゲッター• PUBLIC METHODS:パブリックなメソッド• EVENT HANDLERS:イベントハンドラ• PRIVATE & PROTECTED INSTANCE METHODS:プライベートな、も

しくは保護されたメソッド

Page 23: Ssaw08 1007

HelloWorld.asクラスの構造

package { import flash.display.*; import flash.text.TextField; [SWF(backgroundColor="#CCCCCC", frameRate="60")] public class HelloWorld extends Sprite { //-------------------------------------- // CLASS CONSTANTS //-------------------------------------- //-------------------------------------- // CONSTRUCTOR //-------------------------------------- //-------------------------------------- // PRIVATE VARIABLES //-------------------------------------- //-------------------------------------- // GETTER/SETTERS //-------------------------------------- //-------------------------------------- // PUBLIC METHODS //-------------------------------------- //-------------------------------------- // EVENT HANDLERS //-------------------------------------- //-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- }}

Page 24: Ssaw08 1007

HelloWorld.asクラスの構造

package { import flash.display.*; import flash.text.TextField; [SWF(backgroundColor="#CCCCCC", frameRate="60")] public class HelloWorld extends Sprite { //-------------------------------------- // CLASS CONSTANTS //-------------------------------------- //-------------------------------------- // CONSTRUCTOR //-------------------------------------- //-------------------------------------- // PRIVATE VARIABLES //-------------------------------------- //-------------------------------------- // GETTER/SETTERS //-------------------------------------- //-------------------------------------- // PUBLIC METHODS //-------------------------------------- //-------------------------------------- // EVENT HANDLERS //-------------------------------------- //-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- }}

パッケージ

Page 25: Ssaw08 1007

HelloWorld.asクラスの構造

package { import flash.display.*; import flash.text.TextField; [SWF(backgroundColor="#CCCCCC", frameRate="60")] public class HelloWorld extends Sprite { //-------------------------------------- // CLASS CONSTANTS //-------------------------------------- //-------------------------------------- // CONSTRUCTOR //-------------------------------------- //-------------------------------------- // PRIVATE VARIABLES //-------------------------------------- //-------------------------------------- // GETTER/SETTERS //-------------------------------------- //-------------------------------------- // PUBLIC METHODS //-------------------------------------- //-------------------------------------- // EVENT HANDLERS //-------------------------------------- //-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- }}

クラス

インポートするライブラリ群

Page 26: Ssaw08 1007

HelloWorld.asクラスの構造

package { import flash.display.*; import flash.text.TextField; [SWF(backgroundColor="#CCCCCC", frameRate="60")] public class HelloWorld extends Sprite { //-------------------------------------- // CLASS CONSTANTS //-------------------------------------- //-------------------------------------- // CONSTRUCTOR //-------------------------------------- //-------------------------------------- // PRIVATE VARIABLES //-------------------------------------- //-------------------------------------- // GETTER/SETTERS //-------------------------------------- //-------------------------------------- // PUBLIC METHODS //-------------------------------------- //-------------------------------------- // EVENT HANDLERS //-------------------------------------- //-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- }}

クラスの定数

コンストラクタ

プライベート変数

ゲッター・セッター

パブリックなメソッド

イベントハンドラー

プライベートなメソッド

Page 27: Ssaw08 1007

• AS3での変数の宣言

• プライベート変数

private var 変数名:タイプ

• パブリック変数

public var 変数名:タイプ

変数の宣言

Page 28: Ssaw08 1007

変数の宣言

// 変数定義と変数タイプの例 (プライベート変数)private var _num:Number; // 数 (実数)private var _intNum:int; // 整数private var _uintNum:uint; //符号無し整数private var _name:String; //文字列private var _mc:MovieClip; //ムービークリップprivate var _sp:Sprite; //スプライトprivate var _text:TextField; //テキストフィールドprivate var _myArray:Array; //配列

Page 29: Ssaw08 1007

• AS3でのメソッドの宣言

• プライベートメソッド

private function メソッド名(引数):戻り値のタイプ

• パブリック変数

public function メソッド名(引数):戻り値のタイプ

メソッド (関数) の宣言

Page 30: Ssaw08 1007

メソッド (関数) の宣言

// メソッド定義の例private function addNumbers(numA:Number, numB:Number):Number{ var answer:Number = numA + numB; return answer;}

Page 31: Ssaw08 1007

メンバーの属性とアクセス制限

• AS3のクラス内のプロパティ(変数) やメソッド (関数)には、属性が指定されている

• 外部から参照する必要のないメンバーは、privateにして隠す (カプセル化)

メンバー属性 定義

internal 同じパッケージ内でのみ参照できる

private 同じクラス内でのみ参照できる

protected同じクラスおよびサブクラス内の参照に対してのみ参照できる

public どこからでも参照できる

Page 32: Ssaw08 1007

メンバーの属性とアクセス制限

• public属性とprivate属性

クラスA

public private

変数

関数

変数

関数

クラスB

public private

変数

関数

変数

関数

× 参照できない○ 参照できる

Page 33: Ssaw08 1007

円を描いてみる

• 円を描くプログラムを書いてみる• やっていること

• 新規にSprite を生成する• Sprite内に丸を描く• 表示リストに追加する

Page 34: Ssaw08 1007

円を描いてみる

package { import flash.display.*; [SWF(backgroundColor="#CCCCCC")] //SWFの表示設定 public class DrawCircle extends Sprite { //-------------------------------------- // CONSTRUCTOR //-------------------------------------- public function DrawCircle() { //ステージ設定 stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; var circle:Sprite = new Sprite; //新規にスプライト「circle」生成 circle.graphics.beginFill(0x3399FF); //塗りの色を設定 circle.graphics.drawCircle(320, 240, 80); //丸を描く addChild(circle); //表示リストに追加 } }}

Page 35: Ssaw08 1007

円を描いてみる

• 実行結果

Page 36: Ssaw08 1007

Spriteについて

• Spriteとは?• 表示リストの基本的要素• グラフィックを表示でき、子を持つこともできる表示リストノード• タイムラインを持たないMovieClip

Page 37: Ssaw08 1007

表示オブジェクト

• 表示オブジェクト• ステージに表示される全てのオブジェクト• いろいろなタイプがある

• Bitmap• Shape• StaticText• Video• SimpleButton• TextField• Loader• Sprite• Stage• MovieClip• Shape• Video

Page 38: Ssaw08 1007

表示オブジェクト

• コア表示クラス

Page 39: Ssaw08 1007

表示オブジェクトと表示リスト

• 表示リスト• 表示されるオブジェクトの階層• アプリケーション内で表示されるエレメントがすべて含まれる• 入れ子構造にすることもできる

• 表示リストに表示オブジェクトを追加するには• addChild(表示オブジェクト);

• 表示リストに表示オブジェクトを削除するには• removeChild(表示オブジェクト);

Page 40: Ssaw08 1007

表示オブジェクトと表示リスト

• 表示リストの入れ子構造

Page 41: Ssaw08 1007

複数の図形を表示リストに追加並列して追加

package { import flash.display.*; [SWF(backgroundColor="#CCCCCC")] public class DrawCircle extends Sprite { public function DrawCircle() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; //青い丸を生成して表示リストに追加 (circleA) var circleA:Sprite = new Sprite; circleA.graphics.beginFill(0x3399FF); circleA.graphics.drawCircle(260, 200, 80); addChild(circleA); //赤い丸を生成して表示リストに追加 (circleB) var circleB:Sprite = new Sprite; circleB.graphics.beginFill(0xFF3333); circleB.graphics.drawCircle(340, 260, 80); addChild(circleB); } }}

Page 42: Ssaw08 1007

複数の図形を表示リストに追加並列して追加

Page 43: Ssaw08 1007

複数の図形を表示リストに追加入れ子状に構成する

package { import flash.display.*; [SWF(backgroundColor="#CCCCCC")] public class DrawCircle extends Sprite { public function DrawCircle() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; //青い丸を生成して表示リストに追加 (circleA) var circleA:Sprite = new Sprite; circleA.graphics.beginFill(0x3399FF); circleA.graphics.drawCircle(0, 0, 80); circleA.x = 320; circleA.y = 200; addChild(circleA); //赤い丸を生成して表示リストに追加 (circleB) var circleB:Sprite = new Sprite; circleB.graphics.beginFill(0xFF3333); circleB.graphics.drawCircle(60, 60, 80); circleA.addChild(circleB); //CircleAの中にCircleBを追加 } }}

Page 44: Ssaw08 1007

複数の図形を表示リストに追加入れ子状に構成する

Page 45: Ssaw08 1007

表示リストの構造

• 2つのサンプルの表示リストの構造• DrawCircle自体もSpriteから派生した表示オブジェクト

Stage

DrawCircle

circleA

circleB

Stage

DrawCircle

circleA circleB

並列 入れ子構造

Page 46: Ssaw08 1007

カスタムクラスの作成

• メインクラスであるDrawCircleのサブクラスとして、円を表示するカスタムクラスを定義する

• 「ファイル」→「新規ファイル」を選択し、テンプレートから「ActionScript」→「ActionScript3 Template」を選択

• 「Circle.as」という名前で作成する

Page 47: Ssaw08 1007

カスタムクラスの作成

//メインクラス:DrawCircle.aspackage { import flash.display.*; [SWF(backgroundColor="#CCCCCC")] public class DrawCircle extends Sprite { public function DrawCircle() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; //カスタムクラスCircleをインスタンス化 var myCircle:Circle = new Circle(); addChild(myCircle); //表示リストに追加 } }}

Page 48: Ssaw08 1007

カスタムクラスの作成

//クラス:Circle.aspackage { import flash.display.Sprite; import flash.events.Event; public class Circle extends Sprite { public function Circle() { x = 320; //スプライト全体のX座標 y = 240; //スプライト全体のY座標 var sp:Sprite = new Sprite(); //Sprite「sp」を生成 sp.graphics.beginFill(0x3399FF); //塗りの色設定 sp.graphics.drawCircle(0,0,80); //円を描く addChild(sp); //表示リストに追加 } }}

Page 49: Ssaw08 1007

カスタムクラスの作成

Page 50: Ssaw08 1007

カスタムクラスを複数生成する100コのランダムな丸を描く

//メインクラス:DrawCircle.aspackage { import flash.display.*; [SWF(backgroundColor="#CCCCCC")] public class DrawCircle extends Sprite { public function DrawCircle() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; //100回くりかえし for(var i:uint = 0; i < 100; i++){ //クラスCircleをインスタンス化 var myCircle:Circle = new Circle(); addChild(myCircle); //表示リストに追加 } } }}

Page 51: Ssaw08 1007

カスタムクラスを複数生成する100コのランダムな丸を描く

//クラス:Circle.aspackage { import flash.display.Sprite; import flash.events.Event; public class Circle extends Sprite { public function Circle() { //ランダムに座標を設定 x = Math.random() * 640; y = Math.random() * 480; var sp:Sprite = new Sprite(); sp.graphics.beginFill(Math.random() * 0xFFFFFF); //色をランダムに設定する sp.graphics.drawCircle(0,0,rand(20,60)); //大きさもランダム addChild(sp); //表示リストに追加 } //最大値と最小値を指定してランダムに数を生成 private function rand(min:Number, max:Number):Number { var randValue:Number = Math.random() * (max - min) + min; return randValue; } }}

Page 52: Ssaw08 1007

カスタムクラスを複数生成する100コのランダムな丸を描く

Page 53: Ssaw08 1007

アニメーションの作成

• 描いた丸を動かしてみる• フレームが更新するたびにイベントを生成して、アニメーションにする• Processingのdrawのような感覚• フレームが更新したことを検知するには

• イベントリスナーを利用する• リスナー = 特定のイベントを監視する機能

• フレームの更新のイベント名• Event.ENTER_FRAME

Page 54: Ssaw08 1007

アニメーションの作成

• 丸が画面からはみ出たら、はねかえるように改良する• 新規にprivateメソッドを追加

• limit()• 自分の表示位置を見て、画面からはみ出るようなら、スピードを反

転して、跳ね返りを表現する

Page 55: Ssaw08 1007

アニメーションの作成

//メインクラス:DrawCircle.aspackage { import flash.display.*; [SWF(backgroundColor="#CCCCCC")] public class DrawCircle extends Sprite { public function DrawCircle() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; //100回くりかえし for(var i:uint = 0; i < 100; i++){ //クラスCircleをインスタンス化 var myCircle:Circle = new Circle(); addChild(myCircle); //表示リストに追加 } } }}

Page 56: Ssaw08 1007

アニメーションの作成

//クラス:Circle.aspackage { import flash.display.Sprite; import flash.events.Event; public class Circle extends Sprite { public function Circle() { x = Math.random() * 640; y = Math.random() * 480; _speedX = rand(-8,8); _speedY = rand(-8,8); var sp:Sprite = new Sprite(); sp.graphics.beginFill(Math.random() * 0xFFFFFF); //色をランダムに設定する sp.graphics.drawCircle(0,0,rand(20,60)); //大きさもランダム addChild(sp); //表示リストに追加 addEventListener(Event.ENTER_FRAME, onEnterFrameHandler); } private var _speedX:Number; private var _speedY:Number;

Page 57: Ssaw08 1007

アニメーションの作成

private function onEnterFrameHandler(event:Event):void { limit(); x += _speedX; y += _speedY; } //表示領域内ではねかえる private function limit():void { if(x < 0 || x > 640){ _speedX *= -1; } if(y < 0 || y > 480){ _speedY *= -1; } } //最大値と最小値を指定してランダムに数を生成 private function rand(min:Number, max:Number):Number { var randValue:Number = Math.random() * (max - min) + min; return randValue; } }}

Page 58: Ssaw08 1007

別の方法でのアニメーションTweenMaxを使用する

• Tweenを行うライブラリを利用してみる• Tween

• 2つのキーの値をなめらかに補完する機能• アニメーションを効率的に生成できる

• Flashの付属のTween機能はちょっと動きが遅い• TweenMaxというライブラリを利用してみる

• 現状では、たぶん最速• ダウンロード先

• http://blog.greensock.com/tweenmaxas3/• 解凍して生成されたフォルダの中にある「gs」フォルダをメインクラス

がある場所と同じところに配置する

Page 59: Ssaw08 1007

別の方法でのアニメーションTweenMaxを使用する

• TweenMaxの使いかた• TweeMaxのライブラリをインポート

import gs.TweenMax;import gs.easing.*;

• Tweenのパラメータを指定して、Tweenを実行

TweenMax.to(ターゲット, 補完時間, {パラメータ});

Page 60: Ssaw08 1007

別の方法でのアニメーションTweenMaxを使用する

• 実際の動きを、付属のシミュレータで確認できる• TweenMaxAS3_Basics.swf

Page 61: Ssaw08 1007

別の方法でのアニメーションTweenMaxを使用する

// TweenCircle.as - メインクラス

package { import flash.display.*; [SWF(backgroundColor="#CCCCCC", frameRate="60")] public class TweenCircle extends Sprite { //-------------------------------------- // CONSTRUCTOR //-------------------------------------- public function TweenCircle() { stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; //100回くりかえし for(var i:uint = 0; i < 100; i++){ //クラスCircleをインスタンス化 var myCircle:Circle = new Circle(); addChild(myCircle); //表示リストに追加 } } }}

Page 62: Ssaw08 1007

別の方法でのアニメーションTweenMaxを使用する

// Circle.aspackage { import flash.display.*; import flash.events.Event; import gs.TweenMax; import gs.easing.*; public class Circle extends Sprite { //-------------------------------------- // CONSTRUCTOR //-------------------------------------- public function Circle() { x = Math.random() * 640; y = Math.random() * 480; _speedX = rand(-8,8); _speedY = rand(-8,8); alpha = 0.25; blendMode = BlendMode.ADD; var sp:Sprite = new Sprite(); sp.graphics.beginFill(Math.random() * 0xFFFFFF); //色をランダムに設定する sp.graphics.drawCircle(0,0,rand(20,60)); //大きさもランダム addChild(sp); //表示リストに追加 move(); }

Page 63: Ssaw08 1007

別の方法でのアニメーションTweenMaxを使用する

//-------------------------------------- // PRIVATE VARIABLES //-------------------------------------- private var _speedX:Number; private var _speedY:Number; //-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- private function move():void { //始点と終点と移動時間をランダムに指定 var toX:Number = rand(0, 640); var toY:Number = rand(0, 480); var dur:Number = rand(1, 2); //Tweenを実行 TweenMax.to(this, dur, {x:toX, y:toY, ease:Quad.easeInOut, onComplete:move}); }

Page 64: Ssaw08 1007

別の方法でのアニメーションTweenMaxを使用する

private function rand(min:Number, max:Number):Number { var randValue:Number = Math.random() * (max - min) + min; return randValue; } }}

Page 65: Ssaw08 1007

別の方法でのアニメーションTweenMaxを使用する