Переход от Flash к HTML, CSS и JavaScript

Еще в 2000-х годах сайты, созданные с использованием Flash, были привычным делом. Но браузеры не поддерживали Flash, поэтому приходилось загружать специальный плагин. Это оказывало негативное влияние на SEO.

В 2015 году Google перевел YouTube- видео на HTML5. В июле 2017 года компания Adobe официально объявила, что перестанет работать с Flash к 2020 году.

Я рассмотрю несколько приемов реализации, которые раньше можно было сделать только с помощью Flash, и то, как это нужно делать теперь.

Содержание

Видео

Одной из возможностей, которые предоставлял Flash, была поддержка видео. Только в 2009 году тег <video> был представлен в Chrome, Safari и Firefox. Internet Explorer (IE) стал поддерживать этот тег только с выходом IE 9 в 2011 году.

Flash использует тег <object>:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://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="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>

Не самый красивый код, но он работал.

Теперь мы можем просто написать <video src = «filename.mp4» />. Но при этом нужно использовать поддерживаемые форматы видео. Самыми популярными из них являются MP4, Ogg и WebM. Кроме этого можно реализовать резервные варианты:

<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%;
}
}

Вот пример, в котором реализованы эти концепции.

Посмотреть пример

Взаимодействие и игры

Еще одно предназначение Flash — это интерактивные игры. Популярный сайт Miniclip был запущен в 2001 году. На нем предлагались Flash-игры. В 2008 году он был оценен в 900 миллионов фунтов стерлингов, и данный ресурс функционирует до сих пор.

JUST A REFLEKTOR

JUST A REFLEKTOR — это интерактивное видео, которое конкурирует и даже превосходит возможности Flash. Благодаря использованию различных веб-технологий теперь можно взаимодействовать с видео через мобильное устройство. А также использовать веб-камеру, чтобы самому появиться в музыкальном видео!


Сайт Just A Reflektor использует современные веб-технологии для создания интерактивного музыкального видео.

CUBE SLAM

Cube Slam — это игра, в которой используется открытая веб-технология WebRTC, позволяющая общаться в чате и участвовать в игре через браузер. Раньше для видеочатов использовалась технология Flash. Но она имеет ряд недостатков по сравнению с WebRTC: нужен на Flash-плагин, доступ к медиасерверу, низкая производительность.


Cube Slam — это Chrome Experiment, который позволяет участвовать в видеочате во время игры.

Игровые движки HTML5

Существует ряд игровых движков, созданных на основе HTML5 и JavaScript. Например, WebGL (Web Graphics Library). Это API, встроенный в JavaScript, который позволяет создавать интерактивную 2D и 3D-графику в теге <canvas>.

«Star Wars Arcade расширяет границы HTML5 и WebGL. Они позволяют создать единую сборку, которая легко работает на стационарных и в мобильных браузерах без необходимости загружать приложение. Не нужно никаких паролей, никаких App Stores»

goodboy digital, Изучение опыта Star Wars Arcade

Поддержка браузерами

Одним из преимуществ создания игры с помощью технологии Flash является поддержка браузерами. Но по-прежнему существуют определенные разногласия, которые могут привести к проблемам.

Типографика

Изначально Flash разрабатывался как инструмент для создания анимации. Поэтому существовали определенные ограничения, связанные с типографикой.

Flash использовал систему пиксельных сеток. Если типографика была основана на сетке X:100.3 :100.7, и, если шрифты выравнивались по этой сетке, они выглядели размытыми.

Я обнаружил, что пиксельные шрифты нормально выравнивались по сетке, и, соответственно, выглядели четкими. Другое ограничение было связано с тем, что, если бы вы использовали 8-пиксельный шрифт, но установили для него размер 10 пикселей, он выбивался бы из сетки и выглядел размытым.

К счастью, сегодня в HTML и CSS мы можем установить размеры шрифтов как в абсолютных единицах px (пикселях), так и в ems и rems. Это упрощает реализацию адаптивного веб-дизайна.

Еще одна проблема, связанная с Flash и типографикой — шрифты. Если шрифт не был доступен на устройстве, предоставлялся резервный. Чтобы обойти это ограничение, можно встроить шрифт в .swf-файл. Но так вы добавляете в файл дополнительные данные. Это увеличивает его размер файла и время загрузки.

Следует упомянуть, что для Flash доступна такая технология, как Scalable Inman Flash Replacement (sIFR). sIFR позволяет менять HTML на Flash. До этого, чтобы применить пользовательские шрифты, использовались изображения. Но это делало невозможным выделение текста.

На основе sIFR разработчики придумали Cufón. Он позволял обойтись без Flash, используя SVG и VML-версию шрифта. Это было быстрее, чем sIFR, и не требовало установки Flash-плагина. Но с помощью этого метода невозможно было выделить текст.

Сегодня у нас есть правило CSS @font-face и множество стандартных веб-шрифтов:

  • Google Fonts
  • Typekit
  • Font Squirrel

В Chrome и Firefox поддерживается свойство CSS font-display. Если вы используете пользовательский шрифт, по умолчанию браузер будет ждать получения этого шрифта. Если браузер не может его получить, то будет использовать резервный шрифт.

Чтобы оптимизировать этот сценарий, можно использовать следующее:

@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 Developer Tools Можно проинспектировать и настроить анимацию, перейдя Chrome Dev Tools → CTRL + Shift + P→ Animation.


Пример, в котором открыта вкладка Chrome Developer Tool «Производительность».

Также можно устранить потенциальные проблемы производительности, которые могут возникнуть при работе с анимацией. В Chrome Developer Tools есть вкладка «Производительность». Перейдя на нее, а потом, кликнув по круглой иконке записи, можно увидеть целый ряд полезных показателей.

Векторная графика

Для интернета по-прежнему важна оценка размера файла изображения. Еще в начале 2000-х годов Сеть в рассматривалась в контексте стационарных компьютеров с медленным интернет-соединением. Для загрузки простого изображения могли потребоваться секунды, а то и минуты. Чтобы решить эту проблему, в рамках технологии Flash активно использовалась векторная графика. Ее применение вместо изображений в формате JPEG или GIF значительно уменьшает размер файла и сокращает время загрузки.

За последние несколько лет, масштабируемая векторная графика (SVG) стала более распространена в интернете. SVG — это разметка на основе XML, которая позволяет создавать векторную графику для веб. Она отлично работает с анимацией.


На сайте годового отчета Mind были использованы SVG и анимация, чтобы создать интересный способ отображения статистики за год.


На сайте How Clean Is England использовалось много иллюстраций. SVG и CSS-анимация помогли сделать их более четкими и сохранить минимальные размеры файлов.

Адаптивный веб-дизайн

Одной из главных проблем создания сайта на основе технологии 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. Поэтому для него требуется Flash- плагин. С другой стороны, JavaScript доступен во всех современных браузерах.

Рассмотрим пример установки переменной в этих языках программирования:

var x:Number = 42;
 
var x = 42;

С помощью ActionScript мы объявляем, что переменная является числом. Если переменной присваивается другой тип значения, то программа выдает ошибку. В JavaScript нет типов. Поэтому можно задать переменной другой тип данных, например строку:

var x = '42';

В JavaScript, чтобы проверить, является ли значение числом, можно использовать typeof(x), и получить “number”. Другой вариант заключается в том, чтобы создать функцию и использовать 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 HTML-код, я могу нажать кнопку “Fork”. Это создаст версию файлов (также известную как репозиторий) под моим собственным именем.

Затем я могу внести любые правки по своему усмотрению, и отправить запрос на их внедрение. Владелец Smashing Magazine сможет просмотреть мой запрос и принять или отклонить его. После того, как запрос будет одобрен, код войдет в основной репозиторий.

Существует целый ряд причин, чтобы работать таким образом. У вас всегда будет резервная копия проекта, можно вернуться к предыдущим версиям, а взаимодействие команды становится очень простым.

Если использовать Flash, то намного сложнее каждый раз сохранять и отправлять файл .fla. Если бы несколько человек работали над одним и тем же .fla-файлом, все могло бы стать запутанным. С помощью HTML, CSS и JavaScript можно создавать «модификации» кода, что позволяет просматривать и сравнивать его. Можно даже выбрать определенные фрагменты кода, перенести или прокомментировать их для дальнейшего рассмотрения и работы.

Заключение

Технология Flash была одной из причин, почему я начал создавать сайты. Она стала пионером во многих областях.

За эти годы веб-технологии сделали большой шаг вперед. Официальное объявление Adobe о прекращении поддержки Flash, тем не менее, вызывало целый ряд проблем. Непозволительно, чтобы миллионы сайтов, использующих Flash, были потеряны. Есть петиция с требованием открыть исходный код Flash и Shockwave. Надеюсь, мы не потеряем его навсегда.

Данная публикация представляет собой перевод статьи «Moving From Flash To HTML, CSS, And JavaScript» , подготовленной дружной командой проекта Интернет-технологии.ру