[AS3]放大縮小的商品詳細地圖

Posted on 由
LINEで送る
[`evernote` not found]

主要是計算圖片移動的範圍
還有SCROLL BAR的控制

[AS3DEMO]放大縮小的商品詳細地圖

本來又做防鋸齒的動作
不過把資料倒到BitmapData後再加回來,Scale的資料就跑掉了
也就是他會以放大後的大小去計算
這樣一下子就超過BitmapData限制的2880PX…

[MAIN.as]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

package{
 
	import flash.display.*;
	import flash.events.*;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.utils.Timer;
	import flash.geom.Matrix;
	import flash.net.navigateToURL;
	import flash.filters.*;
	import flash.utils.getDefinitionByName; //引入getDefinitionByName方法;
 
	import caurina.transitions.Tweener;
 
	public class Main extends Sprite {
		var mod:ModelLocator = ModelLocator.getInstance(); 
 
		var item_XML:String;
		var itemLoader:URLLoader = new URLLoader;
		var itemList:XMLList;
		var _mainIMGmask:MovieClip;
 
		var imgLoader:Loader;
		var mainScale:Number;
		var mainScaleAt:Number;
 
		var _BLnav:BLnav = new BLnav();
		var mainPic:MovieClip;
		var scaleMax:Number = 2;
		var mainPicOldWidth:Number;
		var mainPicOldHeight:Number;
 
		public function Main() {	
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
 
		private function init(e:Event) {
			mod.rooturl = this.loaderInfo.url.substring(0, this.loaderInfo.url.indexOf("flash") );
			item_XML = "itemMap/item.xml";
			itemLoader.load(new URLRequest(item_XML));
			itemLoader.addEventListener(Event.COMPLETE, itemLoadComplete);
 
			mod.addEventListener("changeMainIMG", changeMainIMG);
			mod.addEventListener("navScroll", navScroll);
			mod.addEventListener("bigDown", function (e:CustomEvent) { mainScaleAt += 0.1; scaleMainIMG(); } );
			mod.addEventListener("litDown", function (e:CustomEvent) { mainScaleAt -= 0.1; scaleMainIMG(); } );
		}
 
		private function itemLoadComplete(e:Event) {
			mod.item_XML = new XML(itemLoader.data);
			itemList = mod.item_XML.item;
			mod.dispatchEvent( new CustomEvent("changeMainIMG",0));
		}
 
		private function changeMainIMG(e:CustomEvent) {
			imgLoader = new Loader();
			imgLoader.load(new URLRequest(itemList[e.data].img_path));
			imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, mainImgLoaderComplete );
		}
 
		private function mainImgLoaderComplete(e:Event) {
			if (mainPic) removeChild(mainPic);
			mainPic = new MovieClip();
			var _bit:Bitmap = Bitmap(e.target.content);
 
			_mainIMGmask = new MovieClip();
			_mainIMGmask.graphics.beginFill(0xFF0000);
			_mainIMGmask.graphics.drawRect(0, 0, 550, 400);
			_mainIMGmask.graphics.endFill();
			addChild(_mainIMGmask);
 
			mainPicOldWidth = _bit.width;
			mainPicOldHeight = _bit.height;
			mainScale = Math.floor(500 / _bit.width * 100) / 100;
			mainScaleAt = Math.floor(500 / _bit.width * 100) / 100;
			addChild(mainPic);
			mainPic.scaleX = mainPic.scaleY = mainScale;
			mainPic.addChild(_bit);
			mainPic.mask = _mainIMGmask;
			mainPic.doubleClickEnabled=true;
			mainPic.addEventListener(MouseEvent.MOUSE_MOVE, function (e:MouseEvent) { mainPicMove(); } );
			mainPic.addEventListener(MouseEvent.DOUBLE_CLICK, function (e:MouseEvent) { mod.dispatchEvent( new CustomEvent("bigDown")); } );
 
			_BLnav.x = 175;
			_BLnav.y = 390;
			_BLnav.alpha = 0;
			addChild(_BLnav);
			Tweener.addTween(_BLnav, { y:360, alpha:1, time:0.3, transition:"easeOutQuad" } );
			Tweener.addTween(_BLnav.tab, { x:0, time:0.3, transition:"easeOutQuad" } );
		}
 
		private function mainPicMove() {
			Tweener.addTween(mainPic, { y:(400 - mainPicOldHeight * mainScaleAt) * mouseY / 400,
										x:(550 - mainPicOldWidth * mainScaleAt) * mouseX / 550,
										time:0.5, 
										transition:"easeOutQuad" 
										} );
		}
 
		private function scaleMainIMG(scroll:Boolean = false) {
			if (mainScaleAt > scaleMax) {
				mainScaleAt = scaleMax;
			}else if(mainScaleAt<mainScale){
				mainScaleAt = mainScale;
			}
			Tweener.addTween(mainPic, { scaleY:mainScaleAt, scaleX:mainScaleAt, time:0.5, transition:"easeOutQuad" } );
 
			mainPicMove();
			//mainPic.forceSmoothing = true;
			if(!scroll)Tweener.addTween(_BLnav.tab, { x:166 * (mainScaleAt - mainScale) / (scaleMax - mainScale), time:0.5, transition:"easeOutQuad" } );
		}
 
		private function navScroll(e:CustomEvent) {
			mainScaleAt = mainScale + _BLnav.tab.x / 166 * (scaleMax - mainScale);
			scaleMainIMG(true);
		}
		/*private function smoothMainPic() {
			var bmpData:BitmapData = new BitmapData(mainPic.width, mainPic.height); 
			bmpData.draw(mainPic);
			var bmp:Bitmap = new Bitmap(bmpData); 
			bmp.smoothing = true; 
			mainPic.addChild(bmp); 
		}*/
	}
}

[BLnav.as]scrollBar的AS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

package {
 
	import flash.events.*;
	import flash.display.*;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.utils.Timer;
	import flash.geom.Matrix;
	import flash.net.navigateToURL;
 
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.ColorShortcuts;
	ColorShortcuts.init()
 
	import flash.utils.getDefinitionByName; //引入getDefinitionByName方法;
 
	public class BLnav extends MovieClip {
		var mod:ModelLocator = ModelLocator.getInstance();  
 
		public function BLnav() {
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
 
		private function init(e:Event) {
			tab.buttonMode = true;
			btn_big.addEventListener(MouseEvent.MOUSE_DOWN, bigDown);
			btn_lit.addEventListener(MouseEvent.MOUSE_DOWN, litDown);
			tab.addEventListener(MouseEvent.MOUSE_DOWN, tabDown);
			tab.addEventListener(MouseEvent.MOUSE_UP, tabUP);
			tab.addEventListener(MouseEvent.ROLL_OUT, tabUP);
			tab.addEventListener(MouseEvent.MOUSE_OVER, tabOver);
			tab.addEventListener(MouseEvent.MOUSE_OUT, tabOut);
		}
 
		private function bigDown(e:MouseEvent) {
			mod.dispatchEvent( new CustomEvent("bigDown"));
		}
		private function litDown(e:MouseEvent) {
			mod.dispatchEvent( new CustomEvent("litDown"));
		}
		private function tabDown(e:MouseEvent) {
			tab.startDrag(false, new flash.geom.Rectangle(0, 2, 166, 2) );
			tab.addEventListener(MouseEvent.MOUSE_MOVE, dispatchNavScroll );
		}
		private function tabUP(e:MouseEvent) {
			tab.stopDrag();
			tab.removeEventListener(MouseEvent.MOUSE_MOVE, dispatchNavScroll);
		}
		private function tabOver(e:MouseEvent) {
			Tweener.addTween(tab, { _brightness: 0.8, time:0.2, transition:"easeOutBack" } );
		}		
		private function tabOut(e:MouseEvent) {
			Tweener.addTween(tab, { _brightness:0, time:0.2, transition:"easeOutBack" } );
		}
 
		private function dispatchNavScroll(e:MouseEvent) {
			mod.dispatchEvent( new CustomEvent("navScroll"));
		}
	}
}

2 則迴響於《[AS3]放大縮小的商品詳細地圖》

回應已關閉。