Iniciando com action script 3

3.444 visualizações

Publicada em

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.

Publicada em: Educação, Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
3.444
No SlideShare
0
A partir de incorporações
0
Número de incorporações
16
Ações
Compartilhamentos
0
Downloads
70
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Iniciando com action script 3

  1. 1. Iniciando com Action Script 3.0<br /> 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.<br /> 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.<br /> Crie o arquivo txt e escreva dentro o texto abaixo:<br /> 1;Administração;admin.jpg<br /> 2;Vendas;vendas.jpg<br />3;Frente de caixa;caixa.jpg<br /> Neste tutorial usaremos apenas o id e nome, posteriormente mostrarei como colocar imagens de uma url.<br /> Pronto, é só salvar, e vamos dar início ao nosso tutorial inicial de Flash com utilização do Action Script 3. <br />
  2. 2. Tela inicial do Adobe Flash CS5<br />Clique em Action Script 3.0, para criar um novo projeto AS3.<br />
  3. 3. Inserindo um novo símbolo<br />Clique em inserir e depois selecione a opção “New Symbol” ou precionectrl + F8 no teclado.<br />
  4. 4. Criando um símbolo e sua classe<br />De um nome ao símbolo e selecione a opção Export for Action Script, clique em “OK”<br />
  5. 5. Novo palco<br />Este é o palco de nosso trabalho. A cruz indica o canto superior esquerdo da nossa figura.<br />
  6. 6. Adicionando o retângulo base.<br />Na paleta direita, escolha a ferramenta retângulo, ele servirá de base para o nosso AC3.<br />
  7. 7. Delimitando nossa área<br />Faça um retângulo para delimitar área que vai se repetir, com o AS3 que criaremos.<br />
  8. 8. Escrevendo textos necessários<br />Selecione a ferramenta texto no menu lateral direito.<br />
  9. 9. Escrevendo o nome dos campos<br />Escreva os nomes dos campos que seram impressos pelo nosso AS3.<br />
  10. 10. Inserindo campos de texto<br />Com a mesma ferramenta texto, clique e arraste para criar um campo de texto.<br />
  11. 11. Mudando tipo dos campos de texto<br />Mude o mecanismo de texto para Clássico e o tipo para Dinâmico, e dê o nome do campo. <br />
  12. 12. Mutando o tipo dos campos de texto<br />Faça o mesmo que no campo id, colocando o nome do campo como ‘nome’.<br />
  13. 13. Exportando as fontes utilizadas<br />Clique em “Incorporar”, para incorporar as fontes ao flash.<br />
  14. 14. Selecionando as fontes para incorporação<br />Dê o nome a fonte para exportar e, na caixa “Character ranges” selecione ‘all’, clique em OK.<br />
  15. 15. Dando um nome ao Action Script<br />Clique fora do retângulo que fizemos, em propriedades, dê um nome a classe do AS3.<br />
  16. 16. Salvando o arquivo<br />Clique no menu “Arquivo” e depois em “Salvar”, ou precionectrl + s no teclado, para salvar.<br />
  17. 17. Dando um nome no arquivo e salvando<br />Coloque um nome para o arquivo “.fla” e clique em salvar.<br />
  18. 18. Indo para edição da classe no Flash Buider<br />Em propriedades, após ter salvo e dado o nome da classe clique em “Editar Classe”.<br />
  19. 19. Selecionando o programa de Edição do AS3<br />Seleciona a opção “Flash Buider”, e clique em “OK”. Será aberto o Adobe Flash Buider.<br />
  20. 20. Verificando o local do arquivo .fla<br />O Buider vai criar um novo projeto, verifique se é o caminho e arquivo corretos, “Finish”.<br />
  21. 21. Criando o Action Script<br />Verifique se o nome da classe está correto e clique em “Finish”, ele irá gerar nossa classe.<br />
  22. 22. Pronto, temos o inicio de nosso trabalho<br />Está criada nossa classe Setor que herda MovieClip.<br />
  23. 23. Mudando a herança de MovieClip para Sprite<br />Mude o extends para Sprite e o import também. Como acima.<br />
  24. 24. Criando os métodos e o atributo<br />Crie o atributo setores e os métodos load, convertToString e showQuadro, com retorno void.<br />
  25. 25. Criando e chamando o método load()<br />No construtor da classe (Setor), você vai chamar o método load(), como acima.<br />No método load() oque estamos fazendo é:<br />Criar variável load, do tipo URLLoader e a instanciamos;<br />Adicionamos um evento, quando o evento for completo vai chamar o método convertToString, da mesma classe<br />Estamos dando o load do arquivo, utilizando o URLRequest para buscar pela url o local do mesmo.<br />Se o arquivo existir na url passada o método convertToString() será chamado.<br />
  26. 26. Escrevendo o método convertToString()<br />Ao ser chamado, o método convertToString recebe como parâmetro o evento, passado pelo método load().<br />Neste método nós transformamos o arquivo txt, se existir, em um array que está sendo formado pelas linhas do txt.<br />Como fazemos:<br />A variável loader recebe o arquivo com o e.target;<br />Em “loader.data” estamos tendo acesso aos dados contidos no arquivo txt;<br />Em “loader.data.toString()” estamos transformando seu conteúdo em String;<br />Em “loader.data.toString().split(‘n’)” partimos o conteúdo em um array, separando-o a cada linha do arquivo.<br />O atributo setores recebe o array e chamamos o método showQuadro().<br />
  27. 27. Escrevendo o método showQuadro()<br />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’.<br />Como fazemos:<br />Criamos a varável ‘i’ e atribuímos o valor 0(“zero”) a ela;<br />Criamos o objeto ‘quadro’, que é instancia de ‘Quadro’;<br />Fazemos um laço de repetição utilizando o atributo ‘setores’;<br />Fazemos uma verificação se a linha contem algo ou é vazia;<br />Colocamos a cada iteração os valores do array criado nos campos do objeto quadro: id e nome;<br />Em ‘quadro.y = i * quadro.height’ colocamos um quadro abaixo do outro, multiplicando ‘i’, iterado, a altura o quadro a cada iteração.<br />
  28. 28. Finalizando o trabalho<br />Aperte ‘crtl + s’ no seu teclado, salvando seu AS3. E aperte ‘ctrl + enter’ para ver o resultado.<br />Agora é só colocar o arquivo lista_setores.swf gerado aonde preferir em seu servidor. <br />

×