Depois de tanto ouvir acabei voltando a escrever no blog em português, mas isso acredito que é o que menos importa até mesmo porque estamos ali meio a meio com os americanos em quantidade de acessos no blog mas com muito mais tempo online para os brasileiros, então ponto pra gente.

Bem vou falar hoje de uma classe personalizada que criei para carregamento de imagem. Quando digo que não irá utilizar a classe Loader(), eu tenho alguns argumentos para isso:
- ao usar a classe loader você precisa colocar o conteúdo dela dentro de um sprite ou movieclip para poder manipular.
- ao deletar o loader precisa remover todos os listeners criados para o carregamento
- precisamos criar listeners adicionais para recuperar no inicio do carregamento o tamanho da imagem
- cache – i hate you – quem nunca teve problemas com atualizar o conteúdo e mesmo depois de horas continuar aparecendo a mesma imagem que o cliente implorou para trocar e você ja trocou, mas vai explicar pra ele o que é cache.

Com a classe personalizada, que estende à movieclip, temos uma facilidade muito maior de manuseio porque depois de criado o objeto podemos tratá-lo como um movieclip comum. Para tanto vamos usar eventos personalizados para sabermos quando estiver carregando, carregado, erro ao carregar e dimensões da imagem no inicio do carregamento. Abaixo vou deixar um exemplo mostrando o funcionamento, tudo que é feito nesse exemplo pode ser feito usando a classe nativa Loader() mas de uma forma muito mais fácil.

Então, para começarmos precisamos da classe de carregamento, dos eventos e da unica dependência que é a classe do Anttikupila, JPGSizeExtractor, essa que retira da imagem no carregamento a sua largura e altura – antes do complete. Para fazer download das classes você poder usar o seu programa de SVN e baixar o repositório: http://asdatalibs.googlecode.com/svn/trunk/ ou se preferir acesse o browser de códigos do Google Code clicando aqui.

Agora que temos todas as classes então vamos ao código. Dentro do nosso document class vamos criar a variável e um listener para o botão que temos no palco do Flash, botão esse que será responsável por chamar a imagem que queremos carregar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
 
	import novesfora.loader.LoadFile;
 
	public class DocumentClass extends MovieClip
	{
		public var downImage:MovieClip;
		public var conteudo:MovieClip;
 
		private var lf:LoadFile;
		private var imageURL:String = "http://blog.des84.com/imageSamples/thinkGeek_largeSize.jpg";
 
		public function DocumentClass():void
		{			
			downImage.buttonMode = true;
			downImage.addEventListener(MouseEvent.CLICK, downloadImage);
		}
	}
}

Até esse ponto o que fizemos foi, criamos uma variável chamada lf do tipo LoadFile, que é a nossa classe personalizada e fizemos com que o movieclip ‘downImage’ fosse tratado agora como um botão, e quando for clicado irá executar a função chamada ‘downloadImage’. Vamos à essa função então:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
 
	import novesfora.events.Events;
	import novesfora.loader.LoadFile;
 
	public class DocumentClass extends MovieClip
	{
		public var downImage:MovieClip;
		public var conteudo:MovieClip;
 
		private var lf:LoadFile;
		private var imageURL:String = "http://blog.des84.com/imageSamples/thinkGeek_largeSize.jpg";
 
		public function DocumentClass():void
		{			
			downImage.buttonMode = true;
			downImage.addEventListener(MouseEvent.CLICK, downloadImage);
		}
 
		private function downloadImage(e:MouseEvent):void
		{
			lf = new LoadFile(imageURL,true);
			lf.addEventListener(Events.COMPLETE, 	showFull);
			lf.addEventListener(Events.IOError, 	showError);
			lf.addEventListener(Events.PROGRESS, 	showProgress);
			lf.addEventListener(Events.START, 		showStart);
		}
	}
}

Aqui temos que o lf foi criado como um novo LoadFile, a sintaxe dessa classe recebe no seu document class dois valores como podemos ver, o primeiro do tipo String vai ser o endereço da imagem a ser carregada, que seria colocada dentro do URLRequest() caso estivéssemos utilizando a forma convencional de carregar um arquivo. O segundo valor do tipo Boolean define se o conteúdo carregado irá ou não receber o smooth para o bitmap, funcionalidade muito interessante quando tratamos de imagens que irão ser esticadas como quando utilizamos imagens para o background do site, por default esse valor é false para economizar processamento.

Abaixo então temos os eventos personalizados, Events(), para isso precisamos importar a classe de eventos como mostra 06 do código. Então temos, na sequência, um evento para o final do carregamento do arquivo, para erro ao carregar, progressão ou loading e para o inicio do carregamento, esse último para recebermos as dimensões do arquivo. Na frente de cada evento o nome da função que cada um irá executar. Então finalizando:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
 
	import novesfora.events.Events;
	import novesfora.loader.LoadFile;
 
	public class DocumentClass extends MovieClip
	{
		public var downImage:MovieClip;
		public var conteudo:MovieClip;
 
		private var lf:LoadFile;
		private var imageURL:String = "http://blog.des84.com/imageSamples/thinkGeek_largeSize.jpg";
 
		public function DocumentClass():void
		{			
			downImage.buttonMode = true;
			downImage.addEventListener(MouseEvent.CLICK, downloadImage);
		}
 
		private function downloadImage(e:MouseEvent):void
		{
			lf = new LoadFile(imageURL,true);
			lf.addEventListener(Events.COMPLETE, 	showFull);
			lf.addEventListener(Events.IOError, 	showError);
			lf.addEventListener(Events.PROGRESS, 	showProgress);
			lf.addEventListener(Events.START, 		showStart);
		}
 
		private function showFull(e:Events):void
		{
			conteudo.addChild(lf);
		}
 
		private function showError(e:Events):void
		{
			trace("Error on load Image");
		}
 
		private function showProgress(e:Events):void
		{
			trace("Total em KB é" + e.obj.TotalBytes + " kb" + " e o percentual carregado é: " + e.obj.PercentLoaded + " %");
		}
 
		private function showStart(e:Events):void
		{
			trace("Largura: " + e.obj.width + " / Altura: " + e.obj.height);
		}
	}
}

No final então temos as funções executadas em cada momento:
A função showFull() irá adicionar o objeto lf do tipo LoadFile, que é a nossa imagem declarada pela variável imageURL, assim nesse momento, irá aparecer a imagem carregada.
A função showError() irá ser executada no momento que o arquivo chamado não for encontrado, ou não existe ou com o endereço da imagem declarado errado.
A terceira função é a showProgress(), essa será executada o tempo todo enquanto o arquivo estiver sendo carregado, nela podemos receber através de um objeto o percentual carregado, total em kb do arquivo requisitado e total carregado. Se observarmos essa função no código acima podemos ver que ao retornar ao evento progress podemos chamar os valores acima citados, como o percentual carregado, da seguinte forma: e.obj.PercentLoaded, sendo que ‘e’ é o Events, obj é nosso Objeto de valores e PercentLoaded é o valor em % carregado.
A última função é executada no inicio do carregamento do arquivo, showStart() e irá retornar a largura e altura da imagem assim como foi feito no Progress, so que o valor agora do objeto é width para largura e height para altura da imagem.

Valeu pelo tempo lendo o post e um grande abraço. Você pode fazer o download do exemplo acima no link abaixo.
Download: Carregando imagens em AS3 sem Loader() (265)