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

17.06.2008, автор Stormit, рубрики: ActionScript, Анимация, Игровые баннеры

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

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

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

  1. Создать клип (это просто контейнер), например назовем его bubbles
  2. Внутри клипа bubbles создать пузырек dot
  3. Слоем выше в кадре прописать код: 
    lev = 0;
speedY = 5;
dot._visible = false;//скрываем оригинал
placeDot = function() {
	lev++;
	d = dot.duplicateMovieClip("d" + lev, lev);
	d._x = Math.random()* 40 - 20;//случайное положение - разброс
	d._y = Math.random()* 16 - 8;
	d._xscale = d._yscale = 50 + Math.random() * 50;
	d.onEnterFrame = function() {
		this._y -= speedY;
		this._xscale = this._yscale *= .96;
		if(this._xscale < 2) {
			this.removeMovieClip();
		}
	}
}
onEnterFrame = placeDot;

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

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

dot._visible = false;
lev = 0;
placeDot = function() {
	lev++;
	var d = dot.duplicateMovieClip("b" + lev, lev);
	d.speed = 1 + Math.random() * .5;//скорость
	d.a = 1 + Math.random() * 1;//амплитуда качания по _x
	d.s = .001 + Math.random() * .08;//скорость качания
	d.t = Math.random() * 10;//случайное начальное положение для синуса
	d.y0 = d._y += Math.random() * 2 - 1;//разброс по _y
	d.x0 = d._x += Math.random() * 2 - 1;//разброс по _x
	d._xscale = d._yscale = 50 + Math.random() * 50;//случайный размер
	d.onEnterFrame = function() {
		this._y -= this.speed;
		this.a += this.s;//амплитуда немного увеличивается со временем
		this._x = this.x0 + this.a * Math.sin(this.t += this.s);
		this._xscale = this._yscale *= .99;//а размер немного уменьшается (хуже видно)
		if(this._xscale < 2) {
			this.removeMovieClip();
		}
	}
}
onEnterFrame = placeDot;

Еще таким способом можно сделать эффект распыления предмета на частицы (допустим, инопланетяне так похищают) . А какие способы придумаете вы? Что еще можно показать такими пузырьками?

Интересно на 90%

Хотите почитать позже? Добавьте в социальные сети или закладки

(10) Хитрых на тему «Пузырьковый метод»

  1. Мария 18.06.2008 в 08:37

    Вот спасибо огромное! Как раз сейчас делаю эффект закипания воды в колбе - такой код - то что нужно!

  2. zulin 18.06.2008 в 11:47

    Еще для пущего реализма можно немного ускорить повление пузырьков в начале. Они как-бы “вылупливаются” немного быстрее, а потом скорость чуть падает и дальше они плывут ровнее.
    Типа так: http://in-tag.com/exchange/klikteam/banner_200×600.html

  3. unodj 19.06.2008 в 13:33

    кто может объяснить почему клип “типа так” притормаживает периодически?

  4. Stormit 19.06.2008 в 21:33

    Не понял, какой клип?

  5. unodj 20.06.2008 в 00:02

    у предыдущего оратора :)
    “Типа так: http://in-tag.com/exchange/klikteam/banner_200×600.html”

  6. Stormit 20.06.2008 в 00:13

    У меня такое бывало когда класс Tween использовал (в момент инициализации).
    Может тут текст так же движется

  7. mif2000 20.06.2008 в 07:38

    Простите, что не по этой теме комментарий.

    А не знаете ли существует в сети какой-нибудь приличный архив готовых анимаций (в gif, fla или в другом пригодном для обработки формате), чтобы можно было по ключевым словам подобрать подходящую? Как это реализовано с иллюстрациями\фотографиями и музыкой\звуками.
    Просто, мне кажется, гораздо проще на основе уже готовой анимации обрисовать своего персонажа или анимировать некий предмет.

  8. Бизнес портал 20.06.2008 в 19:28

    Спасибо большое, очень полезный прием. Теперь буду делать массовые похищения инопланетянами и утопления =).

  9. Видео блог Ножи 26.06.2008 в 22:17

    Прием не то слово полезный, обязательно попробую его использовать в своем новом проекте. Еще раз респект

  10. max 16.08.2008 в 13:56

    Народ объясните подробней как это делаеться
    1. Создать документ - в нем муви клип bubbles - внутрь клипа вставить график симбол dot
    2. Потом создать еще один слой и в 1 кадре вставить код?

Оставить комментарий