Онлайн курсы обучение работы в adobe animate. Создание анимации движения. Что значят цифры и буквы в названиях моделей Wacom

Более семи лет я удалённо работаю с зарубежными заказчиками из США, Канады, Австралии, Германии и других стран. Рисую графические ресурсы и анимацию для игр в Adobe Animate CC . Раньше редактор назывался Adobe Flash Professional CC .

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

Зачем нужен ещё один цикл уроков про рисование в Adobe Flash? Я много лет занимаюсь этим и считаю, что мой опыт может быть полезен начинающим. Особенно тем, кто раньше не рисовал с помощью графического планшета. Если вы хорошо рисуете на бумаге, но никогда не рисовали на компьютере, то мне точно есть, что вам рассказать.

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

Выбор графического планшета

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

Существует много производителей графических планшетов: Wacom, Genius, Huion. Я сталкивался только с первыми двумя. Всего я испробовал уже четыре планшета от Wacom и один от Genius, когда начинал. Я настоятельно рекомендую Wacom — это высокое качество за умеренную цену.

Если нет денег, не покупайте Genius, возьмите самый доступный маленький подержанный Wacom Bamboo Pen . Я использовал практически такой же, модель Wacom Bamboo Pen&Touch S CTH-460. Критических проблем за семь лет использования не было, хороший аппарат, чтобы начать. Если вы можете выделить больше денег, то берите модель покрупнее. Я использую Wacom Bamboo Fun Pen&Touch M CTH-670.

Что значят цифры и буквы в названиях моделей Wacom

Поясню, что значят некоторые цифры и буквы в названии, чтобы вам было проще ориентироваться в модельном парке компании.

Wacom Bamboo Fun Pen&Touch M CTH -6 70

M — размер рабочей области. Существуют S — Small (маленький), M — Medium (средний), L — Large (большой);
CTH — обозначает модельный ряд. Существуют CTL и CTH — любительские модели начального уровня с необязательными кнопками и тачпадом, PTH — профессиональные модели, DTH и DTK — профессиональные модели с встроенным дисплеем;
6 — размер рабочей области в дюймах. Существуют 4 — Small (маленький), 6 — Medium (средний), 8 — Large (большой), а также 13 и больше, но это относится только к планшетам с встроенным дисплеем. Иногда в интернет-магазинах и в объявлениях не указывают буквенный индекс, тогда можно воспользоваться цифровым, чтобы понять габариты устройства;
70 — поколение и модель. Важно понимать, чем больше это число, тем новее устройство. Для сравнения мой старый планшет имеет индекс CTH-460, современный аналог — CTH-490. Поколения отличаются на 10: 460, 470 и так далее.

Размер графического планшета

Когда вы рисуете, активная зона рабочей области очень маленькая. Другими словами стилус постоянно скользит в радиусе маленького круга. Этот круг может немного перемещаться. Со временем образовывается пятно, которое видно, как плотное скопление микроцарапин. Оно показывает, что вы практически не используете периферию устройства, всё происходит по центру.

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

Когда вы работаете на планшете, его рабочая область проецируется на всю ширину монитора. Поэтому, чем больше планшет, тем точнее вы можете наносить мазки. И наоборот, чем больше монитор и чем меньше планшет, тем сложнее и дискомфортнее вам будет рисовать. По опыту могу сказать, что после перехода с размера S на M при работе на 29-дюймовом ультрашироком мониторе, мне стало работать комфортнее на 25-30%. Мне требуется меньше усилий, чтобы нарисовать сложный контур, в целом взаимодействие ощущается более мягким и приятным.

Графические планшеты большего размера должны обеспечить еще более комфортные условия работы, но мне не приходилось работать на L-моделях, могу лишь предположить.

Отличия любительских и профессиональных планшетов Wacom

Покупая про-модель вы получаете беспроводное устройство, изготовленное из более качественного пластика с 2048 уровнями чувствительности к нажатию против 1024 у моделей подешевле, красивейшим дизайном, дополнительными органами управления в виде кнопок и сенсорного кольца. Меня полностью устраивают младшие устаревшие модели серии Bamboo, которые сняты с производства. Разница по стоимости любительской и про-версий составит более двух раз. Таблица расставит все по полочкам:

Настройка Wacom Bamboo Pen & Touch M CTH-670

Перед подключением устройства скачиваем драйвера с официального сайта Wacom .

Перечень моделей	Ссылка на драйвера
Intuos CTL-4100/6100/4100WL/6100WL Intuos Pro PTH-451/651/660/851/860 One CTL-471/671/472/672 Intuos CTL-480/490/680/690 Intuos CTH-480/490/680/690 Intuos 5 PTK-450/650 PTH-450/650/850 Intuos 4 PTK-440/640/840/1240/540WL	Windows macOS
Bamboo Pen&Touch CTH-460/470/471/660/661/670 Bamboo Pen CTL-460/471	Windows macOS

После подключения планшета и установки драйверов запускаем приложение Wacom Preferences , которое можно найти через поиск Windows (Win + S) или в панели управления.

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

На вкладке Tablet можно настроить планшет под правую и левую руку, а также назначить действия для клавиш. Для начала установите их в Disabled , со временем можно будет назначить горячие клавиши.

На следующей вкладке Pen находятся важные параметры:

Tip Feel — чувствительность к нажатию. Оставляйте по центру. В процессе поймёте какая жёсткость вам по душе и настроите по вкусу;
Tracking — режим отслеживания положения стилуса. Устанавливаем Pen Mode — рабочая область планшета растягивается на весь экран. Режим Mouse используется, как замена мыши;
Остальные настройки не столь важны. Pen Buttons позволяет назначить действие на кнопки стилуса. Eraser Feel — чувствительность резинки с обратной стороны стилуса. Не использую эту возможность, так как мне быстрее переключаться с помощью горячих клавиш.

В этой же вкладке в разделе Tracking нажимаем кнопку Mapping... , чтобы настроить проецирование рабочей области планшета на экран монитора. Откроется окно Pen Mode Details .

В разделе Screen Area выбираем Monitor , если у вас несколько мониторов и указываем основной. Если монитор один, то оставляем All Screens

В разделе Scaling обязательно ставим галочку напротив Force Proportions , чтобы рабочая область не растягивалась при проецировании на экран. В этом случае часть рабочей области планшета не будет использоваться, но у нас будут нормальные пропорции 1 к 1. И если вы нарисуете круг, то на экране он отобразится, как круг, а не вытянутый эллипс.

Обязательно ставим галочку напротив Use Windows Ink , чтобы работала чувствительность к нажатию.

На следующей вкладке Touch Options снимаем галочку напротив Enable touch input , чтобы переключить планшет в обычный режим.

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

Animate CC или Flash Professional CC?

Adobe Animate CC — это ребрендинг Adobe Flash Professional CC, в программу добавили несколько нововведений. Ещё со старым названием завоевала огромную популярность среди художников, аниматоров и разработчиков инди-игр. Векторные принципы построения позволяют создавать спрайты для любого разрешения. Для рисования подойдёт любая версия, какую сможете достать. Инструменты рисования не меняются уже много лет, а лишь незначительно улучшаются. Я буду использовать Adobe Animate CC, но всё написанное будет применимо и для старых версий Adobe Flash Professional. К слову, в последнее время компания Adobe перешла на модель помесячной подписки для получения доступа к своим продуктам вместо дорогостоящего одноразового лицензирования. Сейчас цена за использование Adobe Animate CC составляет 20 долларов в месяц.

Первый запуск Adobe Animate CC

После загрузки создаём новый файл и выбираем тип Action Script 3.0 . В этом же окне можно указать параметры сцены:

Width и Height — ширина и высота сцены в пикселях. Выставим в 1920 x 1024, как разрешение в современном мониторе или смартфоне;
Ruler units — единицы измерения, выставляем пиксели;
Frame rate — количество кадров в секунду, оставляем 24;
Background color — цвет фона, выставляем в серый.

Эти настройки можно изменить и после создания документа. Для этого нужно выбрать инструмент Selection Tool (горячая клавиша V), открыть окно Properties и развернуть раздел Properties . Если вы не можете найти это окно, то воспользуйтесь меню Window → Properties или сочетанием клавиш Ctrl + F3.

Настройка горячих клавиш

Чтобы повысить эффективность работы нужно использовать горячие клавиши по максимуму. На первых этапах это требует привыкания и запоминания новых комбинаций клавиш, но в дальнейшем обеспечивает солидный скачок в вашей эффективности. Я переопределил большинство горячих клавиш таким образом, чтобы они находились в правой стороне клавиатуры. Почему именно в правой? Дело в том, что я левша и, соответственно, мне так удобнее. Если вы правша, то вам придётся придумать свою схему. Кроме того, я использую Rapoo E9050 и Apple Wireless Keyboard , которые выполнены в форм-факторе клавиатур для ноутбуков, поэтому если вы используете полноразмерную, то, опять же, потрудитесь и придумайте свою схему — это окупится массой сэкономленного времени — а мою схему рассмотрите, как пример.

Поймите идею: сгруппируйте основные команды на удобной стороне клавиатуры, чтобы обеспечить быстрый доступ без постоянно изменения положения руки. Большую часть времени она должна лежать на одном месте, лишь пальцы "гуляют" в небольшом радиусе, нажимая кнопки. Конечно, останутся и команды, которые требуют смены положения, но их подавляющее меньшинство. Вот моя схема:

Команда	Описание	Старое сочетание	Новое сочетание
Select All	Выбрать всё	Ctrl + A	Ctrl + A, O
Deselect All	Снять выделение	Ctrl + Shift + A	Ctrl + Shift + A, P
Undo	Отменить действие	Ctrl + Z	Ctrl + Z, [, Z
Redo	Повторить действие	Ctrl + Y	Ctrl + Y, ]
Zoom	Масштабирование	Shift + Z, Z	Shift + Z, \
Zoom In	Увеличить изображение	Ctrl + =, Ctrl + Num =	Ctrl + =, Ctrl + Num =, =
Zoom Out	Уменьшить изображение	Ctrl + =, Ctrl + Num =	Ctrl + -, Ctrl + Num -, -
Straighten	Выпрямить выделенные кривые		9
Smooth	Сгладить выделенные кривые		0
Flip Horizontal	Отразить по горизонтали		F
Flip Vertical	Отразить по вертикали		Shift + F
Cut	Вырезать в буфер обмена	Ctrl + X	Ctrl + X, X
Duplicate Symbol...	Клонировать символ		Ctrl + D
Swap Symbol...	Сменить символ		Ctrl + ]

В большинстве случаев новые сочетания не заменяют старые, а дополняют их, вводится несколько новых команд. Произвести настройку нужно через меню Edit → Keyboard Shortcuts... . В поле для поиска вводим название команды, в колонке Shortcut кликаем на пустом месте напротив нужной команды и нажимаем новое сочетание клавиш.

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

Настройка кисти

Brush Tool (горячая клавиша B) — инструмент кисть, самый используемый при рисовании. Настройки сосредоточены в двух окнах:

Настройка кисти закончена, давайте нарисуем что-нибудь.

Рисуем с помощью кисти

Подберите подходящий цвет с помощью окна Color (Ctrl + Shift + F9), выберите инструмент кисть (B) и начните с одного длинного штриха с небольшим усилием, чтобы очертить будущую фигуру. Дальше обведите полученный контур, чтобы сгладить все неровности — кисточка готова.

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

Adobe Animate CC работает на векторных принципах. Все объекты описываются математически и могут масштабироваться без потери качества в отличии от растрового подхода. Это позволяет выполнять манипуляции с векторными объектами, чего мы никогда не сделаем с такой же легкостью в растровом редакторе. Мы можем сглаживать и упрощать контуры, выравнивать кривые линии, изменять пропорции и деформировать графические объекты без потери качества. Каждый штрих автоматически преобразовывается в математические кривые, которые мы можем точно подгонять и изменять.

Чтобы убедится во всём вышесказанном, активируйте инструмент Subselection Tool (горячая клавиша A) и выберите только что нарисованную кисть. Теперь вы можете разглядеть точки векторного контура и даже изменить их.

Заключение

Сегодня мы настроили Adobe Animate CC и готовы к началу рисования. Попрактикуйтесь немного прежде, чем мы продолжим. Научитесь рисовать простые геометрические фигуры без искажений, попробуйте различные цвета и настройки кисти (поэкспериментируйте с параметром Smoothing).

Как добавить интерактивную ссылку в ролик на Adobe Edge Animate.

Если мы просто нарисовали какую-то кнопку и есть какой-то фон, то если мы будем по ней кликать, то перехода никуда не будет. Чтобы добавить интерактивную ссылку нам нужно выделить эту кнопку, нажать правой кнопкой мыши open action, фол кнопка, она у меня так и называется, и нажать клик, то есть что будет сделано при клике. И вот здесь нам нужно выбрать Open you are raol.

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

Допустим, у вас есть ролик, сделанный в adobe edge animate , при клике на него открывается нужный landing page, он в формате edge animate и сохраненный в папке с исходником и Java-скриптами. Открываем его в любом текстовом редакторе, вы можете пользоваться любыми тестовыми редакторами, например: блокнот и т.д.

Как зациклить анимацию в 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 тоже открывается.

Если вам интересны такие уроки, подписывайтесь на мой канал, т.к. в ближайшее время будет много новых роликов – 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 – обновляем сайт и все готово!

Присоединяйтесь и задавайте вопросы:

Скачайте три бесплатных шаблона Muse: http://сайт/free-landing.html

http://vk.com/adobeedgeanimate

Я вконтакте: http://vk.com/danilfimushkin

На вебинаре я рассказал и показал, как из векторной иллюстрации можно сделать полноценный анимированный баннер.

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 – создание нескольких кнопок и прикрепление ссылок

Присоединяйтесь и задавайте вопросы: http://vk.com/adobeedgeanimate

Добавление второго символа или текстового поля в диапазон анимации движения приведет к замене исходного символа в анимации движения. Изменить целевой объект анимации движения можно любым из следующих способов:

перетащите другой символ из библиотеки в диапазон анимации на временной шкале;
используйте команду Изменить > Символ > Заменить символ .

Символ можно удалить из слоя анимации, не удаляя и не разделяя саму анимацию. Позже в анимацию можно будет добавить другой экземпляр символа. Также можно в любое время изменить символ или его тип.

См. также

Компоненты анимации движения

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

это кадр в диапазоне анимации движения, где явно определены одно или несколько значений свойств для целевого анимационного объекта.
Эти свойства могут включать положение альфа (прозрачность), оттенок цвета и т. д.
Для каждого определенного свойства создается отдельный ключевой кадр свойства.
Если во одном кадре задать более одного свойства, то ключевые кадры для каждого из этих свойств будут размещены в этом кадре.
Используйте редактор движения, чтобы просмотреть каждое свойство диапазона анимации и его ключевые кадры свойств.
Чтобы выбрать, какие типы ключевых кадров свойств отображать на временной шкале, из контекстного меню диапазона анимации, щелкните правой кнопкой мыши ключевой кадр свойства и выберите «Просмотреть ключевые кадры».

Целевой объект анимации

Анимация движения имеет один объект в диапазоне анимации, который называется ее целевым объектом. Использование одного целевого объекта в анимации обеспечивает несколько преимуществ:

Анимацию можно сохранить как для повторного использования.
Можно легко перемещать анимацию движения на временной шкале (перетаскивать диапазон анимации в другое место) или в рабочей области.
Чтобы применить новый экземпляр к существующей анимации движения, выполните следующие действия:
- вставьте его в анимацию с целью замены;
- перетащите новый экземпляр из библиотеки;
- используйте команду «Заменить символ».

Объекты и свойства, для которых возможна анимация движения

В число типов объектов, к которым можно применить анимацию движения, входят фрагменты роликов, графические объекты, символы кнопок, а также текстовые поля. Эти объекты могут иметь следующие свойства:

Положение по осям X и Y на плоскости

Положение по оси Z в трехмерном пространстве (только фрагменты роликов)

Вращение на плоскости (вокруг оси z)

Вращение вокруг осей X, Y и Z в трехмерном пространстве (только фрагменты роликов): указывает, что FLA-файл предназначен для ActionScript 3.0 и Flash Player 10 или более поздней версии в параметрах публикации. Adobe AIR также поддерживает трехмерное движение.

Наклон по осям X и Y

Масштаб по осям X и Y

Цветовые эффекты: включает в себя альфа-канал (прозрачность), яркость, тон и расширенные параметры для цветов. Цветовые эффекты можно анимировать только для символов и текста TLF. Анимируя эти свойства, можно добиться плавного появления или изменения цвета объекта. Чтобы создать анимацию движения цветового эффекта для классического текста, преобразуйте текст в символ.

Свойства фильтров (фильтры нельзя применять к графическим символам)

Создание анимации движения

Анимацию движения можно создать одним из трех способов:

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

Создание анимации движения

Анимация движения других свойств с помощью инспектора свойств

Используйте команду Создать анимацию движения , чтобы анимировать большинство свойств экземпляра символа или текстового поля. К таким свойствам относятся, например, поворот, масштабирование, прозрачность или оттенок (только для символов и текста TLF). Например, можно изменить свойство альфа-прозрачности экземпляра символа, чтобы он плавно появлялся на экране. Список свойств, к которым можно применять анимацию движения, приведен в разделе Анимируемые объекты и свойства .

Выделите экземпляр символа или текстовое поле в рабочей области .

Если выделенный фрагмент содержит другие объекты или содержит несколько объектов из слоя, то Animate предлагается преобразовать его в символ фрагмента ролика.

Выберите Вставка > Анимация движения .

Если появится диалоговое окно Преобразовать выделенный фрагмент в символ для анимации , нажмите кнопку «ОК» для преобразования выделенного фрагмента в символ фрагмента ролика.

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

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

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

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); }

timerCount = 5 ;

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

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

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