С момента своего создания в 1996 году как Macromedia Flash 1.0 Flash фактически стал методом включения звуковых, видео и графических ресурсов в новые медиа. Тем не менее, с распространением различных цифровых устройств, Flash постепенно утратил позиции в пользу HTML5 и его растущей способности обрабатывать сложные анимации.
Хотя многие аниматоры все еще находят комфорт и знакомство в гибкой и настраиваемой среде Flash, сообщество разработчиков открытого исходного кода продолжает раздвигать границы того, что могут достичь независимые от браузера клиентские решения. Несмотря на то, что существует ряд платформ, которые начинают иметь адекватные наборы инструментов для работы с различными медиа-активами, в настоящее время CreateJS выглядит наиболее полным.
CreateJS не только служит фреймворком для JavaScript, в нем размещаются различные библиотеки и инструменты, но также выполняет фантастическую работу по облегчению тяжелой работы, обычно связанной с трудоемкой разработкой HTML5. Когда речь идет о сложном интерактивном контенте, CreateJS может быть мощным набором инструментов, который экономит вам больше, чем одну отладочную мигрень.
Взгляд под капот
Если у вас еще не было возможности взглянуть на ее внутренности, комплект программного обеспечения CreateJS состоит из пяти частей: TweenJS, EaselJS, SoundJS, PreloadJS и Zoë.
- TweenJS состоит из оптимизированного числового и нечислового механизма анимации, который может работать в одиночку или в тандеме с EaselJS.
- EaselJS служит всеобъемлющим менеджером специфичных для проекта медиа-ресурсов, включая изображения, спрайты и события. Он отображает эти активы в виде списка, похожего на знакомый макет Flash.
- SoundJS содержит звуковой движок и дает вам возможность подключать модули, которые воспроизводят звук в соответствии с возможностями пользователя, включая мультитач.
- PreloadJS помогает вам организовать и предварительно загрузить все ваши javascript, звук, видео, изображения и другие данные.
- Zoë компилирует и экспортирует изящные таблицы спрайтов и JSON непосредственно из анимации Flash (SWF), что позволяет создавать иллюстрации во Flash и легко интегрировать их в проект.
- Инструментарий для Flash CS6 позволяет экспортировать анимации Flash в формате, совместимом с EaselJS.
Теперь у нас есть инструменты для начала создания полностью интерактивных презентаций, которые выходят за рамки ограничений имеющихся на рынке инструментов, таких как Prezi, и конкурируют с популярными библиотеками, такими как ImpressJS и KineticJS .
EaselJS
Значение EaselJS вступает в игру из-за трудностей, с которыми сталкиваются те, кто не разбирается в стандартном холсте HTML5. Напротив, синтаксис EaselJS происходит от интуитивного языка ActionScript 3. Это значительно облегчает создание богатого опыта как для опытных разработчиков Flex / Flash, так и для новичков во Flash. Целый ряд сенсорных событий (даже тех, которые поддерживаются в IE 10) и модные анимации будут в вашем арсенале, обеспечивая поведение, внешний вид и ощущение, которые незначительно отличаются от родных приложений для Android и iOS.
Кросс-браузерный аспект EaselJS распространяется на холст-приложения HTML5, которые поддерживаются в каждом браузере с поддержкой HTML5, а также:
- ОС 2.1+: Android планшеты и смартфоны
- iOS 3.2+: iPad, iPhone, iPod 4+
- BlackBerry 7.0 и 10.0+
Интеграция с простыми HTML-страницами — это атрибут EaselJS, который невозможно переоценить. Его HTML5-элемент canvas встроен в HTML-страницу, как и любой другой элемент; в состоянии заполнить целые или частичные разделы документа, и готов к слою с другими объектами страницы.
Раньше проблема была с совместимостью из-за сложности включения различных медиа в HTML DOM. В этом случае EaselJS похож на Flash в том смысле, что графические элементы будут отображаться в одинаковом относительном положении практически во всех браузерах.
Возможности в центре EaselJS включают «сердцебиение», которое перерисовывает сцену один раз каждые ~ 20-60 миллисекунд. Растровые изображения, текст и графика могут контролироваться с помощью различных преобразований, фильтров, прозрачности, видимости и т. Д. Элементы на сцене затем группируются в контейнеры, например:
// Let's group some elements with a container var container = new createjs.Container(); // Let's make a shape var shape = new createjs.Shape(); shape.graphics.beginFill("#333").drawRect(0,0,50,50); // Let's create a bitmap image var bitmap = new createjs.Bitmap("path/to/image.jpg"); bitmap.x = 50; // And now for some text var text = new createjs.Text("Lorem ipsum dolor", "16px Verdana", "#000000"); text.x = 100; // Put it all in a container on the stage container.addChild(shape, bitmap, text); stage.addChild(container); Используя этот подход, вы можете избежать работы в контексте холста, позволяя создавать и удалять элементы с небольшими ограничениями.
Графический класс EaselJS предлагает краткий синтаксис, цепочечные / общие команды и интеграцию с общими API:
// Here's a graphic object of some logo var logo = new createjs.Graphics(); logo.setStrokeStyle(2); logo.beginStroke(createjs.Graphics.getRGB(0,0,0)); logo.beginFill("#999999").moveTo(0,0).lineTo(0,0).lineTo(0,0);
Загруженные только один раз, спрайт-листы оптимизируют производительность, позволяя нескольким активам анимации помещаться в одно изображение. Отдельные листы также могут содержать информацию о нескольких спрайтах, и с помощью Flash Toolkit для SpriteSheetBuilder в CreateJS вы можете превратить экспортированные векторные данные непосредственно в листы спрайтов:
{ "frames": { "width": 60, "height": 60, "count": 20, "regX": 0, "regY": 0 }, "animations": { "FigureCycle": [5, 25], "FigureAnimate": [26, 36, "FigureCycle", 2] }, "images": ["figure-sheet.png"] }
Другие преимущества EaselJS
Взаимодействия на стандартном холсте HTML5 фиксируются только на плоском холсте, без контекста, который связан с осознанием множества пользовательских событий и взаимодействий. EaselJS предоставляет интуитивно понятную сцену, которая имеет память о прошлых пользовательских событиях, что приводит к упрощенному дизайну; даже когда речь идет о поддержке мультитач.
TweenJS
TweenJS позволяет выполнять анимацию движения точно так же, как Flash, но упрощает цепочку событий анимации, облегчая сложную анимацию. Имейте в виду, что встроенная функция тикера включена в EaselJS, поэтому, если вы не используете EaselJS, вам придется создать свою собственную функцию тикера и вызвать ее.
createjs.Tween.get(sphere).wait(500).play( cjs.Tween.get(sphere, {paused: true, loop: true}) .to({x: 400}, 1000) .to({x: 25}, 1000) ); // Hover sphere up and down createjs.Tween.get(sphere, {loop: true}) .to({y: 20}, 500, createjs.Ease.quadInOut) .to({y: 0}, 500, createjs.Ease.quadInOut);
Используя эту библиотеку, вам нужно только использовать свое воображение, чтобы придумать какое-то значение, которое меняется со временем, и заставить TweenJS перерисовывать его на экране, кадр за кадром.
Все остальное
Предварительная загрузка — обычно неэффективный процесс, которому не хватает надежной надежности, предварительная загрузка с PreloadJS отмечает явное улучшение по сравнению с традиционными рабочими процессами. Ссылаясь на отдельный XML-манифест, можно управлять всеми медиа-активами, просто указывая на них с помощью простых вызовов API.
Интеграция с Flash — для дизайнеров, привыкших к созданию в Adobe Suite, Zoë делает переход еще проще, создавая спрайт-листы непосредственно из анимации временной шкалы Flash с возможностью экспорта дополнительных расширенных данных JSON.
Аудио — звук подходит для презентаций, игр и мультимедиа таким образом, что его обычно замечают только тогда, когда что-то плохо выделяется. SoundJS не обязательно делает что-то экстраординарное, скорее, он предварительно загружает все свое аудио, незаметно управляя им в фоновом режиме как плагин. SoundJS самостоятельно определяет, какой звук он будет использовать, основываясь на текущих возможностях браузера.
Вывод
Поскольку набор CreateJS продолжает расти и адаптироваться к потребностям отрасли, может показаться, что воображение является единственным пределом для создания с его помощью богатой интерактивности HTML5. Растущее сообщество разработчиков CreateJS также создало несколько ценных SDK и репозиториев, которые продолжают создавать ценность для конкретных приложений, к которым применяется среда.