Декабрь 2017
Автор: Рубрика: Web дизайн Один комментарий

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


Как сделать 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.
  • Выбор вида анимации по кривой движения. Выделяем кадр и внутри выбираем, какая будет анимация линейная или движение по кривой.

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

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

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

 

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

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

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

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

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

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

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

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

Делаем анимацию логотипа для html баннера

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Один комментарий
  • Fishkagaf

    spasibo 3a info

    2017-12-06 в 8:17 | Ответить