Carregar múltiplas imagens com actionscript 3

Neste tutorial vamos aprender como colocar várias imagens usando actionscript 3 e xml. Vamos ver como podemos fazer isso!

Por | @oficinadanet Softwares

Neste tutorial vamos aprender como colocar várias imagens usando actionscript 3 e xml. Vamos ver como podemos fazer isso!

1. Estabelecer a estrutura do projeto.
Faça a mesma hierarquia de pastas como na imagem abaixo:

Carregar múltiplas imagens com actionscript 3

ro/sorin/utils/ contém a classe TextLoader, vamos usar essa classe para carregar o arquivo xml. Se você quiser você pode baixá-lo TextLoader.as , coloque o arquivo dentro da pasta utils.Aconselho que baixe para ficar mais organizado, e você pode usa-la como uma classe externa, deixando seu arquivo mais rápido. As outras pastas são auto-explicativos.


2. Criando a estrutura do arquivo xml. O arquivo xml é assim:


 
 
 
 
 
</images>


Cada tag de imagem contém os dados para uma imagem. A url é um atributo da tag de imagem e contém o caminho para o arquivo de imagem. Encontrar no seu disco rígido ou web 5 imagens, renomeie-os para img_01.jpg, img_02.jpg, img_03.jpg, img_04.jpg, img_05.jpg e colocá-los dentro da pasta imagens. As dimensões das imagens não importa, não vamos construir algo olho captura, vamos nos concentrar na técnica, minhas imagens são 500x375.Criar um arquivo xml similares e salvá-lo como images.xml ativos dentro da pasta / xml.


3. Criar um novo arquivo. Fla.
Criar um novo arquivo, vá para File> New (Ctrl + N), selecione ActionScript 3.0 e clique em OK. Salvá-lo como loadMultipleImages.fla dentro da pasta loadMultipleImages. No painel de propriedades mudar o tamanho do palco para 500x375. Insira uma nova camada (Insert> Timeline> Layer), o nome do top um preloader ações e os outros.

Selecione a camada preloader, a partir do painel Ferramentas de escolher a ferramenta de texto, no painel de propriedades defina o tipo de texto dinâmico e no Parágrafo sub-painel para a propriedade Format escolheu Alinhar ao centro. No palco, clique e arraste para fazer um campo de texto com a mesma largura que o estágio (375), o centro do campo de texto no palco horizontal e vertical.

Certifique-se que o texto é selecionado e apresentado no painel de propriedades defina o seu nome de instância para preloader. Para manter a aparência do texto destina preloader (nosso preloader é baseado em texto) em máquinas de usuários que deve incorporar a fonte utilizada. Para fazer isso com o campo de texto selecionado vá para o painel Propriedades em caráter sub-painel e clique no botão incorporar como na imagem abaixo.
Carregar múltiplas imagens com actionscript 3


Porque o nosso texto preloader irá conter maiúsculas, minúsculas, numerais e pontuação vamos escolher apenas aqueles do Personagem varia opções (veja imagem abaixo). Não é recomendado para incorporar todos os caracteres de uma fonte, porque isso irá aumentar o tamanho do swf, tentar incorporar apenas os caracteres que o campo de texto precisa mostrar.
Carregar múltiplas imagens com actionscript 3


4. O código.
Selecione o quadro 1 da camada de ações hit F9 para abrir o painel de ActionScript e cole o seguinte código:
import ro.sorin.utils.TextLoader;
//handles the load of the xml file
var xmlLoader:TextLoader;
var xml:XML;
var xmlList:XMLList;
var urlList:Array = [];
//keeps track of the number of images loaded
var counter:uint = 0;
var urlRequest:URLRequest;
var loader:Loader = new Loader();
var bitmap:Bitmap;
var img:Sprite;
var totalImages:uint;
var imgList:Array = [];

function init():void{
 xmlLoader = new TextLoader("assets/xml/images.xml");
 xmlLoader.addEventListener(Event.COMPLETE, onComplete, false, 0, true);
}

function onComplete(event:Event):void{
 xmlLoader.removeEventListener(Event.COMPLETE, onComplete)
 xml = XML(event.target.content);
 xmlList = xml.children();
 xmlLoader = null;
 for(var i:int=0;i


5. Explicação código.
Vamos olhar para o fluxo do código. As execuções de código começa por chamar a função init (), a bruxa começa o carregamento do arquivo xml, quando o processo de carregamento é concluído o onComplete () função é chamada. Dentro das funções onComplete () extraímos os caminhos para as imagens do xml carregado, adicioná-los à matriz urlList e começar a carga da primeira imagem, chamando o loadImage () função.

Dentro do loadImage () função que inicializa a carga da imagem (loader.load ()), adicionar o evento Progress (isso irá nos informar sobre o quanto da nossa imagem é carregada) e adicionar o evento completo (isso vai nos dizer quando a imagem é carregada completa).

função onProgress () é chamado sempre que o evento Progress é disparado, quando isso aconteceu, actualizamos as nossas preloader.

Quando a imagem é carregada completou o evento é acionado completa e loaderOnComplete () função é chamada. Dentro dessa função, depois de adicionar a imagem à matriz ImgList, aumentar o contador por um, vamos verificar para ver se o processo de carregamento deve continuar (há mais imagens para carregar ou este foi o último). Se o contador for menor ou igual com o totalImages-1 há imagens para carregar e que chamamos de loadImage () função, se o contador é maior de todas as imagens são carregadas e os que chamamos de Mostrar imagens () função. O papel dos Mostrar imagens () função é fazer com que as imagens visíveis.


6. Testando o código.
Se você teve a paciência de o tutorial fallow agora é hora de testar o código, pressione Ctrl + Enter para testá-lo. Porque estamos trabalhando localmente a carga das imagens acontece muito rápido e é possível não ver o progresso do carregamento, sorte do Flash IDE oferece algumas recurso interessante que nos permite ver como o nosso filme vai se comportar em diferentes conexões velocidade.Você pode acessar esse recurso swf a partir do menu, vá em Exibir> Configurações de Download, escolha uma velocidade de conexão e pressione Ctrl + Enter para simular o download.
Arquivo do projeto para download

Mais sobre: AS3 actionscript carregar
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo
  • ASSINE NOSSA NEWSLETTER

    As melhores publicações no
    seu e-mail

  • Preencha para confirmar