Adobe 創新製作網頁之旅


上禮拜接到Adobe公關的電話,得知有這個活動,就立刻報名參加了。
昨天活動結束,我覺得這次內容很豐富,就像一個產品發表會(事實上也是@@)

會場在信義誠品的六樓,人多得讓我很吃驚(原本以為只是小型的研討會),在入口也排隊了大約10分鐘才順利進場。

這次請到的是兩位Adobe專業的外國講師:Ryan Stewart 與 Paul Burnett。

活動的主題當然就是網頁的製作,但是跟以往不同的是並不是大家所熟悉的產品,而是一個全新的產品線:Edage

一開始主講者就開門見山的說到目前網路世界的巨大變化,以往IE一統江湖的情況已不復見,取而代之的是一個開源的瀏覽器核心:WebKit。它是由Apple所開發,目前運用在各大瀏覽器上,像Chrome、Safari等等,因此Adobe決定開發新的產品來幫助網頁設計師們,規格上更加地符合WebKit的瀏覽器。

而這次除了全新的產品之外,也介紹了Adobe的新網站,它有許多關於網頁技術的支援,同時這個網站也可以下載到本次活動介紹的軟體。

http://html.adobe.com

Adobe也針對CSS3特別的增添了一個濾鏡網站,可以讓大家直接在上面調整參數修改圖片的濾鏡,相當地實用。
http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

講者現場示範了如何調整參數改變圖片的顏色(原本是藍色調,後來變黃色,可以比對上圖跟下圖)

接下來就是今天的重頭戲,也就是Edge系列產品的介紹。

以往全世界的網頁設計師在做網頁的時候一定會用到Adobe三大軟體:Photoshop、Dreamweaver、Flash。而今天Adobe介紹的是完全不一樣的網頁製作方式,全新的一系列產品,這是我當初沒有料想到的,原本我以為今天的主角就是Dreamweaver,畢竟今天的主題是網頁製作,但出乎意料的是,整場下來,我都沒看到DW的身影。

Adobe Edage的產品包含了Edge Animate、Edge Reflow、Edge Code、Edge Inspect、Edge Web Fonts、Typekit、PhoneGap Build。

其中最受矚目的就是Edge Animate,這是個未來有可能替代Flash成為網路動畫的解決方案(但我認為還是Flash做動畫好用,原因我後面會提)


Edge Animate
在目前HTML5聲勢高漲的同時,大家開始尋找Flash以外的動畫製作模式,基本上瀏覽器直接播放向量動畫是透過兩個機制,一個是HTML5的新標籤canvas,另一個則是Javascript,但是這兩個東西對美術設計師來說都很不友善,大家渴望有「所見即所得」(What You See Is What You Get )的軟體可以使用,否則美術設計師很難透過程式碼的想像去製作出好看的動畫。

這就是Edge Animate的用途,它讓美術設計師可以像使用Flash一樣(但我覺得更像After Effect),輕易地製作出HTML5的動畫,把程式設計的部分降到最低(我看DEMO還是有部分要填寫Javascript,但難度很低),目前Edge Animate推出的是1.0的版本,而它最棒的地方就是:


它是免費的!

沒錯,你沒看錯,目前1.0版本完全是提供使用者免費下載,只要到下列網址就可以把軟體免費抓來用(要註冊一個Adobe id)
http://html.adobe.com/edge/animate/

另外還有一個我覺得很酷的地方,就是Edge Animate可以直接編輯一個HTML的檔案,直接把動畫加進去(大家可以把Edge Animate想成一個可以加動畫的Dreamweaver),這就可以避免從前網頁動畫還要去對應Flash原始檔,大家可以看影片比較後段的地方有作展示:

美中不足的就是我試用過後,覺得比Flash略遜的地方就在於它沒辦法做太細緻的圖像繪製,所以大部分的圖片還是得在外部畫好再匯入排版,結果就是還是會有一堆原始檔案,另外它對聲音的支援度也不好,所以我覺得如果你是Flash的老手,可以考慮直接使用CreateJS這個CS6的外掛(請參考這篇),製作動畫的速度可能會比Edge Animate來得更快,但是如果你要的只是很簡單的圖片淡入淡出之類的HTML5動畫,那使用Edge Animate就非常方便。


Edge Code

它是一個用來寫程式的編輯器,就像很多程式設計師愛用Notepad++之類的軟體,它主要的功用就是用來編輯網頁裡的JS或CSS等,但是它有個最大的好處,就是它可以與瀏覽器連結,因此我們可以直接看到我們在程式碼理的修改對頁面的影響,下列影片中,講者直接修改了背景色,它也很快速地呈現在旁邊的瀏覽器上,省去了來回開啟重整的步驟。


Typekit

Edge Web Fonts

這兩個都是網路字庫,只是一個是免費一個是付費,因為都沒有中文字型,台灣使用可能性偏低,所以我沒有特別去記錄,但是它很酷的地方是以往我們在做網頁時能使用的字型受限於作業系統內建的字體(沒錯,就是萬惡的新細明體與標楷體),但是Adobe的技術讓網站可以使用一些特殊字體,而不用擔心使用者的電腦有沒有灌這個字型,就像是雲端字庫,不過…沒有中文,再酷我們也只能嘆口氣。


Edge Inspect

這是個蠻有趣的東西,簡單地說,它可以方便網頁設計師在各種裝置間檢視網頁縮放的情形。


它有個Chrome的外掛,點了之後就可以在平板手機等裝置看網頁是否正常(現在的網頁設計師真是辛苦到爆炸…),Adobe目前一直推廣讓不同尺寸的螢幕套用不一樣的CSS,這樣就可以達到同樣的內容,但是符合各式的裝置,這個概念後面Edge Reflow 還會再提到。


PhoneGap Build

PhoneGap也是這次的重點之一,它是一個讓人可以使用HTML與JS來開發App的程式,比起原生的Object-C或Java,PhoneGap確實親民許多,之前它也被整合到Dreamweaver,這次又被獨立成一個軟體,可見Adobe對它的重視,畢竟現在最夯的就是App製作,只要扯上App都會引來大量的關注。

這次多了一個網站,讓大家可以把製作好的內容上傳,網站會將它轉成各種裝置用的App讓使用者下載回來,即使沒有MAC,也能夠製作iOS的App。

PhoneGap使用的就是HTML5+CSS3+Javascript。

Ryan也Demo了一段他製作的app:

QA的時候有人問到Flash的AIR技術也能夠製作App,那這兩者該如何選擇,答案是如果是資訊類的App,用PhoneGap開發比較輕鬆,但如果是遊戲或影音類的,還是用AIR來得好些。


Edge Reflow

Edge Reflow其實有點像Dreamweaver,但是它使用起來比較簡單,但相對地能做的事感覺也比較有限,它最重要的就是能讓使用者很簡單地定義每個螢幕寬度時要呈現的樣貌。(軟體目前還未開發完畢)

從Edge Reflow的使用方式讓我覺得網頁製作或許在未來就像在使用Word一樣,利用簡單的拖曳跟選擇就可以排出一個網頁,當然好不好看還是得看設計師的功力,但整體的門檻似乎會下降很多。(缺點可能就是大家的網站長得都一樣,不過這也是趨勢)
附帶一提,Edge Reflow也可以在Adobe的網站上免費下載(目前是測試版)

會後很榮幸受邀,可以與講師面對面發問,大家都提了很多問題。

(Adobe招待的下午茶)

其中有一個問題讓我印象很深刻:
Adobe為什麼要打造Edge的產品線?

理由就像Ryan Stewart(講者)一開場的時候說的,Adobe問了很多設計師大家想要的是什麼,結論就是大家想要一些更輕巧的工具針對某些特定的工作,就像Flash或Photoshop這類很強大的軟體雖然什麼都做得到,但是過份肥大也會讓人在使用起來降低工作的效率,因此Edge系列的誕生,就是為了讓大家在工作時多一點選擇,就像目前行動化app,雖然功能沒有桌機的軟體強,但是大家還是用得不亦樂乎,我覺得以這點來看,Edge確實開啟了一個成功的方向。

最後分享一下這次拿到的贈品,包包與鑰匙圈:

感覺又要開始用功了…

發表迴響