【フォトギャラリー追加機能：その1】自動で次画像へ遷移する

以前作ったフォトギャラリーに、とりあえず自動スライドショー機能だけ付けてみました。
放っておくと次の写真へと切り替わります。

クリックで作例を表示します。

現在の仕様は、

• 4秒で次の画像に切り替わる。
• nextボタン・preボタンを押すと、自動切り替え機能を一度停止して、5秒後に再開する。
• 最後の画像まで行ったら最初の画像に戻る。
• 同じく、最初の画像から前に戻ると最後の画像に戻る。

となっています。

ばばっと書いてみただけなのでダラダラ長くなってしまいました。美しくない！
参考程度にどうぞです。

詳しい解説…というとおこがましい感じですがそんなモノはしばらくしたら書いてみたいと思います。書く！

Flash　actionscript3.0側の記述。メインフレームに記入。

太字が前回のスクリプトからの追加部分です。

var xmlLoader:URLLoader = new URLLoader();

var xmlURL:URLRequest = new URLRequest("photo.xml");

var imgLoader:Loader = new Loader();

var i:int = 0;
// photo.xmlの読み込みが完了したら

xmlLoader.addEventListener(Event.COMPLETE, xComplete);

function xComplete(eventObject:Event):void {

  var myXML:XML = new XML(xmlLoader.data);

  XML.ignoreWhitespace = true;
  var imgURL = new URLRequest(myXML.photoset[i].@img);

  imgLoader.load(imgURL);

  addChildAt(imgLoader,0);
  number_txt.text = String( (i+1) + "/" + myXML.photoset.length() );

  comment_txt.text = String(myXML.photoset[i].@comment);


// タイマー部分

  var myTimer:Timer = new Timer(4000, 0);

  myTimer.addEventListener(TimerEvent.TIMER, xNextTimer);

  myTimer.start();

  //指定秒数ごとに以下の処理を実行

  function xNextTimer():void {

    if (i < myXML.photoset.length()-1) {

      i += 1;

      imgURL = new URLRequest(myXML.photoset[i].@img);

      imgLoader.load(imgURL);

      number_txt.text = String( (i+1) + "/" + myXML.photoset.length() );

      comment_txt.text = String(myXML.photoset[i].@comment);

	 trace("MemoryUse : "+Math.round(System.totalMemory/1024)+"KByte");

    } else if(i == myXML.photoset.length()-1) {

        i = 0;  

        imgURL = new URLRequest(myXML.photoset[i].@img);

        imgLoader.load(imgURL);

        number_txt.text = String( (i+1) + "/" + myXML.photoset.length() );

        comment_txt.text = String(myXML.photoset[i].@comment);

    }

  }

  //タイマー再開関数

  function xReTimer():void {

    myTimer.start();

  }


// 進むボタン

  var next_btn:Sprite = new Sprite();

  next_btn.buttonMode = true;

  next_btn.graphics.beginFill(0xffffff, 0);

  next_btn.graphics.drawRect(150, 0,50, 200);

	

  next_btn.addEventListener(MouseEvent.MOUSE_DOWN, xNextClick);

  function xNextClick(eventObject:MouseEvent):void {

    myTimer.stop(); // タイマーをストップさせる

    var myInterval:uint = setTimeout(xReTimer, 1000);

    if (i < myXML.photoset.length()-1) {

      i += 1;

      imgURL = new URLRequest(myXML.photoset[i].@img);

      imgLoader.load(imgURL);

      number_txt.text = String( (i+1) + "/" + myXML.photoset.length() );

      comment_txt.text = String(myXML.photoset[i].@comment);

    // 最初の写真に戻るように変更

    } else if(i == myXML.photoset.length()-1) {

        i = 0;

        imgURL = new URLRequest(myXML.photoset[i].@img);

        imgLoader.load(imgURL);

        number_txt.text = String( (i+1) + "/" + myXML.photoset.length() );

        comment_txt.text = String(myXML.photoset[i].@comment);

    }

  }

  addChild(next_btn);


// 戻るボタン

  var pre_btn:Sprite = new Sprite(); 

  pre_btn.buttonMode = true;

  pre_btn.graphics.beginFill(0xffffff, 0);

  pre_btn.graphics.drawRect(0, 0,50, 200);
  pre_btn.addEventListener(MouseEvent.MOUSE_DOWN, xPreClick);

  function xPreClick(eventObject:MouseEvent):void {

    myTimer.stop(); // タイマーをストップさせる

    var myInterval:uint = setTimeout(xReTimer, 1000);

    if (i > 0) {

      i -= 1;

      var imgURL:URLRequest = new URLRequest(myXML.photoset[i].@img);

      imgLoader.load(imgURL);

      number_txt.text = String( (i+1) + "/" + myXML.photoset.length() );

      comment_txt.text = String(myXML.photoset[i].@comment);

    // 同じく最後の写真に戻るように変更

    } else if(i == 0) {

        i = myXML.photoset.length()-1;

        imgURL = new URLRequest(myXML.photoset[i].@img);

        imgLoader.load(imgURL);

        number_txt.text = String( (i+1) + "/" + myXML.photoset.length() );

        comment_txt.text = String(myXML.photoset[i].@comment);

    }

  }

  addChild(pre_btn);
}

xmlLoader.load(xmlURL);

this.stop();

次は画像切替時のエフェクトを実装します。
したいな。できるかな。

大佐さん、力をください。