Осваиваем технику создания циклической анимации фона во флеш играх (часть 2)

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

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

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

Переходим к пошаговой инструкции создания циклической анимации путем этого программного метода. Используйте условные границы 2 символов — «право» и «лево» (английские обозначения, соответственно, left и right) — для выбора и обозначения координат, чтобы потом было можно изменять ширину фона для флеш игры, как вы захотите.

— Нарисуйте дерево (эталон) и поместите его в символ под названием tree. Внутри создайте еще кадр и прорисуйте древо снова.

— Далее создайте боковые маркеры (вышеупомянутые символы left и right), которые послужат началом и концом фона флеш игры (можете пометить их яркими цветами, чтобы потом легко найти).

— Затем боковые маркеры и символ tree поместите в новый клип и уже внутри него на новом кадре пропишите такой Actionscript:

<pre class="prettyprint"><code>lev = 0;
speed = 5;
var dist = right._x - left._x;//ширина фона
 
//создаем и модифицируем дубликат
placeTree = function () {
	lev++;
	var d = tree.duplicateMovieClip("t" + lev, lev);
	d._x = right._x + Math.random() * 50; //разброс для правдоподобности
	d._xscale = d._yscale = 50 + Math.random() * 50;//с той же целью
	if(Math.random() < .5) {//случайно выбирается вид дерева
		d.gotoAndStop(1);
	} else {
		d.gotoAndStop(2);
	}
	d.onEnterFrame = function() {
		this._x -= speed;
		if(this._x < left._x){//удаляем, если вышел за пределы слева
			this.removeMovieClip();
		}
	}
	return d;
};
//заполняем экран объектами, чтоб небыло пусто
var i = 20;//подбираем на свое усмотрение
while (i--){
	var d = placeTree();
	d._x = left._x + Math.random() * dist;//случайное начальное положение
}
onEnterFrame = function() {
	if(lev++ % 10 == 0){//выполнять каждый 10-й кадр
		placeTree();
	}
}</code>

— Теперь оцените полученный результат.

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

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

<pre class="prettyprint"><code>speed = 5;
var dist = right._x - left._x;//расстояние между маркерами
 
//функция создает обработанный дубликат символа tree
placeTree = function () {
	lev++;
	var d = tree.duplicateMovieClip("t" + lev, lev);
	d._x = right._x;
	d.ky = Math.random();//коэфициент глубины
	d._y = right._y + d.ky * right._height;//высоту тоже регулируем маркерами
	d._xscale = d._yscale = d.ky * 100;//чем дальше, тем меньше
 
	//усложняем, чтобы получить уникальное число
	//простой Math.random() подозрительно часто повторяется
	d.swapDepths(Math.floor(d._y * 100 + Math.random() * 90));
 
	//случайно выбираем вид дерева
	if(Math.random() < .5) {
		d.gotoAndStop(1);
	} else {
		d.gotoAndStop(2);
	}
 
	//добавляю воздушную перспективу
	var c = new Color(d);
	var n = 60 - d.ky * 60; //подбираем на свое усмотрение
	var ct = {rb:n,gb:n,bb:n};
	c.setTransform(ct);
 
	d.onEnterFrame = function() {
		this._x -= speed / 2 * (1 + this.ky);//от 50% до 100% от скорости
		if(this._x < left._x){
			this.removeMovieClip();
		}
	}
	return d;
};
 
//создаем изначально заросшее поле
var i = 70; //подбираем на свое усмотрение
while (i--){
	var d = placeTree();
	d._x = left._x + Math.random() * dist;
}
 
onEnterFrame = function() {
	if(lev++ % 4 == 0){ //каждый 4-й кадр
		placeTree();
	}
}</code>

В результате получите объекты, которые расположены как бы в перспективе.