Волшебный хрустальный шар

Исходный файл: Crystalball.fla

Наверное, самой распространенной интерактивной программой, которую можно встретить в Internet, является программа-предсказатель, работаюшая на основе случайных чисел. Обычно она называется "Маеgic Eight Balls" (Восемь волшебных шаров), по имени популярной игрушки Tyco.
На рис. 6.1 показано, как может выглядеть подобная игра.

Рисунок 6.1 Лиса ответит на ваш вопрос : после того, как вы щелкните по хрустальному шар

Задача проекта

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

Подход

Наиболее сложной задачей в данном ролике является создание изображений и анимации. Сценарий же довольно прост.

Подготовка ролика

Сначала рассмотрим, как выполняется анимация. Ролик состоит из двух частей. Первая представляет собой статический кадр, который выглядит, как показано на рис. 6.1. Ролик будет запущен после щелчка по хрустальному шару.
Единственным необходимым элементом в этом ролике является команда stopO, помещаемая в любой слой. На рис. 6.2. показана главная временная шкала ролика. Строчная буква "а" в первом кадре второго слоя (слоя "Text") обозначает, что этому кадру назначен код ActionScript, в данном случае команда stop ().

Рисунок 6.2 Главная временная шкала содержит полную анимацию хрустального шара

Устройство главной временной шкалы зависит от фантазии аниматора. В рассматриваемом примере изображение лисы состоит из основного слоя и одного слоя для каждой руки. Изображение шара также включает несколько слоев.
Особое внимание следует обратить на то, как анимация развертывается во времени. Первый кадр представляет собой статический кадр без анимации, он содержит текст (см. рис./6.1) и невидимую кнопку, которая помешается поверх хрустального шара.
Кнопка создается следующим образом: создайте новую кнопку, при помощи любой цветной области (например, зеленого прямоугольника) придайте ей нужную форму и поместите в один из верхних слоев главной временной шкалы. На данном этапе кнопка будет видна (рис. 6.3).

Рисунок 6.3 В первом кадре ролика видно изображение кнопки над хрустальным шаром

Нам необходимо, чтобы кнопка была активной и в тоже время скрытой от пользователя. Для этого в панели Properties выберите эффект Alpa и установите значение прозрачности 0% (рис. 6.4). Можно просто заполнить в кнопке только кадр Hit, тогда она также будет не видна пользователю, но активна.

Рисунок 6.4 В панели Properties можно установить значение параметра Alpha в 0%, тем самым делая элемент невидимы

Эффект Alpha назван по аналогии с термином "alpha channel" (альфа-канал), который используется для описания изображений. Считается, что графическое изображение состоит из четырех каналов: красного, зеленого, синего и альфа. Первые три канала определяют цвет пикселов, последний - их прозрачность. Если значение альфа-канала равно 0, изображение совершенно прозрачно. Поэтому при установке свойства Alpha в значение 0 flash-элемент станет невидимым.

Даже если кнопка является совершенно прозрачной, она никуда не девается с рабочего поля. Поэтому кнопка полностью активна и реагирует на щелчок мышью. Мы описали один способ создания невидимой кнопки. Другой способ рассматривается в главе 14.
Когда пользователь щелкает по кнопке, ролик переходит к кадру 2 и продолжает воспроизведение. Воспроизведение анимации продолжается до конца ролика.
Вы увидите, что со 2-го по 22-й кадр анимация лап содержит промежуточные отображения. В кадре 20 запускается анимация слоя "Ball effect", и шар сверкает. Ролик целиком можно посмотреть на Web-сайте (файл Crystalball.fla).
Наиболее важное событие в данной анимации - появление второй текстовой области в кадре 23. Эта область содержит ответ на вопрос пользователя. Текст задается при щелчке по кнопке, но вплоть до кадра 23 он не виден.
Таким образом, ролик состоит из одного начального кадра, который ждет действия от пользователя, и ряда анимированных кадров, отображающих в ходе своего воспроизведения текст. После завершения анимации ролик возвращается к первому кадру и ждет следующего вопроса.

Создание кода

В сущности «волшебство» данного ролика создается в сценарии Action Script кнопки. Как было сказано выше, сценарий задает переход ролика ко второму кадру и запускает анимацию. Это фактически последнее важное событие. Перед этим генерируется ответ, который помешается в текстовую область.
Так как ответ активизируется щелчком по кнопке, весь код необходимо поместить в сценарий, назначенный кнопке. Такой сценарий всегда начинается с оператора on, далее следует описание реакции на событие. Одним из часто используемых событий является событие release (нажатие кнопки).
Вначале сценарий создает массив и заполняет его списком ответов. Для этого существует множество способов. Один из них приведен ниже:

responses = new Array("Yes", "No", "Ask again later","It is certain", "Doubtful", "Probably", "The answer is unclear","Of course not!", "Certainly!", "It looks positive", "It looks negative");

Это наиболее короткий способ создания массива и его одновременного заполнения. Однако он выглядит немного беспорядочно, так как текст переносится с одной строки на другую. Приведем другой способ:

responses = new Array();
responses[0]("Yes");
responses[1]("No");
responses[2]("Ask again later");
responses[3]("It is certain");
responses[4]("Doubtful");
responses[5]("Probably");
responses[6]("The answer is unclear");
responses[7]("Of course not!");
responses[8]("Certainly!");
responses[9]("It looks positive");
responses[10]("It looks negative");

Этот способ является более аккуратным, в нем каждый ответ располагается на отдельной строке. Вы можете сразу увидеть, из каких элементов он состоит. Однако здесь вам придется в каждой строке вводить номер элемента в скобках. В случае ошибки вы можете пропустить очередной ответ или оставить место пустым. Поэтому лучше пользоваться третьим способом:

responses = new Array();
responses.push("Yes");
responses.push("No");
responses.push("Ask again later");
responses.push("It is certain");
responses.push("Doubtful");
responses.push("Probably");
responses.push("The answer is unclear");
responses.push("Of course not!");
responses.push("Certainly!");
responses.push("It looks positive");
responses.push("It looks negative");

При помощи команды push ответы добавляются в массив друг за другом. Это более корректный и наглядный способ, который к тому же позволяет без труда добавлять новые ответы или удалять существующие.

Применение функции push - наиболее быстрый и легкий способ добавить элемент в массив. Вы можете добавлять более одного элемента, задавая столько параметров в функции push, сколько элементов хотите добавить. Данная команда может быть одновременно использована и как функция для определения размера массива, поскольку возвращает новый размер массива. Например, newLengthOf Array = myArray.push("Gary", "Debby")

После того как массив будет заполнен возможными ответами, вам необходимо просто выбрать один из них наугад. Число элементов массива определяется при помощи параметра length. Функция Math, random позволяет выбрать случайный номер, соответствующий тому или иному элементу массива. Более подробно о функции Math.random рассказано в разделе "Случайность и эффект старого кино" главы 5.
Выбранное случайное число используется для определения текста ответа, который помещается в текстовую область. Не забудьте установить для текстовой области свойство Dynamic Text и задать имя переменной, в данном случае, fortune. Панель Properties будет выглядеть, как показано на рис. 6.5.

Рисунок 6.5 В панели Properties задается динамическое свойство текста и его связь с переменной fortune

Ниже приведен полный код кнопки. После того как текст будет задан, ролик переходит к кадру 2 и запускает анимацию. Текстовая область не видна до кадра 23.

on (release) {
// Создаем список возможных ответов.
responses = new Array();
responses.push("Yes");
responses.push("No");
responses.push("Ask again later");
responses.push("It is certain");
responses.push("Doubtful") ;
responses.push("Probably");
responses.push("The answer is unclear");
responses.push("Of course not!");
responses.push("Certainly!");
responses.push("It looks positive");
responses.push("It looks negative");
// Узнаем число ответов,
n = responses.length;
// Выбираем случайный ответ.
r = Int(Math.random()*n);
// Помещаем ответ в текстовую область,
fortune = responses[r];
// Запускаем дальнейшую анимацию.
gotoAndPlay(2);

Для перемещения по flash-ролику будут использоваться две команды: gotoAndPlay и gotoAndstop. Разница между ними состоит в том,что вторая команда задает переход ролика или клипа к определенному кадру или метке, но не запускает выполнения какого-либо кода или воспроизведения какой-либо анимации. В отличие от нее команда gotoAndPlay задает выполнение кода и продолжение анимации. Если вы хотите запустить выполнение кода какого-либо кадра, но не желаете переходить к следующему после него, используйте команду gotoAndPlay и включите в кадр команду stop.

В конце анимации в центре хрустального шара появляется текст (рис. 6.6)

Рисунок 6.6 В конце анимации на несколько секунд появляется ответ, затем ролик вновь возвращается в начало

К сведению

В конце анимации вы можете поместить команду stop (), чтобы воспроизведение ролика не повторялось, а также другую кнопку, которая ocyществит возврат ролика к кадру 1 в случае, если пользователь захочет задать еще один вопрос.

Другие возможности

Вы можете внести изменения в код списка ответов. Совсем необязательно придерживаться используемой в нашем примере модели "да/ нет/не знаю". Ваши вопросы и ответы могут касаться определенной темы, например, выиграет ли сегодня местная спортивная команда или какой будет погода.