從 Flash 遷移到 HTML、CSS 和 JavaScript

早在 2000 年代，使用 Flash 構建的網站已經司空見慣。 通過查看網站的源代碼，您通常會看到很少的 HTML 和嵌入的 SWF 文件。 這意味著幾件事。 首先，瀏覽器本身不支持 Flash，所以你必須下載 Flash 插件。 瀏覽器發現很難進入 SWF 來閱讀內容。 除其他外，這對 SEO 和可訪問性產生了不利影響。

2007年，iPhone發布。 它不支持 Flash。 2015 年，谷歌將其所有 YouTube 視頻都遷移到了 HTML5。 2017 年 7 月，Adobe 正式宣布將在 2020 年前停止對 Flash 的開發。人們使用 Flash 是因為它可以做 HTML、CSS 和 JavaScript 在當時做不了的事情。 令人難以置信的是，Web 標準已經走了多遠（以及即將發生的事情）。

我們今天可以做很多以前只有 Flash 才能做到的事情。 不僅如此，我們還可以以一種更易於訪問和更高效的方式來實現它。 我將介紹 Flash 可以做的一些開創性的事情，以及我們今天如何去做這些事情。

免責聲明：我喜歡 Flash，它永遠在我心中佔有一席之地，但至少對我來說，它的時代已經過去了。 以防萬一您想知道：仍然有很多接口和引擎在 Flash 中運行，尤其是對於遊戲而言，本文解決了其中一些非常相關的問題。

視頻

Flash 預示的一大優點是視頻，早在 2002 年就提供了基本支持。直到 2009 年， <video>標籤才在 Chrome、Safari 和 Firefox 中引入。 此外，Internet Explorer (IE) 8 不支持<video>標籤，直到 2011 年 IE 9 發佈時才獲得支持。

Flash 將使用<object>標記，如下所示：

 <object class codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0" width="320" height="400"> <param name="movie" value="filename.swf"> <param name="quality" value="high"> <param name="play" value="true"> <param name="LOOP" value="false"> <embed src="video-filename.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="https://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed> </object>

不是最好的代碼，但它確實有效。

現在，我們可以簡單地編寫<video src="filename.mp4" /> ，儘管重要的是要了解跨瀏覽器的不同視頻格式，最流行的是 MP4、Ogg 和 WebM。 更進一步，不僅可以支持<video>標籤，還可以提供備用和有用的替代方案：

 <video width="320" height="400"> <source src="filename.mp4" type="video/mp4" /> <source src="filename.webm" type="video/webm" /> <source src="filename.ogv" type="video/ogg" /> <!-- Flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=filename.mp4" width="320" height="400"> <param name="movie" value="flash-player.swf?videoUrl=filename.mp4" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="transparent" /> <param name="flashvars" value="controlbar=over&image=placeholder.jpg&file=flash-player.swf?videoUrl=filename.mp4" /> </object> <!-- Text Fallback --> <p>No video support found. Please download the video below, or upgrade your browser: https://browsehappy.com/</p> </video> <ul> <li><a href="linktomovie.mp4">MP4 format</a></li> <li><a href="linktomovie.ogv">Ogg format</a></li> <li><a href="linktomovie.webm">WebM format</a></li> </ul>

視頻背景

由於 YouTube 使用<video>標籤並有 API，因此可以創建全屏背景視頻。 以以下 YouTube 視頻鏈接代碼為例：

 https://www.youtube.com/embed/iMhq63PX8cA?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1

使用不同的參數可以改變視頻的行為方式。

 controls=0 Hides the controls. showinfo=0 Hides extra information. rel=0 Hides related content. autoplay=1 Auto plays the video when the site is loaded. loop=1 Loops the video. mute=1 Mutes the sound.

如需完整列表，請查看 IFrame Player API。

使用 CSS，我們可以將視頻設置為固定位置並填充屏幕。

 .video { background: #000; position: fixed; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }

通過使用媒體查詢，我們可以將視頻設置為居中，並有助於保持正確的縱橫比。

 @media (min-aspect-ratio: 16/9) { .video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video { width: 300%; left: -100%; } }

下面是一個例子，Smashing Magazine 先生本人發表了演講：

互動和遊戲

Flash 擅長的另一件事是交互和遊戲。 流行的網站 Miniclip 成立於 2001 年，託管了各種 Flash 遊戲。 2008 年，它的價值超過 9 億英鎊，至今仍在使用。

只是一個反射器

JUST A REFLEKTOR 是一個互動音樂視頻，可與 Flash 相媲美，甚至超越 Flash 的功能。 通過使用各種網絡技術，現在可以使用移動設備與視頻進行交互，也可以在某一時刻使用您的網絡攝像頭，讓您自己真正出現在音樂視頻中！

立方體大滿貫

今天網上有一些很棒的基於網絡的 Chrome 實驗，比如 Cube Slam。 Cube Slam 是一款利用 WebRTC（一種開放式網絡技術）的遊戲，可讓您在瀏覽器中進行視頻聊天和玩遊戲。 儘管 Flash 被大量用於視頻聊天，但與 WebRTC 相比，它有許多缺點：它依賴於 Flash 插件，需要媒體服務器，並且存在各種安全隱患和性能差。

HTML5 遊戲引擎

有許多 HTML5 和 JavaScript 遊戲引擎。 下一個示例使用canvas和WebGL 。 WebGL（Web 圖形庫）是一種內置於 JavaScript 的 API，它允許在<canvas>標記內實現交互式 2D 和 3D 圖形。

正如 Good Boy Digital 自己關於該項目的帖子中提到的（示例的創建者）：

“Star Wars Arcade 確實突破了 HTML5 和 WebGL 技術的可能性。這允許創建一個可以在桌面和移動瀏覽器上無縫運行的單一構建，而無需下載應用程序；它能夠提供的優勢在所有設備上提供“類似應用”的體驗，因此任何人都可以立即享受它。無需密碼，無需應用商店，只需點擊 URL 即可玩！”

— goodboy digital，星球大戰街機案例研究

我特別喜歡這一點：“只需點擊 URL 並播放！” 我對網絡最早的“哇”記憶之一是在 1999 年擁有自己的網站，並且能夠將該 URL 鍵入任何連接到網絡的計算機並查看它。 在我看來，這實際上是可能的（並且直到今天仍然讓我感到驚訝！）。

瀏覽器支持

在 Flash 中構建某些東西——尤其是遊戲，由於額外的複雜性——的優勢之一是瀏覽器支持，這一點在今天仍然很重要。 這些天瀏覽器支持一般都很好，Can I Use 可以幫助我們快速了解瀏覽器對特定規範的支持狀態。 但是，仍然存在可能導致問題的差異。 因此，如果您只支持安裝了您正在使用的 Flash 插件的瀏覽器，那麼您可能不會遇到任何跨瀏覽器問題。

排版

Flash 最初是作為動畫工具設計的。 因此，它對排版有各種限制。

Flash 有一個像素網格系統。 如果排版放置在X:100.3 :100.7的網格上，因此與像素網格不對齊，它看起來會很模糊。

結果，我發現像素字體很有用，因為它們位於網格上並且保持清晰。 這裡的另一個限制是，如果您使用 8 像素字體但將其設置為 10 像素，它將與網格不對齊，並且再次變得模糊。

幸運的是，今天在 HTML 和 CSS 中，我們有許多工具可以幫助我們。 我們可以將字體設置為以px （像素）為單位的絕對單位，或者，現在更常見的是，使用ems和rems來輔助響應式網頁設計（稍後我將對此進行更多介紹）。

Flash 和排版的另一個問題是字體。 如果設備上沒有可用的字體，則會提供備用字體。 要在 Flash 中避免這種情況，您可以將字體嵌入到.swf文件中。 但是，這樣做會增加文件大小，從而增加 SWF 下載和顯示所需的時間。

話雖如此，Flash 可以實現的是可擴展的 Inman Flash Replacement (sIFR)。 sIFR 允許將 HTML 文本替換為 Flash。 在此之前，為了使用自定義字體，我們使用了圖像。 但是，使用圖像不允許選擇文本，這意味著您必須手動創建圖像。 從 sIFR 開始，開發人員提出了 Cufon。 Cufon 通過使用 SVG 和 VML 版本的字體來避免使用 Flash。 它比 sIFR 更快，並且不需要 Flash 插件； 但是，同樣，使用這種技術，不可能選擇文本。

今天，我們有了 CSS @font-face 規則和許多可用的標準網絡字體：

• 谷歌字體
• 打字機
• 字體松鼠

在 Chrome 和 Firefox（希望很快，Safari）中，我們在 CSS 中有font-display 。 如果您使用自定義字體，默認情況下瀏覽器將等待獲取自定義字體。 如果無法獲取自定義字體，則會使用備用字體（速度因瀏覽器而異，但通常為 3 秒）。 這被稱為一閃而過的不可見文本（或 FOIT）。 為了改善這種情況，我們可以使用以下方法：

 @font-face { font-display: swap; }

通過使用swap ，我們將立即使用備用字體看到文本。 加載自定義字體後，瀏覽器將為其交換備份。 這樣，用戶就可以在內容可用時立即閱讀。

動畫

Flash 做得非常好的一件事就是補間。 補間用於動畫元素。 在 Flash 中，您可以在關鍵幀中創建一個元素，沿時間軸複製該關鍵幀，然後添加補間。

使用 HTML 和 CSS，我們可以使用@keyframes 、 transform和animation應用相同的動畫。

 <div class="box"></div>

 .box { width: 100px; height: 100px; background-color: #333; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(200px); } } div { animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-direction: alternate; } 

使用 Chrome 開發者工具，我們可以通過Chrome Dev Tools → Cmd + Shift + P → Animation 。

也可以調試在處理動畫時可能出現的潛在性能問題。 在 Chrome 開發者工具中，有一個“性能”標籤。 通過單擊它，然後單擊“記錄”圓圈圖標，我們可以看到一系列有用的信息。 當我構建 Mind 的 2012-13 年度報告時，這種技術對我有很大幫助，特別是網站的一部分，其中有一張帶有動畫圓圈的地圖，顯示了 Mind 商店的位置。 最初，地圖部分是在開始時加載的，這會導致重繪問題。 使用“性能”選項卡，我能夠識別和更新它，因此地圖只有在它在視圖中時才開始動畫。

矢量圖形

仔細考慮文件大小，Web 已經受益，並且仍然受益匪淺。 早在 2000 年代初期，人們主要在台式電腦上瀏覽網頁，使用慢速撥號調製解調器。 加載一個簡單的圖像可能需要幾秒鐘甚至幾分鐘的時間。 為了解決這個問題，Flash 大量使用矢量圖形。 在適當的情況下，使用矢量圖而不是 JPEG 或 GIF 圖像，可以顯著減小文件大小，從而在 Web 上更快地加載。

在過去的幾年裡，尤其感謝 Sara Soueidan，可伸縮矢量圖形 (SVG) 在網絡上變得越來越普遍。 SVG 是一種基於 XML 的標記，使我們能夠為 Web 創建矢量圖形。 它與動畫效果非常好，我有幸建立了一些利用它的網站：Mind report 網站（前面提到過）和英格蘭有多乾淨？ 薩拉在推特上提到的！ 謝謝薩拉！

響應式網頁設計

當今在 Flash 中構建網站的主要缺陷之一是缺乏媒體查詢。 如今，移動設備和平板電腦的使用量已經超過了台式機。 為了創造最佳體驗，我們必須創建一個可在所有這些設備上訪問的網站。 在許多設備上，Flash 根本不會加載，即使加載了，它也很可能會超出視口的寬度或縮放並無法使用。

使用媒體查詢，我們可以創建響應內容的佈局。 這是一個例子：

 <div class="someContent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est excepturi enim id ratione blanditiis voluptate dolore necessitatibus culpa maxime eius assumenda eveniet dolores odit sunt repellat, rerum amet delectus vel.</p> </div>

 .someContent { color: green; } @media screen and (min-width: 400px) { .someContent { color: yellow; } } @media screen and (min-width: 600px) { .someContent { color: red; } } 

ActionScript 與 JavaScript

ActionScript 在 Flash 中使用，因此與前面提到的 SWF 文件有相同的缺陷，因為它需要 Flash 插件。 另一方面，JavaScript 在所有現代瀏覽器中都很容易使用。

讓我們看一個在兩者中設置變量及其差異的示例：

 var x:Number = 42;

 var x = 42;

使用 ActionScript，我們聲明變量是一個數字。 如果變量被分配了其他任何東西，它將得到一個錯誤。 JavaScript 是鬆散類型的，這意味著我們可以將變量分配為其他內容，例如字符串：

 var x = '42';

在 JavaScript 中，如果我們想檢查它是否是一個數字，我們可以使用typeof(x); ，這將輸出“數字”。 另一種選擇是創建一個function並使用isNaN來檢測它是否“不是數字”：

 function isNumber(value) { if (isNaN(value)) { return value + ' is not a number.'; } return value + ' is a number.'; } console.log(isNumber(42)); // "42 is a number." console.log(isNumber('forty two')); // "forty two is not a number."

合作

借助 HTML、CSS 和 JavaScript（以及許多其他編碼語言），Git 和 GitHub 使協作變得非常容易。 例如，如果我想通過 GitHub 編輯 Smashing Magazine 的“作者模板”的 HTML，我可以單擊“Fork”按鈕。 這將以我自己的名字創建文件的一個版本（也稱為存儲庫）。 然後我可以進行任何我喜歡的修改並提交拉取請求。 這將使 Smashing Magazine 的所有者能夠審查我的拉取請求並接受或拒絕它。 一旦被接受，代碼將進入主存儲庫。

以這種方式工作有很多重要的原因： 你總是有你的工作的備份； 您可以恢復到以前的工作版本，協作變得非常容易。 有人可能正在處理網站的某個部分，或者 CSS 或 JavaScript，當每個團隊成員完成後，您可以查看更改並根據需要將其拉入。

如果我們對 Flash 進行同樣的嘗試，那麼每次都必須保存和發送一個.fla文件會變得更加困難。 如果多人在同一個.fla上工作，事情可能會變得非常混亂。 使用 HTML、CSS 和 JavaScript，可以對代碼進行“比較”，這使我們能夠比較和審查代碼。 我們甚至可以選擇某些代碼塊，將它們引入，或對它們進行評論以供進一步審查和工作。

結論

Flash 是我開始構建網站的原因之一。 它在許多領域開創了先河，這導致人們用它創造了驚人的東西。 多年來，它極大地推動了網絡發展。 不過，Adobe 正式宣布放棄對 Flash 的支持確實引起了擔憂。 如果數百萬使用 Flash 的網站丟失，那將是巨大的恥辱。 有一個開源 Flash 和 Shockwave 的請願書。 我真希望我們不會永遠失去它。 我們有過一些很棒的——也很奇怪的——時代。 我會給你留下這個我提到的“奇怪”的經典例子：

這是歌詞，如果你想跟著唱。