RichMedia+ » HTML5

Hack Swiffy Runtime

Ticore Shih — Thu, 24 Nov 2011 03:20:34 +0000

由於 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 文件多加上兩個按鈕就可以了

...

測試 Google Swiffy 轉換工具

Ticore Shih — Tue, 22 Nov 2011 15:46:48 +0000

最近 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 如下：





Swiffy output

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.

從 Flash 跨網域警告發現瀏覽器安全性漏洞

Ticore Shih — Fri, 17 Jun 2011 10:55:47 +0000

論壇上有人問到 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

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

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

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

// http://b.com/index02.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 上

正確避免浮點數計算偏差問題

Ticore Shih — Tue, 17 May 2011 02:52:21 +0000

不管是用哪一種語言，只要關於浮點數運算一定會出現偏差
譬如 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 <- 浮點數計算偏差
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

jQuery 1.6 data Bug

Ticore Shih — Thu, 05 May 2011 05:36:57 +0000

最近 jQuery 更新到 1.6 版，雖然我沒有在用
可是還是測試看看新功能
結果發現新的 data 功能有 bug

jQuery 1.6 data() bug demo code:





jQuery 1.6 data() Bug

<script type="text/javascript">
$(function () {
 $("span").each(function(){
  console.log(JSON.stringify($(this).data()));
 });
});
script>

用 Chrome 瀏覽器執行輸出結果

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

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

HTML5创意 – Rumpetroll

Alvin / Aedis.Ju — Thu, 04 Nov 2010 07:53:28 +0000

创意无限，HTML5新的玩意 Rumpetroll 。
让我们每个人都变成小蝌蚪，在茫茫宇宙的大海中寻找有缘人，并且还可以自定义名字和与陌生人说话交谈哦。

Rumpetroll由HTML5，WebSockets，JavaScript和CSS 3进行编写，github主推的开放项目。

No related posts.

Thoughts on Flash in Chinese Link

Alvin / Aedis.Ju — Fri, 30 Apr 2010 01:54:10 +0000

Apple CEO Steve Jobs 於網站上發表公開信 Thoughts on Flash，急著看中文的朋友可以直接看全文翻譯
Steve Jobs ” Thoughts on Flash “全文翻譯。

其實都是老話題了，總之，Adobe & Apple 都不是好東西！都在鼓吹自己開放，開放個P啊！

Adobe 還是乖乖得做出 HTML5 開發工具吧！

The HTML5 Test

Alvin / Aedis.Ju — Wed, 28 Apr 2010 03:27:21 +0000

Adobe FlashPlayer 有測試 Flashplayer version 的網站。

http://www.flashplayerversion.com/

HTML5 也有類似的測試，他測試的是您的瀏覽器支持HTML5的程度，包括了 H.264 codec support, MP3 codec support 等等。

http://html5test.com/

總分是160分。

IE8.0.6001.18702 19/160
Apple Safari 4.0.4 70/160
Mozilla Firefox 3.6.3 101/160
Google Chrome 4.1.249.1064 118/160

RGraph – Powerful HTML5 Graph Library

Alvin / Aedis.Ju — Thu, 08 Apr 2010 12:42:52 +0000

RGraph 是一款基于 HTML5 Canvas 的一個 graph library，擁有簡單的互動體驗。

Bar chart[examples] [documentation]
Bi-polar chart[examples] [documentation]
Donut chart[examples] [documentation]
Funnel chart[examples] [documentation]
Gantt chart[examples] [documentation]
Horizontal Bar chart[examples] [documentation]
LED grid[examples] [documentation]
Line chart[examples] [documentation]
Meter[examples] [documentation]
Odometer[examples] [documentation]
Pie chart[examples] [documentation]
Progress bar[examples] [documentation]
Pseudo radar chart[examples] [documentation]
Scatter chart[examples] [documentation]
Traditional radar chart[examples] [documentation]

RGraph 對個人使用免費。

HTML5的應用暫時肯定不會有大的發展，但讓我們開清了方向。

Alvin眼中的Adobe

Alvin / Aedis.Ju — Sun, 31 Jan 2010 16:03:13 +0000

Steve Jobs在Apple內部大會上抨擊Adobe太懶惰，有潛力去做有意義的事情卻沒有那樣去做，將來沒人會用flash，大家都改用HTML5了。

我個人很認同Steve Jobs關于Adobe太懶惰的觀點，至于Flash最終會被HTML5代替，這要看是什么領域啦，Chrome和Firefox已經開始支持HTML5了，已經走出了非常重要的一步，人們老是說HTML5還需要10年的努力，但比起Flash來，HTML5是趨勢，這是不爭的事實。

純屬個人想法，Adobe Fans不要噴我！

Thoughts on Flash in Chinese Link