Iniciando com action script 3
Transferir como PPTX, PDF1 gostou2,130 visualizações
O tutorial ensina a criar um arquivo SWF usando ActionScript 3.0, começando com a configuração do ambiente Adobe Flash CS5 e Adobe Flash Builder 4. O processo envolve a leitura de um arquivo de texto que contém dados de setores de uma loja, e a criação de uma interface que itera sobre essas informações, exibindo-as em forma de quadro. Ao final, o documento orienta sobre como salvar e visualizar o resultado do projeto.
Iniciando com action script 3
- 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.jpg3;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 CS5Clique em Action Script 3.0, para criar um novo projeto AS3.
- 3. Inserindo um novo símboloClique em inserir e depois selecione a opção “New Symbol” ou precionectrl + F8 no teclado.
- 4. Criando um símbolo e sua classeDe um nome ao símbolo e selecione a opção Export for Action Script, clique em “OK”
- 5. Novo palcoEste é 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 áreaFaça um retângulo para delimitar área que vai se repetir, com o AS3 que criaremos.
- 8. Escrevendo textos necessáriosSelecione a ferramenta texto no menu lateral direito.
- 9. Escrevendo o nome dos camposEscreva os nomes dos campos que seram impressos pelo nosso AS3.
- 10. Inserindo campos de textoCom a mesma ferramenta texto, clique e arraste para criar um campo de texto.
- 11. Mudando tipo dos campos de textoMude 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 textoFaça o mesmo que no campo id, colocando o nome do campo como ‘nome’.
- 13. Exportando as fontes utilizadasClique em “Incorporar”, para incorporar as fontes ao flash.
- 14. Selecionando as fontes para incorporaçãoDê o nome a fonte para exportar e, na caixa “Character ranges” selecione ‘all’, clique em OK.
- 15. Dando um nome ao Action ScriptClique fora do retângulo que fizemos, em propriedades, dê um nome a classe do AS3.
- 16. Salvando o arquivoClique no menu “Arquivo” e depois em “Salvar”, ou precionectrl + s no teclado, para salvar.
- 17. Dando um nome no arquivo e salvandoColoque um nome para o arquivo “.fla” e clique em salvar.
- 18. Indo para edição da classe no Flash BuiderEm propriedades, após ter salvo e dado o nome da classe clique em “Editar Classe”.
- 19. Selecionando o programa de Edição do AS3Seleciona a opção “Flash Buider”, e clique em “OK”. Será aberto o Adobe Flash Buider.
- 20. Verificando o local do arquivo .flaO Buider vai criar um novo projeto, verifique se é o caminho e arquivo corretos, “Finish”.
- 21. Criando o Action ScriptVerifique se o nome da classe está correto e clique em “Finish”, ele irá gerar nossa classe.
- 22. Pronto, temos o inicio de nosso trabalhoEstá criada nossa classe Setor que herda MovieClip.
- 23. Mudando a herança de MovieClip para SpriteMude o extends para Sprite e o import também. Como acima.
- 24. Criando os métodos e o atributoCrie 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 classeEstamos 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(‘\n’)” 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 trabalhoAperte ‘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.