Создание прелоадера.

В этом уроке мы рассмотрим создание прелоадера для класса Loader, научимся его визуализировать и выводить основные данные.

Прелоадер (preloader) — это инструмент для отображения загрузки данных приложения, в нашем случае Flash-приложения или игры. Раньше мы его не использовали, но он необычайно важен для создания больших проектов, например профессиональных Flash-игр. Вы наверное много раз замечали, что после запуска Flash-игры запускается полоса загрузки, после которой уже начинается меню и игра. Эта полоса есть ничто иное, как прелоадер для игры.
Зачем он нужен? Например, игра использует большое количество достаточно весомых внешних (загрузка картинок из Интернета) или внутренних (из библиотеки) данных. Представьте, если после запуска игры некоторое время будет виден пустой экран, и будет казаться что ничего не работает, а на самом деле игра в этот момент усердно грузит данные. Во избежание этого необходимо создавать прелоадеры, показывающие процесс загрузки данных.

В этом уроке мы рассмотрим создание прелоадера для загрузки внешних данных.

Создадим документ, как обычно — *.as и *.fla файлы с одинаковым названием. Это название будет определять базовый, или главный, класс документа. Например, Preloader. Сохраним в одну папку и поместим в поле Document class Preloader как базовый класс приложения.
Редактируем базовый класс.
1. Импортируем основные пакеты:

package {
	import flash.display.*;
	import flash.events.*;
        import flash.text.*;
	import flash.net.*;

А именно: пакет flash.display, содержащий классы отображения экранных объектов, flash.events, который содержит основные события, пакет flash.text для работы с текстом, и пакет flash.net — инструменты работы с сетевыми данными.
2. Создаем класс и определяем основные переменные.

public class Preloader extends Sprite {
	private var progressText:TextField;
	private var img:Loader;

3. Определяем метод-конструктор.

public function Preloader():void {
	createTextField();
	createPreloader();
}

Метод-конструктор (как мы помним метод конструктор определяется атрибутом public, имеет то же имя, что и класс и выполняется в первую очередь) мы "разобьем" на две части: создание текстового поля, и создание самого прелоадера.
4. Создание текстового поля.

private function createTextField():void {
	progressText = new TextField();
	progressText.x = 50;
	progressText.y = 50;
        progressText.width = 900;
	addChild(progressText);
}

Устанавливаем координаты на сцене и ширину текстового поля до границы рабочего пространства.
5. Создаем прелоадер. Собственно, самое важное в этом уроке.
Для начала, нам нужно выбрать, что загружать. Для наглядности, я взял вот эту картинку размером чуть больше 500 Кбайт. С классом Loader мы уже знакомились ранее.

Новое здесь — это событие класса LoaderInfo. Класс LoaderInfo непосредственно относится к классу Loader и хранит всю его информацию: источник, размер, разрешение (данные — картинка).
Чтобы обратиться к классу LoaderInfo соответствующего экземпляра Loader img, нужно вызвать свойство contentLoaderInfo, а затем назначать на него соответствующее событие. Здесь мы используем событие progress, которое отправляется в ходе загрузки данных. Итак, в функции для этого прослушивателя мы обновляем ранее добавленное текстовое поле с помощью свойств класса bytesLoaded (возвращает количество уже загруженных данных в байтах) и bytesTotal (возвращает количество необходимых данных для загрузки в байтах). Для удобства переводим их в килобайты и округляем с помощью приведения к типу int.

private function createPreloader():void {
	img = new Loader();
	img.load(new URLRequest('http://cyber-page.ru/wp-content/uploads/2011/04/
        Flash-in-Powerpoint.png'));
        img.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadListener);
	function loadListener(e:ProgressEvent):void {
		progressText.text = "Загружено: " + int(e.bytesLoaded/1024) + "/" +
                int(e.bytesTotal/1024) + " Кбайт";
	}
	addChildAt(img,0);
}

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

А теперь добавим простой визуализатор хода загрузки. Создадим полосу прогресса, которая будет обновляться каждый раз при отправлении события progress.
Код:

package {
	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import flash.net.*;

	public class Preloader extends Sprite {
		private var line:Sprite;
		private var img:Loader;
		private var progressText:TextField;

		public function Preloader():void {
			createTextField();
			createLine(); //метод создает полоску
			createPreloader();
		}

		private function createLine():void {
			var backLine:Sprite = new Sprite();
			backLine.graphics.beginFill(0xFFFFFF);
			backLine.graphics.lineStyle(2);
			backLine.graphics.drawRect(50, 50, 156, 36);
			backLine.graphics.endFill();
			addChild(backLine);

			line = new Sprite();
			line.graphics.beginFill(0x666666);
			line.graphics.lineStyle();
			line.graphics.drawRect(53, 53, 1, 30);
			line.graphics.endFill();
			addChild(line);
		}

		private function createTextField():void {
			progressText = new TextField();
			progressText.x = 50;
			progressText.y = 100;
			progressText.selectable = false;
			progressText.width = 900;
			addChild(progressText);
		}

		private function createPreloader():void {
			img = new Loader();
			img.load(new URLRequest('http://cyber-page.ru/wp-content/uploads/2011/04/
                        Flash-in-Powerpoint.png'));

			img.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadListener);
			function loadListener(e:ProgressEvent):void {
				progressText.text = "Загружено: " + int(e.bytesLoaded/1024) + "/" +
                                int(e.bytesTotal/1024) + " Кбайт";
				removeChild(line);
				updateLine(int(e.bytesLoaded/3450));
			}
			addChildAt(img,0);
		}
		private function updateLine(newWidth:int):void {
			line = new Sprite();
			line.graphics.beginFill(0x666666);
			line.graphics.lineStyle();
			line.graphics.drawRect(53, 53, newWidth, 30);
			line.graphics.endFill();
			addChild(line);
		}
	}
}

Как видно, мы добавили новый объект в список глобальных переменных line, который является полосой загрузки. Также появился метод, создающий рамку и саму полоску (ее начальная ширина — 1px). В прослушивателе мы добавили вызов метода updateLine, который будет пересоздавать полоску с новой шириной, указанной в параметре. С каждый вызовом функции loadListener() свойство bytesLoaded будет возвращать различные результаты, поэтому с вызовом созданной функции updateLine() ширина полоски будет увеличиваться в зависимости от уже загруженных данных. Почему именно int(e.bytesLoaded/3450) — это отношение размера загружаемой картинки к максимальной ширине полоски, округленное до целых.
Сохраним, запустим. Видим, что с каждым обновлением полоска увеличивается на определенный размер.

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