Анимированный персонаж внизу страницы

А вот, собственно, и практическое применение нашего урока о взаимодействии javascript и flash. Мы будем делать нам на сайт анимированного помощника, который будет отвечать на вопросы, которые будут возникать у пользователей сайта.

Как это будет выглядеть: можно увидеть демо

Какое-нибудь слово или фраза, которые требуют уточнения или пояснения, будут являться ссылками. При нажатии на ссылку будет срабатывать java функция, которая будет передавать флэшке номер вопроса. Флэшка в зависимости от номера вопроса, будет выводить ответ. Сами пары "вопрос - ответ" будем хранить в xml-файле.

Итак, начнём с самого простого. Создадим xml-файл. Обзовём его просто - vars.xml. С его структурой тоже особо мудрить не нужно.

<?xml version="1.0" encoding="utf-8"?>
<tree>
    <values>Hi friends meoww</values>
    <values>Please like me on Facebook</values>
    <values>I am very glad to help you with anything</values>
    <values>This is a demo page and I'm helping you meowwww :)</values>
    <values>Ну и пара значений на русском</values>
    <values>Мур-мур я русский ведь тоже знаю как никак =)</values>
</tree>

Как видите, мы даже не вводили никаких id. Будем отбирать их по их порядковому номеру (начиная с нуля, разумеется).

Далее готовим 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>helper</title>  
<style type="text/css">
<!--
body {
    background-color: #0099FF;
}
-->
</style>
<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"};  
    attributes.id = "helper";  
    swfobject.embedSWF("helper.swf", "flashDiv2", "315", "355", "9.0.0", false, flashvars, params, attributes);  
</script>
<script type="text/javascript">
    function flashMovie(movieName) {  
        if(window.document[movieName]) {  
            return window.document[movieName];  
        }  
        else {
            return document.getElementById(movieName);    
        }        
    }
    function sendToFlash(value) {  
        flashMovie("helper").sendToFlash(value);  
    }
</script>
</head>
<body>

</body>
</html>


Если вам не понятно, откуда там какие функции взялись и т.п., ознакомьтесь с предыдущим уроком "Взаимодействие javascript и flash", там это расписано. Значит, двигаемся дальше. Теперь поработаем над нашей флэшкой. Сделаем её размером 315 на 355 пикселей, как у нас указано в swfobject, а также дадим имя "helper.fla".

Я нарисовал кошака как-то давным-давно, и сейчас вот решил его заюзать. В итоге у меня вышло следуюшее: несколько слоёв - это прорисованный кошак. На отдельном слое находится пузырь, в котором будут появляться ответы кошака и который является мувиклипом и имеет instance name "bubble_mc", а внутри его ещё находится dynamic textfield с instance name "field2". Ну и традиционно самый верхний слой под названием "actions" для написания кода.

Теперь самое время написать необходимый код на ActionScript 3.0. Для этого выбираем первый кадр на слое actions и пишем...

Хотя нет, пока не пишем =) Сначала объясню, что нам нужно в итоге. Спич-бабл у кота будет невидимым, он будет появляться, когда кошак изъявит желание молвить своё слово. Чтобы его ответ не мозолил глаза, спич-бабл будет исчезать через, к примеру, 8 секунд. Для этого нам нужен таймер. Также, нам надо получить xml-файл с вопросами и ответами и предусмотреть, чтобы кот говорил только когда знает, о чём говорит (то есть когда он получил данные из xml). Вот теперь пишем.

Первым делом создадим нужные переменные и сделаем спич-бабл невидимым:

var xml:XML;
var intervalId:uint; // переменная необходима для работы с таймером
bubble_mc.visible = false;

Теперь загрузим данные из xml:

var urlRequest:URLRequest = new URLRequest("vars.xml");
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, urlLoader_complete); // после того, как файл загрузится, сработает функция urlLoader_complete
urlLoader.load(urlRequest);

Теперь мы пишем, что должно произойти после загрузки данных.

function urlLoader_complete(evt:Event):void {
    xml = new XML(evt.currentTarget.data); // все данные хранятся у нас в переменной xml, и обращаться за ними мы будем к ней
    xml.ignoreWhitespace = true; // это нужно, чтобы избежать лишних глюков (каких именно, можете почитать в ActionScript Language Reference)
    addCallbacks(); // вызываем функцию, которая наладит взаимодействие между flash и java
}

Сразу же добавляем и функцию для взаимодействия. Тут уже не нужно передавать ничего в javascript, только получать.

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

И наконец, самая главная функция, которая решает, что делать и что где выводить =) Она параметром принимает текстовое значение, но из html-страницы мы будем передавать цифру (порядковый номер вопроса).

 function fromJS(value:String):void {
    clearTimeout(intervalId); // сбиваем таймер на случай, если пользователь нажмет на другой вопрос до того, как исчезнет спич-бабл
    bubble_mc.visible = true; // само собой, спич-бабл должен стать видимым
    bubble_mc.field2.text=xml.values[value]; // текстовому полю присваивается значение ответа из переменной с xml-данными, values здесь - это узлы в xml-файле так называются, если вы не забыли
    bubble_mc.field2.y = Math.round((165 - bubble_mc.field2.textHeight)/2); // а эта строка просто ровняет текстовое поле по вертикали, ведь ответы могут быть и длинными, и короткими; вместо 165 может быть и другая цифра, в зависимости от высоты флэш-ролика
    intervalId = setTimeout(function() {bubble_mc.visible = false;}, 8000); // это, собственно, сам таймер, через 8 тысяч миллисекунд он делает спич-бабл обратно невидимым
}

Ну вот почти всё готово! осталось дописать в нашу html-страницу несколько строчек. Это будут ссылки, при нажатии на которые будет срабатывать функция sendToFlash() с порядковым номером ответа в качестве аргумента, и div с нашим анимированным другом.

<div> 
    this is the test <a href="#" onclick="sendToFlash(0);">link</a><br />
    this is the test <a href="#" onclick="sendToFlash(1);">link</a><br />
    this is the test <a href="#" onclick="sendToFlash(2);">link</a><br />
    this is the test <a href="#" onclick="sendToFlash(3);">link</a><br />
    this is the test <a href="#" onclick="sendToFlash(4);">link</a>
</div>
<div style="position:fixed; right:10px; bottom:0; width:315px; height:355px;">
  <div id="flashDiv2"> // обратите внимание, что этому диву мы не задаём местоположение, он используется swfObject-ом
      <p>this is what you'll see if you don't have flash player</p>
  </div>
</div>

Вот теперь всё готово полностью. Все необходимые файлы можете скачать здесь. Как всё работает можно глянуть в демо.

Я, как обычно, не делал всё сильно навороченным, я только дал вам простор для фантазии. Если захотите, можете сделать своего помощника бегающим по всему экрану, добавить звуки, сделать появление спич-бабл плавным или убрать его вообще и пусть помощник вслух говорит. Спасибо за внимание =)

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

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

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

Подписаться

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

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

Подписаться

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