Аналоговые часы

Исходный файл: Simpleclock.fla, Betterclock.fla

Одной из возможностей использования ActionScnpt является ние даты и текущего времени на компьютере пользователя. Это осуществляется благодаря объекту Date. Этот объект может использоваться различными способами, простейшим из них является создание анимированных аналоговых часов.

Часы показывают 1 час 45 минут и 10 секунд

Рисунок 6.10 Часы показывают 1 час 45 минут и 10 секунд

На рисунке не видно, что руки (и хвост) часов двигаются подобно стрелкам настоящих часов. Эти действия выполняются в три этапа. Вначале полученное значение текущего времени помешается в переменные hour, minute и second. Затем значения этих переменных преобразуются в значения углов. Далее полученные значения используются для задания параметра _rotation трех клипов, представляющих руки и хвост.

Диалоговое окно Symbol Linkage

Рисунок 6.8 Диалоговое окно Symbol Linkage Properties позволяет включать звуки в swf-файл, даже если их нет в главной временной шкале

К сожалению, во Rash нет возможности использования внешних звуковых файлов. Единственным способом создать подобный музыкальный автомат будет импорт всех песен и включение их в swf-файл. Будем надеяться, что в следующих версиях программы появится возможность доступа к внешним звуковым файлам и их воспроизведения

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

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

В качестве стрелок часов вы можете использовать любой объект. Это могут быть простые линии или созданное вами изображение. Вы также можете украсить часы числами или фоновыми рисунками.
Еще одной интересной возможностью будет создание часов, стрелки которых двигаются в обратном направлении. Такие часы можно иногда встретить в магазинах и ресторанах. Вы также можете добавить звук, который будет воспроизводиться каждый час или каждые 15 минут.

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

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

Изображение стекла было создано аналогично пузырькам. Благодаря применению свойства альфа-прозрачности сквозь него видны пузырьки Для того чтобы ролик вписывался в ваш сайт или проект, вы можете украсить его своим логотипом.

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

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

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

Главная временная шкала содержит

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

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

Игра "Жизнь"

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

Игра "Жизнь" известна как результат серьезных разработок в области искусственного интеллекта и одновременно как популярная игра. Она была изобретена математиком Джоном Конвэйем и приобрела известность благодаря опубликованной в 1970 году статье в журнале "Scientific American". Вскоре после этого игра стала чрезвычайно популярной среди программистов.
Выглядит все очень просто — в ячейки сетки на игровом поле помещается произвольный набор точек. На очередном шаге игры содержание каждой ячейки сетки подвергается преобразованиям согласно определенному набору правил. Если данная ячейка содержит точку и в прилегающих к ней ячейках находится две или три точки, то содержимое данной ячейки остается без изменений. Если в прилегающих ячейках содержится меньше двух точек, то точка в данной ячейке "умирает" от одиночества, а если больше трех, то точка "умирает" от тесноты. Если же данная ячейка пуста и в прилегающих ячейках содержится ровно три точки, то в данной ячейке "рождается" новая точка.
Вот и все правила, которые вам нужны. Результаты могут оказаться удивительными. Попробуйте запустить исходный файл. Создайте колонию точек подобно изображенным на Рисунок 6.15 и нажмите кнопку Run.

Использование объекта Date

Использование объекта Date

Объект Date можно представить как небольшой массив, содержащий некоторую информацию о текущем моменте времени. При создании объекта Date за основу берется текущее время, установленное на компьютере пользователя.

Не стоит полагаться на точность времени, установленного на компьютере пользователя. Вы удивитесь тому, сколько людей имеют неточные часы. Тем не менее я обычно не задумываясь использую эти часы, особенно для игр. Если неправильно указано время отправки электронного письма, это может привести к проблемам, для flash-ролика точность времени не так важна.

Объект Date включает следующие элементы: число, месяц, год, часы, минуты и секунды. Для вывода любого из них необходимо использовать соответствуюшую функцию: getDate (). Приводимая ниже программа обработки содержит все функции, которые используются для получения информации из объекта Date:

on (release) {
now = new Date();
trace("toString:" + now.toString());
trace("getDate:" + now.getDate());
trace("getDay:" + now.getDay());
trace("getFullYear:" + now.getFullYear());
trace("getHours:" + now.getHours());
trace("getMilliseconds:" + now.getMilliseconds());
trace("getMinutes:" + now.getMinutes());
trace("getMonth:" + now.getMonth());
trace(getSeconds:" + now.getSeconds());
trace("getTime:" + now.getTime());
trace("getTimezoneOffset:" + now.getTimezoneOffset ());
trace("getYear:" + now.getYear());
trace("getUTCDate:" + now.getUTCDate());
trace("getUTCDay:" + now.getUTCDay());
trace("getUTCFullYear:" + now.getUTCFullYear());
trace("getUTCHours:" + now.getUTCHoursO);
trace("getUTCMilliseconds:" + now.getUTCMilliseconds());
trace("getUTCMinutes:" + now.getUTCMinutes());
trace("getUTCMonth:" + now.getUTCMonth());
trace("getUTCSeconds:" + now.getUTCSeconds());

Следует обратить внимание на несколько моментов. Все функции UTC подразумевают, что система пользователя настроена на соответствующую временную зону. Для того чтобы получить всеобщее (по Гринвичу) время, необходимо добавить или вычесть определенное количество часов. Результатом выполнения функции getTime будет количество миллисекунд с 1 января 1970 года. Функция day обозначает день недели и задается числом от 0 до 6. Месяц представляет собой число от 0 до 11. Число выбирается из диапазона от 1 до 31. Возможно, все это трудно для понимания и запоминания, однако данные функции аналогичным образом задаются и в других языках программирования, например С и JavaScript.
Вот результат выполнения всех функций trace:

toString:Sat Oct 14 18:47:06 GMT-0600 2000
getDate:14
getDay:6
getFullYear:2000
getHours:18
getMilliseconds:0
getMinutes:44
getMonth:9
getSeconds:7 getTime:971570647000
getTimezoneOffset: 360
getYear:100
getUTCDate:15
getUTCDay:0
getUTCFullYear:2000
getUTCHours:0
getUTCMilliseconds:0
getUTCMinutes:44
getUTCMonth:9
getUTCSeconds:7

Вы можете задать любой элемент объекта Date. Каждая функция, начинаюшаяся с get, имеет соответствующую ей функцию, начинающуюся с set. К примеру, для установки часа используется функция setHour (newHour) Имейте в виду, что это приведет к изменению только объекта Date, которому вы обратились, а не системных часов пользователя. При создании нового объекта Date время в нем будет установлено в соответствии системными часами.

К сведению В конце анимации вы

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

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

К сведению

К сведению

Кроме рассмотренных функций в сценарии кадра имеется код, вызывающий функцию creatGrid, и команда stop (). Возможна также другая реализация. Дело в том, что игра нуждается в получении определенных данных для запуска. Ведь если вы нажмете кнопку Run при пустом игровом поле, то ничего не произойдет. Поиграйте с колонией, изображенной на рис 6.15. Ее называют "маленький взрыв". Программисты, впервые реализовавшие игру "Жизнь", придумали имена некоторым таким "цивилизациям".
Попробуйте создать свои колонии или поищите в Интернете уже существующие. Поиск по ключу "game of life" откроет вам множество страниц с самыми разнообразными конфигурациями.

Лавовая лампа

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

Этот ролик воссоздает классическую лавовую лампу. На компьютерах и в сети можно увидеть множество подобных объектов. Многие из них представляют собой простые Flash-анимации, создаваемые без написания кода.
Но в этом случае после окончания анимации узор повторяется, а интереснее сделать такую лавовую лампу, узор которой в каждый момент был бы разным.

Лиса ответит на ваш вопрос после

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

Музыкальный автомат

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

Добавление звука в Web-страницу никогда не было простой задачей. Оно осуществляется при помоши либо малопонятных тэгов HTML, либо одного из множества встраиваемых модулей, ни один из которых не является стандартным. Работая во Flash, вы можете возложить на программу всю обработку звука.

Музыкальный автомат воспроизводит

Рисунок 6.9 Музыкальный автомат воспроизводит песню под номером 2

Объект "лавовая лампа " состоит

Рисунок 6.13 Объект "лавовая лампа " состоит из дна, крышки, внутренней части из прозрачного стекла и красных пузырьков

Подготовка ролика Создание ролика

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

Lava Lamp использует 20 экземпляров клипа, созданных из одного библиотечного эталона. С помощью команды attachMovie копии клипа добавляются в ролик. Более подробно о команде attachMovie рассказано в главе 5, раздел "Эффект трехмерности".

При запуске ролика в первом и единственном кадре временной шкалы выполняется функция initLamp. При этом помимо 20 клипов пузырьков будет создан массив объектов, которые определяют скорость движения каждого пузырька.
Кроме того, верхняя и нижняя части лампы будут непрозрачными, из-за чего здесь пузырьки не будут видны. Поверх клипов пузырьков будет помешено изображение полупрозрачного стекла.
При использовании команд attachMovie или duplicateMovieClip необходимо указать уровень нового клипа. Уровень определяет порядок перекрывания клипов. Все новые клипы будут помешены перед существующими. Это значит, что пузырьки будут располагаться перед изображениями верхней, нижней и прозрачной частей лавовой лампы. С помощью команды duplicateMovieClip вы можете создать новые копии этих трех изображений, которые будут помешены поверх пузырьков.
Приведем код функции initLamp:

После того как все элементы подготовлены, воспроизведение ролика осуществляется по следующему принципу: время от времени вызывается функция, которая обновляет местоположение пузырьков и создает новые. Клип, расположенный за пределами рабочего поля, вызывает функцию moveBubbles в каждом событии enter Frame.
Функция moveBubbles задает перемещение пузырьков вверх или вниз и их остановку в верхней или нижней части ролика, а также в одном случае из 30 вызывает функцию newBubble для создания нового пузырька.

Небольшие объекты можно создавать при помоши обычных скобок как видно из последней строки функции initLamp: bubbles [1]= {speed:0}. К содержанию таких объектов можно затем обратиться при помощи точечного синтаксиса: bubbles [0]. speed. При этом ваш код станет более разборчивым, а элемент переменной или массива, сможет состоять из нескольких частей. Например, вы можете записать строку myobject = {speed: б, weight: 40, clipname: "clip1"}, а затем для получения значений использовать синтаксис myObject.speed. Такой объект аналогичен структуре из языков высокого уровня, например С или Pascal.

// Перемещаем пузырьки,
function moveBubbles () {
for (i=0; i // Узнаем текущую координату.
у = _root["Bubble"+i]._y;
// Останавливаемся, если достигнута нижняя граница
// объекта "лампа".
if bubbles[i].speed = 0;
// Останавливаемся, если достигнута верхняя граница
// объекта.
} else if ((bubbles[i].speed < 0) and (y < top)) {
bubbles[i].speed = 0;
// Продолжаем перемещать пузырьки.
} else {
// Перемещаем.
_root["Bubble"+i]._y = y+bubbles[i].speed;
// Изменяем размеры пузырька.
height = _root [ "Bubble" + i] ._yscale;
width = _root["Bubble"+i]._xscale;
if (height > width) height -= 1;
_root["Bubble"+i]._yscale = height;
// Создаем новый пузырек с вероятностью 1/30.
if (Math.random()*30 newBubble();
}
}

Функция newBubble проверяет массив bubbles на наличие неиспользуемых мест для пузырьков. Затем она создает пузырек в нижней или верхней части лампы. Размер пузырька задается случайным числом. Его длина в три раза больше, чем ширина. По мере перемещения пузырька эта разница постепенно исчезает.

Три вышеприведенные функции составляют основу ролика Lava Lamp который вы можете просмотреть, запустив файл Lavalamp.fla

Подготовка ролика В дополнение

Подготовка ролика В дополнение к четырем кнопкам (рис 6.15) необходимо создать клип-ячейку. Назовем этот клип "gridbox". Он не должен изначально находиться на рабочем поле, но ему надо присвоить имя в панели Linkage Properties, чтобы можно было создавать его копии с помощью ActionScript.
Клип "gridbox" должен содержать два кадра - один с точкой, а второй - в виде пустой ячейки. Первому кадру назначьте сценарий с командой stop (). В отдельный слой клипа поместите кнопку, чтобы пользователь мог кликать по ячейке.
Наконец, создайте клип "actions", который будет содержать обращение к основной функции нашего кода.

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

Первая функция создает сетку из 25x15 ячеек и двумерный массив, Каждая строка массива представляет собой столбец (одномерный массив) булевых переменных. Таким образом, для доступа к верхнему левому элементу сетки надо написать grid[0][0], а для доступа к пятому элементу и седьмому сверху - grid[4] [6] (то есть центр координат находится в верхнем левом углу).

function createGridO {
// Создаем клипы и заполняем массив,
grid = new Array();
for(y=0;y var temp = new ArrayO;
for(x=0; x me = attachMovie("gridbox", "gridbox "+x+" "+y,y*25+x);
mc._x = x*20+30;
mc._y = y*20+30;
mc.x = x; mc.у = у;
temp.push(false); }
grid.push(temp);
}
}

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

Функция duplicateGrid() создает копию массива grid и возвращает ее в качестве своего значения.

function duplicateGrid() {
var newGrid = new Array();
for(y=0;y var temp = new Array();
for(x=0;x temp.push(grid[y][x]);
}
newGrid.push(temp);
}
return(newGrid);
}

Да, но почему мы должны пользоваться функцией duplicateGrid(), вместо того чтобы просто приравнять массив baseGrid массиву grid? Потому что иначе у нас не было бы реальной копии массива. Вместо этого и grid и baseGrid ссылались бы на один и тоже массив и изменения в массиве grid появлялись бы и в массиве baseGrid.
Клип "actions" содержит обработчик onClipEvent (enterFrame), который вызывает функцию runCicle при каждом обращении к кадру. Эта функция проверяет глобальную переменную running и запускает сусle, если ее значение истинно (true).

function runCycle() {
if (running) {
cycle();
}
}

Рассмотрим теперь сценарии кнопок. Каждая кнопка содержит обработчик вида on (release), который вызывает одну из следующих функций. Первая (кнопка Run) задает глобальной переменной running значение true.

function startCycle() {
running = true;
}

Если же пользователь нажмет кнопку Step, то функция cycle будет вызвана лишь один раз и переменная running не изменит своего значения.

function stepCycle() {
cycle();
}

При нажатии кнопки Stop переменной running присваивается значение false.

function stopCycle() {
running = false;
}

И наконец, нажатие кнопки Clear очищает массив grid и все ячейки сетки

function clear() {
for(y=0;y for(x=0;x grid[y][x] = 0;
this["gridbox "+x+" "+y].gotoAndStop(1);
}
}
running = false;
}

Осталось только рассмотреть код, который находится на кнопке внутри каждого клипа-ячейки. Этот сценарий определяет состояние ячейки. В функции creatGrid мы определили переменные х и у для каждого клипа. Это позволяет установить соответствие между ячейками и элементами массива и вносить изменения в массив при изменении состояния ячейки.

on (release) {
if (_currentframe == 1) {
gotoAndStop(2);
_parent.grid[y][x] = true;
} else {
gotoAndStop(l);
_parent.grid[y][x] = false;
}
}

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

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

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

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

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

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

После того как вы поместили 10 экземпляров клипа на рабочее поле и присвоите песням имена в первом кадре главной временной шкалы, осталось добавить звук.
Прежде всего, импортируем 10 песен в библиотеку ролика и присвоим им имена, начиная с "song1" и заканчивая "song10". После импорта каждого звукового файла необходимо изменить его свойство связи таким образом, чтобы он был включен в создаваемый .swf-файл. Для каждой песни требуется создать идентификатор и поставить флажок напротив свойства Export for ActionScript. Соответствующее диалоговое окно показано на Рисунок 6.8. Его можно вызвать из меню Options окна Library.

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

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

При помоши объекта Date можно создать интересные часы. Переводя значения часов, минут и секунд текущего времени в градусы, вы можете задать параметр „rotation трех различных клипов таким образом, чтобы они двигались, как стрелки часов.
На Рисунок 6.10 показан внешний вид таких часов. Короткая рука обозначает часовую, длинная - минутную, а хвост - секундную стрелки.

Подход Создание подобного ролика

Наиболее простым способом будет создать одну кнопку и использовать ее 10 раз, один раз для каждой песни. Каждая кнопка будет представлять собой клип, содержащий одну и ту же кнопку. Таким образом, в библиотеке ролика окажется всего один клип и одна кнопка. Этот клип будет помешен на рабочее поле 10 раз, все его копии будут идентичны. Первое действие при запуске ролика - изменение текста каждой копии клипа. Это действие описывается при помощи следующего кода:

// Задаем названия песен.
this["1"].text = "Song Name 1";
this["2"].text = "Song Name 2";
this["3"].text = "Song Name 3";
this["4"].text = "Song Name 4";
this["5"].text = "Song Name 5";
this["6"].text = "Song Name 6";
this["7"].text = "Song Name 7";
this["8"].text = "Song Name 8";
this["9"].text = "Song Name 9";
this["10"].text = "Song Name 10";

Для того чтобы упростить задачу, клипам присвоены имена от " 1" до "10". В результате выполнения вышеприведенного кода все копии клипа будут отображать разные названия песен. Поэтому, несмотря на то, что в библиотеке содержится один клип, все его копии будут выглядеть по-разному.
Более того, названия всех 10 песен будут включены в один сценарий Если бы каждый клип содержал, название одной песни, вам пришлось бы проделать немало работы, открывая и закрывая каждый из 10 клипов для внесения в него изменений. Данный сценарий дает возможность быстро изменить все названия песен.
Свести количество клипов к одному помогает и код, назначенный кнопке внутри клипа:

on (release) {
_root.playSong (this._name);
}

Эта строка кода отправляет одно из имен клипа от "1" до "10" в функцию playSong, находящуюся на корневом уровне (уровне рабочего поля). Эта часть кода может выполняться в любом клипе, так как в каждом случае использует различное имя экземпляра клипа. Если при создании нового экземпляра клипа вы не забыли назначить ему новое имя, значение переменной this._name будет каждый раз иным.
Данный код позволяет использовать одну копию клипа необходимое число раз. В случае внесения в клип каких-либо графических или функциональных изменений вам придется сделать это всего единожды. Кроме того, конечный .swf-файл будет меньше файла, библиотека которого содержит 10 копий аналогичных клипов.

Подход

Подход

Прежде чем создавать часы, необходимо научиться работать с объектом Date. Именно он содержит текущее время, доступное для отображения

Подход

Подход

Для создания лавовой лампы, работающей по принципу случайности (Рисунок 6.13), необходимо использовать ActionScript. Вначале необходимо создать 20 клипов, представляющих пузырьки лавовой лампы. Затем надо задать постоянный вызов функции, перемещающей пузырьки вверх и вниз по экрану.

Подход

Подход

Ролик начинается с создания сетки, состоящей из клипов (ячеек). Также создается двумерный массив булевых переменных. Каждый элемент массива соответствует определенной ячейке и указывает, в каком кадре находится этот клип-ячейка ( то есть находится ли в данной ячейке "жилец").
Основная функция ролика просматривает все ячейки и вычисляет изменения в них. Выполнение этой функции представляет собой один шаг игры. Если пользователь нажимает кнопку Run, ролик выполняет эти шаги непрерывно. При выборе кнопки Step исполняется только один шаг.

Руки и хвост (то есть стрелки

Рисунок 6.11 Руки и хвост (то есть стрелки часов), направленные четко вверх, соответствуют 12:00:00. Когда вы зададите параметр _rotation, стрелки будут указывать в соответствующем направлении

Проблема состоит в том, что устройство будет работать не совсем как обычные часы. Например, на Рисунок 6.10 часовая стрелка указывает на 9 часов. Она будет продолжать указывать на отметку 9, даже когда будет 9:59, а затем в 10:00 сразу передвинется на отметку 10. В настоящих часах часовая стрелка будет в течение часа постепенно передвигаться, пока не достигнет отметки 10 в 10 часов. Для того чтобы получить такой результат, необходимо немного увеличивать угол часовой стрелки каждую минуту и угол минутной стрелки каждую секунду, Приведем соответствующий код:

// Задаем угол поворота для минутной и секундной стрелки.
hourAngle += minute/2;
minuteAngle += second/10;

Минута делится на 2, что дает вам дополнительно 30° для поворота часовой стрелки каждый час. Секунда делится на 10, благодаря чему вы получаете 6 дополнительных градусов для промежуточных поворотов минутной стрелки. Выполним вычисления: в 9:59 угол будет составлять 9*30 + 59/2 = 270 + 29.5 = 299.5. В 10:00 угол составит 10*30 + 0/2 = 300 + 0 = 300.
Подобным образом, в 20 минут 59 секунд угол минутной стрелки составит 20*6 + 59/10 = 120 + 5.9 = 125.9. Еще через секунду угол будет равен 21*6 + 0/10 = 126 + 0 = 126.
На Рисунок 6.12 показаны часы, в код которых добавлена эта часть кода. Сравнив его с Рисунок 6.10, вы увидите, что положение часовой и минутной стрелок стало более точным.

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

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

В сущности «волшебство» данного ролика создается в сценарии 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.

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

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

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

song = new Sound();
song.attachSound("song1") ;
song.start();

Функция playSong должна выполнять еще несколько действий. Прежде всего, останавливать воспроизведение предыдущей песни. Это осуществляется при помощи команды stop. Предположим, что предыдущая песня содержится в глобальной переменной song и воспроизводится в данный момент. Приведем простой вариант функции:

function playSong(songnum){
// Останавливаем воспроизведение предыдущей песни,
song.stop();
// Проигрываем новую песню,
song = new Sound ();
song.attachSoundt "song"+songnum);
song.start();
}

Осталось добавить еще один специальный эффект - подсвечивание названия выбранной песни. Клип каждого выбираемого элемента содержит два кадра: без подсветки и с подсветкой. На Рисунок 6.9 изображение музыкальный автомат с подсветкой выбранного элемента.
Перед запуском воспроизведения каждой песни необходимо y6eдиться в том, что подсветка всех песен выключена, а затем включить подсветку только выбранной песни:

function playSong(songnum) {
// Останавливаем воспроизведение предыдущей песни.
song.stop();
// Убираем подсветку.
for(i=1;i this[i].gotoAndStop(1);
}
// Проигрываем новую песню,
song = new Sound();
song.attachSound("song"+songnum);
song.start();
this[songnum].gotoAndStop(2);
}

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

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

Код, который выполняет все вышеописанные действия, - это cценарий onClipEvent (enterFrame), помещаемый в клип. Код можно посмотреть в файле Simpleclock.fla.

onClipEvent (enterFrame) {
// Узнаем текущее время.
now = new Date();
hour = now.getHours();
minute = now.getMinutes();
second = now.getSeconds();
// Конвертируем в значение для 12-часового дня.
if (hour > 12) {
hour -= 12;
}
// Рассчитываем углы для поворота стрелок.
hourAngle = 360*hour/12;
minuteAngle = 360*minute/60
secondAngle = 360*second/60;
/// Поворачиваем сами ролики
_root["hour hand"]._rotation = hourAngle;
_root["minute hand"]._rotation = minuteAngle;
_root["second hand"]._rotation = secondAngle;
}

Чтобы определить значение углов, значение времени делится на наибольшее возможное значение и умножается на 360. Например, значение минут делится на 60, в результате чего получается значение между 0 и 1, а затем умножается на 360, что дает значение угла между 0° и 360°. Чтобы стрелка была 12-, а не 24-часовой, из значения часов вычитается 12.
Результатом каждой операции является угол от 0° до 360°. 0° обозначает 0 (или 12) часов, 0 минут, 0 секунд. В данном случае изображения всех трех клипов, представляющих стрелки часов, будут указывать вверх (Рисунок 6.11). Затем, после задания параметра „rotation, стрелки будут указывать на соответствующее место.

В игре "Жизнь" живут и умирают маленькие красные точки

Рисунок 6.15 В игре "Жизнь" живут и умирают маленькие красные точки

Когда пользователь завершает наполнение ячеек, он нажимает кнопку начала игры. При каждом проигрывании кадра применяется к каждой ячейке описанный набор правил. В результате наполнение некоторых ячеек меняется.
Пользователь может нажать кнопку Stop для остановки игры. Имеются также кнопка пошагового исполнения алгоритма (Step) и кнопка очистки игрового поля (Clear).

В конце анимации на несколько

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

В панели Properties можно установить

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

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

Даже если кнопка является совершенно прозрачной, она никуда не девается с рабочего поля. Поэтому кнопка полностью активна и реагирует на щелчок мышью. Мы описали один способ создания невидимой кнопки. Другой способ рассматривается в главе 14.

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

В панели Properties задается динамическое

Рисунок 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.3 В первом кадре ролика видно изображение кнопки над хрустальным шаром

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

В результате изменения кода часовая

Рисунок 6.12 В результате изменения кода часовая и минутная стрелки часов стали указывать время более точно

Файл Betterclock.fla содержит дополнительный код, сглаживающий движение стрелок. Обратите внимание, что с изменением времени минутная стрелка понемногу передвигается.

Виртуальный музыкальный автомат

Рисунок 6.7 Виртуальный музыкальный автомат напоминает устройство, которое можно было встретить в 50-е годы в любой закусочной

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

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

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

в данном ролике является создание

Подход

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

наглядный способ продемонстрировать, как используется

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

Создание музыкального автомата - наглядный способ продемонстрировать, как используется звук во Flash. Это обычный ролик, воспроизводящий несколько песен.
Интерфейс программы изображен на Рисунок 6.7. Такой музыкальный автомат может содержать до 10 различных песен. Песня воспроизводится после щелчка по ее названию в списке.

в компьютере пользователя, должно отображаться

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

Время, запрограммированное в компьютере пользователя, должно отображаться в виде настенных или наручных часов. Часы должны иметь часовую, минутную и секундную стрелки. Лучше сделать часы необычными и в качестве стрелок использовать не простые линии, а какой-нибудь клип.

В данном разделе мы создадим

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

В данном разделе мы создадим лавовую лампу, функционирующую по принципу случайности. Это значит, что код случайным образом определяет, когда и где появляются новые пузырьки. В результате узор никогда не будет повторяться.

Программа создает сетку, заполняющую экран.

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

Программа создает сетку, заполняющую экран. Каждая ячейка может содержать или не содержать точку. Щелкнув по ячейке, пользователь может изменить ее состояние.

Альбом для рисования

Исходный файл: Drawing-line.fla, Drawing-fill.fla

Хотя предыдущие два примера используют ваши творческие способности, в действительности они не дают возможности создавать что-либо новое. Теперь давайте рассмотрим программу для рисования, работа в которой начинается с чистого листа и которая позволяет пользователю изображать все, что угодно, и распечатывать результат.

Добавление кнопок Clear и Print

Добавление кнопок Clear и Print

Чтобы очистить рабочую область, мы просто нарисуем сверху заполненный цветом области прямоугольник. Это выполняется с помощью сценария кнопки Clear (Очистить).
Мы устанавливаем толщину линии 0. Затем перемещаем указатель в верхний левый угол нашей области и рисуем прямоугольник, который точно ее повторяет и определяет область заливки. Цвет заливки - белый, так как именно он выбран фоновым в нашем ролике.

on (release) {
// Толщина линии - ноль.
_roou.lineStyle(0,OxFFFFFF,100);
// Перемещаем указатель в верхний левый угол.
_root.moveTo(actions.xmin,act ions.ymin);
// Создаем область заливки.
_root.beginFill(OxFFFFFF);
_root.lineTo(actions.xmax,actions.ymin);
_root.lineTo(actions.xmax,actions.ymax);
_root.lineTo(actions.xmin,actions.ymax);
_root.lineTo(actions.xmin,actions.ymin);
_root.endFill();
}

Еше легче создать кнопку Print (Печать). Для этого необходимо добавить команду print. Осталось еше присвоить метку "#р" единственному кадру ролика.

on (release) {
// Распечатываем клип
print(_root,"bframe");
}

Команда print выводит заданный клип на печать. Добавив к команде слева _root, вы можете напечатать все содержимое рабочего поля. Второй параметр определяет границы области печати. Подробности вы найдете в руководстве пользователя Flash.

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

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

Вы можете легко заменить имеющиеся звуки любыми другими. Просто удалите старые звуки из библиотеки и импортируйте на их место ваши собственные. Не забудьте произвести настройку диалогового окна Symbol Linkage Properties.
Вы также имеете возможность изменять количество звуков, например, уменьшать количество циклов барабанного боя и увеличивать количество отдельных звуков. Звуков может быть сколько угодно, главное, чтобы имена копий клипов совпадали с именами соответствующих звуков библиотеки.
Ничто не мешает вам изменить анимацию любого переключателя, Обладая достаточным количеством времени, вы можете отказаться от идеи повторно используемых клипов и создать свой клип для каждого переключателя. Но имейте в виду, что это усложнит вашу задачу, если вы захотите потом как-то еще изменить ролик.

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

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

В файле примера лиса, выполнив один раз выбранное пользователем движение, возвращается к основному танцу. Вы можете изменить программу таким образом, чтобы лиса повторяла выбранное движение до тех пор, пока пользователь не выберет новое. Этого можно достичь возвращением каждой последовательности кадров, отвечающей за определенное движение, к своей собственной метке вместо "danceO". В таком случае вам может понадобиться отдельная кнопка в кадре "record" для возвращения лисы к ее основному танцу.

Изображение примера использования ролика К сведению

Рисунок 7.7 Изображение примера использования ролика.

Изображенные слева части тела

Рисунок 7.1 Изображенные слева части тела можно переместить к расположенному справа туловищу

Ролик можно запустить, открыв файл Makeafox-drag.fla. Вы можете выбрать любую часть тела и переместить ее в любую часть экрана.

К сведению Для того чтобы закончить

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

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

К сведению Не забудьте поместить

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

Вы можете усовершенствовать программу, добавив возможность выбора толщины линии по аналогии с цветами. Можно создать кнопку, которая будет определять переменную lineSize в клипе "actions". Добавив в палитру белый цвет, вы дадите пользователю возможность стирать уже нарисованное.

К сведению

К сведению

He забудьте присвоить каждой из 18 кнопок уникальное имя и сопоставить это имя с именем соответствующего звука в библиотеке. Кроме того,название звука необходимо задать в диалоговом окне Symbol Linkage Properties (Рисунок 7.9).
То, какой будет анимация каждого типа кнопки, решаете вы. В нашем примере кнопки барабанного боя мигают, изменяя свой цвет с белого на черный и обратно, кнопки басов и отдельных звуков увеличиваются. Чтобы обеспечить непрерывное воспроизведение, в последний кадр циклов барабанного боя и басов необходимо вставить команду gotoAndPlay (2). Клипы отдельных звуков после окончания своего воспроизведения должны возвращаться к кадру 1. Первый кадр этих звуков должен содержать команду stop О для того, чтобы их воспроизведение запускалось при первой загрузке ролика.

К сведению

К сведению

Три кнопки в кадре "record", инициирующие танец, должны содержать сценарии для вызова функции danceButton. Вот пример для одной из кнопок:

on (press) {
danceButton("dance1");
}

В кнопке Done должен содержаться сценарий для вызова функции stopRecord.

on (press) {
stopRecord();
}

Клип "actions" в кадре "playback" содержит код, вызывающий функцию danceFrame при каждом обращении к этому кадру.

onClipEvent(enterFrame) {
_root.danceFrame();
}

Следует также назначить команду gotoAndstop каждой из кнопок главного меню. В первый кадр главной временной шкалы поместите команду stop(), чтобы остановить анимацию в начальный момент времени.

Кнопки в левой части экрана дают

Рисунок 7.6 Кнопки в левой части экрана дают пользователю возможность выбрать цвет и фигур

Каждая из этих кнопок создана из одного библиотечного эталона. Когда копия помешается на рабочее поле, можно настроить ее цвет с помощью меню color на панели Properties. Внутри клипа находится кнопка, чтобы отслеживать выбор пользователя. Ниже приведен сценарий кнопки. Значение цвета кнопки помещается в переменную brushcolor. Ее значение затем передается переменной linecolor в клип "actions".

on (release) {
// Определяем цвет.
myColor = new Color(this);
brushColor = myColor.getRGB();
// Передаем значение переменной linecolor клипа "actions"
_root.actions.lineColor = brushColor;
// Определяем позицию рамки.
_root["Color Selection"]._x = this._x;
_root["Color Selection"]._y = this._y;
}

Сценарий кнопки устанавливает координаты клипа "Color Selection", то есть рамки, равными координатам клипа, по которому щелкнул пользователь. При этом вокруг кнопки с выбранным цветом появится контур (Рисунок 7.6.)
Маленькая кнопка с кружочком посередине служит для выбора режима рисования - с заливкой или без. Клип с этой кнопкой состоит из двух кадров: с пустым и заполненным кружочком. Кнопка содержит сценарий, позволяющий переключаться между кадрами, и определяет переменную fill клипа "actions".

on (release) {
if (_currentFrame ==1) {
gotoAndStop(2);
_root.actions.fill = true;
} else {
gotoAndStop(l);
_root.actions.fill = false;
}
}

С помощью кнопок, определяющих цвета, и кнопки выбора режима (с заливкой/без заливки) пользователь может рисовать разноцветные фигуры. Как и в предыдущем примере, код, необходимый для рисования, содержится в клипе "actions".
Он начинается с определения значения следующих переменных: draw - false, fill - false, linecolor - 0x000000. Также определяются четыре переменные, для которые ограничивают область в которой пользователь может рисовать.

onClipEvent (load) {
// Рисовать или не рисовать?
draw = false;
// Определяем значение fill
fill = false;
// Начальный цвет линии - черный. linecolor = 0x000000;
// Определяем границы области рисования.
хтах = 550;
xmin = 70;
утах = 400;
ymin = 0;
}

При нажатии кнопки мыши курсор начинает оставлять след. Координаты курсора хранятся в переменных х и у. Их значения проверяются, и, если они выходят за фаницы разрешенной области, рисование не происходит.
Переменная linecolor передается функции lineStyle в качестве аргумента, определяющего цвет линии. Если переменная fill имеет значение true, то определяется новый массив. Он содержит координаты всех точек вдоль кривой, которую нарисовал пользователь. Массив состоит из объектов следующего вида: {х: значение, у: значение}. Элементы массива потребуются для создания залитой цветом области.

onClipEvent (mouseDown) {
// Определяем позицию курсора.
х = _root._xmouse;
у = _root . _ymouse;
// Рисуем, если не вышли за границы поля
if ((x>xmin) and (x<xmax) and (y>ymin) and (y<ymax)) {
draw = true;
// Определяем параметры линии.
_root.lineStyle(1,lineColor,100);
_root.moveTo(x,у);
// Если выбран режим заливки, то создаем массив if (fill) {
fillArray = new Array();
fillArray,push({x:x, y:y});
}
}
}

После того как переменной draw присвоено значение true, продолжаем линию до тех пор, пока пользователь не отпустит кнопку мыши. При каждом обращении к кадру переменным х и у присваиваются текущие координаты курсора. Если эти значения выходят за разрешенные границы, переменные х и у переопределяются. Затем используется команда lineTo для отображения очередного сегмента линии. Если выбран режим заливки, то добавляется новый элемент в массив fillArray.

onClipEvent (enterFrame) {
if (draw) {
// Определяем текущую позицию.
x = _root,_xmouse;
у = _root._ymouse;
// Задаем границы области рисования,
if (x < xmin) x = xmin;
if (x > xmax) x = xmax;
if (y < ymin) у = ymin;
if (y > ymax) у = ymax;
// Рисуем линию.
_root.lineTo(x,у);
// Если выбран режим заливки, то запоминаем точку,
if (fill) {
fillArray.push({х:х, y:y});
}
}
}

Когда пользователь отпускает кнопку мыши, переменная draw принимает, значение false, и рисование прекращается. Если при этом выбран режим заливки, то в цикле просматривается массив fillArray и созданная область перерисовывается. При этом также используются команда beginFill и endFill. В результате область заливается цветом linecolor.

onClipEvent (mouseUp) {
if (draw) {
// Прекращаем рисовать.
draw = false;
// Перерисовываем кривую и заливаем
// получившуюся область,
if (fill) {
// Начинаем с первой точки.
_root.moveTo(fillArray[0].x,fiiiArray[0] .у);
// В цикле определяем область для заливки.
_root.beginFill(lineColor);
for(var i=l;i < fillArray.length;i++) {
_root.lineTo(fillArray[i].x,fillArray[i].y);
}
_root.endFill();
}
}
}

Другой способ состоит в том, что вы можете вызвать команду beginFill до того, как пользователь начнет рисовать, и команду endFill - когда он закончит, вместо того чтобы перерисовывать кривую. Но Flash не очень любит использовать заливку при разных обращениях к кадру, и результат может быть хаотичен. Лучше сохранить кривую, а затем перерисовать ее и создать всю заливку в пределах одного обработчика.

Музыкальный миксер

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

Flash позволяет работать не только с графическими объектами. Вы, например, можете воспроизводить одновременно несколько звуков, создавая музыкальный коктейль. При этом пользователь получит право выбирать любой музыкальный отрезок и время его воспроизведения.

Музыкальный миксер состоит из

Рисунок 7.8 Музыкальный миксер состоит из шести циклов барабанов, шести циклов с басами и шести отдельных звуковых эффектов

Настройки диалогового окна Symbol

Рисунок 7.9 Настройки диалогового окна Symbol Linkage Properties определяют, каким образом звук будет включен во Flash-ролик

Необходимо создать три различных типа кнопок. В действительности они представляют собой не кнопки, а клипы. Поэтому, чтобы избежать путаницы, мы назовем их "переключателями". Переключатели содержат невидимые кнопки, реагирующие на щелчок мыши. Они состоят как минимум из двух кадров. Первый из них соответствует выключенному состоянию переключателя, остальные - включенному. Так как звуки барабанов и басов представляют собой повторяющиеся циклы, анимация этих двух переключателей воспроизводится непрерывно, пока не будет прекращена повторным щелчком мыши. В отличие от этого анимация переключателя отдельного звука воспроизводится один раз и затем возвращается к состоянию "выключено". Состав анимационных последовательностей вы можете просмотреть в файле Musicmixer.fla.
Кнопки в переключателях - это простые белые фигуры, которые помешаются за другими графическими изображениями, чтобы их не было видно. В примере для переключателей барабанов и басов используется небольшая круглая кнопка, для переключателей отдельных звуков - треугольная. Чтобы было проще размещать кнопки за графическими объектами, создано только два типа изображений кнопок. Шесть копий каждого переключателя помешены на рабочее поле. Их расположение может быть любым (Рисунок 7.8).

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

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

Для создания игрушки-конструктора, работающей по методу drag-and-drop, прежде всего необходимо иметь различные графические изображения. На Рисунок 7.1 в правой части изображено туловище, в левой - различные изображения рук, ног, ртов и глаз.

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

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

Основными элементами ролика являются 18 звуков. В примере MUSICmixer.fla использовались звуки, созданные профессиональным композитором. Вам придется сочинить звуки самому, привлечь к этому друга или коллегу или позаимствовать музыку из любых других источников.
Циклы барабанного боя и басов состоят из коротких звуков, создающих законченные музыкальные фразы. Они должны быть короткими, чтобы не перегружать файл, но достаточными для того, чтобы создать интересный звук.
После импорта 18 звуков во Flash в диалоговом окне Symbol Linkage Properties (Рисунок 7.9) необходимо установить свойство Export for ActionScript, а также задать идентификатор.

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

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

Мы должны сделать клип "dance" правильно. В исходном файле он представляет последовательность из 20 кадров, которая разбита на четыре части по 5 кадров. Каждая часть начинается с кадра, имеющего метку, например "dance0". Последний кадр в каждой последовательности не i держит изображения, но содержит команду gotoAndPlay("dance0") Таким образом, когда данная последовательность движений заканчивается, лиса возвращается к повторению последовательности dance0 (основное движение танца). Остальные три метки кадров называются "dance1", "dance2" и "dance3".

Последний кадр каждой танцевальной последовательности содержит только сценарий. Это сделано потому, что, когда выполняется команда gotoAndPlay (), содержимое кадра не отображается.

Основная временная шкала ролика содержит три кадра. Первый кадр помечен как "menu" (меню) и содержит команду stop(). Второй кадр имеет метку "record"(запись) и третий — "р1ауЬаск" (воспроизведение). Ниже мы рассмотрим код для этих трех кадров.
В кадре "menu" содержится две кнопки: Record и Playback. Я использовал один символ из библиотеки как образец для создания кнопок, но поместил на них различный текст. Каждая из этих кнопок совершает переход на соответствующий кадр.
В кадре "record" содержится четыре кнопки. Три из них включают в танец соответствующее движение, и четвертая прерывает процесс записи.
Наконец, кадр "playback" содержит единственную кнопку, останавливающую воспроизведение.

Подход В приложении используется

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

Подход

Подход

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

Подход

Подход

Библиотека данного ролика имеет не такую, как мы рассматривали раньше, организацию. Вместо отдельных изображений каждого варианта элемента лисы используются клипы. Каждый клип содержит все варианты данного элемента, по одному в кадре. Например, клип "Eyes" ("Глаза") будет стоять из трех кадров, каждый из которых содержит другое изображение глаз.

Подход

Подход

Центральным объектом этой программы является клип "dance". Он содержит всю последовательность танца лисы. Вы можете управлять лисой, перемещаясь к кадру, с которого начинается последовательность, составляющая данное танцевальное па.
Первым делом программа отмечает начало процесса записи. При нажатии кнопки программа фиксирует время нажатия и название движения. Информация помешается в массив объектов следующего формата: {время: значение, движение: значение}.
В начале процесса воспроизведения также отмечается текущее время. Затем программа все время проверяет, не пора ли лисе совершить первое из записанных движений, то, которое является первым элементом массива. Когда этот момент времени проходит, начинается ожидание второго момента времени, и т.д. Специальное танцевальное движение stop используется, чтобы обозначить окончание времени записи. Когда воспроизведение доходит до команды stop, ролик возвращается в главное меню.

Показан фрагмент исходного файла

Рисунок 7.10 Показан фрагмент исходного файла. Лиса находится в процессе танца

Пользователь может щелкнуть по

Рисунок 7.4 Пользователь может щелкнуть по любой части тела и изменить ее

Простая программа рисования позволяет

Рисунок 7.5 Простая программа рисования позволяет нарисовать длинную черную кривую

Ролик MakeAFox дает пользователю

Рисунок 7.3 Ролик Make-A-Fox дает пользователю возможность перетаскивать части тела лисы в любое место экрана

Составь лису методом "Перетащи и положи"

Исходный файл: Makeafox-drag.fla

Многие компьютерные игры созданы по подобию игрушек докомпьютерной эры. Одна из таких старых игрушек - "Mister Potato Head" (Господин картофельная голова). Она представляла собой набор пластиковых частей тела которые ребенок мог прикрепить к картошке и сделать смешного человечка. Позже вместо картошки стали использовать пластиковое туловище.

Создай лису методом "Нажми и измени"

Исходный файл: Makeafox-switch.fla

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

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

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

Если вы уже работали во Flash, вы можете подумать, что это легко - необходимо просто использовать клипы частей тела и команды startDrag, и stopDrag. На самом деле такой подход только все усложнит. Я не любитель команды startDrag и не буду использовать ее здесь, поскольку перемешать с ее помощью элементы по рабочему полю не так уж и просто.
Представив каждую часть тела в виде кнопки, вы можете назначить ей обработчик события on (press) и применить команду startDrag. Однако кнопка не может служить в качестве цели команды startDrag, такой целью может быть только клип. Если же вы представите их в виде клипов, им нельзя будет назначить функцию on (press), так как она используется только с кнопками. Еще одним вариантом является представление каждой части тела как клипа с кнопкой внутри. Здесь можно легко запутаться, так как каждый раз при добавлении в ролик новой части вам придется выполнить несколько действий.
Лучшим выходом будет написать код, выполняющий процедуру drag-ard-drop самостоятельно. Отдельным частям не будет назначено никакого кода, благодаря чему их будет легко создавать и добавлять новые.
Весь код поместим в клип "actions", который как обычно находится вне, пределов рабочей области и содержит только надпись "Actions".
Данному клипу назначен сценарий ActionScript, управляющий перемещением всех элементов. Он должен включать несколько функций onClipEvent. Ниже приведено краткое описание событий и реакций на них, которые сценарий должен выполнять: • load (загрузить) - задание переменной, указывающей, что никакого перемещения еще не происходит;
• mouseDown (кнопка мыши нажата) - определение выбранного элемента и создание переменной, сообщающей, что этот элемент перетаскивается. Определение смешения между местом, над которым нажата кнопка мыши, и центром выбранного элемента;
• mouseUp (кнопка мыши отпущена) - установка начальных параметров переменной, указывающих, что никакой элемент в данный момент не перетаскивается;
• enterFrame (проигрывание кадра) - изменение положения перемещаемого элемента соответственно движению курсора минус разница между координатами центра элемента и координатами точки, по которой щелкнул пользователь. Два момента из предыдущего списка могут смутить непрограммиста. Первый - это постоянно упоминаемая переменная. В коде ей будет назначено имя dragPart и исходное значение 0. Это значение соответствует состоянию, при котором не происходит никакого перемещения. Однако, как только пользователь выбирает элемент, переменной dragPart присваивается номер данного элемента, а когда значение переменной равно какому-либо числу, происходит перемещение. Когда пользователь отпускает элемент, переменная вновь принимает значение 0.
В рассматриваемом коде есть еще один сложный момент - смешение при передвижении элементов. Когда мы перетаскиваем какой-либо объект, то приравниваем значения его координат значению координат курсора. Однако, если пользователь щелкнет не в центре координат объекта, то при приравнивании положения объекта к положению курсора, произойдет "скачок"; координаты объекта мгновенно станут равны координатам курсора.
Чтобы этого не происходило, мы используем переменные offsetx и offsety для хранения величины расстояния между центром объекта и местом клика и при изменении координат объекта учитываем это смещение.
Теперь давайте рассмотрим каждую часть данного кода. Вначале выполняется функция onClipEvent (load). Она необходима для инициализации переменной dragPart.

// При загрузке ничего не перетаскиваем.
onClipEvent (load) {
dragPart = 0; }

Наиболее сложной частью кода является функция onClipEvent (mouse-Down) . Она проверяет все 13 элементов при помощи функции hitTest и определяет, над какой из них расположен курсор. Затем задает переменную dragPart, а также переменные of f setx и of f sety.
Обратите внимание, что клипы элементов для упрощения кода имеют имена от "Part1" до "Partl3".

// Начинаем перемещение.
onClipEvent (mouseDown) {
// Определяем текущие координаты курсора.
x = _root._xmouse;
y = _root._ymouse;
// Находим часть, над которой в данный момент находится курсор.
for(i=1;i<=13;i++) {
// Имеет смысл заменить константу 13 переменной, содержащей
// количество частей, например countOfParts. Это облегчит
// дальнейшую модификацию ролика.
if (_root["Part"+i].hitTest(x,y, true)) {
// Указываем, какой элемент нужно перетаскивать,
// и задаем смещение.
dragPart = i;
offsetx = _root["Part"+i]._x - x;
offsety = _root["Part"+i]._y - y;
break;
}
}
}

Когда пользователь отпускает кнопку мыши, переменная вновь принимает значение 0.

onClipEvent (mouseUp) {
dragPart = 0;
}

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

Основополагающим компонентом данного кода является функция onClipEvent (enterFrame). Она проверяет, не равна ли переменная dragPart нулю, а затем задает положение перетаскиваемого элемента соответственно текущему положению курсора мыши плюс значение смешения.

// Если какой-либо элемент перетаскивается, меняем его координаты
onClipEvent (enterFrame) {
if (dragPart > 0) {
_root["Part"+dragPart]._x = _root._xmouse + offsetx;
_root["Part"+dragPart]._y = _root._ymouse + offsety;
}
}

В нашем примере используются не клипы, а графические элементы из библиотеки. Но для всех графических символов, которые будут иметь возможность перемещаться по рабочему полю, мы устанавливаем свойство MovieClip в выпадающем меню Symbol Behavior (Поведение символа). Это меню находится в верхней левой части панели Properties (Рисунок 7.2). Теперь, хотя мы создали этот символ как графический элемент его копии можно присваивать имя, как будто он является клипом! Например, символ "Arm1" в библиотеке отображается как графический: элемент, но на панели Properties мы присвоили ему имя "Part1", так как свойство его поведения было изменено.

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

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

Здесь не применяется перетаскивание, поэтому сценарий будет немного проще. Код представляет собой сценарий onClipEvent (mouseDown) помешенный в клип "actions", который расположен за пределами рабочего поля клипа. Как и функция hitTest в ролике Makeafox-drag.fla, данный сценарий проверяет, какой клип выбран.
Однако вместо имен "Part1" - "Part 13" клипы получают значащие имена (например, "Eyes" и "Head"). Сценарий должен проверить каждый клип, для чего все клипы собраны в общий список.
При нахождении соответствующего клипа код продвигается на один кадр вперед. Если впереди кадров больше нет, он возвращается к кадру 1.

onClipEvent (mouseDown) {
// Определяем, в каком месте щелкнул пользователь
x = _root._xmouse;
y = _root._ymouse;
// Выясняем, по какому элементу произведен щелчок
list = ["Eyes", "Mouth", "Head", "Legs", "Left Arm", "Right Arm", "Body"];
for(i=0;i if (_root[list[i]].hitTest(x, y, true)) {
// Меняем выбранный элемент
with (_root[list[i]]) {
// Переходим к следующему кадру
if (_currentFrame == _totalframes) {
gotoAndStop(1);
} else {
nextFrame();
}
}
break;
}
}
}

Номер кадра и обшее количество кадров определяется при помощи параметров _currentFrame и _totalFrame. Это очень удобно в случае, когда клипы могут включать любое количество кадров, а код -учитывать все возможные варианты.

Конструкция with указывает, что все команды и функции кода в рамках этой конструкции должны выполняться для определенного клипа. Это позволит вам обойтись без добавления _root [movieclip] в начале каждой команды или функции.

Ролик Makeafox-switch.fla можно увидеть на Web-сайте. На Рисунок 7.4 показан один из возможных вариантов, получившихся в результате внесенных изменений. Независимо от того, сколько раз и в какой последовательности пользователь щелкает по элементам изображения, оно всегда будет оставаться цельным.

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

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

Код назначен кнопкам, которые размешены внутри переключателей. Первый кадр каждого переключателя содержит код для запуска воспроизведения звука. Помимо этого код задает переход клипа к следующему кадру. Кнопка присутствует во всех кадрах клипа. Различные сценарии используются для остановки звука в цикле барабанов и цикле басов.
Самый простой сценарий - у переключателей отдельных звуков. Задача данного сценария - запустить воспроизведение звука и задать его переход к следующему кадру.

on (press) {
// Указываем, что надо проиграть из библиотеки звук
// соответствующий выбранному клипу.
instanceSound = new Sound(),
instanceSound.attachSound(this._name);
instanceSound.start();
// Начинаем анимацию, показывающую, что кнопка выбрана.
gotoAndPlay(2);
}
}

Обратите внимание, что имя звука описывается при помощи синтаксиса this._name. Это значит, что имя клипа будет являться и именем звука Если клип называется "instance 1", код попытается воспроизвести звук с именем "instance 1". Первое имя "instance 1" соответствует имени клипа на рабочем поле, второе имя "instance 1" является именем соответствующего звука в библиотеке. Эта схема работает только в том случае, если имена полностью совпадают.
Преимущество данного способа заключается в том, что один и тот же клип может использоваться на рабочем поле для воспроизведения различных звуков. Имя звука берется из имени копии клипа, а не из переменной ActionScript, что делает такой клип более универсальным.
Анимация начинается после перехода клипа к следующему кадру. В конце анимации клип возвращается к первому кадру, а находящаяся в нем команда stop () остановит его повторное воспроизведение.
В случае отдельных звуков одна и та же кнопка находится во всех кадрax, что дает пользователю возможность запустить воспроизведение нового звука даже во время воспроизведения анимации клипа.
Клипы для басов и отдельных звуков аналогичны. Основное их различие состоит в том, что первый звук должен периодически повторяться. Для этого в команду start требуется добавить два параметра: смещение от начала звука и количество циклов. В нашем случае смешение не нужно следовательно, оставим его значение равным 0. Периодическое повторение звука необходимо, поэтому соответствующий параметр должен иметь очень большое значение.

on (press) {
// Проигрываем звук по названию клипа.
bassloop = new Sound();
bassloop.attachSound(this._name);
bassloop.start(0,9999);
// Начинаем анимацию.
gotoAndPlay(2);
}

Еще одно отличие между отдельными звуками и басами заключается в том, что цикл басов можно отключить. Для этого кнопке переключателя цикла басов начиная с кадра 2 необходимо назначить другой сценарий. Сценарий прекратит воспроизведение звука и вернет ролик к кадру 1.

on (press) {
// Останавливаем проигрывание звука,
bassloop = new Sound();
bassloop.stop(this._name);
// Прекращаем анимацию.
gotoAndStop(1);
}

Сценарии кнопки для цикла барабанного боя немного сложнее. Прежде чем начинать воспроизведение одного такого цикла, необходимо убедиться в том, что другие циклы этой группы отключены. Сценарий проверяет звуки, начиная с "drum loop 1" и заканчивая "drum loop 6", и отключает каждый из них. Он также задает возврат каждого клипа переключателя к кадру 1, чтобы остановить анимацию. После этого запускается воспроизведение выбранного цикла.

on (press) {
// Останавливаем любой другой цикл барабанного боя.
drumloop = new Sound();
for(i=l;i<=6;i++) {
_root["drum loop"+i].gotoAndStop(1);
drumloop.stop("drum loop"+i); }
// Начинаем проигрывать выбранный звук
drumloop.attachSoundlthis._nane);
drumloop.start(0, 9999);
// Воспроизводим анимацию.
gotoAndPlay(2);
}

Другой код кнопки цикла барабанного боя аналогичен коду цикла басов. Он прекращает воспроизведение звука и возвращает клип обратно к кадру 1.

on (press) {
// Останавливаем проигрывание звука
drumloop = new Sound();
drumloop.stop(this._name);
// Останавливаем анимацию.
gotoAndStop(1);
}

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

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

Рассмотрим сценарий кадра "record". Он начинается с инициализации массива и определения времени начала записи.

// Определяем массив.
danceArray = new Array();
// Считываем текущее время.
startTime = getTimer();

Функция danceButton вызывается одной из трех кнопок, расположенных внизу экрана. Они определяют время и название танцевального движения и помещают эту информацию в массив. Они также дают команду клипу "fox" (его библиотечное имя - "dance") к исполнению движения.

// Пользователь нажимает одну из "танцевальных" кнопок,
function danceButton(moveName) {
// Промежуток времени, прошедший с начала проигрывания.
thisTime = getTimer() - startTime;
// Помещаем временной интервал и название движения в массив.
danceArray.push({time: thisTime, move: moveName});
// Показываем движение,
fox.gotoAndPlay(moveName);
}

Когда пользователь нажмет кнопку Done, движение "stop" будет помещено в массив и ролик перейдет к кадру "menu".

// Нажимаем кнопку Done.
function stopRecordO {
// Вычисляем временной интервал.
thisTime = getTimerO - startTime;
// Добавляем в массив.
danceArray.push({time: thisTime, move: "stop"});
// Возвращаемся в главное меню.
gotoAndStop("menu");
}

Рассмотрим сценарий кадра "playback". Он начинается с определения времени начала воспроизведения и присваивания переменной dance-step значения 0. Эта переменная содержит номер следующего в очереди танцевального па.

// Определяем время.
startTime = getTimer();
// Начинаем с шага 0.
danceStep =0;

Клип "actions" вызывает функцию danceFrame, которая проверяет состояние последовательности танцевальных движений. Она вычисляет текущее время и сравнивает его со временем запуска следующего движения.
Когда это время наступает, функция проверяет, не является ли это движение командой stop. Если это так, то последовательность завершается. В противном случае клип "fox" переходит на соответствующий кадр, и переменная danceStер увеличивает свое значение на единицу.

// Вызывается при каждом обращении к кадру
// из клипа "actions".
function danceFrame() {
// Вычисляем время.
thisTime = getTimer() - startTime;
// Проверяем момент запуска следующего движения, if (thisTime >= danceArray[danceStep].time) {
// Определяем движение.
move = danceArray [danceStep] .move;
// Если это "stop", возвращаемся в кадр "menu",
if (move == "stop") {
gotoAndstop("menu");
} else {
// В противном случае отображаем движение танца.
fox.gotoAndPlay(move);
// Увеличиваем переменную.
danceStep++;
}
}
}

Создание полной программы рисования

Второй параметр функции lineStyle отвечает за выбор цвета. В предыдущем примере был выбран черный цвет — 0x000000. Префикс Ох сообщает программе, что следующее за ним число надо воспринимать в шестнадцатеричном формате, так же, как это происходит при HTML-верстке. Шесть последних цифр обозначают собственно цвет. Также можно использовать значение цвета, получаемое вызовом функции getRGB. В ролике Drawing-fill.fla я использовал несколько разноцветных кнопок. Каждая из этих кнопок представляет собой клип с кнопкой внутри.
На Рисунок 7.6 показан вид исходного файла Drawing-fill.fla. Слева расположены кнопки, с помощью которых пользователь может управлять цветом.

Создание простой программы рисования

Создание простой программы рисования

Конечный ролик позволит пользователю рисовать, используя различные фигуры и цвета, однако для начала дадим ему возможность нарисовать непрерывную линию.
Мы воспользуемся новыми командами для рисования, появившимися в версии MX. Описание этих команд вы можете найти на панели ActionScript (Objects -> Movie -> Movie Clip -> Drawing Methods) или в окне Reference (справка).
Эти команды как бы имитируют движения пользователя, передвигающего мышь. Сначала используем команду line style для определения толщины и цвета будущей линии. Команда moveTo передвигает указатель точки для рисования по экрану; линия при этом не прорисовывается. И наконец, мы используем команду lineTo для рисования линии из текущей позиции в заданную.
Единственным элементом нашего ролика является клип "actions", который содержит весь необходимый код.
Сценарий начинается с присваивания переменной draw значения false. Эта переменная используется, чтобы определить, рисует пользователь или нет. Затем с помощью linestyle мы задаем толщину и цвет.

Третий параметр команды lineStyle определяет прозрачность линии, то есть свойство alpha. Значение 100 соответствует абсолютно непрозрачному объекту, значение 50 делает объект полупрозрачным.

onClipEvent (load) {
// Рисовать или не рисовать?
draw = false;
// Линия шириной в 1 пиксел, черная, непрозрачная
_root.lineStyle(1,0x000000,100);
}

Когда пользователь нажимает кнопку мыши, переменной draw присваивается значение true. Затем команда moveTo перемещает указатель в текущую позицию курсора. Мы используем конструкцию _root для обращения к свойствам _xmouse и _ymouse, т.к. хотим чтобы центр координат был независим от положения клипа "actions".

onClipEvent (mouseDown) {
// Будем рисовать
draw = true;
// Переходим к координатам курсора.
_root.moveTo(_root._xmouse, _root._ymouse);
}

Когда пользователь отпускает кнопку мыши, переменной draw присваивается значение false, и процесс рисования завершается.

onClipEvent (mouseUp) {
// Завершаем рисование.
draw = false;
}

Значение переменной draw проверяется при каждом обращении к кадру. Если оно истинно, то рисуется линия от предыдущей к текущей позиции курсора.

Константы true и false могут использоваться конструкциями if и for в качестве проверки условия выполнения кода. Вы также можете использовать их для отслеживания объектов, которые могут нахолиться только в двух состояниях (вкл/выкл).

onClipEvent (enterFrame) {
if (draw) {
_root.lineTo(_root._xmouse,_root._ymouse);
}
}

Обратите внимание, что все обращения к командам рисования происходят через конструкцию _root. Это делается для того, чтобы линии рисовались в самом ролике, на рабочем поле, а не на рабочей области клипа "actions". Можно создать отдельный клип "canvas " (холст) и рисовать линии в нем. Прорисовываясь, линии автоматически оказываются на самом заднем плане, так что, если в клипе ( или ролике) есть еще какие-то объекты, они будут закрывать линию. Наверное, вам будет удобней рисовать на пустом уровне.

На Рисунок 7.5 показана кривая, которая получилась в результате нажатия пользователем кнопки мыши и перемещения курсора. Помните, что скорость рисования соответствует частоте смены кадров ролика, поэтому для того, чтобы процесс рисования проходил плавно, это значение должно быть максимальным и равняться 120 калр/с. Готовый ролик вы можете увидеть, загрузив файл Drawing-line.fla.

Танцующая лиса

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

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

В панели Properties вы можете

Рисунок 7.2 В панели Properties вы можете назначить графическому Flash-элементу свойство клипа и имя, отличное от его имени в библиотеке

Несколько слов о взаимном перекрывании символов на рабочем столе. Я расположил все подвижные элементы поверх головы и туловища, которые статичны. Исключение сделано для символов с изображением ног - они помешены на последний (задний) и предпоследний планы. Выделив элемент на рабочем столе, вы можете изменить его уровень с помощью команды Modify -> Arrange (Изменения -> Упорядочить).
На Рисунок 7.3 изображен один из вариантов изображения лисы, получившийся в результате перемещения ряда элементов из левой части в правую.

Для завершения записи пользователь может

Для завершения записи пользователь может нажать кнопку Done и вернуться в главное меню. Воспроизведение включается кнопкой Playback, после чего в точности воспроизводится записанная последовательность.

создать приложение, которое позволит пользователю

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

Задача этого проекта - создать приложение, которое позволит пользователю присоединять части тела лисы к неподвижному туловищу и так составлять изображение зверька. Метод drag-and drop (перетащи и положи) должен быть знаком всем, кто умеет работать с компьютером.

Исходное изображение будет полным, но,

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

Исходное изображение будет полным, но, когда пользователь щелкнет по одному из его элементов, он изменится. Например, пользователь может щелкнуть по глазам и вместо них появится другая пара глаз.

в которой пользователь может рисовать,

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

Задача данного раздела - создать программу, в которой пользователь может рисовать, как в простом графическом приложении. Пользователь должен иметь возможность рисовать простые линии и фигуры, а также применять различные цвета.

В данном разделе рассматривается создание

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

В данном разделе рассматривается создание игрушки, которая позволяла бы пользователю сочинять свои собственные музыкальные произведения, смешивая звуки барабанного боя, циклы басов и другие отдельные звуковые эффекты. При этом необходимо обеспечить возможность замены файлов, а также предусмотреть обратную связь с пользователем чтобы он видел, какие музыкальные отрезки воспроизводятся. На Рисунок 7.8 показан интерфейс такого приложения.