RichMedia+ » JavaScript http://blog.richmediaplus.com About the Adobe's RIA related solution and technology, like Adobe Air, Adobe Flex, Mobile Dev. You also can find the SEO for Flex, RIA, User Ex in this blog. Fri, 16 Dec 2011 09:33:27 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Hack Swiffy Runtime http://blog.richmediaplus.com/2011/11/hack-swiffy-runtime/ http://blog.richmediaplus.com/2011/11/hack-swiffy-runtime/#comments Thu, 24 Nov 2011 03:20:34 +0000 Ticore Shih http://blog.richmediaplus.com/?p=898
  • 從 Flash 跨網域警告發現瀏覽器安全性漏洞
  • 測試 Google Swiffy 轉換工具
  • jQuery 1.6 data Bug
    • ]]>     由於 Google Swiffy 還不斷在修改，也沒有正式文件
    很多 API 功能需要自行測試才會知道是否能用
    雖然有支援基本 trace 功能，但是訊息都會變成一般字串輸出到 debug console
    沒辦法像 JS or HTMLElement 物件那樣可以直接在 console 展開觀察屬性

    另外，目前也不支援 ExternalInterface, fscommand
    也不能讀取外部資料
    可是明明都已經被轉成 JS
    卻不能與 Swiffy runtime 外面 js 溝通取得 window, document，感覺這樣很笨

    不過呢！測試著 function 時，突然發現以下的 AS 寫法
    在轉換為 Swiffy 後，居然能取得 JS Window 物件！

    function getDomWindow():Object{
 return (function(){ return this; }).apply(null);
}

    有了 JS Window 一切就好辦了
    可以直接呼叫 console.log 看看 runtime 裡的 _root 是什麼東西

    getDomWindow().console.log(this);

    Swiffy runtime 的 _root 物件，所有屬性一覽無遺！
    接下來，想要在 Swiffy runtime 內與外部 JS 溝通，甚至讀取外部資料
    通通有解了吧！

    以下示範從外部 JS 控制 Swiffy runtime 播放與停止功能
    先在 Flash 動畫內影格 1 加上以下 AS：

    function getDomWindow():Object{
 return (function(){ return this; }).apply(null);
}

var window;

if (!window) {
 window = getDomWindow();
 window.runtimeStage = this;
}

    輸出 Swiffy HTML 之後
    打開 HTML 文件多加上兩個按鈕就可以了

    ...
<input type="button" value="stop" onClick="runtimeStage.stop();" />
<input type="button" value="play" onClick="runtimeStage.play();" />

    Related posts:

    1. 從 Flash 跨網域警告發現瀏覽器安全性漏洞
    2. 測試 Google Swiffy 轉換工具
    3. jQuery 1.6 data Bug

    ]]>     http://blog.richmediaplus.com/2011/11/hack-swiffy-runtime/feed/ 0     測試 Google Swiffy 轉換工具 http://blog.richmediaplus.com/2011/11/google-swiffy-swf-to-html5/ http://blog.richmediaplus.com/2011/11/google-swiffy-swf-to-html5/#comments Tue, 22 Nov 2011 15:46:48 +0000 Ticore Shih http://blog.richmediaplus.com/?p=893
  • Hack Swiffy Runtime
  • jQuery 1.6 data Bug
  • 從 Flash 跨網域警告發現瀏覽器安全性漏洞
    • ]]>     最近 Google 推出了 Swiffy Extension 可以將 Flash SWF 檔案轉換為 HTML5/JS 版本
    只要是 Flash CS4 以上都可以安裝
    目前最新版本為 Swiffy 3.6.1
    轉換功能目前已經支援大部分 ActionScript 1.0, 2.0 語法
    一般按鈕事件、Clip 事件都已經支援了
    影格聲音只支援 Event Sound 只能跑一次，無法 Loop
    文字欄位只支援靜態文字，不能用程式改變內容，也不能輸入
    動畫部分沒仔細測試，不過看起來一般 Flash 5 動畫都能正常轉換了

    實際拿十年前做的一些小東西來轉轉看

    滑鼠拖尾效果 HTML5 版 : Flash 版

    以高速左右移動模擬物件 blur fade out 效果
    HTML5 版 : Flash 版

    簡單的 CAI 依照動畫提示順序將 1-10 數字按一遍
    HTML5 版 : Flash 版

    我知道這些東西看起來有點弱，不過十年前剛開始學 Flash 5 與程式只能做這種東西
    太複雜困難的東西，目前也無法轉成 HTML5
    即便如此，Flash Tool + Swiffy 大概是目前最好用的 HTML5 動畫、互動開發工具了
    你可以想像這些東西用文字編輯器 + PS 要刻多久嗎? 一個小互動 AD Banner 才多少?

    需要注意的是 Swiffy 產生出來的 JSON 資料，經過 GZIP 壓縮後，檔案大小平均膨脹 13% 左右
    除此之外，還需要一個 Swify runtime.js
    以一個最簡單的例子做測試，僅在 frame 1 加上 AS: trace($version);
    產生的 HTML 如下：

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Swiffy output</title>
<script src="http://www.gstatic.com/swiffy/v3.6/runtime.js"></script>
<script>
swiffyobject = {"tags":[{"type":9,"actions":
[{"value":"$version","type":305},{"type":28},{"type":38}]},{"type":2}],
"v":"3.6.1","backgroundColor":16777215,
"frameSize":{"ymin":0,"ymax":4000,"xmin":0,"xmax":6000},
"frameCount":1,"frameRate":24,"version":8};
</script>
</head>
<body style="overflow:hidden;margin:0;">
<script>var stage = new swiffy.Stage(document.body, swiffyobject);</script>
<script>stage.start();</script>
</body>
</html>

    trace 結果會直接輸出到瀏覽器的 debug console 上
    假如想要傳入額外的參數到 HTML5 版的 Flash
    可以在 stage.start(); 之前呼叫：

    stage.setFlashVars("clickTAG=http://www.google.com");

    轉換時假如遇到不支援的物件或是語法，Swiffy 會出現警告訊息
    以下列出 Swiffy 3.6.1 可能會出現的 Warning 做為參考

    Advanced text rendering using continuous stroke modulation is not supported.
    An unsupported ActionScript instruction was encountered.
    Blend modes are not supported.
    Different stroke cap styles for start and end are not supported.
    Filters are not supported by (Mobile) Safari.
    Input text is not supported
    Linear RGB color interpolation for gradients is not supported on certain platforms.
    Loading ActionScript variables from a URL is not supported.
    Loading a URL into a MovieClip is not supported.
    Miter limit will behave differently, as it will revert to bevel instead of cutting off the joint.
    Modifying the tab order is not supported.
    Streaming audio is not supported.
    The ActionScript class BitmapData is not supported.
    The ActionScript class BlurFilter is not supported.
    The ActionScript class Error is not supported.
    The ActionScript class LoadVars is not supported.
    The ActionScript class LocalConnection is not supported.
    The ActionScript class NetConnection is not supported.
    The ActionScript class Point is not supported.
    The ActionScript class Rectangle is not supported.
    The ActionScript class Sound is not supported.
    The ActionScript class TextFormat is not supported.
    The ActionScript class XML is not supported.
    The ActionScript class XMLSocket is not supported.
    The ActionScript function updateAfterEvent is not supported.
    The ActionScript method MovieClip.attachBitmap() is not supported.
    The ActionScript method MovieClip.beginFill() is not supported.
    The ActionScript method MovieClip.createEmptyMovieClip() is not supported.
    The ActionScript method MovieClip.createTextField() is not supported.
    The ActionScript method MovieClip.curveTo() is not supported.
    The ActionScript method MovieClip.endFill() is not supported.
    The ActionScript method MovieClip.getBytesLoaded() is not supported.
    The ActionScript method MovieClip.getBytesTotal() is not supported.
    The ActionScript method MovieClip.getDepth() is not supported.
    The ActionScript method MovieClip.getInstanceAtDepth() is not supported.
    The ActionScript method MovieClip.getNextHighestDepth() is not supported.
    The ActionScript method MovieClip.lineStyle() is not supported.
    The ActionScript method MovieClip.lineTo() is not supported.
    The ActionScript method MovieClip.loadMovie() is not supported.
    The ActionScript method MovieClip.moveTo() is not supported.
    The ActionScript method MovieClip.onRollOut() is not supported.
    The ActionScript method MovieClip.onRollOver() is not supported.
    The ActionScript method MovieClip.setMask() is not supported.
    The ActionScript method MovieClip.swapDepths() is not supported.
    The ActionScript method MovieClip.unloadMovie() is not supported.
    The ActionScript method Object.addProperty() is not supported.
    The ActionScript property arguments is not supported.
    The ActionScript property MovieClip.filters is not supported.
    The ActionScript property System.capabilities is not supported.
    The fscommand action is not supported.
    The global ActionScript property _accProps is not supported.
    The global ActionScript property _level1 is not supported.

    Related posts:

    1. Hack Swiffy Runtime
    2. jQuery 1.6 data Bug
    3. 從 Flash 跨網域警告發現瀏覽器安全性漏洞

    ]]>     http://blog.richmediaplus.com/2011/11/google-swiffy-swf-to-html5/feed/ 1     從 Flash 跨網域警告發現瀏覽器安全性漏洞 http://blog.richmediaplus.com/2011/06/js-cross-domain-inject-issue/ http://blog.richmediaplus.com/2011/06/js-cross-domain-inject-issue/#comments Fri, 17 Jun 2011 10:55:47 +0000 Ticore Shih http://blog.richmediaplus.com/?p=789
  • Hack Swiffy Runtime
  • jQuery 1.6 data Bug
  • 開源JavaScript Flash Player(HTML5/SVG)
    • ]]>     論壇上有人問到 Chrome 瀏覽器上跨域 iframe 會出現 Flash 安全性的警告
    而且在 Google Code 上也有人提出相同的問題
    http://code.google.com/p/swfobject/issues/detail?id=481
    http://code.google.com/p/chromium/issues/detail?id=76748

    反覆測試之後，將問題簡化如下：

    1. a.com 下的 HTML 網頁，包含一個 b.com 來的 iframe 網頁
    2. b.com iframe 網頁內使用 javascript touch 一下 window.top.location
    3. a.com 在 onload 完成後，動態建立一 Flash 物件
    4. Flash 物件內透過 ExternalInterface 呼叫任何 Javascript Function
    5. 得到以下錯誤訊息

    SecurityError: Error #2060: 執行程序安全性違規：ExternalInterface 呼叫者 http://a.com/flash.swf 無法存取 [object]。
    at flash.external::ExternalInterface$/_initJS()
    at flash.external::ExternalInterface$/call()
    at flash_fla::MainTimeline/doCallJs()

    已經簡化成這樣，很明顯問題是出在 javascript window.top.location 物件上
    想要避免該問題，只要在主頁上一載入立即搶先 touch window.top.location 就好了

    在測試過程中，還發現另一個更嚴重的問題
    跨域的 iframe 能夠透過原型鍊 prototype 插入任意 function 到 location 物件上
    讓 top window 頁面呼叫並傳遞任何物件
    不受跨網域安全性的限制

    以下是實際的測試程式：

    http://a.com/index01.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function onLoad() {
	console.log("'fun' in location: ", "fun" in window.location);
	console.log("'fun' in document: ", "fun" in document);
	if ("fun" in window.location)
		console.log(window.location.fun());
}
</script>
</head>
<body onLoad="onLoad();">
    <iframe width="100" height="100"
    	src="http://b.com/index02.html">
    </iframe>
</body>
</html>
    // http://b.com/index02.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
// Make sure touch top window location first in all frames, get the hook to inject function.
window.top.location;
//*/ Inject cross domain function via Object.prototype
Object.prototype.fun = function() {
	return("from iframe : " + window.location);
};
//*/
/*/ Inject cross domain function via location.__proto__
window.location.__proto__.fun = function() {
	return("from iframe : " + window.location);
};
//*/
</script>
</head>
<body></body>
</html>

    實際用 Chrome 瀏覽器測試得到以下的結果

    'fun' in location:  true
'fun' in document:  false
from iframe : http://b.com/index02.html

    跨網域 iframe 插入的 fun 真的能夠在主頁偵測到，並且呼叫之
    以上的 Bug 至少會發生在 Chrome 12.0.742.100 上

    Related posts:

    1. Hack Swiffy Runtime
    2. jQuery 1.6 data Bug
    3. 開源JavaScript Flash Player(HTML5/SVG)

    ]]>     http://blog.richmediaplus.com/2011/06/js-cross-domain-inject-issue/feed/ 0     正確避免浮點數計算偏差問題 http://blog.richmediaplus.com/2011/05/avoid-folat-point-precision-issue/ http://blog.richmediaplus.com/2011/05/avoid-folat-point-precision-issue/#comments Tue, 17 May 2011 02:52:21 +0000 Ticore Shih http://blog.richmediaplus.com/?p=752
  • 決定浮點數有效位數
  • Flex / Flash 性能优化技巧之 function
  • Hack Swiffy Runtime
    • ]]>     不管是用哪一種語言，只要關於浮點數運算一定會出現偏差
    譬如 AS3 or Javascript 執行 152.2938 * 100
    會輸出 15229.380000000001
    當然最精確的作法是改用大數 BigDecimal 類別

    假如一般不需要用到那麼精確，又要避開浮點數運算偏差的問題
    最常見的作法可能就是直接用浮點數乘 100，四捨五入之後再除以 100 了
    網路上很多現成的 function 可以用

    function roundFloat(value:Number, divider:Number):Number{
 return Math.round(value * divider) / divider;
}

    問題來了，那個除數大小到底該怎樣決定呢?
    你可能會覺得很簡單，需要精確到小數下兩位就用 100，精確到三位就用 1000

    可是這樣的用法正確嗎?

    雙精度浮點數有效位數是 15-16 位
    整數位數多，小數有效位數就減少，反之亦然
    倘若整數占了 13 位，算式精確到小數 3 位只是自己騙自己而已
    倘若整數占了 3 位，算式精確到小數 3 位則是浪費浮點數的有效位數

    很明顯固定抓小數 3 位的作法無法適用絕大部分情況
    假如需要計算整數位數少，小數位數多情況
    就增加 divider 參數，反之就要縮小 divider
    無法用同一個算式計算大小不同的數值
    這樣寫法實在有點笨

    而且上面 function 內容真的很少，為了這問題
    所有的地方都要 import 並呼叫這個 function
    好像有點過頭了
    倘若全部都改成 inline 的算式好像又顯得雜亂
    畢竟每個地方用到的 divider 大小可能不一樣

    以下分享一個更簡單的作法，且能更有效的利用浮點數所有的有效位數
    利用 Number.toPrecision 指定轉成固定精確度 15 的字串
    這樣一轉，有效位數外的浮點數計算偏差就被去除掉了
    然後再用 parseFloat 轉回浮點數

    實際測試範例：

    // 整數位數五位的情況，能夠進行到小數下 8 位的運算不受偏差影響
var no:Number = (152.2938 * 100) + 0.00000001;
trace(no);
// 15229.380000010002 &lt;- 浮點數計算偏差
trace(parseFloat(no.toPrecision(15)));
// 15229.38000001 <- 修正浮點數計算偏差
    // 整數位數 10 位的情況，能夠進行到小數下 3 位的運算不受偏差影響
var no:Number = 1234567890;
for (var i:int = 0 ; i < 9 ; ++i) {
 trace(no += 0.011);
 trace(no = parseFloat(no.toPrecision(15)));
}
/*/
1234567890.011
1234567890.011
1234567890.0219998  <- 浮點數計算偏差
1234567890.022      <- 修正浮點數計算偏差
1234567890.033
1234567890.033
1234567890.044
1234567890.044
1234567890.0549998  <- 浮點數計算偏差
1234567890.055      <- 修正浮點數計算偏差
1234567890.066
1234567890.066
1234567890.077
1234567890.077
1234567890.0879998  <- 浮點數計算偏差
1234567890.088      <- 修正浮點數計算偏差
1234567890.099
1234567890.099
//*/

    除了 Number.toPrecision 之外也可以使用 Number.toExponential
    trace(Number(no.toExponential(15)));
    AS3 不能用 toExponential，它似乎不會四捨五入
    trace((0.3213).toExponential(10)); // 3.2129999999e-1

    以上的方式簡單到根本沒有必要獨立寫成一個 function，也不需要設置不同參數
    一律 inline 使用就好了
    需要注意的是 Precision 的取捨，看運算的數值多大，需要決定不同的 Precision

    Related posts:

    1. 決定浮點數有效位數
    2. Flex / Flash 性能优化技巧之 function
    3. Hack Swiffy Runtime

    ]]>     http://blog.richmediaplus.com/2011/05/avoid-folat-point-precision-issue/feed/ 0     jQuery 1.6 data Bug http://blog.richmediaplus.com/2011/05/jquery-1-6-data-bug/ http://blog.richmediaplus.com/2011/05/jquery-1-6-data-bug/#comments Thu, 05 May 2011 05:36:57 +0000 Ticore Shih http://blog.richmediaplus.com/?p=750
  • 開源JavaScript Flash Player(HTML5/SVG)
  • 從 Flash 跨網域警告發現瀏覽器安全性漏洞
  • Chrome Javascript Experience in ChromeExperiments.Com
    • ]]>     最近 jQuery 更新到 1.6 版，雖然我沒有在用
    可是還是測試看看新功能
    結果發現新的 data 功能有 bug

    jQuery 1.6 data() bug demo code:

    <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery 1.6 data() Bug</title>
<script type="text/javascript" src="jquery-1.6.js"></script>
<script type="text/javascript">
$(function () {
 $("span").each(function(){
  console.log(JSON.stringify($(this).data()));
 });
});
</script>
</head>
<body>
<span data-x="data" />
<span data-x-x="data" />
<span data-x-x-x="data" />
<span data-x-xx-x="data" />
</body>
</html>

    用 Chrome 瀏覽器執行輸出結果

    {"x":"data"}
{"xX":"data"}
{}
{"xXxX":"data"}

    實在令人搞不懂，為什麼 data attribute 這樣寫 data-x-x-x 就不能 parse 了呢?
    其它三個類似的寫法卻又可以正常 work

    Related posts:

    1. 開源JavaScript Flash Player(HTML5/SVG)
    2. 從 Flash 跨網域警告發現瀏覽器安全性漏洞
    3. Chrome Javascript Experience in ChromeExperiments.Com

    ]]>     http://blog.richmediaplus.com/2011/05/jquery-1-6-data-bug/feed/ 0     開源JavaScript Flash Player(HTML5/SVG) http://blog.richmediaplus.com/2010/01/open-source-javascript-flashplayer-html5-svg/ http://blog.richmediaplus.com/2010/01/open-source-javascript-flashplayer-html5-svg/#comments Wed, 20 Jan 2010 15:22:46 +0000 Alvin / Aedis.Ju http://blog.richmediaplus.com/?p=471
  • Adobe Flash Player 10.1
  • 從 Flash 跨網域警告發現瀏覽器安全性漏洞
  • Thoughts on Flash in Chinese Link
    • ]]>

    開發者Tobias Schneider在JavaScript中編寫了一個Flash解釋程式，名叫Gordon的開來源程式允許在支援SVG/HTML5的流覽器——iPhone內置了SVG支援——上播放Flash。 儘管程式開發還只是處於初始階段，但顯示它很有希望。開發者已在網站了公佈了一些演示。目前支持的流覽器包括：Chrome 3.0.195.38（能正常運行Demo），Chrome 4.0.298.0 Linux（會在滑鼠移動時出現崩潰），基於Web-Kit的Epiphany，Firefox 3.6，Safari 4；Demo無法在Opera 10.10和10.50上工作，未測試IE流覽器（因為不支援SVG）。
    –來源于solidot.org


    Flash is coming to the iPhone, but it’s no thanks to Adobe or Apple. It’s thanks to Gordon.
    These are demos of Gordon – An open source Flash™ runtime written in pure JavaScript with SVG

    Related posts:

    1. Adobe Flash Player 10.1
    2. 從 Flash 跨網域警告發現瀏覽器安全性漏洞
    3. Thoughts on Flash in Chinese Link

    ]]>     http://blog.richmediaplus.com/2010/01/open-source-javascript-flashplayer-html5-svg/feed/ 0     Chrome Javascript Experience in ChromeExperiments.Com http://blog.richmediaplus.com/2009/03/chromeexperiments/ http://blog.richmediaplus.com/2009/03/chromeexperiments/#comments Thu, 19 Mar 2009 07:16:17 +0000 Alvin / Aedis.Ju http://blog.richmediaplus.com/?p=86 Chrome又有了新動作，我講的這次不是beta版本的更新，而是他們推出了ChromeExperiments.Com，展示了Chrome和V8 Javascript在游戲，應用程序，虛擬化的實力。如果你想看到里面精彩的例子，你最好必須裝有Chrome瀏覽器。因為有些case在IE和Firefox里面跑不出來…

    Btw：目前為止Chrome對Javascript的兼容性做的不是很好，上次寫一個方法浪費了我一個晚上！Fuck Chrome!

    No related posts.

    ]]>     http://blog.richmediaplus.com/2009/03/chromeexperiments/feed/ 0