Просто о создании сайтов и баннеров » Как сделать баннер

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

Alexandr — Sun, 25 Jul 2010 10:57:01 +0000

Баннеры – слишком мелкие заказы с большой долей подготовительной и согласовательной работы. Изготавливать их, в отличии от изготовления сайтов, не особо выгодно. На первый взгляд работы нам не много. Но практика показывает, что клиент редко знает, чего он хочет. Или определяется со своими пожеланиями уже после того, как баннер сделан. Вот тут и заказчика и начинает распирать от креативных идей, доплачивать за реализацию которых он не видит причин. В результате – потеря времени и нервов для обеих сторон.

Писать полноценные технические задания, договора, календарные планы, сметы и акты приема-передачи работы – это долго. Но, к сожалению, необходимо. Иначе виноватым останется именно дизайнер, который почему-то не обладает способностью телепатически улавливать вкусы, настроения и требования своего драгоценного клиента. Потому – только 100%-я предоплата.

Чаще всего flash-баннеры в нашей веб-студии делаются как подарок заказчикам крупных и сложных сайтов. Хороший сложный баннер стоит у нас 40-100 долларов, а при составлении договора, 50% предоплате и посещении офиса клиента (как мы делаем при разработке сайтов) стоимость баннера будет около 150 долларов за счет существенного увеличения затрачиваемого на работу времени. Такая цена уже не устраивает заказчика.

Но мы не можем, делая качественный продукт по минимальной цене, надеяться на оплату – готовый баннер вполне можно скачать и не оплачивать при должном уровне технической подготовки. Я ни в коей мере не считаю, что потенциальный заказчик так планирует сделать, но наши бизнес-процессы не предусматривают процедуры упрашивания клиента заплатить за качественно выполненную работу.

Мы не заинтересованы в возникновении ситуации «не понравилось», всегда идем навстречу клиенту и дорабатываем его мелкие пожелания (если они возникают). Чем точнее описана задача по разработке баннера, тем ближе результат к ожиданиям клиента.

Об уровне и опыте работы нашего flash-аниматора вы можете судить по количеству и качеству наших работ в портфолио. С оперативностью проблем также никогда не возникало – разработка простого баннера требует около 4 часов работы профессионального флэшера, а поскольку сейчас лето и заказов не много, причин для задержек не предвидится.

Требование полной предоплаты со стороны профессиональной веб-студии – это не желание уйти от ответственности, а единственный способ снизить себестоимость работ по мелкой flash-анимации. Скрываться с вашей полусотней никто не собирается – неужели вы действительно думаете, что мы будем искать новый офис и покупать новые телефонные номера ради того, чтобы кинуть вашу компанию на 50 долларов?

В раскрутке блога сегодня помогают:
При составлении договора на разработку сайта или баннера помогут компании, предоставляющие юридические услуги в вашем городе. Также стоит поговорить с юристом, если вы планируете обновить дизайн интерьера и для этого вам нужно делать перепланировку помещения и рушить стены. Лучший сайт знакомства в Киеве.

Как отредактировать анимированную картинку (аватарку, баннер, смайлик)

Alexandr — Sat, 27 Feb 2010 08:48:16 +0000

Чаще всего непрофессиональные дизайнеры сталкиваются с проблемой редактирования анимации в формате gif. Это самый старый, довольно простой и очень популярный формат для создания движущихся картинок. Есть, конечно, и другие виды анимации: flash, silverlight, анимация с помощью css или javascript т.п., но эти темы мы оставим пока на будущее.

Анимированные аватарки, смайлики – это почти всегда формат gif. Чтобы отличить анимацию gif от flash, нужно кликнуть правой кнопкой мыши по этой анимации. Если в последней строчке написано что-то про Adobe Flash Player, значит, это флэш-анимация:

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

Если сохраненный файл окажется gif-картинкой, которую нужно немного подредактировать, убрать лишние или добавить новые кадры, нам понадобится специальная программа Ulead GIF Animator 5, которая, на мой взгляд, является лучшей программой для создания и редактирования gif-анимации:

Скачать бесплатно программу для редактирования gif-анимации Ulead GIF Animator 5 с depositfiles.com

Как редактировать gif-анимацию в программе Ulead GIF Animator 5:

1. Выполняем стандартные действия по открытию нужного файла в программе Ulead GIF Animator 5 (File -> Open Image…).

2. В самой нижней линейке кадров выделяем нужный рисунок и редактируем его, используя панель инструментов программы. Функциональность у Ulead GIF Animator 5, конечно, ниже чем у Photoshop, но вполне достаточно, чтобы внести необходимые правки в гиф-анимацию.

3. Если без Фотошопа все же не обойтись, удерживая нажатой клавишу Shift на клавиатуре, выделяем все ненужные кадры (которые не нужно редактировать) и удаляем их, оставляя только один, который нужно редактировать. Сохраняем оставшийся кадр в формате gif и отрываем его в Фотошопе, после чего правим его до нужного состояния.

4. Исправленный в Photoshop кадр гиф-анимации сохраняем в формате gif в папке с первоначальной анимированной картинкой.

5. С помощью команды File -> Animation Wizard… программы Ulead GIF Animator 5 создаем из отредактированного в Фотошопе и изначального файла гиф-анимации один новый файл. Лишний неотредактированный кадр удаляем. С помощью перетаскивания по шкале кадров расставляем фреймы в нужном порядке, при необходимости меняя их время задержки. Подробнее о создании gif-анимации читайте в моей статье Как сделать анимированный GIF баннер.

6. Полученный результат сохраняем в формате gif с помощью команды File -> Save As… -> Gif File… Исправленная анимация gif готова.

Конечно, логично было бы делать все только с помощью программы Photoshop, ведь с ее помощью можно создавать gif-анимацию. Но не так все просто, как кажется. Универсальность и мощность программы Фотошоп также имеет свои пределы и открывать уже готовую анимированную гифку в Фотошопе достаточно сложно. Например, у меня не установлен Quick Time и при попытке импортировать gif-файл как видео я вижу ошибку:

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

Еще я слышал, что есть специальные плагины для правильного импортирования gif-анимации Фотошопом. Не знаю, не вникал в этот вопрос. Как по мне, то лучше использовать старый проверенный Ulead GIF Animator 5, который заточен под работу с гиф-анимацией, чем танцевать с бубном вокруг Фотошопа, который для этого приспособлен мало.

Учимся писать грамотное техническое задание (ТЗ) на разработку баннера

Alexandr — Thu, 18 Feb 2010 13:07:55 +0000

Для того чтобы написать грамотное техническое задание (ТЗ) не нужно быть профессиональным веб-дизайнером. Достаточно посмотреть на баннеры на любом раскрученном портале, на рекламу конкурентов или партнеров, чтобы придумать описание своего будущего баннера. А несколько советов с подробными описаниями того, как составлять ТЗ на разработку сайта, предложенные в этой статье, помогут вам лучше понять, что нужно делать. Поверьте, усилия, потраченные на составление технического задания с правильным описанием баннера, помогут вам не только получить качественный баннер в кратчайшие сроки, но и рассчитывать на скидку. Профессиональные разработчики баннеров заинтересованы поощрять вменяемых заказчиков более выгодными предложениями, т.к. берегут свои нервные клетки.

Также вы можете скачать бесплатно реальный пример технического задания на создание баннера в формате .doc:

Скачать бесплатно пример ТЗ на разработку баннера flash

Как писать ТЗ для разработчика банеров:

1. Тип баннера.
В самом начале важно определить, какой тип баннера вам нужен. Возможные варианты: анимированный flash, анимированный gif, статический gif или jpg, нестандартный rich-баннер (всплывающий посреди страницы). Если вы не уверены, какой формат должен быть у вашего баннера, напишите, что формат определяет дизайнер согласно сценарию.

2. Размеры баннера.
Если вы уже знаете, на каком сайте будете размещать свой баннер, пишите размер, который принимают на этом сайте. При размещении через посредника (будь то рекламное агентство, нанятый seo-специалист или сайт-посредник типа Rotaban.ru) уточните у него, баннеры какого размера чаще всего размещают, какие выгодно размещать по соотношению цена/качество. Например, на блогах под управлением WordPress чаще всего незаполненными бывают баннерные места размером 125×125 пикселей, потому такие баннеры владельцы сайтов часто размещают с существенной скидкой.

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

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

3. Вес баннера.
Вес или размер баннера в Кб – достаточно важный параметр. В некоторых банерообменным сетях существуют ограничения на размер баннера, потому особо сложных или неоптимизированных flash-монстров не принимают. Нормальным считается вес баннера до 100 КБ, но лучше, чтобы он не превышал 40 Кб.

4. Пожелания по цвету, логотип, корпоративный стиль.
В техническом задании на разработку баннера важно описывать, какие цвета нужно использовать при создании баннера. В ваших же интересах выслать разработчику лого своей компании, желательно, в векторном виде (в кривых), т.е. расширения файла должно быть .ai, .cdr или .eps. Если у вас есть брендбук, элементы фирменного стиля и вы хотите, чтобы эта информация использовалась при создании вашего баннера, не стесняйтесь, отправьте разработчику эти файлы. Лучше пусть информации будет много и дизайнеру будет из чего выбирать, чем он будет угадывать, чего вы от него ждете. Не факт, что угадает.

5. Приблизительный сценарий.
Очень важный пункт при написании ТЗ на разработку баннера. Более того, прежде чем звонить в понравившуюся веб-студию и спрашивать, сколько стоит сделать баннер, потрудитесь составить описание этого самого баннера, его сценарий, как вы себе представляете анимацию и т.д. Отправьте свои пожелания, а лучше сразу готовое ТЗ, на указанный в контактах веб-студии e-mail и через полчасика можете звонить, спрашивать. Или попросите прислать вам ответ по электронной почте.

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

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

6. Примеры баннеров, которые вам нравятся.
Можете вложить в письмо баннеры, которые вам делали раньше и которые вам нравятся. Напишите, что именно вам в них нравится, а что не нравится. Можете дать ссылки на сайты, где размещены примеры отличных, на ваш взгляд, баннеров. Хорошим решением будет фраза «хочу баннер, похожий на тот, который выложен у вас в портфолио для компании ХХХ, но со следующими изменениями…».

7. Дополнительные материалы, которые могут помочь в изготовлении сайта.
Если есть качественные фотографии продукции вашей компании, есть ссылка на красивую графику, которую вы бы хотели видеть на вашем баннере – не ленитесь, шлите это дизайнеру. Чем меньше он будет рыскать по фотобанкам в поисках фотографий компрессионных фитингов, которые вы успешно продаете, тем больше времени потратит на работу над анимацией или меньше денег потребует за создание баннера.

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

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

Перед заказом баннера рекомендую также почитать мою статью Как обмануть антибаннерные фильтры. Эти советы по созданию и размещению баннеров помогут вашей рекламе оставаться видимой даже для пользователей с агрессивными фильтрами рекламы.

В раскрутке блога сегодня помогают:
Грамотная раскрутка сайта в поисковиках. Курсы и семинары seo в Украине.

Как обойти антибанерные фильтры при размещении своей рекламы

Alexandr — Thu, 24 Dec 2009 08:15:42 +0000

В своей статье как избавиться от баннеров раз и навсегда я писал о программах, которые позволяют отфильтровать классическую баннерную рекламу, контекстные объявления Яндекса и Google, всплывающие окна и rich-баннеры, появляющиеся посреди экрана. Программ и плагинов, которые следят за тем, чтобы пользователь видел как можно меньше рекламы на сайтах, появляется все больше и они отлично справляются с поставленной задачей. Особенно, если использовать несколько разных фильтров против рекламы одновременно.

Предлагаю увидеть работу двух работающих одновременно фильтров рекламы (антибаннерный модуль в антивирусе KIS9 и встроенный ad-охотник браузера Maxthon) на примере популярного сайта zaycev.net. Справа оригинальный сайт, без применения фильтра баннеров, слева – результат автоматической фильтрации (кликните по картинке для увеличения):

По мере роста числа грамотных пользователей интернета эффект от баннерной рекламы будет снижаться и дальше – люди просто не будут ее видеть. Уже сейчас эффективность баннерной рекламы в США на 40% меньше, чем в русскоязычном интернете. Причиной тому являются не только фильтры баннеров, но и привычка не обращать внимание на анимированную блочную информацию, выработанная у опытных интернетчиков.

Что нужно сделать, чтобы ваш баннер пропустили антибаннерные фильтры:

1. Нестандартный размер. Если вы делаете/заказываете баннер для размещения на каком-то одном сайте и у вас есть возможность договориться о размещении баннера нестандартного размера – воспользуйтесь этой возможностью. В первую очередь антирекламные фильтры обращают внимание на размер картинки (особенно flash-ролика) и если размер картинки совпадает с одним из популярных размеров баннеров – вероятность, что ваш баннер не отобразится на сайте очень высока. Не стоит делать внутренние баннеры на своем сайте популярных размеров, пусть лучше будет размер 105х110, чем 100х100.

2. Имя картинки или ролика. В названии баннера не должно быть слов banner, ban, reklama, sponsor, ad и т.п. Нежелательно указывать в названии размеры баннера. Худшее из возможных названий для баннера должно быть похоже на company_banner_240x350_01.swf. В этом случае антибаннерный плагин наверняка не пропустит такую рекламу.

Не смотря на то, что разработчики баннеров очень часто называют их именно в таком стиле, перед размещением баннера его все же нужно переименовать. Например, подойдет имя компании и номер баннера или ключевое слово/фраза из сферы деятельности вашей фирмы. Естественно, по-английски или транслитом, у картинок с кириллическими названиями в интернете куча проблем с отображением и заливкой по ftp.

3. Расширение (формат) баннера. Наиболее часто встречаются анимированные баннеры flash и gif, потому к любым картинкам в этих форматах у рекламных фильтров развито повышенное внимание. Заказывайте разработку стильных неанимированных баннеров в формате jpg, gif или png, если хотите, чтобы их увидело максимальное количество людей с антибаннерными фильтрами. Да CTR (сликабельность) у стильных статических баннеров выше, чем у навязчивых мигающих баннеров с банальным сценарием.

Любой уважающий себя антибаннерный фильтр обязательно блокирует загрузку любой всплывающей информации, будь то rich-баннер посреди статьи или всех доставшие всплывающие окна. Хотя люди, у которых фильтров нет, вынуждены по такой рекламке активно кликать и тест скорости интернета показывает, что скорость интернет-серфинга при отключенной банерорезке значительно снижается. Нужна ли вашей компания репутация, от которой попахивает порнопродвижением, решать, конечно, вам.

4. Размещение баннера рядом с другими подозрительными картинками. Антибаннерные фильтры также учитывают, в какой именно части сайта расположен баннер, какие ключевые слова его окружают, заголовок блока с баннром, описание баннера в alt и т.п. Картинка в блоке с заголовком Наши спонсоры, Реклама, Обмен баннерами имеют все шансы попасть под фильтрацию рекламы на сайте.

5. Адрес сайта, с которого баннер загружается. Антивирусы, фаерволы, пагины для браузеров и прочие антирекламные фильтры располагают своей базой сайтов-источников баннерной рекламы (популярные партнерки, баннерообменные сети, тизерные рекламообменники, активные рекламодатели медийной рекламы в интернете), которая регулярно обновляется. И если ваш баннер грузится с подобного промежуточного баннерохранилища, у него есть все шансы быть забаненым еще на этапе загрузки. Наилучший способ – отсылать баннер вебмастеру, который будет его размещать, чтобы у баннер грузился с сайта, на котором размещается. Правда, если баннер будет грузиться из папки /banners сайта, его все равно не увидят пользователи с фильтрами банерной рекламы.

Баннеры какого размера стоит заказывать

Alexandr — Wed, 16 Dec 2009 17:15:27 +0000

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

Вообще такого понятия как общепринятый размер баннера не существует. Вы можете договориться с владельцем сайта о размещении баннера любого размера – лишь бы цена вас обоих устраивала. Но если переплачивать и особо выпендриваться не хочется, желательно заказывать баннеры популярных размеров. Тогда проблем с их размещением не будет и число сайтов, которые их примут по стандартной цене, будет приближаться к 100%.

По мнению разработчиков популярной программы Ulead GIF Animator 5, которая чаще всего используется для создания анимированных gif-баннеров, пользователями востребованы баннеры следующих размеров:

Если это внутренний акционный баннер для собственного сайта, тогда формат этого баннера вы можете легко определить по ширине колонки, в которой он будет размещаться. Для этого сделайте принтскрин своего сайта, вставьте его в Фотошоп, вырежьте на скрине фрагмент колонки размером с будущий баннер и посмотрите размер этого фрагмента. Аналогично можно узнать размер любого баннера, в т.ч. flash, на любом сайте. Конечно, если баннер – это статическая нефлэшевая картинка или gif-анимация, его размер можно узнать проще и быстрее: кликните по картинке правой кнопкой мыши и выберите Свойства.

В размере баннера, как и любого другого изображения, первым параметром указывается ширина, а вторым – высота. Размеры всегда задаются в точках (пикселях). Т.е. цифры 468х60 на деле означают, что ширина у баннера 468 пикселей, а высота 60 пикселей.

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

Самые популярные размеры баннеров в РУ/УАнете:

1. Баннер 468×60. Является самым популярным форматом в русскоязычном интернете. При достаточно маленьком размере позволяет писать длинные фразы на баннере и при этом может быть размещен на любом сайте без ущерба для дизайна. Даже в тексте статьи:

2. Баннер 240×350. Площадь такого баннера намного больше, чем площадь 468×60, что позволяет реализовать любую идею заказчика и донести нужную информацию до потенциального зрителя/клиента. Стоимость его размещения, как правило, выше, чем у баннера 468×60, а видимость хуже, поскольку размещаются такие баннеры в правой колонке сайта или в левой колонке под меню.

3. Баннер 728×90 (760х90, 760хШирина_Экрана и т.п.). Часто называется растяжкой. Обычно встречается в самом верху сайта, что обеспечивает этому баннеру оптимальную видимость и естественно, наибольшую цену размещения.

4. Баннер 88×31. Один из самых старых баннерных форматов, часто называемый кнопкой. Такие баннеры используются при обмене ссылками между партнерскими сайтами, участии в рейтингах, конкурсах и т.п. Размещаются чаще всего в самом низу сайта или в блоке со счетчиками. Фото красивой девушки или роскошный лимузин на таком микробанере не разглядеть, но простенький логотип партнера и пару добрых слов о нем вместить можно.

5. Баннер 125×125 (120х120). Любимый баннер блогеров, но почему-то пока не очень востребован рекламодателями. С бурным развитием блогов на движке WordPress популярность этих баннеров растет как на дрожжах. Обычно такие баннеры размещаются в боковой колонке по 2-3 в ряд, в первом экране без прокрутки.

Если вы всерьез собираетесь продвигать свой сайт с помощью баннерной рекламы, заказывайте сразу несколько баннеров со схожим сценарием, но разных размеров, у одного разработчика. Это позволит существенно сэкономить, т.к. при правильном планировании создание последующих баннеров менее трудоемко. А вы сможете рассчитывать на скидку в 30%-70% – как договоритесь.

Как читать информацию с текстового файла в Flash с помощью ActionScript

Alexandr — Thu, 24 Sep 2009 14:33:56 +0000

Достаточно часто при создании баннеров на Flash требуется, чтобы текст баннера менялся время от времени. Например, можно сделать универсальный акционный flash-баннер, который рекламирует обучающие семинары компании и менять в них дату проведения мероприятия и его тему. Или же баннер, который демонстрирует хиты продаж с ценами, которые тоже время от времени меняются. Кончно, можно сделать базу данных и читать информацию из нее, но если нужно менять 1-2 параметра в баннере, морочиться с базой необязательно. Можно читать параметры для flash-ролика из текстового файла с расширением .txt с помощью кода ActionScript. И сделать это совсем не сложно.

Вы можете совершенно бесплатно скачать архив .rar с исходником flash-баннера в формате .fla, который иллюстрирует этот урок (9 Кб):

Скачать бесплатно архив с исходником .fla баннера flash

1. Открываем среду разработки flash. В уроке используется Adobe Flash CS3 Professional, но не обязательно использовать именно ее. Adobe Flash 8 тоже подойдет, исходник .fla в скачанном архиве к этому уроку сохранен для Flash 8. Более ранние версии Flash проект .fla не откроют, хотя код ActionScript урока в них работать будет.

2. Создаем новый проект Flash. Он обязательно должен использовать ActionScript 2.0, для ActionScript 3.0 нужны совсем другие действия.

3. Указываем размер будущего flash-ролика, частоту кадров, цвет фона, настройки публикации и т.п. Добавляем в проект Flash слои с картинками, при необходимости добавляем анимации согласно сценарию нашего flash-баннера. В этом уроке нет анимации и картинок, чтобы они не отвлекали от основной темы.

4. Добавляем динамический текст в отдельном слое нашей флэшки. Для этого выбираем инструмент Текст (T) и в выпадающем списке окна Properties выбираем пункт Dynamic Text:

5. Кликаем на заготовке баннера в нужном месте и в нужном кадре слоя txt_1 и даем имя текстовому полю. В нашем случае поле динамического текста flash для отображения названия баннера называется txt_name:

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

7. Создаем в блокноте текстовый документ для параметров баннера. Имя и расширение файла с параметрами баннера: banner_options.txt. В принципе, можно придумать любое другое имя для файла с параметрами нашего flash-баннера. Тогда нужно исправить название текстового файла в коде ActionSctipt.

В текстовом файле с параметрами для flash должен быть следующий код:

trainingName=Акция «Название акции»&trainingDate=20 января 2010 г

Думаю, интуитивно понятно, что

trainingName – переменная, в которой хранится значение первого текстового поля, считанное из текстового файла

trainingDate – переменная для хранения текста для второго текстового поля, считанного флэшкой из файла banner_options.txt.

Значение параметров пишется без кавычек (если только вы не хотите, чтобы эти кавычки отображались) и для первого текстового поля находится между символами «=» и «&», а для второго – после символа «=».

Если динамических текстовых полей больше, чем два и нужно добавить больше параметров, после значения второго параметра в текстовом файле без пробела ставим еще один символ «&», далее имя переменной из кода ActionScript, символ «=» и сразу же без пробела значение следующего текстового поля.

Баннер способен корректно читать русский текст, латиницу и цифры.

Файл с параметрами должен лежать на сервере в одной папке с баннером или в любом другом месте интернета, если вы укажете в коде ActionScript абсолютный адрес (URL) к файлу параметров.

8. Добавляем ActionScript для чтения параметров баннера из текстового файла. В нужном кадре (в котором должен появиться текст из файла) отдельного слоя actions добавляем следующий код ActionScript 2.0:

// отпределяем правильную кодировку файла параметров: System.useCodepage = true;


// создаем пустые переменные для чтения значений из файлов:

var trainingName:String = "";

var trainingDate:String = "";
// вызываем функцию загрузки переменных с именем нашего файла:

loadVariables("banner_options.txt", _root); 
// запускаем таймер для проверки, загрузились ли переменные

gd = setInterval(checkLoading, 10);

// функция, проверяющая, загрузились ли переменные: function checkLoading() { // если значения переменных не пусты, то они загружены. if ((trainingName != "") && (trainingDate != "")) { // останавливаем таймер clearInterval(gd); //выводим в текстовое поле обе переменные, разделенные дробной чертой. txt_name.text = trainingName; txt_date.text = trainingDate; } }

Получится примерно так:

9. Готово: flash-баннер читает текст из внешнего источника (текстового файла). Нажмите на клавиатуре F12 при активном окне своей среды разработки Adobe Flash, чтобы увидеть результат выполнения урока. Не забудьте сделать готовый flash-баннер кликабельным.

Скачать архив с исходником .fla баннера на Flash, который берет значения текстовых полей из специального внешнего текстового файла, можно здесь.

А после работы можно и отдохнуть, поиграв в современные игрушки. Если ваш старый компьютер уже не позволяет использовать его в качестве игрового центра, стоит купить новый игровой компьютер Galaxy Black – очень красивый топ-геймерский девайс с самыми современными компьютерными комплектующими.

Код ActionScript 3, который позволяет сделать flash баннер ссылкой

Alexandr — Fri, 10 Jul 2009 17:59:43 +0000

В этом уроке я хотел бы подробно описать, как с помощью ActionScript 3 баннер на flash можно сделать ссылкой.

Вы можете совершенно бесплатно скачать архив .rar с исходником flash-баннера в формате .fla, который иллюстрирует этот урок (10 Кб):

Скачать бесплатно архив с исходником .fla баннера flash

В своей статье Как баннер на Flash сделать ссылкой я подробно описывал, как с помощью встроенного в Adobe Flash языка ActionScript 2.0 можно сделать флэш-ролик кликабельным. Суть урока в том, что нужно в самый верхний отдельный слой ролика flash вставить прозрачный объект button, размер которого совпадает с размером всего баннера. А далее к этой прозрачной кнопке цеплялся простенький код перехода, написанный на ActionScript 2. Все просто, все работает, все счастливы.

Судя по комментариям после этого урока, счастливы оказались не все. Предложенный стандартный способ сделать баннер flash кликабельным не работал, если баннер разрабатывался с использованием более новой версии языка ActionScript 3.0. Дело в том, что 3-я версия ActionScript существенно переработана и код ActionScript 2 не всегда понимается средой разработки и проигрывателем. Среда разработки Adobe Flash CS4, как и предыдущая версия Adobe Flash CS3, при создании нового флэш-клипа предлагает по умолчанию использовать новую версию встроенного языка ActionScript 3.0. Новички, которые при создании своего баннера решили, что более новая версия лучше, столкнулись с тем, что описанный в статье способ добавления ссылки в баннер на flash, не работал.

Лично я не сторонник использования всего самого нового. Предпочитаю подождать, пока другие помучаются с несоответствиями, потратят время на написание книг и уроков. Если старый способ работает – зачем искать себе лишнюю работу? Впрочем, сколько людей, столько и мнений.

На самом деле сделать ссылкой баннер, разработанный в Adobe Flash CS4 с выбранным языком ActionScript 3 не сложнее, чем более старых версиях Флэша на ActionScript 2. Просто это немного по-другому выглядит.

В языке ActionScript 3 для того, чтобы баннер сделать ссылкой, нужно использовать стандартную функцию navigateToURL(), которая входит в пакет flash.net. И код пишем не в самой кнопке, а в отдельном кадре, поскольку 3-я версия ActionScript вставлять код в объекты не соглашается. Если кому-то очень интересно описание этой и других функций языка ActionScript 3, рекомендую самостоятельно почитать официальный справочник компании Adobe, который теперь есть и на русском языке.

Как сделать flash баннер ссылкой с помощью кода на языке ActionScript 3. Пошаговая инструкция.

1. Делаем новый баннер или открываем сделанный ранее flash-ролик в программе Adobe Flash CS3 или Adobe Flash CS4. Для подготовки этого урока я использовал версию Adobe Flash CS3.

2. Создаем в нашем баннере отдельный слой и называем его link. Имя слоя не имеет значения, главное, чтобы он был самым верхним слоем. В этот слой добавляем прямоугольник, делаем его прозрачным и преобразовываем его в кнопку (button). О том, как это сделать, очень подробно и с картинками написано в этом уроке (шаги 3-7).

3. Готовой кнопке даем имя mybanlink. Для этого достаточно вписать это имя в панели свойств, когда кнопка активна, и нажать Enter:

4. После того, как прозрачная кнопка готова и у нее есть имя, нужно вписать соответствующий код ActionScript 3 в отдельный кадр отдельного слоя actions с помощью панели Actions. Чтобы открыть панель Actions, достаточно нажать F9. Код ActionScript 3, который нужно вписать, выглядит так:

mybanlink.addEventListener(MouseEvent.CLICK, mybanlinkClickListener);


function mybanlinkClickListener(e:MouseEvent):void {

	var url:String="http://www.web-article.com.ua";

	var urlRequest:URLRequest=new URLRequest(url);

	navigateToURL(urlRequest);

}

// Как flash-баннер сделать кликабельным на языке ActionScript 3 // Урок подготовлен специально для блога www.web-article.com.ua

Обратите внимание на использование имени нашей прозрачной кнопки в коде ActionScript 3:

У функции navigateToURL есть 2 параметра:
1. Обязательный, который должен соответсвовать типу данных URLRequest
2. Необязательный параметр, который определяет, в новом или в текущем окне будет открыта ссылка. Точнее, есть 4 значения второго необязательного параметра функции URLRequest:

_blank – открыть при клике по баннеру новое окно

_parent – открывать ссылку в этом же окне

_top – указывает фрейм самого верхнего уровня в текущем окне

_self – указывает текущий фрейм в текущем окне

Естественно, вместо ссылки http://www.web-article.com.ua вам нужно вставить свой URL, т.е. адрес страницы, на который должен осуществляться переход при клике по готовому flash баннеру. Не забывайте брать ссылку в кавычки и писать перед ней http://

Обращаю ваше внимание, что flash-баннеры с использованием ActionScript 3.0 более требовательны к правильному коду публикации flash на веб-странице. В некоторых версиях браузеров или старых flash-плеерах при использовании сокращенного кода публикации могут возникать ошибки. Потому, если вы вам нужен простой код для своего флэш-ролика и вы не собираетесь использовать расширенные функции ActionScript 3, делайте свои баннеры кликабельными с помощью более старого кода ActionScript 2. Не создавайте себе проблемы на ровном месте.

С раскруткой блога мне сегодня помогают:
Помимо разработки и размещения баннеров, любому успешному веб-сайту обязательно нужна поисковая оптимизация сайта.

Код для вставки Flash в текст или шаблон блога

Alexandr — Sat, 17 Jan 2009 11:03:51 +0000

Казалось бы, тривиальная задача вставки flash-баннера или ролика в HTML-код своего сайта не заслуживает того, чтобы писать на эту тему целую статью. К сожалению, не все так просто. Существует множество вариантов кода для публикации Flash, при чем единственно правильного, однозначно понимаемого всеми браузерами и удовлетворяющего стандарты W3C, нет. И дело не только в том, что существует огромное количество вариантов того, в какой версии Flash создавался баннер, какие при этом использовались команды ActionScript, какой версией flash-плеера и в каком браузере будет просматриваться flash-анимация. Проблема еще и в том, что компания Microsoft при создании своего браузера Internet Explorer запретила реализовывать взаимодействие с интерактивным контентом, пока пользователь не активирует его сам. Примерно так же поступила и Opera. В результате появилось несколько десятков вариантов HTML-кода для вставки flash-роликов, у каждого из которого есть свои преимущества и недостатки.

Самым популярным и наиболее адекватным кодом для публикации flash на своем сайте является код, одновременно использующий элементы object и embed. В таком HTML-коде используется дублирующая запись вызова flash-ролика, зато вероятность правильной загрузки вашей анимации почти стопроцентная:

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">

Этот код HTML позволяет вставить на свою страницу баннер с именем banner_name.swf размером 240х350 и при этом достаточно flash-плеера 8й версии. Такой код генерировался средой разработки Macromedia Flash до выхода Adobe Flash 8.

В восьмой и более поздней версиях Flash генерирует вдобавок к большому малопонятному объему кода в HTML-документе еще и файлик AC_RunActiveContent.js. В этом файле среда разработки Adobe Flash CS3 с помощью 291 строки JavaScript–кода более подробно объясняет браузерам, как правильно публиковать простенькие флэшки. Это вдобавок к сгенерированным в основном HTML-документе 49 строкам HTML-кода.

В Adobe Flash CS4 на достигнутом не остановились. По мнению разработчиков, чтобы опубликовать flash-баннер нужно 321 (триста двадцать одна) строка кода HTML и JavaScript. Это шесть экранов на 19-дюймовом мониторе. Спасибо хоть весь код генерируется в один файл. Вероятно, так Adobe показывает свою заботу о пользователях админок сайтов, которые не могут подключать внешние JavaScript-файлы в код шаблона. Вспомнился бородатый анекдот о том, сколько милиционеров нужно, чтобы вкрутить лампочку. Теперь вместо милиционеров можно рассказывать о программистах Adobe.

Шутки-шутками, но такой код программы по созданию flash-контента генерируют не зря. Сложно добиться правильной загрузки сложных флэшек (а Flash используется не только для создания простеньких баннеров) в браузерах, разработчики которых выдумывают собственные стандарты. При этом еще flash-проигрывателей Adobe насоздавала от души в последнее время. Теперь приходится выкручиваться.

Существуют и короткие HTML-коды для вставки flash на свою страницу. Но они не всегда понимаются правильно разными браузерами. Например, код

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"> width="240" height="350" src="banner_name.swf">

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

Существует также код, ориентированный на Microsoft Internet Explorer:

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">

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

Для начинающих разработчиков flash-баннеров я бы хотел посоветовать сохранять готовые флэшки в как можно более ранних версиях. Если вы не используете возможности ActionScript 3.0, не нужно требовать загрузку Flash Player 10 от посетителя сайта. Подавляющее большинство баннеров использует старые методы анимации и ActionScript 2.0 и для их адекватного отображения вполне хватит плеера 7й или 8й версии. Зато в этом случае вероятность того, что посетитель сайта увидит вашу работу в своем браузере и увидит ее с задуманной вами скоростью, намного выше.

Чтобы опубликовать flash-баннер, рассчитанный на Flash Player 7 и Flash Player 8 в более новых версиях, например, Adobe Flash CS3, нужно установить настройки публикации баннера как показано на рисунке (File->Publish Settings…):

Если вы все же хотите сгенерировать код html для вставки флэш-ролика, рекомендуемый Adobe, нажмите на клавиатуре F12 при активной программе Adobe Flash. При этом в папке проекта появится HTML-страница с кодом, сгенерированным Flash, имя которой совпадает с названием проекта. Также, в зависимости от версии среды разработки Adobe Flash, может появиться и файл AC_RunActiveContent.js, который тоже нужно загрузить на свой сайт и подключить его к шаблону вашего сайта или блога. Честно говоря, непростая задача с сомнительной эффективностью.

Как flash-баннер сделать ссылкой

Alexandr — Wed, 10 Dec 2008 12:10:43 +0000

После того, как вы сделали flash-баннер, нужно сделать его кликабельным. Вставить flash-ролик в код страницы и сделать его ссылкой с помощью HTML-кода, как это делается с gif-баннером, не получится. Но при нажатии на баннер должна открываться веб-страница, которую он рекламирует. Смысл создания любого баннера в осуществлении перехода на рекламируемый веб-сайт.

Задача легко решаема. Для этого мы создадим отдельный слой в баннере и добавим в него кнопку с кодом перехода на встроенном во Flash языке программирования Action Script. Эта статья-урок подробно описывает, как именно добавить ссылку во flash-баннер:

on (release) { getURL("http://www.web-article.com.ua", _blank); }

Архив flash-баннера с исходником в формате .fla, который иллюстрирует этот урок, готовый файл и автоматически сгенерированная страница публикации можно скачать здесь (1,32 Мб):

Скачать с depositfiles Скачать с letitbit

Для того, чтобы сделать flash-баннер кнопкой, нам понадобится программа Adobe Flash, в которой и создается сам баннер. В уроке использовалась версия Adobe Flash CS3 Professional, но все файлы сохранены для Flash 8. Для других версий Flash действия по созданию ссылки в баннере аналогичны. Итак, начнем работу.

1. Открываем программу Adobe Flash, открываем сделанный раньше баннер или заново создаем в ней требуемую для нашего баннера анимацию. При создании нового flash-баннера нужно выбирать язык программирования Action Script 2.0, несмотря на то, что уже вышла версия Action Script 3.0. Еще далеко не все пользователи интернета обновили flash-player хотя бы до 9й версии и у них могут возникнуть проблемы с проигрыванием вашего баннера на своем компьютере.

2. Создаем в нашем баннере отдельный слой. Назовем его, например, link. Имя слоя не имеет значения, главное, чтобы он был самым верхним слоем.

3. Выбираем инструмент Rectangle Tool (Прямоугольник). На этом этапе среда разработки баннера Adobe Flash CS3 Professional выглядит так:

4. Рисуем в рабочей области прямоугольник любого размера и в любом месте. Но прежде чем его рисовать, уберем границу прямоугольника и сделаем его заполнение полностью прозрачным. Для этого в закладке Color (Shift+F9, если ее нет) выставим следующие настройки:

5. Убедившись, что мы нарисовали прямоугольник в первом кадре самого верхнего слоя, переходим на закладку Info. Если этой закладки нет, нажмите Ctrl+I или выберите Window->Info – она появится. Выделяем наш невидимый прямоугольник, кликнув на первом кадре слоя link, а затем кликнут на проявившемся прямоугольнике:

6. В закладке Info устанавливаем размеры прямоугольника, который скоро будет кнопкой. Размеры должны быть такими же, как размеры flash-баннера, а координаты X=0.0 и Y=0.0. В нашем случае панель Info выглядит так:

7. Выделяем прямоугольник. Чтобы преобразовать его в кнопку, нажимаем F8, в открывшемся окне выбираем Button и жмем OK:

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

Нажимаем F9, чтобы открыть панель Actions. Выделяем первый кадр самого верхнего слоя, чтобы выделить кадр с кнопкой, затем нажимаем на маленьком кружочке в центре кнопки. После этого вставляем в панель Action код перехода по клику на flash-баннере. При этом сайт, на который ссылается баннер, откроется в новом окне браузера:

on (release) { getURL("http://www.web-article.com.ua", _blank); }

Выглядит это примерно так:

Этот код Action Script 2.0 означает, что при отпускании кнопки мыши после клика по нашему flash-баннеру откроется новое окно браузера и в нем откроется сайт www.web-article.com.ua.

Для того, чтобы ссылка открывалась в том же окне браузера, нужно убрать код «, _blank». И естественно, вставлять ссылку на свой сайт вместо ссылки на наш блог:

on (release) { getURL("http://www.web-article.com.ua"); }

Обращаем ваше внимание, что очень важно вставлять код Action Script именно в кнопку, а не в кадр кнопки. Это распространенная ошибка. Также убедитесь, что вы создаете документ не старше версии Action Script 2.0, в более новых версиях этот код может не работать либо пониматься старыми flash-проигрывателями неправильно.

Если при создании баннера в среде разработки Adobe Flash CS3 или Adobe Flash CS4 вы выбрали более новый язык Action Script 3.0 языком скриптов вашего баннера, этот урок вам не подходит. Почитайте статью Код ActionScript 3, который позволяет сделать flash баннер ссылкой.

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

Alexandr — Sat, 29 Nov 2008 11:19:09 +0000

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

В этой статье мы научимся делать анимированные GIF-баннер средней сложности с нуля. Для этого нам понадобится немного времени и терпения, т.к. шедевр анимации у новичка за час не получится никак. Из программ мы будем использовать Adobe Photoshop CS3 – для подготовки кадров баннера и Ulead GIF Animator 5 – для создания из готовых кадров анимационного ролика в формате GIF. Если вы не знаете, где взять эти программы, рекомендую прочитать статью Чем бесплатно скачать любую информацию.

В результате выполнения этого урока мы получим вот такой баннер:

Все материалы этого урока, включая фотошоповский файл PSD со слоями и триал программы Ulead GIF Animator 5, можно скачать по ссылке:

Скачать с depositfiles

Этап I: Подготовка кадров баннера в программе Adobe Photoshop:

1. Выбираем размер баннера, который мы будем делать (в примере ширина баннера 468 пикселей, высота 60 пикселей). Определяемся с примерным сценарием баннера: что и как будет двигаться. Ищем в интернете нужные картинки, готовим логотип компании и другую графику, которую вы хотите вставить в свой будущий баннер.

2. Создаем в Фотошопе файл размером 468х60. Добавляем в него всю нужную графику, логотип, размещаем в нужном месте видимой области баннера, выравниваем. Чаше всего в баннерах делают тонкую рамку на границе видимой области, некоторые сайты даже не принимают рекламные баннеры, не ограниченные рамкой.

Каждый элемент располагаем на отдельном слое. Желательно группировать слои в папки, чтобы не путаться, какая графика к какому кадру относится. Подготовив один кадр, скрываем его слои для удобства и на освободившемся месте готовим другой кадр. Получится примерно так:

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

1 кадр: Спрятав все слои, кроме самого нижнего, сохраним фон нашего баннера:

2 кадр: Сохраняем файл с логотипом, но без надписи «Веб-студия»:

3 кадр: Сохраняем кадр логотипа:

4 кадр: Прячем все слои, кроме слоя с арбузом и фонового. Сохраняем предпоследний кадр анимации:

5 кадр: Делаем видимым еще и слой со слоганом баннера. Сохраняем пятый файл в gif:

В результате мы создали 5 статических GIF-файлов, из которых сейчас сделаем один файл GIF-анимации.

Этап II: Создание анимированного GIF-баннера из подготовленных кадров с помощью программы Ulead GIF Animator:

1. Открываем Ulead GIF Animator 5. Запускаем Мастер анимации (4й пункт сверху в меню Файл). Выбираем размер баннера и нажимаем Далее:

2. В новом шаге мастера анимации добавляем созданные нами ранее 5 кадров баннера. Для этого нажимаем на кнопку «Добавить изображение» и с помощью Shift выделяем за раз все файлы и добавляем их в Мастер:

3. Работа Мастера анимации почти завершена. Осталось выбрать скорость смены кадров. Можно не менять предложенную по умолчанию скорость в четверть секунды (25 мс), позже мы все равно сделаем для каждого кадра свое время задержки. Нажимаем Далее и завершаем работу Мастера анимации.

4. Попадаем в основное окно программы. Пять кадров добавлены, теперь нужно установить их в нужной нам последовательности, каждому кадру выставить свое время задержки и продублировать несколько кадров, чтобы добиться «мигания» баннера.

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

Чтобы изменить время показа кадра баннера, нужно дважды кликнуть на кадре и в самом верхнем поле появившегося окна вписать нужное время (100 мс =1 секунда).

Чтобы изменить последовательность кадров баннера, зажмите перетаскиваемый кадр левой кнопкой мыши и перетащите его на новое место.

5. После смены последовательности кадров, дублирования и экспериментов со временем показа, наша линейка кадров будет выглядеть вот так:

6. Для того, чтобы просмотреть, как баннер будет выглядеть в анимированном виде, можно воспользоваться вкладкой Предосмотр. Если все устраивает – сохраняем баннер в формате GIF: Ctrl+Shift+S.

7. Баннер готов. Может открыть его любым браузером или программой просмотра графики. Сделанный нами GIF-баннер в конечном итоге выглядит так:

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

border="0" title="Создание веб-сайтов для вашего бизнеса" alt="Создание веб-сайтов для вашего бизнеса" />

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