Virtualize Interatividade Digital

Carregando imagens externas

No tutorial passado vimos como criar um pré-loader durante o desenvolvimento de um site. O processo de load de imagens é bastante semelhante ao load de arquivos .swf.

Nesse artigo iremos utilizar uma estrutura semelhante ao arquivo “loading.fla” do tutorial passado, estrutura essa apresentada a seguir (o arquivo-fonte está disponivel para download no final do texto):

Vejamos o código:

// Criamos um objeto Loader. A classe Loader nos permite
// realizar o load de conteúdos externos.
var loader = new Loader();

// Associamos o evento COMPLETE a função ExibirImagem. Assim, quando o load for
// terminado a função ExibirSite será invocada.
loader.contentLoaderInfo.addEventListener(Event.COMPLETE            , ExibirImagem);

// Associamos o evento PROGRESS a função ProgressoLoad. Assim, sempre que o progresso do
// load do conteúdo for atualizado, essa função será invocada.
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS    , ProgressoLoad);

// Solicitamos o load do arquivo de imagem.
loader.load(new URLRequest("http://www.imotion.com.br/imagens/data/media/41/paisagem1024x768.jpg"));

// Função ouvinte do evento PROGRESS.
function ProgressoLoad(evt: ProgressEvent)
{
	// Calculamos a percentagem de progresso do load.
	// bytesLoaded é uma propriedade do evento que nos fornece a quantidade de bytes que
	// já foram carregados enquanto bytesTotal nos fornece a quantidade total de bytes
	// do arquivo que está sendo carregado.
	var percentagem     = evt.bytesLoaded / evt.bytesTotal;

	// Definimos a largura da cortina de acordo com a percentagem carregada.
	cortina_mc.scaleX     = percentagem;

	// Definimos o texto da percentagem de progresso.
	percentagem_txt.x   = stage.stageWidth * percentagem;
	percentagem_txt.y   = (stage.stageHeight / 2) - (percentagem_txt.textHeight/2);
	percentagem_txt.text= Math.floor(percentagem * 100) + "%";
}

// Função ouvinte do evento COMPLETE.
function ExibirImagem(evt: Event)
{
	// Armazenamos a imagem em uma variável.
	var imagem = Bitmap(evt.target.content);

	// Suavizamos a imagem (remove pixels).
	imagem.smoothing = true;

	// Adicionamos a imagem ao stage (root).
	addChild(imagem);
}

Neste exemplo introduzimos alguns recursos novos do Action Script 3. Nas linhas 29 e 30 utilizamos o objeto “stage” para acessar as propriedades “stageHeight” e “stageWidth”. Esse objeto está disponível em qualquer projeto Flash, e nos fornece uma referência ao stage. Lembre-se que uma referencia ao stage não é uma referencia ao root, ou seja, o stage não é do tipo MovieClip e sim do tipo Stage.

Através das propriedades “stageWidth” e “stageHeight” temos acesso a largura e altura atual do stage. Isso significa que se redimensionarmos a janela do flash ou do navegador (no caso de um site que ocupe toda a janela do navegador) essa propriedade apresentará o valor atualizado. Nos próximos artigos falaremos mais sobre isso, quando falarmos sobre redimensionamento de janela.

Na linha 38 utilizamos uma nova classe e um recurso da linguagem Action Script chamado “casting”. A nova classe utilizada é Bitmap que é utilizada para representar imagens. Casting é um recurso onde informamos ao Flash que temos certeza sobre um tipo de dados que estamos acessando. Quando realizamos o load de um conteúdo externo, esse pode por exemplo ser uma imagem ou um MovieClip (arquivo .swf). Assim, a propriedade “evt.target.content” assume um tipo genérico, mesmo quando carrega um arquivo .swf ou uma imagem.

Vamos tentar fazer uma anologia. No mundo real podemos ter caminhões ou carros de passeio, mas ambos são automóveis. Automóveis é então uma definição genérica. O mesmo acontece no Flash. Temos MovieClips, Bitmaps, TextFields, mas todos eles são Objects (objetos). Esse é um conceito de orientação a objetos, chamado herança, mas veremos ele mais a frente.

Voltando a linha 38, o que ela faz é armazenar o valor carregado no formato de um Bitmap. Quando usamos “Bitmap(evt.target.content)” estamos dizendo pro flash que temos certeza que “evt.target.content” é um Bitmap e que ele pode nos devolver ele como tal.

Na linha 41 utilizamos a propriedade smoothing para suavizar o desenho da imagem. Tente executar esse exemplo sem essa linha, dê zoom na imagem, depois execute com essa linha, dê zoom novamente e compare.

Por fim adicionamos a imagem ao stage. Lembrando que a primeira vez que executarmos o exemplo o load funcionará. A partir da segunda vez não veremos mais o load, pois a imagem estará em cache. Limpe o cache ou utilize outra imagem.

Nos próximos tutoriais veremos como criar MovieClips dinamicamente. Caso tenha dúvidas, não exite me perguntar!

Clique aqui para baixar o código-fonte desse tutorial

Tags: actionscript 3, carregando imagens, load de imagens, tutorial action script, tutorial actionscript