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

Еще в 2000-х годах было обычным делом видеть веб-сайты, созданные с использованием Flash. Просматривая исходный код веб-сайта, вы часто видите очень мало HTML и встроенный SWF-файл. Это означало несколько вещей. Во-первых, браузер изначально не поддерживал Flash, поэтому вам пришлось загрузить плагин Flash. Браузеры столкнулись с трудностями при входе в SWF для чтения контента. Среди прочего, это пагубно сказалось на SEO и доступности.

В 2007 году был выпущен iPhone. Он не поддерживал Flash. В 2015 году Google перевел все свои видео на YouTube на HTML5. В июле 2017 года Adobe официально объявила, что прекратит работу над Flash к 2020 году. Люди использовали Flash, потому что он мог делать то, что HTML, CSS и JavaScript не могли делать в то время. Невероятно видеть, как далеко продвинулись веб-стандарты (и что будет дальше).

Сегодня мы можем сделать многое из того, что раньше было возможно только с помощью 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%; } }

Вот собранный пример, в котором сам Mr. Smashing Magazine представляет доклад:

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

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

ПРОСТО РЕФЛЕКТОР

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

кубический удар

Сегодня в сети есть несколько фантастических веб-экспериментов Chrome, таких как Cube Slam. Cube Slam — это игра, в которой используется WebRTC (открытая веб-технология), позволяющая вам общаться в видеочате и играть в игры в браузере. Хотя Flash активно использовался для видеочатов, он имел ряд недостатков по сравнению с WebRTC: он зависел от плагина Flash, требовал медиа-сервера, имел различные последствия для безопасности и низкую производительность.

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

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

Как упоминалось в собственном сообщении Good Boy Digital о проекте (создатели примера):

«Star Wars Arcade действительно раздвигает границы возможного с помощью технологий HTML5 и WebGL. Это позволяет создать единую сборку, которая без проблем работает как в настольных, так и в мобильных браузерах, без необходимости загружать приложение. опыт «как приложение» на всех устройствах, так что каждый может наслаждаться им мгновенно. Никаких паролей, никаких магазинов приложений, просто нажмите URL-адрес и играйте!»

- goodboy digital, тематическое исследование Star Wars Arcade

Мне особенно нравится этот момент: «Просто нажмите на 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 (sIFR). sIFR позволял заменять текст HTML на Flash. До этого, чтобы использовать пользовательские шрифты, мы использовали изображения. Однако использование изображений не позволяло выделять текст, и это означало, что вам приходилось создавать изображения вручную. Переходя от sIFR, разработчики придумали Cufon. Cufon избегал использования Flash, используя версию шрифта SVG и VML. Это было быстрее, чем sIFR, и не требовало плагина Flash; но, опять же, с помощью этой техники было невозможно выделить текст.

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

• Гугл шрифты
• Типкит
• Шрифт Белка

В Chrome и Firefox (и, надеюсь, скоро в Safari) у нас есть font-display в CSS. Если вы используете пользовательский шрифт, по умолчанию браузер будет ждать его получения. Если он не может получить пользовательский шрифт, он будет использовать резервный шрифт (скорость зависит от браузера, но обычно это 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 Developer Tools есть вкладка «Производительность». Нажав на нее, а затем на значок круга «Запись», мы можем увидеть ряд полезной информации. Этот метод очень помог мне, когда я создавал годовой отчет Mind за 2012–2013 годы, особенно раздел веб-сайта, на котором есть карта с анимированными кругами, показывающими расположение магазинов Mind. Изначально раздел карты загружался при старте, что вызывало проблемы с перерисовкой. Используя вкладку «Производительность», я смог определить и обновить это, поэтому карта начала анимироваться только тогда, когда она была в поле зрения.

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

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

За последние несколько лет, и особенно благодаря Саре Суэйдан, масштабируемая векторная графика (SVG) становится все более и более распространенной в сети. SVG — это разметка на основе XML, которая позволяет нам создавать векторную графику для Интернета. Он очень хорошо работает с анимацией, и я имел удовольствие создать несколько веб-сайтов, которые используют это: веб-сайт Mind report (упомянутый ранее) и How Clean Is England? о чем Сара упомянула в Твиттере! Спасибо Сара!

Отзывчивый веб-дизайн

Одной из основных ошибок при создании веб-сайта на 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 чрезвычайно упрощают совместную работу. Например, если я хотел отредактировать HTML-код «Авторского шаблона» Smashing Magazine через GitHub, я мог нажать кнопку «Разветвить». Это создаст версию файлов (также известную как репозиторий) под моим именем. Затем я мог бы внести любые поправки, которые мне нравятся, и отправить запрос на включение. Это дало бы владельцу Smashing Magazine возможность просмотреть мой запрос на включение и принять или отклонить его. После принятия код попадет в основной репозиторий.

Есть ряд веских причин для такой работы: у вас всегда есть резервная копия вашей работы; вы можете вернуться к предыдущим версиям своей работы, и совместная работа станет очень простой. Кто-то может работать над одним разделом веб-сайта, над CSS или JavaScript, и когда каждый член команды закончит работу, вы сможете просмотреть изменения и внести их по мере необходимости.

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

Заключение

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

Вот слова, если хотите подпевать.