Создание крутой анимации в adobe edge animate
Как и для большинства операций в Animate СС (раньше этот продукт назывался Flash Professional), для анимации не требуется ActionScript. Однако если необходимо, можно создать анимации с помощью ActionScript.
Animate предоставляет несколько способов для создания анимации и специальных эффектов. Каждый метод предоставляет разные возможности по созданию привлекательного анимированного содержимого.
Animate поддерживает следующие типы анимации:
Воспользуйтесь элементами анимации движения, чтобы задать свойства объекта, такие как положение и альфа-прозрачность в одном кадре, а затем снова в другом кадре. Animate затем интерполирует значения свойств для кадров, находящихся в промежутке между указанными кадрами. Анимация движения полезна в тех случаях, когда анимация состоит из непрерывного движения или преобразования объекта. Анимация движения отображается на временной шкале как непрерывный диапазон кадров, который по умолчанию может быть выбран как один объект. Анимация движения — это мощное средство, которое несложно создать.
Классическая анимация похожа на анимацию движения, но более сложна в создании. Классическая анимация позволяет создавать некоторые анимированные эффекты, которых невозможно добиться с использованием диапазонов анимированных кадров.
Позы обратной кинематики (не используются в Animate)
Позы обратной кинематики позволяют растягивать и поворачивать объекты фигур, а также соединять группы экземпляров символов, чтобы перемещать их одновременно, обеспечивая тем самым естественность движения. После добавления костей к фигуре или группе символов можно изменить положение костей или символы в разных ключевых кадрах. Animate интерполирует положения в переходных рамок.
При анимации формы в отдельном кадре на временной шкале рисуется форма, а в другом кадре эта форма изменяется, либо рисуется новая форма. Animate затем интерполирует фигуры для промежуточных кадров, создавая анимацию одной фигуры, перетекающей в другую.
Такая техника анимации позволяет указывать различные объекты для каждого кадра временной шкалы. Эта техника используется для создания эффекта, при котором создается впечатление быстрого воспроизведения кадров фильма. Эта техника полезна при создании комплексной анимации, где графические элементы каждого кадра должны быть различны.
Частота кадров, скорость воспроизведения анимации, измеряется числом кадров в секунду (fps). При слишком низкой частоте кадров анимация выглядит так, как будто она останавливается и начинается, при слишком высокой частоте кадров происходит размытие деталей анимации. Частота кадров 24 кадра/сек является принятой по умолчанию для новых документов Animate, и обычно именно с такой настройкой достигаются лучшие результаты при отображении веб-страниц. Частота кадров стандартного видео также составляет 24 кадра/сек.
Сложность анимации и производительность компьютера влияют на плавность воспроизведения. Чтобы определить оптимальную частоту кадров, проверьте свои анимации на разных компьютерах.
Поскольку для всего документа Animate указывается одна частота кадров, задайте скорость до начала создания анимации.
Animate отличает анимацию движения от покадровой анимации на временной шкале путем показа различных индикаторов в каждом кадре с содержимым.
На временной шкале появляются следующие индикаторы содержимого кадра:
Диапазон кадров с синим фоном указывает на анимацию движения. Черная точка в первом кадре означает, что диапазону анимации присвоен целевой объект. Черные ромбы указывают последний кадр и другие ключевые кадры свойств. Ключевые кадры свойств — это кадры, содержащие изменения, явно определенные пользователем. Можно выбрать тип отображаемых ключевых кадров свойств, щелкнув диапазон анимации правой кнопкой мыши (Windows) или удерживая клавишу Command (Macintosh) и выбрав из контекстного меню пункт «Показывать ключевые кадры» > тип. По умолчанию Animate отображает все типы ключевых кадров свойств. Все остальные кадры диапазона содержат интерполированные значения, относящиеся к свойствам анимации целевого объекта.
Полая точка в первом кадре указывает на то, что целевой объект анимации движения удален. Диапазон анимации все еще содержит ключевые кадры свойств; ей можно присвоить новый целевой объект.
Диапазон кадров с зеленым фоном указывает на использование слоя позы обратной кинематики (IK). Слои позы содержат каркасы IK и позы. Все позы отмечены на временной шкале черными ромбами. Animate интерполирует положения каркаса в кадрах между позами.
Черная точка с черной стрелкой на голубом фоне на начальном кадре означает классическую анимацию движения.
Пунктирная линия означает, что классическая анимация движения прервана или неполна, например пропущен последний ключевой кадр.
Черная точка с черной стрелкой на светло-зеленом фоне на начальном кадре означает анимацию формы.
Черная точка означает отдельный ключевой кадр. Содержимое кадров светло-серого цвета после отдельного ключевого кадра остается точно таким же, без изменений. Эти кадры содержат вертикальную черную линию и пустой прямоугольник в последнем кадре диапазона.
Маленькая a означает, что кадру назначено действие на панели «Действия».
Красный флажок означает, что кадр содержит метку.
Зеленая двойная косая черта означает, что кадр содержит комментарий.
Золотая узловая точка показывает, что кадр является именованной меткой.
Каждый монтажный кадр в документе Animate может состоять из любого числа слоев временной шкалы. Для упорядочивания содержимого анимационных последовательностей и разделения анимационных объектов используйте слои и папки слоев. Упорядочивание по слоям и папкам предотвращает удаление, соединение или сегментацию перекрывающихся объектов. Чтобы создать анимацию, которая включает одновременное анимированное движение более одного символа или текстового поля, размещайте объекты на отдельных слоях. Можно использовать один слой как фоновый слой для размещения статичных рисунков, а также использовать дополнительные слои для каждого отдельного анимированного объекта.
При создании анимации движения Animate преобразует слой, содержащий выбранный анимированный объект, в слой анимации. Слой анимации обозначается специальным значком, расположенным рядом с названием слоя, на временной шкале.
Если в том же слое, где находится объект анимации, присутствуют другие объекты, Animate добавляет выше или ниже исходного слоя новые слои по мере необходимости. Любые объекты, которые существовали под объектом анимации на исходном слое, переходят на новый слой, лежащий под исходным. Любые объекты, располагавшиеся над объектом анимации на исходном слое, перемещаются в новый слой, который находится над исходным. Animate вставляет эти новые слои между любыми слоями, расположенными на временной шкале. Таким образом, Animate сохраняет исходный порядок наложения всех графических объектов в рабочей области.
Слой анимации может содержать только диапазоны анимации (смежные группы кадров с анимацией движения), а также статические или пустые кадры и ключевые кадры. Каждый диапазон анимации может содержать только единичный целевой объект и необязательную траекторию движения для целевого объекта. Поскольку рисовать в слое анимации невозможно, создайте в других слоях дополнительные анимационные или статические кадры, а затем перетащите их в слой анимации. Чтобы разместить кадровый сценарий в слое анимации, создайте его в другом слое, а затем перетащите в слой анимации. Кадровый сценарий может находится в кадре за пределами самого диапазона анимации. Обычно лучше размещать все кадровые сценарии на отдельном слое, который содержит только ActionScript.
Если в документе содержится несколько слоев, то отслеживание и редактирование объектов на одном или нескольких из них может быть затруднительным. Задача упрощается, если одновременно работать только с содержимым одного слоя. Слои, с которыми вы в данный момент не работаете, можно скрывать или блокировать, нажав на значок с изображением глаза или замка, который расположен рядом с названием слоя на временной шкале. Использование папок слоев способно помочь вам упорядочить слои в виде управляемых групп.
Animate автоматически перемещает объект на его собственный слой анимации после того, как к объекту применено свойство анимации. Также можно самостоятельно распределить объекты по их отдельным слоям. Например, можно самостоятельно распределить объекты при упорядочивании содержимого. Распределение вручную также может пригодится для применения анимации к объектам, для которых нужно точно контролировать перемещение с одного слоя на другой.
При использовании команды «Распределить по слоям» («Модификация» > «Временная шкала» > «Распределить по слоям») Animate размещает каждый выбранный объект на новом отдельном слое. Все невыбранные объекты (в том числе объекты в других кадрах) остаются в исходных слоях.
Команду «Распределить по слоям» можно применить к любому элементу в рабочей области, в том числе к графическим объектам, экземплярам, растровым изображениям, видеороликам и разбитым блокам текста.
О новых слоях создано с помощью команды «Распределить по слоям»
Новые слои, созданные в процессе операции «Распределить по слоям», называются по имени элемента, который содержится в каждом из слоев.
Новый слой, содержащий элемент библиотеки (такой как символ, растровое изображение или видеоклип), получает имя этого элемента.
Новый слой, содержащий именованный экземпляр, получает имя экземпляра.
Новый слой, содержащий символ из разбитого блока текста, именуется, как и этот символ.
Новый слой, содержащий графический объект (который не имеет имени), именуется как Слой1 (или Слой2 и т. д.), потому что графические объекты не имеют имен.
Animate добавляет новые слои под все выбранные слои. Новые слои размещаются сверху вниз в том порядке, в котором были первоначально созданы выбранные элементы. Слои в разбитом тексте размещаются в порядке символов, слева направо, справа налево или сверху вниз. Предположим, необходимо разделить на части текст FLASH и распределить его по слоям. Новые слои, которые называются F, L, A, S и H размещены по нисходящей, и самым верхним среди них является слой F. Эти слои будут размещены сразу под слоем, в котором содержался текст.
"Создание крутой анимации в Adobe Edge Animate"
Adobe Edge Animate — это программа для создания графики, анимации и интерактивного контента для веб-сайтов без знания HTML5, JavaScript и CSS. Для использования как в Adobe Muse, так и отдельно.
Edge Animate доступен, прост в использовании,обладает мощным потенциалом.
И позволяет создавать:
интерактивный контент для сайтов
встраивание видео и аудио
Анимация одинаково хорошо выглядит на планшетах, телефонах и компьютерах.
Встраивается в Adobe Muse
Что внутри курса:
Все уроки записаны в HD- качестве, с отличным звуком.
Все действия видно на компьютере, повторить не составит ни какого труда. Все что нужно- включить ролик и повторять шаг за шагом.
К каждому уроку, где это необходимо, вложены дополнительные материалы на скачивание.
Если у Вас еще нет программы, то Вы легко это исправите, посмотрев урок по установке программы.
Все намного проще, чем Вы можете себе представить сейчас. Главное просто начать делать, остальное приложится.
В курсе есть служба поддержки. Поэтому, если Вам что- то непонятно, Вы можете обратиться за помощью, к он- лайн помощнику или автору курса, в ответ Вы получите письмо с описанием решений Вашей проблемы и подробные рекомендации.
Посмотрите примеры анимации, созданной
в программе Adobe Edge Animate
Очень простой проект.
Зацикленное движение персонажа.
Использование: баннеры, привлечение внимание к отдельным элементам графики сайта.
Сделано в Edge Animate с установкой в Adobe Muse.
Уровень сложности чуть выше.
"Стерео- эффект+ взаимодействие с курсором".
После загрузки страницы, сразу начинается горизонтальное движение и чтобы увидеть этот эффект, перезагрузите страничку в этом месте.
Если подвести курсор, то картинка начинает двигаться за курсором, прекращая свободное движение.
Использование: баннеры, шапки для сайтов.
Сделано в Edge Animate с установкой в Adobe Muse.
Высокий уровень сложности.
Проект известно автора, он мне настолько понравился, что я решила его повторить.
Ссылку на все работы этого автора я дам в обучающем центре.
Анимация со звуковым эффектом, который отключен на этом сайте.
После загрузки страницы, сразу начинается горизонтальное движение и чтобы увидеть этот эффект, перезагрузите страничку в этом месте.
Сделано в Edge Animate с установкой в Adobe Muse.
Какие навыки Вы получаете после прохождения курса
"Создание крутой анимации в Adobe Edge Animate"
Создание анимации любой сложности в Adobe Edge Animate
Рабочее пространство- сцена
Просмотр анимации в браузере
Публиация в html5 на хостинге
Создание баннеров с зацикленной анимацией и текстом с плавным появлением и т.п.
Обработка аудио и видео в Adobe Edge Animate
Интеграция видео и аудио в Adobe Muse
Создание персонального курсора для отдельного элемента баннера или сайта
Как вставить ссылку в проект
Создание анимации движения
Взаимодействие курсора с анимацией
Установка шрифтов к анимации и баннеру
Установка видео конвертера
Как вставить анимацию в wordpress
Анимация вращения объекта
Работа с векторной графикой
Работа с изображениями
Плавное появление и исчезновение объекта
Импорт графики и обработка
Создание фотогалереи для сайта
Настройки- тени,градиенты,включение и выключение эффектов,перспектива,скругление углов
Решил сделать страничку с красивой анимацией, и под руку попалась Edge Animate. Поискав на хабре какие-нибудь статьи по ней, понял что особо никто не писал гайдов, поэтому решил изучать самостоятельно.
В итоге 30 минут знакомства с программой, и на удивление красивый результат.
Adobe Edge Animate распространяется бесплатно, все что нужно это зарегистрировать учетную запись Adobe ID, и установить сам Edge.
Те кто работали с Adobe After Effects, поймут интерфейс достаточно быстро, а так же приятным удивлением будет все те же работающие хоткеи.
Задача : создать анимацию кнопки, которая при нажатии менялась бы из выключенной во включенную, а так же раздвигались дверцы в котором был бы основной контент сайта.
Задача понятна, поехали.
При открытии Edge у нас уже создан элемент Stage, который выставлен на TimeLine(Снизу), в раздел Elements(Справа) и его настройки показаны слева.
Stage это главный див, в котором и будем работать, поэтому меняем его разрешение на нашу рабочую область 1100x600. Рядом с разрешением есть 2 квадратика: Первый это заливка цветом, второй заливка градиентом. К слову, очень удобно реализовано изменение цвета, а так же есть возможность сохранить цвет в палитру.
В настройках Stage убираем галочку с пункта Autoplay, чтобы анимация не запускалась без клика и ставим заливку цвета серым цветом.
Создаем главный див для кнопки, для этого выбираем в верхней панели инструментов овал, и зажимая шифт растягиваем его на 150px.
После того как создали круг, перемещаем его по центру дива(при пересечении главных осей, появляются фиолетовые линии, перетаскиваем круг на их пересечении)
Теперь у нас появился новый див под название Ellipse, который добавился в область тайм лайна, и в раздел Elemets (в этом разделе, как вы поняли из названия, находятся все элементы проекта, здесь можно сразу добавить эвенты к ним, по нажатию на фигурные скобки, а так же управлять вложенностью дивов, путем перетаскивания, что несомненно удобно!)
Сразу меняем название элипса на Button для удобства, это можно сделать по двойному клику на название в области таймлайна, в окошке элементы, а так же в окошке настроек сверху (Несомненно удобно).
Настройки элипса более расширенные по сравнению со Stage.
Большинство функций являются изменением свойств css, можно увидит что изменяет каждая функция если навести на ее значок.
Перед описанием функций, хотел бы рассказать как происходит анимация, и их управление. Она здесь сделана с помощью кейфреймов (ромбиков), рядом с каждой функцией они присутствует. Если мы нажмем на ромб, у нас добавится этот самый кейфрейм на таймлайн, и ему присваивается значение функции которое сейчас выставлено, отодвинув ползунок времени, мы можем создать еще один кейфрейм с другим значением функции, и при воспроизведении анимации, значение функции будем меняться от первого значения кейфрейма до втрого значения. Подробнее я покажу на примере.
Пробежимся быстро по функциям.
В самом верху мы видим название дива, кнопка c — дает возможность прописать класс для него, а двойные скобки прописать эвент.
Ниже раздел отображения элемента.
Глаза, 2 кубика и шкала прозрачности отвечают за css свойства: Display, Overflow, Opactiy.
Position and Size — за расположение и размер дива
Color — за заливку цветом, градиентом, а так же добавление бордера.
Transform — изменение дива относительно точки origin (что бывает очень удобно если див нужно уменьшить относительно центра).
Следующая пачка настроек
Cursor — курсор при наведении
Corners — сглаживание углов (очень удобно, есть возможность сгладить все углы одинаково, либо каждые 4 или 8 сторон по разному, если бы можно было сохранять их как цвет в палитре было бы супер)
Shadow — настройки тени
Filters — разные дополнительные фильтры такие как blur, invert, contrast (но они поддерживаются пока не во всех браузерах)
Clip — маска дива(но только по 4 сторонам)
Accessibiity — добавление атрибутов title и tab index.
Каждую функцию можно анимировать, поэтому все зависит только от вашей фантазии.
Ну а теперь начнем создавать нашу задумку.
Выставляем цветом button темно серый, и применяем функцию shadow чтобы имитировать ее объем
После этого добавляем еще один круг, для внутренней части кнопки с цветом активности.
Тут нам на помощь приходят хоткеи из After Effects, выбираем button и нажимаем Ctrl+D. Переименовываем его в btn_inner, и перетаскиваем его в окне элементы внутрь Button
Теперь мы вложили btn_inner в див Button, и если мы начнем анимировать Button, то btn_inner так же начнет изменяться. Все просто и удобно!
Выключаем Shadow, добавляем в Color цвет бордеру(3й квадратик слева) на красный, и задаем размер 6px. Центрируем наш див, и меняем размер в Transform на 76%. Изменяем цвет на прозрачный, и добавляем Radial градиент
В итоге получаем
Добавляем текст «OFF», ArialBlack 33px, цвет черный, и Shadow красный. Переименовываем в btn_text_off, и засовываем в Button в элементах.
Теперь начнем анимировать. Первым делом добавим к Button эвент(двойные скобочки), справа в элементах. Выбираем click, и нажимаем справа play, теперь по нажатию на див button, у нас будет проигрываться анимация, все просто и элементарно.
Нам нужно изменить shadow у button из dropShadow на InsetShadow, к сожалению добавить несколько shadow в Edge нельзя, поэтому будем хитрить.
Нажимаем на P и у нас в окне таймлайна выбирается элемент pin, он позволяет не создавать самостоятельно каждый кейфрейм, а делать это автоматически. перемещаем ползунок на отметку 0.250 и именяем значение shadow-blur 0. Тем самым у вас получается такая анимация.
Нажимаем еще раз P чтобы выключить pin, перемещаем ползунок на значение 0,5 и в настройки градиента button, и меняем значение как показано на картинке
Добавляем градиент в палитру, и закрываем окошко. Теперь нажимаем опять P, и перемещаемся на отметку 0,250, открываем окно градиента, выбираем градиент из палитры, и меняем из значения на прозрачный не меняя положение точек.
У вас должна получится анимация изменение тени кнопки, проверить можно с помощью клавиш ctrl+enter (и снова привет AE)
Отлично тень меняется, теперь нужно анимировать размер кнопки, т.к. она отдаляется от нас.
Перемещаем ползунок на начало, нажимаем p, выбираем Button, перемещаем на отметку 0.425 и меняем значение transform на 95%.
Так же при создании анимации, можно выбрать как анимация будет происходить, либо линейно, либо по разным шаблонам. Для выбора их, нужно выделить анимацию, и рядом со значком pin нажать на иконку графика. Здесь вы можете поиграться со значениями и выбрать самое подходящее для вас.
Теперь анимируем красный бордер, от 0,250 до 0,500 изменяем значение бордера с красного на голубой.
И получаем примерно так
Содержание текста нельзя анимировать, поэтому сделаем копию текста, и анимируем его прозрачность.
Ctrl+d на тексте, переименовываем в btn_text_on, изменяем цвет на синий, и тень на темно синюю.
С помощью нашего любимого пина, анимируем прозрачность(сверху под глазом), у btn_text_off с 0,115 до 0,305; значения с 1 до 0. У btn_text_on
с 0,250 до 0,425; значения с 0 до 1, чтобы одно на другое немножко заезжало
Проверяем ctrl+enter, все супер.
Осталось сделать двери. Создаем 2 квадрата размером с половину ширины, один ставим слева, другой справа. Соответственно Left_door, Right_door. Цвет для заливки берем из бэкграунда, благо есть палитра которой можно воспользоваться, а сам бэкграунд делаем темнее.
А теперь вкладываем button в left_door, т.к. кнопка будет уезжать вместе с дверью влево. Перемещение в 1 клик, плевое дело, все как нужно.
С помощью пина анимируем левую и правую. Анимируем 0,600 до 3,0 на -480px для левой и для для правой двери 1030px. Выбираем обе анимации и выбираем Easing EasyInOut — Quart.
Чтобы сделать паз для кнопки в правой двери воспользуемся маской, и обрежим круг на половину. Для этого ctrl+d на button, удаляем все вложенные дивы в него, а так же все кейфреймы, и переименовываем в door_right_btn, вкладываем его в Right_door и перемещаем ползунок времени вперед.
Теперь, убираем тень, и заливаем более темным цветом. Переходим в раздел clip, и ставим значение 75 слева. Для эффектности добавляем inset Shadow 7px полупрозрачным черным. А так же анимируем DropShadow у Left_door и Right_door.
И вот наш результат
По окончанию работы под превью окном справа появляется желтый треугольник, там нас предупреждают какие функции в каких браузерах не работают, что несомненно так же удобно.
Чтобы прописать css стили из edge, нужно зайти в event Stage, выбрать compositionReady и прописать
Итого на все про все 30 минут
Все что получилось уже можно редактировать в блокноте, и накручивать что угодно. А на деле мы имеем удобный и быстрый инструмент для создания красивой кросбраузерной анимации.
Написав этот топик, я не претендую на самый простой или самый быстрый способ создания подобной анимации, я просто рассказал что Adobe Edge Animate очень удобная и быстро осваиваемая программа, в которой может разобраться любой человек без опыта работы с JS.
То что получилось можно посмотреть здесь
Пишите вопросы, постараюсь на все ответить, если тема интересная, в ближайшем будущем могу сделать еще пару уроков по Adobe Edge
Решил сделать страничку с красивой анимацией, и под руку попалась Edge Animate. Поискав на хабре какие-нибудь статьи по ней, понял что особо никто не писал гайдов, поэтому решил изучать самостоятельно.
В итоге 30 минут знакомства с программой, и на удивление красивый результат.
Adobe Edge Animate распространяется бесплатно, все что нужно это зарегистрировать учетную запись Adobe ID, и установить сам Edge.
Те кто работали с Adobe After Effects, поймут интерфейс достаточно быстро, а так же приятным удивлением будет все те же работающие хоткеи.
Задача : создать анимацию кнопки, которая при нажатии менялась бы из выключенной во включенную, а так же раздвигались дверцы в котором был бы основной контент сайта.
Задача понятна, поехали.
При открытии Edge у нас уже создан элемент Stage, который выставлен на TimeLine(Снизу), в раздел Elements(Справа) и его настройки показаны слева.
Stage это главный див, в котором и будем работать, поэтому меняем его разрешение на нашу рабочую область 1100x600. Рядом с разрешением есть 2 квадратика: Первый это заливка цветом, второй заливка градиентом. К слову, очень удобно реализовано изменение цвета, а так же есть возможность сохранить цвет в палитру.
В настройках Stage убираем галочку с пункта Autoplay, чтобы анимация не запускалась без клика и ставим заливку цвета серым цветом.
Создаем главный див для кнопки, для этого выбираем в верхней панели инструментов овал, и зажимая шифт растягиваем его на 150px.
После того как создали круг, перемещаем его по центру дива(при пересечении главных осей, появляются фиолетовые линии, перетаскиваем круг на их пересечении)
Теперь у нас появился новый див под название Ellipse, который добавился в область тайм лайна, и в раздел Elemets (в этом разделе, как вы поняли из названия, находятся все элементы проекта, здесь можно сразу добавить эвенты к ним, по нажатию на фигурные скобки, а так же управлять вложенностью дивов, путем перетаскивания, что несомненно удобно!)
Сразу меняем название элипса на Button для удобства, это можно сделать по двойному клику на название в области таймлайна, в окошке элементы, а так же в окошке настроек сверху (Несомненно удобно).
Настройки элипса более расширенные по сравнению со Stage.
Большинство функций являются изменением свойств css, можно увидит что изменяет каждая функция если навести на ее значок.
Перед описанием функций, хотел бы рассказать как происходит анимация, и их управление. Она здесь сделана с помощью кейфреймов (ромбиков), рядом с каждой функцией они присутствует. Если мы нажмем на ромб, у нас добавится этот самый кейфрейм на таймлайн, и ему присваивается значение функции которое сейчас выставлено, отодвинув ползунок времени, мы можем создать еще один кейфрейм с другим значением функции, и при воспроизведении анимации, значение функции будем меняться от первого значения кейфрейма до втрого значения. Подробнее я покажу на примере.
Пробежимся быстро по функциям.
В самом верху мы видим название дива, кнопка c — дает возможность прописать класс для него, а двойные скобки прописать эвент.
Ниже раздел отображения элемента.
Глаза, 2 кубика и шкала прозрачности отвечают за css свойства: Display, Overflow, Opactiy.
Position and Size — за расположение и размер дива
Color — за заливку цветом, градиентом, а так же добавление бордера.
Transform — изменение дива относительно точки origin (что бывает очень удобно если див нужно уменьшить относительно центра).
Следующая пачка настроек
Cursor — курсор при наведении
Corners — сглаживание углов (очень удобно, есть возможность сгладить все углы одинаково, либо каждые 4 или 8 сторон по разному, если бы можно было сохранять их как цвет в палитре было бы супер)
Shadow — настройки тени
Filters — разные дополнительные фильтры такие как blur, invert, contrast (но они поддерживаются пока не во всех браузерах)
Clip — маска дива(но только по 4 сторонам)
Accessibiity — добавление атрибутов title и tab index.
Каждую функцию можно анимировать, поэтому все зависит только от вашей фантазии.
Ну а теперь начнем создавать нашу задумку.
Выставляем цветом button темно серый, и применяем функцию shadow чтобы имитировать ее объем
После этого добавляем еще один круг, для внутренней части кнопки с цветом активности.
Тут нам на помощь приходят хоткеи из After Effects, выбираем button и нажимаем Ctrl+D. Переименовываем его в btn_inner, и перетаскиваем его в окне элементы внутрь Button
Теперь мы вложили btn_inner в див Button, и если мы начнем анимировать Button, то btn_inner так же начнет изменяться. Все просто и удобно!
Выключаем Shadow, добавляем в Color цвет бордеру(3й квадратик слева) на красный, и задаем размер 6px. Центрируем наш див, и меняем размер в Transform на 76%. Изменяем цвет на прозрачный, и добавляем Radial градиент
В итоге получаем
Добавляем текст «OFF», ArialBlack 33px, цвет черный, и Shadow красный. Переименовываем в btn_text_off, и засовываем в Button в элементах.
Теперь начнем анимировать. Первым делом добавим к Button эвент(двойные скобочки), справа в элементах. Выбираем click, и нажимаем справа play, теперь по нажатию на див button, у нас будет проигрываться анимация, все просто и элементарно.
Нам нужно изменить shadow у button из dropShadow на InsetShadow, к сожалению добавить несколько shadow в Edge нельзя, поэтому будем хитрить.
Нажимаем на P и у нас в окне таймлайна выбирается элемент pin, он позволяет не создавать самостоятельно каждый кейфрейм, а делать это автоматически. перемещаем ползунок на отметку 0.250 и именяем значение shadow-blur 0. Тем самым у вас получается такая анимация.
Нажимаем еще раз P чтобы выключить pin, перемещаем ползунок на значение 0,5 и в настройки градиента button, и меняем значение как показано на картинке
Добавляем градиент в палитру, и закрываем окошко. Теперь нажимаем опять P, и перемещаемся на отметку 0,250, открываем окно градиента, выбираем градиент из палитры, и меняем из значения на прозрачный не меняя положение точек.
У вас должна получится анимация изменение тени кнопки, проверить можно с помощью клавиш ctrl+enter (и снова привет AE)
Отлично тень меняется, теперь нужно анимировать размер кнопки, т.к. она отдаляется от нас.
Перемещаем ползунок на начало, нажимаем p, выбираем Button, перемещаем на отметку 0.425 и меняем значение transform на 95%.
Так же при создании анимации, можно выбрать как анимация будет происходить, либо линейно, либо по разным шаблонам. Для выбора их, нужно выделить анимацию, и рядом со значком pin нажать на иконку графика. Здесь вы можете поиграться со значениями и выбрать самое подходящее для вас.
Теперь анимируем красный бордер, от 0,250 до 0,500 изменяем значение бордера с красного на голубой.
И получаем примерно так
Содержание текста нельзя анимировать, поэтому сделаем копию текста, и анимируем его прозрачность.
Ctrl+d на тексте, переименовываем в btn_text_on, изменяем цвет на синий, и тень на темно синюю.
С помощью нашего любимого пина, анимируем прозрачность(сверху под глазом), у btn_text_off с 0,115 до 0,305; значения с 1 до 0. У btn_text_on
с 0,250 до 0,425; значения с 0 до 1, чтобы одно на другое немножко заезжало
Проверяем ctrl+enter, все супер.
Осталось сделать двери. Создаем 2 квадрата размером с половину ширины, один ставим слева, другой справа. Соответственно Left_door, Right_door. Цвет для заливки берем из бэкграунда, благо есть палитра которой можно воспользоваться, а сам бэкграунд делаем темнее.
А теперь вкладываем button в left_door, т.к. кнопка будет уезжать вместе с дверью влево. Перемещение в 1 клик, плевое дело, все как нужно.
С помощью пина анимируем левую и правую. Анимируем 0,600 до 3,0 на -480px для левой и для для правой двери 1030px. Выбираем обе анимации и выбираем Easing EasyInOut — Quart.
Чтобы сделать паз для кнопки в правой двери воспользуемся маской, и обрежим круг на половину. Для этого ctrl+d на button, удаляем все вложенные дивы в него, а так же все кейфреймы, и переименовываем в door_right_btn, вкладываем его в Right_door и перемещаем ползунок времени вперед.
Теперь, убираем тень, и заливаем более темным цветом. Переходим в раздел clip, и ставим значение 75 слева. Для эффектности добавляем inset Shadow 7px полупрозрачным черным. А так же анимируем DropShadow у Left_door и Right_door.
И вот наш результат
По окончанию работы под превью окном справа появляется желтый треугольник, там нас предупреждают какие функции в каких браузерах не работают, что несомненно так же удобно.
Чтобы прописать css стили из edge, нужно зайти в event Stage, выбрать compositionReady и прописать
Итого на все про все 30 минут
Все что получилось уже можно редактировать в блокноте, и накручивать что угодно. А на деле мы имеем удобный и быстрый инструмент для создания красивой кросбраузерной анимации.
Написав этот топик, я не претендую на самый простой или самый быстрый способ создания подобной анимации, я просто рассказал что Adobe Edge Animate очень удобная и быстро осваиваемая программа, в которой может разобраться любой человек без опыта работы с JS.
То что получилось можно посмотреть здесь
Пишите вопросы, постараюсь на все ответить, если тема интересная, в ближайшем будущем могу сделать еще пару уроков по Adobe Edge
Описание моего опыта переезда с 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.
Итого
Жить можно, пользоваться можно, тормоза терпеть — нельзя. Для моего основного клиента по субподряду было введено ограничение — не больше 5 сцен на один баннер, иначе все начинает дико тормозить на большом новостном сайте с кучей баннерных мест. Flash очень давно и крайне быстро отрисовывается видеокартой любого пошиба, а Священный Грааль в виде магических аббревиатур HTML5 и CSS3 пока что сделан из папье-маше в плане анимации и интерактивных элементов. В том числе, на мобильных девайсах, ради которых Flash якобы и хоронят, производительность подобного рода роликов вызывает серьезные сомнения. Еще ни один стандарт порвут, пока flash окончательно похоронят.
Читайте также: