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

Сегодня будем учиться связывать между собой функции javascript с функциями flash или, другими словами, передавать переменные со страницы в flash-ролик и обратно. Все это будем делать в ActionScript 3.0. Подразумевается, что вы уже знакомы с ActionScript, поэтому я не буду разжевывать простые вещи (но если что-то непонятно, задавайте вопросы, с радостью разъясню все).

Итак, начнем. Для начала, немного теории.

В ActionScript существует такой класс, как ExternalInterface (из пакета flash.external). Этот класс служит для обеспечения прямого взаимодействия между ActionScript и SWF-контейнером – например, HTML страницей с JavaScript или десктопным приложением, которое использует Flash Player, чтобы отображать SWF файл. Чем нам может быть полезен этот класс, так это тем, что он позволяет:

  • вызвать любую Javascript функцию из ActionScript
  • вызвать любую ActionScript функцию из Javascript
  • передавать аргументы и параметры между ними
  • получить значение, возвращаемое Javascript функцией
  • передать возвращаемое ActionScript функцией значение Javascript функции


Обо всех его методах и свойствах вы можете прочитать в help-справочнике, который присутствует во флэше. Нам для выполнения основных задач потребуются лишь свойство available и методы addCallback и call. Для начала, мы научимся с ними работать, а потом я покажу на практическом примере, как это можно использовать.

Первое, что нам нужно, это обычная html страница, которая по-началу имеет следующий вид:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flash and Javascript</title>  
</head>
<body>

</body>
</html>

Далее мы добавляем простую форму для передачи и получения данных. Между тэгами <body></body> вставляем два инпута и один баттон.

<div>  
    <form name="myForm" id="myForm">  
        <label for="output">Текст из Flash</label>  
        <input type="text" id="output" name="output" value="" /> 
        <label for="input">Отправить в Flash</label>  
        <input type="text" id="input" name="input" value="" />  
        <input type="button" value="Отправить" onclick="sendToFlash(myForm.input.value);" /> // sendToFlash() - скоро мы эту функцию допишем к скриптам, она будет передавать во флэш строку, которая будет введена в форме с id = myForm в текстовое поле с id = input
    </form>
</div>

Следующее, что мы сделаем, это добавим javascript функцию, через которую будем ссылаться на ролик. Для этого между тэгами <head></head> добавим следующий код:

<script type="text/javascript">
    function flashMovie(movieName) {  
        if(window.document[movieName]) {  
            return window.document[movieName];  
        }  
        else {
            return document.getElementById(movieName);    
        }        
    }
</script>

Эта функция возвращает SWF, передаваемую в качестве параметра функции flashMovie(). Например, "flashMovie('testMovie');" возвращает swf с id 'testMovie'.

Допишем в этот же скрипт 2 функции, одна из которых будет принимать данные из флэша, а другая отправлять во флэш. Во второй мы будем ссылаться на флэш-ролик с помощью имеющейся функции flashMovie().

function fromAS(value) {
    document.forms["myForm"].output.value = value;    
}
function sendToFlash(value) {  
    flashMovie("flashjava").sendToFlash(value);  //flashjava - это будет так наш ролик называться, flashjava.swf
}

Сюда можно добавить еще пару функций по рекомендации ребят из Adobe, которые в своем AS 3.0 Reference написали, что используя внешние API с HTML, всегда стоит удостовериться, что HTML страница полностью загружена, прежде чем пытаться вызвать какую-либо JavaScript функцию. Более подробный пример есть в том самом мануале, и если вы будете использовать эти знания потом где-нибудь у себя на сайте, то вам стоит с этим разобраться, это хорошая практика. Здесь я этого делать не буду, так как наша страничка и так весит всего ничего и грузится меньше, чем за секунду (по крайней мере у меня). Да и к тому же это просто урок, мое дело указать вам направление для работы =)

Итак, с html и java мы разобрались, теперь можно приступить к программированию на флэше.

Продолжение читаем здесь.

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

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

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

Подписаться

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

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

Подписаться

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