Vectorboom
Статьи / Обзоры / Comments: 2

Ai-> Canvas - бесплатный плагин для Adobe Illustrator

Ярослав Лазунов
27.01.2013

Ai-> Canvas позволяет экспортировать векторную и растровую графику из Adobe Illustrator непосредственно в элементы HTML 5 кода, используя JavaScript. Это означает, что ваши векторные работы будут отображаться в браузерах, которые поддерживают HTML5. При помощи этого плагина вы можете создавать анимацию и интерактивную графику на основе веб приложений.

Как Ai-> Canvas работает

Ai-> Canvas plug-in совместим с Adobe Illustrator CS3 – CS6 и работает в Windows и Mac OS X. Полученный HTML и JavaScript будет работать в следующих версиях браузеров: Internet Explorer 9, Firefox 3.6, Chrome 6, Safari 5, and Opera 10. Вы можете скачать the Ai-> Canvas plug-in, перейдя по следующей ссылке. Кроме плагина архив содержит документацию, которая позволит вам узнать, как использовать плагин для рисования, анимации и кодирования. Посмотрев подробный видео урок, вы изучите основы работы с Ai-> Canvas.

Плагин позволяет экспортировать сложные формы, графические стили, градиенты, прозрачности текст, растровые изображения, узорные заливки, символы, падающие тени и многое другое. Однако такие объекты, как градиентные сетки, маски прозрачности и размытие по Гауссу будут автоматически растеризованы в PNG файлы. Это позволяет браузеру работать более быстро со сложными объектами.

Ai-> Canvas plug-in

Анимация может быть применена для вращения, масштабирования, изменения прозрачности и движения объектов вдоль векторного пути. Функция событий может быть использована для запуска других анимаций. Для анимирования объектов необходимо указывать специальные функции и их свойства в имени слоя, соответствующего объекту.  Список функций вы найдете в документе "Custom Functions", который прилагается к плагину.

Ai-> Canvas plug-in

Кодировать объекты таким способом, я думаю, не очень удобно, однако вы можете открыть экспортированный документ в любом HTML  редакторе и продолжить или расширить код. Это также позволяет создать интерактивную графику, которая будет реагировать на действия пользователя.

Примеры использования Ai-> Canvas:

Canvas Cycle: True 8-bit Color Cycling with HTML5

Ai-> Canvas plug-in

Canvas Zoom

Ai-> Canvas plug-in

Music Can Be Fun

Ai-> Canvas plug-in

Я думаю, что в ближайшем будущем областью применения  Ai-> Canvas будет веб анимация, онлайн игры и интерактивная инфографика.

Всего комментариев: 0
Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.