把EC-CUBE中的商品詳細頁的圖片換成FLASH小相簿

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

會這樣做是希望可以在原本放圖片的地方可以變成一個小相簿
如果會AJAX可能會更好做吧
但是一方面我沒真寫過AJAX
一方面也想在多多複習一下FLASH練習一下AS3

  1. 更改\html\user_data\packages\mystyle\detail.tal新增一個FLASH的DIV取代原本的圖片,並把商品的附註的圖片顯示拿掉
    2. 55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

    <div id="detailphotoblock">
    <div id="detailphotoflash"></div>
        <script type="text/javascript">	
		var flashvars = {
			  mainpic: "<!--{$arrFile[$key].filepath}-->" 
			    <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
 				<!--{assign var=akey value="sub_image`$smarty.section.cnt.iteration`"}-->
					<!--{if $arrFile[$akey].filepath != ""}-->
					,<!--{$akey}-->: "<!--{$arrFile[$akey].filepath}-->" 
			  		<!--{/if}-->
			    <!--{/section}-->
			};  
		var params = {  
			};  
		var attributes = {  
			};  
		swfobject.embedSWF("<!--{$TPL_DIR}-->img/flash/detailphotoblock.swf", "detailphotoflash", "330", "255", "9.0.0","expressInstall.swf", flashvars, params, attributes);  
	</script>
	</div>
    248
249
250
251
252
253
254
255
256
257
258
259
260
261
262

      <!--▼サブコメントここから-->
  <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
  <!--{assign var=key value="sub_title`$smarty.section.cnt.iteration`"}-->
    <!--{if $arrProduct[$key] != ""}-->
  <div class="subarea">
    <h3><!--★サブタイトル★--><!--{$arrProduct[$key]|escape}--></h3>
    <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.iteration`"}-->
 
 
    <p><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br}--></p>
 
  </div>
  <!--{/if}-->
  <!--{/section}-->
  <!--▲サブコメントここまで-->
  2. 在後台上傳附註圖片(這時前台不會顯示了,但是會把直傳給FLASH)
  3. 主影格AS:
    4. 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

    import flash.display.*;
import flash.events.*;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP;
 
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
 
this.loaderInfo.addEventListener(Event.COMPLETE,init);
 
function init(e:Event) {
	if (paramObj["mainpic"]) {
		var me:MouseEvent = new MouseEvent("CLICK");
		loadmainpic(me);
	}
	p_btn.buttonMode = true;
	p_btn.addEventListener(MouseEvent.CLICK,loadmainpic);
	p_btn.visible = false;
	for (var i=1; i<=5; i++) {
		this["p"+i+"_btn"].visible =false;
		if (paramObj["sub_image"+i]) {
			p_btn.visible = true;
			this["p"+i+"_btn"].visible =true;
			this["p"+i+"_btn"].buttonMode = true;
			this["p" + i + "_btn"].addEventListener(MouseEvent.CLICK,btnloadpic);
		}
	}
}
 
function loadmainpic(e:MouseEvent) {
	ldr_mc.startLoad(paramObj["mainpic"]);
}
function btnloadpic(e:MouseEvent) {
	var num = e.target.name.charAt(1);
	var str = paramObj["sub_image"+num];
	ldr_mc.startLoad(str);
}
  4. ldr_mc的主影格AS幾乎是拿書上的範例來用:
    5. 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

    import fl.transitions.*;
import fl.transitions.easing.*;
 
var tf:Function = Elastic.easeInOut;
var ldr:Loader;
var req:URLRequest;
var ldrInfo:LoaderInfo;
var oldURL:String;
// 一開始設定為隱藏
this.visible = false;
 
function startLoad(url:String) {
	if(url==oldURL){
		return;
	}else{
		oldURL = url;
	}
	if(ldr){
		this.removeChild(ldr);
		ldrInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
		ldrInfo.removeEventListener(Event.COMPLETE, onComplete);
	}
	this.visible = true;
	perc_txt.text = "";
	bg_mc.tw ? bg_mc.tw.stop() : null;
	bg_mc.th ? bg_mc.th.stop() : null;
	bg_mc.tw = new Tween
		(bg_mc, "width", tf, bg_mc.width, 45, 1, true);
	bg_mc.th = new Tween
		(bg_mc, "height", tf, bg_mc.height, 45, 1, true);
 
	bg_mc.tw.addEventListener(TweenEvent.MOTION_FINISH,
		function(e:TweenEvent){
			ldr = new Loader();
			addChild(ldr);
			ldr.visible = false;
			req = new URLRequest(url);
			ldr.load(req);
			ldrInfo = ldr.contentLoaderInfo;
			ldrInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
			ldrInfo.addEventListener(Event.COMPLETE, onComplete);
		}
	);
}
 
function onProgress(e:ProgressEvent) {
	var a:uint = e.target.bytesLoaded;
	var b:uint = e.target.bytesTotal;
	perc_txt.text =  int(a/b*100).toString();
}
 
function onComplete(e:Event):void {
	var cw:int = e.target.width;
	var ch:int = e.target.height;
	perc_txt.text = "";
	bg_mc.tw ? bg_mc.tw.stop() : null;
	bg_mc.th ? bg_mc.th.stop() : null;
	bg_mc.tw = new Tween
		(bg_mc, "width", tf, bg_mc.width, cw+7, 1, true);
	bg_mc.th = new Tween
		(bg_mc, "height", tf, bg_mc.height, ch+7, 1, true);
	bg_mc.tw.addEventListener(TweenEvent.MOTION_FINISH,
		function(e:TweenEvent){
			ldr.x = -ldr.width/2;
			ldr.y = -ldr.height/2;
			ldr.visible = true;
		}
	);
}

時間不夠要下班了
新來的設計江連さん不喜歡有動態@@
目前也只是堪用而已(所以整個素….)
下禮拜再來細修吧!!