Взаимодействие javascript с флэш-роликом. Часть 2.

В первой части урока "Взаимодействие Flash и Javascript" мы подготовили html-страницу и написали необходимый javascript код. Теперь можно заняться флэш-роликом и программированием в AS 3.

Я не буду сильно мудрить и создавать классы да пакеты (ведь AS3 объектно-ориентированный в отличие от AS2), а буду все функции писать прямо в нашем флэш-ролике.

Для начала создадим во Flash новый файл с размерами сцены 300х200 пикселей. Нарисуем там кнопку и в окне Properties в поле InstanceName дадим ей имя toJavaButton. Далее создадим два текстовых поля и назовём их toJavaValue и fromJavaValue. Первому зададим тип Input Text, а второму - Dynamic Text. В первое мы будем вводить текст, который нужно отправить Java-скрипту, а второе будет отображать то, что java-скрипт пришлёт во флэшку.

взаимодействие flash и java

Теперь над нашим слоем создаём слой actions и в первый кадр пишем необходимый код. Для начала смотрим, если у нас есть, с чем взаимодействовать, то задаём, какая функция во флэшке соответствует функции в java-скрипте.

function addCallbacks():void
{
    if (ExternalInterface.available)
    {
        ExternalInterface.addCallback("sendToFlash", fromJS); // при вызове функции sendToFlash в java, в actionscript должна сработать функция fromJS
    }
}

Затем идёт сама функция:

function fromJS(value:String):void
{
    fromJavaValue.text = value; // наше динамическое текстовое поле выводит аргумент, который передаёт функция в java-скрипте
}

После этого мы присваиваем нашей кнопке событие, чтобы при нажатии срабатывала функция в java. Тут мы используем метод call, в котором указываем название функции java-скрипта и в качестве аргумента, какие данные мы в неё передаём.

function sendToJS(e : MouseEvent):void
{
    if (ExternalInterface.available)
    {
        ExternalInterface.call("fromAS", toJavaValue.text);
    }
}
toJavaButton.addEventListener(MouseEvent.CLICK, sendToJS);

Ну и в конце просто вызываем функцию, которую написали в самом начале:

addCallbacks();

Всё! флэшка готова. Осталось внедрить её в нашу страницу.

Внедрять флэш-ролик на страницу удобнее всего с помощью swfobject (подробность можно почитать здесь -> http://code.google.com/p/swfobject/wiki/documentation). Тогда нам потребуется добавить к html-коду страницы между тэгами <head> следующие строки:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>  
<script type="text/javascript">  
    var flashvars = {};  
    var params = {};    
    var attributes = {wmode:"transparent"};  // в принципе он не обязательно должен быть transparent
    attributes.id = "flashjava";  
    swfobject.embedSWF("flashjava.swf", "flashDiv", "300", "100", "9.0.0", false, flashvars, params, attributes); 
</script>

flashDiv здесь - это div, в который будет размещён флэш-ролик. Чтобы ролик отобразился, допишем на нашей html-странице сразу под div-ом с формой такие строчки:

<div id="flashDiv">
  <p>Эта строка отобразится, если у вас не установлен флэш-плеер</p>
</div>

Вот и всё, теперь можно посмотреть, как флэш-ролик отправляет и получает данные из java-скрипта.

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

В скором времени я размещу пост (а вот, собственно, и он), в котором покажу, как это можно применить на практике, а пока, если возникнут вопросы, пишите =)

 Жду с нетерпением
ваших комментариев!
 

Подписаться на RSS

Вы можете нажать "подписаться", чтобы следить за моими новостями!
Так вы всегда будете в курсе появления новостей на сайте =)
О том, что такое RSS можно прочитать здесь.

Подписаться

Подписаться на Twitter

Я специально зарегистрировался в Твиттере, чтобы вы могли следить за обновлениями на сайте =)

Подписаться

Envato marketplace А эти люди занимаются прокатом карнавальных костюмов и масок в Минске. К слову, я им делал сайт.