Flash номер пять, сайты делаем опять

Спецвыпуск Xakep, номер #015, стр. 015-022-5

I'd like to move it, move it!

Давай теперь добавим немного анимации нашему ролику через экшн-скрипты. К примеру, сделаем простой летающий шарик, который отскакивает от стенок. Сперва надо сварганить этот самый шарик. Заходи в "Insert->New Symbol" и создавай Movie Clip с названием "Suxx". В самом clip'е пущай будет один кадр. Бери тулзу для рисования окружностей и рисуй оную в центре, но только небольшую, радиусом эдак 10 пикселей (для этого тебе пригодится вкладка "Info", где размеры можно задать цифрами). Заливка пусть будет красная градиентная, а цвет границы тоже красный.

Готово? Отлично! Теперь опять создавай новый клип с названием "megasuxx" (ты окажешься в нем) и перетаскивай свежеизготовленный "suxx" в него и центрируй. Щелкай по надписи "Scene 1" в левом верхнем углу рабочей области. Теперь выбирай слой с нашей кнопкой "Хочу!" и вытягивай на центр из библиотеки "megasuxx". Выделяй его и бей в него правой крысой, дальше "Panels->Instance". В поле "Name" вводи "Ball". Ага, отлично, только "Instance" прикрой - неприлично ведь! Теперь в правом верхнем углу рабочей области откликай цапу с треугольником, квадратом и кружком в куче и выбери наш "megasuxx". Отлично - мы опять внутри него! Шар у нас готов, осталось только догадаться, как же его двигать. Принцип этого "непростого" алгоритма такой: у нас есть скорость шарика и его координаты, и мы каждый кадр просто прибавляем к координатам скорость и получаем иллюзию движения. Но таким образом через какое-то время мы увидим, как шарик покинет пределы ролика и улетит в необъятные просторы космоса, так и не отразившись от стенок. Как быть? Да очень просто: мы с тобой должны проверять, лежит ли шарик внутри сцены или нет, а если нет, то изменять скорость на другую, то есть на противоположную по знаку. А теперь смотри, как это реализуется в скриптах: для начала создай еще два кадра (не забыл, что мы сидим внутри мегасакса?). В самом первом надо заинициализить переменные, необходимые для алгоритма, а это - vx и vy - скорости по x и по y соответственно. Делается это при помощи ключевого слова "var". Кстати, в action-script'ах все переменные бестиповые, то есть ты можешь хранить там без заморочек хоть число, хоть свое мнение о соседке. Итак, полностью объявление переменной выглядит таким образом: "var имя_переменной1 = начальное_значение1, имя_переменной2 = начальное значение2,...;" Поэтому мы переходим в режим Expert и пишем "var vx = random(5), vy = random(5);". Random - функция, которая возвращает случайное целое положительное число, меньшее указанного в скобках. Это для того чтобы наш шар не летал слишком одинаково каждый раз. Ага, отлично! Выбирай второй кадр. Здесь нам надо каким-то образом получить координаты шара. Делается это при помощи функции "getProperty". Первый параметр оной - имя объекта, в нашем случае - "../Ball" - именно в кавычках и со слешем и двумя точками! Почему? Дело в том, что нужно указать путь к объекту и его имя. Объект зовут "Ball" (мы сами дали ему это имя), а лежит он в основной сцене, или в корне, поэтому "../". А иначе флэш наш мячик не найдет, и ничего не заработает. Второй параметр - что мы хотим получить. Вообще, можно взять практически все, начиная от координат и заканчивая коэффициентом прозрачности (_alpha). Собственно, если мы хотим получить координату шара по x, то мы так и запишем: "x = getProperty("../Ball", _x);". Аналогично для y: "y = getProperty("../Ball", _y);" Теперь координаты шара у нас хранятся в переменных x и y. Дальше мы делаем, как и задумывали: прибавляем скорость к координатам: "x = х + vx; y = у + vy". А за проверку на столкновение с вертикальными границами сойдет такая байда: "if(( x > 540) or (x < 10)) { x = х - vx; vx = -vx; }". Объясняю: "if" переводится как "если". "Or" - логическое "или", то есть одно из двух условий прокатило. Итак, дословно: если x больше 540 (ширина ролика) или x меньше 10 (радиус шарика), то уменьшаем x на vx (чтобы не "заезжала" за границу) и меняем скорость (vx) на противоположную (угол падения - равен углу отражения). Ясно? То же самое надо проделать и для y: "if(( y > 390) or (y < 10)) { y = у - vy; vy = -vy; }". Как видишь, разница только в цифрах (ширина не равна высоте). А как же теперь применить наши координаты? Есть такая функция "setProperty", первые два параметра у нее такие же, как и у "getProperty" (путь/название объекта и название параметра, который хотим изменить), а третий - значение, на которое следует поменять. Как ты понял, сюда нужно подставить подходящую переменную. Итак, в конце концов мы имеем: