Ssaw08 1007

2,686 views

Published on

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,686
On SlideShare
0
From Embeds
0
Number of Embeds
1,722
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ssaw08 1007

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

×