Создание банеров для рекламы

Создание анимированного HTML5 баннера для сайта

Для создания анимированного баннера необходимо скачать бесплатную программу NanoFL.

NanoFL — это редактор для создания анимационных баннеров.

http://nanofl.com/downloads/nanofl-4.0.3.exe

 

1. Создание HTML5 баннера в NanoFL

Устанавливаем и запускаем программу NanoFL. Нажимаем правую кнопку мыши в программе NanoFL и выбираем «Document Properties»

В настройках «Document Properties» указываем:

  1. Size – чем меньше ширина и длина, тем легче баннер;
  2. Framerate — чем меньше показатель, тем медленнее анимация;
  3. Scale Mode — Fit (масштаб баннера), Generator – CreateJS;
  4. Properties:
  • HTML — тип баннера;
  •  URL on click: адрес сайта для баннера. Пользователь нажмет на баннер и переместиться по указанному адресу.

Html баннер

 

2. Загрузка картинок для баннера

Чтобы создать анимацию нужны картинки, они будут самозаменятся в html5 баннере.

Три изображения были созданы мной в Paint.NET. Мои Картинки — это фон с текстом для плавной анимации.

Три баннера

 

В верхней панели NanoFL выбираем «File» — «Import» — «Images Into Library (png/jpeg/svg)», находим и загружаем изображения с компьютера.

Картинки для баннера берем из интернета или создаем в бесплатном фоторедакторе.

Загрузка изображений в редактор

 

3. Анимация бывает плавной и мгновенной

  • Плавная — видимая замена элементов;
  • Мгновенная — картинка исчезает без скольжения.

В баннере ниже есть и мгновенная, и плавная анимация.

 

4. Добавление изображений в баннер

Изображения для баннеров идентичного размера (все три картинки у меня имеют размер 400х400).

Нажимаем правую кнопку в NanoFL — «Document Properties» и выставляем в «Size» такой же размер, какой имеют заготовленные изображения для баннера.

Размер баннеров

 

Загруженные изображения в NanoFL отображаются в правом углу, в разделе «Library».

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

Если изображение не попадёт в область баннера, то оно не будет отображаться при просмотре готового баннера.

Вставка изображений в баннер

 

5. Создание анимированного баннера

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

Верхняя шкала с числами нужна для анимации: чем больше число, тем дольше длится анимация.

Выбираем высокое значение на шкале и щелкаем по нему правой кнопкой мыши. Из списка выбираем «Convert to Keyframe».

Convert to Keyframe — это фиксация времени, отведенное для анимации.

Создание анимации для баннера

 

Создаем анимацию на промежутке: от начальной черной точки до созданной черной точки.

Правой кнопкой мышки по промежутку и выбираем «Create Tween»

Анимационная дорожка

 

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

Я убрал из зоны видимости красное изображение! Синее сместил с право на лево, оно проходит через баннер. А последнее белое помещается в баннер.

Анимационное перемещение картинок

 

Переместив изображения, мы создали анимацию. Нажмите «File — Test» для просмотра анимированного баннера в браузере.

Тестирование баннеров

 

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

  • Первая черная точка = это начальное расположение баннеров;
  • Вторая черная точка — конечное расположение баннеров.

Промежуток между ними — это анимация, перемещение изображений из точки А (1 точка) в точку Б (2 точка).

 

6. Сохраняем html баннер

File — Save As… — придумываем название для баннера и жмем сохранить.

Сохраняем баннер на рабочий стол: файлы баннера сохраняются в автоматически созданную папку.

Сохрание баннера в NanoFL

 

7. Загружаем файлы HTML5 баннера на хостинг

Добавление анимированного баннера происходит поэтапно:

  • Загружаем файлы баннера на хостинг;
  • Используем код для отображения HTML5 баннера.

Заходим в аккаунт на хостинге и двигаемся в раздел, где хранятся файлы сайта. У меня этого раздел называется «Файловый менеджер».

Файлы сайта

 

Находим файлы сайта и создаем новую папку в разделе «адрес сайта/public_html». Название новой папки должно не отличаться от названия баннера.

Загружаем файлы баннера в созданную папку. Расположение файлов баннера на сайте идентично расположению файлов баннера на компьютере. Таким же образом создаем дополнительную папку «library» и загружаем файлы, находящиеся в ней .

Вставить HTML5 баннер на сайт

 

8. Вставляем код для отображения баннера на сайте

Баннер можно вставить в любую доступную область — в контент, заголовок, подвал, сайдбар.

<iframe src="адрес баннера" width="ширина баннера" height="высота баннера" frameborder="0" align="center" allowfullscreen="allowfullscreen"></iframe>

Адрес баннера — это место, где хранятся файлы баннера. Мой пример: http://blogzar.ru/blog

blog = это название моей созданной папки, где находятся файлы баннера.

 

Особенности редактора NanoFL

  • С помощью сочетания кнопок на клавиатуре можно управлять процессами в NanoFL. Нажмите две кнопки: «CTRL + Z» для отката действий и «Ctrl + Y» для восстановления действий, произведенных в NanoFL.
  • Называйте баннеры и папки английскими именами, иначе они не отображаются на сайте.
  • Корректируйте скорость анимации с помощью промежутка (от черной до черной точки). В разделе «Document Properties» находится показатель «Framerate», отвечающает за скорость анимации.
  • Щелкните правой кнопкой мышки в редакторе NanoFL, выберите «Document Properties» — Properties.. — в разделе «URL on click» укажите ссылку для баннера. Всегда проделывайте эту процедуру перед созданием баннера, иначе забудете и баннер получится без ссылки.
  • С помощью кода «a href=»…» </a> внедрить ссылку не получится, она прописывается в редакторе NanoFL.

Создание HTML5 баннера — это процедура для тех, кто хочет разрабатывать и внедрять эксклюзивные баннеры на сайты.

Оставить комментарий