淺談Flash與Html5

最近Flash宣布了將終止於行動裝置上開發Flash Player，
引起廣泛的討論，身為一個Flash愛好者，對這消息有許多感觸，
於是爬了一些Html5的技術文章，實做了Html5與Flash的比較，

Html5：3D引擎採用Three.js，javascript撰寫
Flash：3D引擎採用PV3D，actionscript3撰寫

運氣好的是，兩種Code寫起來其實很相似，對於一個開發者來說要入門其實不會太難上手，
效能的部分，canvus搭配WEB GL 表現的似乎比Flash好一些，

在這陣子Html5與Flash沸沸揚揚的競賽中，
看到了許多雙方支持者的口水戰，以及一些開發者的擔憂
但許多人似乎都還沒弄清楚Flash與Html5的差別(我也不例外)，
Html5是一個新的、完整的網頁規格，
其中包含更清楚的網頁架構、新的css樣式(css3)、新增繪圖引擎(canvus、web GL)
目前網路上demo的華麗效果幾乎是以canvus搭配web GL為主，但這只是Html5包含的一項新功能而已
而在Adobe宣佈了未來將調整的走向後，Flash也明確的與Html5做了區隔，
之後將朝向AIR應用程式與高效能的3D繪圖前進。

在Html5中，若需要開發全站的canvus動態網站，
勢必也同樣會遇到一開始全Flash站所遇到的問題(Ex:網址、串場等等)
另外在行動裝置上的效能，如果需要大量的運算
canvus與Flash一樣都是會遇到跑不動的狀況

Html5的出現，並不是為了取帶Flash華麗的效果而已，
每個專案的開發，都應該考量目前的專案適合的方式，
重點是拿出適合的工具來解決需求，無論是用Html5或Flash

行動裝置興盛後，有許多人樂見於Flash的死亡，
包含許多因為蘋果宣布不支援Flash後就討厭Flash的人
同樣的當然也有許多Flash愛好者提出反駁，
誇張的強調Flash比Html5好的地方在哪

我喜歡Flash，也喜歡Html5
明確的觀察雙方的優缺點並應用在適合的地方，
能夠讓使用者有更好的體驗，才是身為一個開發人應該走的方向，
Html5的出現，其實是讓開發人員多了一種新的選擇，
能夠將更好的想法應用在更多的層面上，
Html未來絕對是非常值得期待的












但是在這之前，我們需要一起聯手消滅萬惡的IE

備份一下該死的動態fb分享

flash裡面要動態分享到塗鴉牆
塗鴉牆要呈現動態的圖、標、文

寫一支另外的php(ex:fb.php)
flash直接分享fb.php這網址，再把變數都帶進去(title,description,圖片路徑,轉址連結)
動態生出fb要的meta(title,description)
在php裡面生一個 < a >，把GET變數的網址塞給a
再利用jquery onload之後click那個a
並連結(轉址)到a裡面的href

php的code

include_once( "../conf/conf.php" );
$description_r = $_REQUEST['description'];
$title_r = $_REQUEST['title'];
$path_r = $_REQUEST['path'];
$description = ""    ;
$title = "";
$o__photoPath="";
$btna = "gogogogo";
echo $description;
echo $title;
echo $o__photoPath;
echo $btna;
?>

flash的code

var _request:URLRequest = new URLRequest("http://www.facebook.com/sharer.php");
var _vib:URLVariables = new URLVariables();
_vib.u = 'fb.php?title=xxx&description=xxx&path=xxx&img=xxx';
_request.method = URLRequestMethod.GET;
_request.data = _vib;
navigateToURL(_request,"_blank")

淺談Flash傳值(三)

延續著上一篇淺談Flash傳值(二)獲得更大的迴響之後(FB2篇留言，2個讚，網誌0.4趴的鼓勵獎賞)，激起我更強烈的小宇宙(比起上次大約掉了3趴)，於是想到了今天要講的主題，如果你以為我要講的是拿到XML的應用，那就必須失望了，沒關係，人生總是如此，就像鼓起勇氣跟心愛的女孩表白，卻發現她下個月就要去上海的感覺一樣，寫到這裡，不禁潸然而淚下；

言歸正傳，其實本來是要開始寫拿到XML的應用，但看到XML，不拿出來講一下，感覺對不起按下讚的那兩個人，就像是我在路上看到老太太就一定會扶她過馬路(即便是在家樂福遇到，也要硬拖著他的拐杖拉去外面)，畢竟沒有扶她過馬路，我要怎麼把她推下海呢!?

在講XML之前，先稍微詳述一下之前提到的PHP，Flash因為安全性的問題，無法直接跟資料庫端溝通，必須透過第三方的php或是asp或是能讓你開心的任何語言，基本上，這些甚麼批甚麼批就像是NPC一樣，沒錯，就是像奧格瑪門口那兩個棒槌一般，對付棒槌，就只能用下等的方法，沒辦法，棒槌牽到東京還是棒槌，所以我們要丟給棒槌的值，會有變數名稱以及內容，就像我們第一篇提到的：變數名稱是city，內容是Taipei，如果這個棒槌聽不懂你丟過來的變數名稱，比如說你問奧格瑪門口的棒槌:"請問排骨飯哪裡有賣!?"，"毫無反應....就只是個棒槌"，當他聽到他能夠了解的問題，就會丟回來該有的答案，Flash與第三方溝通串接的方式通常有XML跟JSON，甚麼是JSON呢?(九把刀表示:"那又是另一個故事了")，既然不講為何要提呢?沒辦法，不提不專業，我的人生也是充滿許多無奈的；

終於真的講到XML了，XML我個人把它當作是一種潮撞架構，啪啪啪啪啪啪啪啪啪(想甚麼?這是一段折很多筷子的故事)，歐不是，是巢狀架構，甚麼是巢狀，簡單的說，他是個巢，例如下面這個簡單的XML

 
  
   菜菜人
   28
   
    
     菜菜人的大兒子
     1
    
    
     菜菜人的小兒子
     0.5
    
   
  
  
   蛋蛋人
   18
  
 

看看這個完美的結構，要多潮有多潮，將這些另存為【home.xml】利用上次寫的API寫一支as將xml載入到Flash裡

package {
 import flash.display.*
 import flash.events.*
 import flash.net.*;
 import flash.text.*
 import as3.ac.net.InternetTransfer
 public class netTrans extends Sprite {
  public var _net:InternetTransfer
  public function netTrans() {
   addEventListener(Event.ADDED_TO_STAGE, addToStageHandeler)
  }
  private function addToStageHandeler(_e:Event) {
   removeEventListener(Event.ADDED_TO_STAGE, addToStageHandeler)
   preset()
  }
  private function preset() {
   _net = new InternetTransfer()
   _net.load("home.xml")//延續上次開發API裡面的讀取函式將home.xml讀進Flash中
   _net.addEventListener(Event.COMPLETE, loadCompleteHandeler);//監聽收到回傳值時的Event
  }
  private function loadCompleteHandeler(_e:Event) {
   var __xml:XML=new XML((_e.target.data))
   trace(__xml)//trace看看
  }
 }
}

讀進來的xml就像是我家，我生了兩個小孩，大兒子叫菜菜人，小兒子叫蛋蛋人，其中大兒子菜菜人又生了兩個小孩，菜菜人的大兒子，菜菜人的小兒子，那麼我是誰!?對，我是阿西，所以被包在【<>】與【</>】，便是這個tag的下一代，相信經過我精闢的解釋之後，大家一定對XML更加模糊了，那我們就進入下一步，從Flash拆解XML拿資料，先改寫as裡面第23行

trace(__xml.children()[0].children()[0])

這時候會拿到

  菜菜人
  28
  
    
      菜菜人的大兒子
      1
    
    
      菜菜人的小兒子
      0.5
    
  

當啷~~~菜菜人的個資就這麼輕易的被你取得了
所以用children()[int]可以一層層的取得巢狀結構內的資料
這時候在改寫一下第23行

var __vegatableMan:Object = new Object()//宣告一個物件為菜菜人
   __vegatableMan.name = __xml.children()[0].children()[0].children()[0]//菜菜人的系名是xml中第三層的第0筆
   __vegatableMan.age = __xml.children()[0].children()[0].children()[1]//菜菜人的年紀是xml中第三層的第1筆
   __vegatableMan.totalChild = __xml.children()[0].children()[0].children()[2].children().length()//用length()函式可以取得xml長度，將他指定為菜菜人的子孫人數
   __vegatableMan.childArray = new Array()//給菜菜人一個陣列裝他的子孫
   var i:int
   for (i = 0; i < __vegatableMan.totalChild; i++ ) {
    var __child:Object = new Object()//宣告一個物件成為孩子
    __child.name = __xml.children()[0].children()[0].children()[2].children()[i].children()[0]//巢狀架構繼續往下挖
    __child.age = __xml.children()[0].children()[0].children()[2].children()[i].children()[1]//巢狀架構繼續往下挖
    __vegatableMan.childArray.push(__child)//將子孫丟進陣列裡
   }
   trace("Name : " + __vegatableMan.name)
   trace("Age : " + __vegatableMan.age)
   trace("TotalChild : " + __vegatableMan.totalChild)
   for (i = 0; i < __vegatableMan.totalChild; i++ ) {
    trace("Child" + (i + 1) + "-Name : " + __vegatableMan.childArray[i].name)
    trace("Child" + (i + 1) + "-Age : " + __vegatableMan.childArray[i].age)
   }

得到完美的解答

Name : 菜菜人
Age : 28
TotalChild : 2
Child1-Name : 菜菜人的大兒子
Child1-Age : 1
Child2-Name : 菜菜人的小兒子
Child2-Age : 0.5

可以拆解完整的XML架構，成為潮到出水的潮男，接下來，我們可以開始做色色的事情了...待續 範例檔下載

淺談Flash傳值(二)

延續著上一篇 淺談Flash傳值(一) 分享到FB後的廣大迴響(2篇留言，2個讚)，激起我強大的鬥志(大約4趴)，決定接著繼續寫下去，對於記憶體只有2byte的我來說，延續上篇是困難的事情，於是找到了上次的範例檔研究了一下，想好了接下來要講的東西，沒錯，就是物件導向(上次明明說待續不是這個)
隨著年紀逐漸的增長，打開幾百行Code的as繼續完成變成一件比吃掉自己的頭還要困難的事情，所以身為一個專業的programer，一定要讓主要這支as精簡精簡再精簡(比如說叫同事幫你寫)，所以我們邁向了物件導向的偉大旅程
甚麼是物件導向呢?簡單的我們可以找出四個定義:繼承(Inheritance) 、多載(Overloading)與重寫(Overriding) 、封裝(Encapsulation) 、資料抽象化/抽象資料型別(Data abstraction / Abstract Data Type) 看到這四個中英文交雜(我都還不太確定她是英文)的專有名詞之後，想必你也跟我一樣開始不想看下去了，所以我們把自己定下一個簡單註解，物件導向：半年後我打開上次寫的程式碼，我還想瞭解他啊!!!!!!!對，就是這股熱忱，我們可以開始做正事了

打開上次的範例檔可以發現，主要要做的事情就是，把東西丟給NPC，等NPC回來跟我靠北，接下來的30年寫Code生涯，我應該都會做重複的事情，那我就應該將這隻as做的動作寫成一支API
所以我們抓出這支as在做的事情，並自行定義一個類別，寫成另一支as

package as3.ac.net{
 import flash.display.*
 import flash.events.*
 import flash.net.*;
 public class InternetTransfer {
  public var url:String;//宣告這支as的公開變數url
  public var myRequest:URLRequest ;//宣告這支as的公開URLRequest
  public var variables:URLVariables;//宣告這支as的公開URLVariables
  private var loader:URLLoader//宣告這支as的私有URLLoader
  public function InternetTransfer() {
   myRequest= new URLRequest()//當新增一個自己定義的InternetTransfer即產生URLRequest
   loader = new URLLoader();//當新增一個自己定義的InternetTransfer即產生URLLoader
  }
  
  public function send($Target:String,$Variables:Object,$method:String="GET"){//定義一個公開函式send提供傳送變數出去
   url = $Target
   myRequest.url=url
   transVariables($Variables)//為了懶惰，要傳送的變數直接給Object，再透過function transVariables把她轉成給myRequest的URLVariables，就在第35行
   myRequest.data = variables
   myRequest.method=$method//傳送類型直接吃給這支as的method
   loader.load(myRequest);
  }
  public function load($Target:String,$method:String="GET"){//定義一個公開函式load提供單純的接受回傳參數
   url = $Target
   myRequest.url=url
   myRequest.method=$method
   loader.load(myRequest);
  }
  public function addEventListener($event:*,$function:Function) {//重寫一個監聽函式
   loader.addEventListener($event, $function);
  }
  public function removeEventListener($event:*,$function:Function) {//重寫一個移除監聽函式
   loader.removeEventListener($event, $function);
  }
  private function transVariables($target:Object) {
   variables=new URLVariables()
   for (var i in $target) {
    variables[i]=$target[i]
   }
  }
 }
}

這時候再改寫一下上次寫的as

package {
 import flash.display.*
 import flash.events.*
 import flash.net.*;
 import flash.text.*
 import flash.system.System
 import as3.ac.net.InternetTransfer//將剛剛寫好的API叫近來
 public class netTrans extends Sprite {
  public var _net:InternetTransfer//宣告一個新的自訂類別InternetTransfer
  public function netTrans() {
   addEventListener(Event.ADDED_TO_STAGE, addToStageHandeler)
  }
  private function addToStageHandeler(_e:Event) {
   removeEventListener(Event.ADDED_TO_STAGE, addToStageHandeler)
   preset()
  }
  private function preset() {
   System.useCodePage=true//因Google回傳的中文編碼關係，所以須設定
   _net = new InternetTransfer()//產生InternetTransfer實體
   _net.send("http://www.google.com.tw/ig/api",{weather:"Taipei"})
   _net.addEventListener(Event.COMPLETE, loadCompleteHandeler);//監聽收到回傳值時的Event
  }
  private function loadCompleteHandeler(_e:Event) {
   var __xml:XML=new XML((_e.target.data))//Google回傳的值為XML
   trace(__xml)//trace看看
  }
 }
}

當啷~~~~跟上一次一摸摸一樣樣的結果，但是我們不用再去記以後丟值給其他NPC要寫那些Code了，省下來的腦部空間又可以多記住一些星爺的經典台詞了，想起來我就覺得開心，有了拿到的XML接下來我們又可以做些色色的事情了...歐不是，是做些其他的事情了...............待續

範例檔下載

淺談Flash傳值(一)

終於我也會玩部落格了
不免俗地也來寫一下技術文章
魷魚一開始不知道寫甚麼類型的
那我們就問問章魚吧
章魚:"那來試一下網路傳輸好了"
為了方便起見，我們向雲端找尋一些可以互丟資料的地方來試試看
身為自封Google2011年推廣小惡魔的小弟來說
去Google尋找再適合不過了
用了不需要太長的時間
來到了http://www.google.com.tw/ig/api?weather=Drammen這地方
以及"http://www.google.com.tw/ig/api?hl=zh-cn&weather=,,,"+point.y*1000000+","+point.x*1000000
經過不知道為什麼的頓悟
想起來可以透過丟城市名稱或是經緯度給上面這兩位NPC，取得當地的天氣資料
這時候就可以來點簡單的測試了

package {
 import flash.display.*
 import flash.events.*
 import flash.net.*;
 import flash.text.*
 import flash.system.System
 public class netTrans extends Sprite {
  public var url:String;
  public var myRequest:URLRequest ;
  public var variables:URLVariables;
  private var loader:URLLoader
  public function netTrans() {
   addEventListener(Event.ADDED_TO_STAGE, addToStageHandeler)
  }
  private function addToStageHandeler(_e:Event) {
   removeEventListener(Event.ADDED_TO_STAGE, addToStageHandeler)
   preset()
  }
  private function preset() {
   System.useCodePage=true//因Google回傳的中文編碼關係，所以須設定
   url = "http://www.google.com.tw/ig/api"//需要傳值串接的網址
   myRequest = new URLRequest(url)//新增url Request
   variables = new URLVariables()//新增需傳送的變數
   variables.weather="Taipei"//指定變數名稱及值
   myRequest.data = variables//將變數指定給URLRequest
   myRequest.method = "GET"//設定傳送類型為GET
   loader = new URLLoader();
   loader.addEventListener(Event.COMPLETE, loadCompleteHandeler);//監聽收到回傳值時的Event
   loader.load(myRequest);//傳送
  }
  private function loadCompleteHandeler(_e:Event) {
   var __xml:XML=new XML((_e.target.data))//Google回傳的值為XML
   trace(__xml)//trace看看
  }
 }
}

有了這個XML我們就可以開始做許多想要的事情了.......待續
範例檔下載