リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ 大きい画像をスクロール表示

ActionScript

大きい画像をスクロール表示

Flashで1つの画像最大サイズは2880px X 2880pxである為、それより大きい画像を表示する方法について検討したものを以下に示す。

【サンプル】ドラッグ可

JavaScriptを有効にし、最新のFlashPlayerをインストールお願いしますGet Adobe Flash player



【考え方】
考え方1
上図の作戦3で検討
考え方2

表示エリアの4個分の画像表示オブジェクトを移動量にあわせて動作させてみる。

【サンプル】ドラッグ可

JavaScriptを有効にし、最新のFlashPlayerをインストールお願いしますGet Adobe Flash player



総移動量から画像表示オブジェクトに配置する画像をテキスト表示。

【サンプル】ドラッグ可

JavaScriptを有効にし、最新のFlashPlayerをインストールお願いしますGet Adobe Flash player



マスク処理を行い、完成イメージ。

【サンプル】ドラッグ可

JavaScriptを有効にし、最新のFlashPlayerをインストールお願いしますGet Adobe Flash player



【as3】


var gazo_mc:MovieClip = new MovieClip();//画像表示用オブジェクト
var gaido_mc:Cla_Gaido = new Cla_Gaido();//表示用ガイドオブジェクト

var down_x:int = 0;//直前のマウス座標X
var down_y:int = 0;//直前のマウス座標Y
var ido_x:int = 0;//総移動長さX
var ido_y:int = 0;//総移動長さY

//コマ切れ画像(jpg画像をムービークリップシンボルに配置しリンケージしたもの)
var p01:Cla_P01 = new Cla_P01();
var p02:Cla_P02 = new Cla_P02();
var p03:Cla_P03 = new Cla_P03();
var p04:Cla_P04 = new Cla_P04();
var p05:Cla_P05 = new Cla_P05();
var p06:Cla_P06 = new Cla_P06();
var p07:Cla_P07 = new Cla_P07();
var p08:Cla_P08 = new Cla_P08();
var p09:Cla_P09 = new Cla_P09();
var p10:Cla_P10 = new Cla_P10();
var p11:Cla_P11 = new Cla_P11();
var p12:Cla_P12 = new Cla_P12();
var p13:Cla_P13 = new Cla_P13();
var p14:Cla_P14 = new Cla_P14();
var p15:Cla_P15 = new Cla_P15();
var p16:Cla_P16 = new Cla_P16();
var p17:Cla_P17 = new Cla_P17();
var p18:Cla_P18 = new Cla_P18();
var p19:Cla_P19 = new Cla_P19();
var p20:Cla_P20 = new Cla_P20();
var p21:Cla_P21 = new Cla_P21();
var p22:Cla_P22 = new Cla_P22();
var p23:Cla_P23 = new Cla_P23();
var p24:Cla_P24 = new Cla_P24();
var p25:Cla_P25 = new Cla_P25();
var p26:Cla_P26 = new Cla_P26();
var p27:Cla_P27 = new Cla_P27();
var p28:Cla_P28 = new Cla_P28();
var p29:Cla_P29 = new Cla_P29();
var p30:Cla_P30 = new Cla_P30();
var p31:Cla_P31 = new Cla_P31();
var p32:Cla_P32 = new Cla_P32();
var p33:Cla_P33 = new Cla_P33();
var p34:Cla_P34 = new Cla_P34();
var p35:Cla_P35 = new Cla_P35();
var p36:Cla_P36 = new Cla_P36();
var p37:Cla_P37 = new Cla_P37();
var p38:Cla_P38 = new Cla_P38();
var p39:Cla_P39 = new Cla_P39();
var p40:Cla_P40 = new Cla_P40();

//画像配置位置マトリクス
var p_Arr:Array = [
				   [p01,p02,p03,p04,p05],
				   [p06,p07,p08,p09,p10],
				   [p11,p12,p13,p14,p15],
				   [p16,p17,p18,p19,p20],
				   [p21,p22,p23,p24,p25],
				   [p26,p27,p28,p29,p30],
				   [p31,p32,p33,p34,p35],
				   [p36,p37,p38,p39,p40]
				   ];

var cntX:int = 0;//画像オブジェクト左上画像x側カウンタ(配列取得用)
var cntY:int = 0;//画像オブジェクト左上画像Y側カウンタ(配列取得用)

//-----------------------------------------------------------------------初期設定
func_Const();
function func_Const(){
	
	//画像表示用オブジェクト配置
	addChild(gazo_mc);
	gazo_mc.x = 200;
	gazo_mc.y = 150;
	
	//マスクの設定
	var mask_mc:Shape = new Shape();
	mask_mc.graphics.beginFill(0x000000);
	mask_mc.graphics.drawRect(200, 150, 200, 100);//座標x,座標y,幅,高さ
	mask_mc.graphics.endFill();
	addChild(mask_mc);
	gazo_mc.mask = mask_mc;
	
	//テキストフィールド、ガイド的なオブジェクト配置
	addChild(gaido_mc);
	
	//画像表示用オブジェクト内画像配置
	func_set_p();
	
	//移動長さ表示
	func_ido_text();
	
	//マウスイベントリスナー登録
	stage.addEventListener(MouseEvent.MOUSE_DOWN,func_stage_MOUSE_DOWN);
}

//画像表示用オブジェクト内画像配置
function func_set_p(){

	//表示オブジェクトがあればを全消去
	while(gazo_mc.numChildren > 0){
		gazo_mc.removeChildAt(0);
	}
		
	//表示画像内オブジェクトのカウンタ確認
	cntY = ido_y / (-100) ;
	cntX = ido_x / (-200) ;
	
	//画像配置(カウンタと配列を比較し、データがあれば画像表示)
	//左上
	if(cntY < p_Arr.length &&  cntX < p_Arr[cntY].length){
		gazo_mc.addChild(p_Arr[cntY][cntX]);
		p_Arr[cntY][cntX].x = 0;
		p_Arr[cntY][cntX].y = 0;
	}
	//右上
	if(cntY < p_Arr.length &&  cntX+1 < p_Arr[cntY].length){
		gazo_mc.addChild(p_Arr[cntY][cntX+1]);
		p_Arr[cntY][cntX+1].x = 200;
		p_Arr[cntY][cntX+1].y = 0;
	}
	//左下
	if(cntY+1 < p_Arr.length &&  cntX < p_Arr[cntY+1].length){
		gazo_mc.addChild(p_Arr[cntY+1][cntX]);
		p_Arr[cntY+1][cntX].x = 0;
		p_Arr[cntY+1][cntX].y = 100;
	}
	//右下
	if(cntY+1 < p_Arr.length &&  cntX+1 < p_Arr[cntY+1].length){
		gazo_mc.addChild(p_Arr[cntY+1][cntX+1]);
		p_Arr[cntY+1][cntX+1].x = 200;
		p_Arr[cntY+1][cntX+1].y = 100;
	}
}


//マウスダウン
function func_stage_MOUSE_DOWN(e:MouseEvent):void{
	
	//マウス座標取得
	down_x = mouseX;
	down_y = mouseY;
	
	//リスナー登録
	stage.addEventListener(MouseEvent.MOUSE_MOVE,func_stage_MOUSE_MOVE);//マウスムーブ
	stage.addEventListener(MouseEvent.MOUSE_UP,func_stage_stop);//マウスアップ
}


//マウスムーブ
function func_stage_MOUSE_MOVE(e:MouseEvent):void{
	
	//移動長さ計算
	ido_x += mouseX-down_x;
	ido_y += mouseY-down_y;
	
	//表示画像ずらし長さ計算
	var move_x:int = ido_x % 200;
	var move_y:int = ido_y % 100;
	
	//表示画像ずらし
	if(ido_x >= 0 ){
		ido_x = 0;
		gazo_mc.x = 200;
	}else if(ido_x > -800 ){
		gazo_mc.x = 200 + move_x;
	}else{
		ido_x = -800;
		gazo_mc.x = 200;
	}
	
	if(ido_y >= 0 ){
		ido_y = 0;
		gazo_mc.y = 150;
	}else if(ido_y > -700){
		gazo_mc.y = 150 + move_y;
	}else{
		ido_y = -700;
		gazo_mc.y = 150;
	}
	
	//画像入れ替え
	func_set_p();
	
	//直前マウス座標際取得
	down_x = mouseX;
	down_y = mouseY;
	
	func_ido_text();//移動長さ表示
	e.updateAfterEvent();//強制描画
}

//マウスアップ
function func_stage_stop(e:MouseEvent):void{
	//リスナー解除
	stage.removeEventListener(MouseEvent.MOUSE_MOVE,func_stage_MOUSE_MOVE);//マウスムーブ
	stage.removeEventListener(MouseEvent.MOUSE_UP,func_stage_stop);//マウスアップ
}

//移動長さ表示
function func_ido_text(){
	gaido_mc.ido_tf.text = "総移動長さX=" + String(ido_x) + "px" + "\n総移動長さY=" + String(ido_y) + "px";
}

last update 2011.3.24
参考・出典等
「特に無し」

▲page top

topmemogalleryblogtestaboutlinksmail
Copylight(C)2008-2011 Riptac. All Rights Reserved.