tom-gs.com

まずは連続でフェードアウトするスライドショー～TweenオブジェクトとTweenEvent

Details: Category: 第1回　簡単なスライドショーを作ってみよう; Published on Sunday, 23 January 2011 15:25; Written by Super User

さて、XMLのデータが読み込めればスライドショーをさせる環境は揃ったも同然です。今回はいよいよスライドショーを作ります。
ということでSlideShowというクラスを作るのですが、何が必要かちょっと考えて見ます。

単純に考えます。

基本的に画像しか出さない。
Tweenクラスを使ってフェードアウトするスライドショー。
永遠にループする。
画像は先にすべてFlash上に読み込む。

細かく考えます。

スライドショー自体はムービークリップで作るので、MovieClipクラスを継承。
コンストラクタでXMLからパースした配列を渡す。
コンストラクタで配列のデータから画像の読み込みまで行ってしまう。
読み込んだ画像はインスタンス変数の配列に格納する。
4をスライドするけど順序管理のため、インスタンス変数pointerをつくり、現在のスライドを格納する。

ここまで考え終わったので、こんなクラスを作ってみました。

package com.tom_gs.www.slideshow {
    import flash.display.*;
    import flash.events.*;
    import flash.net.*;
    import flash.utils.Timer;
    import fl.transitions.*;
    import fl.transitions.easing.*;

    /**
     * SlideShow.as
     * This class creates easy slide show
     */
   
    public class SlideShow extends MovieClip{

        /**
         * Current slide index
         */
        private var pointer:Number = 0;

        /**
         * Max value of slide pointer
         */
        private var pointerMax:Number = 0;

        /**
         * MovieClip instances of slide
         */
        private var slides:Array = new Array();

        /**
         * Is current slide the first one?
         */
        private var firstSlide:Boolean = true;

        /**
         * SlideShow constructor
         */
        public function SlideShow(data:Array) {
            this.pointerMax = this.pointer = data.length - 1;
            var num = 0;
            for (var i in data){
                var loader:Loader = new Loader();
                var url:String = data[i].image;
                var request:URLRequest = new URLRequest(url);
                loader.load(request);
                this.slides[i] = loader;
                this.addChild(slides[slides.length - 1]);
            }
        }

        /**
         * Get previous pointer
         */
        private function getPrevPointer():Number {
            var pointer:Number = this.pointer;
            pointer++;
            if (pointer > this.pointerMax){
                pointer = 0;
            }
            return pointer;
        }

        /**
         * Get next pointer
         */
        private function getNextPointer():Number {
            var pointer:Number = this.pointer;
            pointer--;
            if (pointer < 0){
                pointer = this.pointerMax;
            }
            return pointer;
        }

        /**
         * Set instance variable pointer to next one
         */
        private function next():Number {
            this.pointer = this.getNextPointer();
            return this.pointer;
        }

        /**
         * Start slide show
         */
        public function start():void {
            this.startShow();
        }

        /**
         * Start slide show to loop
         */
        private function startShow(e:TweenEvent = null):void {
            if (e != null) {
                this.firstSlide = false;
            }
            this.slideNow();
        }

        /**
         * Immediately fade out
         */
        private function slideNow():void {
            if (!this.firstSlide) {
                this.setChildIndex(this.slides[this.pointer], 0);
                this.slides[this.pointer].alpha = 1;
                this.next();
            }
            var fadeout:Tween = new Tween(this.slides[this.pointer], "alpha", Regular.easeOut, 1, 0, 2, true);
            fadeout.addEventListener(TweenEvent.MOTION_FINISH, startShow);
        }
    }
}

Tweenオブジェクトは生成すると移動やフェードを実装することができます。
http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/fl/transitions/Tween.html

TweenオブジェクトはTweenEventで定義されたイベントを実装することができます。
これを利用してサンプルコードではTweenのモーションが完了した時点で次のフェードアウトを実行するようにしています。

これを呼び出すにはMain.asのコールバックメソッドを以下のように書き換えます。

// XMLDatabaseからのコールバック
public function callback(){
    var data = this.xmldb.getData();
    var slideShow:MovieClip = new SlideShow(data);
    this.addChild(slideShow);
    slideShow.start();
}

Next >