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

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

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

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

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

Подход

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

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

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

Создание ролика Lava Lamp требует особой тщательности. Например, пузырьки представляют собой круги без границы и с радиальной заливкой между непрозрачным и прозрачным красным цветом. Прозрачный красный цвет получается в результате установки свойства alpha в значение 0%. На рис. 6.14 изображен клип, а также панели Fill (Заливка) и Mixer (Миксер), при помощи которых можно задать градиент красного цвета.

Рисунок 6.14 В панели Fill можно задать градиентную заливку цветом. Панель Mixer позволяет задавать значение прозрачности

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

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

function initLamp () {
// Инициализируем переменные, обозначающие верхнюю и нижнюю
// координаты лавовой лампы по оси Y.
top = 0;
bottom = 300;
// Создаем экземпляры клипа, содержащего пузырек.
numBubbles = 20;
for (i=0; i<numBubbles; i++) {
attachMovie("bubble", "Bubble"+i, i);
}

// Дублируем изображения стекла, низа и верха лампы, чтобы // они оказались над пузырьками.
duplicateMovieClip("Glass", "Glass", i + +);
duplicateMovieClip("Top", "Top", i++);
duplicateMovieClip("Bottom", "Bottom", i++);
// Создаем объекты, содержащие значение скорости пузырьков.
bubbles = new Array();
for (i=0; i bubbles[i] = {speed:0};
}
}

После того как все элементы подготовлены, воспроизведение ролика осуществляется по следующему принципу: время от времени вызывается функция, которая обновляет местоположение пузырьков и создает новые. Клип, расположенный за пределами рабочего поля, вызывает функцию 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) and (у > bottom)) {
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 <= 1) {
newBubble();
}
}

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

function newBubble () {
for (i=0; i<numBubbles;i++) {
// Находим пустое место для пузырька,
if (bubbles[i].speed == 0) {
// Создаем пузырек в верхней части лампы.
if (Math.random() < .5) {
bubbles [i].speed = 1 ;
_root["Bubblen+i]._y = -40;
// Создаем пузырек в нижней части лампы.
} else {
bubbles[i].speed = -1 ;
_root ["Bubble"+i ]._y = 340;
}
// Устанавливаем размер пузырька.
size = 40+ Math, random ()*40;
_root["Bubble"+i]._xscale = size;
_root["Bubble"+i]._yscale = size*3;
_root["Bubble"+i]._x = 10+Math. random ()*80;
// Готово.
break;}
}
}

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

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

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