Простое рисование во флэше

Как-то попросили в комментариях рассказать о том как рисовать во флеше. Я по образованию не художник, поэтому как это делается «по науке» объяснить не смогу. Зато подскажу легкий и быстрый способ как рисовать фоновые изображения. Хотя таким способом нормально рисовать получается только природу — это тоже часто нужно.

Почти все сделаем при помощи одного flash-инструмента — Oval Tool (которым кружки рисуют). Все объекты будут состоять из набора кружков.

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/06/simpledraw.swf" height="200" width="550" /]

Думаю что по флэшке и так все понятно, но тем не менее распишу по кадрам. Читать далее Простое рисование во флэше

Пузырьковый метод

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

Но не только под водой можно таким образом показывать воздух. Иногда возникает необходимость показать воздух на суше. Непростая задача — он ведь прозрачный. Например есть игровой баннер, где летит воздушный шарик, а мы включая/выключая вентиляторы должны проводить его до конца экрана. Чем выше от вентилятора, тем меньше воздействие ветра. Чтобы добавить играбельности и лучше объяснить пользователю что и как, можно воспользоваться этим способом и наглядно показать пределы ветра. Для этого будем считать что воздух замусорен пылинками, ворсинками и т.д. В случае с нашими вентиляторами, они силой ветра поднимают осевшую на них пыль. Я просто придумал такие условия, но они помогают мне лучше передать картину происходящего.

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/06/bubbles.swf" height="200" width="550" /]

Чтобы сделать такие пузырьки нужно: Читать далее Пузырьковый метод

Одна голова — хорошо, а две — лучше

Интересный ход применили ребята из Nitrome в игре Knuckle Heads. Даже не знаю как доступно описать управление в игре — это надо попробовать.

игра 2 головы

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

Отдельно отмечу оформление игры. Качественная пиксельная графика, электронная музыка и интересные идеи — визитная карточка Nitrome.

Пора поработать головой. Точнее двумя.

Динамический цвет без лишних расчетов

Не совсем о флэш-играх, но хитрость.

Недавно сделал карту для сайта kartablogov.ru. Она отображает плотность распределения блогов по регионам России. По замыслу автора, регионы на карте должны менять цвет в зависимости от количества блогов. Отлично, цвет в дизайне — сильная штука. Здесь он меняется от зеленого до красного и понять где зарегистрировано больше блогов можно даже без наведения мышки.

Собственно, я столкнулся с проблемой, как расчитать программно промежуточный цвет. То есть, 2 крайних значения у меня есть, а все оттенки между ними должны расчитываться.
Закраска делается функцией Color.setRGB() и ей в качестве параметра нужен цвет в виде 0xFFFFFF. Это хорошо, все привыкли к такому формату, но если записать его в переменную, в таком виде он уже не хранится и при трэйсе выдаст 16777215. Чтобы корректно расчитывать оттенки, цвет нужно разложить на составляющие Red, Green и Blue. И потом по пропорции вычислять для каждой составляющей…

Короче, много работы. Я не спорю, это давно кем-то уже написано и можно найти в сети готовый скрипт. Просто есть еще один интересный способ. Его я и предлагаю:

  1. Создаем символ-контейнер (назовем colorSampler).
  2. В нем создаем клип (назовем s) и анимируем его с эффектом Tint из одного цвета в другой (100 кадров). Фишка в том, что заданный «руками» эффект Tint теперь можно считать программно.
  3. Для этого клипа создается объект Color. И теперь, чтобы получить промежуточный цвет, отправляем символ colorSampler в нужный кадр и считываем его с символа s методом Color.getRGB().

В примере ниже строится произвольный график, где цвет столбиков зависит от их высоты. Символ в нижней части как раз и задает цветовой переход.

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/06/graph.swf" height="300" width="550" /]

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

Пока писал пост, подумал что еще проще нарисовать градиент (100 пикселов шириной), сделать из него объект BitmapData и считывать цвет методом getPixel(). Будет наглядней.

Второе рождение

По вине хостеров блог лежал 2 дня.

Оказывается, посыпался винт, на котором жили сайты одной тарифной линейки. Сейчас все перенесли на новый сервер. Точнее только серверные файлы. А все базы ушли в страну, «богатую рыбой и бобрами». Даже не знаю, как теперь быть всем тем, кто понятия не имеет что такое phpMyAdmin и резервное копирование базы.

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

Что не сохранилось: последние несколько комментариев и рейтинг популярности статей старше 14 апреля.

Кстати, такие обстоятельства требуют компенсации. Поделитесь опытом, кто через это прошел.

Вдохнуть и не дышать — пауза во флеш-играх

Во flash-играх часто возникает необходимость сделать паузу. Подразумевается, что действующие лица перестают двигаться и взаимодействовать между собой. В последнее время это актуально и для игровых баннеров. Людей раздражает постоянно мельтешащая анимация и некоторые сайты выдвигают требование ставить баннер на паузу через 15 секунд. Если эта функциональность не закладывалась с самого начала, то включить паузу не всегда просто и сильно зависит от того, как все устроено.

Мне известно 2 подхода к flash-программированию: структурированный и хаотичный. При первом все символы и объекты организуются в строгую иерархию, управление сосредоточено в одном месте, и этот «мозг» каждый кадр перебирает массив подчиненных ему объектов и вызывает для каждого функцию действия. Все строится по принципам ООП. Таким образом работают, например, движки 2D физики и 3D. Хороший способ, уменьшает вероятность ошибки, но требует основательного подхода и много времени.

Есть еще хаотичное или стихийное программирование, когда для каждого клипа (которому это нужно) задается событие onEnterFrame и он запускается в «свободное плавание» (программисты со стажем сейчас меня нещадно осудят). Это настоящее самоуправление, каждый клип живет в пределах своих фигурных скобок. Друг о друге символы знают мало, обычно разбиваются по группам и заносятся в массивы. Метод тоже хороший, можно все сделать быстро, но есть шанс запутаться и поматерить флэш, который «опять глючит». Этот метод я обычно использую для задач-однодневок, пока все свежо в памяти.

Есть еще третий метод, который мне нравится больше всего — он сочетает в себе и структуру и свободу выбора — ООП основанное на событиях. Но это уже условное отделение — классы как-никак.

Так вот, возвращаясь к вопросу о глобальной паузе: для структурного подхода все просто: заводится логическая переменная (пауза есть/нет), опираясь на которую, главный клип либо вызывает для всех функцию действия, либо нет. Это что касается кода, остановить твиннинг гораздо сложнее. Например, летит муха, у нее дрожит туловище, она машет крылышками и к тому же моргает. Нужно 3 раза вызвать функцию stop(). А если на сцене символов много, и все они разные? Как минимум для каждого объекта нужно описывать функцию его полной остановки (с событиями кстати также — наследование не поможет если символы разные).Для стихийного подхода к программированию это почти расстрел. В обоих случаях нужно писать много строк Actionscripta. Некоторое время я так и мучался, попутно выдумывая, как это можно упростить. Вот то, что есть у меня на сегодня:

[kml_flashembed movie="http://xitri.com/wp-content/uploads/2008/06/pause.swf" height="200" width="550" /]

Что может приводить объект в движение? Твиннинг или ActionScript (а точнение событие EnterFrame). SetInterval я во внимание не беру.
Значит должна быть функция которая останавливает проигрывание клипа и отключает для него onEnterFrame. Читать далее Вдохнуть и не дышать — пауза во флеш-играх

Еще один достойный пример спецэффектов во flash

На сайте www.stickpage.com живут слепленные из палок человечки. По большому счету они все злые и грозные. Поэтому постоянно устраивают между собой разборки, — с кровью и прочими летальными исходами.

Даже если оставить в стороне отличный тайминг и анимацию персонажей, остается целая куча спецэффектов боевой тематики которую сложно игнорировать.

Вот такой пример.
Флэшка не простая, а управляемая: клавиши 1,2,3,4 на цифровой клавиатуре справа переключают виды камеры. Можно зумировать скроллером мыши. Пробел — пауза. Клавиши вверх/вниз — ускорить/замедлить просмотр (жми много раз). Право/лево — кадр вперед/назад. Q — переключает режим качества. Заявлена еще клавиша S, но я не понял что она делает. Читать далее Еще один достойный пример спецэффектов во flash