Как сделать html баннер

Для создания html баннера подойдет программа adge animate.

Заходим в программу и нажимаем создать новый проект.

В первую очередь определимся с размером баннера.

Сделаем стандартный баннер размером 240 на 400 px.

Размер выставляем в левой части экрана у слоя stage.

Подготовим изображения для баннера.

Готовим изображения в photoshop

Скачиваем картинки из интернета, которые будут участвовать в анимации баннера.

Сделаем баннер для чемпионата мира по футболу 2018 года.

Для этого потребуется четыре изображения официального талисмана волка zabivaka и логотип с кубком.

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

Делаем анимацию в adge animate

Переносим все изображения в adge animate.

1. 1 Оформим логотип. Он состоит из картинки logo и прямоугольника rectangle tool такого же размера. Логотип добавляем внутрь прямоугольника.
2. 2Делаем четыре картинки сверху вниз по очереди анимации. У первой картинки выставим непрозрачность 100 процентов, у других ноль. Перейдем в инструменты в timeline. Разберем каждый.

• auto-keyframe кнопка для создания анимации.
• auto-transition вторая кнопка для создания анимации. При добавлении анимации две кнопки должны быть активными, нажаты.
• toggle pin нажимаем на кнопку и переносим пин на шкале времени, во вторых меняем положения элемента. Отжимаем кнопку pin и проверяем. Если получилась обратная анимация, то выделяем кадр и нажимаем правую кнопку, выбираем invert transition.
• Выбор вида анимации по кривой движения. Выделяем кадр и внутри выбираем, какая будет анимация линейная или движение по кривой.

Продолжаем делать анимацию первой картинки с волком.

Переносим курсор на пол секунды и ставим метки всем изображением add keyframe for opacity.

 

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

Для второй картинки ставим в этот момент прозрачность 100 процентов.

Получилось, первая постепенно погасла, а вторая одновременно появилась.

Для других изображений делаем такие же кадры.

Чтобы посмотреть результат в интернет браузере нажмем комбинацию клавиш ctrl+enter.

Делаем анимацию логотипа.

1. Выделяем прямоугольник и логотип.
2. Зажимаем инструмент pin.
3. Переносим интервал на секунду в бок.
4. Берем прямоугольник и переносим вниз, чтобы он перекрыл картинку.
5. Зажимаем логотип и перетаскиваем вниз к краю.
6. Отжимаем pin и проверяем анимации.

Делаем анимацию таким же способом вверх.

Добавляем текст в html баннер.

Когда логотип вернется в верхнее положение, то все изображения с волком должны стать невидимые.

Добавляем элемент текст на html баннер.

• Текст1 называется zabivaka. В левой части выбираем шрифт и размер шрифта.
• Текст два будет официальный талисман
• Текст три чемпионат мира 2018 года.
• Кнопка подробнее. Кнопку сделаем инструментом rounded rectangle tool. Закруглим углы и наложим любой цвет.

Анимируем текст в adge animate у баннера html

У текста 1 ставим инструмент пин, переносим шкалу времени на секунду и поднимаем элемент текст над баннером.

Отжимаем pin и видим, что текст линейно перемещается с верха в положение бод логотипом.

Чтобы был эффект подскока используем инструмент анимации по кривой ease out и выбираем bounce.

Анимация нажатие на кнопку подробнее

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

1. Используем инструмент пин и перемещаем руку за экран.
2. Когда рука стала над кнопкой, у элемента кнопка делаем цвет синий и shadow тень немного фиолетовой.

Как зациклить html баннер

1. Установим вначале анимации label и назовет его start.
2. Перейдем в конец анимации и установим trigger. Внутри напишем код sym.play (start);

Делаем при наведении на html баннер изменение курсора и ссылку.

Создаем новый прозрачный слой поверх баннера и называем active.

Слева в настройке выберем курсор палец.

Чтобы добавить ссылку нажмем правую кнопку на слое поверх баннера и выберем open action функцию click.

В окошке выберем открывать в новом окне.

Пропишем свою ссылку.

Баннер html готов.

Теперь можно его сохранить и добавить на сайт.

Баннер работает на java скрипте поэтому занимает не большое количество места.

Баннер отображается на всех устройствах без исключения в отличие от flash, где нужен плеер.

В программе adge animate получается делать html баннер быстро и красиво.