Tag Archives: flash

Сен 03

Переход по гиперссылке при клике на флеш-баннер. Улучшенное решение!

Posted on by

Я уже касался этой темы в посте http://blog.codething.ru/posts/69, но решение через jQuery.SWFObject Plugin оказалось не универсальным и, в частности, совсем не работает в браузере Google Chrome. В остальных браузерах тоже работает не очень хорошо, так, например, при наведении на баннер курсор мыши не становится активным, как при наведении на гиперссылку.

Что же делать?

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

<div id='b1' style='overflow: hidden; width: 200px; height: 200px;'>
	<object type="application/x-shockwave-flash" data="filename.swf" width="200" height="200">
		<param name="wmode" value="opaque">
		<param name="movie" value="filename.swf" />
	</object>
	<div id="b2" style="z-index: 100; position: absolute;" width="200" height="200">
		<a href="http://blog.codething.ru/"><img src="x.gif" width="200" height="200"/></a>
	</div>
</div>
<script>
	$(document).ready(function(){
		p = $('#b1').position();
		$('#b2').css("left", p.left+'px');
		$('#b2').css("top", p.top+'px');
	});
</script>

Теперь баннер отображается корректно, курсор активируется как положено.

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

В приведенном коде размещается баннер filename.swf размером 200x200 px. Прозрачная картинка x.gif - однопиксельный gif-файл с прозрачностью.

Фев 21

Делаем гиперссылку при клике на флеш-баннер

Posted on by

Поначалу кажется странным, но проблема создания гиперссылки из флеш-объекта существует очень давно. Обычным тегом <A> никак нельзя создать гиперссылку с флеш-объекта. Не помогает и более хитрый вариант с <DIV onClick='location.href=""'>, потому что у флеш своя собственная активная зона на экране, где могут обрабатываться какие-то события, связанные с мышкой.

Как обойти эту проблему? Большинство людей советуют встроить ссылку в сам Flash-файл. Делается это очень просто - прямо в Adobe Flash - создается прозрачный слой-кнопка, которой прописывается обработчик события onRelease().

button.onRelease = function() {
getURL("http://www.codething.ru/");
};

Этот способ хорош лишь в том случае, если вы самостоятельно изготавливаете и Flash-ролик и сайт.

Если же вам приносят множество готовых флеш-роликов (чаще всего это баннеры), в которых ссылка явно не задана, то следует применять другой, более экзотический способ создания гиперссылки. Например, можно воспользоваться javascript библиотекой jQuery и её расширением jQuery SWFObject plugin.

Для этого выполним следующие действия:

1. Качаем jQuery с сайта http://jquery.com/
2. Качаем плагин jQuery SWFObject plugin с сайта http://jquery.thewikies.com/swfobject/ (заодно читаем там документацию и смотрим примеры).
3. Размещаем на странице нехитрый код:

<a href="http://www.codething.ru/">
 <div id="myflash"></div>
</a>
<script>
$(document).ready(
 function() {
  $('#myflash').flash(
  {
   swf: '/images/banner.swf',
   width: '120px',
   height: '120px'
  });
 }
);
</script>

4. Радуемся результату!