[FlashPlayer10]TweenerでTumblr3Dギャラリー

Tags: ,

元ネタはFlash Player 10 Beta: 3D(注：動画)。これ中々面白いからFlash Player 10を使わずに作って展示したいんだけど、z軸方向をどう扱うのかが問題。普通にリサイズすれば同じ動きになるんだろうか。クリックで各画像にフォーカス、ダブルクリックでその画像のPermalinkへ飛びます。

[FLASH10]Tumblr Spiral
[FLASH10]Tumblr Spiral (要Flash Plaeyer 10)

以下ソース。テキストフィールド等の装飾品は除いています。

Main.as (メインクラス)

package {
    /*
    * Requires Flex SDK 3.0.1 or later to be compiled
    */
    import caurina.transitions.Tweener;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.net.URLLoader;
    import flash.net.URLRequest;

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

    public class Main extends Sprite{
        //Setting for Tumblr API
        private const IMG_SIZE:int = 75;
        private const USERID:String = "borealkiss";
        private const QUERY_NUM:int = 30;

        //Canvas
        private var container:Sprite;

        public function Main(){
            container = new Sprite();
            container.x = stage.stageWidth/2;
            container.y = stage.stageHeight/2;
            addChild(container);

            //Query string for Tumblr API
            var str:String = "http://"+USERID+".tumblr.com/api/read?num="
                                +QUERY_NUM+"&type=photo";
            var loader:URLLoader = new URLLoader();
            loader.load(new URLRequest(str));
            loader.addEventListener(Event.COMPLETE,parseXML);
        }

        //XML parser
        public function parseXML(e:Event):void{
            var xmlData:XML = new XML(e.target.data);
            var imgURLs:Array = new Array();
            var postURLs:Array = new Array();

            for each (var ch1:XML in xmlData.posts.post){
                var postURL:String = ch1.attribute("url").toString();
                postURLs.push(postURL);
                for each (var ch2:XML in ch1.child("photo-url")){
                    if (ch2.attribute("max-width") == IMG_SIZE){
                        var imgURL:String = ch2.toString();
                        imgURLs.push(imgURL);
                    }
                }
            }
            makeFaces(imgURLs,postURLs,true);
        }

        private function makeFaces(aryImgURLs:Array,aryPostURLs:Array,
                                    flgNavigate:Boolean):void{

            //Radius of a spiral
            const RAD:Number = 250;

            for (var i:uint=0; i<aryImgURLs.length; i++){
                var f:FaceDoubleClick = new FaceDoubleClick(
                            aryImgURLs[i],aryPostURLs[i],flgNavigate);

                //Set photos along the spiral
                f.x = RAD*Math.cos(i*Math.PI/6);
                f.y = RAD*Math.sin(i*Math.PI/6);
                f.z = (aryImgURLs.length-i)*200;
                f.buttonMode = true;
                f.addEventListener(MouseEvent.CLICK,onClick);
                container.addChild(f);
            }
        }

        private function onClick(e:MouseEvent):void{
            //Must be tuned upon image size
            var offsetX:Number = 270;
            var offsetY:Number = 190;
            var offsetZ:Number = 0;

            var sp:Sprite = Sprite(e.target);
            Tweener.addTween(container,{x:-sp.x+offsetX, y:-sp.y+offsetY,
                                        z:-sp.z+offsetZ, time:1});
        }
    }
}

FaceDoubleClick.as

package{
    import flash.display.Bitmap;
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.net.URLRequest;
    import flash.net.navigateToURL;
    import flash.system.LoaderContext;

    public class FaceDoubleClick extends Sprite{
        private var _url:String;
        private var _loader:Loader;
        private var flgNavigate:Boolean;

        public function FaceDoubleClick(imgURL:String,postURL:String = "null",
                                                flgNavigate:Boolean = false){
            _url = postURL;
            this.flgNavigate = flgNavigate;

            var context:LoaderContext = new LoaderContext(true);
            _loader = new Loader();
            _loader.load(new URLRequest(imgURL), context);
            _loader.contentLoaderInfo.addEventListener(Event.INIT,init);

            this.doubleClickEnabled = true;
            addEventListener(MouseEvent.DOUBLE_CLICK, doubleClick);
        }

        private function init(e:Event):void{
            //The image center will be placed on center
            var bmp:Bitmap = Bitmap(e.target.content);
            bmp.x = -bmp.width/2;
            bmp.y = -bmp.height/2;
            addChild(bmp);
        }

        private function doubleClick(e:MouseEvent):void{
            if (flgNavigate){
                navigateToURL(new URLRequest(_url));
            }
        }
    }
}

Related posts:



5 月 20, 2008

Trackback URL

Comments

Leave a Reply