jQuery スライドショーでフェードイン、フェードアウト2010

2010年03月09日（火）

前々からやってはいましたが、データの形式(配列からJSONに)とコールバックの仕方を変えてシンプルにしたので一応メモっておきます。
もちろんこれだけでは動かず一定間隔ごとにchange()関数を実行する必要があります。

ちなみにJSONは(JavaScript Object Notation)だそうです。


//初期フェーズ
slide_phase=-1;

//データ
pickup_data=new Array();
slide_data[0]={"href":"test_url1.html","comment":"テスト1","img_path":"1.jpg"};
slide_data[1]={"href":"test_url2.html","comment":"テスト2","img_path":"2.jpg"};
slide_data[2]={"href":"test_url3.html","comment":"テスト3","img_path":"3.jpg"};

slide_num=slide_data.length;

function change(){
	if(slide_phase < slide_num-1){
		slide_phase ++;
	}else{
		slide_phase =0;
	}
	$("#slide img").fadeOut(500,changeSrc);
	$("#slide a").attr("href",slide_data[slide_phase].href);
	$("#slide .comment").text(slide_data[slide_phase].comment);
}
//コールバック
// $(this)でイベントが発生したオブジェクトを受け取れる。
function changeSrc(){
	$(this).attr("src", slide_data[slide_phase].img_path).fadeIn(2500);
}

Tags: , , ,
カテゴリ:jQuery | Comments Closed

関連記事

AS3 円運動のクラス

2009年08月18日（火）

円運動をさせる場合、軸をずらしたmcを作りrotationを変更していたのですが
やはり基礎的なところなので作っておきました。

CircleMove.as

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

	public class CircleMove {
		var my_sprite:Sprite;
		var my_radius:uint
		var my_speed:uint;
		var degree:uint=0;
		var centerX=0;
		var centerY=0;
		var speed:uint;
		function CircleMove(sprite:Sprite,radius,speed) {
			my_sprite=sprite;
			my_radius=radius;
			my_speed=speed;
			centerX=my_sprite.x
			centerY=my_sprite.y
			my_sprite.addEventListener(Event.ENTER_FRAME,move);
		}
		function move(event) {
			var radian = Math.PI/180*degree;
			my_sprite.x=centerX+my_radius*Math.cos(radian);
			my_sprite.y=centerY+my_radius*Math.sin(radian);
			degree+=my_speed;
		}
	}
}

flaファイルは

import CircleMove;
var cm=new CircleMove(ball,100,5);

さらに、JSONで渡したかったので継承したクラスを作成しました。
こんなこと普通しなそう・・・

CircleMove2.as

package {
	public class CircleMove2 extends CircleMove {
		function CircleMove2(obj:Object) {
			my_sprite=obj.sprite;
			my_radius=obj.radius;
			my_speed=obj.speed;
			super(my_sprite,my_radius,my_speed);
		}
	}
}

この場合のflaファイルは

import CircleMove2;

var cm=new CircleMove2({sprite: ball,radius:100,speed:5});

さらに、回転開始のオフセットを設定できるようにしました。
CircleMove3.as

package {
	public class CircleMove3 extends CircleMove2 {
		function CircleMove3(obj:Object) {
			degree=obj.degree;
			super(obj);
		}
	}
}

この場合のサンプルflaファイルは

import CircleMove3;

//リンゲージしたクラスBALL
var ball2=new BALL();
var ball3=new BALL();
prepare(ball2);
prepare(ball3);

//準備用の関数
function prepare(mc:MovieClip){
	mc.x=stage.stageWidth/2;
	mc.y=stage.stageHeight/2;
	addChild(mc);
}

var cm2=new CircleMove2({sprite:ball2,radius:100,speed:5});
var cm3=new CircleMove3({sprite:ball3,radius:100,speed:5,degree:180});//180度から開始

となりました。

Tags: , , , ,
カテゴリ:DisplayObject, Event, flash | Comments Closed

関連記事