Делаем флеш баннер с изменяемой ссылкой

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

В уроке мы разберемся, как во флеш баннере создать изменяемую ссылку, задаваемую с помощью переменных. И посмотрим на примере, каким образом передавать эту ссылку во флеш с помощью параметра FlashVars.


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

До недавнего времени ссылку для флеш баннера можно было задать, только открыв исходник (fla) непосредственно во флеш редакторе и прописав соответствующий Action Script. Подобный расклад означает, что уже готовый флеш файл (swf) имеет внутри себя ссылку, которая прописывается в процессе его изготовления, и изменить ее в будущем уже нельзя. Еще один минус подобных статичных ссылок в скрипте флеш баннера – это полное их отсутствие для поисковых машин. Поисковый бот смотрит только HTML код, внутрь баннера он не заглядывает, поэтому и ссылка ваша не индексируется.

Решение проблемы – использование так называемых динамичных ссылок, которые передаются во флеш баннер из кода вставки, с помощью параметра FlashVars.

А теперь перейдем к нашему уроку.


СОЗДАЕМ ФЛЕШ БАННЕР С ИЗМЕНЯЕМОЙ ССЫЛКОЙ

В качестве примера я решил взять одну из своих работ, а именно флеш баннер для webeffector.ru.


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

на весь экран

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

на весь экран

Для этого я нарисовал прямоугольник размером 468x60 (ширина и высота документа – посмотреть можно в document -> modify). Точно подогнать размер поможет панель Properties (info в некоторых версиях). Перетаскиваем прямоугольник в библиотеку и устанавливаем Type: Button. Располагаем новоиспеченную кнопочку точно поверх нашего баннера, чтобы она полностью закрывала область документа (опять же подогнать нужные координаты можно в панели Properties). Прописываем имя трансформы кнопки в окошке instance name. В моем варианте это btn. Выбирая свое имя, помните, что оно должно совпадать с именем, которое будет использоваться в Action Script. В конце всего этого необходимо сделать кнопку невидимой, чтобы через нее был виден баннер. Один из способов – это выставить значение Alpha для данной трансформы кнопки в ноль.



Теперь перейдем к Action Script. Код необходимо вставить в первый кадр слоя actions. Для этого выделяем кадр на таймлайне, затем открываем вкладку Actions-Frame и копируем туда код. Он совсем не сложный и выглядит следующим образом:

btn.onRelease = function() {
getURL(link, "_blank");
}; // после клика по кнопке с именем btn скрипт дает браузеру команду открыть адрес, задаваемый переменной link, в новой вкладке.

В моем случае адрес для динамичной ссылки задается переменной link. В варианте со статичной ссылкой вместо этой переменной мог быть прописан абсолютный адрес в Интернете. Например так:

btn.onRelease = function() {
getURL("http://mysite.ru/", "_blank");
}; // после клика по кнопке с именем btn скрипт дает браузеру команду открыть адрес http://mysite.ru/ в новой вкладке.

С баннером закончили. Осталось сохранить файл и экспортировать в swf. Я думаю, вы самостоятельно справитесь с этой простой задачей.


ПУБЛИКУЕМ ФЛЕШ БАННЕР С ИЗМЕНЯЕМОЙ ССЫЛКОЙ

Теперь посмотрим пример HTML кода вставки для такого баннера.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="ШИРИНА"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0 "
height="ВЫСОТА"
title="НАЗВАНИЕ">
<param value="http://АДРЕС ФЛЕШКИ"/>
<param value="high"/>
<param value="link=http://АДРЕС ССЫЛКИ" name="flashvars"/>
<embed
pluginspage="http://www.macromedia.com/go/getflashplayer"
quality="high"
width="ШИРИНА"
src="http://АДРЕС ФЛЕШКИ"
height="ВЫСОТА"
flashvars="link=http://АДРЕС ССЫЛКИ" type="application/x-shockwave-flash">
</embed></object>

Пояснения к коду:

ШИРИНА - ширина публикуемого файла.
ВЫСОТА - высота публикуемого файла.

НАЗВАНИЕ - любое, выбирается самостоятельно.
Самый обыкновенный title, придумывается что-то соответствующее поисковым запросам.

АДРЕС ФЛЕШКИ - адрес swf файла в Интернете.
АДРЕС ССЫЛКИ - адрес, на который баннер будет направлять после клика.

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

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

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

DACASCAS

Другие уроки по флеш:
Делаем флеш галерею с подгружаемыми изображениями