Для создания html баннера подойдет программа adge animate.
Заходим в программу и нажимаем создать новый проект.
В первую очередь определимся с размером баннера.
Сделаем стандартный баннер размером 240 на 400 px.
Размер выставляем в левой части экрана у слоя stage.
Подготовим изображения для баннера.
Содержание статьи
Готовим изображения в photoshop
Скачиваем картинки из интернета, которые будут участвовать в анимации баннера.
Сделаем баннер для чемпионата мира по футболу 2018 года.
Для этого потребуется четыре изображения официального талисмана волка zabivaka и логотип с кубком.
Обработаем изображения в фотошопе, чтобы они занимали меньше места на диске.
Делаем анимацию в adge animate
Переносим все изображения в adge animate.
- 1 Оформим логотип. Он состоит из картинки logo и прямоугольника rectangle tool такого же размера. Логотип добавляем внутрь прямоугольника.
- 2Делаем четыре картинки сверху вниз по очереди анимации. У первой картинки выставим непрозрачность 100 процентов, у других ноль. Перейдем в инструменты в timeline. Разберем каждый.
- auto-keyframe кнопка для создания анимации.
- auto-transition вторая кнопка для создания анимации. При добавлении анимации две кнопки должны быть активными, нажаты.
- toggle pin нажимаем на кнопку и переносим пин на шкале времени, во вторых меняем положения элемента. Отжимаем кнопку pin и проверяем. Если получилась обратная анимация, то выделяем кадр и нажимаем правую кнопку, выбираем invert transition.
- Выбор вида анимации по кривой движения. Выделяем кадр и внутри выбираем, какая будет анимация линейная или движение по кривой.
Продолжаем делать анимацию первой картинки с волком.
Переносим курсор на пол секунды и ставим метки всем изображением add keyframe for opacity.
Переносим курсор на секунду и вставим у первой картинки непрозрачность ноль, ставим метку.
Для второй картинки ставим в этот момент прозрачность 100 процентов.
Получилось, первая постепенно погасла, а вторая одновременно появилась.
Для других изображений делаем такие же кадры.
Чтобы посмотреть результат в интернет браузере нажмем комбинацию клавиш ctrl+enter.
Делаем анимацию логотипа.
- Выделяем прямоугольник и логотип.
- Зажимаем инструмент pin.
- Переносим интервал на секунду в бок.
- Берем прямоугольник и переносим вниз, чтобы он перекрыл картинку.
- Зажимаем логотип и перетаскиваем вниз к краю.
- Отжимаем pin и проверяем анимации.
Делаем анимацию таким же способом вверх.
Добавляем текст в html баннер.
Когда логотип вернется в верхнее положение, то все изображения с волком должны стать невидимые.
Добавляем элемент текст на html баннер.
- Текст1 называется zabivaka. В левой части выбираем шрифт и размер шрифта.
- Текст два будет официальный талисман
- Текст три чемпионат мира 2018 года.
- Кнопка подробнее. Кнопку сделаем инструментом rounded rectangle tool. Закруглим углы и наложим любой цвет.
Анимируем текст в adge animate у баннера html
У текста 1 ставим инструмент пин, переносим шкалу времени на секунду и поднимаем элемент текст над баннером.
Отжимаем pin и видим, что текст линейно перемещается с верха в положение бод логотипом.
Чтобы был эффект подскока используем инструмент анимации по кривой ease out и выбираем bounce.
Анимация нажатие на кнопку подробнее
После того как прошла анимация текста, должна выехать рука и нажать на кнопку подробнее, при этом кнопка изменит цвет и появится внешнее свечение.
- Используем инструмент пин и перемещаем руку за экран.
- Когда рука стала над кнопкой, у элемента кнопка делаем цвет синий и shadow тень немного фиолетовой.
Как зациклить html баннер
- Установим вначале анимации label и назовет его start.
- Перейдем в конец анимации и установим trigger. Внутри напишем код sym.play (start);
Делаем при наведении на html баннер изменение курсора и ссылку.
Создаем новый прозрачный слой поверх баннера и называем active.
Слева в настройке выберем курсор палец.
Чтобы добавить ссылку нажмем правую кнопку на слое поверх баннера и выберем open action функцию click.
В окошке выберем открывать в новом окне.
Пропишем свою ссылку.
Баннер html готов.
Теперь можно его сохранить и добавить на сайт.
Баннер работает на java скрипте поэтому занимает не большое количество места.
Баннер отображается на всех устройствах без исключения в отличие от flash, где нужен плеер.
В программе adge animate получается делать html баннер быстро и красиво.