Adobe edge animate и adobe animate cc отличия
Для подготовки HTML-креативов к размещению в ADFOX важно соблюсти требования по вставке кода, обрабатывающего клик по баннеру и подсчитывающего события в баннере.
При разработке HTML-кода можно использовать редакторы, для которых написана данная инструкция:
Пример готового проекта в Google Web Designer, исходный файл.
Требования к HTML-коду (для разработчиков кода)
Подготовьте ваш проект, соблюдая следующие требования:
Максимально допустимое количество символов в HTML-коде — 65 000. JavaScript и CSS предпочтительнее размещать внутри HTML-кода баннера. Если итоговый HTML-код превышает максимально допустимое количество символов, необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы. Сохраните JS и CSS код в отдельные файлы с расширением .js или .css. В проекте может находиться только один файл с расширением .html. Максимально допустимое количество файлов в проекте — 50. Разрешенные типы файлов в проекте: CSS, JS, HTML, GIF, PNG, JPG, JPEG, SVG, JSON, FLV, MP4, OGV, OGG, WEBM, AVI, SWF, OTF, TTF, ABF, ACFM, GRD, ETX, EOT, FNT, FON, MF, TTC, WOFF. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчеркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов; В названиях переменных и объектов нельзя использовать русские буквы.Adobe Animate CC
Для создания нового проекта в AdobeAnimate CC выберите проект HTML5 Canvas .
Код данного шаблона можно брать за основу при создании креативов в редакторе.
Для того, чтобы применить шаблон к проекту в настройках публикации выберите Advanced Publish Settings → Import New… .
Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий: %reference% , %user1% , %eventN% , где N — номер события от 1 до 30.
Примечание. Если в креативе предусмотрена цикличная анимация, используйте коды для кнопок только и раздела Особенность создания цикличной анимации. Чтобы вся область баннера была кликабельна и имела одну ссылку для перехода, добавьте в первом кадре анимации код: Чтобы добавить несколько кнопок для перехода с разными ссылками, добавьте в верхнем слое анимации основную кнопку для клика по баннеру, присвойте кнопке имя экземпляра (Instance Name) и пропишите на кнопке код:Добавьте остальные кнопки, при кликах на которые пользователь переводится на разные страницы рекламируемого сайта.
Разместите несколько кнопок в верхнем слое над определенными частями анимации, присвойте кнопкам имена экземпляра (Instance Name) и пропишите для каждой кнопки код:
где n — номер события от 1 до 30, которое должно быть вызвано.
Если необходимо вызвать событие из анимации без перехода используйте следующий код:где mouseover — событие javascript, n — номер события от 1 до 30, которое должно быть вызвано.
Особенность создания цикличной анимации
Чтобы реализовать в креативе цикличную анимацию в редакторе Animate CC:
установите опцию Временная шкала цикла ( Loop Timeline ) в настройках публикации; используйте коды для кнопок из данного раздела, а коды для обычных кнопок из пунктов 3.1 и 3.2 необходимо убрать.Код креатива с одной кнопкой и цикличной анимацией:
Если есть несколько кнопок, в коде вызова событий ADFOX добавьте код:
где n — номер события от 1 до 30, которое должно быть вызвано.
Использование прозрачных кнопок
Прозрачные кнопки можно использовать, например, в том случае, если необходимо сделать всю область баннера кликабельной или только часть. Для них, также как и для обычных кнопок должен быть добавлен код вызова перехода или события.
Кнопки в Animate это символы, которые содержат четыре кадра. Вы можете оставить первые три пустыми и заполнить только последний Клик ( Hit ), добавив в него содержимое (графический элемент) через Вставка → Временная шкала → Ключевой кадр ( Insert → Timeline → Keyframe .
Содержимое кадра Клик ( Hit ) является невидимым при этом оно определяет ту область кнопки, которая реагирует на клик. Добавить содержимое (графический элемент) на этот кадр можно через Вставка → Временная шкала → Ключевой кадр ( Insert → Timeline → Keyframe . Если остальные кадры остаются пустым или невидимыми, кнопка в рабочей области выглядит прозрачно-голубой и имеет форму того содержимого, которое содержится в следующем в кадре Клик ( Hit ). При публикации проекта прозрачно-голубая область видна не будет.
Особенность реализации тянущегося (резинового) баннера
Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, произведите настройки:
В табе Basic выберите Make Responsive → Width, Height или Both . Выберите Scale to fill visible area для просмотра вывода в полноэкранном режиме.При выборе Fit in view контент будет масштабироваться вплоть до заполнения всего доступного места на экране, при этом соотношение сторон сохраняется. Так что, если Максимальная ширина уже достигнута, может остаться незаполненной область по высоте экрана и наоборот.
Если не удается прийти к желаемому результату с помощью настроек программы, используйте скрипты.
Особенность создания баннера с авторасхлопом
Если требуется осуществлять показ баннера с расхлопнутого состояния, необходимо при добавлении баннера в интерфейсе указать в параметре Авторасхлоп всегда или Расхлоп при инициализации значение yes и добавить код в HTML-креативе:Публикация проекта
Внимание. При предпросмотре проекта в браузере через ( CTRL-ENTER | CMD-ENTER ) к ссылкам в названиях файлов в HTML дописываются рандомные значения вида ?1468231208369 . Такие значения должны быть исключены из проекта при его загрузке в ADFOX.Для этого, финальный проект в редакторе должен быть опубликован через File > Publish Settings > Publish (Shift-Ctrl-F12 | Shift-Cmd-F12).
При публикации проекта выберите шаблон AdobeAnimate_Adfox_[template].html .
Примечание. При добавлении баннера в ADFOX менеджеру потребуется знать соответствие кнопок и номеров событий. К каждому событию менеджер пропишет собственную ссылку для перехода, которая с помощью переменной затем будет передана в код баннера.После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер ADFOX.
Google Web Designer
Код данного баннера можно брать за основу при создании креативов в редакторе.
Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий: %reference% , %user1% , %eventN% , где N — номер события от 1 до 30.
Все события назначаются конкретным элементам анимации через вкладку События .
Для вызова действий используется компонент Интерактивная область .
Добавьте его и выберите событие Интерактивная область → Касание/нажатие ( Tap Area → Touch/Click ).
Во вкладке Собственный код укажите вызов функции клика.
где n — номер события, которое должно быть вызвано.
Если необходимо вызвать событие из анимации без перехода используйте следующий код:где n — номер события, которое должно быть вызвано.
Особенность реализации тянущегося (резинового) баннера .
Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, на панели Свойства для положения и размеров укажите проценты вместо пикселей.
Также используйте опции Выровнять по контейнеру и Резиновый макет на верхней панели инструментов.
Если перед использованием каких-либо инструментов выравнивания включить Резиновый макет , при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера.
При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные — в пикселях.
Пример готового проекта в Google Web Designer, исходный файл
Проект должен быть опубликован со следующими настройками:
Примечание. При добавлении баннера в ADFOX менеджеру потребуется знать соответствие кнопок и номеров событий. К каждому событию менеджер пропишет собственную ссылку для перехода, которая с помощью переменной затем будет передана в код баннера.После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер ADFOX.
Adobe Edge Animate CC
Для начала работы запустите файл с расширением .an из архива.
Все события назначаются конкретным элементам анимации через вкладку Code .
Для перехода по выбранному элементу необходимо выбрать событие click и прописать вызов функции клика.
где n — номер события, которое должно быть вызвано.
Если необходимо вызвать событие из анимации без перехода используйте следующий код:где n — номер события, которое должно быть вызвано.
Особенность реализации тянущегося (резинового) баннера.
Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, необходимо при подготовке баннера в редакторе на панели Properties для положения и размеров указать вместо пикселей проценты.
Есть также кнопки Scale Size и Scale Position для элементов на панели Position and Size :
Публиковать проект следует с такими настройками:
После публикации проекта заархивируйте его в формате .zip. Ваш креатив готов для загрузки в баннер ADFOX.
Добавление баннера в ADFOX
Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон.Рекомендуем выбирать шаблон для баннера в зависимости от того, какой формат рекламы необходимо показывать на сайте.
При размещении баннера с HTML-креативом в названии шаблона обязательно должен присутствовать «HTML5» и тег [context] .
Описание моего опыта переезда с Flash на Animate CC и создания баннеров во всемогущем формате HTML5. Много картинок под катом
Немного исторического экскурса и терминов
Лично я сам знаком с Flash гораздо больше 10 лет и немного представляю, как работает эта технология «изнутри».
Примерно столько же лет я верстаю сайты, в том числе на «современном» языке HTML5, который, как говорят, умеет всё. Нет, реально, иногда упоротые дизайнеры присылали такие интерфейсы, которых в природе не существовало, их нужно было выдумать, прикрываясь фразой «на HTML5 же можно написать всё!».
Я не претендую на особую художественную ценность моих творений, но количество нарисованных мной баннеров давно перевалило за тысячу, и я продолжаю их рисовать почти каждый день.
За последние 5 лет flash не пинал только ленивый, причем, не особо разбираясь в вопросе. Лично я никогда не видел ни тормозов, ни дырявости, а уж про самое первое утверждение от Стива Джобса про то, что «Flash не заточен под палец» — это и вовсе смешно. Самая очевидная причина противостояния Apple против флеша на айфонах лежит на поверхности, но сейчас не об этом.
Приближаемся к развязке терминологии. HTML — это язык разметки текста и расположения элементов на странице. Он не умеет выполнять никакие действия сам по себе. Под «новшествами HTML5» вместо Flash обычно понимают: проигрывание видео без Flash, анимации без Flash, мультизагрузка файлов без Flash и некоторые другие вещи.
Несмотря на дифирамбы, звучащие отовсюду, до сих пор не появилось ни одного вменяемого редактора анимации на «всемогущем» HTML5, пока Adobe не перелицевала Flash CC в Animate CC, добавив, по сути, только экспорт в HTML5.
Интерфейс
Сам интерфейс Animate CC вообще не отличается от Flash, в отличие от Edge Animate, который был дико непривычен. Больше сказать особо нечего, и я вообще не заметил разницы с CS6, которым я пользовался давно. Для баннеров не нужен AS3, а это была последняя версия, поддерживающая AS2. Конвертер Swiffy, который сделала Google, дружил только с AS2.
* AS2,3 — встроенный во Flash язык программирования Action Script, который позволяет делать всю неанимационную составляющую ролика — чтобы кнопки нажимались, чтобы на нужных кадрах ролик вставал на паузу, для того, чтобы информацию могли прочитать, чтобы запускались интерактивные сценарии взаимодействия с роликом. На самом деле, это достаточно мощный язык, и я использую лишь 0,000001% его функционала.
Движок отрисовки
Естественно, сами по себе объекты внутри ролика двигаться не могут, для этого нужно, чтобы их двигал, показывал и скрывал какой-то движок. В Animate CC для проектов формата HTML5 Canvas используется CreateJS, который приветствует каждый новый проект замечательным предупреждением
ПРЕДУПРЕЖДЕНИЯ:
Номера кадров в EaselJS начинаются с 0, а не с 1. В частности, это влияет на методы gotoAndStop и gotoAndPlay.
Приятно, что хоть предупредили. Видимо, это нереальная задача — отнимать по единичке от того кадра, на который нужно перейти.
Таймлайн и рабочая область
Т.к. интерфейс не претерпел никаких изменений для меня все здесь абсолютно стандартно. Разницы нет. Так как система настроена на русский язык, скачалась русская версия пакета. Меня это не особо беспокоит, потому что я пользуюсь хоткеями, хотя, иногда зависаю на том, что нужно выбрать в меню.
Теперь перейдем к тому, чем я постоянно пользуюсь:
Стандартные фильтры во Flash
Фильтры — одна из весьма частых составляющих любых баннеров, они позволяют очень быстро добиться нужного результата. Я рассмотрю 3 фильтра, которыми я раньше пользовался крайне часто. Во флеше фильтры — часть стандарта, и на моих работах они не оказывали какого-либо влияния на производительность, да и не могли в-принципе. Здесь и далее я буду использовать экспорт в GIF для понимания разницы
Тень — один из самых простых вариантов сделать части баннера объемнее и акцентировать внимание на нужных блоках. Естественно, я взял чрезмерно сильную тень, чтобы проиллюстрировать разницу
Сравниваю:
| Flash | CreateJS |
 |
Да, анимация тени невозможна. Более того, если ролик длиннее того, что я представил для теста, тень превращается в неизвестно что.
Здесь также стоит упомянуть, что в редакторе и готовом html5 тени (да и вообще все эффекты) выглядят сильно разными.
| Редактор | Результат |
 |  |
При экспорте в трейсе можно увидеть такую надпись:
Фильтры тени и свечения используют очень много системных ресурсов, кроме того, поддерживаются не все параметры. (4)
Ну спасибо, что хоть предупредили…
Производительность баннера с тенями оставляет желать лучшего, ну они же предупреждали. Стерев тени с этих подложек, я сократил нагрузку до 40%. Флеш все это рисовал с 23% загрузки вместе с тенями, разумеется
Свечение
Один из самых простых способов выделить текст на пестром фоне — добавить ему обводку, это просто делается с помощью свечения с большим процентом интенсивности.
| Flash | CreateJS |
 |  |
В это самое время в редакторе все так же, «Видимость ноль, иду по приборам»:
Есть один возможный вариант решения данной проблемы, если нужно — я им поделюсь, подложки под буквы используются крайне часто и без них просто не жить.
Помимо этого, свечение — это не только обводка букв, но результат намекает, что его не будет
| Flash | CreateJS | В редакторе |
 |
Размытие
Без комментариев. Размытие доступно только для статичных объектов, так что использовать этот фильтр для появления текстов невозможно
| Flash | CreateJS |
 |
Как вышеперечисленные глюки могут существовать при повсеместном проникновении тех же самых SVG-фильтров и фильтров в CSS — я не представляю.
Проблемы экспорта и упаковки
Все привыкли к тому, что ролик во флеше — это самодостаточный файл. Экспорт в HTML5 порождает кучку файлов, вместо одного. Проект Swiffy, придуманный Google для конвертации SWF в HTML паковал всё внутрь одного HTML-файла. Видимо, такая задача оказалась непосильной ношей для создателей Animate CC. Подробную статью по поводу засовывания «всего» внутрь одного файла для Doubleclick можно прочесть здесь. Я сделал свой конвертер на лету, сгородив конструкцию из пары функций на php, но она далека не то, что до идеала — даже до черновика. Мои задачи решает — и ладно.
Резиновые баннеры
По умолчанию Animate вроде как поддерживает «резиновость» баннеров, но обычно под резиновыми баннерами имеются в виду те, которые тянутся по горизонтали, а не пропорционально по обоим осям. В шаблоне экспорта это называется responsive scaling, и в случае с баннерами, тянущимися только по оси X это приводило к забавным глюкам, пока я его не вырезал из шаблона
Вообще, можно вообще отказаться от идеи растягивания баннера, просто взять максимальный размер баннерного места, а ширину ролика указать равную минимальному размеру баннерного места и обрезать часть с помощью overflow: hidden, потом центрировать элемент CANVAS (указав его ширину равной максимальному размеру баннерного места) по горизонтали внутри ссылки, занимающей 100% ширины, здесь даже немного проще, чем было во FLASH и не требует никаких дополнительных скриптов внутри ролика, только css.
Выпуск Animate 2017 уже доступен! См. раздел Обзор новых функций.
Adobe® Flash Professional теперь называется Adobe Animate.
С помощью Adobe Animate можно создавать векторную анимацию, рекламу, мультимедийный контент, проекты с эффектом присутствия, приложения, игры и многое другое в среде разработки на основе временной шкалы. ПО Animate поддерживает разнообразные форматы, например HTML5 Canvas и WebGL. При необходимости можно добавить поддержку дополнительных форматов, таких как SnapSVG.
Благодаря гибкой работе программы с выходными форматами пользователи смогут просматривать ваш контент на любом устройстве без установки дополнительных внешних модулей.
Кроме того, в Animate предусмотрены эффективные инструменты для рисования и создания иллюстраций, а также возможности интеграции с Adobe CreativeSync. А поскольку Animate входит в состав Adobe Creative Cloud, вы получите еще и доступ ко всем последним обновлениям и будущим выпускам, как только они появятся.
Обновление Animate 2015.2 включает поддержку шрифтов Google в файлах HTML Сanvas, дополнительные размеры кисти, новый формат профилей публикации .APR, изменения в поведении изменения масштаба временной шкалы, а также усовершенствованные маркеры диапазона в режиме калькирования. Читайте дальше, чтобы узнать больше о функциях, включенных в этот выпуск.
Поддержка шрифтов Google в документах HTML Canvas
Новые возможности Animate 2015.2 | Август 2016 г.
Когда аниматоры используют компьютерные шрифты для создания и публикации вывода, содержимое может отображаться конечному пользователю в искаженном виде, не так как задумывалось. Выпуск Animate 2015.2 поддерживает добавление шрифтов Google в веб-содержимое для обеспечения последовательного отображения содержимого на всех устройствах.
Дополнительные сведения об этой функции см. в разделе Шрифты Google.
Новые размеры кистей
Новые возможности Animate 2015.2 | Август 2016 г.
Теперь Animate предоставляет большой выбор размеров кистей с более детальным контролем и включает следующие улучшения.
- Новые размеры кистей в диапазоне 1–200 пикселей
- Интерактивный просмотр при настройке размеров кистей
- Курсоры инструментов «Кисть» и «Ластик» используют вид контурного режима и больше не мешают в процессе рисования в контексте других графических объектов
- Между сеансами Animate запоминаются настройки кистей, такие как последний использованный размер кисти, форма и режим.
- Улучшен процесс рисования, особенно для более коротких мазков кистью
Дополнительные сведения см. в разделе Новые размеры кистей.
Читайте также: