Flash баннер как сделать

Создание 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. Для этого существует специальный код, который нам и поможет.

Источник

Как сделать рекламный баннер за пять минут

Как сделать рекламный баннер самостоятельно

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

А что сделать, чтобы баннер стал оригинальным? Вывод напрашивается сам собой — нужно сделать баннер самостоятельно. Это не так сложно, как может показаться, а точнее, довольно просто.

Как сделать рекламный баннер с помощью софта

Для этого мы воспользуемся следующей программкой:

Для того, что бы сделать Flash баннер нам для начала нужно установить данную программу. Когда программа установится, нам покажется пара окон: одно окно программы Banner Maker. Другое, создаваемого баннера. Кликнем по клавише «Проект» и выберем «Новый проект»

Нажмет кнопку «Размер и звук» и увидим окно:

Попробуем сделать рекламный баннер размером 500х125. После введения размера, в правое окно, где будет создаваться баннер, примет данный размер. Тут есть свои удобства, все, что мы будем делать, отобразится в окне предосмотра. К баннеру можно добавить и внешнюю границу, фоновое звучание (не рекомендую), шкалу загрузок. Вы все же решили добавить музыку, тогда вставим и регулятор звука.

Читайте также:  Как сделать веточку розы

Выберем фон баннера

Из фонов нам будет предложен прозрачный, фон с одним тоном. Можем выбрать градиентный (двуцветный), линейный или радиальный тип. Мы так же может изменить положение цветовой заливки на объекте с помощью регулятора «Радиус и Градус». Далее, программа нам предложит вставить меняющие друг друга картинки из своих коллекций или ваших собственных картинок (советую вставить ваши личные картинки, т.к. баннер мы решили делать оригинальным).

Далее, мы последуем к эффектам визуализации объекта. На представленной страничке пользователь может выбирать представленные в софте эффекты. Их 24, затем необходима фантазия пользователя. Здесь же можно провести регулировку параметров данных эффектов. Например число звезд, выбрать их цвет.

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

В данном софте уже представлены три фразы. Нужно провести их редактирование, сделать свои личные, добавить изображения, произвести анимацию. Разберем более подробно надписи. В разделе «Шрифт» можно сделать сам текст. Клавиша «Редактирование» откроет нам меню. В данном меню настраивается шрифт. Разберем это более детально.

Как сделать рекламный баннер редактирование

Banner Maker позволяет сделать редактирование «типа, размера, редактирование по наклону или жирности». Тут присутствуют и особые функции, вроде вытянутости, сжатости. Можно менять вертикаль текста или горизонталь или менять надпись по разрежению символов в надписи. Надпись можно сделать сплошной, градиентной по горизонтали или радиально. При желании, можно менять буквы по наклону или цветовой окантовке.

Как сделать Flash баннер рассмотрим эффекты

Эффектов у нас 59. Благодаря им текст по появляется, то исчезает. В разделе «Позиция» можно отрегулировать расположение текста ниже баннера. С помощью раздела «Web ссылка» нужно задать URL странички, куда попадает посетитель после клика по баннеру. Вкладка «Синхронизация» позволяет настроить, в каком порядке и как именно отобразятся детали баннера.

Можно сказать, нам удалось сделать Flash баннер. Теперь остается его сохранить, далее последует публикация.

Для этого кликнем по ярлыку «Публикация» и выберем нужные пункты. Данный софт сохраняет баннер в том месте компьютера, который мы укажем. Этаже программа создаст его HTML-код, благодаря которому мы можем вставить наш баннер на нужный сайт.

Banner Maker позволяет не только сделать рекламный баннер. Он может делать многие заставки и разные части web-дизайна.

Если у вас возникло желание заняться изготовление Flash баннер более высокого качества, да и при этом получить возможность неплохо заработать (от 30000 руб/мес.), есть такая возможность. Недавно вышел курс Сергея Буйбарова «[urlspan]Как сделать баннер[/urlspan]?».

[urlspan][/urlspan]

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

Если вам интересно, как выглядят баннеры Сергея, просто пройдите по картинке с курсом!

Я надеюсь, вам стало понятнее, как сделать рекламный баннер. Хотя это только малая часть web-дизайна. Успехов!

Источник

Flash баннер как сделать

Главная » Как сделать баннер в Adobe Flash

Как сделать баннер в Adobe Flash

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

Читайте также:  Как сделать быстро татушку

Для начала создайте новый документ ActionScript 3. Баннер будет размером 300*250 пикселей, установите его в настройках properties документа.

В баннере будем использовать три текстовых объекта, в данном примере это «Уроки AS3» , «Уроки AdobeFlash» и «Уроки Photoshop» . При помощи инструмента «Text Tool» создайте их на сцене.

Должно получиться три текстовых поля, как показано ниже:

Чтобы создавать продвинутую анимацию — необходимо перевести текстовые поля в символы. Выделите каждый объект и при помощи контекстного меню преобразуйте их в символы.

В библиотеке Adobe Flash должно получиться три объекта-символа:

Когда символы созданы, можно удалить их со сцены, так как каждый текстовый объект мы будем размещать на отдельном слое. Создайте три слоя на панели «Timeline».

Разместите каждый символ из библиотеки на отдельном слое так, чтобы их расположение было практически равным.

Текстовые объекты будут плавно появляться, поэтому в первом кадре их нужно сделать невидимыми. Для этого выберите все объекты на сцене и установите на панели свойств «properties» в настройках «color effect» стиль «style» на «alpha» и уменьшите это значение.

Теперь нужно создать ключевые кадры для каждого слоя. Выделите ключевой кадр «50» у каждого слоя, нажмите правую кнопку мыши и в контекстном меню выберите «Insert Keyframe».

Для того, чтобы объекты плавно преобразовывались нужно создать классическую анимацию движения «Classic Tween». Выберите несколько кадров между первым и пятидесятым сразу для всех слоев. Затем вызовите контекстное меню и выберите «Create Classic Tween» .

На панели «Timeline» должно получиться следующее:

Теперь нужно создать еще ключевые кадры для каждого слоя, также, как делали в начале. Создаем для каждого слоя ключевой кадр на кадре «100» , после чего снижаем значение «alpha» у каждого объекта в настройках «properties».

И опять создаем классическую анимацию движения «Classic Tween» , только между кадрами «50» и «100».

Теперь нужно разделить по времени каждый анимированный объект. Для этого нужно сдвинуть кадры анимации для каждого слоя на панели «Timeline».

Для этого выделите все кадры второго слоя с «1» по «100» и перетащите их так, чтобы первый ключевой кадр этого слоя начинался с «51» кадра.

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

Можете запустить приложение (нажмите клавиши ctrl+enter), чтобы проверить анимированный баннер.

Теперь нужно сделать так, чтобы при нажатии на баннер происходил переход на необходимый сайт. Для этого нужно внести код ActionScropt 3.0 в приложение. Чтобы сделать это выберите первый кадр певрого слоя и войдите в окно написания кода «Actions» , нажмите на изображение стрелки в верхнем правом углу (или нажмите клавишу F9).

Пишем следующий код:

Давайте разберем код. В первой строчке добавлям слушатель событий на событие нажатия кнопки мыши.

Устанавливаем вид курсора.

В пятой строчке описываем функцию-обработчик события на нажатие кнопки мыши. В строчке var targetURL:URLRequest = new URLRequest создаем объект URLRequest в параметре которого указываем текстовое значение — ссылку на необходимый сайт. В строчке navigateToURL(targetURL); происходит фактический переход на сайт по полученной ссылке, указанной при создании объекта var targetURL .

Чтобы сохранить флэш-баннер выберите в главном меню File -> Export -> Export Movie , как показано на изображении.

Пример с исходниками можно скачать здесь.

Если вам понравилась статья, то добавьте ее в закладки в социальных сетях (значки внизу).

Источник

Поделиться с друзьями
Ответ и точка