Iniciando com action script 3

Iniciando com Action Script 3.0

Neste tutorial criaremos um arquivo swf a parti de um arquivo de texto, iterando suas linhas como array e criando uma listagem utilizando Adobe Flash CS5 Professional e Adobe Flash Buider 4.

Precisaremos de um arquivo de texto criado na pasta trabalho de seu servidor. Este arquivo terá linhas com dados de cada setor de uma loja(id, nome e urlImagem) que serão separados por entrada de linha.

Crie o arquivo txt e escreva dentro o texto abaixo:

1;Administração;admin.jpg2;Vendas;vendas.jpg3;Frente de caixa;caixa.jpgNeste tutorial usaremos apenas o id e nome, posteriormente

mostrarei como colocar imagens de uma url.Pronto, é só salvar, e vamos dar início ao nosso tutorial inicial

de Flash com utilização do Action Script 3.

Tela inicial do Adobe Flash CS5

Clique em Action Script 3.0, para criar um novo projeto AS3.

Inserindo um novo símbolo

Clique em inserir e depois selecione a opção “New Symbol” ou precione ctrl + F8 no teclado.

Criando um símbolo e sua classe

De um nome ao símbolo e selecione a opção Export for Action Script, clique em “OK”

Novo palco

Este é o palco de nosso trabalho. A cruz indica o canto superior esquerdo da nossa figura.

Adicionando o retângulo base.

Na paleta direita, escolha a ferramenta retângulo, ele servirá de base para o nosso AC3.

Delimitando nossa área

Faça um retângulo para delimitar área que vai se repetir, com o AS3 que criaremos.

Escrevendo textos necessários

Selecione a ferramenta texto no menu lateral direito.

Escrevendo o nome dos campos

Escreva os nomes dos campos que seram impressos pelo nosso AS3.

Inserindo campos de texto

Com a mesma ferramenta texto, clique e arraste para criar um campo de texto.

Mudando tipo dos campos de texto

Mude o mecanismo de texto para Clássico e o tipo para Dinâmico, e dê o nome do campo.

Mutando o tipo dos campos de texto

Faça o mesmo que no campo id, colocando o nome do campo como ‘nome’.

Exportando as fontes utilizadas

Clique em “Incorporar”, para incorporar as fontes ao flash.

Selecionando as fontes para incorporação

Dê o nome a fonte para exportar e, na caixa “Character ranges” selecione ‘all’, clique em OK.

Dando um nome ao Action Script

Clique fora do retângulo que fizemos, em propriedades, dê um nome a classe do AS3.

Salvando o arquivo

Clique no menu “Arquivo” e depois em “Salvar”, ou precione ctrl + s no teclado, para salvar.

Dando um nome no arquivo e salvando

Coloque um nome para o arquivo “.fla” e clique em salvar.

Indo para edição da classe no Flash Buider

Em propriedades, após ter salvo e dado o nome da classe clique em “Editar Classe”.

Selecionando o programa de Edição do AS3

Seleciona a opção “Flash Buider”, e clique em “OK”. Será aberto o Adobe Flash Buider.

Verificando o local do arquivo .fla

O Buider vai criar um novo projeto, verifique se é o caminho e arquivo corretos, “Finish”.

Criando o Action Script

Verifique se o nome da classe está correto e clique em “Finish”, ele irá gerar nossa classe.

Pronto, temos o inicio de nosso trabalho

Está criada nossa classe Setor que herda MovieClip.

Mudando a herança de MovieClip para Sprite

Mude o extends para Sprite e o import também. Como acima.

Criando os métodos e o atributo

Crie o atributo setores e os métodos load, convertToString e showQuadro, com retorno void.

Criando e chamando o método load()

No construtor da classe (Setor), você vai chamar o método load(), como acima.No método load() oque estamos fazendo é:

1. Criar variável load, do tipo URLLoader e a instanciamos;2. Adicionamos um evento, quando o evento for completo vai chamar o

método convertToString, da mesma classe3. Estamos dando o load do arquivo, utilizando o URLRequest para buscar

pela url o local do mesmo.4. Se o arquivo existir na url passada o método convertToString() será

chamado.

Escrevendo o método convertToString()

Ao ser chamado, o método convertToString recebe como parâmetro o evento, passado pelo método load().Neste método nós transformamos o arquivo txt, se existir, em um array que está sendo formado pelas linhas do txt.Como fazemos:1. A variável loader recebe o arquivo com o e.target;2. Em “loader.data” estamos tendo acesso aos dados contidos no arquivo txt;3. Em “loader.data.toString()” estamos transformando seu conteúdo em String;4. Em “loader.data.toString().split(‘\n’)” partimos o conteúdo em um array,

separando-o a cada linha do arquivo.5. O atributo setores recebe o array e chamamos o método showQuadro().

Escrevendo o método showQuadro()

Neste método nós iteramos o array setores, quebramos cada linha em um array, quebrando-o onde tiver ponto e virgula(‘;’) e depois colocamos cada indice do array em um campo do retangulo que tinhamos feito anteriormente, iterando enquento tiver linhas no arquivo. E colocando um abaixo do outro, utilizando como iterador a varável ‘i’.Como fazemos:1. Criamos a varável ‘i’ e atribuímos o valor 0(“zero”) a ela;2. Criamos o objeto ‘quadro’, que é instancia de ‘Quadro’;3. Fazemos um laço de repetição utilizando o atributo ‘setores’;4. Fazemos uma verificação se a linha contem algo ou é vazia;5. Colocamos a cada iteração os valores do array criado nos campos do

objeto quadro: id e nome;6. Em ‘quadro.y = i * quadro.height’ colocamos um quadro abaixo do

outro, multiplicando ‘i’, iterado, a altura o quadro a cada iteração.

Finalizando o trabalho

Aperte ‘crtl + s’ no seu teclado, salvando seu AS3. E aperte ‘ctrl + enter’ para ver o resultado.Agora é só colocar o arquivo lista_setores.swf gerado aonde preferir em seu servidor.