聽說某些職業的人,都會被問說曾用技能解決什麼生活問題?讓我想到之前玩的一個東西,起頭又是想當年…

大學電腦課有三寶:開心農場偷菜、開心水族箱撿寶、跑跑卡丁車尬車,結果還不到十年,已經人事物全非了,開心農場在2017結束營業,跑跑卡丁車在 Mac 跟手機上沒得玩,大家都在拼人生 Online。不過我還一直持續在玩 Facebook 的開心水族箱,幾乎每天都會登入日曆簽到,但後來覺得越來越難玩了…

Facebook 上的 Flash 小遊戲會被瀏覽器阻擋

開心水族箱雖然也有出 iOS 跟 Android 版手遊,但手遊版的開心水族箱又是另一組遊戲資料、不同的魚,跟我玩的 Facebook 電腦網頁版遊戲是不互通的,有時候在家連電腦都不開了,這就有點麻煩。但麻煩的是手遊版跟 FB 電腦網頁版是獨立的嗎?麻煩的是魚太多很吃 CPU 效能嗎?都不是,最麻煩的是 Flash 被瀏覽器阻擋掉。

開心水族箱 Facebook 版的遊戲操作畫面是用 Flash 技術寫的,Flash 這些年來被趕盡殺絕,Flash 的開發軟體都易名改姓,許多開發者也轉往 Write Once, Debug Everywhere 的 HTML5 相關技術。

2017 年的時候,各大現代瀏覽器都已經有網頁預設不載入 Flash 的作為,造成「漢堡王極簡官網事件」。Google Chrome 版本 69 更新之後,又變本加厲,每一次瀏覽器關閉,再重新開網頁之後,都要再次點選允許執行 Flash,但當時還是可以透過修改瀏覽器 chrome://flags/ 裡面的設定來規避。

到了今年 Google Chrome 版本 71 之後,Flash 追殺令又雪上加霜了,之前的瀏覽器設定已經沒用了,每次打開都會這樣…

每天玩開心水族箱都要重新按一次允許 Flash ,真的是有點惱人,載入遊戲花的時間比玩遊戲還長啊!

但後來聽到一些開發者大大介紹一個程式開發框架叫 Electron,它爸爸是世界上最大的工程師交友網站 GitHub。跟 WebAssembly 這種讓非網頁程式的開發技能做網頁程式的概念有點相反,Electron 是讓網頁開發技能,用於製作桌面系統 (Windows / macOS / Linux) 的應用程式。

什麼是 Electron

這軟體名稱的單字是電子的意思,原子/中子/電子…的電子,不是電子商務的電子。

Electron 內含 Node.js 的伺服器環境和一個能獨立執行的 Chromium 網頁瀏覽器,專案編譯 build 後,例如 Windows 就會產生一個 exe 的應用程式,web 程式就可在這個獨立的 Electron 桌面應用程式中運作,Electron 裡面還有一個 BrowserWindow API 可以用來載入遠端 URL ,或程式打包檔內的網頁程式。

現代軟體工程的開發悲劇,細節更多,裝置更多更複雜,製作「跨裝置的軟體工具」也更複雜、更貴,所以就有像 React Native, Electron 這種,讓本來擁有 WEB 踩雷經驗與技能(CSS/JS/HTML/PHP…) 的開發人員,也可以做出在行動裝置執行、桌面作業系統執行的應用程式,連 2017 年後的新版 Windows Skype,也是用 Electron 做的呢!

為何不直接開網頁就好? Electron 能帶來什麼好處?
  • 可將網頁程式的瀏覽環境單純化,如 web 網頁程式用了太多先進的 CSS display:grid、JS 的 ES6,在 IE11 根本無法正常執行,又有各種原因不方便用 Babel 或 Webpack 處理過,那現在用 Electron 包裝之後,就不須考慮使用者使用前端語法支援度極差的舊瀏覽器,或是安裝各種奇怪擴充套件的瀏覽器,而無法正常操作 web 程式的情況。
  • 桌面應用程式有更高的控制權限,不會像網頁一樣委屈,瀏覽器不給的,你不能要,例如門市機台(kiosk)類的使用情境,不想要使用者碰到桌面的系統設定,Electron 可將軟體用 kiosk 單視窗的操作模式來執行。
  • 如果包的是遠端 WEB 網頁程式,有些東西可以直接更新 WEB 網頁程式,而不需要整辦公室/各分店的電腦重新下載、佈屬、安裝軟體…
  • 找資料時還發現打包檔內的程式不只是能包 html 和 node.js,還可以灌上 Electron.NET 或 ELECTRON-4-PHP ,跑 .Net Core 或 php 程式,不過我都沒用過。
我為什麼要使用 Electron

雖然別人的用途都很高大上,但我靈機一動,Flash 的網頁系統/遊戲,應該可以透過上述的概念,打包成 Mac 應用程式,就再也不用擔心網頁瀏覽器把 Flash 阻擋掉了吧?

Electron 小地雷也不少

首先可能會遇到,網頁程式引用 jQuery,會報錯 jQuery is not defined 然後網頁大爆炸,解法有兩種:
如果包的網頁是自己的,可以在引用 script 的前後再加一些 code,例如:
<script >if (typeof module === 'object') {window.module = module; module = undefined;}</script >
<script src="/js/bundle.js"></script>
<script >if (window.module) module = window.module;</script >

如果包的網頁是別人的,可以修改呼叫 BrowserWindow 內的參數
webPreferences :{
nodeIntegration
... 繼續閱讀⇢

2021/1/12 更新: Flash 正式死亡

2021 年,是一個 Mac 上的 Safari,還有 Windows 上的 Firefox ,都已經沒辦法硬是允許執行的 Flash 的年代。
1/12號,照常用 Windows 的 Google Chrome (版本 87.0.4280.141) 打開有 Flash 的網頁,照慣例按下允許,卻發現不管怎麼按,永遠只能看到這精美的圖案

用 IE11 也是一樣,或是只有灰灰的一塊「此外掛程式不支援」「已不再支援 Adobe Flash Player」,電腦竟然再也看不到 Flash 了 !

想到 Adobe 的Adobe Flash Player EOL General Information Page有寫

Adobe will block Flash content from running in Flash Player beginning January 12, 2021

Adobe 真的說到做到,時間一到就整個把 Flash 阻擋封鎖掉,真的是用都不能用,沒有唬爛,給個 respect。
本席在此宣布網頁上的 Flash 已死,真的屍骨無存了。

在 Windows 本機電腦或網頁瀏覽器 繼續正常播放 Flash 的方法

如果想要看以前留下來,存在電腦裡的 swf 檔(例如阿貴動畫),或 Flash 小遊戲(如神影無蹤廖添丁),或是你跟我一樣是相關從業人員,有非用不可的 flash 網頁系統,或是要對照網頁上那個「看得見又看不見」的 Flash 動畫內容,再重新設計過,有什麼做法呢?
目前試出有一些方式可以繼續看 Flash:

1.把電腦的時間調到2021/1/11或更早之前

然後在 swf 檔案按右鍵,使用IE11開啟,可以成功播放 Flash,網頁內的 Flash 也可以直接瀏覽正常顯示。
不過因為現代網站通常都有安裝 SSL 數位憑證(網站網址是https://),調整電腦時間這招會讓 https 的網站無法正常開啟,會連 Google 搜尋都打不開喔!有些會用日期時間當檔名的擷圖軟體無法使用,Adobe Photoshop 之類需要網路連線授權的軟體也會無法開啟,看完要再把電腦時間調回來。
註:如果發現時間怎麼改,網頁上還是顯示「此外掛程式不支援」「已不再支援 Adobe Flash Player」,可能是因為電腦 Windows 10 已經被更新到 KB4577586(在系統更新>更新記錄>其他更新裡面)可以查到,可再參考下方其他方法。

2.使用 Adobe 官方提供的開發人員除錯版本(Debugger) 版 Flash Player

官方下載連結在此: https://www.adobe.com/support/flashplayer/debug_downloads.html ,Windows 使用者可以點 Download the Flash Player projector,然後開啟後會得到一個 Flash Player 視窗,可以開啟播放 swf 檔案,下載就能用,免安裝!
但不曉得 Adobe 哪天會把這工具撤掉。這個工具比較適合開啟電腦裡的的 Flash 小遊戲之類的,並不是讓網頁瀏覽器可以直接播放 Flash。

3.免安裝型的網頁瀏覽器

有些 IT 社團瘋傳的 Flash Player 降級 + Google Chrome Portable 救援包,連結是轉載的,可能隨時會刪掉。原理就是裡面提供了三樣東西:
1.Flash Player 的解除安裝工具,
2.舊版 Flash Player 安裝檔,解除安裝之後,再安裝裡面的舊版 Flash Player,
3.免安裝版(可攜版)瀏覽器,安裝舊版 Flash Player 之後,透過免安裝型的網頁瀏覽器開啟非得要用 Flash Player 才能正常使用的網頁。
不過這會讓上網變得超級麻煩,電腦安裝更舊版的 Flash Player ,更是嚴重暴露在隱藏的資安風險之下,道高一尺,魔高一丈,不可不慎。

4.用 Adobe Animate CC 硬開

電腦有訂閱 Adobe 正版方案的,安裝 Adobe Animate CC(一個取代 Flash 的動畫設計軟體),新增專案後,把 swf 檔匯入到元件庫內,有些檔案勉強還可以正常播放。
這個工具比較適合開啟電腦裡的的 Flash 小遊戲或動畫之類的,並不是讓網頁瀏覽器可以直接正常播放執行 Flash。

5.使用 SWF 反編譯工具

例如 JPEXS Free Flash Decompiler,因為裡面有內嵌一個獨立的 Flash Player,版本12.0.0 起也可以播放 swf 檔案。
這個工具比較適合開啟電腦裡的的 Flash 小遊戲或動畫之類的,並不是讓網頁瀏覽器可以直接正常播放執行 Flash。... 繼續閱讀⇢

近期遇到一個需求,客戶的行業會有自己的影片內容,想把影片放在自己的伺服器,在自己的網站上播放,而不是放在 Youtube 等線上影音服務平台,考察其他同性質的競爭業者,發現在網頁上播放自己的影片,這件事並不單純…


上面有一個 ppt,如果看不到 ppt 請點播放吧! 網頁上的影片 // Speaker Deck。

內容摘要:

第一部 : 我的上古時代
1.步驟1:把影片傳到伺服器,用早期的影片播放語法…
2.步驟2:電腦需要安裝各種 Player 才能看網頁上的影片… (您是否要執行此 ActiveX 控制項?)
3.步驟3:成功看到影片了!

4.< object> 屬性介紹:
– Classid – 每一種副檔名都有不同ID – 讓系統知道如何處理這檔案
– wmv (classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6″)
– swf (classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″)
– Codebase – 讓系統知道如果影片解不出來,要去哪邊下載解碼器
– http://www.apple.com/qtactivex/qtplugin.cab
– http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab
– http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
– Pluginspage – 如果沒安裝,讓使用者知道要去哪裡下載軟體
-http://www.macromedia.com/go/getflashplayer
-http://java.sun.com/j2se/1.7.0/download.html

5.以前的技術為何不能解決現代的問題?
– ActiveX 在非 IE 的瀏覽器不支援
– NPAPI 相關技術在現代瀏覽器被停用。
– Codebase 插件路徑失連
– Flash 人人喊打
– Sliverlight – 微軟宣布將終止支援
– 行動裝置時代來臨

第二部: 新時代
1.HTML5 Video 標籤
– 使用 < video> 標籤與相關屬性,即可產生影片播放介面,不需要自己寫介面。
影片播放器的功能細項:
a.有一顆按鈕點一下會變成║,會停在剛剛的畫面,並且聲音暫停,再點一下會變成 ►,從剛剛的時間點繼續播放畫面與聲音。
b.有一個矩形區塊,依目前已播放/影片總長度計算並顯示正確的長度,每秒更新,與 a 項功能連動。
c.點擊 b 項區塊,會前往該位置對應的影格與音訊時間。
族繁不及備載…

  • IE9(含)以上支援 < video> 標籤。
  • 由瀏覽器負責解碼影片,影片格式支援性依瀏覽器而定:
    • MP4 (除了IE8, Android 4.3-,支援性最高)
    • OGG (不支援 IE, Edge, Firefox3.5-, Chrome3-)
    • WebM (不支援 IE, Edge, Safari, Firefox4-, Chrome 6-)
    • m3u8 ( HLS 串流影音格式,Chrome 不支援)
    • 如果我有其餘的格式,如 FLV 可以直接用 video tag 來播嗎? 不,仍須仰賴外部套件(通常使用 Flash 做的播放器套件)。

2.HTML5 Video 標籤的相關屬性
– autoplay – 是否自動撥放影片(行動裝置無效)
– loop – 是否循環
– poster – 影片故障/影片載入中/影片未撥放顯示一張圖片
– preload – 是否預先下載,或是等按下 play 之後才開始下載
– source – 影片路徑
– controls – 影片控制條
– Play/Pause 撥放/暫停按鈕
– Seeking 撥放進度條
– Volume 音量控制
– Fullscreen 全螢幕按鈕
– track (目前只有 Edge 跟 Safari 支援)

3.同一段 video 語法在各瀏覽器顯示的樣子都不一樣
4.為了達成瀏覽器相容性,Flash 不能亡
5.外部播放器套件
– 使用 html5 video + Flash 播放器 + JS 等綜合技術,達成最高的瀏覽器覆蓋率
– 各瀏覽器統一的播放器介面、可換面板、自訂樣式…
– 方便的 ... 繼續閱讀⇢

WiMAX走向盡頭 投資成泡影

記者王憶紅/特稿
4G LTE(長期演進技術,Long Term Evolution)電信業者正在拚殺的此時,當年政府積極倡導的4G WiMAX(全球互通微波存取,Worldwide Interoperability for Microwave Access)產業卻可能逐漸走到盡頭。

業者昨至NCC抗議
WiMAX業者包括大同電信、威達雲端及全球移動等約200名員工,昨到NCC遞交陳情書,並在NCC大門前燒紙錢、獻菊花,上演一場WiMAX產業公祭抗議活動,少數業者、員工甚至因為沒有未來而落淚。
WiMAX產業可說是政府主導力推的政策產業,2005年先被政府納入M台灣計畫,預計到2009年的5年內,編列370億元預算,更在2007年釋出6張WiMAX電信執照。

不料,WiMAX主導者英特爾(Inter)2010年裁撤了負責推動全球WiMAX發展的專責單位,讓台灣一陣錯愕。之後,台灣網通廠商陸續停產,整個WiMAX產業政策也隨之曖昧不明,直到今年8月底NCC決議不予WiMAX業者大同電信換照,引發昨相關產業人員的抗議。

政府選錯邊 害了業者
WiMAX可說是政府首次推動的大型科技產業政策,但在選錯邊下,WiMAX業者所有投資成泡影。據了解,WiMAX業者威達董事長賴富源在WiMAX 7年來已經投資上百億元,但至今卻成一場空。
平心而論,WiMAX業者有錯,但也有冤。業者錯的是,當初參與執照競標,合約書上白紙黑字寫明,7成覆蓋率才能換照,但業者取得執照後的頭1、2年間,台灣供應鏈還算齊全時,卻未積極建設,不按照計畫採購,導致今日難以換照。
冤的是,當全球都不看好WiMAX前景時,政府還讓WiMAX業者抱有未來可望就地升級到LTE的一絲希望,沒有讓WiMAX投資立即止血。
WiMAX是當初政府大力推廣的產業,未能讓業者斷尾求生,歷經這個產業的2任總統、3任科技政委、4任NCC主委,是要給個交代的。

來源: http://news.ltn.com.tw/news/business/paper/810454

上面是近期的一則新聞,本來大家押寶在某個技術上,後來該技術卻停止發展了,當初的投資全部變成一場空。在(廣義的)資訊產業,常常發生這種情況。

想不起來嗎? 舉幾個例子來聽聽。

一.跟著大公司就對了?
2007 年時微軟發表 Sliverlight ,要來搶 Flash 的相關應用領域,一些使用全套微軟解決方案與開發工具的資訊公司,常常會被洗腦成「iPad 神馬的都是娛樂領域,在商用領域就是微軟最棒。」「有微軟的資源撐腰,做什麼都不用怕。」,有些人覺得投資這個技術是不錯的選擇,於是就有 Sliverlight 的 ERP 系統,或是其他應用程式。

結果 2015 年時,微軟呼籲Silverlight用戶改用其他技術 即將伴隨 Windows 10 出爐的微軟新瀏覽器 Edge 不再支援 Silverlight,微軟計畫在 2021 年完全終止對 Silverlight 的支援,雖然停止支援不代表不能用,就像現在還是一堆人在用 XP 一樣。但販售停止支援的商品,容易造成社會觀感不佳,一些本來就不看好 Sliverlight 、唱衰微軟的分析家就又可以拿來說嘴了。

所以選擇大公司經營的產品,就一定可以走得安穩長久嗎? 這可不一定喔!
Yahoo 不夠大嗎? 那無名小站怎麼會被停掉呢?
Google 不夠大嗎? Google Reader 現在跑哪去了呢?
WiMAX 主導廠商落跑,落跑的是誰? 是 Intel。

二.產品只要便宜、好用,大家就一定會選擇你?
便宜就贏了嗎? 這可不一定,舉一個影音界的例子。如果要在家看合法的高畫質電影,會想到什麼? 各種線上影音或隨選影音服務,或是去影片店租藍光(BD),去買藍光(BD)。

事實上在發展初期,還有另一個叫 HD-DVD 的東西,HD-DVD 的播放機跟空白片還比藍光便宜,但最後卻是 HD-DVD 消失了! 因為影片發行商,還有其他廠商,都不站在 HD-DVD 那邊,當然這背後的商業考量和利益糾葛一定一言難盡,比玫瑰瞳鈴眼還複雜,總之今天站著的是藍光,而不是 HD-DVD。

功夫兩個字,站著的才是對的。

好用就一定贏嗎? 這也不一定,舉台灣地區大家最愛用的通訊軟體 Line 為例,各種貸款廣告、遊戲邀請,愚蠢的備份與轉移機制,萬年不更新的 Line for iPad。如果你用 Android 平板,則無法跟手機共用帳號,Android 平板一登入,手機就會被登出清空,一輩子都將再也看不到你的對話紀錄。Line 除了貼圖多之外,根本難用。

想用其他更好用的即時通訊軟體? 想讓周遭的人改用其他通訊軟體? 您會遇到以下情況:
Skype? 沒有可愛貼圖? 而且都沒人在上面傳感恩圖片或好笑影音耶,好無聊。
PChome IM? Juiker? 沒聽過,蛤? 國產的喔! 不夠潮啦,都是阿宅在用。
Facebook Messenger? 不想給陌生人加 FB。
Beetalk? 新聞說那個是年輕人約炮用的耶?
Whats app, Cubie, M+ Messenger? 很好用? so what? 根本沒朋友在上面?
Wechat, QQ? 只有阿陸仔或是在大陸工作的人在用。

有的企業老闆似乎也是看穿這一點,產品不用做得好,但是一定要會宣傳。於是主力為資訊產品的公司,預算跟資源卻都在行銷、業務手上,造就一堆機海、App 海、電子垃圾。

三.有千千萬萬的鄉民來維護,開放原始碼軟體的壽命更長?
有一種「開放原始碼好棒棒」的觀點,大概是說商業軟體常常會碰到公司的商業考量,或是各種利益分配問題、產品線問題,讓本來應該可以很完美、世界無雙的軟體,變得各種閹割、各種死要錢、各種高額的雜項費用、各種 N 年後停止支援。

有人覺得開放原始碼的軟體,由網路上的大家來維護,殺了一個鄉民,還有千千萬萬的鄉民,而且都是公開的,沒有黑箱作業,而且很多都是免費的,不用擔心吞人的授權條款,也不用擔心收到 BSA 的信,或是用盜版被離職員工檢舉,或是抓破解抓到病毒。反正我只是要簡單的一套XXX(註一),所以沒必要用花錢的。

註一:我只是要一套簡單的XXX,同義詞:「這應該不難吧?」客戶字典經典三百句其中之一,如果這句話講出來,看到乙方爆青筋或是肌肉緊繃,表示乙方還是個菜鳥。

這個理論,常伴隨著每個世代的一個經典 Open Source 軟體來做印證,如十年前,用 osCommerce 網路開店,軟體免費,安裝方便,可商業使用,伺服器費用相對便宜,輕輕鬆鬆就可以達成網路開店的夢想。這年頭則是 WordPress 正夯,部落格可以拿來作形象網站,還可以開店,滿街都是模板跟教學。

但是後來大家發現,開放原始碼的軟體還是有可能會沒人維護、被放生。或是使用開放原始碼的解決方案,初期建置成本很低,但是後續需要維護、功能更新,或是客製化調整的成本高得嚇人。

例如上個世代在中國有一套開源電商系統叫 ecshop,功能強大,一些中小型網頁公司號稱「自行開發的客製化購物車」,時至今日,基本上連 ecshop 一半的功能都沒有。但是 ecshop 後來卻因為程式久未更新,系統需求的 php 版本過低,很多規格太新的主機沒辦法裝,於是就有各種高手大大的修改版流傳在民間,想用可以,就祈禱該版本不要出現問題或安全漏洞。

而且有人在的地方就會起爭議,開放原始碼軟體的作者們、或是組織協會,一樣會因為各種原因鬧分家,就好像 LibreOffice vs. OpenOffice,MySQL vs. MariaDB。

有些人已經參透了免費的最貴的道理,該花的錢還是要花,還不如用一般商業軟體,有問題還可以拿起電話,直接打去詰譙廠商。而不是「三天前我已經寫 email 給他們了,等待他們回信…。」

四.百家爭鳴的 Framework 或 Library,每個都要學嗎?
在古時候,那時候世界上只有一個瀏覽器叫做 IE,使用其他的瀏覽器的人會被當成異類、資訊孤兒、阿宅。

但後來出現了各種讓開發人員 Write less, do more 的 Java Script framework 或 library,如 Prototype, Mootools, YUI, ExtJS。但是現在呢? YUI 已經停止維護了,最後活得最好的則是 jQuery,國中生都知道只要把元素用$()包起來就可以控制它,還不用擔心哪個瀏覽器不吃哪個原生 Java Script 語法,還有一堆使用 jQuery 為基礎製作的套件流~傳~在~民~間。

坊間電腦補習班的一堆課程名稱也都是 ... 繼續閱讀⇢

每隔一陣子就會聽到有人問 :
「我想做網頁設計,人力銀行很多徵才條件都註明要會 Flash,那我應該要去學嗎 ?」

Flash 在前幾年的確風光一時,比如說七八十年次小時候都看過的阿貴、詰譙龍、小小系列動畫;還有各種活動網站、小遊戲、課本附的多媒體光碟教材、網頁廣告,2advanced 風格的全 Flash 網站,甚至是網路詐騙彈出廣告,處處可見 Flash 的蹤跡。

Flash 優點挺多的,說對設計師而言,可以用滑鼠直覺的拖拉,所見即所得,動畫製作流程十分方便。對工程師而言,可以用程式碼來控制。而且範例多、素材多,Flash 時代的設計師,硬碟裡都有幾個相簿程式或特效選單範例吧?

畫面上的東西當然不會平白無故變出來,Flash 跟 Adobe 系列平面設計軟體的格式整合性也相當不錯。除了可以處理點陣圖素材,也可使用向量圖形技術,可以有效節省網路頻寬和下載時間的檔案。對一些網拍商城的美工而言,Flash 甚至還可以匯出 gif 動畫呢! 另外 Flash 還有一些內嵌字體功能的功能,可以無視什麼解析度與瀏覽器版本,讓 PC 不管用什麼瀏覽器都可以看到一樣的畫面。

Flash 雖然可以做出許多不錯的視覺與互動效果,但是後來卻產生一些其他問題。例如一些新手做的 Flash 容易造成電腦 CPU 使用率飆高,而且 Flash 的效能在一些真正複雜的場景也不盡理想,例如電腦組裝討論區常看到「FB 上網文書機」跑不動開心水族箱的文章。

還有設計師從亂寫也能動的 Action Script 2,轉移到物件導向 Action Script 3 的陣痛期。甚至後來行動裝置崛起,2010 年4 月,賈伯斯宣布不在 iOS 中支援 Flash 內容。2011 年 11 月 9 日,Adobe 也宣布終止開發行動版本的 Flash Player。Android 也在系統更新後逐步封鎖 Flash,一般老百姓根本不知道如何在自己手機或平板上顯示 Flash 的內容,就算硬是讓行動裝置執行 Flash,也是增加卡頓、耗電的情況罷了。

賈伯斯封殺 Flash 的消息出來的時候,我還是大學生,老師還會在網頁設計課教 Flash,當年一看到新聞,大家都在想: 難道奶綠茶大大要失業了嗎? 從那時候到現在也只過了 5 年,賈伯斯已作古,未來要怎樣也還很難說。

所以,Flash 真的就沒必要學了嗎?
現在去相關行業工作,完全不會 Flash 也沒關係嗎?

其實就算在 2015 年,還是可以常常碰到 Flash 的,有以下用途 :

1.舊網站還有一堆 Flash 要維護
並不是說今天有了新技術,那些舊技術做的東西馬上會消失。今天新市長上任,那些八年遺毒就會消失。以前那些 Flash 做成的網站難道都不需要更新跟維護嗎?
一個網站可能會有新的活動、新的產品、新的技術認證、新的聯絡資訊 (Line、微信等)、這些都需要會用 Flash 的人員去維護。

雖然也有許多業主都有想要讓自己的 iPhone 也看得到自家網站,或是製作所謂 RWD 的行動網站,但是一聽到重新製作網站的報價,就退縮了,覺得網站這種東西,求有不求好,網站更新也無法幫助他的生意,於是還有許多 Flash 網站還在撐。

另外因為 Flash CC 逐漸升級之後就不支援太舊的檔案編譯,所以有些設計公司會同時共存 CC 與 CS 系列版本的 Adobe 軟體。那對於初學者而言,要學 CS 還是 CC 版本的 Flash 操作呢? 這又是一個問題。

2.多媒體廣告有時候會用 Flash 來的製作
現在電子商務已經進入紅海時代,你賣的商品或服務是其他人也有的,想要做一個網站,就等著在家數鈔票,基本上就是緣木求魚的事。品牌更大,東西更好的都在做廣告,憑什麼認為自己不做廣告就可以賣贏別人?

把自己的產品跟服務做得完美,理論上來說是不可能的。於是網路行銷更加的重要,最常見的就是找粉絲團或部落客寫手,或是買搜尋引擎關鍵字廣告,預算更多的會買多媒體聯播網廣告、Youtube 影片廣告。


多媒體聯播網廣告的特性在於當使用者瀏覽新聞,或是上網看文章時,網頁旁邊的廣告版位會不時出現廣告,有助於新品牌提高能見度,或是發掘出消費者潛藏的慾望。現在有許多大型網路商城也會跟廣告商合作,業主只要在商城上架商品,就有機會在聯播網廣告中看到上架的商品。

廣告的類型,除了純文字廣告、圖像廣告,也有 HTML5 廣告、影片廣告、Flash 廣告。基本上設計公司、多媒體公司、網路行銷公司,只要不是走純平面設計的,基本上都有這種製作廣告的業務內容。因為這種廣告也可以選擇投放到手機或平板上,所以用 Flash 製作的比例會降低,而且要是沒設定廣告受眾裝置,如果廣告到達頁面是Flash,那廣告費基本上是成效不大的。至於哪一天 Flash 廣告會完全消失? 等 Google Adwords 哪一天突然宣布不支援 Flash 廣告,大概才有機會吧! 連 IE6, IE7 現在都還陰魂不散,論消失哪輪到 Flash 呢?

3.Flash 可用於單機程式與行動裝置 APP 開發
前面不是才說行動裝置不支援 Flash 嗎? 事實上 Adobe 有發展一個 AIR 技術,只要使用者在電腦或行動裝置上安裝 Adobe AIR ,就有機會在電腦或 Android 裝置上,把用 Flash / Flash Builder / Flex 製作的內容,當成應用程式來使用。

除了 Adobe AIR for android,也有 Adobe AIR for iOS,但是論執行效能、相容性,還有維護與開發的成本,可能還不如直接用原生的開發工具或程式碼來撰寫。通常是那種有許多 Flash 豐功偉業(歷史包袱)的公司或團隊,想要在行動裝置時代無縫接軌才會想這樣做。

4.活動網站或宣傳製作會用到 Flash
現在網頁設計,還有三種領域常常會用 Flash :

其一是活動網站,活動網站的概念就是要讓人印象深刻與創造話題性,畫面有多炫就有多炫,互動性有多強就多強,最常見的線上活動網站功能,比如線上投票、答題抽獎、轉盤抽獎、連連看小遊戲、大家來找碴遊戲抽獎、刮刮樂抽獎、撲克牌遊戲、心理測驗…。常在上網的人,應該都有玩過海尼根的活動網站吧?

技術上來說,辦活動最怕的就是參賽者作弊,Flash 如果寫得好,是比較難作弊的,頂多用 tab 鍵來玩大家來找碴,或是用軟體監看 flash 執行時會傳輸或下載什麼資料,就算把 swf 檔抓下來反編譯,常常也不容易看出什麼東西。


但如果同樣的東西用 HTML5 或是 Java Script 來做,要作弊就方便了,有心人士可以看到所有的前端原始碼,用連 ... 繼續閱讀⇢

這篇不講 coding 技巧,不講用 SASS 要怎麼寫,不講 Bootstrap 要怎麼用,不講各種 framework 怎樣達成 RWD 的原理。只是一份講行動版網站與做一般網站有何差異的概覽。


看不到資料的話請點此 行動版網頁不就是把網頁縮小而已嗎? //Speaker Deck

本簡報適合瀏覽對象:
– 覺得行動版網頁只是把網頁縮小而已,沒什麼的人
– 為了學 RWD 還花錢跑去上課的人
– 不知道設計行動版網站有什麼眉角的初學者
– 被指派做行動版網站,不知從何開始的菜鳥美工

本文摘要:
RWD(Responsive Web Design)技術概論與行動網頁設計注意事項
– 基本心法1 – 流動布局

內的設定
– 判斷使用者
– 基本心法2 –Media Query
– Media Query & Media Type
– Media Query – device-pixel-ratio
– 掌握解析度-慎選 Breakpoint
– Table 如何 RWD
– 選單如何 RWD
– 行動裝置上的網頁動畫
– 圖片也要RWD
– 圖示也要RWD
– 嵌入多媒體也要 RWD
– 設定Flash替代內容
– 表單準備好了嗎?
– 按鈕準備好了嗎?
– 網頁原本用的Plugins準備好了嗎?
– 文書人員上資料時要小心
– 測試工具

以現實來說,
企業主真的有在乎他的客戶會用手機來看他們的網站嗎?
設計理念什麼的都是 bullshit,
只願意花30元吃滷肉飯的客人,還要講求健康純天然、服務品質、賓至如歸?

以大局來說,
東西有多難做什麼的沒人會care,就一句話,做不做得出來?... 繼續閱讀⇢