Adobe CS5多媒體跨界匯流設計應用趨勢:「Adobe CS5網站設計應用趨勢與教案設計」簡報

Adobe CS5多媒體跨界匯流設計應用趨勢:「Adobe CS5網站設計應用趨勢與教案設計」簡報
文∕趙英傑

本文提供上奇科技於7/21與7/28,在高雄與台中舉辦的「Adobe CS5多媒體跨界匯流設計應用趨勢」研討會,「Adobe CS5網站設計應用趨勢與教案設計」單元的簡報。

坦白說,到底什麼是「Adobe CS5網站設計應用趨勢與教案設計」,我也不太清楚。我的簡報重點只有四個:Web設計師是超人HTML5介紹多元互動介面Flash不死之CS5軟體跨界整合。嗯,果然跟主題沒有太大關連。

HTML是根本

或許是視覺設計工具太方便了,要不是鬧得沸沸揚揚的HTML5與Flash之爭,有些網頁設計初學者或從業人員,好像忘了網頁最根本的東西是HTML。我見過有人可以用Dreamweaver和Photoshop做出美美的網頁,卻不識得超連結的標籤<a>。

好比平面設計師要瞭解網屏、histogram、色彩管理…等技術,才能在印刷油墨上完美呈現出色的設計作品;網頁設計師若不懂HTML,如何精進CSS技巧?網頁設計可不只是平面設計和影像處理。

HTML5基本上就是在既有的HTML基礎下,增加新的標籤、CSS樣式指令和JavaScript程式的功能。例如,原有的HTML只具備嵌入影像的<img>標籤,HTML5新增了處理多媒體元素的<video>視訊<audio>聲音標籤,並且把當初連同Adobe在內的幾家大廠,為了與Flash抗衡而推出的SVG(Scalable Vector Graphics)向量圖標準,也納入HTML5。

另一個最初由Apple提倡的<canvas>(直譯為「畫布」)標籤,則可以在網頁上設定一個區域(相當於Flash裡的「舞台」),讓JavaScript在其中建立互動式圖像。這種種因素,讓人聯想到HTML5將是Flash殺手。

如果您採用的是最新版本的Google Chrome, Firefox, Safari, Opera或者IE 9等瀏覽器,不妨瀏覽一下底下使用HTML5技術建立的網頁:

多元的技術環境

應用程式(或者說「桌面應用程式」)設計師和網路程式設計師所面對的環境有很大的不同,前者可能只需要專精一種語言,像C++或VB,以及單一系統的API,即可應付工作需求。

網路程式設計人員面對的則是多元、多變且不完全相容的環境,光是前端的技術面,就有HTML, CSS, JavaScript,再加上Flash ActionScript與微軟的Silverlight等多媒體程式,還得混搭(mash up)不同雲端服務(如:Google Maps, Flickr和FaceBook)的API…雖然工作上只需要專注幾種技術,但是又不得不隨時準備迎接新的挑戰。

跨界應用

Mac OS X內建Widget開始(某種程度來說,這是點燃HTML5的導火線),網頁設計師便能運用熟知的技術(HTML, CSS和JavaScript),跨足開發Mac OS X的桌面應用程式。

採用WebOS系統,叫好卻不叫座的Palm Pre手機,也是強調只需熟悉網頁相關技術,即可開發WebOS的應用程式。他們甚至還有純瀏覽器環境的整合開發(IDE)工具

Java語言或許是跨界應用程式的開山祖師,昇陽電腦喊出Write once, run anywhere.(寫一次,即可在任何機器上執行)的願景,但卻在蘋果的i系列家族踢到鐵板。

Flash也具有「寫一次,即可在任何機器上執行」的能力,不只是瀏覽器,Flash可以發佈成.exe(Windows應用程式).app(Mac OS X應用程式),或者Adobe AIR桌面應用程式格式(.air,於包含Android 2.2系統在內的環境下執行。也就是說,Flash使用者不只是網頁設計師,更可以是桌面程式及行動裝置設計師(不知道印度售價35美元的Android平板電腦,何時推出支援Android 2.2的版本?)

蘋果封鎖了Flash和Java。我覺得,限制開發人員只能使用特定的程式語言,就好像國家限制人民不能講方言一樣奇怪。這張iPad照片是在大阪的Apple Store拍的:

不支援Flash的Apple iPad

Flash CS5最大的賣點之一,是具備直接將Flash影片發佈成iPhone應用程式的功能,完整的新增功能介紹請參閱Adobe的Flash產品介紹網頁。不過就目前的情勢看來,這項功能大概只能用在程式原型開發,以及讓學生認識iPhone的加速感應、多點觸控等介面開發的概念。

山不轉,路轉。

Flash開發人員,可以使用OpenPlug公司的ELIPS Studio工具,把ActionScript 3.0程式碼轉換成以C++語言編譯而成的手機原生應用程式,並且支援時下所有通行的手機作業系統,包括:iPhone OS (iOS), Google Android, Windows Mobile以及Symbian

也就是說,Flash ActionScript 3.0程式設計師,可以繼續沿用熟悉的開發工具與API來開發跨平台應用程式。

OpenPlug在9月1日發佈的一則新聞稿指出,知名的法國電信通訊設備業者Alcatel-Lucent(阿爾卡特-朗訊)已經併購OpenPlug。希望在大企業相挺之下,ActionScript程式設計師能順利地翻牆到蘋果的領地。

2010/8/27的工商時報有一篇標題為「社交遊戲夯 Flash工程師鹹魚翻身」的報導指出,隨著社交遊戲打開市場,其龐大的Flash程式需求讓Flash工程師薪資大漲。一位獵人頭公司的主管表示,業界頂尖的Flash工程師年薪在3年前約5萬至8萬美元,現在可以喊到15萬美元。另一家線上遊戲開發公司則提到,一般的工程師通常一個月內就能找到理想的人才,但Flash工程師卻要2到3個月才能找到

看樣子,Flash平台並沒有因為Apple的撻伐而前途茫茫。

Adobe支援HTML5

本次研討會背後的大老闆之一是Adobe,所以CS5軟體是重點。新成員Flash Catalyst CS5的介紹,請參閱「Adobe CS5多媒體跨界匯流設計應用趨勢:Flash Catalyst CS5簡報」。

Dreamweaver CS5的新增功能請參閱Adobe的Dreamweaver產品介紹網頁。在HTML5支援方面,Adobe提供了一個HTML5 Pack(套件),能在Dreamweaver CS4和CS5版本的程式碼編輯器中,提供HTML5標籤指令提示功能。

至於CS5系列軟體與HTML5網頁製作的工作流程整合方面,在2009年10月在美國洛杉磯舉辦的MAX研討會上,Adobe展示了Dreamweaver裡的一個Smart Paste(智慧型貼上)指令的原型,能把從Illustrator以及Flash複製的平面向量圖和時間軸動畫,自動轉換成適用於HTML5瀏覽器的SVG向量圖(實際上是Adobe自家的FXG格式加上一段解析圖像的JavaScript程式)<canvas>(畫布)區域中呈現

Smokescreen是另一個有意思的開放原始碼應用程式(尚未開放下載),能把Flash動畫轉換成HTML5形式,並在支援的瀏覽器設備(包含iPhone與iPad在內)順暢地播放。

簡報圖檔

底下是研討會的簡報縮圖,按一下即可放大。

     

     

     

     

 

延伸閱讀

One thought on “Adobe CS5多媒體跨界匯流設計應用趨勢:「Adobe CS5網站設計應用趨勢與教案設計」簡報

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *