as3.0でスライドショーを作成する

2009/09/01  as3.0, チュートリアル

きょうはスライドショーを作成していきます。

内部に画像埋め込んだスライドショーを作成します。

 

最初に何をしたいのかを明確にします。

 

クリックをしたら次の画像をみれるようにしたい

 

スクリプトでは、クリックをしたらその画像が見えなくなって、次の画像が見えるようにする!

 

画像の表示・非表示については「visible」。ステージをクリックをすればよいので、「stage.addEventListener(MouseEvent.CLICK,func)」 を使用する。

 

 

完成図

This movie requires Flash Player 9.0.0

 

最初にflashの中に画像をいれます。

画像を入れたらステージの中でひとつひとつをMovieClip化します。

これは右クリックで【シンボルに変換】か、f8ボタンを押すとできます。

変換をしたらpict1-pict5まで名前をつけます。

 

ステージに名前をつけて配置

名前は下記で設定できます

 

名前設定のキャプチャです。

 

package  {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class index extends Sprite {

		var _nowNum = 1

		public function index() {	
			pict1.visible = true;
			pict2.visible = false;
			pict3.visible = false;
			pict4.visible = false;
			pict5.visible = false;
			stage.addEventListener(MouseEvent.CLICK, _slide);
		}

		private function _slide(e:Event):void {
			if (_nowNum == 1) {
				pict1.visible = false;
				pict2.visible = true;
				pict3.visible = false;
				pict4.visible = false;
				pict5.visible = false;
				_nowNum=2
			}else if (_nowNum == 2) {
				pict1.visible = false;
				pict2.visible = false;
				pict3.visible = true;
				pict4.visible = false;
				pict5.visible = false;
				_nowNum=3
			}else if (_nowNum == 3) {
				pict1.visible = false;
				pict2.visible = false;
				pict3.visible = false;
				pict4.visible = true;
				pict5.visible = false;
				_nowNum=4
			}else if (_nowNum == 4) {
				pict1.visible = false;
				pict2.visible = false;
				pict3.visible = false;
				pict4.visible = false;
				pict5.visible = true;
				_nowNum=5
			}else if (_nowNum == 5) {
				pict1.visible = true;
				pict2.visible = false;
				pict3.visible = false;
				pict4.visible = false;
				pict5.visible = false;
				_nowNum=1
			}
		}

	}	
}

以上のようになります。

 

「いまなんまいめか?」という事をかんがえる事で、ながくなってしまいましたが、スライドショーを作成できました!

 

ファンクションは「ステージをクリック」の度に実行されます。

 

キリトリ線

 

■応用編

 

もっと綺麗にソースを書けないだろうか。

 

スクリプトが長くなってしまう場合や、スクリプトにはんようせいをもたせたいばあいにはArrayを使用します。

 

Arrayは番号で管理をしたいとの事です。下のようにきそくせいをもたせてかんけつなかきかたをします。

 

for (var i:uint = 0 ; i < _array.length ; i++ ) {
	_array[i].visible = false;
}

↑は、

_array[0].visible = false;

_array[1].visible = false;

・・・ _array[_array.length-1].visible = false;

となります。

 

ポイント

Arrayは規則性せいのある部分に 対応をさせるので、あれば。 コードが短くなる

 

for文のせつめいはかつあいします。

以上の_arrayを使用する事でスライドショーの式は次のようになります。

package  {
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;

	public class index extends Sprite {

		var _nowNum = 1
		var _imgArr:Array

		public function index() {
			_imgArr = new Array();
			_imgArr = [pict1,pict2,pict3,pict4,pict5]
			for (var i:uint = 0 ; i < _imgArr.length ; i++ ) {
				_imgArr[i].visible = false;
			}
			_imgArr[0].visible = true
			stage.addEventListener(MouseEvent.CLICK, _slide);
		}

		private function _slide(e:Event):void {
			for (var i:uint = 0 ; i < _imgArr.length ; i++ ) {
				_imgArr[i].visible = false;
			}
			_imgArr[_nowNum].visible = true;
			if (_nowNum == _imgArr.length - 1) {
				_nowNum=0
			}else{
				_nowNum++;
			}
		}

	}

}

ここで、注意しておくべき事は、ファンクションの実行をされる時は上から下に実行をされるので、

for (var i:uint = 0 ; i < _imgArr.length ; i++ ) {
	_imgArr[i].visible = false;
}
_imgArr[_nowNum].visible = true;

とすれば、該当のものだけを表示する事が可能となります。(2重定義の場合は後ろが適用です。)

 

今日のファイル

http://prfry.net/s26/flash/slide_show.zip