[FLASH 10]My First Astro (再生にはFlash Plaeyer 10が必要)

[関連リンク]

• Flash Player 10の新機能デモ (English)

Adobe Labs - Flash Player 10 Feature Demos and Videos

• Flash Player 10の新機能解説(日本語)

akihiro kamijo: Flash Player 10 beta 公開

• Flex SDK 3.0.1.xのダウンロード(English)

Targeting Flash Player 10 Beta with Flex SDK 3.0.x

• Flex SDK 3.0.1.xの設定(日本語)

FlashPlayer/10/API - Spark project

• Flex SDK 3.0.1.xの設定ビデオチュートリアル(English)

The Flash Blog » Video Tutorial on Compiling for Flash Player 10

• Flash 10 drawing APIの詳細な解説(English)

senocular.com Tutorial: Flash Player 10 Drawing API page 1

一応ソースコード。rotationXとかあるよね。

package {
    /*
    * Requires Flex SDK 3.0.1.x to be compiled
    */
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;

    [SWF(width="550",height="400",backgroundColor="0×0")]

    public class Main extends Sprite{

        //size of the box
        private const SIZE:Number = 100;

        public function Main(){
            var spr:Sprite = new Sprite();
            spr.x = stage.stageWidth/2;
            spr.y = stage.stageHeight/2;
            addChild(spr);
            makeCube(spr,0x005885);
            spr.addEventListener(Event.ENTER_FRAME,rotate);
        }

        private function makeCube(s:Sprite,c:uint):void{
            //front
            var f1:Shape = new Shape();
            f1.graphics.lineStyle(2,c);
            f1.graphics.drawRect(0,0,SIZE,SIZE);
            f1.x = -SIZE/2;
            f1.y = -SIZE/2;
            f1.z = -SIZE/2;
            s.addChild(f1);

            //back
            var f2:Shape = new Shape();
            f2.graphics.lineStyle(2,c);
            f2.graphics.drawRect(0,0,SIZE,SIZE);
            f2.x = -SIZE/2;
            f2.y = -SIZE/2;
            f2.z = SIZE/2;
            s.addChild(f2);

            //left
            var f3:Shape = new Shape();
            f3.graphics.lineStyle(2,c);
            f3.graphics.drawRect(0,0,SIZE,SIZE);
            f3.rotationY = 90;
            f3.x = -SIZE/2;
            f3.y = -SIZE/2;
            f3.z = SIZE/2;
            s.addChild(f3);

            //right
            var f4:Shape = new Shape();
            f4.graphics.lineStyle(2,c);
            f4.graphics.drawRect(0,0,SIZE,SIZE);
            f4.rotationY = 90;
            f4.x = SIZE/2;
            f4.y = -SIZE/2;
            f4.z = SIZE/2;
            s.addChild(f4);

            //top
            var f5:Shape = new Shape();
            f5.graphics.lineStyle(2,c);
            f5.graphics.drawRect(0,0,SIZE,SIZE);
            f5.rotationX = 90;
            f5.x = -SIZE/2;
            f5.y = -SIZE/2;
            f5.z = -SIZE/2;
            s.addChild(f5);

            //bottom
            var f6:Shape = new Shape();
            f6.graphics.lineStyle(2,c);
            f6.graphics.drawRect(0,0,SIZE,SIZE);
            f6.rotationX = 90;
            f6.x = -SIZE/2;
            f6.y = SIZE/2;
            f6.z = -SIZE/2;
            s.addChild(f6);
        }

        private function rotate(e:Event):void{
            const DUMP:Number = 0.25;
            var dx:Number = (mouseX - stage.stageWidth/2);
            var dy:Number = (mouseY - stage.stageHeight/2);
            e.target.rotationY = -dx*DUMP;
            e.target.rotationX = dy*DUMP;
        }
    }
}

[関連リンク]
public var むらけん:Flasher; ASDoc GrateWhite(PaperVision3D2.0)

ところでFluidにはサムネイルプラグインというものが標準装備されている。閲覧中のwebページ内のリンク先のスクリーンショットをカバーフロー(iTunesのジャケットギャラリー表示のようなやつ)で表示してくれるものなんだけど、これ名前の通りサムネイルで一括表示するので、例えばはてなブックマークのホットエントリのリンク先をサムネイルで表示したところで文字が小さすぎて読めないためあまり実用的ではない(ホットエントリーのサムネイル表示方法は[N] 「Fluid」のサムネイルプラグインを試したを参照)。文字がでかくてサムネイル表示で十分なwebページ集というとMuxtapeってわけですよ！

Muxtapeはトップにユーザーのmixtapeがランダム表示されるのだけど、これがユーザー名のみの表示でmixtape中身を見るためには一々各ユーザーページを確認しないといけない。ところがMuxtapeのユーザーページは文字が大きくてシンプルな作りをしているのでFluidのサムネイルプラグインで一括表示・チェックするにはもってこいなわけ。僕は今までどんなジャンルのmixtapeかもわからないユーザーのリンク先をクリックしてまで中身を確認したことがなかったので、このFluidの使い方は画期的なんじゃないかなーと思ってる。具体的な設定方法はFluid x Muxtape = すばらしい » www.slack77.netに書いてある(動画付き。ただししゃべり方が鼻につく)。動画元のコメント欄も「Macが欲しい」という感じになってた。またFlickrにはFluidで作成したアプリケーション用のアイコンがたくさん配布されているのでMacユーザーはこの機会に是非Fluidを活用してみてはいかがでしょうか。

[関連リンク]
MOONGIFT: » 専用Webアプリケーションを手軽に「Fluid」:オープンソースを毎日紹介

//"http://example.com/showme.js"
function showMe(userid){
    //swfを表示するのに必要な<object>タグ全体。実際は改行無し
    var obj = ‘<objcet>
            …略…
            <param name="FlashVars" value="userid=’+userid+‘" />
            …略…
            <embed …略…FlashVars="userid=’+userid+‘"></embed></object>’;
    document.write(obj);
}

配布用ソースをは以下のような書式。

//配布用html貼付けソース
<script type="text/javascript" src="http://example.com/showme.js"></script>
<script type="text/javascript">showMe("borealkiss");</script>

この場合、(万が一)ユーザーがすでにshowMeという関数を他で定義していると関数名がコンフリクトを起こす(以下の例ではユーザーの期待に反しブログパーツが二個表示される)。

<html>
<head>
<!–ユーザー定義のshowMe関数–>
<script type="text/javascript">
function showMe(name){
    alert("Welcome, " + name + "!");
}
</script>
</head>

<body>
<!–ブログパーツのshowMe関数–>
<script type="text/javascript" src="http://example.com/showme.js"></script>
<script type="text/javascript">showMe("borealkiss");</script>

<!–ユーザー定義のshowMe関数を実行させるつもりだったのに！–>
<script type="text/javascript">showMe("borealkiss");</script>
</body>
</html>

このコンフリクトはこちらが定義した関数を匿名関数(無名関数)でラップしてしまい、その場で匿名関数を実行させることで回避できる(special thx: YungSang)。

//"http://example.com/showme.js" 修正版
(function(){
    function showMe(userid){
        var obj = ‘<objcet>
                …略…
                <param name="FlashVars" value="userid=’+userid+‘" />
                …略…
                <embed …略…FlashVars="userid=’+userid+‘"></embed></object>’;
        document.write(obj);
    }
    showMe(window._com_example_showMe_userid);
})();

配布ソースは以下のように修正。

//配布用html貼付けソース修正版
<script type="text/javascript">var _com_example_showMe_userid = "borealkiss"</script>
<script type="text/javascript" src="http://example.com/showme.js"></script>

ポイントは匿名関数でラップしてしまうことでブログパーツ表示用関数をローカルスコープにすること;

function(){
    function showMe(…){
        …
    }
    showMe(***);
}

それと匿名関数をその場で実行させることだ;

(function(){…})();

これでwindow上で定義した変数”_com_example_showMe_userid”がコンフリクトしなければユーザーに迷惑をかけることはないはず。そのためにできるだけユニークな変数名にするとよい(例えば自ドメイン名に由来するものetc.)。

[関連リンク]
JavaScript++かも日記: 【JavaScript】匿名関数で匿名スコープ&インスタンス