Как создать и разместить флеш баннер на сайте

Здравствуйте, уважаемые друзья. Сегодня поговорим об инструментах, которые позволяют создавать флеш баннеры для сайтов. На текущий момент достаточно много всевозможных программ и сервисов для создания баннеров. А услуг по созданию баннеров ещё больше. Только вот минимальная стоимость баннера на заказ составляет примерно 2000 рублей. А бесплатные программы и сервисы имеют свои ограничения в виде урезанных функциональных возможностей или ссылки на готовом баннере.

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

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

В отличие от обычных анимированных баннеров в формате gif, флеш баннеры позволяют создать более яркие эффекты, которые очень красиво смотрятся. Хотя я всё же отдаю предпочтение баннерам в формате gif. Кому интересно почему, поделюсь в комментариях.

А ещё есть баннеры в формате html5, которые можно создать в бесплатном редакторе Google Web Designer. Эти баннеры тоже эффектно смотрятся.

Материал статьи достаточно объемный, поэтому сразу предлагаю посмотреть видеоурок, так будет легче разобраться с материалом.

Что необходимо для самостоятельного создания флеш баннера.

  1. Прежде всего, вам понадобится программа или оплаченный аккаунт в сервисе по созданию баннеров. В качестве примера программного обеспечения рассмотрим две программы Adobe Flash Professional и Aleo Flash Intro Banner Maker.

Adobe Flash Professional является законодателем моды. Потому как именно компания Adobe разработала технологию flash – создания анимированной графики на основе векторных изображений. В этой программе можно создать очень красивые и в то же время очень сложные анимированные сюжеты. Нужно лишь начать изучать эту программу и с каждым днём у вас будет получаться всё лучше и лучше.

Aleo Flash Intro Banner Maker я выбрал не просто так, в отличие от законодателя моды, эта программа позволяет создавать баннеры в считаные минуты. Достаточно переключаться от раздела к разделу и выбирать подходящие эффекты.

  1. Также понадобятся графические заготовки. Эти элементы вы можете подготовить в графическом редакторе. А можете найти и на просторах интернета.
  2. И третий момент, который нельзя забывать – это наличие плана. Хорошо продуманный план позволит создать привлекательный баннер, который сможет привлечь внимание посетителей.

Создание флеш баннера в Adobe Flash Professional.

Это очень мощный инструмент для создания flash анимации. Впрочем, эта программ так же, как фотошоп выделяется на фоне конкурентов. Оно и понятно, обе программы созданы одной компанией.

Программа платная, но можно установить 30 дневную бесплатную версию. Чтобы скачать последнюю версию программы, нужно перейти на официальный сайт Adobe и зарегистрироваться в Creative Cloud, нажав по ссылке «Бесплатная пробная версия». После регистрации программа автоматически скачается и будет готова к работе.

Регистрация в Adobe
Регистрация в Adobe

Регистрационная форма очень простая.

Заполнение регистрационной формы
Заполнение регистрационной формы

Запустив программу нужно выбрать тип рабочего документа. Так как в дальнейшем в баннере будет ссылка, то сразу можно выбрать «ActionScript 3.0».

Выбор рабочего документа
Выбор рабочего документа

Далее, нужно указать размеры будущего баннера. Для этого на вкладке «Свойство» задайте параметры ширины и высоты.

Указываем размер баннера
Указываем размер баннера

Для того чтобы добавить изображения в баннер просто перетащите нужное изображение из «Проводника» в рабочую область программы. Только создавайте отдельные слои для каждого изображения. Так будет проще в дальнейшем работать с каждым элементом баннера.

Вставляем изображения в баннер
Вставляем изображения в баннер

Разместив все элементы баннера, можно приступать к созданию анимации (движения). В одном уроке невозможно показать всех возможностей, поэтому разберём создание простых движений.

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

Для этого графический элемент помещается за пределы баннера, после на нём нужно нажать правую кнопку мышки и выбрать пункт «Создать анимацию движения».

Создание анимации движения
Создание анимации движения

Перемещая графический элемент на исходное место в границах баннера, вы создаёте движение. Траектория движения появится на изображении. Её можно менять, изменяя положение точек.

Траектория движения
Траектория движения

Подобные манипуляции проделываете и с остальными элементами баннера. Время отображения эффекта вы меняете на временной шкале.

Для того чтобы элемент появился в баннере и продолжал оставаться на виду, пока появляются следующие элементы нужно «Добавить пустой ключевой кадр», нажав правую кнопу мышки на временной шкале данного элемента.

Добавление пустого ключевого кадра
Добавление пустого ключевого кадра

После того как все элементы настроены. Нужно добавить ссылку. В качестве примера рассмотрим создание кнопки и добавление ссылки.

Итак, выбираем изображение кнопки и на закладке «Свойства» задаём название, выбираем тип «Кнопка».

Создание кнопки
Создание кнопки

Теперь пришло время для создания ссылки. Для этого устанавливаете курсор на первый кадр кнопки и нажимаете F9. В открывшемся окне, жмём на кнопку «Фрагмент кода». В следующем окне, жмём на папку «ActionScript»«Действия»«Нажмите для перехода к веб-странице».

Создание действия
Создание действия

Появится уже готовый код, в котором нужно заменить ссылку. Меняете и закрываете эти окна.

Вставка ссылки
Вставка ссылки

Проверяете работу баннера Ctrl+Enter. И если всё вас устраивает. Можно публиковать баннер.

Для того чтобы сохранить баннер и опубликовать его отрываем пункт меню «Файл»«Параметры публикации». Далее, выбираете форматы баннера и изображений, папку для сохранения и задаёте имя баннера. После чего жмёте на кнопку «Опубликовать».

Публикация баннера в Adobe
Публикация баннера в Adobe

Всё баннер готов и его можно вставлять на сайт. Но об этом после обзора второй программы, в конце статьи.

А так выглядит баннер, который я сделал в качестве примера:

Создание флеш баннера в Aleo Flash Intro Banner Maker.

Данный программный продукт платный. Полная версия стоит 39,95$. Но, вы можете скачать и пробную версию. Подробная информация на официальном сайте, здесь.

Если вам необходимо создавать простые flash баннеры, то это то, что вам нужно.

Скачав пробную версию, после установки программы, при запуске будет появляться окно с предложением купить или зарегистрировать вашу копию. Для начала работы с программой нужно нажать на кнопку «Continue Evaluation». Для оценки возможностей программы у вас есть 30 дней.

Запуск пробной версии
Запуск пробной версии

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

Первым делом нужно выбрать размер баннера. Для этого переходите в раздел «Size and sound», где задаёте параметры ширины и высоты в пикселях.

Основные свойства баннера
Основные свойства баннера

В этом же разделе вы можете задать параметры бордюра, установить фоновую музыку и указать качество графических изображений.

Далее, нужно сделать фон для баннера. Для этого открываете раздел «Background», где можно отключить фон, выбрать однотонную или градиентную заливку. А также выбрать изображения, которые будут представлены фоном для баннера.

Свойства фона
Свойства фона

Для выбора графических изображений нужно нажать на кнопку «Add». Изображений может быть несколько. Также в этом разделе вы можете настроить и позицию каждого изображения.

Если вы желаете создать анимационный эффект для фона, то переходите в раздел «Effect», где можно выбрать один или несколько эффектов для фона. Смотрятся они довольно эффектно.

Эффекты фона
Эффекты фона

Если эффекты вам не нужны, просто уберите галочку «Add background effect» и эффекты исчезнут.

Следующий раздел «Text, image and SWF» позволяет добавлять в баннер текст, изображение и другие анимации. Для добавления необходимого элемента нужно нажать на соответствующие кнопки «Add image», «Add text», «Add SWF».

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

Вставка и настройка элементов
Вставка и настройка элементов

Ссылку вы можете добавить на один из элементов баннера, для этого в настройках элементов есть специальная закладка «Web link», а также можете прикрепить ссылку на весь баннер. Сделать это можно в разделе «Web Links».

Создание ссылки
Создание ссылки

На выбор представлено два варианта, ссылка срабатывает по клику и после проигрывания анимации. Но я всё, же предпочитаю закреплять ссылку за графическим элементом, таким как кнопка.

После того как элементы баннера настроены и ссылка добавлена, можно переходить к публикации баннера. Для этого открываете раздел «Publish to Banner». И нажимаете на кнопку «Publish». Далее, нужно выбрать формат баннера, в нашем случае это SWF. Остальные параметры можно не трогать, они настроены оптимально. И для получения баннера нажимаете на кнопку «ОК».

Публикация баннера в Aleo
Публикация баннера в Aleo

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

Код для размещения баннера на сайте
Код для размещения баннера на сайте

И вот готовый баннер:

Установка флеш баннера на сайт WordPress

После того как баннер готов, есть файл в формате SWF. Можно приступать к размещению баннера на сайте.

Первым делом нужно загрузить файл с баннером на ваш хостинг. Сделать это можно через файловый менеджер хостинга или через ftp-соединение.

Примечание: при загрузке через административную панель WordPress появляется ошибка «Извините, тип этого файла не разрешён из соображений безопасности». Поэтому загружайте одним из вышеуказанных способов.

Загрузив файл можно приступать к размещению баннера. Баннер можно разместить в любом месте сайта, всё зависит от ваших навыков. Но наиболее распространённые места это шапка сайта, подвал, сайтбар и контент. Кстати, в статьях на рекламу кликают гораздо чаще, чем за её пределами.

Итак, для размещения баннера вам потребуется один из этих кодов:

<object data="Путь к файлу/ban.swf" type="application/x-shockwave-flash" width="728" height="90"><param name="movie" value="Путь к файлу/ban.swf" /></object>
<embed src="Путь к файлу/aleo_ban.swf" type="application/x-shockwave-flash" width="728" height="90"></embed>

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

Если вы размещаете баннер в статье, то делайте это через вкладку «Текст».

Вставка кода в статью
Вставка кода в статью

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

А у меня на этом сегодня всё, статья получилась объемная. Некоторые мелочи, которые не описал в статье, я раскрыл в видеоуроке. Ну и, конечно же, если будут вопросы, задавайте их в комментариях. Всем желаю удачи и до встречи в новых статьях и видеоуроках.

С уважением, Максим Зайцев.

Понравилась статья? Поделиться с друзьями:
Комментарии: 22
  1. Николай

    Добрый день!
    Подскажите пожалуйста, столкнулся с такой проблемой: после того как опубликовал баннер в swf, закинул его в корень сайта, дальше я хочу его разместить в правом сайдбаре, вставляю код, баннер показывается на главной, все отлично. Но на других страницах сайта его нет, просто пустой квадрат и все.
    Как быть?
    Спасибо.

    1. Максим Зайцев (автор)

      Здравствуйте, Николай. Если баннер отображается на главной странице, то скорей всего необходимо очитить кэш браузера или если сайт кэшируется, то сбросить его. А ещё попробуйте запустить сайт с другого браузера поддерживающего отображение flash.

  2. Андрей Зимин

    Добрый день, Максим. Со второй программой я работал, действительно удобная программа, и баннеры получаются довольно быстро. На счет первой, можно подумать.

    1. Максим Зайцев (автор)

      Андрей, день добрый. Adobe Flash Professional — это профессиональное средство разработки. В этой программе можно создать очень крутые вещи, но и изучение этой программы займёт больше времени.
      А вот Aleo Flash Intro Banner Maker — это идеальное решение для быстрого и привлекательного создания баннеров.
      И тут каждый сможет выбрать для себя подходящий вариант.

      1. Татьяна

        И всё же, почему вы предпочитаете делать анимацию в фотошопе, в чём преимущества такого способа?
        Татьяна.

        1. Максим Зайцев (автор)

          Баннеры созданные в фотошопе, в формате gif или jpg, максимально оптимизированы, то есть не снижают скорости загрузки сайта. И такие баннеры будут отображаться в любом браузере. Хотя они уступают по красоте и эффектам flash баннерам.

  3. Кирилл

    Как то не очень баннеры получились

    1. Максим Зайцев (автор)

      Добрый вечер, Кирилл. Многое зависит от дизайнерского начала. Тренируйтесь и каждый раз будет получаться всё лучше и лучше. Удачи!

  4. Борис

    Здравствуйте. Спасибо за урок. Вопрос:
    Вы показали как разместить Aleo Flash Intro Banner Maker, там выходят сразу коды.

    А как разместить Adobe Flash Professional? где взять коды?
    С уважением и наилучшими пожеланиями

    1. Максим Зайцев (автор)

      Здравствуйте, Борис. Все коды в конце статьи. Они работают и для Aleo Flash Intro Banner Maker и для Adobe Flash Professional. На последнем скриншоте в статье, первый код — это как раз размещение баннера из Adobe.

  5. Светлана

    Здравствуйте, Максим! А можно этот баннер разместить на сторонних сайтах, например на форумах? И как это сделать?

    1. Максим Зайцев (автор)

      Здравствуйте, Светлана. Для размещения баннера на сторонних сайтах, вам нужно договориться об этом с администратором сайта и деть ему код баннера. Ссылка в баннере, которую вы установите при создании будет работать на любом сайте.

  6. Наталья

    Добрый день!
    А, подскажите, пожалуйста, как вы убрали ссылку aleosoft.com в левом нижнем углу баннера?

    1. Максим Зайцев (автор)

      Здравствуйте, Наталья. Ссылка убирается после приобретения программы. В демо версии ссылка будет присутствовать.

  7. Руслан

    Доброго времени суток, Максим. У меня несколько вопросов по Aleo Flash Intro Banner Maker
    1. Как я понимаю, цвет текста меняется во всех добавленных текстах, т.е. нельзя поменять цвет одного из текстов на другой?
    2. Если ресурс, где можно скачать дополнительные наборы эффектов для фона?
    3. Вставляю готовую png-кнопку (на прозрачном фоне и с надписью) в баннер, а эта самая надпись на кнопке получается не четкой. В чем может быть проблема?
    4. Вопрос немножко не по теме. Если сохранять в gif, то получается очень тяжелый баннер. Я делаю гиф-баннеры в фотошопе, через покадровую анимацию, качество анимации не особо хорошее. Часто встречаю гиф-баннеры с анимацией похожей на флеш, но при этом, эти баннеры весят не так уж и много. В чем их делают?

    1. Руслан

      Теперь понял, по поводу цвета шрифтов. Просто, не присваиваются стили к текстам, почему-то автоматически стиль прилипает ко всем шрифтам

    2. Максим Зайцев (автор)

      Руслан, добрый день. Flash — уходит в историю на смену пришёл html5. Гугл полностью отказался от флеша. Поэтому советую присмотреться к новому формату. http://1zaicev.ru/kak-sozdat-banner-v-google-web-designer-i-vystavit-na-sajte/
      А по поводу текста, то вы все правильно поняли. Надпись на кнопке не должна страдать, это может быть при изменении масштаба графического объекта. Возможно, вы изменили размер кнопки и это плохо повлияло на надпись. По поводу гифок, то я тоже их делаю в фотошопе. И размер зависит от количества послойных изображений. Компонуйте их и получите приемлемый размер на выходе. Желаю удачи!

      1. Руслан

        Спасибо за ответ. Не понятен вопрос с текстовыми стилями, почему они прилипают ко всем слоям одновременно. Может это из-за того, что я скачал какую-то кривую версию проги?

        1. Максим Зайцев (автор)

          Может быть, я не замечал подобных глюков. В программе flash professional такого точно нет. Это действительно мощный и удобный инструмент для создания флешей на профессиональной основе. Впрочем, как и все продукты Adobe. Желаю успехов в вашей творческой работе!

  8. Руслан

    Добрый день. Подскажите пожалуйста, получается, что исходника в Aleo Flash Intro Banner Maker мы не получаем, т.е. после закрытия программы, редактировать баннер не получится

    1. Максим Зайцев (автор)

      Руслан, всё верно программа создаёт готовый формат файла.

  9. Виктория

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

Добавить комментарий