Анимация с нуля в Adobe Edge Animate

Создание интерактивного и анимированного веб-контента

А вы хотели бы научится создавать потрясающую анимацию ? Если да, тогда вы на правильном пути. Изучив этот пошаговый видео курс, вы с  нуля без знаний программирования научитесь создавать анимацию уже после первых уроков.  Приобретя бесценные навыки, вы сможете: создавать баннеры для любых сайтов, создавать анимированные сайты и много другое. В уроках я обучаю созданию анимации по последним Web-стандартам HTML5.

Давайте знакомиться

 Меня зовут Федор Васильев.

Я являюсь автором данного видео курса.

Занимаюсь созданием сайтов более пяти лет.

 

Также владею рядом нишевых проектов, таких как

"Портал клубной музыки"  и социальная сеть

 по интересам.

Анимация — метод создания серии снимков, рисунков, цветных пятен, кукол или силуэтов в отдельных фазах движения, с помощью которого во время показа их на экране возникает впечатление движения существа или предмета.

 

Во многих отношениях анимация напоминает процесс создания кинофильмов, при котором непрерывное движение разбиваются на ряд неподвижных изображений, а потом показывают в быстрой последовательности на экране. Разница состоит в том, что аниматоры создают иллюзию движения рисуя каждый кадр и внося мелкие изменения. Как и в кинофильмах, в анимации плёнка движется со скоростью 24 кадра в секунду.

 

Источник: ru.wikipedia.org

 

Что такое анимация?

 

 

Требования к видео курсу!

Все видео уроки построены с помощью специальной программы от компании "Adobe". Для практики вам понадобится программа "Adobe Edge Animate" эту программу вы сможете бесплатно скачать с официального сайта Adobe, и пользоваться ей бесплатно в течении 30 дней! В некоторых уроках вам понадобиться и другие продукты от компании Adobe, а именно, Photoshop, Muse, и Illustrator. Их так же можно скачать бесплатно.

 

01 Adobe Edge Animate

Создание интерактивного и анимированного

веб-контента

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Adobe Photoshop 02

Редактирование и компоновка изображений

 

 

 

 

 

 

 

 

 

 

 

03 Adobe Muse

Создание веб-сайтов без написания кода

 

 

 

 

 

 

 

 

Adobe Illustrator 04

Векторная графика и иллюстрации

  С гордостью представляю вам свой новый курс:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Анимация с нуля

в Adobe Edge Animate

Видеокурс 2015

 

Это пошаговый видеокурс, который состоит из 34 уроков длительностью

 от 3 до 60 минут каждый. Все уроки - это скринкасты (видео, записанное с

 экрана компьютера). В видео уроках наглядно показано шаг за шагом, что

 нужно делать, и я простым понятным языком комментирую все свои

 действия. Курс не имеет возрастных ограничений. Видео уроки будут

 понятны как школьникам, так и людям преклонного возраста.

 

 

 

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

 

 

Первую серию из 10 уроков вы сможете смотреть онлайн, прямо сейчас на моём канале

 

1.Регистрация в Adobe.

                                                                                                 00:03:46 (ч:м:с)

2.Знакомство с программой Adobe Edge Animate,

 и простая анимация.                               00:24:24 (ч:м:с)

3.Продолжаем работать с анимацией

 в Adobe Edge Animate.                              00:19:31 (ч:м:с)

4.Символы и зацикленная анимация

 в Adobe Edge Animate.                             00:06:33 (ч:м:с)

5.Движение вдоль кривой

в  Adobe Edge Animate.                             00:03:21 (ч:м:с)

6.События мыши в Adobe Edge Animate.

                                                                                                  00:13:20 (ч:м:с)

7.Создаем баннер в Adobe Edge Animate

 часть 1.                                                         00:12:45 (ч:м:с)

7.Создаем баннер в Adobe Edge Animate

 часть 2.                                                         00:19:21 (ч:м:с)

7.Создаем баннер в Adobe Edge Animate
 часть 3.                                                          
00:21:29 (ч:м:с)

7.Публикация баннера на сайт CMS Joomla 3.x

  часть 4.                                                       00:06:43 (ч:м:с)

Приятного просмотра за чашкой кофе.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8.Создаем диаграммы в  Adobe Edge Animate.

В этом уроке вы научитесь создавать потрясающие анимированные

диаграммы. Поняв структуру создания подобных диаграмм из урока,

вы без труда сможете реализовать свои уникальные творческие

диаграммы.

 

 

 

          Вот демо, то что я

              сделал в уроке.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

9.Перетаскивание объектов мышью в  Adobe Edge Animate

 часть 2

 

Во втором примере я показываю как сделать простое перемещение

объекта без привязки к чему либо и вращение предмета вокруг своей оси.

 

Демо

 

 

 

 

 

 

 

 

 

 

 

Вращайте значок ВКонтакте мышкой.                                                 Подвигайте значок ОК мышкой.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 9.Перетаскивание объектов мышью в  Adobe Edge Animate.

 

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

 

 

Демо

 

 

 

 

 

 

 

 

Определите кому какой предмет больше

подходит, и мышкой перетащите предмет

туда, где ему место.  Если вы указали

правильно, то предмет закрепится

на этом месте.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

10.Раскраска персонажа в Adobe Edge Animate

Из этого урока вы узнаете, как можно сделать раскраску любого персонажа и использовать это например на детском сайте.

 

 

 

 

 

 

 

 

 

 

 

Демо

 

 

 

 

 

 

 

 

 

 

 

1) Кликнете по любой части медведя                                             2) Выберете цвет из палитры

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Пример 2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

11.Начинаем работу со звуком в Adobe Edge Animate

В этом уроке я покажу вам как можно использовать звуковые (mp3)

файлы в анимации.

 

Демо

 

 

 

 

вот яркий пример, что бы посмотреть что получилось

 

 

 

кликнете на большую черную кнопку.

 

 

 

 

 

 

 

 

 

 

 

11.Разбираемся с настройками плеера в Adobe Edge Animate часть 2

 

Во второй части пятого модуля я покажу стандартные настройки

 плеера Edge Animate. Он имеет весь набор: контроль громкости,

пауза, плей, перемотка. И покажу как сделать простую кнопку из

своих картинок.

 

 

 

 

 

 

 

 

 

Демо

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

12.Добавляем видео файлы в Adobe Edge Animate

 

В этом уроке вы научитесь загружать в программу видео файлы,

а так же манипулировать ими, пример ниже.

 

 

 

Демо

 

 

 

 

 

 

 

 

 

 

 

 

 Кликнете по кнопке "видео" что-бы

 посмотреть анимацию

 

 

 

 

 

 

 

 

 

 

 

 

12.Добавляем видео с youtube в Adobe Edge Animate

 часть 2

Во втором уроке шестого модуля, вы научитесь вставлять видео с youtube. Второй вариант отличается от первого тем, что например, страничка с роликом из ютуб, будет быстрее грузиться чем страничка

с первого примера.

 

 

 

 

Демо

 

 

 

 

 

 

 

 

 

 

 

Кликнете по значкам "youtube"

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

13.Покадровая анимация в Adobe Edge Animate

 

Из этого урока вы узнаете три способа покадровой анимации, и какой

способ лучше подойдет в той или иной ситуации.

 

 

 

Демо

 

 

 

 

 

 

 

 

 

 

 

 

   14.Parallax Scroll привязанный к ползунку в Adobe Edge

   Animate часть 3

 

   В этом уроке я покажу вам параллакс эффект привязанный к ползунку

   браузера, а не к мышке. Этот эффект часто используют на сайтах

   одностраничниках. Я двигаю ползунок, и картинки двигаются в

разные стороны, появляются и исчезают.

 

 

 

Демо

 

 

 

 

 

 

Прокручивайте страницу вниз и вверх,

и смотрите как меняются и двигаются

предметы на зеленом фоне. Это и есть

привязка к ползунку.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

14.Горизонтальный Parallax Scrolling в Adobe Edge Animate

 

В этом модуле мы начнем изучать "Parallax Scrolling"

 

Паралла́кс (греч. παραλλάξ, от παραλλαγή, «смена, чередование») — изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя.

 

На первом примере вы научитесь делать горизонтальный параллакс эффект.

демо

 

Перемещайте мышку на картинке влево

и в право, что бы увидеть эффект "Parallax"

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

14.Parallax Scrolling по оси Х и Y в Adobe Edge Animate часть 2

 

На втором примере я вас научу делать параллакс эффект не только по горизонтали, но и по вертикале.

 

 

 

 

Демо

 

 

 

 

 

 

 

Перемещайте мышку на картинке во все стороны,

что бы увидеть эффект "Parallax"

 

14.Привязка к якорям в Adobe Edge Animate часть 4

 

В этом уроке я расскажу вам про якоря, это уже не параллакс. Якоря нужны что бы быстро попасть в нужную часть страницы, это

очень часто используется на различных сайтах.

 

 

 

 

Демо

 

 

 

 

 

 

 

 

 

Кликнете по названию цвета, и смотрите

как блоки автоматически меняются, это и

есть привязка к якорям.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

15.Создаем слайд-шоу в Adobe Edge Animate

 

В этом уроке вы научитесь делать потрясающее слайд-шоу и

использовать его где угодно, например интегрировать в программу

Adobe Muse.

   Демо

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

15.Создаем слайдшоу в Adobe Edge Animate часть 2

 

Демо 2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

16.Анимация персонажей в Adobe Edge Animate

 

В этом уроке вы научитесь основам анимации движений персонажей.

Для примера я взял персонажей из известной серии мультфильмов

"Looney Tunes".

Демо

 

 

 

 

Porky-Pig                                        Bugs Bunny

 

в начале я сделал Porky-Pig

 

потом я сделал  Bunny

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Вот что в итоге получилось у меня.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

17.Создаем мини сайт в Adobe Edge Animate

 

Вот мы и добрались до финишной черты, в этой серии уроков мы

будем создавать не просто какие-то отдельные элементы, а создадим

не большой анимированный сайт. Такие сайты можно использовать в

качестве визитки. 11 модуль разбит на четыре урока,и я шаг за шагом

на готовом примере показываю процесс создания сайта. В последнем

уроке мы с вами выложим сайт в интернет. Наш сайт будет иметь свой

адрес (домен). После публикации сайта в интернете его можно будет

увидеть в любой точке мира. А здесь вы можете посмотреть на этот

сайт, что я  разбирал в уроке. Кликни тут.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

18.Разбор сайта (анатомия-мышц.рф), сделанного в

Adobe Edge Animate

 

В этом уроке я разберу свой сайт портфолио (анатомия-мышц.рф).

И вы посмотрите как он выглядит изнутри. Это реальный сайт, вы

можете посмотреть его по этому адресу: анатомия-мышц.рф .

Основной макет человека выполнен в программе Edge Animate,

и интегрирован в Adobe Muse. Поняв структуру этого сайта вы без

труда сможете применить эти знания в своих проектах.

 

И это ещё не все!

Вас ждут два

великолепных

бонуса!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Кликнете по круглым кнопочкам чтобы повернуть куб.

 

Внимание ! Данный куб корректно работает в браузере Chrome и Firefox!

На всех сторонах куба можно повесить любой ролик из ютуба, или

картинку. Видео урок + исходники ждут тебя! Этот куб можно вставить

например на сайт Adobe Muse.

3D видео куб в Adobe Edge Animate

Заберите БЕСПЛАТНО бонус

прямо сейчас!

Заберите бонус прямо сейчас!

 

 

                                                                                                      100% гарантия конфиденциальности Ваших данных!

Оставьте свои контактные данные и не

забудьте подтвердить подписку!

бонус урок придет  к вам на почту

автоматически.

 

 

 

 

                                                                                           Урок скачали уже: 1927 чел.

Управление 3D моделью в Adobe Edge Animate

Бонус2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

вращать модель наведя на нее курсор мыши!

 

После прохождения данного видео урока вы сможете использовать

любую 3D модель, и внедрить её куда угодно. Например на сайт, сделанный в Adobe Muse.

 

 Этот замечательный бонус урок + все исходники, доступны моим клиентам, которые оставят развернутый отзыв о видео курсе

"Анимация с нуля в Adobe Edge Animate".

 

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

видео урок.

 fedorvasiliev.ru@mail.ru

Анимация с нуля в Adobe Edge Animate

Важная информация по курсу

 

Курс предназначен для любой ОС

Количество уроков: 34 шт.

Формат видео: MP4

Каждый урок снабжен дополнительными материалами (там, где нужны)

Общий объем курса: 1,77 ГБ

Общая продолжительность видео курса: 643 мин

Дата записи: март 2015 г.

Автор и продюсер: Федор Васильев

 

Так сколько же стоит этот замечательный курс?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Первые 20 счастливчиков смогут купить этот курс всего за 3605 руб.

Торопитесь!

После 20 продаж курс будет стоить 5000 руб.

СНЯТО С ПРОДАЖИ

Доступные способы оплаты:

 

 

 

 

 

 

 

 

 

 

 

Доставка: Курс предоставляется в электронном виде. Сразу после оплаты заказа вам на почтовый ящик придет письмо с ссылкой на закачку курса.

 

Часто задаваемые вопросы:

 

 

    Смогу ли я освоить данный видеокурс?

Видеокурс "Анимация с нуля в Adobe Edge Animate" разработан таким образом, что освоить его

сможет любой новичок, т.е. человек, который никогда ранее не создавал анимацию. Изучение

идет поэтапно: от простого к сложному. Автор видеокурса объясняет каждый сделанный шаг.

Поэтому проблем при изучении у вас возникнуть не должно. Если освоить данный видеокурс у

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

вы сможете задать любые вопросы в рамках видеокурса.

 

Куда я могу обратиться, если в процессе обучения у

меня возникнут вопросы?

 

С любыми вопросами вы можете обратится ко мне, вот мой электронный ящик

fedorvasiliev.ru@mail.ru, но лучше воспользоваться клиентским форумом.

 

Можно ли смотреть данный видеокурс на OS X (Mac OS)?

 

Да. Данный видеокурс можно смотреть как в Windows, так и в OS X (Mac OS).

 

Нужно ли будет производить какие-либо действия для

активации курса?

 

Нет. Курс работает сразу. Никаких ключей и кодов активации вам не понадобится.

 

 

Есть ли физическая версия курса на диске?

 

Нет, курс распространяется только в электронном виде. Размер курса ~ 1.77 Гб.

 

 

Как осуществляется доставка электронной версии курса?

 

Самый быстрый и дешевый вариант доставки. Сразу после оплаты заказа вам на почтовый

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

 

 

Ограничено ли количество компьютеров, на которых я смогу

запустить диск?

 

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

 

 

Не нашли ответ на свой вопрос?

 

Обратитесь к нашему онлайн-консультанту. Кнопка онлайн-консультанта расположена в

нижнем правом углу страницы.

 

 

 

 

?

?

?

?

?

?

?

?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Использование текстов и изображений с данной страницы

без письменного разрешения Федора Васильева запрещено.

По вопросам заказа и оплаты курса можете написать в группу

ВКонтакте, или на почту fedorvasiliev.ru@mail.ru.

© 2015 Все права защищены. Автор: Васильев Федор