DramaC: 2011

2011年11月24日星期四

淺談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

2011年6月2日星期四

備份一下該死的動態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")

2011年3月30日星期三

690公里

690公里

Lyrics & Music By A.C.

你那邊有沒有另一個我
就像是你在這遇到的我
天氣冷的時候牽著的手
心情壞的時候那個出口

在同樣的路邊遇不到的妳
一樣的十字路轉不了的彎
不會響的電話快忘的數字
不曾變的街角咖啡仍不甜

剩下的六百九十公里是僅存的一點距離
像是有點遠卻又沒那麼多眷戀
藏著的六百九十句詞是剩下的一點空間
感覺有點倦但仍有一些的想念

還有些話沒說剩下的妳
還有些事沒做剩下的我
天空還有點灰那天我們
暢快說著彼此直到深夜

還有著六百九十公里不會是唯一的距離
總是那麼遠帶著遺憾與許多思念
埋著那無限遠的距離剩下補不足的空間
剩下的那些會在下次想念中出現

轉眼間那些沒拍的照片隱形的泛黃在雙手之間
那一天還沒完成的詩篇蝕刻在雙臂僅存的空間

剩下的六百九十公里是僅存的一點距離
像是有點遠卻又沒那麼多眷戀
藏著的六百九十句詞是剩下的一點空間
感覺有點倦但仍有一些的想念

還有著六百九十公里不會是唯一的距離
總是那麼遠帶著遺憾與許多思念
埋著那無限遠的距離剩下補不足的空間
剩下的那些會在下次想念中出現

有一個等待的時間是妳再次回來的瞬間
那時候挪出個空間把相聚當做一個誓言

2011年3月25日星期五

好久不見，再見

今天的啤酒，比較苦

走過人群熙攘的路橋，我仍看著新買的智慧型手機，
因為站在路邊，微傾的姿勢這樣站著，
很帥。

我掛念著的倒數時鐘，時針剩下4圈，
那包含著來不及與你吃的飯，
包含著來不及跟你說的我快到的生日

從來沒空著的酒杯，
配上店裡聽不進耳的音樂，
無謂的玩笑話一句帶過一句，
在意的時間一秒跨過一秒，
心理準備好與尚未準備好的話
仍舊一句都沒說過

今晚，很冷

如同往常的一陣慌亂
回到了家
拿起了習以為常的狗繩
踏上摩托車
同樣期待今晚會有的不同
同樣的坐在路邊
期待著每晚不曾響過的電話
新買的，很大支，鈴聲全世界最吵

終究是自己按下了撥號鈕
終究是自己跟你說出了祝你順風
終究是自己跟自己說我們還差一頓飯
終究是自己說出了希望要的生日快樂

你開始有了新的人生
我也知道你祝福著我有
但是我不會
我還會在原地踏轉

畢竟，即使年代不同，要成為火影的路途只有一條，那是最艱難的路

因為講電話刻意壓低的音嗓
因為刻意表現不在意的愚蠢
因未曾經因為閒聊想做的音樂
因為曾經承諾想寫的文章

目前為止，進度尚在踏圓

有太多送給自己的理由
有太多為了解釋所以沒去做的原因

困住自己的象牙塔，有過多的過去可以訴說自己的心情
嘴巴說的出來的，那就不再說了

有多麼想和妳見一面
看看你是否改變
不再去說從前
只是寒喧
和你坐著聊聊天
一段流行歌的歌詞，很貼近

雖然我們認識不那麼久
雖然我們比朋友都還平淡
雖然我總孩子氣的將喜歡你當作玩笑話

想著即將起飛的飛機
好久不見，再見。
陳奕迅好久不見

2011年3月21日星期一

開箱文：Nexus S

終於，我Po了我人生第一篇的開箱文，
我時常思考，甚麼時候輪到我Po開箱文，
終於時間到了!我要開箱文!我要當大大!
多年前聽了朋友告訴我的一句話
"一日陸戰隊，終生陸戰隊，
沒有開箱文，不死也殘廢"
為了避免腦殘之後，連唯一剩下健美的身體也殘了
15年~足足等了15年!!!(當年3歲，現在18，我好年經)
我買了NexuS，我正在長高，我考試都考一百分
忍辱負重，臥薪嘗膽，終於等到我人生的第一篇開香聞

有香了，快聞!!
多香~Android系統，要多香有多香
(以上用iPhone4與Nexus S比較的細節全略)
既然大家都比較過Iphone與Android的差別之後
我們就來談談Android所擁有的強大功能吧

1.同步
可直接與與Gmail通訊錄聯絡人同步
iPhone也可以!?不不不，請連上你的Gmail
找到你的聯絡人清單，按下新增頭像，去該聯絡人的FB把他的照片存下來
接著新增照片，新增完之後，打電話給你剛新增的朋友:"ㄟ~打給我看看!!!(掛)"
螢幕顯示他的照片了!!雀躍!!要多潮有多潮!!跟iPhone感覺就是不一樣
哪裡不一樣!?心情不一樣
我買了Android，我好開心!(其實iPhone也可以)

2.Google帳號同步
設定好手機預設帳號之後，Google的雲端服務將與你的手機同步
恭喜你，恭喜你成為行動商務人士
沒人會知道你在公車上只有在推金幣
也沒人會發現你花了15個小時在讚嘆Market擁有跟App Store一樣的功能
沒關係，夠大支，4.2吋，大到因為口袋深度要買最新的Levies(我買的是湖南的，怎樣!)
拿在手上跟人打招呼，帥到一個翻掉，避免別人不知道你有，還會把手機鈴聲調到最大

3.社群共享
隨時隨地的FB，Twitter，Plurk分享
不管到哪，都要鑽研著手機螢幕，
打卡、上傳照片、影片，總之永遠都要讓人知道你在幹麻
沒為什麼，就因為我夠潮、夠帥、夠年輕(18剛多幾個小時)
順便告訴那個你愛戀很久要去上海的女孩你唱了首歌給他聽
並且堅持用what's app傳簡訊給他，而不用傳統過時又不夠新潮的SMS
搞不好她因為你手上的smart phone取消了明天的班機
寫到這邊，不禁汗涔涔而淚潸潸
也許有人看到會覺得我這篇文章過度偏激
但沒有關係
我。有。開。香。聞
我。是。大。大

2011年2月25日星期五

MP3-巴哈

承襲著上一篇創作文章，開始緬懷起從前做著配樂的時間，
那時為了一個網拍服裝的配樂(那真是一個大家都喜歡無目的Flash開場的年代)
衍生了一個無腦的Concept叫做巴洛克時期，
即使只是當期的主題服裝有很多的蕾絲，還是要找個無腦的人做了點無腦的配樂，也就是我，
阿!!巴洛克時期，巴哈!!都是巴開頭，都是古代人!!對!!!!全中!!不可思議!
於是一段改編巴哈的編曲就這樣誕生了

身為一個愛好古典音樂的台客，當然要尊重原作，不免俗的貼一下原曲，並且向這位現代音樂之父獻上最高的敬意

MP3-papa

一個不小心發現19歲時送給爸爸的父親節禮物
是一張CD+DVD，親手錄製，價值23元新台幣，
時間過的飛快，那已經是去年的事情了，對，我今年20歲，我好年輕，
開始緬懷起創作的那段日子了(遠目)
趁機會開個類別叫做音樂創作好了(扭)

PAPA
Lyrics & Music By AC

20年前他還是個年輕的小夥子
他有個帥氣的外表以及健美的身材
他有個夢想，是擁有一個完美並甜蜜的家庭
這就是我們偉大的老爸

日子一天度過一天
他日以繼夜的辛勤工作以完成他的夢想
現在他有兩個小孩以及一個美麗的老婆
這就是我們偉大的老爸

現在他比以前老了一些，也胖了一些
但他仍是我們偉大的老爸
他比年輕時減少了一些帥氣
但他仍是我們偉大的老爸
即使我們都不常窩在您的身邊
我們仍然需要說
父親節快樂

2011年2月24日星期四

淺談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

看看這個完美的結構，要多潮有多潮，將這些另存為【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架構，成為潮到出水的潮男，接下來，我們可以開始做色色的事情了...待續範例檔下載

2011年2月23日星期三

淺談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接下來我們又可以做些色色的事情了...歐不是，是做些其他的事情了...............待續

範例檔下載