从 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 的请愿书。 我真希望我们不会永远失去它。 我们有过一些很棒的——也很奇怪的——时代。 我会给你留下这个我提到的“奇怪”的经典例子：

这是歌词，如果你想跟着唱。