Aula de inicio na utilização Action Script 3, nestes slides nós utilizamos um arquivo txt e o iteramos, linha por linha e imprimimos os valores em um quadro, gerando um arquivo swf.

1. 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.jpg 2;Vendas;vendas.jpg 3;Frente de caixa;caixa.jpg Neste 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.

2. Tela inicial do Adobe Flash CS5 Clique em Action Script 3.0, para criar um novo projeto AS3.

3. Inserindo um novo símbolo Clique em inserir e depois selecione a opção “New Symbol” ou precionectrl + F8 no teclado.

4. 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”

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

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

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

8. Escrevendo textos necessários Selecione a ferramenta texto no menu lateral direito.

9. Escrevendo o nome dos campos Escreva os nomes dos campos que seram impressos pelo nosso AS3.

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

11. 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.

12. Mutando o tipo dos campos de texto Faça o mesmo que no campo id, colocando o nome do campo como ‘nome’.

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

14. Selecionando as fontes para incorporação Dê o nome a fonte para exportar e, na caixa “Character ranges” selecione ‘all’, clique em OK.

15. Dando um nome ao Action Script Clique fora do retângulo que fizemos, em propriedades, dê um nome a classe do AS3.

16. Salvando o arquivo Clique no menu “Arquivo” e depois em “Salvar”, ou precionectrl + s no teclado, para salvar.

17. Dando um nome no arquivo e salvando Coloque um nome para o arquivo “.fla” e clique em salvar.

18. 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”.

19. Selecionando o programa de Edição do AS3 Seleciona a opção “Flash Buider”, e clique em “OK”. Será aberto o Adobe Flash Buider.

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

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

22. Pronto, temos o inicio de nosso trabalho Está criada nossa classe Setor que herda MovieClip.

23. Mudando a herança de MovieClip para Sprite Mude o extends para Sprite e o import também. Como acima.

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

25. 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 é: Criar variável load, do tipo URLLoader e a instanciamos; Adicionamos um evento, quando o evento for completo vai chamar o método convertToString, da mesma classe Estamos dando o load do arquivo, utilizando o URLRequest para buscar pela url o local do mesmo. Se o arquivo existir na url passada o método convertToString() será chamado.

26. 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: A variável loader recebe o arquivo com o e.target; Em “loader.data” estamos tendo acesso aos dados contidos no arquivo txt; Em “loader.data.toString()” estamos transformando seu conteúdo em String; Em “loader.data.toString().split(‘’)” partimos o conteúdo em um array, separando-o a cada linha do arquivo. O atributo setores recebe o array e chamamos o método showQuadro().

27. 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: Criamos a varável ‘i’ e atribuímos o valor 0(“zero”) a ela; Criamos o objeto ‘quadro’, que é instancia de ‘Quadro’; Fazemos um laço de repetição utilizando o atributo ‘setores’; Fazemos uma verificação se a linha contem algo ou é vazia; Colocamos a cada iteração os valores do array criado nos campos do objeto quadro: id e nome; Em ‘quadro.y = i * quadro.height’ colocamos um quadro abaixo do outro, multiplicando ‘i’, iterado, a altura o quadro a cada iteração.

28. 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.