Take the World's Best Courses, Online, For Free

Official Website
https://www.coursera.org/


I just taken HCI

Human-Computer Interaction

https://www.coursera.org/course/hci

 I will share it how to apply to desktop / mobile development later.

Useful diagram creator

非常實用的流程圖工具

https://cacoo.com/

Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.

好用之處:
免費線上製作 25 個 diagram
可與其他人同時修改
免費版可 export PNG, 已經足夠吧!

還提供 5 種不同 templates

有 iPhone layout, ER diagram, network flow , etc

Text to Speech Bug Fix in Chrome / IE / Safari

當 Flash 使用 google translate API - "http://translate.google.com/translate_tts" 時, 如果用 FireFox 以外的Browser 會有 Proxy 問題, 導致讀取 "http://translate.google.com/translate_tts"時, 變了 404 Error
在 Flash run in browser 時會拋出 Stream Error #2032

解決方法:
開一個 php File (translate.php), 寫以下 Code,

$url = $_POST["url"];

$content = file_get_contents($url);

echo $content;

AS3:

var url:String="http://translate.google.com/translate_tts?tl=en&" + "q=" +encodeURI(_input.text);

req = new URLRequest(url);           

var urlRequest:URLRequest = new URLRequest("translate.php");

var urlLoader:URLLoader = new URLLoader();

var urlVars:URLVariables = new URLVariables();

urlVars.url = url;

urlRequest.data = urlVars;

urlRequest.method = URLRequestMethod.POST;

         

snd = new Sound();

snd.addEventListener(Event.COMPLETE, onComplete);

snd.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

// 讀取 php 從Google取回來的Sound Data

snd.load(urlRequest);

参考:
http://blog.onebyonedesign.com/actionscript/googles-text-to-speech-engine-in-flash/

多人連線 Flash 遊戲伺服器: SmartFoxServer

SmartFoxServer是相當強大的多人伺服器，以Flash Socket為基礎，可實現多人應用程式及MMO Game，由於是Java base開發，在Windows、Linux及MacOS都可運行，而且client端支援AS1、AS2、AS3語法，專業版還能跨防火牆，功能相當強 大。

還提供完整的 Server side package 及 Client side API, 不需要重寫 server side code, 就可以輕鬆完成多玩家遊戲

BlueBox: 讓玩家避開網絡限制(防火牆, 代理) 來進行多玩家遊戲，而不犧牲連接速度. 因為API 會自動在”幕後“選擇最好的連接系統.    

RedBox:  免費開源的附加軟件，使在SmartFoxServer的框架中集成了音頻/視頻流的能力, 並簡化了A/V應用的開發難度. 

官方首頁：http://www.smartfoxserver.com/

Written Javascript like as flash action script

HTML5 javascript API for developing Web and Mobile Application such as iPhone web apps. The use of API is like flash programming (as3).

The API Code in MIT License, written by me~~~:
http://code.google.com/p/keylib-js-to-as3/

Examples are avaliable too.

Red5 0.9.0 Final Installation

1.) 首先到Red5官方網下載最新版本
http://code.google.com/p/red5/
這個版本已經有 Tomcat server, 所以不用另外下載

2.)之後可以 Follow 以下 Video Tutorial (Eclipse, Server side setup)
http://www.flashextensions.com/tutorials.php

3.)JDBC - MYSQL Setup
http://www.actionscript.org/resources/articles/617/1/Streaming-and-database-connection-with-red5-media-server/Page1.html

AMFPHP 初陣

先到這裡下載
http://sourceforge.net/projects/amfphp/

下載完還有東西需要修改:
1. globals.php (修改 database info)
2. gateway.php (如果想使用到中文, 就要更改 default charset

$gateway->setCharsetHandler("utf8_decode", "UTF-8", "UTF-8");

AMFPHP Debug page: (非常好用)
http://127.0.0.1/amfphp/browser/

Flash Media Server 3.5 VS Red5

最近正準備使用 Media Server 來做 Virtual Space Project
找了些最紅 Media Server, 其實都不外乎 FMS & Red5

順便比較看看那一個適合
  
 比較 1: (我看是太主觀的比較)
10 Quick Reasons Of Why To Choose Red5 Media Server Over Flash Media Server

比較 2: (正常資料分析, 不過不夠 update)
http://askmeflash.com/article/10/comparison-wowza-vs-fms-vs-red5

Red5 0.9 Final 已經可以進行 H.264 Video streaming


功能上, FMS 的確強大多了, support 也多,易學, 易上手, setup 簡單
最不好的就是貴

Red5 最大好處就是 Open-Source & Free !!! 免費才是王道
不過, 實在麻煩, setup 上, 要裝 J2EE 又要裝 Eclipse


如果用在工作上~~我毫不猶疑地選擇用 FMS
個人開發的話, Red5 吧~~~

所以最後我決定要同時擊破這兩個 Server !!!!!!!!!!!!

wonderfl 比賽結果

wonderfl Fork 合戰比賽結果:
http://nengafl.wonderfl.net/result.html

checkmate 作品:
http://checkmate.wonderfl.net/yugop.html
Check it out!

Blender AS3 Library

由 Papervision3D 的 core developer Tim Knip 寫成的 AS3Blender Library - 可以讓 Blender export 出來的 .blend file 直接給 Flash 使用
它 使用 Embed 的方法, 再call 一個 blend file parser 就可以 load 3D model to flash.

Details:
http://drawlogic.com/2010/01/27/asblender-library-to-use-blender-files-directly-in-flash/

Alternativa3D 教學

Wonderfl 自家出的 Alternativa3D 教學 (日文) , 有齊 source code
Alternativa3D 是 Flash 3D Engine 之一
Performance 不比 Away3D 差
有分 商用版及免費版

Wonderfl 教學:
http://marubayashi.net/tips/alternativa3d/

Alternativa3D:
http://alternativaplatform.com/en/alternativa3d/

AS3 QuickBox2D Library

QuickBox2D 是 簡化版的 Box2D
它將 Box2D 的 Code 整合~再提供一個簡單的 API
使用起來上都十分方便~ 如下:

            var sim:QuickBox2D = new QuickBox2D(this); 

            sim.setDefault({fillColor:0x00CC22, lineAlpha:0.5, radius:1.5});

            sim.createStageWalls();

 

            sim.addBox({x:5, y:5, width:1, height:1});

            sim.addCircle( { x:4, y:8, radius:2 } );

            sim.start();

            sim.mouseDrag();

下載:
http://actionsnippet.com/?page_id=1391
下載 QuickBox2D 之前, 也要下載 Box2D
http://sourceforge.net/projects/box2dflash/files/

Away3DLite: 3D Coordinates to 2D Coordinates

這個在寫 3D Application 時常用的技巧
要計算出 3D Object 在 screen 的 2D position. 

Away3DLite 的寫法:

public function calc2DCoords(screen_element:*):Point
{

    var posn:Vector3D = screen_element.viewMatrix3D.position;
    var screenX:Number = posn.x / posn.z;
    var screenY:Number = posn.y / posn.z;

    return new Point(screenX+screenW_offset,screenY+screeH_offset);
}

如果有 Away3D 就可以直接用 camera.screen function.

Papervision3D XML CoverFlow Source

 Cover 雖然已經不是新鮮, 不過都分享一下 Papervision3D 寫成的 Cover Flow 教學
加上用了 XML 讀取圖像,  十分方便易學

可以去以下連結下載 Source Code: 
http://papervision2.com/adding-xml-to-the-papervision-coverflow/

Gordon: An open source Flash™ runtime written in pure JavaScript

一個 純 Javascript 的 Flash runtime. 即是瀏覽器沒有 flash player plugin 也可以 play swf file.
它將 Flash 內容再變成 SVG, 這樣就可以不用 Flash Player 也可以看到 Flash

加了一句 Javascript 就可以直接使用, 如下:

onload="new Gordon.Movie('blue.swf', {id: 'stage', width: 500, height: 400})"

範例:
http://paulirish.com/work/gordon/demos/

Source:
http://github.com/tobeytailor/gordon/

的確是有趣的 Project , 不過...我測試看看~~ 實在很慢, 也不能完全支大多數瀏覽器, 至少 IE 不完整支援, 現在只可以做簡單的 Flash Animation 及 Button

轉自:
http://drawlogic.com/2010/01/13/gordon-an-open-source-flash%E2%84%A2-runtime-written-in-pure-javascript/

AS3 Event.Added 與 MovieClip goto Frame 之錯誤使用

最近打算自己整一個 ScrollPane
用了 Event.ADDED & Event.REMOVED 來計算最新的高度
在 ScrollPane中, 有 MovieClip 的物件
當我在 MovieClip 上使用 gotoAndStop(2), 發現了會 dispatch Added & Removed Event
一陣子研究之下, 發現原來 當 MovieClip change frame 時 timeline frame 入面的東西
也會不斷 add & remove

範例:


Source

Away3D Texture Mapping Learning

與 Papervision3D 完全不同的寫法, 不過一樣簡單

Away3D 如要使用 Texture Mapping 就要使用 TransformBitmapMaterial
e.g.

material = new TransformBitmapMaterial(Cast.bitmap(headBmp), { repeat:true, scaleX:.5, scaleY:.5 } );

"repeat" 屬性就相等於 "tile"
scaleX & scaleY 就相等於 mapping 的UV比例

可以看看以下範例:


Source

embed swf 網頁置中問題

相信大多數人都會使用 javascript 的 swfobject.js 去 embed swf
不過要做到上下左右置正中間, 發現有點難道
橫向置中沒有問題, 不過直向置中就搞不到

問題就是 embed swf 是來自 javascript 加入 div
所以要解決問題, 都要用 javascript

以下是個解決方法:

    if (window.addEventListener) {
        window.addEventListener("resize", windowResizeHandler, true);
        window.addEventListener("load", windowResizeHandler, true);
    }
    else if (window.attachEvent) {
        window.attachEvent("onresize", windowResizeHandler);
        window.attachEvent("onload", windowResizeHandler);
    }
   
    function windowResizeHandler(event) {
        var myWidth = document.body.clientWidth;
        var myHeight = document.body.clientHeight;
   
        if (myWidth > 970) {
           
            document.getElementById("container").style.left = Math.round((myWidth - 970) * .5) + "px";
        }
       
        if (myHeight > 625) {
            document.getElementById("container").style.top = Math.round((myHeight - 625) * .5) + "px";
        }
    }

Flash Player 10.1 on Google's Nexus One Phone

Flash Player 10.1 終於可以在手機面世
AS3不斷向手機市場出發,
開發易了~寫手機遊戲也變得輕鬆

Away3DLite Mario3D Model

最近用了Away3DLite做了個測試看看 Performance
結果都不錯~~ 非常易用及方便



Away3DLite Source Code
Source