Загрузка изображений. Грузит только последнее. - Страница 3

Wolsh · 31.07.2008, 20:30

Рад что всё получилось. Однако жаль выбросить потраченный час, поэтому я всеже представлю свой вариант.

Код:

Stage.scaleMode = "noScale";
Stage.align = "TL";
import flash.display.BitmapData;
////
var cols:Number = 6;
var pics:Number = 30;
var vspace:Number = 10;
var hspace:Number = 10;
var img_height:Number = 70;
var img_width:Number = 70;
////
var bitmap:BitmapData = new BitmapData(img_width, img_height, false, 0);
var gallery:MovieClip = _root.createEmptyMovieClip("gallery", 10);
var float_pic:MovieClip = _root.createEmptyMovieClip("float_pic", 20);
var float_bmp:BitmapData = bitmap.clone();
float_pic.attachBitmap(float_bmp, 0, "auto", true);
float_pic._alpha = 50;
gallery._y = 200;
////
var current:MovieClip;
var listener:Object = new Object();
var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(listener);
////
listener.onLoadInit = function(mc){
    var bmp:BitmapData = bitmap.clone();
    var container:MovieClip = mc._parent;
    container.attachBitmap(bmp, 10, "auto", true);
    bmp.draw(mc);
    mc.removeMovieClip();
    var id:Number = container.id;
    var horder:Number = (id+cols)%cols;
    horder = horder==0 ? cols-1 : horder-1
    var vorder:Number = Math.ceil(id/cols)-1;
    container._x = horder*img_width + hspace*horder;
    container._y = vorder*img_height + vspace*vorder;
    container.onRelease = function  () {
        float_bmp.draw(container);
        current._alpha = 100;
        container._alpha = 20;
        current = container;
        trace("Загружаем большую картинку с адреса "+container.big_url);
    }

    if (container.id < pics) {
        loadPic(container.id+1);
    } else {
        loader.removeListener(listener);
        delete listener;
        delete loader;
        delete bitmap;
    }
    trace("изображение "+container.id+"\nряд "+(vorder+1)+"\nстолбец "+(horder+1)+"\n")
}
////
function loadPic (counter:Number) {
    var img_url:String = "images/"+counter+".jpg";
    var big_url:String = "images/big/"+counter+".jpg";
    var container:MovieClip = gallery.createEmptyMovieClip("p"+counter, counter);
    var mc:MovieClip = container.createEmptyMovieClip("_mc",0);
    container.id = counter;
    container.big_url = big_url;
    loader.loadClip(img_url, mc);
}
////
loadPic(1);

Alex_beginner · 03.08.2008, 11:36

Джонатан! Прошу меня извинить за задержку в предоставлении обещанного мной приложения (не смог выйдти на связь по личным причинам). Если тема еще актуальна, хочу аддитивно к вариантам коллег представить свой вариант реализации Вашего проекта.

Код:

//////////////////////////////////////////////////////////////////////////////////////////////////
//   Приложение, формирующее галлерею с превью-картинками и полномасшатабный просмотр			
//	 загруженных фотографий.																	
//																								
//   Основные преимущества:																		 			
//   1. Независимые друг от друга загрузки изображений (параллельная загрузка), в связи с чем,	
//      загрузка осуществляется быстро;															
//   2. При параллельной загрузке изображений вывод их превью-аналогов в превью-область			
//      производится последовательно слева-направо и сверху вниз, а не хаотично,				 
//		в зависимости от размера изображения;													
//	 3. Вы имеете возможность работать с уже загруженными изображениями пока другие грузятся;	
//   4. Размер превью-изображений и полномасштабных изображений не зависит от геометрических	 
//      размеров загружаемых изображений, т.е. изображения любых размеров "втиснутся" в области	
//      просмотра;																				
//   5. Легкость настройки и управления;														
//   6. Относительная простота и структурированность кода. Это улучшает его читабельность и		
//      облегчает работу с кодом по его оптимизации и рефакторингу. 							
//																								
//																								
//									Created by Alex_beginner.									 
//						 		 All rights not reserved, 2008.									
//																								
//////////////////////////////////////////////////////////////////////////////////////////////////

import flash.display.BitmapData;
import flash.geom.Matrix;

//************************************************************************************************
//	НАСТРОЙКИ
//************************************************************************************************
var N:Number = 30;//количество загружаемых изображений
var imgCounter:Number = 1;//счетчик загруженных изображений
var photoWidth:Number = 250;//ширина полномасштабной области просмотра
var photoHeight:Number = 240;//высота полномасштабной области просмотра
var photoX:Number = 350;//координата X левого-верхнего угла полномасштабной области просмотра
var photoY:Number = 200;//координата Y левого-верхнего угла полномасштабной области просмотра
var prevWidth:Number = 40;//ширина превью-области
var prevHeight:Number = 40;//высота превью-области
var prevVCount:Number = 5;//количество изображений в превью-области по вертикали
var prevHCount:Number = 6;//количество изображений в превью-области по горизонтали
var LV:Number = 10;//расстояние между превью-изображеними по вертикали
var LH:Number = 10;//расстояние между превью-изображеними по горизонтали
var prevX:Number = 10;//координата X левого-верхнего угла прьевью-области
var prevY:Number = 200;//координата Y левого-верхнего угла превью-области
//************************************************************************************************

//************************************************************************************************
//	ВСПОМОГАТЕЛЬНЫЕ ПЕРЕМЕННЫЕ
//************************************************************************************************
var lastClipName = null;//имя клипа по которому последний раз был произведен клик мышью
var lastMCIndex = 0;//последний, проверенный на загруженность, клип
//************************************************************************************************

this.createEmptyMovieClip("photoMC", this.getNextHighestDepth());//создаем полномасштабную область просомтра
var mcl:MovieClipLoader = new MovieClipLoader();//создаем загрузчик
var mclL:Object = new Object();//создаем слушатель событий загрузчика
mcl.addListener(mclL);//назначаем слушателем событий загрузчика объект mclL

//процедура, определяющая основные характеристики текущего загруженного клипа, включая
//его местоположение в превью-области его габариты, сохранение характеристик загруженного 
//изображения в свойствах клипа, последовательную визуализацию загруженных клипов, 
//уничтожение выделенных ресурсов.
mclL.onLoadInit = function(target:MovieClip):Void
{
	target.realWidth = target._width;
	target.realHeight = target._height;
	target.flagLoaded = true;
	target._width = prevWidth;
	target._height = prevHeight;
	indexMC = Number(target._name);
	target._x = (indexMC-Math.floor(indexMC/prevHCount)*prevHCount)*(prevWidth+LV)+prevX;
	target._y = Math.floor(indexMC/prevHCount)*(prevHeight+LH)+prevY;
	target._visible = false;
	orderedVisualization(target);
	target.onPress = renderBMP;
	if (imgCounter==N)
	{
		mcl.removeListener(mclL);
		delete mclL;
		delete mcl;
	}
	imgCounter++;
}

//процедура, выполняющая рендеринг загруженного клипа в полномасштабную область посмотра,
//клипа на котором был произведен клик мышью
function renderBMP():Void
{
		var photoBMP:BitmapData = new BitmapData(this.realWidth, this.realHeight, false, 0x000000);
		photoMC.attachBitmap(photoBMP,10,"auto",true);
		photoMC._x = photoX;
		photoMC._y = photoY;
		photoMC._width = photoWidth;
		photoMC._height = photoHeight;
		photoBMP.draw(this,new Matrix(),null,"normal",null,true);
		if (lastClipName!=null)
		{
			lastClipName._alpha = 100;
		}
		this._alpha = 50;
		lastClipName = this;
}

//процедура последовательной визуализации загруженных клипов
function orderedVisualization(target):Void
{
	for (var i:Number=lastMCIndex; i<=N-1; i++)
	{
		if (target._parent[i].flagLoaded)
		{
			if (!target._parent[i]._visible)
			{
				target._parent[i]._visible = true;
			}
		}else
		{
			lastIndex = i;
			break;
		}
	}
}


//главная процедура создания превью-клипов и инициализации загрузки в них изображений
function loadImg():Void
{
	for (var i:Number = 0; i<=N-1; i++)
	{
		this.createEmptyMovieClip(i, this.getNextHighestDepth());
		this[i].flagLoaded = false;
		mcl.loadClip("photos/"+(i+1)+".jpg",this[i]);
	}
}

loadImg();//вызов главной процедуры

Его преимущества:

1. Независимые друг от друга загрузки изображений (параллельная загрузка), в связи с чем, загрузка осуществляется быстро;
2. Несмотря на параллельную загрузку изображений вывод их превью-аналогов в превью-область производится последовательно слева-направо и сверху вниз, а не хаотично, в зависимости от размера изображения;
3. Вы имеете возможность работать с уже загруженными изображениями пока другие грузятся;
4. Размер превью-изображений и полномасштабных изображений не зависит от геометрических размеров загружаемых изображений, т.е. изображения любых размеров "втиснутся" в области просмотра;
5. Легкость настройки и управления;
6. Относительная простота и структурированность кода. Это улучшает его читабельность и облегчает работу с кодом по его оптимизации и рефакторингу.

Недостатки:

1. Код носит базовый, не законченный характер, т.е. отсутствует код обуславливающий дизайнерские аспекты, такие как твиннинг, обрамление превью-изображений при клике на них, итд.
2. Визуализация превью-изображений хоть и происходит последовательно, но рывками в зависимости от размеров изображений.

Обязательно тестите приложение в режиме моделирования загрузки - увидите в чем разница между этим приложением и обычным загрузчиком.

Надеюсь код поможет. Удачи!