Wick Editor

О программе

Wick Editor – это веб-приложение для создания анимационных роликов, которые можно экспортировать в HTML5, GIF, VIDEO. Приложение работает в любом современном браузере. Даже локально на десктопе. Анимацию можно создавать по ключевым кадрам или по фреймам. Редактор позволяет применять интересный подход к созданию проекта, когда фреймы используются как сцены/слайды, и в сцене объекты могут иметь анимацию по ключам. На сцену можно добавлять фигуры, текст, изображения, аудио. Есть институт событий и действий.

Интерфейс

Панель инструментов
Тут расположены кнопки объектов, которые можно добавлять на сцену, и несколько кнопок управления объектами. Обращу внимание на – это редактирование узлов и линий векторных фигур. Еще замечу, что кнопки для изменения цвета заливки и обводки контуров действуют на будущие фигуры. А если надо изменить цвет существующей фигурой, то обращайтесь к панели Inspector.

Рабочая область
Именно здесь вы формируете и просматриваете сцену. На рабочей области видны только те объекты, которые по вашему сценарию должны присутствовать в данный момент времени, который соответствует положению ползунка на шкале времени.
Обратите внимание на вспомогательную панельку инструментов для рабочей области. Самая большая кнопка на ней – это проигрывание проекта. Самая левая кнопка – для любителей покадровой анимации, когда на текущем кадре можно отображать полупрозрачный рисунок с предыдущего кадра для ориентации.

Шкала времени
Она расположена внизу. Разградуирована по кадрам. То есть, если в настройках проекта Framerate (FPS) у вас выставлен в 15, то на шкале времени 15 означает 1 секунду. Два важных значка и . Первый – это добавление нового фрейма (контейнера кадров), второй – это добавление нового ключевого кадра. Фрейм можно интерпретировать как сцену, потому что в каждом фрейме свой набор объектов. Потянув за правый край фрейма вы можете увеличить время его жизни. По умолчанию проект проигрывается, последовательно, отображая фрейм за фреймом на шкале времени с учетом слоев. Но можно эту последовательность изменить, например, установить стоп-кадр или проигрывание фрейма не по очереди после нажатия на какую-нибудь кнопку (см. видео ниже).
Шкала времени может отображать или проект (Project), или клип (Clip) – это разные сущности. Клип – это как бы дополнительное состояние или таймлайн одного объекта. К режиму клипа можно перейти в объекте-кнопке или в объекте, для которого назначена поключевая анимация. Если вы случайно попали в режим клипа и не можете из него выйти по неопытности, то просто нажмите на закладку Project на шкале времени.

Outliner
Отображет дерево объектов, присутствующих в данный момент времени на таймлайне (шкале времени) согласно положению ползунка. Полезная панель, облегчающая навигацию, когда на сцене много объектов. Здесь можно фильтровать отображение объектов по типу, можно скрывать какие-то слои или блокировать их от случайного изменения, видеть, на какие объекты повешена анимация (иконка ) и переходить в режим Clip этого объекта.

Inspector
Это свойства выделенного объекта. Здесь же можно добавлять объекту js-события для интерактивности. Здесь же можно указывать, сколько раз проигрывать анимацию объекта.
Здесь же можно сделать из объекта кнопку. О кнопке чуть подробнее. После создания кнопки (после нажатия кнопки [Make Button]) нажмите появившуюся кнопку [Edit Timelime] – попадете в режим клипа. Увидите три фрейма для трех состояний кнопки: обычное, при наведении мыши на объект, при клике на объект. В каждом из этих состояний можно по разному оформить объект не только внешне, но и динамически.

Asset Library
Это библиотека вашего контента. Здесь по кнопке [+] добавляются разработанные командой Wick-объекты. А по кнопке добавляются объекты с вашего компьютера: изображения и аудио. После добавления в библиотеку объект не попадает на сцену автоматически, надо его выделить в библиотеке и нажать кнопку [Add to Canvas].

Скрипты

С помощью института событий вы можете задавать реакцию объектов на манипуляции пользователя. События могут исходить от мыши, клавиатуры, таймлайна. Скрипты пишутся в синтаксисе Javasсript с учетом объектной модели проекта. Есть конструктор, облегчающий написание. Чтобы иметь возможность навесить на объект событие надо сначала его превратить в клип кнопкой [Make Clip]. После этого на панели Inspector появится раздел Scripts. При клике на [+add script] откроется путеводитель по событиям:

Событие выбирается двойным кликом, потом выбирается сущность, которая должна на событие отреагировать, потом пишется скрип. Пример скрипта на событие Mouseclick:

this.rotation="90"; // объект на который нажали, повернется на 90 градусов
RRR.y="100"; // объект (превращенный в клип) с именем RRR займет положение 100 px от верха сцены
playSound("beep1.ogg"); // будет проигран аудиофайл beep1.ogg, предварительно добавленный на сцену

Здесь после двойного слеша // дан комментарий для непосвященных.

Экспорт

Чем отличается экспорт [export] от сохранения [save]? При сохранении вы сохраняет проект, который можете открыть в приложении в будущем и продолжить редактирование. Экспорт же осуществляется в конечный формат (html5, gif, video), редактирорвание которого идеологией приложения не предусмотрено. Зато экспортированные форматы вы можете показывать всем желающим. Конечно, особой ценностью обладает формат HTML, потому что в нем поддерживается интерактивность, то есть, взаимодействие с пользователем. Объекты на сцене могут реагировать на действия пользователя и другие события.

При экспорте в HTML создается один(!) файл, а не несколько как во многих аналогах типа WebAnimator. Файл сохраняется в папку по умолчанию, предусмотренную вашим браузером для загрузок. В один файл вмещается весь html-код, стили css, скрипты javascript и даже картинки. Проект кодируется в base64, а js дается в открытом виде. С одной стороны это удобно – все компактно, с другой стороны не видно структуры проекта и крайне затруднено его редактирование без специальных знаний веб-техник. Еще важное наблюдение: страница вашего веб-приложения будет адаптивна, то есть, размер всех объектов на странице будет пропорционально зависеть от размера окна браузера с соблюдением пропорций.
При нажатии кнопки [export] экспорт в HTML производится на закладке Interactive. Ваше приложение работает на технологии Canvas. При экспорте в GIF и MP4 файл сохраняется в другое место на диске: с:\Users\<имя_пользователя>\AppData\Local\Temp\ – с именем вашего проекта + дата и время экспорта.
В любом случае браузер вам позволит вспомнить папку сохранения файла так: откройте список загруженных файлов по кнопке на панели, правой кнопкой мыши нажмите на нужный файл и выберите "Перейти на страницу загрузки". Примерно как на скриншоте:

Особенности локальной браузерной версии
В скачиваемом архиве ниже после распаковки запускайте файл index.html – он будет открыт в вашем браузере по умолчанию. Работать будет даже без подключения к интернету. Сохранять проект в файл *.wick – тоже. Но есть одна особенность - экспортировать в html, gif, video не сможет. Это не приговор. Если на компьютере установлен локальный сервер, например, XAMPP, OpenServer или Denwer… и вы запускаете index.html по адресу запущенного сервера, то и экспорт начинает работать.
В любом случае локальная версия полезна – в спокойной обстановке совершенствовать свой проект и сохранять. А потом в веб-версии открывать проект и экспортировать в конечный формат.

Скачать, посмотреть