客戶希望省下重新開發的成本。
以前用 Flash 做好的數位內容還在,
現在卻很難繼續播放。
如果內容仍然適用,
我們能不能先把播放這件事解決,
讓客戶重新觀看自己的數位內容,
保留過去的投入?
這個需求,讓我做了一套叫 FlashBack 的播放器。
也讓我重新思考,
AI 時代的能力要怎麼組合,
以及設計在這個過程裡,
為什麼仍然必要。
一、AI 時代的能力重構
把舊內容接回使用情境
Flash 留下來的內容,
有動畫,也有互動程式。
SWF 是當年常見的播放檔案,
裡面可能包含畫面、按鈕、遊戲邏輯,
也可能需要另外載入圖片與音效。
Adobe 在 2020 年底停止支援 Flash Player。
播放器退場後,原本做好的內容也跟著失去入口。
對客戶來說,全部重新開發,
就代表要再投入一次時間與預算。
背景資料:
Adobe Flash 介紹
這次的出發點很實際:
先確認哪些舊內容可以恢復播放,
把需要重做的範圍釐清。
現在透過 Vibe Coding,
也就是用自然語言與 AI 協作寫程式、反覆調整,
我可以把這個需求拆成具體的操作,
逐步做出能測試的工具。
FlashBack 使用的播放核心,
是 Ruffle 0.6.0。
Ruffle 是開源的 Flash 模擬器,
提供執行舊 Flash 內容的技術基礎。
我們在這個基礎上,
補上符合使用情境的操作。
播放核心:
Ruffle 介紹
把 SWF 拖進視窗,
播放器會讀取原本的舞台尺寸,
自動調整視窗;
螢幕放不下時,等比例縮小。
切換全螢幕,也保留原本的比例。
舊專案如果是一整包資料夾,
就連同圖片、音效與其他 SWF,
一起開啟,
保留檔案之間的相對位置。
這樣才能處理「主程式開了,素材卻不見了」的問題。
展示使用還需要更少的人工操作。
我們加入指定專案、自動播放,
以及全螢幕設定,
也提供登入系統後啟動播放器的選項。
目標是讓展示電腦登入後,
可以接續開啟指定內容,減少每天重複設定的步驟。
目前播放與尺寸調整已完成驗證,
重新啟動播放器後的自動播放與全螢幕也已測試。
登入自動啟動與正式展示機部署,
仍需要配合簽章及實際電腦完成驗證。
這次讓我很有感的是,
把需求拆得夠清楚,
再用實際作品反覆測試,
AI 已經能把許多具體操作做得很到位。
我需要做的判斷也隨之改變。
哪些既有技術可以使用?
客戶每天會怎麼操作?
哪些地方需要補上,才算解決問題?
這次實作讓我感受到能力重構:
過去累積的專案經驗與設計判斷,
可以和 AI 的開發能力組合,
更直接地回應眼前的需求。
解決播放問題後,
我也把以前自己做的遊戲拿出來執行。
看到熟悉的畫面重新動起來,
按鈕又能操作,覺得有點懷念。
那些曾經花時間做出的東西,
終於又有機會被打開。
二、AI 時代的設計介入
讓工具好看,也好用
程式可以執行後,接下來就是介面。
如果讓 AI 自動產生一版,
常會得到一個看起來很完整的畫面:
有標語、有功能說明、有裝飾,
還有各種像是很貼心的提示。
這很像和 AI 聊天時的感覺。
每一段看起來都有道理,
全部放在一起,卻可能給了太多東西。
以 FlashBack 來說,
使用者打開播放器,最先需要知道的,
就是檔案要放哪裡、接下來怎麼播放。
因此,我用幾個版本慢慢調整,
把畫面裡真正需要的東西留下來。
第一階段:先讓作品能播放
初版使用米白底與紫色圖示,
拖放區放在畫面中央。
它把「拖入 SWF,
自動配合尺寸播放」做出來,
讓我先確認核心流程是否成立。
畫面裡同時有歡迎標語、作品說明、
拖放提示與播放特色。
這些內容都有用途,
但資訊的重要程度還沒有完全拉開。

第二階段:建立識別,整理訊息
接著換成深色介面,
加入冰藍與紫色的雙箭頭 Logo,
讓 FlashBack 有比較清楚的品牌樣子。
不過,科技感增加了,
英文標語、HOME 編號,
裝飾線與功能介紹,
也一起出現在首頁。
這時我開始逐項看:
它有沒有幫助使用者理解或操作?
放在這個位置,
值得佔用這麼多注意力嗎?

第三階段:刪減文案,整理操作的位置
我拿掉英文標語、HOME 編號,
以及裝飾線,
也移除多餘的回憶提示,
把主文案明確寫成 Flash 作品。
檔案操作集中在上方,
播放控制移到下方。
「開啟 SWF 檔案」、「開啟專案資料夾」、
「設定素材資料夾」使用完整名稱,
讓不同用途更容易辨認。
拖放區原本重疊的框線也收成一層,
補充提示則與最近開啟放在同一列。
每一項調整,都在整理畫面的順序:
使用者先開啟內容,再操作播放;
需要補充說明時,才去看提示。

第四階段:強化入口,收斂比例
最後把「開啟檔案」做得更醒目,
搭配雙色箭頭,
讓主要操作容易被看見。
Logo 拿掉底板,
首頁雙箭頭縮到與 F 同高,
再調整對齊與間距。
這些變化很小,
卻讓品牌、說明與操作入口之間,
有更清楚的主次關係。

回頭看這四個階段,
設計介入一直在處理兩件事:
怎麼讓畫面有一致的樣子,
以及怎麼讓使用者知道下一步。
AI 可以很快產生一個版本,
而我仍然要根據使用情境,
決定哪些資訊保留、哪些可以刪除,
以及每個操作應該放在哪裡。
當更多寫程式的工作可以交給 AI,
我們就該多用一點心在設計上。
功能做出來以後,
字句怎麼寫、資訊怎麼排,
操作怎麼找,
都會影響這個工具是否好看、好用。
像 FlashBack 這樣的小播放器,
也值得把這些細節一項一項整理好。
讓過去的投入,繼續有用
FlashBack 讓我把一個客戶需求,
從保留舊內容的想法,推進成可以測試的播放器。
設計則讓這個播放器,
逐步有了更清楚的介面與操作順序。
當然,舊專案仍要逐一測試。
缺少的素材、已停用的遠端服務,
或尚未支援的 Flash 功能,
都可能影響播放;
恢復播放,
也不等於把作品轉換成新的網站。
相容性資料:https://ruffle.rs/compatibility
對我來說,
AI 時代很值得期待的一件事,
是過去累積的經驗,
有了新的實作方式。
我們可以重新組合手上的能力與技術,
讓客戶已有的內容繼續被使用,
也讓自己做過的作品,再次被看見。



我的舊遊戲播放示範
以下是我以前製作的七個遊戲,重新執行後錄下的畫面。影片只保留遊戲內容,原片沒有音軌。