fbpx

UILoader Imagens Flash

formatic-logo-150
by
28 Agosto, 2011
in Flash
Sem comentários
1061
Este tutorial visa iniciar o formando/aluno a conhecer a linguagem de programação AS 3.0 aplicada na ferramenta Flash CS4, e simultaneamente utilizar um componente do Flash CS4 – Uiloader.
Nesse tutorial, o formando/aluno vai aprender a utilizar o componente Uiloader, que será aplicado a imagens.
Comece por abrir a aplicação Flash CS4, de acordo com a seguinte imagem e, atribua-lhe um nome. No caso deste tutorial, chamei “Uiloader”.

Na abertura do projecto é necessário definir o ficheiro (Flash File ActionScript 3.0), uma vez que vamos trabalhar em AS 3.0.
A organização do nosso projecto em layer é fundamental, pois permite uma leitura dos conteúdos, possibilitando intervenções precisas aos conteúdos.
No presente tutorial, criou-se 4 layers. Uma destinada aos botões, outra destinada a texto, outra ao Uiloader e a última à programação (AS 3.0).
Nesta fase, é importante que o Formando/Aluno tenha consciência da necessidade de possuir uma pasta onde se deve encontra todos os objectos, incluindo o projecto. Nesta pasta devem constar as imagens devidamente tratadas e identificadas, de modo a serem reconhecidas pela programação. No nosso caso atribuímos os seguintes nomes “LouracoAA”; “LouracoBB”; “LouracoCC” e “LouracoDD”.
Definido o nosso ambiente de trabalho, estamos em condições de iniciar o nosso trabalho. Assim, começamos por clicar no icon da barra de ferramentas lateral (T). Quando se clica neste local, as propriedades do texto ficam visíveis para o formando/aluno as poder utilizar.
Cria-se um texto na Stage e seguidamente. Pode-se ou não escrever texto neste campo. Se escrever alguma coisa, é para definir o tamanho e a cor. Depois deve-se apagar, uma vez que será neste campo que através da programação AS 3.0 ira aparecer a carregamento das imagens.
Quando nós clicamos no objecto (texto) surgem as propriedades do objecto. Se clicar na Stage, surgem as suas propriedades.
Assim, para poder trabalhar no objecto, é necessário que atribua um nome ao objecto. Observe as indicações da figura anterior.
NOTA: a atribuição de nomes aos objectos, obedece a algumas regras. Não deve utilizar palavras separadas, assentos, e caracteres… o nome que utilizei foi; “TextoPorcento”.
A atribuição de um nome ao objecto faz-se de acordo com a imagem anterior, clicando em propriedades, e de seguida em <Instance Name>.
Ao clicar na <Instance Name> altere o conteúdo para “TextoPorcento”. E nesta altura estamos em condições de fazer as alterações ao nosso objecto “TextoPorcento” através da programação.
O nosso próximo passo é trazer o nosso componente Uiloader para a stage e definir a sua posição, nome e tamanho. Consulte das duas imagens seguintes.
Atribuímos ao objecto Uiloader o nome de “FormacticLoader.
Seguidamente, é necessário colocar quatro botões. Para isso, vamos a componentes e arrastamos para a stage o número de botões necessários a nosso tutorial.
Vamos para a layer AS 3.0 e clicamos em Actions no separador Window e de seguida em Actions, ou utilizamos o atalho (F9).
Após fazer F9 o usar o separador Window – Actions, abre-se um painel. É neste painel que vamos inserir o nosso código As 3.0 de acordo com a imagem seguinte:
No painel de inserção de código, na primeira linha, digitamos o seguinte:
var FormacticURL:String = “LouracoAA.jpg“;
var ErreElle:URLRequest = new URLRequest(FormacticURL);
FormacticLoader.scaleContent = true;
FormacticLoader.load(ErreElle);
FormacticLoader.addEventListener(Event.COMPLETE, carregamento100);
FormacticLoader.addEventListener(ProgressEvent.PROGRESS, EmCarregamento);
function EmCarregamento (event:ProgressEvent):void{
TextoPorcento.text = Math.round(event.target.percentLoaded) + “%”;
}
function carregamento100 (event:Event):void{
TextoPorcento.text = “”;
}
//////////////////////////////////////////////////////////////////
botaoA.label = “Louraco A”;
botaoB.label = “Louraco B”;
botaoC.label = “Louraco C”;
botaoD.label = “Louraco D”;
botaoA.addEventListener(MouseEvent.CLICK, carregafotoA);
botaoB.addEventListener(MouseEvent.CLICK, carregafotoB);
botaoC.addEventListener(MouseEvent.CLICK, carregafotoC);
botaoD.addEventListener(MouseEvent.CLICK, carregafotoD);
function carregafotoA (event:MouseEvent):void{
var FormacticURL:String = “LouracoAA.jpg“;
var ErreElle:URLRequest = new URLRequest(FormacticURL);
FormacticLoader.scaleContent = true;
FormacticLoader.load(ErreElle);
FormacticLoader.addEventListener(Event.COMPLETE, carregamento100);
FormacticLoader.addEventListener(ProgressEvent.PROGRESS, EmCarregamento);
function EmCarregamento (event:ProgressEvent):void{
TextoPorcento.text = Math.round(event.target.percentLoaded) + “%”;
}
function carregamento100 (event:Event):void{
TextoPorcento.text = “”;
}
}
function carregafotoB (event:MouseEvent):void{
var FormacticURL:String = “LouracoBB.jpg“;
var ErreElle:URLRequest = new URLRequest(FormacticURL);
FormacticLoader.scaleContent = true;
FormacticLoader.load(ErreElle);
FormacticLoader.addEventListener(Event.COMPLETE, carregamento100);
FormacticLoader.addEventListener(ProgressEvent.PROGRESS, EmCarregamento);
function loadprogress (event:ProgressEvent):void{
TextoPorcento.text = Math.round(event.target.percentLoaded) + “%”;
}
function carregamento100 (event:Event):void{
TextoPorcento.text = “”;
}
}
function carregafotoC (event:MouseEvent):void{
var FormacticURL:String = “LouracoCC.jpg“;
var ErreElle:URLRequest = new URLRequest(FormacticURL);
FormacticLoader.scaleContent = true;
FormacticLoader.load(ErreElle);
FormacticLoader.addEventListener(Event.COMPLETE, carregamento100);
FormacticLoader.addEventListener(ProgressEvent.PROGRESS, EmCarregamento);
function EmCarregamento (event:ProgressEvent):void{
TextoPorcento.text = Math.round(event.target.percentLoaded) + “%”;
}
function carregamento100 (event:Event):void{
TextoPorcento.text = “”;
}
}
function carregafotoD (event:MouseEvent):void{
var FormacticURL:String = “LouracoDD.jpg“;
var ErreElle:URLRequest = new URLRequest(FormacticURL);
FormacticLoader.scaleContent = true;
FormacticLoader.load(ErreElle);
FormacticLoader.addEventListener(Event.COMPLETE, carregamento100);
FormacticLoader.addEventListener(ProgressEvent.PROGRESS, EmCarregamento);
function EmCarregamento (event:ProgressEvent):void{
TextoPorcento.text = Math.round(event.target.percentLoaded) + “%”;
}
function carregamento100 (event:Event):void{
TextoPorcento.text = “”;
}
}
Para executar o trabalho, este deve-se encontrar dentro da respectiva pasta. No nosso caso, chama-se “UiloaderA”. Seguidamente. proceda como se ilustra na imagem seguinte: Pode fazer “Ctrl + Enter”, isto é, usar as teclas de atalho ou então utilizar os comandos da barra de trabalho (Control – Teste Movie)
Para que possa simular o carregamento um preloader das imagens na caixa de texto “TextoPorcento”, Após fazer “Ctrl + Enter”, no ficheiro gerado pelo Flash CS4 (SWF) click em “View” e depois em “Simulate Download” e Ctrl + Enter”

Recommended Posts