やっぱギークでナイト！

FlashLite3.0に対応していたり、（実際にはFlash8以前であれば動作可）
加速度センサーを内蔵していたり、と勉強にはもってこいということで
先日、chumbyを購入しました。手乗りサイズのかわいい子です。


練習1.　chumbyにHelloWorldしましょう

Chumby Japan の『オリジナルウィジェット作成　その1』を参考にして
私もHelloWorldしました。

ステージサイズは320ｘ240で上のアニメーションを作成し、
タイムラインに以下を記述し、FL3.0で書き出します。
fscommand ("quit");

次に、profile.xmlというファイルを作成します。
このprofile.xmlと本アニメーションswfを
USB内に置いてchumbyに挿すと、swfファイルがチャンネルに読み込まれます。


下写真がその図。
profile.xml内の記述を調整して、サムネイル画像を登録することも出来ます。
(下写真ではやっておりませんが。）



ちゃんと動いたー！
まだまだ小さな初めの一歩。もっと遊びたい。

永遠のアイドル（犬）でんすけでの勉強シリーズもひとまずここで一区切りという事で
でんすけとお散歩できるデスクトップアプリケーションを作りました。


練習4. でんすけとお散歩できるようにしてみよう。
(でんすけをデスクトップ上で動かす時にでんすけの挙動を色々設定してみる練習)

で、作ったものがこちら（下図）です。


前回の練習3では新規ウィンドウをドラッグして動かしましたが、
1) 最初に起動するウィンドウの表示位置の設定
2) ドラッグしている時、ドラッグを止めた時のでんすけの動き
を追加しました。

でんすけとお散歩のアプリケーション ( Installer Package ) は、以下からDL出来ます。
http://geek.oyspe.com/air/densukesampo/DensukeSampo.air
アニメーションのクオリティは素人なのであれですが、よければお散歩してみてください。
(※) でんすけの胴体部分にドラッグの判定をつけました。
(※) でんすけの足元にある灰色のボタンをクリックすると終了します。


今回のメモとソースは下記のとおりです。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

1. Capabilities クラス

アプリケーション起動時に表示されるウィンドウをユーザーが実際に使っている画面の中央に表示させるためには、ユーザー環境に関する情報を取ってこなければなりません。
そういった際に使用するのがCapabilitiesクラスです。

ヘルプより引用

Capabilitiesクラスを使用すると、開発者はSWFファイルの実行環境に関する情報を取得できます。Capabilities クラスのさまざまなプロパティにより、ユーザーのシステムにおける画面解像度、
アクセシビリティソフトウェアに対するサポートの有無、ユーザーのオペレーティングシステムの言語、
および、現在インストールされている Flash Player のバージョンを知ることができます。

Capabilitiesクラスのプロパティ例：
　Capabilities.screenResolutionX  ：画面の水平解像度の整数
　Capabilities.screenResolutionY  ：画面の垂直解像度の整数

今回は、起動時のウィンドウを画面中央に表示させるたいので
解像度を調べて中央にするようx座標、y座標を計算させて、代入しています。

this.stage.nativeWindow.x=Capabilities.screenResolutionX /2-100;
this.stage.nativeWindow.y=Capabilities.screenResolutionY /2 -50;

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

以下、今回のソースです。

ダウンロードも可能です。
http://geek.oyspe.com/air/densukesampo/DensukeSampo.fla
http://geek.oyspe.com/air/densukesampo/DensukeSampo.as
http://geek.oyspe.com/air/densukesampo/Doggie.as

DensukeSampo.fla：でんすけのMovieClipが含まれています。
DensukeSampo.as：新規ウィンドウの作成、でんすけMovieClipの表示を記述しています。
Doggie.as：でんすけの動きの制御に関して記述しています。

DensukeSampo.asの中身

package {
   
    // インポート宣言
    // ステージの設定関係

    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.MouseEvent;
    import flash.events.*;

    import flash.display.NativeWindow;
    import flash.display.NativeWindowType;
    import flash.display.NativeWindowInitOptions;
    import flash.display.NativeWindowSystemChrome;
    import flash.system.Capabilities;

    public class DensukeSampo extends Sprite {
       
        // Doggieクラスにはでんすけの動きの制御に関して記述しています。
        // 実際のでんすけのMovieClipはDensukeSampo.flaのライブラリ内にあります。
        private var wanwan:Doggie;
        private var newWin:NativeWindow;

        // 起動時に表示されるウィンドウの設定、GOボタンをリスナー登録する
        public function DensukeSampo() {
            this.stage.nativeWindow.x=Capabilities.screenResolutionX /2-100;
            this.stage.nativeWindow.y=Capabilities.screenResolutionY /2 -50;
            bt.addEventListener(MouseEvent.CLICK,createWindow);
        }
       
        // GOボタンをクリックすると新規ウィンドウ（でんすけのみの描画）を開く
        private function createWindow(e:MouseEvent):void {
            var options:NativeWindowInitOptions=new NativeWindowInitOptions;
            options.systemChrome=NativeWindowSystemChrome.NONE;
            options.type=NativeWindowType.LIGHTWEIGHT;
            options.transparent=true;
            newWin=new NativeWindow(options);
            newWin.width=240;
            newWin.height=210;
            newWin.title="でんすけ";
            newWin.visible=true;
            newWin.stage.scaleMode=StageScaleMode.NO_SCALE;
            newWin.stage.align = StageAlign.TOP_LEFT;
            wanwan=new Doggie();
            newWin.stage.addChild(wanwan);
            newWin.stage.nativeWindow.x=Capabilities.screenResolutionX /2-100;
            newWin.stage.nativeWindow.y=Capabilities.screenResolutionY /2 -50;
            newWin.stage.nativeWindow.alwaysInFront=true;
            // でんすけの新規ウィンドウを開くと同時に、起動時のウィンドウは閉じることにしました。
            stage.nativeWindow.close();
        }
    }
}

Doggie.asの中身

package {
   
    // インポート宣言
    import flash.display.MovieClip;
    import flash.events.*;
    import flash.events.MouseEvent;
   
    // でんすけの動き
    public class Doggie extends MovieClip {
        public function Doggie():void {
            this.stop();
            menu.buttonMode=true;
            bark_btn.buttonMode=true;
            // でんすけの足元のボタンをクリックでウィンドウを閉じる
            menu.addEventListener(MouseEvent.CLICK,doExit);
            // でんすけをドラッグする
            bg.addEventListener(MouseEvent.MOUSE_DOWN,moveWindow);
            // でんすけのドラッグを止める
            bg.addEventListener(MouseEvent.MOUSE_UP,stopWindow);
            // 顔をクリックするともぐもぐする
            bark_btn.addEventListener(MouseEvent.CLICK,doBark);
        }
       
        // でんすけの具体的な動き：でんすけMovieClipのフレーム指定で動きを設定
        private function moveWindow(e:MouseEvent):void {
            this.stage.nativeWindow.startMove();
            this.doWaking();
        }
        private function stopWindow(e:MouseEvent):void {
            this.doShippo();
        }
        private function doBark(e:MouseEvent):void {
            this.gotoAndStop(3);
        }
        private function doShippo() {
            this.gotoAndStop(1);
        }
        private function doWaking() {
            this.gotoAndStop(2);
        }
        private function doExit(e:Event) {
            this.stage.nativeWindow.close();
        }
    }
}

前回の練習2で作成したウィンドウは、
ウィンドウクロームをNONEに設定していたためドラッグして動かすことが出来ず、
画面に張り付いたままになっていました。
今回はこのウィンドウをドラッグ出来るようにしようと思います。


練習3．新しいウィンドウをドラッグしてみよう。
( ステージ上に配置されたボタンをクリックして新規のウィンドウを作成、画像を表示させ、
さらにドラッグ出来るようにする。）

以下を作りました。
OPENボタンで新規ウィンドウを作成、CLOSEボタンでウィンドウが閉じます。
ウィンドウにはでんすけMovieClipが表示され、描画部分をドラッグしてウィンドウを動かせます。

前回の練習で作ったソースに
1) ウィンドウを動かす
2) でんすけには指カーソル
を追加しました。



今回のメモとソースは下記のとおりです。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

1. ウィンドウを動かす startMove()

まずは、ウィンドウを動かす条件を設定し、イベントリスナーに登録します。

densuke_mc.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);

イベントを受けて実行する処理内容は下のように記述しました。
NativeWindowクラスのstartMove()というメソッドを使います。

function windowMove(e:MouseEvent):void {
    newWindow.startMove();
}

2. でんすけには指カーソル buttonMode

でんすけの描画範囲内では指カーソルにすることにしました。

densuke_mc.buttonMode = true;

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
以下、今回のソースです。

ダウンロードも出来ます。
http://geek.oyspe.com/air/show_img_to_new_window_and_move/test4.fla

import flash.display.StageScaleMode;
import flash.display.StageAlign;

bt1.addEventListener(MouseEvent.CLICK,openNewWindow);
bt2.addEventListener(MouseEvent.CLICK, closeNewWindow);

var newWindow:NativeWindow;
var densuke_mc:Densuke;

function openNewWindow(e:MouseEvent):void {
    var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();
    //normal, lightweight, utility ：タスクバー表示、表示なし、ツールパレット
    wOption.type = NativeWindowType.NORMAL;
    //none, standard, custom ：ウィンドウクロームなし、OS特有のクローム
    wOption.systemChrome=NativeWindowSystemChrome.NONE;
    //背景を透過させる
    wOption.transparent = true;
    newWindow = new NativeWindow(wOption);
    newWindow.width = 500;
    newWindow.height = 388;
    newWindow.title = "hogehoge";
    newWindow.visible=true;
    //リサイズしないようにする、XYの0,0が左上にある
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
    newWindow.stage.align = StageAlign.TOP_LEFT;

    densuke_mc = new Densuke();
    newWindow.stage.addChild(densuke_mc);
   
    // でんすけの描画範囲内では指カーソルにする。
    densuke_mc.buttonMode = true;
   
    //でんすけの描画範囲内でドラッグするとそのままnewWindowをドラッグで移動させる
    densuke_mc.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);
   
}

function closeNewWindow(e:MouseEvent):void {
    newWindow.close();
}

function windowMove(e:MouseEvent):void {
    newWindow.startMove();
}

Adobe AIR Beta3がリリースされたようですが、
まだランタイムのみで日本語エクステンションはまだのようなので
引き続きBeta2でやっていこうと思います。

それでは、今回も引き続きairアプリの勉強です。
前回の練習1では、新規のウィンドウを作成したり閉じたりしましたが
ウィンドウの中には何も表示されていませんでした。
ですので今回は作成したウィンドウの中に描画をしようと思います。

練習２．新しいウィンドウに画像を描画してみよう。
( ステージ上に配置されたボタンをクリックして新規のウィンドウを作成させ、中に画像を表示させる。）

以下を作りました。
OPENボタンをクリックすると新規ウィンドウが作成され、
CLOSEボタンをクリックするとウィンドウが閉じます。
新規ウィンドウにはでんすけのMovieClip、Spriteで作成した円が描かれています。

前回の練習で作ったソース（新規のウィンドウを作成・閉じる）に
1) 画像の描画：円とでんすけ
2) ウィンドウ内の描画サイズをリサイズしないようにする
3) XY軸の調整
を追加しました。




今回のメモとソースは下記のとおりです。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

1. 新規のウィンドウに画像の描画

まずは表示させるための画像を用意します。
(円とでんすけのMovieClip）

■Sprite型の円

var circle:Sprite = new Sprite();
circle.graphics.beginFill (0xFFCC00);
circle.graphics.drawCircle (140, 200, 50);

■MovieClipのでんすけ

var densuke_mc:Densuke = new Densuke();

■ウィンドウへ追加
それぞれ新規のウィンドウ ( NativeWindow型のnewWindow ) のstageに直接追加しました。

newWindow.stage.addChild (circle);
newWindow.stage.addChild(densuke_mc);

2. 新規のウィンドウをリサイズした際に描画内容をリサイズしないようにする

ウィンドウをリサイズした際の領域内の設定内容については、
Stage.scaleModeプロパティの値に対してStageScaleModeクラスのパブリック定数を使います。
StageScaleModeクラスのパブリック定数には以下のようなものがあります。

    exactFit：指定領域内に、元の縦横比を維持しないで表示されます。
    noBorder：指定領域いっぱいに全体がゆがまずに表示されます。
    noScale：アプリケーションのサイズが固定されます。
    shoAll：指定領域内に全体が、元の縦横比を維持したままゆがまずに表示されます。

今回は、noScaleを使いますので、下記のように記します。

newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;

※今回の練習の場合は、元々ウィンドウクロームをNONEに設定しているので、
実行時にウィンドウをリサイズしようにも不可能ですが。

また、StageScaleModeクラスを使用する際にはクラスのインポートが必要なので
冒頭で忘れずにインポートしておきます。

import flash.display.StageScaleMode;

3. 新規のウィンドウのXY(0,0)の設定

Stage.alignプロパティの値に対して、StageAlignクラスのパブリック定数を使い設定します。

今回はウィンドウの左上にXY(0,0)をもってくるために、以下のように記述しました。

newWindow.stage.align = StageAlign.TOP_LEFT;

また、StageAlignクラスを使いますので、クラスをインポートしておかなければなりません。

import flash.display.StageAlign;

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

以下、今回のソースです。

ダウンロードも可能です。
http://geek.oyspe.com/air/show_img_to_new_window/test3.fla

import flash.display.StageScaleMode;
import flash.display.StageAlign;

bt1.addEventListener(MouseEvent.CLICK,openNewWindow);
bt2.addEventListener(MouseEvent.CLICK, closeNewWindow);

var newWindow:NativeWindow;
var circle:Sprite;
var densuke_mc:Densuke;

function openNewWindow(e:MouseEvent):void {
    var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();
    //normal, lightweight, utility ：タスクバー表示、表示なし、ツールパレット
    wOption.type = NativeWindowType.NORMAL;
    //none, standard, custom ：ウィンドウクロームなし、OS特有のクローム
    wOption.systemChrome=NativeWindowSystemChrome.NONE;
    //背景を透過させる
     wOption.transparent = true;
    newWindow = new NativeWindow(wOption);
    newWindow.width = 500;
    newWindow.height = 388;
    newWindow.title = "hogehoge";
    newWindow.visible=true;
    //リサイズしないようにする、XYの0,0が左上にある
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE;
    newWindow.stage.align = StageAlign.TOP_LEFT;

    circle = new Sprite();
    circle.graphics.beginFill (0xFFCC00);
    circle.graphics.drawCircle (140, 200, 50);
    newWindow.stage.addChild (circle);
   
    densuke_mc = new Densuke();
    newWindow.stage.addChild(densuke_mc);
   
}

function closeNewWindow(e:MouseEvent):void {
    newWindow.close();
}

まだまだPapervision3Dを自由には使いきれていない状態ではありますが、
早くも次の項目へ進めることになり
次はAirアプリケーションの開発について学んでみることになりました。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Adobe Air とは：
アプリケーションの開発及び実行環境のことで、
既存のウェブアプリケーションの開発スキル
(HTML, Javascript, Adobe Flash, Adobe Flex, Ajax)
を使用しながらクロスプラットフォームなアプリケーションを作ることができる。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

フルFlashなデスクトップアプリケーションをFlashだけで作れてしまうので、
あなたもやってみなさい（by先生）とのこと。
Flex BuilderではなくCS3で作成します。

■ まず、Adobe AIR の実行環境をインストールします。
Adobe AIR Beta 2 Installer は以下からダウンロード出来ます。
Adobe Labs Downloads page http://labs.adobe.com/downloads/air.html

■ 次に、CS3用のエクステンション（日本語版）をインストールし開発環境を整えます。
Adobe AIR update Beta 2 for Flash CS3 Professional は以下からダウンロード出来ます。
Adobe Labs/ AIR:Flash CS3 Professional Update
http://labs.adobe.com/wiki/index.php/AIR:Flash_CS3_Professional_Update#Japanese


上記ふたつをインストールした後にFlashを起動すると、
Air用の新規作成メニューが追加されてることが確認出来ます。
新規作成メニューからAdobe Airを選択すれば、FlashでのAirアプリケーション開発が可能です。




それでは早速実作業へ。


練習1.  新しいウィンドウを作ってみよう。
( ステージ上に配置されたボタンをクリックして新規のウィンドウを作成させる。）

そして作ったのが以下です。
OPENボタンをクリックすると新規ウィンドウが作成され、
CLOSEボタンをクリックすると作成したウィンドウが閉じます。



練習をすすめる上でのメモとソースは下記に記しました。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

1. アプリケーション及びインストーラーの設定方法

アプリケーションの書き出しに必要な設定項目がいくつかあるので、
開発を進める前に準備してしまいます。



[コマンド]メニューから[AIR - Application and Installer Settings]をクリック。
以下のようなウィンドウが開くので、ファイル名、バージョン情報、コピーライト等々
アプリケーションの設定ファイル（app.xml）を生成します。



デジタル署名（上図赤枠参照）をしないとコンパイル時にエラーが起きてしまうので注意です。
また、ファイルの保存場所を変更したら、Destination Folderの書き換えも忘れずに。

諸設定の終了後、[コマンド]メニューから[AIR - Create AIR File]でコンパイル出来ます。
注：ディレクトリ構造内に日本語があるとエラーが出てしまいますのでご注意ください。


2. 新規ウィンドウの作成はNativeWindow()

新規ウィンドウを作成する時には次のように記述します。

var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();
var newWindow:NativeWindow = new NativeWindow(wOption);

これは、
NativeWindowInitOptions型のオブジェクトwOptionに対して新規ウィンドウの設定を持たせ
さらにそのオブジェクトwOptionを
NativeWindow型のオブジェクトnewWindowをnewする際の引数とするためです。

また、NativeWindowInitOptions型のオブジェクトですが、
下記のように設定内容を持たせることが出来ます。

[1] wOption.type = NativeWindowType.NORMAL;

normalの他には、lightweight、utilityといったのプロパティがあります。
normal：タスクバー表示
lightweight：表示なし
utility：ツールパレット

[2] wOption.systemChrome=NativeWindowSystemChrome.STANDARD;

standardの他には、none、customといったプロパティがあります。
none：ウィンドウクロームなし
standard：OS特有のクローム
custom：カスタム


* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

以下、今回のソースです。

// 新規ウィンドウを作成するボタン、作成したウィンドウを閉じるボタン
bt1.addEventListener(MouseEvent.CLICK,openNewWindow);
bt2.addEventListener(MouseEvent.CLICK, closeNewWindow);

var newWindow:NativeWindow;

// 新規ウィンドウの作成
// NativeWindowInitOptions型のオブジェクトに対して新規ウィンドウの設定を持たせて// NativeWindow型のオブジェクト(newWindow)をnewする際の引数とする。

function openNewWindow(e:MouseEvent):void {
    var wOption:NativeWindowInitOptions = new NativeWindowInitOptions();

    //タスクバー表示
    wOption.type = NativeWindowType.NORMAL;

    //OS特有のクローム
    wOption.systemChrome=NativeWindowSystemChrome.STANDARD;

    newWindow = new NativeWindow(wOption);
    newWindow.width = 200;
    newWindow.height = 100;
    newWindow.title = "hogehoge";
    newWindow.visible=true;

}

// 新規ウィンドウを閉じる
function closeNewWindow(e:MouseEvent):void {
    newWindow.close();
}

新たにでんすけとサッチー（たま）のMovieClipを作成したので
前回の歩くおやじに付け加えてみました。



実際の swf ファイル（角度を変えて見ることが出来ます）はこちらからどうぞ。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

でんすけとサッチー（たま）の描画については
前回のおやじを描画する時と同様の処理をしており
main.asファイルの中身は、追加の描画部分以外においてはほぼ前回と同じです。

今回作成したファイルは以下のふたつです。

Download:
Densuke_Oyaji_Tama_Walking.fla
main.as

注）動作させるにはPapervision3Dのライブラリが必要です。
　　ライブラリを含めて上記2ファイルをzipさせたものはこちら。

前回に引き続き、今回もPapervision3Dのお勉強。
(勉強というよりは既成ファイルの中身をいじっているだけなので恐縮ですが。)

「前回のHelloWorldファイルを元にしながら、何か作ってみなさい」 by 先生
との事だったので、今回は自分から自分へお題を課しました。

* * * * * * * * * * * * * * * * * * * * * * * * * * *
お題：犬を歩かせてみましょう。

オブジェクトの表示方法、アニメーションの貼り付け方を知ってみようというお題です。
以下を作りました： 今回は、犬 改め おやじ を歩かせています。


＊実際の swf ファイル（歩くおやじを角度を変えて見ることが出来ます）はこちらからどうぞ。


課題をすすめる上でのメモとソースは下記に記しました。

* * * * * * * * * * * * * * * * * * * * * * * * * * *

まずは下図のように配置するため、次に挙げた２つの素材を用意します。

　 ■ 町並みの背景（ 静止画：1コマのMovieClip ）
 　■ 歩くおやじ（ 足踏みをしているアニメーション：2コマから成るMovieClip ）

　

背景画像を円柱に貼り付け、それを回転させ、
その前方に足踏みアニメーションのおやじを配置します。
おやじが歩いているかのように見せるためです。

素材が用意出来たら、次はmain.asの中身です。
課題をこなす上で、今回学習した点は大きくは以下の点です。

1．MovieClipをテキスチャとして使用する

　前回、地球儀やその背景（宇宙）に貼り付ける用の画像テキスチャを作成した際は、
　Bitmapライブラリから画像を読み込んだので "BitmapAssetMaterial" クラスを使用しましたが
　今回テキスチャとして使用する素材はMovieClipです。
　MovieClipをテキスチャとして使用する時は、"MovieAssetMaterial" クラスを使用します。

1－1．MovieClip内で描画されていない部分 及び 透明部分を透過させる場合：

　MovieClipの描画部分以外もしくはアルファ値0の部分が黒く映ってしまう現象があります。

　今回のおやじを例にして説明すると･･･
　おやじの可動範囲がそのままMovieClipの大きさになっており、
　MovieAssetMaterialインスタンスとして読み込んだ際に
　実際におやじが描画されている部分以外が、下図のように黒くなってしまいます。

　　　

　この現象を防ぐためには、MovieAssetMaterial型のインスタンスを作成する時に、
　第二引数（ transparent：Boolean ）で透明・不透明を設定する必要があります。
　第二引数を "true" にすると、透明になります。
　
　おやじの場合：　

var materialOyaji :MovieAssetMaterial = new MovieAssetMaterial( "oyaji2",true,null );

   更に詳しく：

MovieAssetMaterial(id:※, transparent:Boolean = false, initObject:Object = null)

　■ id：MovieClip ライブラリid
　■ transparent：trueは透過、falseは透過なし（デフォルトではfalseに設定されています）
　■ initObject：色、アルファ、線などを設定出来ます。

　　※initObjectについては閃光的網站・弛緩複合体さんのページで分かりやすく説明されております。
　　　閃光的網站・弛緩複合体：Papervision3D の Materials(2) ～ graphics コマンド系 ～


1－2．MovieClipのアニメーションを反映させる場合：

　テキスチャとしてMovieClipを使用すると、デフォルトではアニメーションが反映されません。
　
　MovieClipのアニメーションを反映させるためには、MovieAssetMaterialインスタンスの
　パブリックプロパティanimated：Boolean を "true" にする必要があります。

　例：おやじの場合　

materialOyaji.animated =true;

2．Cylinderクラス

　円柱を作成、表示できます。
　新しいCylinderオブジェクトを作成する時のメソッドは下記の通り。

Cylinder(material:MaterialObject3D = null, radius:Number = 100, height:Number = 100, segmentsW:int = 8, segmentsH:int = 6, topRadius:Number = 0, initObject:Object = null)

　■ material：
　■ radius：底面の半径
　■ height：高さ
　■ segmentsW：円の分割数
　■ segmentsH：高さの分割数
　■ topRadius：上面の半径
　■ initObject：色、アルファ、線などを設定出来ます。

　　※ここで注意：
　　topRadiusを０にしたら、円錐になるのかな？と思いますよね。
　　ところが、topRadiusはデフォルトで0に設定されています。
　　topRadiusが0である場合は底面の半径＝上面の半径とするという設定があるからだそうです。
　　参照したページ：
　　throw Life：Papervision3Dのプリミティブ・オブジェクト - Cone, Cube, Cylinder, Sphere　　


* * * * * * * * * * * * * * * * * * * * * * * * * * *

main.asの中身です。

package
{
import flash.display.*;
import flash.events.*;

// Import Papervision3D
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;

public class main extends Sprite
{
    // ______________________________________________ vars3D

    var container :Sprite;
    var scene     :Scene3D;
    var camera    :Camera3D;
    var wall3D      :Cylinder;
    var oyaji          :Plane;

    // ______________________________________________ main

    function main()
    {
        init3D();

        // onEnterFrame
        this.addEventListener( Event.ENTER_FRAME, loop3D );
    }

    // ______________________________________________ init3D

    function init3D():void
    {
        // Sprite型のcontainerを作成しステージに配置します。
        container = new Sprite();
        addChild( container );
        container.x = 280;
        container.y = 200;

        // sceneを作成
        scene = new Scene3D( container );

        // cameraを作成
        camera = new Camera3D();

        // おやじを配置
        addOyaji();
        
        // 背景を配置
        addSpace();

}

    // ______________________________________________ loop

    function addOyaji():void
    {
        // OyajiWalking.flaライブラリ内のMovieClipでおやじテキスチャ作ります。
        // MovieClipを使用するので、BitmapAssetMaterialではなく、MovieAssetMaterialです。
        // 第二引数をtrueにすると描画されている部分以外を透過にします。
        var materialOyaji :MovieAssetMaterial = new MovieAssetMaterial( "oyaji2",true,null );

        // MovieAssetMaterialインスタンスのプロパティanimatedをtrueにし、アニメーションを再生させます。
        materialOyaji.animated =true;

        // おやじをロードします。おやじは平面に貼り付けるのでPlane型です。
        oyaji = new Plane( materialOyaji, 500, 900, 8, 8);

        // おやじの配置を設定します。
        oyaji.rotationX = 0;
        oyaji.y= -450;
        oyaji.z=-200;

        // おやじをsceneに配置します。
        scene.addChild( oyaji );
       
    }

    // ______________________________________________ loop
   
    function addSpace():void
    {
        // OyajiWalking.flaライブラリ内のMovieClipで背景テキスチャ作ります。
        var materialSpace :MovieAssetMaterial = new MovieAssetMaterial( "wall",true,null);

        // 背景をロードします。背景は円柱に貼り付けるのでCylinder型です。
        wall3D = new Cylinder( materialSpace,3000,2000,100,6,0,null);

        // 背景の位置を設定します。
        wall3D.z = 3100;

        // 背景をsceneに配置します。
        scene.addChild( wall3D );
    }

    // ______________________________________________ loop

    function loop3D(event:Event):void
    {
        //カメラの移動範囲の指定
        camera.x = -container.mouseX*3;
        camera.y = container.mouseY*4;

        // 背景を回転させます。
        wall3D.yaw( -2);

        // Render the scene
        scene.renderCamera( camera );
    }
}
}
 

先生から「物理エンジン、アニメーション、３D、どれがいい？」と聞かれ
「３Dやってみたい」と答えたところ
Papervision3Dに少し挑戦してみることになりました。

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Papervision3Dとは：
Flash ( flash8とflash9 ) で動作する３Dエンジンで、
ActionScriptを使っての３D表現が可能になります。
http://papervision3d.org

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

① それでは早速 作業開始

まずはPapervision3Dをダウンロードしましょう。

※実際に作業する際には、
 Papervision3Dのライブラリを作業するファイルと同じディレクトリ下へ用意します。
(もしくはパスを通します。)

■ Papervision3D 1.5   from Google code
   http://code.google.com/p/papervision3d/

■ API documents
   http://www.papervision3d.org/docs/as3/


② exampleファイルをいじりながら習うより慣れろ

Papervision3d の Google code ダウンロードリストに
Papervision3D_sourc_docs_examples_rev28.zip
というファイルがあるのでそれをダウンロードします。

examplesの中にHelloWorldというフォルダがあるので、
HelloWorldフォルダの中に①のPapervision3dのライブラリをコピペします。
(もしくはパスを通す）

HelloWorld.fla、main.asを開きます。
(スクリプトはmain.asに記述されています)


③ HelloWorld ならぬ HelloEarth


実際のswf ファイル（地球を角度を変えてみることが出来ます）はこちらからどうぞ。

分からなかった部分にコメントアウトを追加しましたが
間違っていたり等、指摘して頂けると幸いです。

package
{
import flash.display.*;
import flash.events.*;

// Import Papervision3D
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;

public class main extends Sprite
{
    // ___________________________________________ vars3D

    var container :Sprite;
    var scene     :Scene3D;
    var camera    :Camera3D;
    var sphere    :Ase;　//3Dモデリングされた球体


    // ____________________________________________ main

    function main()
    {
        init3D();

        // onEnterFrame
        this.addEventListener( Event.ENTER_FRAME, loop3D );
    }


    // ____________________________________________ init3D

    function init3D():void
    {
        // Create container sprite and center it in the stage
        container = new Sprite();
        addChild( container );
        container.x = 320;
        container.y = 240;

        // Create scene
        scene = new Scene3D( container );

        // Create camera
        camera = new Camera3D();

        // Add Earth sphere
        addEarth();

        // Add space plane
        addSpace();
    }


    // _____________________________________________ loop

    function addEarth():void
    {
        //惑星に貼り付けるBitmap画像(flaファイル・ライブラリ内)を引数に入れる
        var materialEarth :BitmapAssetMaterial = new BitmapAssetMaterial( "Earth" );

        //惑星のロード、第三引数は惑星の遠さ；数が１より小さいほど遠い
        sphere = new Ase( materialEarth, "world.ase", 0.7);

        //rotationXはX軸に対して回転
        //yawはY軸に対して回転
        //参照したサイト：http://blog.livedoor.jp/takaaki_bb/archives/50614075.html
        sphere.rotationX = 0;
        sphere.yaw( -30);

        // Add to scene
        scene.addChild( sphere );
    }


    // _____________________________________________ loop

    function addSpace():void
    {
        //宇宙に貼り付けるBitmap画像(flaファイル・ライブラリ内)を引数に入れる
        var materialSpace :BitmapAssetMaterial = new BitmapAssetMaterial( "Space" );

        // 宇宙画像を貼り付けるPlane型のオブジェクトを作る；Planeは表示オブジェクト
        //引数はそれぞれ横の長さ、縦の長さ、セグメント（ゆがみ？：小さい値ほどゆがむ）8が丁度良さそう
        //参照したサイト：http://aquioux.blog48.fc2.com/blog-entry-177.html
        //参照したサイト：http://aquioux.blog48.fc2.com/blog-entry-191.html
        var plane:DisplayObject3D = new Plane( materialSpace, 6400, 4800, 8, 8);

        // Position plane
        plane.z = 500;

        // Add to scene
        scene.addChild( plane );
    }


    // ____________________________________________ loop

    function loop3D(event:Event):void
    {
        // Move camera with the mouse
        //カメラの移動範囲の指定
        camera.x = -container.mouseX/4*4*6;
        camera.y = container.mouseY/3*3*6;

        // Rotate sphere around its own vertical axis
        sphere.yaw( 0.2 );

        // Render the scene
        scene.renderCamera( camera );
    }
}
}

地球の画像を自分の顔に変えてみました。
HelloWorld.flaのライブラリに画像を追加し、貼り付けるBitmap画像を変更します。




















これはとても楽しい！

AS3になって、イベント処理の仕組みが変わったそうですので、その練習①

on(release) {　}
onPress( ) = function( ) {　}

などが使えなくなったので、新しい処理方法を学びました。

例：インスタンス「firststep_mc」をクリックしたら「HelloWorld」と出力する

//インスタンス名.addEventListener(条件, 処理);
firststep_mc.addEventListener(MouseEvent.CLICK, showText);

//メソッドの定義
//event_obj:MouseEvent → event_obj:Event にしても良い（MouseEvent より Event の方が偉い）
function showText(event_obj:MouseEvent):void {
    trace("HelloWorld");
}

一見前よりややこしくなっているようにも見えるのですが
ひとつずつ理解していくと、納得。

 * * * * * * * * * * * * * * * * * *

お題１：お花に水をあげて育ててあげて下さい。

ムービークリップのクリック処理が出来るようになったかの確認のお題です。
以下を作りました：ジョーロをクリックして水をやると、お花が段階的に成長します。




ステージのメインのタイムラインには下記を記述

//インスタンスjoro_mcの上ではカーソルを指の形にします。
joro_mc.buttonMode=true;

//クリックされたら教えてね、とリスナー登録
joro_mc.addEventListener(MouseEvent.CLICK, water);

//イベントオブジェクトを引数にしてメソッドが呼ばれる
function water(event_obj:MouseEvent):void {
    joro_mc.mizuyari();
    flower_mc.seicho();    
}

ジョーロのメインのタイムラインに記述

function mizuyari() {
    trace("花に水をやります");
    this.gotoAndPlay(2);
}

お花のメインのタイムラインに記述

function seicho() {
    trace("花が一段階成長します");
    this.gotoAndStop(currentFrame+1);
}