Создание flash баннера в Adobe Flash
В последнее время современный и особенно крупный сетевой ресурс сложно представить без продвижения в сети на других сайтах и самым привычным форматом являются flash баннеры, которые постоянно мигают, тем самым привлекая наше внимание. И сразу же хочется кликнуть на эту самую рекламу, что бы посмотреть что же там такое интересное. В данном уроке мы с вами научимся самостоятельно создавать flash баннеры для своих сайтов.
Первое, что нам необходимо знать и понимать — это программное обеспечение, которое нам понадобиться. Все примеры и изображения брались из Adobe Flash CS4, которое является в настоящее время самым популярным средством для создания flash анимации. Если же вы будите использовать более старые версии, например Adobe Flash CS3, нет ничего страшного, просто некоторые моменты могут немного отличаться в версиях, но надеюсь с этим особых проблем не будет.
После запуска самой программы, Adobe Flash нам предложит выбрать версию языка ActionScript, с которой мы хотели бы работать. Если вы уже знакомы с какой либо версией языка, следует выбрать её, мы же попытаемся создать flash баннер на платформе языка ActionScript2, потому как сам код клика по баннеру будет намного проще и понятнее.
Первое, что необходимо сделать — это создать несколько слоёв, что можно сделать на панели внизу. Кнопка изображена на скриншоте. Создаём столько слоёв, сколько нам понадобиться для создания flash баннера для сайта — у меня выбрано 3 слоя, что для меня вполне хватит. Каждый слой будет содержать своё изображение в формате .jpg или .gif, которые мы уже зарание подготовили или создали в Adobe Photoshop (к сожалению последнее уже не входит в тематику данной статьи, а сами уроки Photoshop можно найти).
Все примеры будут указаны на английской версии Flash CS4 потому, что именно она больше всех распространена в настоящее время и большая часть уроков в сети написана специально для английской версии. Несмотря на это, думаю, что даже в русской версии особых проблем возникнуть не должно.
Для начала стоит выставить те размеры баннера, которые нам необходимы.
Для того, что бы разместить на каждом слое своё изображение, мы просто выделяем необходимый слой и переносим наш .jpg файл на него. Всё просто. Выравниваем изображение так, что бы оно находилось чётко по центру и делаем тоже самое с оставшимися двумя слоями. Таким образом, мы получаем три слоя с тремя уникальными изображениями на каждом, которые будут сменять друг друга и таким образом мы получим профессиональный flash баннер.
Теперь наступает время настройки смены изображений так, что бы они сменяли друг друга по очереди. В цикле как получим постоянную смену изображений как это сделано во всех современных рекламных баннерах или в flash анимации на сайтах. Для этого просто передвигаем ползунки на слоях так, что бы первый слой занимал по временной шкале порядка 2-3 секунд, второй так же и последний третий замыкал. Очень маленький временный промежуток ставить не стоит, потому как главное для рекламного flash баннера — это привлечь внимание посетителя сайта, а значит он должен успеть понять и прочитать ту информацию, которую вы пытаетесь до него донести.
После того как мы закончили все настройки мы уже получили готовый flash ролик, который уже можно размещать на нашем сайта и рекламной площадке. Единственным недочётом станет отсутствие возможности кликать по баннеру и переходить на необходимую страницу, для чего нам необходимо воспользоваться языком программирования ActionScript, поддержка которого уже встроена в AdobeFlash. Мы будем использовать версию языка ActionScript 2, именно поэтому в начале статьи советовалось выставить именно данную версию.
Для того, что бы создать возможность кликать, необходимо создать новый слой, который будет находиться поверх всех остальных. После чего мы просто помещаем на него треугольник, который по форме полностью соответствует всей ширине и длине баннера и сделать его прозрачным, что бы он не закрыл все нижестоящие слои.
После чего кликаем по самому прямоугольнику, что очень важно, правой кнопкой мыши и выбираем пункт Actions. После чего нам открывается окно для ввода ActionScript кода. Долго думать и объяснять в данном случае нет смысла, мы просто помещаем туда вот этот код:
Выглядит это примерно так:
Конечно же, меняем наш адрес страницы, на которую необходимо перебросить пользователя и убираем атрибут _blank, если нам нет необходимости открывать новую страницу в новом окне.
Теперь необходимо проверить работоспособность кода, за что отвечает небольшая голубая галочка чуть выше панели ввода кода. Если вылезает положительное сообщение о верности кода, смело закрываем окно.
Следующим шагом станет компиляция нашего кода, для чего необходимо открыть пункт «Control -> Test Movie», после чего перед нами появится окно с проигрываем нашего flash баннера. Теперь при нажатии на сам баннер, нас перекинет на необходимую страницу.
Теперь просто сохраняем наш файл в формате .swf, что как раз и является «флешкой» и получаем готовый баннер, который уже можно размещать на странице. Как видите, нет ничего сложного.
Теперь каждый из вас, кто не имел дело с flash баннерами, задумается над вопросом как же разместить его на самой странице. Например, вставить в тот же шаблон WordPress. Для этого существует специальный код, который нам и поможет.
Источник
Как создать и разместить флеш баннер на сайте
Здравствуйте, уважаемые друзья. Сегодня поговорим об инструментах, которые позволяют создавать флеш баннеры для сайтов. На текущий момент достаточно много всевозможных программ и сервисов для создания баннеров. А услуг по созданию баннеров ещё больше. Только вот минимальная стоимость баннера на заказ составляет примерно 2000 рублей. А бесплатные программы и сервисы имеют свои ограничения в виде урезанных функциональных возможностей или ссылки на готовом баннере.
Также необходимо понимать, что для создания привлекательного баннера нужно уметь работать с графическими редакторами. Так как без графических заготовок трудно будет создать баннер, привлекающий взгляд посетителя сайта.
Поэтому заказывая баннер, вы платите, прежде всего, за его дизайн. Также для каждого баннера разрабатывается план-схема, как будут различные элементы отображаться. И уже после этого всё задуманное реализуется технически.
В отличие от обычных анимированных баннеров в формате gif, флеш баннеры позволяют создать более яркие эффекты, которые очень красиво смотрятся. Хотя я всё же отдаю предпочтение баннерам в формате gif. Кому интересно почему, поделюсь в комментариях.
А ещё есть баннеры в формате html5, которые можно создать в бесплатном редакторе Google Web Designer. Эти баннеры тоже эффектно смотрятся.
Материал статьи достаточно объемный, поэтому сразу предлагаю посмотреть видеоурок, так будет легче разобраться с материалом.
Что необходимо для самостоятельного создания флеш баннера.
- Прежде всего, вам понадобится программа или оплаченный аккаунт в сервисе по созданию баннеров. В качестве примера программного обеспечения рассмотрим две программы Adobe Flash Professional и Aleo Flash Intro Banner Maker.
Adobe Flash Professional является законодателем моды. Потому как именно компания Adobe разработала технологию flash – создания анимированной графики на основе векторных изображений. В этой программе можно создать очень красивые и в то же время очень сложные анимированные сюжеты. Нужно лишь начать изучать эту программу и с каждым днём у вас будет получаться всё лучше и лучше.
Aleo Flash Intro Banner Maker я выбрал не просто так, в отличие от законодателя моды, эта программа позволяет создавать баннеры в считаные минуты. Достаточно переключаться от раздела к разделу и выбирать подходящие эффекты.
- Также понадобятся графические заготовки. Эти элементы вы можете подготовить в графическом редакторе. А можете найти и на просторах интернета.
- И третий момент, который нельзя забывать – это наличие плана. Хорошо продуманный план позволит создать привлекательный баннер, который сможет привлечь внимание посетителей.
Создание флеш баннера в Adobe Flash Professional.
Это очень мощный инструмент для создания flash анимации. Впрочем, эта программ так же, как фотошоп выделяется на фоне конкурентов. Оно и понятно, обе программы созданы одной компанией.
Программа платная, но можно установить 30 дневную бесплатную версию. Чтобы скачать последнюю версию программы, нужно перейти на официальный сайт Adobe и зарегистрироваться в Creative Cloud, нажав по ссылке «Бесплатная пробная версия». После регистрации программа автоматически скачается и будет готова к работе.
Регистрация в Adobe
Регистрационная форма очень простая.
Заполнение регистрационной формы
Запустив программу нужно выбрать тип рабочего документа. Так как в дальнейшем в баннере будет ссылка, то сразу можно выбрать «ActionScript 3.0».
Выбор рабочего документа
Далее, нужно указать размеры будущего баннера. Для этого на вкладке «Свойство» задайте параметры ширины и высоты.
Указываем размер баннера
Для того чтобы добавить изображения в баннер просто перетащите нужное изображение из «Проводника» в рабочую область программы. Только создавайте отдельные слои для каждого изображения. Так будет проще в дальнейшем работать с каждым элементом баннера.
Вставляем изображения в баннер
Разместив все элементы баннера, можно приступать к созданию анимации (движения). В одном уроке невозможно показать всех возможностей, поэтому разберём создание простых движений.
К примеру, я хочу, чтобы стрелка на фоновом изображении появлялась из-за границ баннера.
Для этого графический элемент помещается за пределы баннера, после на нём нужно нажать правую кнопку мышки и выбрать пункт «Создать анимацию движения».
Создание анимации движения
Перемещая графический элемент на исходное место в границах баннера, вы создаёте движение. Траектория движения появится на изображении. Её можно менять, изменяя положение точек.
Траектория движения
Подобные манипуляции проделываете и с остальными элементами баннера. Время отображения эффекта вы меняете на временной шкале.
Для того чтобы элемент появился в баннере и продолжал оставаться на виду, пока появляются следующие элементы нужно «Добавить пустой ключевой кадр», нажав правую кнопу мышки на временной шкале данного элемента.
Добавление пустого ключевого кадра
После того как все элементы настроены. Нужно добавить ссылку. В качестве примера рассмотрим создание кнопки и добавление ссылки.
Итак, выбираем изображение кнопки и на закладке «Свойства» задаём название, выбираем тип «Кнопка».
Теперь пришло время для создания ссылки. Для этого устанавливаете курсор на первый кадр кнопки и нажимаете F9. В открывшемся окне, жмём на кнопку «Фрагмент кода». В следующем окне, жмём на папку «ActionScript» — «Действия» — «Нажмите для перехода к веб-странице».
Создание действия
Появится уже готовый код, в котором нужно заменить ссылку. Меняете и закрываете эти окна.
Вставка ссылки
Проверяете работу баннера Ctrl+Enter. И если всё вас устраивает. Можно публиковать баннер.
Для того чтобы сохранить баннер и опубликовать его отрываем пункт меню «Файл» — «Параметры публикации». Далее, выбираете форматы баннера и изображений, папку для сохранения и задаёте имя баннера. После чего жмёте на кнопку «Опубликовать».
Публикация баннера в 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
Сразу после публикации вы увидите готовый баннер и получите код для вставки на сайт. Правда, этот код можно сократить в два раза. И далее я покажу как.
Код для размещения баннера на сайте
И вот готовый баннер:
Установка флеш баннера на сайт WordPress
После того как баннер готов, есть файл в формате SWF. Можно приступать к размещению баннера на сайте.
Первым делом нужно загрузить файл с баннером на ваш хостинг. Сделать это можно через файловый менеджер хостинга или через ftp-соединение.
Примечание: при загрузке через административную панель WordPress появляется ошибка «Извините, тип этого файла не разрешён из соображений безопасности». Поэтому загружайте одним из вышеуказанных способов.
Загрузив файл можно приступать к размещению баннера. Баннер можно разместить в любом месте сайта, всё зависит от ваших навыков. Но наиболее распространённые места это шапка сайта, подвал, сайтбар и контент. Кстати, в статьях на рекламу кликают гораздо чаще, чем за её пределами.
Итак, для размещения баннера вам потребуется один из этих кодов:
Вы должны изменить путь к файлу баннера и указать размер. В примере эти места выделены оранжевым цветом.
Если вы размещаете баннер в статье, то делайте это через вкладку «Текст».
Вставка кода в статью
Итак, друзья теперь вы знаете, как самостоятельно создавать flash баннеры для сайта. И если вам часто приходится задумываться о создании таких баннеров или вы их просто заказываете, то подумайте, за стоимость одного баннера вы можете приобрести программу и делать эти баннеры самостоятельно.
А у меня на этом сегодня всё, статья получилась объемная. Некоторые мелочи, которые не описал в статье, я раскрыл в видеоуроке. Ну и, конечно же, если будут вопросы, задавайте их в комментариях. Всем желаю удачи и до встречи в новых статьях и видеоуроках.
Источник