[Andromed]

Ну теперь настало время дождика… с ним немного сложнее объяснить но попробую.. правда не уверен что предыдущий урок поняли многие..

http://www.vipsauna.com/test/rain.html
исходник
http://www.vipsauna.com/test/rain.fla



и так нам нужно создать эффект капель сначала все на словах

Смысл в том что мы к нашей картинке применим только 1 фильтр, тем самым вызвав ее искажение, пример похож на эффект рыбьего глаза, только этих глаз много J и они имет определенную форму и двигаются сами по себе. И так фильтр DisplacementMapFilter, сначала опишу как он работает.
Основным его входным параметром является bitMapData, именно исходя из того что нарисовано в ней, и будет происходить на нашей картинке. Еще одними из главных параметров служат
componentX, componentY – эти параметры могут принимать только 4 значения 1 2 4 8
(1- красный 2 –зеленый 3- синий 4-альфа канал)
они отвечают за то какие цвета bitMapData будут смещать по оси Х или Y наше изображение
остальные параметры говорят о силе смещения и пр. проще говоря этот фильтр искажает каждый пиксель нашей картинки исходя из определенного шаблона. Например наш шаблон имеет 3 цвета красный синий и черный, и мы применяем его в качестве фильтра DisplacementMapFilter где componentX =1 componentY=4;
Сравнивая пиксели оригинала и шаблона при нахождении красного пикселя картинка получит смещение по оси х , синего по оси y др цветов, оставит как было…( учитывая что цвет во флеше имеет градации от –255 до 255 с интенсивностью от 0 до 100 происходит смещение в любом направлении)
Ну применительно к нашим капелькам, нам нужно создать такой динамический фильтр в котором будут создаваться участки например красного и синего цветов которые будут симулировать отдельные капельки
Если посмотреть пример то там есть объект displaceMap состоящего только из серого фона, вот именно к нему динамически привинчиваются капельки из библиотеки которые имеют красно-сине-серый фон. Что заставляет картинку искажаться в определенных областях. И так примерно разобравшишьс объектом смотрим код J

Stage.scaleMode = 'noScale';
//максимальное колисество капель
var maxDrops = 30;
//счетчик капель
var dropsCounter = 0;
//смещение по х вызывает красны цвет
var colorX = 1;
//смещение по х вызывает синий цвет.. в пред буйлде ошибся стояло 4 - альфа :)
var colorY = 3;
//сила смещения по x y
var powerX = 75;
var powerY = 75;
//точка отчета 0,0 не используется
var offset = new flash.geom.Point(0, 0);
//создаем канвас (контейнер в котором происходят измения вызванные фильтром)
var bmp = new flash.display.BitmapData(image_mc._width, image_mc._height);
// создаем сам фильтр
var displaceFilter = new flash.filters.DisplacementMapFilter(bmp, offset, colorX, colorY, powerX, powerY, "ignore");
//главное событие
onEnterFrame = function () {
	//высчитываем количество капель которое должно выпасть
	//создаем их заодно пересчитав каждую штуку 
	var NDrops = maxDrops-dropsCounter;
	for (var i = 0; i<NDrops; i++) {
		dropsCounter++;
		createDrop(random(image_mc._width), random(image_mc._height/3));
	}
	//говорим нашему объекту который уже работает в displaceFilter обновится из объекта куда мы добавляем капли
	bmp.draw(displaceMap);
	//применяем фильтр к картинке
	image_mc.filters = [displaceFilter];
};
//создаем каплю
function createDrop(x, y) {
	//высчитываем глубину и цепляем каплю из бибилиотеки
	var Depth = displaceMap.getNextHighestDepth();
	var Drop = displaceMap.attachMovie("D_Place", "D_Place"+Depth, Depth);
	//устанавливаем позицию, направление движения
	Drop._x = x;
	Drop._y = y;
	var angle = -Math.PI/2;
	var power = Math.random()*2;
	Drop.vx = (Math.random())*power+2;
	Drop.vy = power*5+5;
	//берем разные размеры
	Drop._xscale = 50+random(51);
	Drop._yscale = 20+random(45);
	//высчитываем угол поворота нашей капельки по ходу жвижения
	Drop._rotation = Math.atan2(Drop.vy, Drop.vx)*180/Math.PI-180;
	//создаем событие движения нашей капельки
	Drop.onEnterFrame = moveDrop;
}
function moveDrop() {
	//капелька двигается
	this._x += this.vx;
	this._y += this.vy;
	//если капелька улетела за пределы нашей картинки удаляем ее
	//заодно и посчитав
	if ((this._y>image_mc._height) || (this._x>image_mc._width)) {
		removeMovieClip(this);
		dropsCounter--;
	}
}
// переход на разные картинки
b1.onRelease = function() {
	image_mc.gotoAndStop(1);
};
b2.onRelease = function() {
	image_mc.gotoAndStop(2);
};
b3.onRelease = function() {
	image_mc.gotoAndStop(3);
};