Flash 8 учимся... я про себя :)

[Andromed]

И так урок для красивой надписи c фейерверком

скачайте сфку себе на комп а то тормозит ужасно или напишите штмл страничку которая ее вызывает если хотите в браузере.. просто если прям так то почемуто опеределние мыши не очень идет должно быть все плавно и красиво

Посмотреть тут http://www.vipsauna.com/test/my_logo.html
Исходник тут http://www.vipsauna.com/test/my_logo.fla
Так как мы рассматриваем возможности 8 плеера то урок мы будем делать немножко по другому, так как рисовать Guaid слои нету времени . И так у нас задача перенести эффект на клавишу мыши.
Первым делом на нижнем слое рисуем наш бэкграунд чтобы в частности использовать на нем событие OnPress даем ему инстанс нейм background_mc на втором слое создаем ключевой кадр уже в нем мы пишем код:

// смысл данного эффекат заключается в том что мы создаем пустой мувик, и 
//начинаем перекрашивать в нем пиксели в нужный нам цвет
//естественно возникает вопрос если мы только добовляем пиксели, то как происходит, 
//движение, в этом нам помогает ColorTransform который в каждый момент времени делает
// пиксели более прозрачными
// Например представьте что вы в первом кажре вашего мувиклипа нарисовали точку
// На втором вы эту точку сдвинули чуть вправо а вместо этой оставили точку с половиной прозрачности
// На 3 вы делаете тоже самое уже с двумя точками, в конце концов последняя точка просто исчезнет, а у вас
// появится эффект trail - хвоста, точка движется и оставляет за собой след, так же и тут
Stage.scaleMode = 'noScale';
//создаем мувик для отображения частиц
this.createEmptyMovieClip("fire", 1);
//создаем мувик для отображения обводки
this.createEmptyMovieClip("obvodka", 2);
//Создаем канвас (контейнер в котором будем рисовать)
var fireConvas = new flash.display.BitmapData(300, 300, true, 0);
//копируем созданный канвас в мувик
fire.attachBitmap(fireConvas, 1);
//создаем матрицу из стандартного класса Matrix
var baseMatrix = new flash.geom.Matrix();
//создаем объект трансформации из стандартного класса ColorTransform
var fade = new flash.geom.ColorTransform();
//устанавливаем alphaMultiplier, данный параметр отвечает за то как быстро
//картинка будет исчезать, представьте скажем мувиклип с объектом на котором в каждом
//фрейме alpha будет увеличиваться на 1.
fade.alphaMultiplier = 0.8;
// гравитация
var grav = 0.2;
//максимальное количество частиц
var maxparticles = 200;
//количество частиц генерируемое за раз
var particleNum = 2;
//цвет обводки
var obvColor = 0xFF6633;
//толщина линии обводки
var obvHeight = 2;
//цвет частички
var particlecolor = 0xFFFF6633;
//цвет полупрозрачной частички обратите внимание что первые два символа это прозрачность,
//остальное составляюще RGB цвета как обычно
var particlecolorAlpha = 0x50FF6633;
//цвет свечения частички
var particleglowcolor = 0xEEA055;
//массив с будующими частичками
var particles = new Array();
// создаем объект свечения Glow аналогичен фотошоповскому
var glow = new flash.filters.GlowFilter(particleglowcolor, 5, 15, 15);
//применияем свечение ко всему объекту содержащему наши частички
//чтобы они светились все сразу и к обводке, тому что мы рисуем
fire.filters = [glow];
obvodka.filters = [glow];
//блендмоде, как объекты внутри контейнера перекрываются, нажмите F1 на этом слове
//появится красочный хелп илюстрирующий каждое совйство
fire.blendMode = "add";
//теперь мы создаем событие на нажатие на нашем бэкграунде
//то что мы рисовали до стирается, точка рисования устанавливается
//в позицию мыши и описываем как будет выглядить наша обводка
background_mc.onPress = function() {
	obvodka.clear();
	obvodka.moveTo(_xmouse, _ymouse);
	obvodka.lineStyle(obvHeight, obvColor, 100);
};
//создаем оснавное событие 
onEnterFrame = function () {
	//если левая кнопка мыши зажата
	if (Key.isDown(1)) {
		// мы продолжаем линию
		obvodka.lineTo(_xmouse, _ymouse);
		//и создаем частички которые засовываем в начало массива с ними
		for (var i = particleNum; i>=0; i--) {
			particles.unshift(createParticle(_xmouse, _ymouse, 0, random(3)+1));
		}
		//если вдруг оказывается что частичек у нас больше чем надо
		// просто отсекаем самые последние, по число ранвое максимальному количеству частиц
		if (particles.length>maxparticles) {
			particles.length = maxparticles;
		}
	}
	//теперь мы  рисуем все частички 
	for (i in particles) {
		currparticle = particles[i];
		//мы добавляем к нашей картинк один пиксель
		fireConvas.setPixel32(currparticle.x, currparticle.y, particlecolor);
		// а теперь раставляем пиксели вокруг созданого получив крестик
		//но так как прозрачность вновь создаваемых меньше чем у центрального
		//из далека мы получаем вполне приятный кружочек, а не корявый пиксель
		fireConvas.setPixel32(currparticle.x+1, currparticle.y, particlecolorAlpha);
		fireConvas.setPixel32(currparticle.x-1, currparticle.y, particlecolorAlpha);
		fireConvas.setPixel32(currparticle.x, currparticle.y-1, particlecolorAlpha);
		fireConvas.setPixel32(currparticle.x, currparticle.y+1, particlecolorAlpha);
		//заставляем каждую частичку сдвинуться
		moveParticle(currparticle);
	}
	// и вот самое главное
	// мы применяем трансформацию цвета, в данном случае увеличиваем альфу
	// не так буквально, но наверно вы понимаете о чем я
	// закомменте данную строчку чтоб увидет чтоб было без нее
	fireConvas.colorTransform(fireConvas.rectangle, fade);
};
//функция создания частички
function createParticle(x, y, angle, power) {
	var prt = {};
	//позиция
	prt.x = x;
	prt.y = y;
	//случайный угол падения и сила-скорость
	angle = -angle-Math.PI+Math.PI*Math.random()*2;
	power = -power/2+power+0.5*power*Math.random();
	//вертикальная и горизонтальная скорость
	prt.vx = Math.cos(angle)*power;
	prt.vy = -Math.sin(angle)*power;
	return prt;
}
//движение частички
function moveParticle(particle) {
	// ну а тут считаем новую позицию частички
	particle.x += particle.vx;
	particle.y += particle.vy;
	//если частичка улетела ниже пола то мы ее застовляем отскочить с уменьшенной
	//вертикальной скоростью и случайной горизонтальной на порядок меньше пред.
	if (particle.y>280) {
		particle.y = 280;
		particle.vy = -Math.abs(particle.vy)/2;
		(random(2) == 0) ? particle.vx *= -Math.random() : particle.vx *= Math.random();
	}
	// заставляем частичку падать под действием силы гравитации
	particle.vy += grav;
}

[Andromed]

ну думаю надо толкать сайт к народу... шучу.. просто у меня там доступ есть для меня удобно

[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);
};

[TERRORist]

те капли, которые внизу, странно пихелями помигивают

[Andromed]

почисти кеш посмотри.. вроде исправил

[Beastriker]

у меня лагает. опера 8. третий пень 600. но там и графы не особо...
это наверно fps, а не лаги??

[Andromed]

если ты про феерверк с управлением мышью попробуй запустить локально или вызвать через html, не буду врать не знаю.. если вызвать флешку просто в браузаре, Stage становится равный размеру окна возможны лаги с обработчикм мыши у меня на работе ужасно тормозило хотя дома все ок и там и там maxthon (надстройка для ИЕ рекомендую.. , не чуть не хуже оперы и файрфокса и совместимость почти всегда 100%), в опере и файрфоксе флеш обрабатывается не так как в ИЕ, в ие это просто слой а в них флеш рендерится поверх всего остального.. что не есть хорошо скажем попробуй разместить динамический див над флешкой... и т.д и т.п

[c++]

=Andromed=
Спасибо, конешна, за урок... но...

Это не дождь, это какие-то космические какашки! или сосульки! (в виде какашек)

[Andromed]

Сообщение от c++

=Andromed=
Спасибо, конешна, за урок... но...

Это не дождь, это какие-то космические какашки! или сосульки! (в виде какашек)

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

[Nirth]

Забей на критиков =) если жалуються значит интересуються =) Как говориться, есть люди которые делают а есть которые жалуються.

[модераториал]
запихнул код в тэги [ code ], для более удобной читабильности.