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

10.07.09    Как сделать баннер, Подробные инструкции

В этом уроке я хотел бы подробно описать, как с помощью 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="http://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 – указывает текущий фрейм в текущем окне

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

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

    В раскрутке блога сегодня помогают:
    Работая с зарубежными клиентами приходится искать способы выплаты в Paypal. Для постсоветсткого пространства это реальная проблема. Недорогие красивые часы replica zenith, которые очень похожи на настоящие. Если вам не нравится узнавать время на мобильнике, можно купить и хвастаться. А как приятно делать баннеры и раскручивать сайты, сидя с ноутбуком в сауне и глядя на чугунную печь для бани Калита Арочная!

    Статьи похожей тематики:

    Метки: , , , , , , , , ,

    Опубликовано: Пятница, 10th Июль 2009 в 19:59. Статья относится к рубрике Как сделать баннер, Подробные инструкции. Если вам нравится этот сайт, вы можете следить за его обновлением, подписавшись на RSS.

     Получайте новые статьи по e-mail:


    Создание веб-сайтов для вашего бизнеса

    Комментарии (24) к “Код ActionScript 3, который позволяет сделать flash баннер ссылкой”

    1. Nadin12 пишет:
      Июль 31st, 2009 at 14:27

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

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

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

      navigateToURL(urlRequest);

      строчку:

      navigateToURL(urlRequest, «_parent»);
    3. Nadin12 пишет:
      Июль 31st, 2009 at 15:16

      спасибо, уже прописала, работает отлично.
      Идея прописать параметр появилась при тестировании флеша на сайте. Если заблокированны всплывающие окна, то ссылка не открывается.
    4. Alexandr пишет:
      Июль 31st, 2009 at 18:19

      Nadin12, если правильно вставлять flash-ролик на сайт, то он не считается поп-апом и не блокируется. Рекомендую почитать последнюю из 5ти рекомендованых статей после этой. К сожалению, правильная вставка флэшек с ActionScript 3 для 10го плеера – целое искусство
    5. Larisa пишет:
      Сентябрь 21st, 2009 at 17:12

      Очень понятно и подробно расписан способ создания ссылки для 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. Alexandr пишет:
      Сентябрь 22nd, 2009 at 09:06

      Larisa, в статье есть ссылка на официальный адобовский хелп. Также рекомендую описать свою проблему на форуме той банерообменной системы, для которой делается баннер или написать письмо в ее техподдержку
    7. Олег пишет:
      Сентябрь 22nd, 2009 at 14:39

      Спасибо. Метод работает. Есть одно НО.
      У меня есть исходник с flashden.net, созданный при помощи ActionScript 3 скриптов. Так вот. Как бы я не ставил слой ( по статье он должен быть первым ) – графика скрипта flashden накладывается сверху на него..
      т.е. по сути вывод графики flashden идёт поверх слоя со ссылкой даже при условии, что по порядку слой стоит на первом месте..
    8. Vegas пишет:
      Сентябрь 22nd, 2009 at 15:10

      Олег, пропишите код для ссылки так, чтобы он выполнялся в последнюю очередь
    9. Олег пишет:
      Сентябрь 23rd, 2009 at 09:02

      Я в этом деле начинающий, не могли бы подсказать каким образом это обозначить.. Или хотя бы где прочесть об этом?
    10. Олег пишет:
      Сентябрь 23rd, 2009 at 14:09

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

      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=»http://www.web-article.com.ua»;
      var urlRequest:URLRequest=new URLRequest(url);
      navigateToURL(urlRequest);
      }
       
      ____________________________________________
    11. Alexandr пишет:
      Сентябрь 23rd, 2009 at 14:46

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

    12. rpaqpqp пишет:
      Декабрь 22nd, 2009 at 02:00

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



      Почему мои лыжи не едут??
      Буду очень благодарен
    13. Alex пишет:
      Март 8th, 2010 at 02:54

      У меня такая проблема – при нажатии на кнопку появляется окно с предупреждением: adobe flash player остановил потенциально небезопасную операцию – Ок и Параметры. Чтобы кнопка заработала надо в параметрах добавить флэш файл в список разрешенных. Как избавиться от этого?
    14. U-N1K пишет:
      Март 16th, 2010 at 06:55

      Привет. Воспользовался кодом.
      Работает.  Ссылку открывает в новом окне. Пытаюсь вставить «_parent» хоть убей не работает. Ошибок не выдает.
      Но ничего и не открывает.
      Что делать?
    15. Деловой пишет:
      Апрель 22nd, 2010 at 09:59

      Аlex, по всей видимости, вы запускали с локального места (с компьютера), попробуйте загрузить на сайт и запускать из интернета, предупреждение должно исчезнуть.
    16. Дима пишет:
      Май 10th, 2010 at 19:45

      Здраствуйте как мне создать  анимацию с трех картинок и прекрипить на кожную картинку ризни ссилки ???
      буду очень вдячен
    17. sax пишет:
      Июнь 3rd, 2010 at 19:20

      Кстати, касательно скрипта Олега… тут всего-то надо было сделать вот так. :-)
      <item link=»http://yoursite.com»>text</item>
    18. Semik пишет:
      Июнь 11th, 2010 at 14:52

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

      То есть не создавал отдельную переменную для адреса а прописывал внутри и все получилось!
      В чем прикол не могу сообразить! Объясните плиз)
       
       
    19. Ergo пишет:
      Июль 15th, 2010 at 13:40

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

      Ergo, замени « на » или ‘
      З.Ы. правда у меня navigateToURL с 2 параметрами почемуто не работает, только с 1
    21. VoiD пишет:
      Август 4th, 2010 at 16:58

      З.З.Ы тут движок сайта подменяет нормальные кавычки на уголки… ставьте нормальные кавычки и будет счастье
    22. VoiD пишет:
      Август 4th, 2010 at 17:09

      вот небольшая подсказка еще….
      конструкция
       
      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. Alexandr пишет:
      Август 5th, 2010 at 06:19

      Спасибо за полезные замечания, VoiD :)
    24. Алекс пишет:
      Август 28th, 2010 at 21:00

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

    Оставить комментарий или два

    * обозначены обязательные для заполнения поля