享受視覺,

享受音樂,

泡杯咖啡,

再來細細品嘗每一篇文章不是很棒的一件事嗎 ?

請移到新部落格喔~ zzz

2009年12月19日 星期六

[閒聊] 又熱又平又擠的時代所面臨的挑戰


湯瑪士(Thomas L. Friedman)提到,全世界趨勢正朝著又熱、又平、又擠的方向走。所謂的

[又熱]

溫室效應,又稱「花房效應」。除二氧化碳外,目前還發現人類活動排放的甲烷、氧化亞氮、氫氟碳化物、全氟化碳、六氟化硫都是溫室氣體。但對氣候變化影響最大的還是二氧化碳,且二氧化碳的生命很頑強,一旦排放到大氣中,少則 50 年,最長的可達 200 年不會消失。專家們警告:氣候變化「可能會帶來對空氣、海洋、冰山、土地、海岸線、物種等突發且無法扭轉的傷害」;「不在 2012 年之前採取行動,就會太晚,關鍵就在這幾年」。對個人來說,為緩解溫室效應,需要儘量節約用電,多使用大眾運輸且少開汽車,此外還可以通過植樹造林、減少使用一次性方便木筷和節約紙張等行動來保護綠色植物,使它們多吸收二氧化碳等溫室氣體。少吃肉,根據研究顯示,全世界近 20% 二氧化碳排放來自於牛屁,少吃點肉就不用生產那麼多牛肉。

[又平]

隨著網路科技發達,世界變成平的,透過網路傳遞,讓個人可迅速將數位內容的資訊傳遞到全球,同時,軟體和傳輸的便利性,也使得工作可以移動得更快更遠,也造就了無國界的經濟體,形成通行無阻的全球市場。此外,中國大陸、巴西、印度、俄國等新興國家的崛起,更造就了對能源、資源的大量需求,進一步快速消耗這些資源。

[又擠]

根據聯合國人口司(Population Division)在 2007 年的報告指出,至 2050 年,人口將由現在的 67 億人,暴增至 92 億人。人口的爆炸性成長,特別市都是人口的成長,將造成耕地、森林消失、魚撈過渡、水資源、空氣及水污染等結果。

此三項因素並非各自獨立,而是交互影響,其相互結合的結果,將對能源供應、動植物的生存、能源使用的貧富差距、產油國的獨裁、氣候變遷情況,帶來深遠的影響。


台灣未來趨勢應將朝向能源節約技術、太陽光能、風能、生質能、電能儲存系統,以及熱電材料與系統整合等綠色新能源的開發及應用。此外,台灣人口問題到是沒有膨脹問題,目前人口正往高齡化與少子發展,至 2050 年人口有下滑趨勢,看來大家都不愛生小孩,而且今天在半路停駛的文湖線上還聽到有人談論台北地區上百家幼稚園關閉的消息 shock 我一下。總而言之,大家應該要養成能源節省的習慣~最近電視有廣告,用完電腦請關機減少二氧化碳排放,大家應該養成習慣,愛護地球就是愛護自己囉~

2009年12月12日 星期六

[閒聊] Mr.Mic 遊戲下載

這是一款關於麥克風互動遊戲
是站長在大前年製作的作品
關於遊戲介紹在之前 blog 有介紹
或者直接在遊戲進行中有解說
歡迎試玩~

74mb

下載

2009年11月18日 星期三

[作品] pv3d scene

3d scene test : left . right to control 3d sprite

2009年11月16日 星期一

[閒聊] 簡單的 Unity Script

以下是一段 Unity 程式片段用來計算 fps - 遊戲畫面執行速度,程式寫法非常像 as3,尤其變數宣告也是var someVar : dataType; 在程式中的 start 與 update 分別代表 code initialization & loop,簡單易懂,加上 Unity 2.6 為非商用時是免費軟體,對 3d 有興趣可以摸摸看 :D ~


var updateInterval = 1.0;
private var accum = 0.0; // FPS accumulated over the interval
private var frames = 0; // Frames drawn over the interval
private var timeleft : float; // Left time for current interval
private var fps = 15.0; // Current FPS
private var lastSample : double;
private var gotIntervals = 0;

function Start()
{
timeleft = updateInterval;
lastSample = Time.realtimeSinceStartup;
}

function GetFPS() : float { return fps; }
function HasFPS() : boolean { return gotIntervals > 2; }
function Update()
{
++frames;
var newSample = Time.realtimeSinceStartup;
var deltaTime = newSample - lastSample;
lastSample = newSample;

timeleft -= deltaTime;
accum += 1.0 / deltaTime;
// Interval ended - update GUI text and start new interval
if( timeleft <= 0.0 )
{
// display two fractional digits (f2 format)
fps = accum/frames;
guiText.text = fps.ToString("f2");
timeleft = updateInterval;
accum = 0.0;
frames = 0;
++gotIntervals;
}
}

2009年11月13日 星期五

[影視] 海派甜心




本圖純粹站長惡搞,最近新出一支偶像劇由羅志祥(達浪)與楊丞琳(寶茱)主演得海派甜心,內容十分惡搞爆笑,尤其羅志祥的醜不拉嘰香菇頭(或稱公然猥褻頭,如果各位有看過重金搖滾雙面人應該瞭解那是最神聖的髮型),實再是太酷了。以下是官方公佈劇情大綱:

薛海(羅志祥 飾演)化名林達浪,裝成窮小子,遠離兩個姊姊的保護,從台灣來到上海復旦大學唸書。達浪把自己藏在醜不拉嘰香菇頭底下,對所有未知且陌生的一切感到好奇,這是達浪第一次一個人離家,他生命中的許多第一次已經在等著他……

薛海在機場等待登機飛往上海時,一個甜美的聲音傳來,他沒看到聲音主人的長相,但留下深刻印象。他卻沒想到,這個擁有甜美聲音的女生,個性如此粗暴、罷道,而且人緣這麼差!聲音的主人是達浪的同學、長相和聲音一樣甜美,當選過甜心小姐,只有名字與個性不甜美的……

陳寶茱(楊丞琳飾演)!從此,達浪雖然害羞,但仍想盡辦法鼓起勇氣和寶茱接觸。寶茱見所有同學都討厭自己,只有達浪不怕死,倒也覺得達浪特別;而且達浪傻傻的、好像什麼事都不懂的樣子,也常搞得寶茱哭笑不得,更燃起寶茱的正義感,激起想保護達浪的欲望,於是常將達浪「帶」在身邊。即使所有人都叫達浪不要靠近寶茱,達浪仍然與寶茱密切互動,兩個正值青春年少的男女,逐漸互生好感……

但是,人生並不會事事如意,薛海和寶茱之間產生意想不到的變故,薛海失戀了!從此薛海再也不相信愛情,反而搖身一變成為囂張的海派王子!到處灑錢擺闊,原本老實善良的達浪完全消失無蹤…

三年後,寶茱在高中學長何言風(李威 飾演)的陪伴之下,逐漸走出失戀陰霾,並在言風的介紹之下,在電台主持「甜心時間」節目,成為當紅DJ!沒想到,薛海從廣播中聽見了寶茱的聲音,出手闊氣的他馬上把電台買下來,成為寶茱的頂頭上司,兩人因此再次相逢…但寶茱再遇到外表與林達浪長的如此相像的海派王子,卻成了另一個討厭的傢伙,到底要遠離他?還是該愛上他?


海派甜心官方部落格網站 http://sweetheart.blog.cts.com.tw/

海派甜心後援會網站 http://rainieandshow.5d6d.com/bbs.php

2009年11月12日 星期四

[閒聊] Google 推出自己的程式語言 「Go」

Google 厲害的地方是先用網路搜尋引擎打知名度,再推一些好用的網路雲端服務吸引使用者,現在連自家 OS 跟程式都慢慢要推出來了,那我想不久後連一些電腦周邊的硬體設備都有可能冒出 Google 品牌的字樣~這就是 Google 的野望嗎 @@。Google 所推出的產品其實都還不錯使用,我想 gmail 就不知道造福了多少使用者,回到正提,就再最近 Google 推出了自己的程式語言「Go」,以下是 Google 官方說詞 ~

Here at Google, we believe programming should be fast, productive, and most importantly, fun. That's why we're excited to open source an experimental new language called Go. Go combines the development speed of working in a dynamic language like Python with the performance and safety of a compiled language like C or C++. Typical builds feel instantaneous; even large binaries compile in just a few seconds. And the compiled code runs close to the speed of C. Go lets you move fast.

Go is a great language for systems programming with support for multi-processing, a fresh and lightweight take on object-oriented design, plus some cool features like true closures and reflection.

Want to write a server with thousands of communicating threads? Want to spend less time reading blogs while waiting for builds? Feel like whipping up a prototype of your latest idea? Go is the way to go! Check out thevideo for more information or visit golang.org.

http://golang.org/ Go 官網

[閒聊] 知識管理 Knowledge management

隨著科技發展,人們對於知識與資訊的需求越來越大,不管是每日流通的資訊新聞,還是由工作所累積的知識經驗,該如有效處理整合這些應用相關知識並重複利用是現今資訊時代必須探討的議題。一般對於知識管理方面,會建構一套知識管理系統(KMS,Knowledge management system)來進行知識管理。創造此系統的主要目標為可以有效的:1.擷取 2.保存 3.分享 4.創造 5.實踐知識。下圖為 KMS 架構:


一般而言 KMS 有自行開發與委外兩種,而在委外方面目前台灣較有代表性的有4 家:

1. 碩網資訊 (smartKMS)
2. 叡揚資訊 (vitals/KM)
3. 意藍科技 (e KM4.5)
4. 凌網科技 (GKP)

更多資訊就自行 google 囉!

2009年11月10日 星期二

[閒聊] 資訊視覺化 Data Viualization

何謂資訊視覺化?根據 Wiki 維基百科 定義,資訊視覺化是將資料 (data)以視覺化方式呈現。舉個例子,看看本 blog 的標籤雲部分,顏色越亮文字越大代表相關文章越多。簡單來說,利用文章數目的資料轉換成文字視覺上的變化,讓使用者可以輕易了解目前文章數量多寡,這就是資訊視覺化的表現。

其他例子有中央氣象局的雨量分布圖使用顏色手法為例,可以發現台灣東部有一點雨量,觀察詳細點,右半部色條由下往上是由淺藍變成紅色。為何這樣設計?一般而言紅色會給人警戒的感覺,因此在設計上越偏紅色代表雨量越大高,而藍灰色給人平靜緩和的感覺,代表雨量小;同樣的紅色會放上方,藍灰色放下方。所以中央氣象局的雨量分布透過不同顏色分部可以很快瞭解目前台灣降雨量現況,這是將雨量數值轉換色彩的表現。

當然資料視覺化呈現方式可以千奇百怪,亦可成為設計師發揮創意的利器。


[閒聊] 技術只是創意發揮的工具

某前輩提到,技術只是創意發揮的工具,也就是說不管今天學到甚麼新技術,在朋友或者同事詢問時,應該要大方不令嗇地分享,因為技術很快就會被淘汰換新,而創意才是真的價值所在。


我想技術只要花一些時間學習可以馬上到手,但是創意需要長時間腦力激盪與事物觀察,才能在短時間內迸出創作靈感的火花。


小弟覺得這句話非常精典,所以這邊分享給大家囉!

2009年11月7日 星期六

[閒聊] LEGO MINDSTORMS NXT 2.0


如果覺得 arduino 門檻太高,可以玩玩樂高出品的 LEGO MINDSTORMS NXT 2.0 (2009.8月上市),比較簡單上手,但是價格不菲,一台要美金 280 約台幣 10000, 市面上也有教學書級(我記的是台大土木系有再玩也有出書)。這套機器人有附軟硬體,編寫簡單程式就可以讓機械人動起來。[補充一下] - 不一定要機器人型狀,經過排列組合也可以組合成任意想要的形狀。

[閒聊] Arduino


arduino 一片版子不便宜大約價格1300台幣 (義大利製) ,對於互動裝置設計有興趣的人可以買來玩玩,但是玩硬體就得花大錢就是了。

[閒聊] 光怪 Funky light



第四屆台北數位藝術節以「光怪Funky light」為主題,邀請來自德國、瑞典、西班牙以及日本的國際藝術家,展出五十個運用光影變幻的作品,比如保羅.巴布埃納的《擴增雕塑》(台北當代藝術館展示),利用投影光線將建築瞬間變成了活生生的物體;另外,也精選國內外的多部動畫舉辦特展,活動從6號開始到15號在台北數位藝術中心、台北當代藝術館、西門紅樓、華山創意園區、台北歌德學院等地展出。活動詳情可上網查詢 http://www.dac.tw/daf09/index.html

老實說部分展品應該篩選一下,因為有些互動展品感覺只是單純體驗互動樂趣,而意涵與深度略顯單薄,但是看看玩玩還是不錯的 :D

2009年11月4日 星期三

[閒聊] Flash Game Engine - flixel

flixel is a completely free collection of Actionscript 3 files that helps organize, automate, and optimize Flash games; an object-oriented framework that lets anyone create original and complex games with thousands of objects on screen in just a few hours.

2009年11月3日 星期二

[閒聊] Arduino 互動平台 - 讓設計師有更大發揮空間


不論身在什麼領域裡的人,相信你一定都聽過任天堂的遊戲機- Wii。這個靠偵測人體動作或重量來進行遊戲的玩意兒,真是迷死人了!

這個風靡全球的遊戲機,其實就是一種互動裝置。而互動裝置其實無所不在,像是房間中的冷氣溫控,就是利用感測器偵測環境溫度,以自動調節室溫;還有大樓玄關的物體感測,一有人靠近就能自動開燈照明…。這些裝置都為生活帶來便利,是非常優秀的科技商品。而如果互動能帶給人們驚奇,有時後也會以藝術品的角色出現在展覽館當中。

以往需要處理有關電子的設備時,就會想到找工程師,並逐一由多個小元件併湊出整個電路;這些問題使得創意人始終無法親手接觸電子的領域。大多數的工具都是為工程師設計的,並且需要廣泛的知識。所幸近年來,微處理器變得更加便宜和容易使用,也生產出更多實用的工具。

因此 Arduino 誕生了,Arduino 是一種開放授權的互動開發平台,包含一塊擁有簡單輸入、輸出 (I/O) 的開放原始碼電路板, 以及實作 Processing 語言 (www.processing.org)。它讓初學者經過短短兩三天的學習後, 就能開始製造互動裝置;而設計師及藝術家們,也能透過 Arduino 很快習得電子和感測器的基本知識,花小錢就能製作設計作品的原型!



http://arduino.tw/ arduino 台灣

[閒聊] UI Gathering 臉書俱樂部


UI Gathering 有粉絲俱樂部囉 ~
想對介面設計有更深入了解就加入吧 ~

[閒聊] FlashGameEngine PushButton & Yogurt 3D

官網 http://pushbuttonengine.com/

The PushButton Engine is an Open Source, Flash game engine and framework that's designed for a new generation of games. PushButton Engine makes it easy to bring together great existing libraries and components for building Flash games. Spend less time on code, more time on building fun games.

PushButton 是一個開源 flash遊戲引擎與框架.
並綜合現有非常棒的遊戲相關函式庫.
可以花少點時間寫程式,而花更多時間去建構有趣的遊戲.

官網 http://www.yogurt3d.com/index_en.html

Yogurt3D Game Engine (Y3D) is a 3D Flash engine that works inside your browser via Adobe Flash Player and doesn't require users to download plug-ins. Yogurt3D's core part, SwiftGL, is based on an OpenGL compatible framework and will be free software. This means developers who already program in OpenGL or are familiar with APIs can easily develop 3D Flash games and applications. Y3D supports major 3D modeling and animation platforms and enables user-generated content such as avatars, interiors, objects and animations.

Yogurt3D 是一個以 Opengl 相容的程式框架建構出的遊戲引擎.


[ 更多 flash 遊戲相關有趣新聞可以 造訪AFGG ]


2009年11月2日 星期一

[閒聊] 全台首家互動餐廳 - Mojo


官網 http://www.mojo.tw/about.htm

全台首創! 西式創意料理結合高科技互動式點餐桌面。跨國界的融合式料理,搭配高科技、高於樂性、高設計感的互動桌面。加上時尚,現代,俏皮的空間設計藝術,同時提供高品質的用餐服務。2009年10月中旬剛開幕不久~大家可以先去嘗鮮。

2009年10月31日 星期六

[作品] 前年的手繪 CG 作品 - Bizarre Love Triangle


tessellation的概念進行構圖,可點擊放大

[閒聊] 互動世代-互動科技、互動建築、互動藝術

今日參與 UI Gathering 第 10 次舉辦的研討會,主題是人與空間的完美互動。

一開始由阿修(今天很驚奇的發現是我學長@@)開場提到現代建築設計應是符合時代與地點的獨特產物。

其次由第一位講者華碩電腦使用者經驗設計師唐聖凱從原始時代北京人建築講起,提到當時的人在建築上會考慮不同氣候環境或地形建立不同形式建築,也是最早人位需求而設計建築。而到了羅馬希臘神權時代,在建築視覺設計上重點是華麗且神性的表現,反而淡忘使用者需求設計的概念﹔而中國、馬雅與埃及建築設計上更是以權力為象徵設計,房子疊得越高、占地範圍越大來代表權勢,亦是沒有關心到使用者所需。直到現代數位與互動建築,大家開始回到user-center design 的議題,除了開始探討人類在生理、心裡、甚至精神需求上人與空間的關係外,也探討到風與建築的關係、氣溫與建築的關係,還有依照使用者需求自動化變形建築空間、module robot、smart material 等有趣議題。

下半場由木石研設計總監范赫鑠彈空間與超介面,從空間運算、電腦輔助設計(CAI)、互動立面、HCI 探討人與空間的互動關係,亦提到未來智慧化住宅的自動偵測、介面簡單化與彈性設計的概念。後半部提出一些專案實作案例介紹,十三行博物館、Nike6453、mojo互動餐廳等沉浸式互動空間設計,最後以『互動只式表演的空殼、形式、或技術,文化才是內容』作結語,言下之意即在作任何互動產品設計之前,須考量各國不同文化來進行產品設計。(xXtralab)

UI Gathering 研討會主題理論講解的非常扎實且有趣,約 2 個月舉辦一次,小弟強力推薦~讚!

個人心得:

小弟剛好也是剛踏入互動科技領域,瞭解互動的一點皮毛
互動是人與人或人與電腦間溝通的過程,
人與人互動可以稱 social interaction
人與電腦可以稱 human-computer interaction
透過各種互動關係

1) 互動科技> 任何與人互動之軟硬體,像是互動牆、互動桌 ( multitouch ) 等
2) 互動建築> 由互動科技延伸,強調人與空間互動關係
3) 互動藝術> 由互動科技延伸,在人與互動裝置藝術展品間的關係
4) 互動遊戲> 遊戲也是互動展示一種

相繼發展出來,未來或許有更多有趣的互動領域誕生,
隨便說說,像是互動教育、互動心理學、互動醫療等或更多有趣發展。

準備好迎接互動新世代了嗎~:D

2009年10月29日 星期四

[閒聊] 讓科技更貼近人性

現今許多科技產品講求符合人性,以使用者為中心(user-center design)進行設計。不管是虛擬實境、網站、PDA、Mobile、或是工業或商業設計產品,除了要達到使用者於軟硬體介面操作的有效性、安全性、功能性、易學性、易記性、迅速性外,人們也注意到在設計互動產品時,該產品是否令人感到:

★ 令人滿意的
★ 愉快的
★ 有趣的
★ 具娛樂性的
★ 有助益的
★ 啟發動機的
★ 美學愉悅感的
★ 激發創造力的
★ 有回報的
★ 讓人情感滿足的

把這些設計元素融入在設計中,或許可以讓使用者有更加快樂且有趣的經驗,亦可創造無限商機.

ex:

硬體設備:瓢蟲形狀的滑鼠
生活產品:巧克力鏡子、香蕉筆

2009年10月25日 星期日

[閒聊] 視覺設計 - 從本身做起

曾經看過一本書有提到,該如何成為一位視覺設計師。
很簡單,
就從本身做起。

有想過自身打扮的問題嗎?
從配色、樣式、風格、飾品搭配、身材修飾來看
如何讓視覺整體能看起來舒適、有質感、讓身邊人由衷地覺得好看。

相信從衣服穿搭上可以訓練視覺設計素養。
趕快動手吧~

2009年10月22日 星期四

[閒聊] Adobe Flash 遊戲設計論壇

Google 網上論壇

Adobe Flash 遊戲設計論壇

造訪此群組

歡迎遊戲設計愛好者捧場

2009年10月18日 星期日

[教學] AS3 中如何刪除樹狀結構所有資料

AS3 中的 DisplayObjectContainer 包含MovieClip,Shape,Sprite等,或是Array資料結構,或是XML資料格式都是母子樹狀結構關係.

以 DisplayObjectContainer 為例

function deleteAll(node: DisplayObjectContainer){
  while(node.numChildren)
  {
    deleteAll(node.getChildAt(0)); // 遞迴呼叫函式
    node.removeChildAt(0);
  }
}

deleteAll(rootNode); // rootNode為基層,利用遞迴可以歷遍所有元素

2009年10月15日 星期四

[閒聊] 知識開源時代如何脫引而出?

  World Wide Web 龐大資料庫帶來人們資料搜尋的便利性,從 Google、Yahoo 搜尋引擎敲入幾個關鍵字即可找到任何想要的資訊。許多知識包括教育、藝術、人文、經濟、心理學、商業、法律、計算機、醫療、工業、建築、農林、漁牧、家政、運輸通信、觀光、大眾傳播等都可以透過網路輕鬆獲取相關資源。網路資訊傳播的發達與進步讓知識傳遞無遠弗屆,不管是哪一個國家,都可以站在同一個起跑線上享用同樣的 WWW 資源寶庫。

  面對知識開源帶來的衝擊,該如何比他人能看的更遠、爬的更高,還是需要一些小撇步。看個短新聞。不到十年的時間,洋華光電不但成功擠進全球中小尺寸觸控面板產業鏈、躍升為1.2到12吋觸控面板的第一大廠。該公司資訊部協理李嘉斌表示關鍵在於高效率的IT團隊,以及善用外部資源。洋華光電資訊部協理李嘉斌說道:「事實上,反應快的團隊除能即時滿足、支援業務需求,還能事先預想各部門同仁可能會有哪方面的需求」、「技能可以透過在職訓練的方式培訓,但是樂於為人解決問題的態度,以及敏捷的反應能力則是培養不出來的。」、「挑選擁有極高技能但卻不善於溝通、或不具備熱忱態度的資訊人員,不若選擇那些反應靈敏的資訊從業員。」(蔡宜秀,2009。ZDNET)。上述幾句話點出一些『現代人才需求』的要點,moka對這些話的見解是:

  1. 善用外部資源
    閉門造車的年代已經過了,在這知識開源的時代90%以上問題都可以透過網路解決,擅用網路資源可以節省大量金錢與時間。
    
  2. 培養解決問題能力與敏捷反應能力:
    培養解決問題能力來自於平日知識累積,除了發問外,在無他人幫助下可以利用網路或圖書館找解答,很快的問題解決能力就會上升,而幫助他人解決問題情況下亦可額外培養知識與經驗。透過知識累積,相對的針對問題解決的敏捷反應能力就可以培養出來。

  3. 溝通才有辦法解決問題
    所有問題都好解決,就是人跟人之間的溝通最麻煩。溝通問題大部分來自「心理障礙」,個人覺得如果擁有高技能但是溝通能力不足的人,可以依靠多幫人解決問題讓自己獲得成就感,同時可以在問答之間慢慢修正口條,不但能培養解決問題能力,在溝通上也會漸進順暢。


2009年10月13日 星期二

[教學] AS3 用字串建立元件聯結庫物件

今天剛好有朋友問到一個問題,該如何用字串建立元件聯結庫物件,
var strObj:MovieClip = new Symbol1(); //一般建立方式

要是要從元件庫建立100個不同物件怎麼辦?

moka用以下方式解決
var arr:Array = [];
for(var i:int = 1;i<=100;i++){
var ClassRef:Class = getDefinitionByName(("Symbol"+i)) as Class;
arr.push(addChild(new ClassRef()));
}

arr[0].x+=100;

簡單又迅速~

2009年9月28日 星期一

[閒聊] 視覺設計師 V.S. 程式設計師

以下是 moka 的看法。

以網頁設計而言,

視覺設計師與程式設計師哪裡不同 ? 哪裡相同 ?



視覺設計師的工作

板形切割、使用者介面、配色、字級調整與字型選擇、對每一 pixel 的錙銖必較,

甚至是如何將視覺張力、情感表達、故事性、想法靈感、文化、生活融入在網頁設計中,

因此平日就必須多培養觀察能力,多腦力激盪,

一杯咖啡、一片葉子,還有身邊發生的林林總總或許就是靈感來源。



程式設計師的工作

程式撰寫、資料庫、效能最佳化、跨平台、培養邏輯思考、自我時間規劃、

探討軟體限制與極限、最佳產能、模組化、資訊架構規劃、學不完的 API 與軟體,

尤其面對新資訊新科技不斷的創新,要隨時吸收與掌握。



設計師的素養

不管是程式設計師或是視覺設計師,有些時候會面臨重新設計的問題,

自我意識較高的設計師會沒辦法接受他人意見,但是這樣並沒有辦法解決問題。

是否要放棄自己的想法,抑或是完全採納別人的意見,而到底要如何做抉擇呢?


首先得先了解何謂設計師。

設計師即發現與分析問題並找出解決辦法的人。

因此當接受他人批判時,

設計師應該先提出自己的觀點,包含為什麼、優勢在哪邊?

同樣的設計師也要引導批判者提出自己的觀點,

並了解批判者的想法,

像是如何讓對方完整表達清楚為何要修改、設計缺陷在哪邊,是否有更好的解決辦法。

在問與答之間,設計師需要依靠的是智慧與經驗來解決問題,而不是感情用事,

雙贏才是最終目標。


根據 test 網友所述,moka的想法是:

對有程式概念的視覺設計師來說,
在建構畫面時可以更有邏輯性與設計原則。
而對有視覺概念的程式設計師來說,
可以設計有創意且符合人機互動原則的程式設計。
尤其專案中可以很快搭起程式互動與視覺的橋梁,
並且迅速掌握整體設計概念。
兩個方向都接觸可以讓設計有更宏觀的看法且容易作專案整合。

2009年9月27日 星期日

[作品] 台北的夕陽



攝影自政大附中附近 (點圖放大)
Canon G9
f/3.2
1/40 sec
ISO-80
焦距13mm
photoshop curve 加亮

2009年9月22日 星期二

[閒聊] Adobe Director 12 快出吧 ~

目前 flash pv3d 的三維呈現是採用軟體模擬方式處理所以比較慢,
各位真的想做 3d 遊戲的話需要使用 directX 或 openGL , 因為這兩套 API 才是主流
Adobe 有出一套多媒體應用程式叫作 Director, 其可以說是 flash 開發的雛形
所以 Director 基本上跟 flash 的操作方式大同小異,
但是 Director 有 3d 的函式能支援 directX 與 openGL, 所以能做出專業的 3d 遊戲.
如果真的想要開發 3d 遊戲可以選擇 Director.

Director 也支援線上播放, 但需安裝 shockwave player
就像 flash 必須安裝 flash player 一樣的道理.
Director 可以說是 flash + AIR,
因此可以做動畫, 作遊戲, 作網頁, 也可以與作業系統互動. 甚至可以開發外掛 ( Xtra ).
雖然現在 flash 發展的比較好,
但是 Director 在 3d 的表現和各種檔案的整合能力還是比較強,
所以還是有它的的價值.

moka 是從 Director 先學再學 flash. 所以很清楚了解兩者特性.
有關 Director 的問題這邊也可以做個交流 : ) ~

Director 較新資訊
The Director Mile High Table O' Products 所有xtra
閑闪互动多媒体-Director director 相關新聞
shockwave 官方部落格
Director 產品資訊

[作品] CG - Android MK II



Android 機器人真可愛,幫它改裝成黑色板 : )
photoshop + 3dmax 製作

2009年9月20日 星期日

[教學] AS3 函式類別 package 表示方法

// 將 Classes 作 A, B 函式類別的 package

var Classes:Object = {

 A:function (){trace("A call")},

 B:function(){trace("B call")}

}


var myObject:Object = new Classes.A;

var myObject2:Object = new Classes.B;

2009年9月19日 星期六

[教學] AS3 命名空間類似介面用法

如果 public、private、protected 權限沒有辦法滿足你,另外可以自訂命名空間

下方有三個類別分別為:

myAccess.as - 定義空間名稱為 myAccess

DO1.as - DO1 的 draw 函式只給命名空間為 myAccess 所使用

DO2.as - DO2 的 draw 函式只給命名空間為 myAccess 所使用

//myAccess.as

package { public namespace myAccess;}

//DO1.as

package { public class DO1{ myAccess function draw():void{ trace("draw DO1"); } }}

//DO2.as

package { public class DO2{ myAccess function draw():void{ trace("draw DO2"); } }}


// 客戶端程式,這邊 DO1 與 DO2 之間並沒有繼承關係,
// 但是利用 myAccess 命名空間可以建立兩者關係
// 下方跟介面(接口)用法很類似,但是存取權限方式可以有更有彈性的設計


var do1:DO1 = new DO1();
var do2:DO2 = new DO2();

//do1.draw(); // error , can't directly access , user不能直接存取
//do2.draw(); // error , can't directly access , user不能直接存取

function drawProxy(Ob:Object):void{

 // use 指令為使用某空間
 // 本設計為在此函數內才能存取 ,或許將此函式封裝在其他類別內更好 : )

 use namespace myAccess;
 Ob.draw();
}

drawProxy(do1);
drawProxy(do2);

[教學] flash as3 enum 結構設計方法

public final class Color{
 public static const BLACK : String = "black";
 public static const WHITE: String = "white";
 public static const RED: String = "red";
 public static const BLUE: String = "blue";
 public static const GREEN: String = "green";
}

[教學] communication between C# and flash

不想用 AIR 的話也可以用 flash ExternalInterface 與 C# 溝通來做出更多樣化的程式。

flash 與 C# 雙方利用傳字串方式來呼叫相應函式。

Flash 端:

// 被 C# 呼叫的函式

ExternalInterface.addCallback("cstoas", function cstoas(s:String):String{

  test.text = s; //會傳'酷耶'字串進來

  return "cstoas return msg"; //回傳字串到C#

});


// 呼叫 C# 函式

functionExternalInterface.call("axShockwaveFlash1_FlashCall");

C# 端:

private void axShockwaveFlash1_Enter(object sender, EventArgs e) {

  axShockwaveFlash1.LoadMovie(0, Application.StartupPath + "//csharp.swf");

  // 呼叫 flash cstoas 函式,可丟字串參數與接收字串回傳參數
  Debug.WriteLine(
    axShockwaveFlash1.CallFunction(
    "<invoke name='cstoas' returntype='xml'>" +
    "<arguments><string>酷耶</string></arguments></invoke>"
    )
  );
}

private void axShockwaveFlash1_FlashCall(object sender, AxShockwaveFlashObjects._IShockwaveFlashEvents_FlashCallEvent e) {

  // 被 flash 呼叫的函式
  Debug.WriteLine("astocs");
}

[教學] 3 行作 AIR alert

flash、flex、air 要學哪一個 ?
FLASH - 強項在動畫與視覺設計部分,as3之後將 UI 部分交給 Flex 主導,可發布 AIR。
FLEX - 強項在 UI,以 MXML 格式撰寫 UI,可快速建立應用程式並與伺服器整合,可發布 AIR。
AIR - 將 FLASH 與 FLEX 做延伸,可建立桌上型網路應用程式,像是 fileio、native window、SQL Database、DRM、PDF、Air.Net ... 等控制都可以做到。
對程式設計出身者可以選擇 FLEX - 以撰寫類似 html 方式快速建立使用者介面(超多UI元件可以選擇)
對視覺設計出身者可以選擇 FLASH - 不管是動畫、特效或遊戲都可以輕鬆建立
兩者都可以發布 swf 應用程式
兩者都可以發布 AIR 應用程式

回歸正題要怎麼在 AIR 中使用 alert >>>







Flash AIR 沒有 Alert 可以用,那借用 html 裡 javascript 的 alert 如何?


var html:HTMLLoader = new HTMLLoader(); // AIR 的功能 HTML container


this.addChild(html); // HTML container 也是 DisplayObject


html.loadString("<script>alert('DesignPlusPlus')</script> ");// show javascript MessageBox

[教學] PHP GD 32bit ARGB Color

flash 有 setPixel32 函式提供透明像素著色處理 , 以下是 PHP GD 模擬方式

function setPixel32( $x, $y, $color, $im ){
 $a = $color >> 24;
 $r = $color >> 16 & 0xFF;
 $g = $color >> 8 & 0xFF;
 $b = $color & 0xFF;
 $a = $a >= 0 ? $a : 256 + $a; //$color 超過 0x80FFFFFF 作溢位修正

 $color = imagecolorallocatealpha ($im, $r, $g, $b, (255-$a)>>1 ); //alpha : 0~127
 imagesetpixel($im, $x, $y, $color);
}

$image = @imagecreatetruecolor(640, 480) or die("Cannot Initialize BitmapData");
setPixel32( 20, 20, 0x33FFCC00, $image ); //半透明橘色

2009年9月16日 星期三

[閒聊] 簡單 jogl 入門

想深入了解 3d , 用C++ 開發 DirectX 跟 Opengl 看似很難上手.pv3d 製作上又沒頭緒
先來看看 jogl 吧 , 還記得 java 跟 opengl 兩套都是跨平台的程式吧.
jogl 整合 java 與 opengl. 透過 java 也可以撰寫 opengl 程式.
這對 as3 developer 是件好消息.
因為 java 跟 as3 撰寫起來根本一樣簡單.
學習 3d 可以從這邊開始 ~
而且 eclipse 編譯器 code hint 太強了 ( 跟 flex builder(flash builder) 同一個編譯器 )
可以爽爽寫程式碼 ~ :)

下載 eclipse java 編譯器 ( Eclipse IDE for Java Developers (92 MB) )
下載 api 說明書與函式庫 ( jogl-1.1.1a-docs.zip & jogl-1.1.1a-windows-i586.zip )
Opengl 教學說明 ( 關於此教學是以 C 作範例教學,不過基本上範例用的函式名稱跟 jogl一樣 )

安裝說明
1. 安裝 eclipse
2. 解壓縮 jogl-1.1.1a-windows-i586.zip ( 我的平台是windows )
3. 將解壓縮的所有 dll 放在 X:\Program Files\Java\jre6\bin
4. 將解壓縮的所有 jar 連到 eclipse 的外部函式連結中

moka 範例

除了 java 可以和 opengl 結合
也可以選擇類似 as3 的 C# ( 念 c sharp ) + opengl
XNA(directX) 或 darkGDK(directX) 都可以玩玩

2009年9月15日 星期二

[作品] flash 大玩 java midi

作品欣賞
JS API 帶回家

畫面中有兩條 Slider
上面是128個音符
下面是128種樂器

由 flash 的 ExternalInterface 呼叫 javascript 函式
再由 javascript 函式中呼叫 java 的 midi 函式

大致上是這樣啦 ~ 請多多指教
記得播放時要裝 JVM

2009年8月28日 星期五

[教學] AS3 效能加速小技巧

as3 加速存取技巧整理 ~ 
ENTERFRAME > Timer
if > switch
while > for
n & (4 - 1); > n % 4;
a+=b; > a = a+b;
a++; > a = a+1;
a>>1; > a*=.5; > a/2; //milkmidi 修正 a >> 1 的1代表2的一次方
int(1.5); > Math.floor(1.5);
int(1.5)+1; > Math.ceil(1.5);
int(x + 0.5) > Math.round(x); //cjcat 補充
int(1.5); > uint(1.5);
-n; > n*-1;
if(n < 0)n = -n; > n = n < 0? -n : n; > n = Math.abs (n);
var a:Array = [] > var a:Array = new Array();
var arrCopy:Array = arrOg.concat() // 最快複製方式
class MyClass{public var a:int = 1; public var b:int = 2};

ob:Object = {a:1,b:2};
//24bit
var color:uint = 0x336699;
var r:uint = color >> 16;
var g:uint = color >> 8 & 0xFF;
var b:uint = color & 0xFF;
//32bit
var color:uint = 0xff336699;
var a:uint = color >> 24;
var r:uint = color >> 16 & 0xFF;
var g:uint = color >> 8 & 0xFF;
var b:uint = color & 0xFF;
var l:int = arr.length;
for(i:int = 0; i<l;i++)

for(i:int = 0; i<arr.length; i++)
var tmp:Number;
var staticValue = someClass.staticProperty;
for(...) tmp = staticValue;

for(...) tmp = someClass.staticProperty;
for(...) var a:Number = 1,b:Number = 2;

for(...) var a:Number = 1; var b:Number = 2;

2009年8月26日 星期三

[閒聊] Run! PC 技術精英分享會精品

來自一場 flex / air / fms 的技術分享會,有吃有喝又有拿,還不錯,感謝 RIS 版主 Bing 大的技術分享。( 左圖為附贈的adobe 磁鐵小精品, 好像只能用在白板上 = =" )。

2009年8月25日 星期二

[教學] 最快的 array 複製方式


flash AS3 好像沒有看到類似 array.clone() 的陣列複製函式。若是要複製函示該如何下手,想的到的方法就是利用 loop 像是 for 迴圈或者 while 迴圈來賦值。其實這方法不是最快的方法,大家可以利用 array.concat() 函式來複製陣列元素.

只要 concat 不帶參數 - var copyArray:Array = originalArray.concat(); 即可,

相較於迴圈賦值可以省下 2/3 的時間來複製陣列。好好利用吧 : )

[閒聊] StarLancer Game Engine for AS3

moka 專為遊戲設計簡易之 API 遊戲引擎 , 支援 2d/3d , 完成將釋出 ~
或者遊戲創作同好也可以一起開發專案,可以互相切磋學習。
本引擎主要以 bitmapData 作為繪圖基礎, 開發專為遊戲設計之API,
下方展示程式片段,統一Game為客戶端介面,簡化 API 學習曲線:

Game.start( this, 640, 480, 1 ); // 建立 640 x 480 場景
Game.onInit( function init():void { // 初始化函式
sp = Game.create2DSprite("frontlayer", new EmbeddedImage());
sp1 = Game.create2DSprite("backlayer",new EmbeddedImage2());
sp2 = Game.create3DSprite("sphere");
sp.x = 160;
sp.y = 120;
})
Game.onLoop( function loop():void { // 循環函式
sp.x++;
});
Game.onKeyDown( function keyDown():void { // 鍵盤按鍵函式
Game.print("you press " + Game.keyboardStack.length + " keys : " + Game.keyboardStack);
//you press 3 keys : 37,38,39
});
Game.onMouseDown( function mouseDown():void { // 滑鼠函式
Game.print("mouse is down");
});

2009年8月24日 星期一

[閒聊] 皮克斯動畫 20 年展示

今天去北美館看皮克斯展,展場內呈現的是皮克斯 20 年來的動畫製作過程與方法,其中包含手繪鉛筆稿、3d 模型、故事板、彩繪腳本、短片、數位影像展示等將近 600 件作品,從展場開始到結束的展示安排可以清楚了解皮克斯的動畫製作過程。他們製作一部動畫需要花 3 ~ 4 年的時間,有 3 / 4 的時間花在腳本製作,因為他們認為 story is king,所以大部分時間都在規畫動畫製作的細節與流程,好處是在最後動畫的實作上可以減少反覆錯誤修正的現象。其中最吸引我的是 Colorscripts 與 Zoetrope 還有最後的 Artscape,對我來說非常新鮮。Colorscripts 中文是彩繪腳本,有別於一般黑白線搞腳本而是以上色方式呈現。彩繪腳本是根據劇情的演變做出光影、色彩、氛圍的視覺作品,透過這些顏色與氣氛的表現可以解該場景呈現的氣氛是快樂的,還是令人恐懼的,這是黑白腳本所辦不到的。其他部分就賣關子讓大家自己去欣賞了,moka 覺得還蠻有學習價值的,大家有空可以撥出時間去看看,我想對於視覺創作與動畫製作都有很大的幫助。從這次藝術展示中發現商業取向的藝術作品好像一般人比較能接受,那下次就展大黃蜂吧XD~

2009年8月20日 星期四

[教學] function class definition 函式類別定義

var FuncObject:Object = (function Demo():Object {
// use prototype
var prototyper:Object = Demo.prototype;
// for output
prototyper.toString =
prototyper.valueOf =
function traceMe():String{
return "[object Demo]"
}
// public value
prototyper.publicValue = 10;
// private value
var privateValue:String = "I am Private!";
// private value getter
prototyper.privateGetter = new Object();
prototyper.privateGetter.toString =
prototyper.privateGetter.valueOf =
function getter():String {
return privateValue;
}
// private function
function privateFunction():String{
return "Guys~";
}
// public function
prototyper.publicFunction =
function hi():void{
trace("Hey~~"+privateFunction());
}
return prototyper;
})();

trace(FuncObject);
trace(FuncObject.privateGetter);
trace(FuncObject.publicValue);
trace(FuncObject.publicFunction());

/*-----output

[object Demo]
I am Private!
10
Hey~~Guys~
undefined <------這是我目前遇到奇怪的問題。
最後一個 public 函式多跑出這個東西??
希望大大能幫忙解決這問題~

*/

拍ㄙㄟ~ copy co 太爽了.
trace(FuncObject);
trace(FuncObject.privateGetter);
trace(FuncObject.publicValue);
FuncObject.publicFunction(); <--不用trace
感謝 AS 腸網友回覆 : )

[教學] 提供另一種獲得圖片寬高的方法

或許在一些特殊需求上可以用到,參考一下~

var w:uint = 0;
var h:uint = 0;
while (image.bitmapData.getPixel(++w, 0)) { }
while (image.bitmapData.getPixel(0, ++h)) { }
var showPicInfo:String = "width : " + w + " px , height : " + h + " px .";
trace(show);

2009年8月17日 星期一

[閒聊] moka synthesizer 構想

透過合成器可以模擬鋼琴、海浪聲、還有各式音色合成,目前尚在計畫階段,會一一逐步實現合成器功能,未來做大可以製作聲音編輯軟體,慢慢努力: ) [左圖為純構想]

2009年8月15日 星期六

[作品] PianoAS3 flash也能合成聲音喔~

moka 其實對聲音也有些了解,所以簡單製作了一個鋼琴demo,鍵盤與鋼琴琴鍵對應如下z=Do s=Do# x=Re d=Re# c=Mi v=Fa g=Fa# b=So h=So# n=La j=La# m=Ti ,=Do‧(高音),用+/-符號可以換音階。來玩玩 moka 線上 flash 鋼琴吧! 因為 flash 可以動態和成聲音,所以未來開發節奏遊戲像是beatmania、太鼓達人、DDR...等在影音配合上都會變得比較簡單。

2009年8月14日 星期五

[教學] DP - Simple Factory & Factory 完美整合

[教學] DP - Creational Pattern - Factory
[教學] DP - Creational Pattern - Simple Factory( 非 gof 提出 )


在這兩個範例教學中簡單描述 2 個設計模式的精要 ( 大家可以回頭看 moka 之前撰寫的兩篇文章 )。不過兩者各有好壞,以 simple factory 範例來說,ToyFactory 內使用 switch 作分支,降低程式延展性,不過優點是客戶端程式碼較簡單。而 factory 範例將去掉 switch 部分並將工廠抽象化,提高程式的延展性,但是客戶端要接觸的介面變多。是否有兩全齊美的方式來修正程式碼。其實程式設計裡有一個叫做反射 reflectaion 的專有名詞,透過反射可以以字串方式動態建立物件,大家可能沒有感受到它的威力,以下便做個示範:

simple factory partial code:

class ClientDemo{
 public static function main():void{
  var demoToy:IDance = ToyFactory. createTeletubb(DanceToy.TINKYWINKY);
  demoToy.dance();
 }
}

factory partial code:
class ClientDemo{
 public static function main():void{
  var usedFactory:IToyFactory = new TIinkyWinkyFactory(); //客戶端只想要會跳舞的丁丁,工廠介面只會造成客戶麻煩
  var demoToy:IDance = usedFactory. createTeletubb();
  demoToy.dance();
 }
}

Reflection Sample:

設計一個 IDance 介面擁有 dance() 方法
設計天線寶寶雛形類別class Teletubb 並實現介面 IDance
設計丁丁類別 class TinkyWinky 繼承 Teletubb 並覆寫dance(){ trace("丁丁之舞"); }
設計小波類別 class PoPo 繼承 Teletubb 並覆寫dance(){ trace("小波之舞"); }
設計拉拉類別 class LaaLaa 繼承 Teletubb 並覆寫dance(){ trace("拉拉之舞"); }
設計迪西類別 class Dipsy 繼承 Teletubb 並覆寫dance(){ trace("迪西之舞"); }

class DanceToy{
 public static TINKYWINKY:String = "TIinkyWinky"; //將字串改成類別名稱
 public static POPO:String = "PoPo";
 public static LAALAA:String = "LaaLaa";
 public static DIPSY:String = "Dispy";
}

class ToyFactory{
 public static function createTeletubb( toyName:String ): IDance {
  var classRef:Class = flash.utils.getDefinitionByName(toyName) as Class ; //利用字串生成物件這樣就不用作switch了
  return (new ClassRef()) as IDance;
 }
}

class ClientDemo{
 public static function main():void{
  var demoToy:IDance = ToyFactory. createTeletubb(DanceToy.TINKYWINKY); //保持簡單的客戶端介面
  demoToy.dance();
 }
}

綜合 simple factory 和 factory 範例這邊提出更好的解決辦法,不但提高程式延展性也保持客戶端介面的簡單,從以上範例可以發現客戶只要了解 ToyFactory. createTeletubb 即可,其他介面都被隱藏,降低客戶端 API 學習的困難度。未來新增玩具時只要新增玩具類別與DanceToy類別下多加一條public static DIPSY:String = "NewToy";,或許大家覺得多加一條public static DIPSY:String = "NewToy"會破壞程式模組精神,不過若程式不能十全十美,盡可能縮小修改範圍才是最佳準則。

[教學] 邏輯原來可以這樣用?

var a:Boolean = true;
var b:Object = new Object();
var c:Function = function doSomething():void{}
var d:String = "cool!";

sample01:

if (a) if(b) c();

可寫成 --> a && b && c(); // 判斷式簡化

sample02:

if(d) d = "great";

可寫成 --> d &&= "great!"; // 快速判斷與設值方式

所以 if (condition){/* statement.. */}
若 condition 為:
undefined 則為 false
Null 則為 false
Boolean 則為 依照布林值判斷
任意 Object 或其子類別若是非 null 則 condition 為true,如上 Function、String.

a && b && c() 條件成立時執行 c();
d &&= "great!" 條件成立時執行 d = "great";

2009年8月12日 星期三

[作品] Hey! Window

拿起麥克風 microphone 模仿在玻璃前吹氣或哈氣,再用mouse drag 模擬手指畫出想要的形狀吧~背景加一點雪跟浪漫音樂說不定會 fu 更好,有空再修正吧~

2009年8月11日 星期二

[閒聊] MRT 內捷捷運車廂置頂的路線圖看板設計

捷運木柵內湖線狀況頻傳,漏水、網路問題、浪費公帑的事就不講了。來看左圖的路線看板部分,原本價格不菲的 LED 陣列看板變成價格便宜且會反光的壓克力板,補個 1000 元再插幾顆 LED 來裝飾一下還真是省~別說我眼殘,字小的跟螞蟻一樣,距離 2、3 公尺就看不清楚了。沒關係,為了這個看板買一副度數深一點的眼鏡來戴,ㄟ?怎麼字還是擠成一團 ! 英文根本看不清楚,那旁邊老花眼的老公公老婆婆怎麼辦 ? 好歹也加裝個燈泡在看板後面也比較清楚嘛,或許會給你加一點分數~哈。

2009年8月10日 星期一

[作品] SpectrumFlower 音之花

將聲音頻譜作為 3d 球之材質,花瓣隨著音樂的律動起舞,使視覺富有優美流暢的韻律感。

2009年8月9日 星期日

[閒聊] flash 延伸應用(待補)


微軟能辦到,您也能辦到,大家一起來 Multitouch ~

Flash 也能玩 Wii !? WiiFlash 讓您做更多的互動體驗 ~ 自己來做 Wii 運動吧 ~

Flash 互動音樂來自SONIFY ~ 動手做 MIDI 合成器

FlashStick 透過 Flash 的 socket 結合 directX input,讓你可以擷取搖桿類比資訊,做出更專業的遊戲

還有學不完的APIs

其它特殊運用會慢慢補上 : )

2009年8月7日 星期五

[教學] javascript: 的祕密

大家 COPY 這段程式碼貼到網址列 ( Address bar ) 上並按 Enter

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+ "px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+" px"}R++}setInterval( 'A()',5); void(0 );

"javascript:xxxx" 最初設計的用意是希望 JS 程式設計師在網址列輸入程式後能馬上看到效果。

常常可以看到有人這樣寫

<a href="javascript:alert('haha')">click me!</a>

或者

flash as2 中的 getURL("javascript:alert('haha')");

其實這些都是一樣的道理喔~只要有關 url 連結的部分都可以用"javascript:/*statement...*/"來做更進階的設定或程式特效 : )


2009年8月6日 星期四

[閒聊] 圖片也能存音樂 !?

QR碼是二維條碼的一種,1994 年由日本 Denso-Wave 公司發明。QR 來自英文「Quick Response」的縮寫,即快速反應的意思,源自發明者希望QR碼可讓其內容快速被解碼。QR 碼最常見於日本,並為目前日本最流行的二維空間條碼。QR 碼比普通一維條碼可儲存更多資料,亦無需像普通條碼般在掃描時需直線對準掃描器。 (簡單來說你去7-11買東西,店員會幫你刷一下產品條碼來得知產品價格就是一維條碼,更多資訊請看 wiki)

既然 QR code 能儲存資訊,那 midi 音樂是否也可以存進去呢 ? 來看 QuickMark 利用 QR code 來存放圖片與音樂。是不是很有趣的應用,想想看要是今天拿手機將 QRcode 照下來就能在手機撥放一段 midi 音樂,非常酷吧,用這種方法來宣傳與行銷手機產品一定會大紅大紫XD~

Moka 想說把 Midi 或 Mp3 等音樂格式的檔案存在QRCode裡,再利用前述的 information hiding 把 QRCode 藏在一般漂亮的圖片裡,或許視覺上會更令人賞心悅目~: )。

題外話,不知道大家有沒有聽過 64k intro ,國外有一些公司會參加一項技術競賽,他們把好幾G容量的影音檔壓縮成 64kb 以內的執行檔來播放,最令人印象深刻的影片將是 winner 。下載小鴨鴨圖片,別小看這200k的圖片,裡面有3支得獎影片,大家下載後將之附檔名改為rar,並解壓縮就知道了。更多資訊參考下方連結:

2009年8月5日 星期三

[教學] information hiding 資訊隱藏

網路發展得非常迅速,數位媒體的傳播也比以往快速且容易,今天很開心的畫完一張數位插畫,明天就有可能變成別人的作品,為確保智慧財產權,資訊隱藏技術也營運而生。

Moka 這邊寫個再簡單不過的資訊隱藏例子,以 10 x 10 圖片為例。

(圖A. 10 x 10 晴空萬里圖)
(圖B. 10 x 10 想要隱藏的個人Marker)

首先大家知道每個像素都有 r、g、b 跟一維座標(每個點在陣列排序的索引)
總共4個向量所構成,先來看圖 A,假設我只看圖 A 的 r 向量部份:

73,72,69,68,68,68,78,135,181,105
135,132,109,116,132,108,118,243,255,197
....
0,0,21,102,133,141,140,62,2,0
共100個 r 值。

接下來看看 Moka 怎麼把 Marker 塞到圖裡,

74,72,69,69,69,69,79,135,182,106
136,133,110,116,132,108,118,244,255,198
....
0,0,21,103,133,141,141,63,2,0

moka 在 r 向量中動了手腳,
綠色部份為更動的值,
若數值為偶數代表Marker的白色,
而數值為奇數代表Marker的黑色,

72 ,72 ,69 ,69 ,69 ,69 ,79 ,135 ,182,106
136,133,110,116,132,108,118,244,255,198
....
0,0,21,103,133,141,141,63,2,0

換句話說再更清楚表達一點,奇數用X代表,偶數用-代表

--XXXXXX--
-X------X-
-X------X-
X--------X
X-XX--XX-X
X--------X
X--------X
-X-XXXX-X-
-X------X-
--XXXXXX--

從上圖可以清楚知道 Moka 的用意吧~
而且產生出來的新圖跟原圖差異量級小,
每個 pixel 只做 1/16777215 (r+g+b)的色差變化根本看不出來。
同時除了r 向量可以塞資訊,g 跟 b 跟座標也能塞資訊 ~
如果覺得不夠用,把 rgb 轉成 hsv 還可以再塞~

當然這種資訊隱藏方式非常容易破解~哈哈,人家隨便再壓縮圖片你所隱藏的標籤就沒用了,Moka 只是給大家一個簡單的資訊隱藏觀念,更多更深的技術就得拜託 google 大神了~