SlideShare a Scribd company logo
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:$PATH
export _JAVA_OPTIONS="-Duser.language=en -Dfile.encoding=UTF-8"
• mxmlcのインストールを確認
• 以下のコマンドをTerminal.appで入力してみる
• きちんとメッセージが表示されればOK
$ mxmlc -version
Picked up _JAVA_OPTIONS: -Duser.language=en -
Dfile.encoding=UTF-8
Version 3.1.0 build 2710
FlexSDK 環境構築
• rascutのインストール
• rascut:RubyベースのActionScript開発ユーティリティー
$ sudo gem install rascut --include-dependencies
FlexSDK 環境構築
• 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 環境構築
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.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); //表示リストに追加
	 	 }
	 }
}
カスタムクラスの作成
//クラス: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); //表示リストに追加		 	
	 	 }
	 }
}
カスタムクラスの作成
カスタムクラスを複数生成する
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); //表示リストに追加
	 	 	 }
	 	 }
	 }
}
カスタムクラスを複数生成する
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;
	 	 }
	 }
}
カスタムクラスを複数生成する
100コのランダムな丸を描く
アニメーションの作成
• 描いた丸を動かしてみる
• フレームが更新するたびにイベントを生成して、アニメーションにする
• Processingのdrawのような感覚
• フレームが更新したことを検知するには
• イベントリスナーを利用する
• リスナー = 特定のイベントを監視する機能
• フレームの更新のイベント名
• Event.ENTER_FRAME
アニメーションの作成
• 丸が画面からはみ出たら、はねかえるように改良する
• 新規にprivateメソッドを追加
• limit()
• 自分の表示位置を見て、画面からはみ出るようなら、スピードを反
転して、跳ね返りを表現する
アニメーションの作成
//メインクラス: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); //表示リストに追加
	 	 	 }
	 	 }
	 }
}
アニメーションの作成
//クラス: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;
アニメーションの作成
	 	 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.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();
	 	 }
別の方法でのアニメーション
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を使用する

More Related Content

Similar to Ssaw08 1007

20130714 July Tech Festa 日本CloudStackユーザー会
20130714 July Tech Festa 日本CloudStackユーザー会20130714 July Tech Festa 日本CloudStackユーザー会
20130714 July Tech Festa 日本CloudStackユーザー会samemoon
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
 
Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略
takezoe
 
はじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & LinuxはじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & Linux
Kazushi Kamegawa
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
 
SCALR OSS版のインストール手順のご紹介 20131204 01
SCALR OSS版のインストール手順のご紹介 20131204 01SCALR OSS版のインストール手順のご紹介 20131204 01
SCALR OSS版のインストール手順のご紹介 20131204 01
Haruhiko KAJIKAWA
 
201312 scalr[oss] installation_idcf
201312 scalr[oss] installation_idcf201312 scalr[oss] installation_idcf
201312 scalr[oss] installation_idcf
IDC Frontier
 
CMake multiplatform build-tool
CMake multiplatform build-toolCMake multiplatform build-tool
CMake multiplatform build-tool
Naruto TAKAHASHI
 
20130803 OSC@Kyoto CloudStackユーザー会
20130803 OSC@Kyoto CloudStackユーザー会20130803 OSC@Kyoto CloudStackユーザー会
20130803 OSC@Kyoto CloudStackユーザー会samemoon
 
Flex's DI Container
Flex's DI ContainerFlex's DI Container
Flex's DI Container
Masaaki Yonebayashi
 
これから始めるAzure Kubernetes Service入門
これから始めるAzure Kubernetes Service入門これから始めるAzure Kubernetes Service入門
これから始めるAzure Kubernetes Service入門
Yuto Takei
 
環境構築自動化ツールのご紹介
環境構築自動化ツールのご紹介環境構築自動化ツールのご紹介
環境構築自動化ツールのご紹介Etsuji Nakai
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるdavid9142
 
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~Akira Inoue
 
Personal Cloud Automation
Personal Cloud AutomationPersonal Cloud Automation
Personal Cloud AutomationEtsuji Nakai
 
Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話
Masahito Zembutsu
 
Logic Apps と Api Apps の話
Logic Apps と Api Apps の話Logic Apps と Api Apps の話
Logic Apps と Api Apps の話
Sunao Tomita
 
Docker Swarm入門
Docker Swarm入門Docker Swarm入門
Docker Swarm入門
Masahito Zembutsu
 
de:code 2018 DA06 SQL Server 管理者におくる SQL Server on Linux Tips
de:code 2018 DA06 SQL Server 管理者におくる SQL Server on Linux Tipsde:code 2018 DA06 SQL Server 管理者におくる SQL Server on Linux Tips
de:code 2018 DA06 SQL Server 管理者におくる SQL Server on Linux Tips
Masayuki Ozawa
 

Similar to Ssaw08 1007 (20)

20130714 July Tech Festa 日本CloudStackユーザー会
20130714 July Tech Festa 日本CloudStackユーザー会20130714 July Tech Festa 日本CloudStackユーザー会
20130714 July Tech Festa 日本CloudStackユーザー会
 
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
 
Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略
 
はじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & LinuxはじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & Linux
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
 
SCALR OSS版のインストール手順のご紹介 20131204 01
SCALR OSS版のインストール手順のご紹介 20131204 01SCALR OSS版のインストール手順のご紹介 20131204 01
SCALR OSS版のインストール手順のご紹介 20131204 01
 
201312 scalr[oss] installation_idcf
201312 scalr[oss] installation_idcf201312 scalr[oss] installation_idcf
201312 scalr[oss] installation_idcf
 
CMake multiplatform build-tool
CMake multiplatform build-toolCMake multiplatform build-tool
CMake multiplatform build-tool
 
20130803 OSC@Kyoto CloudStackユーザー会
20130803 OSC@Kyoto CloudStackユーザー会20130803 OSC@Kyoto CloudStackユーザー会
20130803 OSC@Kyoto CloudStackユーザー会
 
Flex's DI Container
Flex's DI ContainerFlex's DI Container
Flex's DI Container
 
これから始めるAzure Kubernetes Service入門
これから始めるAzure Kubernetes Service入門これから始めるAzure Kubernetes Service入門
これから始めるAzure Kubernetes Service入門
 
環境構築自動化ツールのご紹介
環境構築自動化ツールのご紹介環境構築自動化ツールのご紹介
環境構築自動化ツールのご紹介
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
 
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
 
Personal Cloud Automation
Personal Cloud AutomationPersonal Cloud Automation
Personal Cloud Automation
 
Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話Docker ComposeでMastodonが必要なものを梱包する話
Docker ComposeでMastodonが必要なものを梱包する話
 
Logic Apps と Api Apps の話
Logic Apps と Api Apps の話Logic Apps と Api Apps の話
Logic Apps と Api Apps の話
 
Docker Swarm入門
Docker Swarm入門Docker Swarm入門
Docker Swarm入門
 
20060419
2006041920060419
20060419
 
de:code 2018 DA06 SQL Server 管理者におくる SQL Server on Linux Tips
de:code 2018 DA06 SQL Server 管理者におくる SQL Server on Linux Tipsde:code 2018 DA06 SQL Server 管理者におくる SQL Server on Linux Tips
de:code 2018 DA06 SQL Server 管理者におくる SQL Server on Linux Tips
 

More from Atsushi Tadokoro

「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望Atsushi Tadokoro
 
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめようプログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめようAtsushi Tadokoro
 
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
Atsushi Tadokoro
 
coma Creators session vol.2
coma Creators session vol.2coma Creators session vol.2
coma Creators session vol.2Atsushi Tadokoro
 
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1Atsushi Tadokoro
 
Interactive Music II Processingによるアニメーション
Interactive Music II ProcessingによるアニメーションInteractive Music II Processingによるアニメーション
Interactive Music II ProcessingによるアニメーションAtsushi Tadokoro
 
Interactive Music II Processing基本
Interactive Music II Processing基本Interactive Music II Processing基本
Interactive Music II Processing基本Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Atsushi Tadokoro
 
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス Atsushi Tadokoro
 
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Atsushi Tadokoro
 
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くiTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くAtsushi Tadokoro
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリAtsushi Tadokoro
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使うAtsushi Tadokoro
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Atsushi Tadokoro
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得Atsushi Tadokoro
 
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングWebデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングAtsushi Tadokoro
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Atsushi Tadokoro
 
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するAtsushi Tadokoro
 
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替えMedia Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替えAtsushi Tadokoro
 

More from Atsushi Tadokoro (20)

「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望
 
プログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめようプログラム初級講座 - メディア芸術をはじめよう
プログラム初級講座 - メディア芸術をはじめよう
 
Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2Interactive Music II ProcessingとSuperColliderの連携 -2
Interactive Music II ProcessingとSuperColliderの連携 -2
 
coma Creators session vol.2
coma Creators session vol.2coma Creators session vol.2
coma Creators session vol.2
 
Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1Interactive Music II ProcessingとSuperColliderの連携1
Interactive Music II ProcessingとSuperColliderの連携1
 
Interactive Music II Processingによるアニメーション
Interactive Music II ProcessingによるアニメーションInteractive Music II Processingによるアニメーション
Interactive Music II Processingによるアニメーション
 
Interactive Music II Processing基本
Interactive Music II Processing基本Interactive Music II Processing基本
Interactive Music II Processing基本
 
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携
 
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス
 
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control)
 
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描くiTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く
 
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリメディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
メディア芸術基礎 II 第11回:HTML5実践 表現のための様々なJavaScriptライブラリ
 
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2
 
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
iTamabi 13 第9回:ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得
 
Tamabi media131118
Tamabi media131118Tamabi media131118
Tamabi media131118
 
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3DプログラミングWebデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
Webデザイン 第10回:HTML5実践 Three.jsで3Dプログラミング
 
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1
 
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画するiTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
iTamabi 13 第8回:ARTSAT API 実践 2 衛星アプリを企画する
 
Media Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替えMedia Art II openFrameworks 複数のシーンの管理・切替え
Media Art II openFrameworks 複数のシーンの管理・切替え
 

Ssaw08 1007