从flash移到html、css和javascript

在本世纪初，看到用flash构建的网站是司空见惯的事。通过查看网站的源代码，您通常会看到很少的html和嵌入的swf文件。这意味着几件事。首先，浏览器并不是原生支持flash，所以您必须下载flash插件。浏览器发现进入swf很难读取内容。除其他外，这对seo和可访问性产生了不利影响。

2007，iphone被释放。它不支持flash。2015，谷歌将其所有youtube视频移至html 5。2017年7月，adobe正式宣布，它将停止2020台flash的工作。人们使用flash是因为它可以做html、css和javascript无法在当时做的事情。看到网络标准已经有多远，真是难以置信(还有什么即将来临)。

我们今天可以做很多事情，以前只有flash才能做到。不仅如此，我们可以用更容易访问和更容易理解的方式来实现它。我将回顾一下flash所能做的一些开创性的事情，以及我们今天如何做这些事情。

视频

flash预示着的伟大事物之一就是视频提供基本支持，早于2002。直到2009才是介绍了标签在chrome、safari和火狐浏览器中。此外，internet explorer(Ie)8不支持标签，直到2011，当ie 9被释放时，它得到了支持。

flash将使用标签，就像：

不是最好的代码但是它确实有效。

现在，我们可以简单地写尽管要了解不同浏览器之间的不同视频格式非常重要，但是最受欢迎是mp4，Ogg和WebM。更进一步，我们不仅可以支持标签，但也提供了一些有用的替代方案：

视频背景

因为youtube使用了标签和有一个api，它可以创建一个全屏背景视频。请使用以下youtube视频链接代码，例如：

使用不同的参数可以改变视频的行为方式。

对于完整列表，请检查iframe播放器api。

使用css，我们可以设置视频固定在位置和填充屏幕。

并且利用媒体查询，可以将视频设置为中心，并且能够保持正确的长宽比。

下面就是这个例子，“粉碎杂志”先生自己发表了一篇演讲：

互动与博弈

flash擅长的另一件事就是互动和游戏。流行网站迷你唇成立于2001，并举办了一系列广泛的flash游戏。2008，它的价值超过九亿英镑，今天仍在进行。

只是个小女孩

只是个小女孩是一个交互式音乐视频，它竞争甚至超过了flash的能力。随着各种网络技术的使用，现在可以使用移动设备与视频进行交互，并在某一时刻使用你的网络摄像头，这样你就可以亲自出现在音乐视频中了！

网站只是个小女孩利用现代网络技术，创建交互式音乐视频。

立方体大满贯

今天网上有一些非常棒的基于web的chrome实验，比如立方体大满贯。CUBE Slam是一种利用WebRTC(一种开放的Web技术)的游戏，它允许你在浏览器中进行视频聊天和游戏。虽然Flash被大量用于视频聊天，但与WebRTC相比，它还有许多缺点：它依赖Flash插件，需要一个媒体服务器，它具有各种安全隐患，性能也很差。

立方体大满贯是一个基于web的chrome实验，它允许视频聊天在玩游戏时。

HTML 5游戏引擎

有很多html 5和javascript游戏引擎。这下一个例子利用和。WebGL(Web Graphics Library)是一个javascript构建的api，它允许交互式2d和3d图形在标签。

正如在“好男孩数字”自己关于项目的帖子中提到的(例子的创建者)：

“星球大战街机”真的推动了html 5和WebGL技术可能实现的范围。这样就可以创建一个可以在桌面和移动浏览器上无缝运行的版本，而无需下载应用程序；它的优点是能够在所有设备上提供类似“应用程序”的体验，这样任何人都可以立即享受它。没有密码，没有app商店，只是打了网址然后玩！

-GoodBoy数字星球大战街机案例研究

我特别喜欢这一点：“只要击中了网址就可以玩了！”我最早的“哇”记忆中的一次网络记忆是我的自己的网站1999，能够将该url键入到任何连接到web的计算机上，并查看它。我觉得这真的是可能的(今天我仍然让我感到惊奇)。

浏览器支持

建造某物的好处之一-尤其是游戏，因为它的复杂性-flash仍然是今天的一个重要内容，就是浏览器支持。浏览器支持通常都很好，而且我能用吗？可以帮助我们快速了解特定规范中浏览器支持的状态。然而，仍然存在着一些可能导致问题的差异。因此，如果您只支持使用Flash插件安装的浏览器，那么您很可能不会遇到任何跨浏览器问题。

排版

flash最初是作为动画工具设计的。因此，它在排版方面有各种局限性。

flash有一个像素网格系统。如果排版在网格上放置因此，由于与像素网格的距离不一致，它看起来会模糊。

因此，我发现像素字体是有用的，因为它们坐在网格上，并且保持着松脆的状态。这里的另一个限制是，如果你使用一个8像素的字体，但将它设置为10个像素，它就会偏离网格的排列，再次被模糊。

值得庆幸的是，今天在html和css中，我们有很多工具来帮助我们。我们可以将字体设置为一个绝对单元(像素)或更常见的这些天，使用和帮助响应的网页设计(稍后我将进一步介绍)。

flash和排版的另一个问题是字体。如果设备上没有字体，则会提供回退字体。若要在flash中绕过此操作，您可以将字体嵌入到档案。但是，通过这样做，您添加了文件大小，从而增加swf下载和出现的时间。

话虽如此，使用Flash的可能是可伸缩的InmanFlash替换(Sifr)，sifr允许用Flash替换HTML文本。在此之前，为了使用定制字体，我们使用了图像。但是，使用图像不允许选择文本，这意味着您必须手动创建图像。从sifr开始，开发商们提出了CUFón。CUFón使用svg和VML版本的字体避免使用flash。它比sifr更快，不需要Flash插件；但是，同样地，使用这种技术，不可能选择文本。

今天，我们有了css@字体规则和一系列标准web字体：

谷歌字体

Typekit

字体松鼠

在chrome和firefox(以及希望很快的safari)中，我们已经拥有了在css中。如果您正在使用自定义字体，默认情况下浏览器将等待获得自定义字体。如果无法获得自定义字体，它将使用备份字体(不同浏览器的速度不同，但通常是3秒)。这是一种不可见文字的闪光(或Foit)。为了改进此场景，我们可以使用以下内容：

使用我们将立即使用备份字体来看到文本。当加载自定义字体时，浏览器将为它交换备份。这样，用户就可以在可用时立即读取内容。

动画

flash做得很好的一个东西就是tweening。tweening用于动画元素。在flash中，您可以在一个Keyframe中创建一个元素，复制在时间线上的重复，然后添加一个子元素。

使用html和css，我们可以使用相同的动画使用，和。

使用chrome开发工具，我们可以通过访问来检查和调整动画。n.CMD+移位+Pn.。

一个示例显示chrome开发工具的“性能”选项卡。

同时也可以调试在处理动画时可能出现的潜在性能问题。在chrome开发工具中，有一个“性能”选项卡。通过点击这个，然后“记录”圆圈图标，我们可以看到一系列有用的信息。当我建立起思想的时候，这种技巧帮助了我2012-13年度报告尤其是网站上有一个动画圈的地图显示了心灵商店的位置。最初，映射部分在开始时加载，从而导致重新绘制问题。使用“性能”选项卡，我能够识别和更新这个选项，所以地图只有在它出现时才开始动画。

矢量图形学

网络已经受益，而且仍然可以极大地受益于仔细考虑文件大小。早在2000年代初，网络大多被看在桌面电脑上，而拨号调制解调器则是慢速的。一个简单的图像可以花几秒钟甚至几分钟来加载。为了帮助这个，flash非常使用矢量图形。使用矢量图形，在适当的时候，代替jpeg或gif图像，大大减少了文件大小，从而更快地加载到web上。

过去几年，尤其是感谢sara Soueidan可扩展矢量图形(SVGs)在网络上越来越普及。svg是基于xml的标记，可以为web创建矢量图图形。它非常适合动画，而且我很高兴地构建了一些网站，利用这个：心灵报告网站(以前提到)和英国是多么干净？莎拉在推特上提到过的！谢谢莎拉！

心灵年度报告网站使用了中的和动画来创建一个有趣的方式展示他们的年度统计数据。

|||英国是多么干净？网站以插图为基础。SVGs和css动画有助于使插图看起来更加明快，并且文件大小保持在最低限度。

响应性web设计

今天flash网站构建的主要缺点之一就是缺乏媒体查询。如今，移动和平板电脑的使用率已经超过桌面。井然有序创造最佳体验我们必须创建一个网站，在所有这些设备上都可以访问。在许多设备上，Flash根本不会加载，即使加载了，它也很可能会破坏视口的宽度，或者缩放，并且无法使用。

使用媒体查询，我们可以创建一个响应内容的布局。下面是一个例子：

actionscript vs javascript

ActionScript在Flash中使用，因此与前面提到的SWF文件有相同的缺陷，因为它需要Flash插件。另一方面，javascript在所有现代浏览器中都是现成的。

让我们来看看一个例子，即在两者之间设置变量和它们的差异：

使用actionscript，我们声明变量是一个数字。如果变量被分配给其他任何东西，那么它就会得到一个错误。javascript是松散类型的，这意味着我们可以将变量分配为其他一些，比如字符串：

在javascript中，如果我们想要检查它是一个数字我们可以用而且这会输出“数字”。另一个选项是创建和使用要检测它是否“不是数字”：

协作

使用html、css和javascript(以及许多其他编码语言)，Git和GitHub使得协作变得非常轻松。例如，如果我想通过GitHub编辑shingingMagazine的“作者模板”的HTML，我可以单击“Fork”按钮。这将创建一个文件版本(也称为存储库)，根据我自己的名字。然后我可以做出任何修改，我喜欢并提交一个拉请求。这会让“粉碎杂志”的所有者能够审查我的请求并接受或拒绝它。一旦被接受，代码就会进入主存储库中。

以这种方式工作有很多很好的理由：工作总是有备份的；您可以恢复到以前的工作版本，协作变得非常容易。有人可能在网站的某个部分工作，或者在CSS或JavaScript上工作，当每个团队成员完成后，您可以查看这些更改并根据需要将它们拉进来。

如果我们尝试了同样的flash，那么要节省和发送一个每次都要写文件。如果多个人一起工作事情会变得很混乱。有了HTML、CSS和JavaScript，我们就可以对代码进行“区分”，这样我们就可以比较和检查代码了。我们甚至可以选择某些代码块，把它们带进来，或者对它们进行评论以供进一步的审查和工作。

结语

flash是我开始构建网站的原因之一。它在许多领域开创了它，这导致人们创造出惊人的东西。多年来，它推动了网络的前进。然而，adobe官方宣布放弃支持flash，这确实引起了人们的担忧。如果数百万网站使用flash丢失，那将是一个巨大的耻辱

了解更多知识，不妨关注一下我们的前端学习裙

也可关注我们的微信公众号了解更多

前端资讯，技巧资源，学习路线

学习资料，视频一切尽在DFG_LY