Квадраты

Сначала создадим фон из зеленых квадратов. Их размер изменяется от 200 до 0, причем сначала нужно рисовать большие квадраты, на которые накладываются маленькие. Это можно сделать с помощью такого цикла

N = 15;

hw = 200 / N;

w = 200;

while ( w > 0 ) {

// здесь рисуем

w -= hw;

}

В этом куске кода N —число квадратов, w — половина стороны квадрата, а hw — шаг изменения этой величины.

Цвет также должен изменяться от ярко-зеленого (0x00FF00) до черного (0x000000), причем не должен содержать ни красную, ни синюю составляющие. Мы будем изменять в цикле зеленую составляющую G от 255 до 0, а потом умножать ее на 0x100 для получения кода цвета в формате RGB. Учтем, что G — целое число, для округления используется функция round объекта Math:

hG = 255 / N;

G = 0xFF;

while ( w > 0 ) {

rgb = Math.round(G) * 0x100;

// здесь рисуем

G -= hG;

}

Рисовать будем не на главном монтажном столе, а в новом клипе canvas (холст).

12. Создайте новый Flash-документ размером 400 на 400 пикселей. Добавьте в код кадра 1 строки

#include "figures.as"

createEmptyMovieClip("canvas", 1);

canvas._x = 200;

canvas._y = 200;

N = 200;

hw = 200 / N;

hG = 0xFF / N;

w = 200;

G = 0xFF;

with (canvas) {

lineStyle(1,0,0);

while (w > 0) {

rgb = Math.round(G) * 0x100;

beginFill(rgb,100);

rectangle(-w, -w, w, w);

endFill();

w -= hw;

G -= hG;

}

}

13. Проверьте работу фильма и сохрание с именем ЛР9_2.fla

Для того, чтобы можно было использовать методы rectangle и circle, мы подключили файл figures.as. Новый клип canvas помещается в центр поля, далее устанавливается невидимая линия (с параметром alpha=0) и в цикле рисуются квадраты.

Шарик

Займемся рисованием шарика. Это будет новый клип с именем ball, расположенный в центре поля на глубине 2.

14. Добавьте в код кадра 1 следующие команды:

createEmptyMovieClip ("ball", 2);

ball._x = 200;

ball._y = 200;

nomer = 1;

drawBall();

Переменная nomer будет обозначать номер шарика, а функция drawBall, которая будет написана далее, рисует сам шарик на экране.

15. Добавьте в код кадра 1 код функции

function drawBall() {

with (_root.ball) {

clear();

color = [0xFFFFFF, 0x990000];

alpha = [80, 100];

pos = [10, 245];

matrix = {matrixType:"box", x:-75, y:-75, w:100, h:100, r:0};

beginGradientFill("radial",color,alpha,pos,matrix);

circle(0,0,50);

endFill();

}

}

16. Сохраните этот и проверьте работу клипа.

Для создания объемного вида шарик заливается радиальным градиентом от белого к темно-красному.

Двойной щелчок

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

Для фиксации двойного щелчка будем использовать функцию getTimer, которая возвращает количество миллисекунд с начала работы клипа. В переменной tLast запомним время последнего щелчка, и если новый произошел менее, чем через 500 миллисекунд после предыдущего, запустим процедуру «удаления».

17. Добавьте в конец кода кадра 1 строчку

tLast = 0;

и обработчики событий

ball.onMouseDown = function() {

if (this.hitTest(_root._xmouse, _root._ymouse)) {

t = getTimer();

if (t - tLast < 500) this.vanish();

tLast = t;

startDrag(this);

}

};

ball.onMouseUp = function() {

stopDrag();

};

18. Проверьте, как шарик перетаскивается мышкой.

Клип-шарик обрабатывает события mouseDown (нажатие клавиши мыши) и mouseUp (отпускание клавиши). Если при нажатии клавиши мышь находилась над шариком (метод hitTest вернул true), проверяем разницу между предыдущим и новым щелчком. Если она меньше 500 мс, запускается метод vanish (исчезнуть), который мы еще напишем. Кроме того, в переменной tLast запоминается время нового щелчка и разрешается перетаскивание. При отпускании мыши перетаскивание (если оно было) прекращается.

Функция vanish должна запустить процесс постепенного исчезновения шарика. Будем считать, что за 1 кадр он уменьшается в размере на 5 процентов. Для того, чтобы новый шарик установить в то же положение, запомним координаты в переменных x0 и y0.

19. Добавьте к коду кадра 1 функцию

ball.vanish = function() {

x0 = this._x;

y0 = this._y;

dx = 0.05 * (200 - this._x);

dy = 0.05 * (200 - this._y);

this.onEnterFrame = this.moveCenter;

}

Величины dx и dy определяют смещение шарика за 1 кадр так, чтобы через 20 кадров он пришел в центр поля, то есть в точку (200,200). В последней строчке определяется новый обработчик для события enterFrame: функция moveCenter будет вызываться при каждой смене кадра.

20. В конец кода кадра 1 добавьте функцию

ball.moveCenter = function() {

with (this) {

_xscale -= 5;

_yscale -= 5;

_x += dx;

_y += dy;

if (_xscale < 1) {

_xscale = _yscale = 100;

_x = x0;

_y = y0;

nomer ++;

onEnterFrame = null;

drawBall();

}

}

}

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

Эта функция передвигает шарик к центру на вектор (dx,dy) и уменьшает его размер на 5 процентов от первоначального. Когда масштаб становится меньше 1%, размер шарика возвращается к исходному (100%), он возвращается на прежнее место с координатами (x0,y0), номер увеличивается на 1 и шарик перерисовывается. Кроме того, в обработчик enterFrame записывается null, то есть функция moveCenter уже не будет вызываться.