Переход от 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. Благодаря использованию разных веб-технологий сейчас можно взаимодействовать с видео через мобильное устройство. А также использовать веб-камеру, чтобы самому появиться в музыкальном видео!

Переход от Flash к HTML, CSS и JavaScript Веб-сайт Just A Reflektor использует современные веб-технологии для создания интерактивного музыкального видео.

CUBE SLAM

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

Переход от Flash к HTML, CSS и JavaScript 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.

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

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

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

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

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

Переход от Flash к HTML, CSS и JavaScript На веб-сайте годового отчета Mind были использованы SVG и анимация, чтобы создать интересный метод выведения статистики за год.
Переход от Flash к HTML, CSS и JavaScript На веб-сайте 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. Надеюсь, мы не потеряем его навсегда.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *