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

В этом уроке я хотел бы подробно описать, как с помощью 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:

Имя для кнопки flash

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

1
2
3
4
5
6
7
8
9
10
mybanlink.addEventListener(MouseEvent.CLICK, mybanlinkClickListener);

function mybanlinkClickListener(e:MouseEvent):void {
var url:String="https://www.web-article.com.ua";
var urlRequest:URLRequest=new URLRequest(url);
navigateToURL(urlRequest);
}

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

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

Код ActionScript 3 для баннера flash

У функции navigateToURL есть 2 параметра:

1. Обязательный, который должен соответсвовать типу данных URLRequest

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

  • _blank — открыть при клике по баннеру новое окно
  • _parent — открывать ссылку в этом же окне
  • _top — указывает фрейм самого верхнего уровня в текущем окне
  • _self — указывает текущий фрейм в текущем окне

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

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

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

  1. Nadin12, по умолчанию, если никакие параметры не писать, при клике на баннер прописанная ссылка открывается в новом окне. Для большинства баннеров именно это и нужно.

    Если же вы хотите, чтобы при клике переход был в этом же окне, напишиет вместо 9й строчки кода:

    navigateToURL(urlRequest);

    строчку:

    navigateToURL(urlRequest, «_parent»);

  2. Вопрос о необязательном параметре функции URLRequest.
    Хочу вставить параметр «_parent», но не знаю как правильно прописать код, т.е. куда именно прописывать, и может что-то еще дописывать.
    Подскажите, пожалуйста.
    ПС: Огромное спасибо автору. Очень полезный урок. (Еще в начале недели даже не знала про существование adobe flash…)

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

  4. Nadin12, если правильно вставлять flash-ролик на сайт, то он не считается поп-апом и не блокируется. Рекомендую почитать последнюю из 5ти рекомендованых статей после этой. К сожалению, правильная вставка флэшек с ActionScript 3 для 10го плеера — целое искусство

  5. Очень понятно и подробно расписан способ создания ссылки для flash-баннера. Прописала как у вас — всё работает. Но когда отправила заказчику, мне написали следующее —  что мол проверили на движке, переходы не считает и потребовали написать в примерно следующем соответствии:

    butgzt.addEventListener(MouseEvent.RELEASE, clickBond);
    function clickBond(event:MouseEvent):void
    {
      getURL(root.loaderInfo.parameters.link1, «_blank»);
    }
    Правда с примечанием, что может быть и работать енто не будет.
    Действительно компиллятор выдал три ошибки. В результате кое-что из этого я исправила:

    butgzt.addEventListener(MouseEvent.CLICK, butgztClickBond);
    function butgztClickBond (event:MouseEvent):void
    {
      getURL(root.loaderInfo.parameters.butgzt, «_blank»);
    }

    Из трех осталась одна ошибка:
    1180 — Call to a possibly undefined method getURL — то есть компьютер работает в строгом режиме. И как быть с этой ошибкой? Может подскажите?

  6. Larisa, в статье есть ссылка на официальный адобовский хелп. Также рекомендую описать свою проблему на форуме той банерообменной системы, для которой делается баннер или написать письмо в ее техподдержку

  7. Спасибо. Метод работает. Есть одно НО.
    У меня есть исходник с flashden.net, созданный при помощи ActionScript 3 скриптов. Так вот. Как бы я не ставил слой ( по статье он должен быть первым ) — графика скрипта flashden накладывается сверху на него..
    т.е. по сути вывод графики flashden идёт поверх слоя со ссылкой даже при условии, что по порядку слой стоит на первом месте..

  8. Олег, пропишите код для ссылки так, чтобы он выполнялся в последнюю очередь

  9. Я в этом деле начинающий, не могли бы подсказать каким образом это обозначить.. Или хотя бы где прочесть об этом?

  10. Олег, лично мне неохота вникать, в чем там дело. Может, кто-то из читателей блога менее ленивый 🙂

  11. Просто очерёдность выполнения скрипта результата не даёт.
    ____________________________________________
    Вот пример кода:

    import bitfade.text.steel

    var config:XML =
    <config width=»315″ height=»75″>
    // if you want to disable the steel effect and use original logo colors
    // just set nosteel=»true»
    <transition duration=»7″ delay=»2″ color=»fire» glowIntensity=»2″ nosteel=»false»>
    <item type=»class»>logo</item>
    </transition>
    <transition duration=»7″ delay=»2″ color=»fire» glowIntensity=»2″ nosteel=»false»>
    <item type=»class»>interface</item>
    </transition>
    <transition duration=»7″ delay=»2″ color=»fire» glowIntensity=»2″ nosteel=»false»>       
    <item type=»class»>unr</item>
    </transition>
    </config>

    addChild(new steel(config))

    mybanlink.addEventListener(MouseEvent.CLICK, mybanlinkClickListener);

    function mybanlinkClickListener(e:MouseEvent):void {
    var url:String=»https://www.web-article.com.ua»;
    var urlRequest:URLRequest=new URLRequest(url);
    navigateToURL(urlRequest);
    }
     
    ____________________________________________

  12. Воспользовался данным методом и получил
    Описание:
    1061:  Обращение к возможно неопределенному методу addEventListener через  ссылку статического типа Class
    Источник:
    button1.addEventListener(MouseEvent.CLICK, button1ClickListener);
     
    button1 —  символ  у меня в библиотеке типа кнопка с включенным линкейджем
    Отмечены:
    Экспорт для Actionscript
    Экспорт в 1 кадр
    Класс: button1
    Базовый класс: flash.display.SimpleButton
     
    Кнопка соответственно не срабатывает



    Почему мои лыжи не едут??
    Буду очень благодарен

  13. У меня такая проблема — при нажатии на кнопку появляется окно с предупреждением: adobe flash player остановил потенциально небезопасную операцию — Ок и Параметры. Чтобы кнопка заработала надо в параметрах добавить флэш файл в список разрешенных. Как избавиться от этого?

  14. Привет. Воспользовался кодом.
    Работает.  Ссылку открывает в новом окне. Пытаюсь вставить «_parent» хоть убей не работает. Ошибок не выдает.
    Но ничего и не открывает.
    Что делать?

  15. Аlex, по всей видимости, вы запускали с локального места (с компьютера), попробуйте загрузить на сайт и запускать из интернета, предупреждение должно исчезнуть.

  16. Здраствуйте как мне создать  анимацию с трех картинок и прекрипить на кожную картинку ризни ссилки ???
    буду очень вдячен

  17. Кстати, касательно скрипта Олега… тут всего-то надо было сделать вот так. 🙂
    <item link=»http://yoursite.com»>text</item>

  18. Всем привет!=)
    Я начинающий программист!=)
    Видел много просьб чтоб открывалось в том же окне! Я пробовал варианты которые давали но все равно открывалось в новой вкладке!=(
    Я использовал скрипт во FLEX для перехода на страницу и мне не надо было открывать новую вкладку! Попробовал
     
    var urlRequest:URLRequest=new URLRequest(» https://www.web-article.com.ua«);

    То есть не создавал отдельную переменную для адреса а прописывал внутри и все получилось!
    В чем прикол не могу сообразить! Объясните плиз)
     
     

  19. Прописал navigateToURL(urlRequest, «_parent»);
    Выдает синтаксическую ошибку. Без этого страница открывается в новом окне. Как избавиться от проблемы?

  20. Ergo, замени « на » или ‘
    З.Ы. правда у меня navigateToURL с 2 параметрами почемуто не работает, только с 1

  21. З.З.Ы тут движок сайта подменяет нормальные кавычки на уголки… ставьте нормальные кавычки и будет счастье

  22. вот небольшая подсказка еще….
    конструкция
     
    turl.appendText(tURL);
    try {
    var targetURL:URLRequest=new URLRequest(tURL);
    navigateToURL(targetURL,’_self’);
    } catch (e:Error) {
    myTextBox.appendText(e.name);
    }
     
    помогла мне отдеюажить ошибку….
    если тестировать ролик из локального хранилища, если в качестве параметра window в navigateToURL передавать что-то кроме ‘_blank’
    на выходе получим Security Error
    т.е. баловство с параметром window работает только на веб сервере.
     

  23. Спасибки, всё получилось с пол-пинка. Единственное неприятное место — отображение кавычек- ну так и книжки умные можно для начала почитать

  24. Хм, а у меня во флешке, в конце воспроизведения ролика переход по ссылке осуществляется автоматом(т.е popup получился), а не по клику мыши. И так каждый раз в конце воспроизведения ролика. В чем причина?

  25. Касательно своего же вопроса выше — моте кому пригодится — почему у меня выдавалась ошибка 1061 — я пытался присваивать функцию не экземпляру кнопки а собственно самой кнопке из библиотеки.
    Грубо говря нужно было указать instance name для кнопки помещенной в рабочую область и для этого имени прописывать код

  26. Вопрос снимается, нузно было прописать во всех ключах instance name. Вероятно сначала понасоздавал ключей, а потом прописал inctence name только в одном ключевом кадре. В общем работает, спасибо!

  27. TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at altakraftlag_fla::MainTimeline/frame103()
     
    Как исправить?

  28. здравствуйте!
    сделала все как описано в статье, но вышла маленькая прблема.Дело в том , что  ссылка работает только при воспроиздедении самой прграммы а когда отдельно кликаешь на сам ролик ссылка не открывается((
    Не моглибы вы подсказать в чем ошибка?

  29. Здравствуйте! Я только начинаю учить AS, причём с AS1. Так, мне кажется я сумею лучше понять суть. Но как всегда жизненые обстоятельства нас не ждут. Не могли бы подсказать код вдля баннера в AS3.0 для подсчета переходов на сайт?

  30. Ай спасибо вам гуру!
    Я поставил flash CS4, а там ON RELEASE не работает совсем…  Ваш метод создания кнопки во флеше новых версий очень помог.
    Единственное, это то, что если создавать кнопку в виде прямоугольника, то он закрывает собой весь ролик. Спасли Альфа-каналы, с помощью которых можно сделать кнопку-прямоугольник прозрачным.

  31. А я всегда пользуюсь Flash MX, просто, удобно, я не программист, делаю там анимацию и не мучаюсь. Спасибо за урок!

  32. ппц! сколько кода что бы сделать простую ссылку! ужас! танцы с бубном приложите к описанию. Спасибо!

  33. Урок супер!! Только с помощью него всё получилось!! Спасибо!
    Ребята, только столкнулась с проблемой, может кто-то сможет помочь!!
    Делаю сайт на флеш, т.е.страница полностью флешовая, там канешно есть меню — как сделать не одну и несколько ссылок?? Сколько не бьюсь — не получается((

  34. Взял ваш код для вставки ссылки. У меня выдает ошибку 
    1120: Обращение несуществующего свойства link.
    в чем может быть проблема?

  35. Спасибо за комментарии — очень помогли, а именно:

    Ergo пишет:
    Июль 15th, 2010 at 13:40

    Прописал navigateToURL(urlRequest, «_parent»);
    Выдает синтаксическую ошибку. Без этого страница открывается в новом окне. Как избавиться от проблемы?

    VoiD пишет:
    Август 4th, 2010 at 16:57

    Ergo, замени « на » или ‘
    З.Ы. правда у меня navigateToURL с 2 параметрами почемуто не работает, только с 1

  36. А как делать ссылку не в кнопке? Пишут такой способ уже устарел. Какие еще есть??

  37. Здравствуйте! вот такой вот код
    с бланк он работает хорошо но если прописать «_parent» при нажатии работает но только если открыть на компе а вот в браузере не переходит по ссылки 
     
    var urlreg:URLRequest = new URLRequest («http://chinatex.ru/odezhda/poshiv-odezhdy.html»)
    btn.addEventListener(MouseEvent.CLICK,onClick);
    function onClick (e:MouseEvent):void{
    navigateToURL(new URLRequest(«http://chinatex.ru/odezhda/poshiv-odezhdy.html»), «_blank»); 

  38. кавычки нормальные как и должны быть почему то они тут заменяются  

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

  40. Ребята а как сделать что бы переход по ссылке произошел автоматически?

    on (release) {
    getURL(«адрес сайта», _blank);
    }

Добавить комментарий

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