在EC-CUBE中插入FLASH　by swfobject+JavaScript Tweener

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

為了實現在EC-CUBE的LIST中做出一塊會隨內容改變長度的FLASH的資訊欄
所以就變的看起來這麼複雜了
首先還是拜一下GOOGLE
擲出了這篇AS3 Resizing SWF + SWFObject + JavaScript Tweener
一看簡直完美^^
趕緊下載Javascript Motion Tweener or just files on JustSeaver
再加上之前的swfobject準備來試試

第二步把JS放到\data\Smarty\templates\mystyle\site_frame.tpl中
再來才是問題
我雖然照著例子做
不過一直沒辦法出現希望的效果
包刮如過按照範例的code插入swf
在ie重新整理會出現TypeError: Error #1009: 無法存取 Null 物件參考的屬性或方法。的錯誤
讓我曾經繞路想用Event.ADDED_TO_STAGE來解決
不過後來用標準的swfobject2.0的方法(如下)插入後就解決了在ie聽不到Event.RESIZE的問題
但是我也把stage.addEventListener(Event.RESIZE,resizeHandler);放到第二影格了
所以是哪一點解決哪個問題就….也不重要啦^^”
總之經過修正的結果:
在\html\user_data\packages\mystyle\list.tpl中id=”listtitle”的div下自己加一個DIV

    <div id="list_header">
    </div>
    <script type="text/javascript">	
		var flashvars = {
			  category_id: "<!--{$category_id}-->",  
			  subtitle: "<!--{$tpl_subtitle}-->"  
			};  
		var params = {  
			};  
		var attributes = {  
			};  
 
		swfobject.embedSWF("<!--{$TPL_DIR}-->img/flash/list_header.swf", "list_header", "560", "145", "9.0.0","expressInstall.swf", flashvars, params, attributes);  
	</script>
    <script type="text/javascript">
	// <![CDATA[
		function setflash(start,end) { 
			t1 = new Sequence();
			t1.addChild(new Tween(document.getElementById('list_header').style, 'height', Tween.strongEaseOut, start, end, 0.5, 'px'));
			t1.start();
		} 
	// ]]>
</script>

FLASH中:

import flash.display.*;
import flash.events.*;
var nowswfH:int = 145;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP;
stage.addEventListener(Event.RESIZE, resizeHandler);
function doResize(toHeight:int):void {
	navigateToURL(new URLRequest("javascript:setflash("+ nowswfH + "," + toHeight+");"),"_self");
	nowswfH = toHeight;
}
 
function resizeHandler(event:Event):void {
	bg_mc.height = stage.stageHeight;
	btn_more.y = stage.stageHeight - 30;
}
doResize(500);

結果像是:防犯カメラ、監視カメラの販売「アパダイレクト」/商品一覧ページ