Life x Interaction
AI 實作與創作 —

用 AI 做一套 Flash 播放器:從能用,到好看又好用

從客戶希望保留舊 Flash 數位內容、減少重新開發成本的需求出發,用 AI 製作播放器,再以四階段介面演進,分享能力重構與設計介入的實作。

我以前製作的遊戲,在 FlashBack 中重新執行的實際畫面。

客戶希望省下重新開發的成本。
以前用 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,
自動配合尺寸播放」做出來,
讓我先確認核心流程是否成立。

畫面裡同時有歡迎標語、作品說明、
拖放提示與播放特色。
這些內容都有用途,
但資訊的重要程度還沒有完全拉開。

FlashBack 米白初版,置中的 SWF 拖放區、紫色圖示與上方播放工具列。
第一階段|米白初版:先建立 SWF 拖放與播放入口。

第二階段:建立識別,整理訊息

接著換成深色介面,
加入冰藍與紫色的雙箭頭 Logo,
讓 FlashBack 有比較清楚的品牌樣子。

不過,科技感增加了,
英文標語、HOME 編號,
裝飾線與功能介紹,
也一起出現在首頁。

這時我開始逐項看:
它有沒有幫助使用者理解或操作?
放在這個位置,
值得佔用這麼多注意力嗎?

FlashBack 深色品牌版,冰藍紫色雙箭頭 Logo、英文標語與功能說明。
第二階段|深色品牌版:建立識別,同時出現英文標語、編號與較多補充資訊。

第三階段:刪減文案,整理操作的位置

我拿掉英文標語、HOME 編號,
以及裝飾線,
也移除多餘的回憶提示,
把主文案明確寫成 Flash 作品。

檔案操作集中在上方,
播放控制移到下方。
「開啟 SWF 檔案」、「開啟專案資料夾」、
「設定素材資料夾」使用完整名稱,
讓不同用途更容易辨認。

拖放區原本重疊的框線也收成一層,
補充提示則與最近開啟放在同一列。

每一項調整,都在整理畫面的順序:
使用者先開啟內容,再操作播放;
需要補充說明時,才去看提示。

FlashBack 操作整合版,檔案操作集中上方、播放控制移到下方,拖放區保留單一外框。
第三階段|操作整合版:刪減文案與裝飾,檔案操作在上方、播放控制在下方。

第四階段:強化入口,收斂比例

最後把「開啟檔案」做得更醒目,
搭配雙色箭頭,
讓主要操作容易被看見。

Logo 拿掉底板,
首頁雙箭頭縮到與 F 同高,
再調整對齊與間距。

這些變化很小,
卻讓品牌、說明與操作入口之間,
有更清楚的主次關係。

FlashBack 目前介面,放大的開啟檔案入口、移除底板的 Logo 與對齊品牌字樣的雙箭頭。
第四階段|目前介面:放大開啟入口、移除 Logo 底板,收斂雙箭頭比例與對齊。

回頭看這四個階段,
設計介入一直在處理兩件事:
怎麼讓畫面有一致的樣子,
以及怎麼讓使用者知道下一步。

AI 可以很快產生一個版本,
而我仍然要根據使用情境,
決定哪些資訊保留、哪些可以刪除,
以及每個操作應該放在哪裡。

當更多寫程式的工作可以交給 AI,
我們就該多用一點心在設計上。

功能做出來以後,
字句怎麼寫、資訊怎麼排,
操作怎麼找,
都會影響這個工具是否好看、好用。

像 FlashBack 這樣的小播放器,
也值得把這些細節一項一項整理好。

讓過去的投入,繼續有用

FlashBack 讓我把一個客戶需求,
從保留舊內容的想法,推進成可以測試的播放器。
設計則讓這個播放器,
逐步有了更清楚的介面與操作順序。

當然,舊專案仍要逐一測試。
缺少的素材、已停用的遠端服務,
或尚未支援的 Flash 功能,
都可能影響播放;
恢復播放,
也不等於把作品轉換成新的網站。
相容性資料:https://ruffle.rs/compatibility

對我來說,
AI 時代很值得期待的一件事,
是過去累積的經驗,
有了新的實作方式。

我們可以重新組合手上的能力與技術,
讓客戶已有的內容繼續被使用,
也讓自己做過的作品,再次被看見。

我的舊遊戲播放示範

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

0:00
/0:28
0:00
/0:28
0:00
/0:31
0:00
/0:35
0:00
/0:14
0:00
/0:32
0:00
/0:59
Share this article
Lee Chih Min

Life with Interaction  --  Digital Creator. Design, Art, Game, Life and Interaction.

View articles

Read next