Категория: Уроки Adobe Edge Animate CC
Давайте создадим новый файл, сделаем его размером 800х600 и перенесем в него некоторые файлы, а именно вот эти несколько картинок и «шум леса мп3», то есть звук. Я переношу его сюда. Что мы имеем в итоге – вот такую картинку – это лес, она называется «bg», «play» и «пауза», это кнопочки. Я перенесу их сейчас вниз, подвинем их, примерно вот так – самый простой вариант.
Я сейчас запущу анимацию, нажимаю cntr+enter, здесь просто лес и просто две кнопки, ничего не работает. Если я хочу сделать, чтобы у меня автоматом играл звук, он называется «шум леса», то мне нужно выбрать этот слой и тут выбрать «auto play», теперь при нажатии cntr+enter у меня будет воспроизводиться звук. Замечательно. Читать подробнее →
Как добавить интерактивную ссылку в ролик на Adobe Edge Animate.
Если мы просто нарисовали какую-то кнопку и есть какой-то фон, то если мы будем по ней кликать, то перехода никуда не будет. Чтобы добавить интерактивную ссылку нам нужно выделить эту кнопку, нажать правой кнопкой мыши open action, фол кнопка, она у меня так и называется, и нажать клик, то есть что будет сделано при клике. И вот здесь нам нужно выбрать Open you are raol.
Как добавить ссылки в Adobe Edge Animate
Я покажу в этом видео, как это сделать, ничего сложного нет, но нужно правильно понять, где нужно копировать правильный код и куда его нужно вставить.
Допустим, у вас есть ролик, сделанный в adobe edge animate, при клике на него открывается нужный landing page, он в формате edge animate и сохраненный в папке с исходником и Java-скриптами. Открываем его в любом текстовом редакторе, вы можете пользоваться любыми тестовыми редакторами, например: блокнот и т.д. Читать подробнее →
Как зациклить анимацию в Adobe Edge Animate, то есть как сделать так, чтобы, когда она проигрывалась до конца, она вновь начиналась сначала и было это бесконечно.
adobe edge animate
Здесь можно копировать ключевые кадры, то есть выделяю один кадр, нажимаю cntr+с, нажимаю на нужное поле, нажимаю cntr+v, анимация будет зациклена, то есть не зациклена, а в данном случае из начальной точки переходить опять в начальную. Если я запущу этот ролик, нажму cntr+enter, то видим, что анимация длится всего лишь 1 секунду, она переходит в одну сторону и возвращается в другую.
Я покажу в этом видео, как это сделать, ничего сложного нет, но нужно правильно понять, где нужно копировать правильный код и куда его нужно вставить.
Допустим, у вас есть баннер, сделанный в adobe edge animate, при клике на него открывается нужный landing page, он в формате edge animate и сохраненный в папке с исходником и Java-скриптами. Открываем его в любом текстовом редакторе, вы можете пользоваться любыми тестовыми редакторами, например: блокнот и т.д.
Далее я хочу вставить на сайт данный баннер. Что нужно сделать? Нужно скачать файл index, потом открываем его также в текстовом редакторе, копируем код adobe edge и в конце добавляем сюда код перед «head», далее перед заголовком того места, куда мы будем добавлять наш баннер, перед div. Для более точного выполнения есть инструкция, которая поможет вам: https://docs.google.com/document/d/1-kTj3QhCbzT47-dReqpgVCBN_YuPy3hqxAMp94KcnZ0/edit. После сохраняем и переходим в FTP — сервис, у меня filezilla, находим место хранения вашего сайта и копируем index-папку в ваш файл, который находится на сервере, заменяя текущие файлы. Далее загружаем все Java-скрипты и обновляем сайт. Все готово – анимация работает, и вкладка с landing page тоже открывается.
Так происходит загрузка html5 баннера, который сделан в adobe edge animate, который можно добавить в любую html-страничку. Это совсем не сложно, следуйте согласно инструкции!
Если вам интересны такие уроки, подписывайтесь на мой канал, т.к. в ближайшее время будет много новых роликов – http://www.youtube.com/user/danilfimushkin?sub_confirmation=1
00:32 – допустим, у вас есть баннер, сделанный в adobe edge animate
01:30 – добавляем баннер на сайт
02:09 – добавляем код перед тегом «head»
02:50 – инструкция добавления баннера на сайт
03:31 – загружаем файлы на сервер
05:29 – обновляем сайт и все готово!
Ссылка на исходник баннера https://www.dropbox.com/sh/cwg6bzn7tassgpn/AAAw2EDW7lLYGinKa_nYJ3MBa
Присоединяйтесь и задавайте вопросы:
Скачайте три бесплатных шаблона Muse: http://fimushkin.com/free-landing.html
http://vk.com/adobeedgeanimate
Я вконтакте: http://vk.com/danilfimushkin
Ссылка на это видео: http://youtu.be/c_i1vyuTDm4
На вебинаре я рассказал и показал, как из векторной иллюстрации можно сделать полноценный анимированный баннер.
00:17 – начинаем анимировать векторную иллюстрацию в Edge Animate
14:06 – создаем движение лапами у персонажа
16:54 – преимущества вложенного символа
17:48 – что такое вложенный символ
18:24 – прописывание зацикленной анимации
19:42 – зацикленная анимация готова
23:40 – создаем моргание глаз
26:54 – определяем названия файлов при сохранении
27:57 – анимирование «выпадающего» текста
28:39 – присоединение кривой движения — изменение оси анимации
30:03 – промежуточный итог анимации, создание снежного пейзажа и анимирование снежинки
33:39 – обзор программы Edge Animate
34:52 – домашнее задание
35:25 – как добавить активную ссылку
39:09 – создание нескольких кнопок и прикрепление ссылок
Три бесплатных шаблона Muse: http://fimushkin.com/free-landing.html
Присоединяйтесь и задавайте вопросы: http://vk.com/adobeedgeanimate
Мой блог: http://fimushkin.com/blog
Ссылка на это видео: http://youtu.be/PNYN4Grp_z0
В этом ролике я рассказываю, как использовать символы в Adobe Edge Animate