Upload
atsushi-tadokoro
View
2.491
Download
2
Embed Size (px)
Citation preview
SSAW08 後期第4回ActionScript 3.0 入門2008年10月7日
今日の内容
• ActionScript 3.0について学ぶ• FlexSDKでの開発環境の構築• Xcodeの設定
• ActionScriptの文法について• PublicとPrivate• 簡単な図形を表示してみる• クラスの作成• アニメーションを生成する
• ENTER_FRAMEイベントリスナーを用いる方法• TweenMaxライブラリを使用する方法
ActionScript開発環境
• ActionScriptで開発できるもの• Flash:Webコンテンツ• Flex:リッチインターネットアプリケーション• AIR:デスクトップアプリケーション
ActionScript開発環境:開発スタイル
• Flash CS3 + テキストエディタ• フレームベースのアニメーションの利用• 画像素材の制作・管理が簡単• 有料
ActionScript開発環境
• Flex Builder• Eclipseベースの統合開発環境• GUIエディターで視覚的にコンポーネントを配置できる• 有料 (ただし学生向け無料ライセンスあり)
• https://freeriatools.adobe.com/
ActionScript開発環境
• Flex SDK + テキストエディタ• コマンドラインのコンパイラを利用• CUIベース• 無料• 今回の授業では、この環境を利用する
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
FlexSDK 環境構築
• パスの設定• Flexのコマンドラインツール群を利用し易いように、パスを張っておく• ホームディレクトリの「.bash_profile」に以下の設定を追加
export PATH=/Developer/SDKs/flex_sdk_3/bin:$PATHexport _JAVA_OPTIONS="-Duser.language=en -Dfile.encoding=UTF-8"
• mxmlcのインストールを確認• 以下のコマンドをTerminal.appで入力してみる• きちんとメッセージが表示されればOK
$ mxmlc -versionPicked up _JAVA_OPTIONS: -Duser.language=en -Dfile.encoding=UTF-8Version 3.1.0 build 2710
FlexSDK 環境構築
• rascutのインストール• rascut:RubyベースのActionScript開発ユーティリティー
$ sudo gem install rascut --include-dependencies
FlexSDK 環境構築
• 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 環境構築
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
ActionScriptコーディング向きなテキストエディタfor Mac OSX
• Carbon Emacs + ECMAScript-mode• 表示例
ActionScriptコーディング向きなテキストエディタfor Mac OSX
• TextMate• プログラム向け、高機能テキストエディタ• コード補完機能やマクロ機能など、使いこなすとかなり便利• 日本語入力・表示に難あり• 有料:39ユーロ
ActionScriptコーディング向きなテキストエディタfor Mac OSX
• XCode• アップル社純正の統合開発環境 (IDE)• いろいろ設定するとFlex SDK用の統合開発環境としても使用可能• 今回はこれを利用してみる
Xcodeの環境設定
• XCode用のプロジェクト・ファイルテンプレートの「Core SWF」をインストールする• http://code.google.com/p/coreswf/
• ただし、今回はCoreSWFをSSAW08用にカスタマイズしたテンプレートファイルを利用する• 下記からダウンロード• http://idisk.mac.com/tadokoroatsushi-Public/flex_for_ssaw08.zip
Xcodeの環境設定
• 各テンプレートファイルをインストール• Project Templateフォルダ内のActionScriptフォルダー
• 下記のフォルダー内にコピー• /Developer/Library/Xcode/Project Templates
• File Templateフォルダ内の Flex SDK フォルダー• 下記のフォルダー内にコピー• /Developer/Library/Xcode/File Templates
• Specificationsフォルダ内のファイル全て• 下記のフォルダー内にコピー• /Developer/Library/Xcode/Specifications
XcodeでのActionScript開発
• 新規ActionScriptプロジェクトを作成• 「ファイル」 → 「新規プロジェクト」を選択• プロジェクトテンプレートから、「Flex SDK」→「AS3 Basic」を選択
XcodeでのActionScript開発
• プロジェクト名を「Hello」に設定して保存• 「ビルドして進行」ボタンを押す• 自動的にWebブラウザが起動し、HelloWorldが表示されるはず
ActionScriptクラスの構造
• 全体の構造• 全体をpackageで囲んでいる
• クラス名の重複を防ぐ• パッケージ名を付けると、同じディレクトリ名を参照する
• クラスの宣言• Spriteクラスの拡張クラスとして作成されている
ActionScriptクラスの構造
package パッケージ名 { import ライブラリ名 [SWFのパラメータ指定] public class クラス名 extends Sprite { // パブリック変数 public var 変数名:タイプ; //コンストラクター public function クラス名() { ステートメント; } // プライベート変数 private var 変数名:タイプ; // パブリックメソッド public function メソッド名(引数1, 引数2, 引数3):タイプ { ステートメント; } // プライベートメソッド public function メソッド名(引数1, 引数2, 引数3):タイプ { ステートメント; } }}
ActionScriptクラスの構造
• クラスの内容• 授業用のテンプレートでは、あらかじめ7つのパートに分割している
• CLASS CONSTANTS:クラスの定数• CONSTRUCTOR:コンストラクター• PRIVATE VARIABLES:プライベートな変数• GETTER/SETTERS:セッター・ゲッター• PUBLIC METHODS:パブリックなメソッド• EVENT HANDLERS:イベントハンドラ• PRIVATE & PROTECTED INSTANCE METHODS:プライベートな、も
しくは保護されたメソッド
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 //-------------------------------------- }}
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 //-------------------------------------- }}
パッケージ
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 //-------------------------------------- }}
クラス
インポートするライブラリ群
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 //-------------------------------------- }}
クラスの定数
コンストラクタ
プライベート変数
ゲッター・セッター
パブリックなメソッド
イベントハンドラー
プライベートなメソッド
• AS3での変数の宣言
• プライベート変数
private var 変数名:タイプ
• パブリック変数
public var 変数名:タイプ
変数の宣言
変数の宣言
// 変数定義と変数タイプの例 (プライベート変数)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; //配列
• AS3でのメソッドの宣言
• プライベートメソッド
private function メソッド名(引数):戻り値のタイプ
• パブリック変数
public function メソッド名(引数):戻り値のタイプ
メソッド (関数) の宣言
メソッド (関数) の宣言
// メソッド定義の例private function addNumbers(numA:Number, numB:Number):Number{ var answer:Number = numA + numB; return answer;}
メンバーの属性とアクセス制限
• AS3のクラス内のプロパティ(変数) やメソッド (関数)には、属性が指定されている
• 外部から参照する必要のないメンバーは、privateにして隠す (カプセル化)
メンバー属性 定義
internal 同じパッケージ内でのみ参照できる
private 同じクラス内でのみ参照できる
protected同じクラスおよびサブクラス内の参照に対してのみ参照できる
public どこからでも参照できる
メンバーの属性とアクセス制限
• public属性とprivate属性
クラスA
public private
変数
関数
変数
関数
クラスB
public private
変数
関数
変数
関数
× 参照できない○ 参照できる
円を描いてみる
• 円を描くプログラムを書いてみる• やっていること
• 新規にSprite を生成する• Sprite内に丸を描く• 表示リストに追加する
円を描いてみる
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); //表示リストに追加 } }}
円を描いてみる
• 実行結果
Spriteについて
• Spriteとは?• 表示リストの基本的要素• グラフィックを表示でき、子を持つこともできる表示リストノード• タイムラインを持たないMovieClip
表示オブジェクト
• 表示オブジェクト• ステージに表示される全てのオブジェクト• いろいろなタイプがある
• Bitmap• Shape• StaticText• Video• SimpleButton• TextField• Loader• Sprite• Stage• MovieClip• Shape• Video
表示オブジェクト
• コア表示クラス
表示オブジェクトと表示リスト
• 表示リスト• 表示されるオブジェクトの階層• アプリケーション内で表示されるエレメントがすべて含まれる• 入れ子構造にすることもできる
• 表示リストに表示オブジェクトを追加するには• addChild(表示オブジェクト);
• 表示リストに表示オブジェクトを削除するには• removeChild(表示オブジェクト);
表示オブジェクトと表示リスト
• 表示リストの入れ子構造
複数の図形を表示リストに追加並列して追加
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); } }}
複数の図形を表示リストに追加並列して追加
複数の図形を表示リストに追加入れ子状に構成する
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を追加 } }}
複数の図形を表示リストに追加入れ子状に構成する
表示リストの構造
• 2つのサンプルの表示リストの構造• DrawCircle自体もSpriteから派生した表示オブジェクト
Stage
DrawCircle
circleA
circleB
Stage
DrawCircle
circleA circleB
並列 入れ子構造
カスタムクラスの作成
• メインクラスであるDrawCircleのサブクラスとして、円を表示するカスタムクラスを定義する
• 「ファイル」→「新規ファイル」を選択し、テンプレートから「ActionScript」→「ActionScript3 Template」を選択
• 「Circle.as」という名前で作成する
カスタムクラスの作成
//メインクラス: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); //表示リストに追加 } }}
カスタムクラスの作成
//クラス: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); //表示リストに追加 } }}
カスタムクラスの作成
カスタムクラスを複数生成する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); //表示リストに追加 } } }}
カスタムクラスを複数生成する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; } }}
カスタムクラスを複数生成する100コのランダムな丸を描く
アニメーションの作成
• 描いた丸を動かしてみる• フレームが更新するたびにイベントを生成して、アニメーションにする• Processingのdrawのような感覚• フレームが更新したことを検知するには
• イベントリスナーを利用する• リスナー = 特定のイベントを監視する機能
• フレームの更新のイベント名• Event.ENTER_FRAME
アニメーションの作成
• 丸が画面からはみ出たら、はねかえるように改良する• 新規にprivateメソッドを追加
• limit()• 自分の表示位置を見て、画面からはみ出るようなら、スピードを反
転して、跳ね返りを表現する
アニメーションの作成
//メインクラス: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); //表示リストに追加 } } }}
アニメーションの作成
//クラス: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;
アニメーションの作成
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; } }}
別の方法でのアニメーションTweenMaxを使用する
• Tweenを行うライブラリを利用してみる• Tween
• 2つのキーの値をなめらかに補完する機能• アニメーションを効率的に生成できる
• Flashの付属のTween機能はちょっと動きが遅い• TweenMaxというライブラリを利用してみる
• 現状では、たぶん最速• ダウンロード先
• http://blog.greensock.com/tweenmaxas3/• 解凍して生成されたフォルダの中にある「gs」フォルダをメインクラス
がある場所と同じところに配置する
別の方法でのアニメーションTweenMaxを使用する
• TweenMaxの使いかた• TweeMaxのライブラリをインポート
import gs.TweenMax;import gs.easing.*;
• Tweenのパラメータを指定して、Tweenを実行
TweenMax.to(ターゲット, 補完時間, {パラメータ});
別の方法でのアニメーションTweenMaxを使用する
• 実際の動きを、付属のシミュレータで確認できる• TweenMaxAS3_Basics.swf
別の方法でのアニメーション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); //表示リストに追加 } } }}
別の方法でのアニメーション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(); }
別の方法でのアニメーション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}); }
別の方法でのアニメーションTweenMaxを使用する
private function rand(min:Number, max:Number):Number { var randValue:Number = Math.random() * (max - min) + min; return randValue; } }}
別の方法でのアニメーションTweenMaxを使用する