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

5 月 20, 2008

Comment 

[FLASH][ブログパーツ]Tumblr Cube

Tags: , ,

Tumblrに自分がポストした画像最新6件を表示するブログパーツ。Papervision3Dのせいなのかよくわからんけどある程度のマシンパワーが必要みたいなので実用度は高くないかも。各面をクリックでそのポストURLへとびます。[FLASHブログパーツ]Tumblr Cube

5 月 8, 2008

Comment 

[Tumblr][PHP]自サイトにTumblrフォトギャラリーを設置

Tags: ,

完成品がこちら。どうだエロいだろう。PHPで作る必要があるのかと言われると、うーん。たぶんJavaScriptオンリーでTumblr情報取得->画像表示とするのがスマートなのかな。

以下ファイルを設定・実行すると画像表示に必要なhtml(下記例では”photo_table.php”)を書き出すので、それを表示したい場所にincludeすればOK。書き出しを定期的に自動で行わせたい場合はCRON等を使用。下記コードではLightbox2の利用を想定しているので、書き出したファイルのimgタグ内にrel=”lightbox”という属性が付く。不要であれば適宜除去。XML解析にはSimpleXMLというモジュールを使用しているのでPHP5以上が必要。

ファイルの設定箇所

  1. TumblrのUSERIDを設定(http://USERID.tumblr.com)
  2. 取得ポスト数を設定
  3. ポストの種類を設定(フォトギャラリーを作成するなら再設定不要)
  4. ギャラリーのサムネイルサイズを設定(75, 100, 250, 400, 500のみ)
  5. サムネイルクリックで表示される画像サイズの設定(75, 100, 250, 400, 500のみ)
  6. 書き出しファイルの名前(と必要であればファイルパス)。デフォルトでは同じディレクトリに作成。ファイル書き出しを行うので書き出し先ディレクトリに書き込み権限を与えることを忘れずに。
<?php

//(1) Set your Tumblr ID
define(‘USER_ID’, ‘borealkiss’);

//(2) Set the maximum item number
define(‘MAX_NUM’, ‘30′);

//(3) Set the post type.
//You don’t need to change as long as you are making a photo gallery.
define(‘POST_TYPE’, ‘photo’);

//(4) Choose the thumbnail size of each image (75,100,250,400, or 500)
define(‘THUMBNAIL_SIZE’, ‘75′);

//(5) Choose the image size in the gallery (75,100,250,400, or 500)
define(‘GALLERY_SIZE’, ‘400′);

//(6) Define a file name for image tabels
define(‘FILENAME’, ‘photo_table.php’);

$fp_out = fopen(FILENAME, ‘w’);
$req1 = ‘num=’.MAX_NUM;
$req2 = ‘type=’.POST_TYPE;
$req_url = ‘http://’.USER_ID.‘.tumblr.com/api/read?’.$req1.‘&’.$req2;
$xml = simplexml_load_file($req_url);

foreach ($xml->posts->post as $post){

    //get the attribute
    $permalink = $post[‘url’];

    foreach ($post->{‘photo-url’} as $url){
        foreach ($url->attributes() as $key=>$value){

            if ($key == ‘max-width’ && $value == GALLERY_SIZE){
                fwrite($fp_out, ‘<a href="’.$url.‘" rel="lightbox" title="’.$permalink.‘">’);
            }
            else if ($key == ‘max-width’ && $value == THUMBNAIL_SIZE){
                fwrite($fp_out, ‘<img src="’.$url.‘" border="0"/></a>’);
            }
        }
    }
}

fclose($fp_out);
?>

[関連リンク]
Tumblr API reference (JP)

5 月 6, 2008

Comment 

Tumblr

Tags:


»»» borealkiss.tumblr.com

ギャラリーの作成方法は[Tumblr][PHP]自サイトにTumblrフォトギャラリーを設置を参照ください。

5 月 5, 2008

Comment 

[Tumblr]ブラウザから一発スクラップ、Tumblr用便利ツールTombloo

Tags:

web閲覧時リアルタイムにTumblrにスクラップできる方法はないかと探していたら、Firefoxのプラグインに便利なのがあった。Tumblr限定っていうのがシンプルでいいかんじ。

  1. ここからTombloo.xpiをダウンロード
  2. Firefoxのツール > アドオン画面にTombloo.xpiをドラッグしてインストール

引用なんかもコピー&ペーストのノリで簡単にできるから、ついつい調子乗ってスクラップしてしまう。手軽になった分扱いには気をつけないとだな。Tumblrが楽しくなってきた。

こんな感じで、選択した文章で右クリックして「Share - Quote(J)」を選べばカンタンにでけた！
改行もちゃんと再現されるし、いうことないわん。

Tomblooで1ステップShare on Tumblr - Fjmo ))>D<(( omjF

[関連リンク]
borealkiss.tumblr.com

[追記(2008/04/13)]
インストールから使い方、機能一覧をまとめたwiki発見(TomblooUsage - tombloo - Google Code)。amazonアフィリエイトIDの設定、Flickrへの投稿、各種画像変換webサービスとの連携なんかもできるみたい。思っていたより高機能だな。

4 月 12, 2008

Comment 

Next Page →