Онлайн курсы обучение работы в adobe animate. Подготовка креативов в HTML редакторах

Для подготовки HTML креативов к размещению в ADFOX важно соблюсти требования по вставке кода, обрабатывающего клик по баннеру и подсчитывающего события в баннере.
При разработке HTML кода можно использовать редакторы, для которых написана данная инструкция:
- Adobe Animate CC;
- Google Web Designer;
- Adobe Edge Animate CC.

Требования к HTML коду (для разработчиков кода)

Подготовьте ваш проект, соблюдая следующие требования:

1. Максимально допустимое количество символов в HTML коде - 65 000;
2. JavaScript и CSS предпочтительнее размещать внутри HTML кода баннера;
Если итоговый HTML код превышает максимально допустимое количество символов, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы:
- сохраните js и css код в отдельные файлы с расширением.js или.css;
3. В проекте может находиться только один файл с расширением.html;
4. Максимально допустимое количество файлов в проекте - 50;
5. Разрешенные типы файлов в проекте: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf, otf, ttf, abf, acfm, gdr, etx, eot, fnt, fon, mf, ttc, woff;
6. Максимальный размер каждого файла (действует также для файлов внутри архива):
- 300Кб;
- 1Мб для видео файлов.
7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
8. В названиях переменных и объектов нельзя использовать русские буквы.
Исключение составляет только текст на баннере.
9. Формат готового проекта - zip архив.

Adobe Animate CC

1. Подготовка редактора.

Для создания нового проекта в AdobeAnimate CC выберите проект "HTML5 Canvas".

Код данного шаблона можно брать за основу при создании креативов в редакторе.

Для того, чтобы применить шаблон к проекту в настройках публикации выберите "Advanced Publish Settings -> Import New…" .

Шаблон содержит скрипт adfox_HTML5.js

3. Обработка клика

Если в креативе предусмотрена цикличная анимация, то используйте коды для кнопок только из раздела .

3.1 Чтобы вся область баннера была кликабельна и имела одну ссылку для перехода, добавьте в первом кадре анимации код:

Canvas.style.cursor = "pointer"; canvas.addEventListener("click", function() { window.callClick(); });

3.2 Чтобы добавить несколько кнопок для перехода с разными ссылками, то добавьте в верхнем слое анимации основную кнопку для клика по баннеру, присвойте кнопке имя экземпляра (Instance Name) и пропишите на кнопке код:

This.btnMain.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(); }; });

Добавьте остальные кнопки, при кликах на которые пользователь переводится на разные страницы рекламируемого сайта.
Разместите несколько кнопок в верхнем слое над определенными частями анимации, присвойте кнопкам имена экземпляра (Instance Name) и пропишите для каждой кнопки код:

This.btnLeft.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(n); }; });

где n

3.3

This.btnText.addEventListener("mouseover", function() { window.callEvent(n); });

где mouseover - событие javascript, n - номер события от 1 до 30, которое должно быть вызвано.

Особенность создания цикличной анимации

Чтобы реализовать в креативе цикличную анимацию в редакторе Animate CC:
- установите опцию "Временная шкала цикла"("Loop Timeline") в настройках публикации;
- используйте коды для кнопок из данного раздела, а коды для обычных кнопок из пунктов 3.1 и 3.2 необходимо убрать.

Код креатива с одной кнопкой и цикличной анимацией:

If (typeof(this.stopCycle) == "undefined") { this.btnMain.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(); }; }); this.stopCycle = true; }

Если имеется несколько кнопок, то в коде вызова событий ADFOX добавьте код:

If (typeof(this.stopCycle) == "undefined") { this.btnMain.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(); }; }); this.btnLeft.addEventListener("click", function (e) { var t = e.nativeEvent; if (t.which == 1 || t.button == 0) { window.callClick(n); }; }); this.stopCycle = true; }

где n - номер события от 1 до 30, которое должно быть вызвано.

Использование прозрачных кнопок

Прозрачные кнопки можно использовать, например, в том случае, если необходимо сделать всю область баннера кликабельной или только часть. Для них, также как и для обычных кнопок должен быть добавлен код вызова перехода или события.

Кнопки в Animate это символы, которые содержат четыре кадра. Вы можете оставить первые три пустыми и заполнить только последний "Клик" ("Hit"), добавив в него содержимое (графический элемент) через Вставка > Временная шкала > Ключевой кадр (Insert > Timeline > Keyframe).

Содержимое кадра "Клик" (Hit) является невидимым при этом оно определяет ту область кнопки, которая реагирует на клик. Добавить содержимое (графический элемент) на этот кадр можно через Вставка > Временная шкала > Ключевой кадр (Insert > Timeline > Keyframe). Если остальные кадры остаются пустым или невидимыми, кнопка в рабочей области выглядит прозрачно-голубой и имеет форму того содержимого, которое содержится в следующем в кадре "Клик" (Hit). При публикации проекта прозрачно-голубая область видна не будет.

Особенность реализации тянущегося (резинового) баннера

Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, произведите настройки: Выберите File > Publish Settings .
В табе Basic , выберите Make Responsive > Width, Height или Both .
Выберите Scale to fill visible area для просмотра вывода в полноэкранном режиме.
При выборе "Fit in view" контент будет масштабироваться вплоть до заполнения всего доступного места на экране, при этом соотношение сторон сохраняется. Так что если Максимальная ширина уже достигнута, то может остаться незаполненной область по высоте экрана и наоборот.

Если не удается прийти к желаемому результату с помощью настроек программы, используйте скрипты.
Приводим примеры кодов:
Скачать код для масштабирования с учетом соотношения сторон .
Скачать код для масштабирования без учета соотношения сторон .
Скачать код для позиционирования элементов, где an0..an4 - это Instance Name элементов .

Особенность создания баннера с авторасхлопом

Если требуется осуществлять показ баннера с расхлопнутого состояния, то необходимо при добавлении баннера в интерфейсе указать в параметре "Авторасхлоп всегда" или "Расхлоп при инициализации" значение yes и добавить код в HTML креативе:

Window.global_exp_banner = this.exp_banner; window.global_main_banner = this.main_banner; window.global_exp_banner.visible = false; if (window.isBannerExpanded) { window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; } else{ window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true; } window.global_main_banner.btnExpand.addEventListener("click", expandBanner.bind(this)); window.global_exp_banner.btnCollapse.addEventListener("click", collapseBanner.bind(this)); window.onBannerExpand = function() { window.callEvent(2); window.global_exp_banner.visible = true; window.global_exp_banner.btnCollapse.visible = true; window.global_main_banner.visible = false; window.global_main_banner.btnExpand.visible = false; } window.onBannerCollapse = function() { window.callEvent(3); window.global_exp_banner.visible = false; window.global_exp_banner.btnCollapse.visible = false; window.global_main_banner.visible = true; window.global_main_banner.btnExpand.visible = true; }

5. Публикация проекта.

Важно! При предпросмотре проекта в браузере через (Ctrl-Enter | Cmd-Enter) к ссылкам в названиях файлов в HTML дописываются рандомные значения вида ?1468231208369 . Такие значения должны быть исключены из проекта при его загрузке в ADFOX.
Для этого, финальный проект в редакторе должен быть опубликован через File > Publish Settings > Publish (Shift-Ctrl-F12 | Shift-Cmd-F12) .

При публикации проекта выберите шаблон AdobeAnimate_Adfox_.html .

.zip

Google Web Designer

Код данного баннера можно брать за основу при создании креативов в редакторе.

Шаблон содержит скрипт adfox_HTML5.js и набор параметров для корректной работы переходов и подсчета событий:
%reference%, %user1%, %eventN%, где N - номер события от 1 до 30.

2. Обработка клика.

Все события назначаются конкретным элементам анимации через вкладку "События".

Для вызова действий используется компонент "Интерактивная область".
Добавьте его и выберите событие "Интерактивная область" - "Касание/нажатие" (или "Tap Area > Touch/Click" в английской версии).

Во вкладке "Собственный код" укажите вызов функции клика.

2.1

CallClick();

2.2

CallClick(n);

где n

2.3 Если необходимо вызвать событие из анимации без перехода используйте следующий код:

CallEvent(n);

где n - номер события, которое должно быть вызвано.

Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, на панели Свойства для положения и размеров укажите проценты вместо пикселей.

Также используйте опции "Выровнять по контейнеру" и "Резиновый макет" на верхней панели инструментов.
Если перед использованием каких-либо инструментов выравнивания включить "Резиновый макет", то при изменении размера родительского контейнера все элементы будут выравниваться относительно друг друга и относительно размеров контейнера.
При этом можно одновременно использовать как относительные размеры элементов в процентах, так и абсолютные – в пикселях.

4. Публикация проекта.

При добавлении баннера в ADFOX менеджеру потребуется знать соответствие кнопок и номеров событий. К каждому событию менеджер пропишет собственную ссылку для перехода, которая с помощью переменной затем будет передана в код баннера.

После публикации проекта заархивируйте его в формате .zip . Ваш креатив готов для загрузки в баннер ADFOX.

Adobe Edge Animate CC

Для начала работы запустите файл с расширением .an из архива.

2. Обработка клика.

Все события назначаются конкретным элементам анимации через вкладку "Code".

Для перехода по выбранному элементу необходимо выбрать событие click и прописать вызов функции клика.

Кнопкам необходимо присвоить имя экземпляра (Instance Name), например: btnMain, btnRight.

2.1 Если используется одна кнопка перехода:

CallClick();

2.2 Если кнопок перехода несколько:

CallClick(n);

где n - номер события, которое должно быть вызвано.

2.3 Если необходимо вызвать событие из анимации без перехода используйте следующий код:

CallEvent(n);

где n - номер события, которое должно быть вызвано.

Особенность реализации тянущегося (резинового) баннера.

Чтобы баннер тянулся по ширине контейнера, в котором он будет находится на сайте, необходимо при подготовке баннера в редакторе на панели Properties для положения и размеров указать вместо пикселей проценты.

Есть также кнопки Scale Size и Scale Position для элементов на панели Position and Size

4. Публикация проекта.

Публиковать проект следует с такими настройками:

После публикации проекта заархивируйте его в формате .zip . Ваш креатив готов для загрузки в баннер ADFOX.

Для людей, что хотят постоянно совершенствоваться, чему-то обучаться и постоянно изучать что-то новое, мы специально сделали эту категорию. В ней исключительно образовательный, полезный контент, который, безусловно, придется Вам по вкусу. Большое количество видео, пожалуй, могут посоревноваться даже с образованием, которое нам дают в школе, в колледже или университете. Самым большим достоинством обучающих видео является то, что они стараются давать самую свежую, самую актуальную информацию. Мир вокруг нас в эру технологий постоянно меняется, и печатные обучающие издания просто не успевают выдавать свежую информацию.

Среди роликов также можно найти и обучающие видео для детей дошкольного возраста. Там Вашего ребенка обучат буквам, цифрам, счету, чтению и т.д. Согласитесь, очень даже неплохая альтернатива мультикам. Для учеников начальных классов также можно найти обучения английскому языку, помощь в изучении школьных предметов. Для более старших учеников созданы обучающие ролики, которые помогут подготовиться к контрольным, к экзаменам либо же просто углубить свои познания в каком-то определенном предмете. Приобретенные знания могут качественным образом сказаться на их умственном потенциале, а также Вас порадовать отличными оценками.

Для молодых людей, что уже окончили школу, учатся или не учатся в университете, есть множество увлекательных образовательных видео. Они им могут помочь в углублении знаний по профессии, на которую учатся. Или же получить профессию, например программиста, веб-дизайнера, SEO-оптимизатора и прочее. Таким профессия пока в университетах не учат, поэтому специалистом в этой продвинутой и актуальной сфере можно стать только занимаясь самообразованием, в чем мы и стараемся помочь, собирая самые полезные ролики.

Для взрослых людей эта тема тоже актуальна, так как очень часто бывает, что проработав по профессии годы, приходит понимание, что это не твое и хочется освоить что-то более подходящее для себя и одновременно прибыльное. Также среди данной категории людей часто становятся ролики по типу самосовершенствования, экономии времени и денег, оптимизации своей жизни, в которых они находят способы жить гораздо качественнее и счастливее. Еще для взрослых людей очень хорошо подойдет тема создания и развития собственного бизнеса.

Также среди образовательных роликов есть видео с общей направленностью, которые подойдут для практически любого возраста, в них можно узнать о том, как зарождалась жизнь, какие теории эволюции существуют, факты из истории и т.д. Они отлично расширяют кругозор человека, делают его гораздо более эрудированным и приятным интеллектуальным собеседником. Такие познавательные видео, действительно, полезно смотреть всем без исключения, так как знание – это сила. Желаем Вам приятного и полезного просмотра!

В наше время просто необходимо быть, что называется «на волне». Имеется в виду не только новости, но и развитие собственного ума. Если Вы хотите развиваться, познавать мир, быть востребованным в обществе и интересным, то этот раздел именно для Вас.

Adobe Edge Animate — уроки создания анимации для сайта

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

Раньше, слово анимация прочно ассоциировалось с понятием Флеш. Хороший формат, который имеет широкие возможности, достаточно удобен и понятен в работе. Но, так уж получилось, что эта технология не получила распространения для современных устройств. Да, многие браузеры её поддерживают, но яблочные устройства не имеют на борту необходимого софта для показа флеш. Ну не поделили ребята сферы влияния. А раз так, вебмастерам надо осваивать другие методы для создания анимации. Понятие адаптивность, сегодня обязательное условие.

Вот и появился новый язык разметки, под названием HTML5, который и может дать разработчикам, практически неограниченные возможности для творчества. Многие его уже освоили, но, как обычно, для полноценной и эффективной работы, необходима программа, которая бы все эти возможности реализовывала в удобном формате. Вот такой программой и является .

Возможности программы Adobe Edge достаточно широкие. Тут можно и баннер сваять с любыми анимационными эффектами. Можно сделать красивую заставку для главной страницы, кнопки, менюшки, для разнообразных детских и игровых ресурсов – поле для творчества широчайшее. Так что, хочется того или нет, программу желательно осваивать. Тем более, что интерфейс довольно простой, понятный, особых трудностей в освоении не наблюдается. Было бы желание.

Для тех, кто не готов сразу выкладывать за программу Adobe Edge кругленькую сумму можно попробовать поработать с триальной версии программы, которую, естественно, можно скачать на сайте Adobe. За тестовый период вы вполне сможете определиться подойдёт ли вам эта программа. Для тех, кто ещё, пока не располагает достаточными средствами, можно легко найти расшаренную версию этой программы. Наши умельцы работают оперативно, и на тех же торрентах всегда можно найти самую новую версию. Как поступать, каждый определяет для себя самостоятельно.

Освоение программы Adobe Edge, в принципе, довольно несложная процедура. Кто работал с Adobe Flash, легко разберётся. Но, в любом случае, не помешают простые и понятные уроки для работы с этой программой. Немного поискав, я нашёл несколько таких видео уроков, которые позволят любому освоить эту программу в самые короткие сроки. Подборочку сделал для себя, но, как обычно, если кому пригодится, буду только рад.

Уроки создания анимации в программе Adobe Edge

В этом уроке рассматривается то, как создать новый проект в Adobe Edge Animate и сохранить его на своём компьютере. Какие файлы генерирует программа при создании нового проекта.

В этом уроке вы познакомитесь с рабочим пространством Edge Animate, познакомитесь со всеми необходимыми панелями и кнопками интерфейса.

Смотрим видео по программе Adobe Edge Animate

Первая часть урока создания своей первой анимации в Adobe Edge Animate. Автор урока Валерий Медведев просто, доходчиво и основательно показывает все необходимые действия и значение кнопок панели управления.

Смотрим видео по программе Adobe Edge Animate

В этом уроке мы закончим создание своей первой анимации в программе Adobe Edge Animate. В итоге получился простенький клип, который, тем не менее, даёт возможность познакомиться с первоначальными необходимыми приёмами при создании анимации.

Смотрим видео по программе Adobe Edge Animate

В этом видео мы учимся просматривать анимацию, созданную в Edge Animate в веб-браузере. Небольшая информация о HTML5.

Смотрим видео по программе Adobe Edge Animate

Интересный пример анимации, когда ракета взлетает при определённом значении счётчика.

Готовый код для триггера:

timerCount = 5; sym.$("counter_txt").html(timerCount); tCounter = setInterval(timer, 1000); function timer() { timerCount -= 1; if (timerCount < 1) { sym.play("start"); clearInterval(tCounter); return; } sym.$("counter_txt").html(timerCount); }

Смотрим видео по программе Adobe Edge Animate

Как сделать изменение состояния кнопки при наведении мыши. Необходимый код для mouseleave:

sym.getSymbol("goBtn").stop("normal");

Смотрим видео по программе Adobe Edge Animate

В нашу анимацию можно легко вставлять ролики с YouTube. Как это сделать, рассматриваем в уроке. Необходимый код для вставки:

var youtube = $("
Смотрим видео по программе Adobe Edge Animate

Как сделать то, чтобы проигрывание анимации начиналось только после того, как пользователь прокрутит страничку до нужного места. Делаем на примере проекта в Adobe Muse. Настраиваем исходную позиция для запуска.

Смотрим видео по программе Adobe Edge Animate

Как сделать, чтобы картинка поворачивалась на 180 градусов вокруг вертикальной оси при наведении мыши.

Скачать необходимые файлы и коды можно .

Смотрим видео по программе Adobe Edge Animate

Создаём интересный эффект, когда при движении мышью по ролику каждый элемент двигается самостоятельно.

Смотрим видео по программе Adobe Edge Animate

Как сделать так, чтобы нужный логотип вращался вокруг своей оси. К сожалению, логотип получился некликабельным.

Смотрим видео по программе Adobe Edge Animate

Как добавить звук при нажатии на кнопку.

Смотрим видео по программе Adobe Edge Animate

Как видим, сложного ничего нет, всё просто, понятно, так сказать, интуитивно. Зато можно добавить на свои сайты эффектные и красочные элементы, всё только от фантазии зависит. Да и с заказчиками можно обсудить варианты дополнительной оплаты за такие современные элементы.

Всем удачи и творческих успехов!

UPD 6 Декабря 2015 :
Продукт менеджер Flash Runtime и Adobe AIR сказал, что они не имеют планы на прекращение работы по Flash Runtime и AIR и переименование продукта для создания контента никак не связано с судьбой Flash Player и смежной экосистемы.

Все бы ничего, кроме одного нюанса, который сильно меняет смысл - техническая безграмотность и всеобщий copy-paste. Издания перепечатывают друг друга, добавляя всё новые и новые «факты», которых нет в оригинале. Одним словом - испорченный телефон.

Оригинальная статья http://blogs.adobe.com/conversations/2015/11/flash-html5-and-open-web-standards.html сообщает о том, что Adobe переименовывает Flash Professional в Animate CC. Дополнительно сообщают, что клиенты хотят получать больше поддерживаемых платформ и т.д.

И я был не удивлен, что многие не видят разницы между Flash и Flash Professional. На новостных сайтах начала появляться различная отсебятина, ссылающаяся на другие источники, которые ссылаются по цепочки дальше. И не всегда на оригинал.

На сегодня слово Flash воспринимается как плагин для браузеров. Технически это Flash Player. Но существует средство создания содержимого - Flash Professional. Если бы Microsoft переименовали Word в TextMachine - кричали бы люди, что «Microsoft прекратили разработку ворда?». Даже несмотря на то, что черным по белому написано, что создание содержимого будет поддерживаться и данные можно будет редактировать?

Из своих же примеров могу продемонстрировать яркую картину. Местные клиенты спрашивают меня, на чем будем делать анимацию для презентации под iOS. Я гордо сообщаю, что во Flash Professional. И у клиента ступор. Через мгновение он выдает:

«Но на хабре же пишут, что флеш умер да и он не работает на планшете»

И тут в ступор впадаю я. Техническая безграмотность клиентов и авторов статей о флеше заставляет людей отдаляться от искомого результата. Благо клиент поддался переубеждению и остался доволен результатом.

Вернемся к оригиналу статьи. Они сообщают, что html5 созрел и уже поддерживает большинство возможностей Flash. Спускаясь ниже мы видим, что Adobe сами рассматривают Flash как ключевое средство доставки премиум контента - веб игры и премиум видео. Но ни слова о том, что они прекращают поддержку Flash.

Более того… Они четко пишут, что работают в партнерских взаимоотношениях с Microsoft и Google для улучшения совместимости и безопасности Flash Player. И не забыли добавить, что тесно сотрудничают с Facebook для улучшения надежности и безопасности работоспособности игр во Flash Player. Так где хоть слово о том, что они отказываются от Flash?

Если говорить о развитии Flash в целом - да, оно остановилось давно. Осуществляются лишь мелкие (но весомые) улучшения и устраняются ошибки в безопасности. Но так ли это плохо? С моей точки зрения у Flash есть все, что ему требуется. Конечно, хотелось бы больше. Но зачем?

За большим следует идти на Standalone формат игр. А там есть Adobe AIR (если рассматривать Flash). Отказ от поддержки Adobe AIR не зафиксирован. У меня есть информация о наличии планов на 2016 год. А вот умрет ли браузерный флеш? Конечно. Но точно не завтра.

А для любителей говорить шаблонами, что Flash сажает батарею - покажите мне, как её заряжает Canvas.

Стоит так же отметить, что Adobe Edge Animate проект больше не будет активно развиваться. Но т.к. я являюсь приближенным к разработке Flash Professional - уверяю, что Edge Animate вообще не будет разрабатываться (кроме критических ошибок). Такое решение принято в пользу Adobe Flash Professional (будущий Animate CC).