FLASHのお勉強_FLASHフォトビューアー(ギャラリー)21

　サムネイルのクリックでその拡大写真が画面に表示されるというタイプのビューアー（ギャラリー）であるが、サムネイルがマウスのドラッグで、x軸方向には回転速度、ｙ軸方向には上下の表示位置が変化するようにしたものである。　サムネイル表示における趣向の一つとしていかがであろうか。

SAMPLE

ステージなどの準備

●600*600のステージ（24fps）を設定（背景色、ステージサイズは目的に応じて任意でよい）
●ライブラリーに拡大写真クローズ用の×印（リンケージ：close_btn）と、ドラッグ方向指示図（arrow）を作成配置
●swfと同じディレクトリにimgフォルダを置き、その中に拡大写真（600*400、p1.jpg,p2.jpg,,,）、サムネイル写真（150*100、ps1.jpg,,,,）
　を格納しておく
●プロパティタブのクラスに panelRotation と記入

スクリプト　panelRotation.as （as3.0）


package {

    import flash.display.Sprite;

    import flash.display.MovieClip;

    import flash.filters.GlowFilter;

    import flash.events.MouseEvent;

    import flash.events.Event;

    import fl.transitions.*;

    import fl.transitions.easing.*;

    import flash.display.Loader;

    import flash.net.URLRequest;

    import flash.geom.Matrix;





    public class panelRotation extends Sprite {

        private var num:Number = 11;//写真の数

        private var w:Number = 150;//サムネイルの幅

        private var h:Number = 100;//サムネイルの高さ

        private var speed0 = 0;//初期（定常時）のｘ軸方向の回転速度

        private var glow1:GlowFilter = new GlowFilter(0xffffff,0.8,3,3,8,3,true);

        private var glow2:GlowFilter = new GlowFilter(0xff0000,0.4,10,10,8,3,true);

        private var rollov:Boolean;

        private var preMousex:Number;//ドラッグ開始時のｘ座標

        private var preMousey:Number;

        private var speedx:Number = 0;//マウスドラッグ時のｘ軸方向回転速度

        private var speedy:Number = 0;//マウスドラッグ時のｙ軸方向回転速度

        private var kdx:Number = 0;//マウスドラッグによる移動量

        private var dirx:Number = 1;//回転方向（右回り、左回りは-1）

        private var thumbContainer:MovieClip;//サムネイル群収納ＭＣ

        private var screen:MovieClip;//拡大画像読み込み用ＭＣ

        private var c_btn:MovieClip;//拡大写真閉じるボタン

        private var arrows:MovieClip;//ドラッグ方向指示図

        private var inner_mc:MovieClip;//個々のマウスを収納するmcの入れ子ＭＣ

        private var url:String;//サムネイルファイルの収納場所（パス）

        private var tween_arr:Array = new Array();//Tweenを一時待避させる配列

        private var arrE = [];//サムネイルの深度を調節する配列

        //コンストラクタ

        public function panelRotation() {

            //ＭＣ類の配置

            screen = new MovieClip();

            addChild(screen);

            c_btn = new close_btn();

            addChild(c_btn);

            with (c_btn) {

                x = stage.stageWidth - 30;

                y = 30;

                buttonMode = true;

                visible = false;

            }

            arrows = new arrow();

            arrows.x = stage.stageWidth - 100;

            arrows.y = stage.stageHeight - 100;

            addChild(arrows);

            thumbContainer = new MovieClip();

            addChild(thumbContainer);

            //サムネイル群

            for (var i:uint = 0; i < num; i++) {

                var mc:MovieClip = new MovieClip();

                mc.buttonMode = true;

                mc.n = i;

                mc.name = "sp" + i;

                inner_mc = new MovieClip();

                inner_mc.x = 0;

                inner_mc.y =  -  h / 2;

                mc.addChild(inner_mc);

                url = "img/ps" + i + ".jpg";

                loadThumb(inner_mc);

                inner_mc.rotationY = 45;//rotationYプロパティの付与

                thumbContainer.addChild(mc);

                mc.filters = [glow1];

                mc.addEventListener(MouseEvent.ROLL_OVER, rollover);

                mc.addEventListener(MouseEvent.ROLL_OUT, rollout);

                mc.addEventListener(MouseEvent.CLICK, loadImg);

                mc.addEventListener(Event.ENTER_FRAME, circulating);

            }

            stage.addEventListener(MouseEvent.MOUSE_DOWN, mDownHandler);

        }



        private function rollover(event:MouseEvent):void {

            event.target.filters = [glow2];

            rollov = true;

            event.target.rollv = true;

        }

        private function rollout(event:MouseEvent) {

            event.target.filters = [glow1];

            rollov = false;

            event.target.rollv = false;

        }

        //回転運動

        private function circulating(event:Event):void {

            var p_mc = event.target as MovieClip;

            if (rollov) {

                speed0 +=  0;

            } else {

                speed0 +=  dirx / 300;

            }

            kdx += (speedx - kdx) / 50;

            var rd = speed0 + kdx + p_mc.n / num * 2 * Math.PI;

            if (p_mc.rollv) {

                var a = 1.3 * Math.sin(rd) / Math.abs(Math.sin(rd));

                var b = 0;

                var c = 0;

                var d = 1.3;

            } else {

                a = Math.sin(rd);

                b = 0;

                c = 0;

                d = 1;

            }

            var mcx = stage.stageWidth / 2;

            var mcy = stage.stageHeight / 2 + speedy*5*(num/2 - p_mc.n);

            var myMatrix:Matrix = new Matrix(a,b,c,d,mcx,mcy);

            p_mc.transform.matrix = myMatrix;

            p_mc.yPosition = Math.cos(rd);

            depthControll();

            thumbContainer.setChildIndex(p_mc,arrE[p_mc.n]);

        }

        //サムネイル読み込み関数;

        private function loadThumb(mc):void {

            var imgLoader = new Loader();

            var urlReq:URLRequest = new URLRequest(url);

            imgLoader.load(urlReq);

            mc.addChild(imgLoader);

        }

        //拡大写真の読み込み関数

        private function loadImg(event:MouseEvent):void {

            thumbContainer.visible = false;

            arrows.visible = false;

            var imgLoader = new Loader();

            var p_url:String = "img/p" + event.currentTarget.n + ".jpg";

            var urlReq:URLRequest = new URLRequest(p_url);

            imgLoader.load(urlReq);

            screen.addChild(imgLoader);

            imgLoader.contentLoaderInfo.addEventListener( Event.COMPLETE , displayPic);

            function displayPic():void {

                screen.y = stage.stageHeight / 2 - screen.height / 2;

                c_btn.visible = true;

                var inTween = new Tween(screen,"alpha",Regular.easeOut,0,1,1,true);

                tween_arr.push(inTween);

                imgLoader.contentLoaderInfo.removeEventListener( Event.COMPLETE , displayPic);

                c_btn.addEventListener(MouseEvent.CLICK, closeMotion);

                function closeMotion(event:MouseEvent):void {

                    var outTween = new Tween(screen,"alpha",Regular.easeOut,1,0,0.5,true);

                    tween_arr.push(outTween);

                    outTween.addEventListener(TweenEvent.MOTION_FINISH, toInit);

                    function toInit(event:TweenEvent):void {

                        thumbContainer.visible = true;

                        arrows.visible = true;

                        c_btn.visible = false;

                        c_btn.removeEventListener(MouseEvent.CLICK, closeMotion);

                        screen.removeChild(imgLoader);

                        imgLoader = null;

                        tween_arr = new Array();

                    }

                }

            }

        }

        //マウスドラッグ移動量を回転速度に変換

        private function mDownHandler(e:MouseEvent):void {

            preMousex = mouseX;

            preMousey = mouseY;

            stage.addEventListener(MouseEvent.MOUSE_MOVE, mMoveHandler);

            function mMoveHandler(e:MouseEvent):void {

                var movex = mouseX - preMousex;

                var movey = mouseY - preMousey;

                speedx +=  movex / 200;

                speedy +=  movey / 40;

                if (movex) {

                    dirx = movex / Math.abs(movex);

                } else {

                    dirx = 1;

                }

                preMousex = mouseX;

                preMousey = mouseY;

            }

            function mUpHandler(e:MouseEvent):void {

                speedx +=  0;

                stage.removeEventListener(MouseEvent.MOUSE_MOVE,mMoveHandler);

            }

            stage.addEventListener(MouseEvent.MOUSE_UP, mUpHandler);

        }

        //サムネイルの深度調節関数

        private function depthControll():void {

            var arrA = [];

            var arrB = [];

            var arrC = [];

            var arrD = [];

            for (var i:uint=0; i<num; i++) {

                var o_mc = MovieClip(thumbContainer.getChildByName("sp" + i));

                var currentyPosition = o_mc.yPosition;

                arrA[i] = [currentyPosition,i];

            }

            arrB = arrA.sortOn([0],[Array.NUMERIC]);

            for (var j:uint=0; j<num; j++) {

                arrC[j] = [arrB[j][1],j];

            }

            arrD = arrC.sortOn([0],[Array.NUMERIC]);

            for (var k:uint=0; k<num; k++) {

                arrE[k] = arrD[k][1];

            }

        }

    }



}

スクリプトの若干の説明

thumbContainer = new MovieClip();
　全てのサムネイルを入れ込むためのMCで、これにより、全部の表示、非表示を切り替える。
inner_mc.rotationY = 45;
　サムネイル写真をロードしたinner_mcにrotationYプロパティを適用
p_mc.yPosition = Math.cos(rd);　depthControll();
　サムネイルの表示順位を決めるための計算で、cos値（手前が１、一番奥がｰ1）の大きさの順に並べる
tween_arr.push(inTween);
　拡大写真のフェードイン、フェードアウトに適用しているTweenがガベージコレクション(メモリー内から削除される)の対象にならないように一時的に配列内に退避させる。これをしないと、Tweenが途中で途切れたり（止まったり）することがある。　fumiononaka.com（FN0711001）参照のこと。

HOME　　　お勉強総リスト

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。