狠狠撸

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 + テキストエディタ
? フレームベースのアニメーションの利用
? 画像素材の制作?管理が簡単
? 有料

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

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

FlexSDK 環境構築
? Adobe Open SourceのFlex SDKのページからFlex SDKをダウンロード
? http://opensource.adobe.com/wiki/display/?exsdk/Flex+SDK
? Zipファイルを展開
? 生成されたフォルダ「?ex_sdk_3」を以下の場所にインストール
? /Developer/SDKs/?ex_sdk_3

? パスの設定
? Flexのコマンドラインツール群を利用し易いように、パスを張っておく
? ホームディレクトリの「.bash_pro?le」に以下の設定を追加
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

? rascutのインストール
? rascut：RubyベースのActionScript開発ユーティリティー
$ sudo gem install rascut --include-dependencies

? 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="-
...

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

for Mac OSX
? Carbon Emacs + ECMAScript-mode
? 表示例

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

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/?ex_for_ssaw08.zip

Xcodeの環境設定
? 各テンプレートファイルをインストール
? Project Templateフォルダ内のActionScriptフォルダー
? 下記のフォルダー内にコピー
? /Developer/Library/Xcode/Project Templates
? File Templateフォルダ内の Flex SDK フォルダー
? /Developer/Library/Xcode/File Templates
? Speci?cationsフォルダ内のファイル全て
? /Developer/Library/Xcode/Speci?cations

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

XcodeでのActionScript開発
? プロジェクト名を「Hello」に設定して保存
? 「ビルドして進行」ボタンを押す
? 自动的に奥别产ブラウザが起动し、贬别濒濒辞奥辞谤濒诲が表示されるはず

ActionScriptクラスの構造
? 全体の構造
? 全体をpackageで囲んでいる
? クラス名の重複を防ぐ
? パッケージ名を付けると、同じディレクトリ名を参照する
? クラスの宣言
? Spriteクラスの拡張クラスとして作成されている

package パッケージ名 {
import ライブラリ名
[SWFのパラメータ指定]
public class クラス名 extends Sprite {
// パブリック変数
public var 変数名:タイプ;

//コンストラクター
public function クラス名() {
ステートメント;
}

// プライベート変数
private var 変数名:タイプ;

// パブリックメソッド
public function メソッド名(引数1, 引数2, 引数3):タイプ {
}

// プライベートメソッド
public function メソッド名(引数1, 引数2, 引数3):タイプ {
}
}
}

? クラスの内容
? 授業用のテンプレートでは、あらかじめ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
//--------------------------------------
}
}

package {


//--------------------------------------
// CLASS CONSTANTS
//--------------------------------------

//--------------------------------------
// CONSTRUCTOR
//--------------------------------------

//--------------------------------------
//--------------------------------------

//--------------------------------------
// GETTER/SETTERS
//--------------------------------------

//--------------------------------------
// PUBLIC METHODS
//--------------------------------------

//--------------------------------------
// EVENT HANDLERS
//--------------------------------------

//--------------------------------------
//--------------------------------------
}
}
パッケージ

package {


//--------------------------------------
// CLASS CONSTANTS
//--------------------------------------

//--------------------------------------
// CONSTRUCTOR
//--------------------------------------

//--------------------------------------
//--------------------------------------

//--------------------------------------
// GETTER/SETTERS
//--------------------------------------

//--------------------------------------
// PUBLIC METHODS
//--------------------------------------

//--------------------------------------
// EVENT HANDLERS
//--------------------------------------

//--------------------------------------
//--------------------------------------
}
}
クラス
インポートするライブラリ群

package {


//--------------------------------------
// CLASS CONSTANTS
//--------------------------------------

//--------------------------------------
// CONSTRUCTOR
//--------------------------------------

//--------------------------------------
//--------------------------------------

//--------------------------------------
// GETTER/SETTERS
//--------------------------------------

//--------------------------------------
// PUBLIC METHODS
//--------------------------------------

//--------------------------------------
// EVENT HANDLERS
//--------------------------------------

//--------------------------------------
//--------------------------------------
}
}
クラスの定数
コンストラクタ
プライベート変数
ゲッター?セッター
パブリックなメソッド
イベントハンドラー
プライベートなメソッド

? 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 {

[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 {
[SWF(backgroundColor="#CCCCCC")]
{
//青い丸を生成して表示リストに追加 (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 {
{
//青い丸を生成して表示リストに追加 (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 {
{

//カスタムクラス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コのランダムな丸を描く
package {
{
//100回くりかえし
for(var i:uint = 0; i < 100; i++){
//クラスCircleをインスタンス化
}
}
}
}

package {
{
//ランダムに座標を設定
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)); //大きさもランダム
}
//最大値と最小値を指定してランダムに数を生成
private function rand(min:Number, max:Number):Number
{
var randValue:Number = Math.random() * (max - min) + min;
return randValue;
}
}
}

アニメーションの作成
? 描いた丸を動かしてみる
? フレームが更新するたびにイベントを生成して、アニメーションにする
? Processingのdrawのような感覚
? フレームが更新したことを検知するには
? イベントリスナーを利用する
? リスナー = 特定のイベントを監視する機能
? フレームの更新のイベント名
? Event.ENTER_FRAME

? 丸が画面からはみ出たら、はねかえるように改良する
? 新規にprivateメソッドを追加
? limit()
? 自分の表示位置を見て、画面からはみ出るようなら、スピードを反
転して、跳ね返りを表現する

package {
{
for(var i:uint = 0; i < 100; i++){
}
}
}
}

package {
{
_speedX = rand(-8,8);
_speedY = rand(-8,8);
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;
}
}
//最大値と最小値を指定してランダムに数を生成
{
return randValue;
}
}
}

別の方法でのアニメーション
TweenMaxを使用する
? Tweenを行うライブラリを利用してみる
? Tween
? 2つのキーの値をなめらかに補完する機能
? アニメーションを効率的に生成できる
? Flashの付属のTween機能はちょっと動きが遅い
? TweenMaxというライブラリを利用してみる
? 現状では、たぶん最速
? ダウンロード先
? http://blog.greensock.com/tweenmaxas3/
? 解凍して生成されたフォルダの中にある「gs」フォルダをメインクラス
がある場所と同じところに配置する

? TweenMaxの使いかた
? TweeMaxのライブラリをインポート
import gs.TweenMax;
import gs.easing.*;
? Tweenのパラメータを指定して、Tweenを実行
TweenMax.to(ターゲット, 補完時間, {パラメータ});

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

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


public class TweenCircle extends Sprite {
//--------------------------------------
// CONSTRUCTOR
//--------------------------------------
public function TweenCircle()
{
for(var i:uint = 0; i < 100; i++){
}
}
}
}

// Circle.as
package {
import gs.TweenMax;
import gs.easing.*;
//--------------------------------------
// CONSTRUCTOR
//--------------------------------------
{
_speedX = rand(-8,8);
_speedY = rand(-8,8);
alpha = 0.25;
blendMode = BlendMode.ADD;
move();
}

//--------------------------------------
//--------------------------------------
private var _speedX:Number;
private var _speedY:Number;

//--------------------------------------
//--------------------------------------
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});
}

{
return randValue;
}
}
}

狠狠撸

Ssaw08 1007

More Related Content

Ssaw08 1007