Прелоадер, включащий в себя загрузку внешних данных

MadEx · 22.09.2010, 03:52

Добрый день! Я читал темы про разные прелоадеры, но решения своей задачи не нашел. Может кто сможет подсказать - в каком направлении двигаться?

Задача следующая:
1. Есть флэш ролик, он весит совсем не много - 80Кб.
2. В ролик загружаются внешние данные из xml файлов (т.е. загружаются xml файлы, 3 шт.)
3. В xml файла содержатся параметры-ссылки на изображения, по которым затем в ролик
подргужаются изображения.

Как написать на это всё общий прелоадер, чтобы он показывал процесс загрузки всего контента вместе? Стандартный вариант прелоадера в первом кадре только загружает сам ролик, а файлы потом постепенно подгружаются во время его воспроизведения, соответственно по-очереди.

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

Если у кого-нибудь есть какие-нибудь идеи или наработки - подскажите начинающему флэшеру! Спасибо.

i.o. · 22.09.2010, 04:02

Цитата:

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

Правильно пытаетесь.

f.g.programmer · 22.09.2010, 08:57

В as3 насколько знаю нет возможности узнать размер удалённого файла да начала загрузки. Если ресурсы грузятся из xml, то туда можно и все размеры файлов занести (размеры можно генерировать автоматически локальным или серверным скриптом).
Или просто хранить во флешке общий размер всех ресурсов.

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

MadEx · 23.09.2010, 04:12

Код AS3:

// body - конструктор класса.
public function body() {		
 			// Вешаем функцию прелоадера	
			addEventListener(Event.ENTER_FRAME, preloadMovie);
 
			// События для звука
			s.addEventListener(ProgressEvent.PROGRESS, getBT);
		    s.addEventListener(Event.COMPLETE, soundLoaded);
			s.load(soundPath);
 
			//ErrMsg.text = "Не удалось загрузить изображение";
			ErrMsg.multiline = true;
			ErrMsg.textColor = 0xFFFFFF;
			addChild(ErrMsg);
			// События для ХМЛ
 
			colorsLoader.addEventListener(ProgressEvent.PROGRESS, getBT);
			colorsLoader.addEventListener(ProgressEvent.PROGRESS, getBT);
			colorsLoader.addEventListener(ProgressEvent.PROGRESS, getBT);
 
			colorsLoader.addEventListener(Event.COMPLETE,xmlColLoaded);
			catalogLoader.addEventListener(Event.COMPLETE,xmlCatLoaded);
			seriesLoader.addEventListener(Event.COMPLETE,xmlSerLoaded);
 
 
 
		}		
 
//функция, получающая размер загружаемого файла (для хмл и музыки)
 
		public function getBT(e:ProgressEvent) {
			_bytesTotal += e.target.bytesTotal;
			e.target.removeEventListener(ProgressEvent.PROGRESS, getBT);
		}
 
		public function preloadMovie(e:Event) {
			var percent:Number = 0;
			_bytesLoaded += s.bytesLoaded + catalogLoader.bytesLoaded + seriesLoader.bytesLoaded + colorsLoader.bytesLoaded;
			if (_bytesTotal > 0) {
				percent = Math.floor(_bytesLoaded/_bytesTotal*100);
				(preload as preloader).percent_text.text = percent+"%";
				(preload as preloader).gotoAndStop(percent+1);
 
			} 
			if (_bytesLoaded >= _bytesTotal || _bytesTotal==0) {
				(preload as preloader).percent_text.text = "done";
 
				removeEventListener(Event.ENTER_FRAME, preloadMovie);
				var spec:spectrum = new spectrum(arrCatalog);
				spec.name = "spectrum";
				gotoAndStop(2);
				ErrMsg.text = "\n" + _bytesTotal;
 
				addChild(spec);
			}
			_bytesLoaded -= s.bytesLoaded + catalogLoader.bytesLoaded + seriesLoader.bytesLoaded + colorsLoader.bytesLoaded;
 
		}
// Вот так
		public function preloadMovie(e:Event) {
			var percent:Number = 0;
			_bytesLoaded += s.bytesLoaded + catalogLoader.bytesLoaded + seriesLoader.bytesLoaded + colorsLoader.bytesLoaded;
			if (_bytesTotal > 0) {
				percent = Math.floor(_bytesLoaded/_bytesTotal*100);
				(preload as preloader).percent_text.text = percent+"%";
				(preload as preloader).gotoAndStop(percent+1);
 
			} 
			if (_bytesLoaded >= _bytesTotal || _bytesTotal==0) {
				(preload as preloader).percent_text.text = "done";
 
				removeEventListener(Event.ENTER_FRAME, preloadMovie);
				var spec:spectrum = new spectrum(arrCatalog);
				spec.name = "spectrum";
				gotoAndStop(2);
 
				addChild(spec);
			}
			_bytesLoaded -= s.bytesLoaded + catalogLoader.bytesLoaded + seriesLoader.bytesLoaded + colorsLoader.bytesLoaded;
 
		}
public function imgLoaded(e:Event) {
			_bytesLoaded += (e.target as LoaderInfo).bytesTotal;
		}
		public function imgProgress(e:ProgressEvent) {
			_bytesTotal += e.bytesTotal;
			(e.target as LoaderInfo).removeEventListener(ProgressEvent.PROGRESS,imgProgress);
		}
		// Загрузка картинок из xml
		public function xmlColLoaded(e:Event) {
			colors = XML(colorsLoader.data);
 
			for each(var prop:XML in colors.color) {
				var objCol:Object = new Object();
 
				var colImg:Loader = new Loader(); // лоадер для загрузки картинки спектра
				var colImgUrl:URLRequest = new URLRequest(prop.image.toString()); // urlrequest для картинки спектра
 
				//Создаем евент листенер на конец загрузки картинки, запускаем загрузк
				colImg.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imgProgress);
				colImg.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
 
				colImg.load(colImgUrl);
 
				//Продолжаем добавление информации в массив
				objCol.id = prop.id;
				objCol.image = colImg;
				objCol.items = new Array();
 
				arrCatalog.push(objCol);
				}
			arrCatalog.sortOn("id", Array.NUMERIC);		
		}

(Часть функций я опустил)

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

Так ещё похоже и в разных браузерах по-разному.

Я так понимаю, что я что-то не так делаю при сборе bytesLoaded и bytesTotal со всех подгружаемых элементов.

Как ведет себя флэшка можно посмотреть тут madex-design.ru/kyboe

Добавлено через 28 минут
Причем, похоже, в разных браузерах по-разному.

f.g.programmer · 23.09.2010, 08:56

Довольно сложно читать код с недостаточной информацией и ошибками .
Но думаю дело в

Код AS3:

_bytesLoaded >= _bytesTotal || _bytesTotal==0

это условие может сработать ещё до того, как начало грузиться хоть что-то.

И _bytesTotal не станет мнгновенно общим количеством байт, для этого начать грузиться (отправить первый прогрессивент) должны все файлы.
И так, как у тебя похоже грузится всё одновременно, _bytesTotal вполне может стать реальным только под конец загрузки.

То что иногда это работает вероятно связано с кешированием файлов браузерами.

MadEx · 24.09.2010, 00:26

Да, действительно - непонятный кусок кода и непонятно о чем флэшка, когда она не работает

Флэшка - электронный каталог часов разных цветов. Информация о часах и цветах хранится в xml файлах. Соответственно для каждого из часов есть картинка и для каждого из цветов тоже тоже есть картинка. Все эти картинки должны быть предзагружены, а процесс показан прелоадером.

Все xml и музыка подгружаются одновременно, а картинки по мере прохода xml файла после его загрузки.

Вот код класса body, который привязан к документу.

Код AS3:

package kyboe {
	import flash.display.MovieClip;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.xml.*;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.media.Sound;
	import flash.media.SoundChannel;
	import flash.display.Loader;
	import flash.events.ProgressEvent;
	import flash.display.LoaderInfo;
	import flash.display.Bitmap;
	import flash.text.TextField;
 
	dynamic public class body extends MovieClip{
 
		// Инициализирум массим для хранения всего каталога
		public var arrCatalog:Array = new Array();
 
		// Переменные прелоадреа
		var _bytesTotal:Number = 0;
		var _bytesLoaded:Number = 0;
 
		// Переменные для загрузки xml цветов
		var colors:XML = new XML();
		var colorsUrl:URLRequest = new URLRequest("xml/colors.xml");
		var colorsLoader:URLLoader = new URLLoader(colorsUrl);
 
		// Переменные для загрузки xml каталога 
		var catalog:XML = new XML();
		var catalogUrl:URLRequest = new URLRequest("xml/catalog.xml");
		var catalogLoader:URLLoader = new URLLoader(catalogUrl);
 
		// Переменные для загрузки xml серий
		var series:XML = new XML();
		var seriesUrl:URLRequest = new URLRequest("xml/series.xml");
		var seriesLoader:URLLoader = new URLLoader(seriesUrl);
 
		// Переменные для загрузки музыки
		var s:Sound = new Sound();
		var soundPath:URLRequest = new URLRequest("music.mp3");
        var channel:SoundChannel = new SoundChannel();
 
		// Временное текстовое поле для отладки загрузочника
		var ErrMsg:TextField = new TextField();
 
		public function body() {		
 			// Вешаем функцию прелоадера	
			addEventListener(Event.ENTER_FRAME, preloadMovie);
 
			// События для звука
			s.addEventListener(ProgressEvent.PROGRESS, getBT);
		    s.addEventListener(Event.COMPLETE, soundLoaded);
			s.load(soundPath);
 
			ErrMsg.multiline = true;
			ErrMsg.textColor = 0xFFFFFF;
			addChild(ErrMsg);
 
			// События для ХМЛ
			colorsLoader.addEventListener(ProgressEvent.PROGRESS, getBT);
			colorsLoader.addEventListener(ProgressEvent.PROGRESS, getBT);
			colorsLoader.addEventListener(ProgressEvent.PROGRESS, getBT);
 
			colorsLoader.addEventListener(Event.COMPLETE,xmlColLoaded);
			catalogLoader.addEventListener(Event.COMPLETE,xmlCatLoaded);
			seriesLoader.addEventListener(Event.COMPLETE,xmlSerLoaded);
 
 
		}		
 
		// Вот эта считает общее число байт для загружаемых объектов
		public function getBT(e:ProgressEvent) {
			_bytesTotal += e.target.bytesTotal;
			e.target.removeEventListener(ProgressEvent.PROGRESS, getBT);
		}
 
		// Функция прелоадера.
		public function preloadMovie(e:Event) {
			var percent:Number = 0;
 
			// Прибавляем число загруженых байт с 4 источнико - трёх xml и 1 музыкального файла.
			// А затем счиатем проценты, либо прверяем, что число байт совпало (или по странной
			// случайности убежало за общее число байт
 
			_bytesLoaded += s.bytesLoaded + catalogLoader.bytesLoaded + seriesLoader.bytesLoaded + colorsLoader.bytesLoaded;
			if (_bytesTotal > 0) {
				percent = Math.floor(_bytesLoaded/_bytesTotal*100);
				(preload as preloader).percent_text.text = percent+"%";
				(preload as preloader).gotoAndStop(percent+1);
 
			} 
			if (_bytesLoaded >= _bytesTotal || _bytesTotal==0) {
 
				// Удаляем событие прелоадера
				removeEventListener(Event.ENTER_FRAME, preloadMovie);
 
				// Созадаем мувиклип с использованием всех загруженных из пдф картинок
				var spec:spectrum = new spectrum(arrCatalog);
				spec.name = "spectrum";
 
				// Переходим к сцене 2
				gotoAndStop(2);
 
				// Добавляем созданный мувиклип
				addChild(spec);
			}
 
			// Вычетаем число загруженных байт после подсчета процентов.
			_bytesLoaded -= s.bytesLoaded + catalogLoader.bytesLoaded + seriesLoader.bytesLoaded + colorsLoader.bytesLoaded;
 
		}
 
 
		// Функции воспроизведения и паузы звука:
		public function soundLoaded(e:Event) {
			channel = s.play();
		}
		public function pauseSound():int {
			var pausepos:int = channel.position;
			channel.stop();
			return pausepos;
		}
		public function continueSound(pausepos:int) {
			channel = s.play(pausepos);
		} // Функции воспроизведения и паузы звука;
 
		// Загрузка и добавление кнопок серий
		public function xmlSerLoaded(e:Event) {
			series = XML(seriesLoader.data);
			var zero:Number = 30;
			for each(var prop:XML in series.serie) {
				var serBtn:seriebtn = new seriebtn();
				serBtn.label.text = prop.name.toString();
				serBtn.serId = prop.id;
				serBtn.y = 460;
				serBtn.x = zero;
				zero += 105;
				addChild(serBtn);
			}
 
		}
 
		// Функция добавляет размер картинки после того, как она загрузиалсь
		// К общему числу загруженных байт.
		public function imgLoaded(e:Event) {
			_bytesLoaded += (e.target as LoaderInfo).bytesTotal;
		}
 
		// Функция вычисляет размер картинки и добавляет куда следует )
		public function imgProgress(e:ProgressEvent) {
			_bytesTotal += e.bytesTotal;
			(e.target as LoaderInfo).removeEventListener(ProgressEvent.PROGRESS,imgProgress);
		}
 
		// Загрузка цветов ( Загрузка картинок со спектрами и добавление информации о них в массив)
		public function xmlColLoaded(e:Event) {
			colors = XML(colorsLoader.data);
 
			for each(var prop:XML in colors.color) {
				var objCol:Object = new Object();
 
				var colImg:Loader = new Loader(); // лоадер для загрузки картинки спектра
				var colImgUrl:URLRequest = new URLRequest(prop.image.toString()); // urlrequest для картинки спектра
 
				//Создаем евент листенер на конец загрузки картинки, запускаем загрузку,снимаем флаг
				colImg.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imgProgress);
				colImg.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
 
				colImg.load(colImgUrl);
 
				//Продолжаем добавление информации в массив
				objCol.id = prop.id;
				objCol.image = colImg;
				objCol.items = new Array();
 
				arrCatalog.push(objCol);
				}
			arrCatalog.sortOn("id", Array.NUMERIC);
			// Когда цвета загрузили - грузим каталог
			// catalogLoader.addEventListener(Event.COMPLETE,xmlCatLoaded);
 
 
		}
		// Тоже самое для картинок с часами.
		public function xmlCatLoaded(e:Event) {
 
			catalog = XML(catalogLoader.data); // Загружаем xml в переменную catalog
 
		    // Добавляем часы в массив каталога в зависимости от цвета
			for each(var prop:XML in catalog.watch) {
				var objCat:Object = new Object(); //Объект часов
 
				var colImg:Loader = new Loader(); // лоадер для загрузки картинки спектра
				var colImgUrl:URLRequest = new URLRequest(prop.image.url.toString()); // urlrequest для картинки спектра
 
				//Создаем евент листенер на конец загрузки картинки, запускаем загрузку,снимаем флаг
				colImg.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imgProgress);
				colImg.contentLoaderInfo.addEventListener(Event.COMPLETE, imgLoaded);
 
				colImg.load(colImgUrl);
 
				objCat.id = prop.id;
				objCat.image = colImg;
				objCat.color = prop.color;
				objCat.position = prop.position;
				objCat.serie = prop.series;
 
				arrCatalog[objCat.color-1].items.push(objCat) ;
 
				}
		}
 
 
		// Функции, которые спектр двигают влево и вправо
		public function moveSpecLeft(amount:int) {
			if(getChildByName("spectrum").x <= 642 - getChildByName("spectrum").width ) {
				(getChildByName("leftGrad") as specMover).myTimer.stop();
				return;
			}
			getChildByName("spectrum").x -= amount;
		}
		public function moveSpecRight(amount:int) {
			if(getChildByName("spectrum").x >= 0) {
			    (getChildByName("rightGrad") as specMover).myTimer.stop();
				return;
			}
			getChildByName("spectrum").x += amount;
		}
	}
 
}

Я уже совсем замучался с подсчетом байт и не очень понимаю принципы вызова по событию ProgressEvent.PROGRESS. Очень нужна ваша помощь, коллеги!

Да, при компиляции ошибок нет.

Добавлено через 51 час 20 минут
Кажется разобрался в чем дело. И помог мне обычный trace.

MovieClipы создавались раньше, чем подгружались картинки, это раз. Поэтому иногда после загрузки флэшки не было никаких динамически создаваемых элементов видно.

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