Baixe o app para aproveitar ainda mais
Prévia do material em texto
Programação ActionScript com Flash CS5 Programação ActionScript com Flash CS5 2 2010 Alfamídia LTDA. Todos os direitos reservados para Alfamídia LTDA. AVISO DE RESPONSABILIDADE As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as precauções tenham sido tomadas na preparação deste material, a Processor Alfamídia LTDA. não têm qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito à responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou indiretamente, pelas instruções contidas neste material ou pelo software de computador e produtos de hardware aqui descritos. 01/2010 – Versão 1.1 Alfamídia Prow http://www.alfamidia.com.br Programação ActionScript com Flash CS5 3 2010 Alfamídia LTDA. A Alfamídia dá Boas Vindas aos seus clientes e deseja um excelente treinamento. Benefícios ao aluno - Suporte pós-treinamento via e-mail (3 consultas por 90 dias após o término do curso) para tirar dúvidas do conteúdo ministrado em aula, através do e-mail matricula@alfamidia.com.br; - Acesso a extranet www.alunoalfamidia.com.br para verificação de agenda e pontos do PROGRAMA FIDELIDADE ; - Convênio com o estacionamento do prédio (desconto); - Avaliações de acompanhamento e final de curso (em cada módulo) durante todo o treinamento, garantindo a qualidade do curso. Observações Importantes - É obrigatório que sejam salvos todos os trabalhos efetuados durante a aula, no servidor indicado pelo instrutor. - Não é permitido entrar em sala de aula com alimentos ou bebidas de qualquer espécie ou fumar nas dependências da Alfamídia; - Não é permitida a instalação de outros Hardwares ou Softwares que não sejam os utilizados em treinamento; - O preenchimento da avaliação final de curso/módulo é condição obrigatória para que o aluno possa acionar a garantia do curso, conforme previsto na ficha de matrícula; - Somente será fornecido certificado ao aluno com assiduidade igual ou superior a 75% do treinamento; - Qualquer necessidade de alteração na agenda ou cursos contratados inicialmente, consulte os Termos de Contratação na Ficha de Matrícula; - Contatos com a Alfamídia podem ser feitos através dos e-mails: matricula@alfamidia.com.br – dúvidas após contratação info@alfamidia.com.br – novas contratações Programação ActionScript com Flash CS5 4 2008 Processor Alfamídia LTDA. Adobe Flash CS5 – Programação ActionScript UNIDADE 1 ADOBE FLASH CS4 – ANIMAÇÃO MULTIMÍDIA ................................................................................ 6 1.1 SOBRE O CURSO .......................................................................................................................... 6 1.2 ESTRUTURA DO CURSO ............................................................................................................... 6 1.3 ESTRUTURA DE DIRETÓRIOS ........................................................................................................ 7 1.4 CONVENÇÕES ADOTADAS NESTA APOSTILA. ................................................................................. 7 UNIDADE 2 AS3...................................................................................................................................................... 9 2.1 SOBRE O AS3.............................................................................................................................. 9 UNIDADE 3 CONCEITOS CHAVES DE PROGRAMAÇÃO .................................................................................... 10 3.1 VARIÁVEIS ............................................................................................................................... 10 3.1.1 Tipos Nativos do AS3 ........................................................................................................... 10 3.2 DEBUG COM TRACE( )................................................................................................................ 11 3.3 CONDICIONAIS .......................................................................................................................... 13 3.4 LOOPS ...................................................................................................................................... 15 3.5 ARRAYS ................................................................................................................................... 15 3.6 FUNÇÕES .................................................................................................................................. 17 UNIDADE 4 CONCEITOS ESPECÍFICOS DO AS3 – DISPLAY PROGRAMMING .................................................. 19 4.1 CLASSES QUE COMPÕE A DISPLAY API ...................................................................................... 19 4.2 INSERIR INSTÂNCIAS DE CLIPE DE FILME DA LIBRARY NO PALCO ................................................ 20 4.3 INSERIR OBJETOS EM CONTAINERES .......................................................................................... 24 4.4 REMOVER OBJETOS DE CONTAINERES ....................................................................................... 26 4.5 DESENHAR COM PROGRAMAÇÃO ............................................................................................... 27 UNIDADE 5 EVENTOS E MANIPULAÇÃO DE EVENTOS ..................................................................................... 30 5.1 EVENTOS E MANIPULAÇÃO DE EVENTOS. ................................................................................... 30 UNIDADE 6 CARREGAMENTO DE ARQUIVOS EXTERNOS ................................................................................ 37 6.1 CARREGANDO ARQUIVOS EXTERNOS ......................................................................................... 37 6.2 CARREGAR TEXTOS .................................................................................................................. 37 6.3 ACESSAR ELEMENTOS DO ARQUIVO XML ................................................................................. 40 6.4 PESQUISAR UM XML ................................................................................................................ 43 6.5 CARREGAR SONS ...................................................................................................................... 44 6.6 CARREGAR IMAGENS ................................................................................................................ 45 6.7 CARREGAR V ÍDEOS ................................................................................................................... 49 6.8 SECURITY SANDBOXES.............................................................................................................. 51 UNIDADE 7 COMUNICAÇÃO COM O SERVIDOR ................................................................................................ 66 7.1 SOLICITAR, RECEBER E ENVIAR DADOS PARA UM SERVIDOR ATRAVÉS DE AMF. ......................... 66 UNIDADE 8 ORIENTAÇÃO A OBJETOS NO AS3 ................................................................................................. 73 8.1 COMEÇANDO UM PROJETO ........................................................................................................ 73 8.2 DECLARAR UMA CLASSE ........................................................................................................... 73 8.3 ATRIBUTOS DE CLASSES ............................................................................................................73 8.4 MÉTODOS CONSTRUTORES ........................................................................................................ 74 Programação ActionScript com Flash CS5 5 2008 Processor Alfamídia LTDA. 8.5 PROPRIEDADES OU VARIÁVEIS DE INSTÂNCIA ............................................................................ 74 8.6 ATRIBUTOS DE PROPRIEDADES .................................................................................................. 74 8.7 MÉTODOS ................................................................................................................................. 75 8.8 ATRIBUTOS DE MÉTODOS .......................................................................................................... 75 8.9 GETTERS E SETTERS .................................................................................................................. 75 8.10 PROPRIEDADES ESTÁTICAS ........................................................................................................ 76 8.11 CONSTANTES ............................................................................................................................ 76 8.12 MÉTODOS ESTÁTICOS ............................................................................................................... 76 8.13 HERANÇA ................................................................................................................................. 77 8.14 PREVENIR CLASSES DE SEREM EXTENDIDAS E MÉTODOS DE SEREM REESCRITOS. ........................ 78 UNIDADE 9 PROJETO DE INTERFACE PARA COMÉRCIO ELETRÔNICO .... ERRO! INDICADOR NÃO DEFINIDO. 9.1 CRIAR OS BOTÕES ................................................................... ERRO! INDICADOR NÃO DEFINIDO . 9.2 CRIAR O MODELO DE DADOS................................................... ERRO! INDICADOR NÃO DEFINIDO . 9.3 CRIAR A COLEÇÃO DE ITENS.................................................... ERRO! INDICADOR NÃO DEFINIDO . 9.4 CRIAR UMA VIEW PARA A COLEÇÃO ......................................... ERRO! INDICADOR NÃO DEFINIDO . 9.5 CRIAR UM MÉTODO PARA FORMATAR O PREÇO ......................... ERRO! INDICADOR NÃO DEFINIDO . 9.6 CRIAR UMA VIEW PARA STORELTEMCOLLECTION..................... ERRO! INDICADOR NÃO DEFINIDO . 9.7 TESTAR O QUE FOI FEITO ATÉ AGORA: CRIANDO O ARQUIVO STORE.AS ....... ERRO! INDICADOR NÃO DEFINIDO . 9.8 CONSERTANDO A VISUALIZAÇÃO DOS ITENS: DE VOLTA A STORELTEMCOLLECTIONVIEW ..... ERRO! INDICADOR NÃO DEFINIDO . 9.9 SCROLLING: AINDA EM STORELTEMCOLLECTIONVIEW ............. ERRO! INDICADOR NÃO DEFINIDO . 9.10 MELHORANDO ONUPDATE: EM STORELTEMCOLLECTIONVIEW . ERRO! INDICADOR NÃO DEFINIDO . 9.11 FAZER OS ITENS ARRASTÁVEIS................................................. ERRO! INDICADOR NÃO DEFINIDO . 9.12 ALGUMAS MODIFICAÇÕES EM STORE ....................................... ERRO! INDICADOR NÃO DEFINIDO . 9.13 ÚLTIMAS MODIFICAÇÕES: O CARRINHO DE COMPRAS .............. ERRO! INDICADOR NÃO DEFINIDO . Programação ActionScript com Flash CS5 6 2008 Processor Alfamídia LTDA. Unidade 1 Adobe Flash CS5 – Animação Multimídia 1.1 Sobre o Curso O curso Desenvolvedor ActionScript para Flash CS4 foi projetado para ensinar a linguagem ActionScript, com foco em criação de aplicações no Flash CS4. Serão beneficiados designers que pretendem utilizar a linguagem para tarefas rotineiras sem recorrer ao auxílio de programadores e os programadores que pretendem aprofundar seus estudos na linguagem. Nos capítulos deste curso, será apresentada a linguagem, desde uma revisão dos conceitos-chave em programação, passando por conceitos específicos do ActionScript até a criação de uma interface de aplicação de comércio eletrônicoEstrutura do Curso Durante o curso, o aluno será incentivado a fazer desafios, que são pequenos programas que necessitam de códigos que o mesmo não estudou de forma direta ou que pedem um pouco mais de esforço lógico. 1.2 Estrutura do Curso As unidades iniciais apresentam conceitos-chave de programação; uma revisão dos conteúdos de lógica. A terceira começa a introduzir conceitos específicos da linguagem, como DisplayObjects, Eventos e a manipulação de certas classes importantes no cotidiano de um programador. A partir da terceira unidade, os exercícios e desafios deixam de ser escritos na Timeline, para serem escritos em classes. Na unidade sete, é tratada a questão da orientação a objetos, com a posterior implementação de uma interface para comércio eletrônico. Também será seguida uma convenção para os diretórios onde os arquivos deverão ser salvos, a fim de evitar problemas com localização de arquivos externos. Sugere-se que, para manter um backup dos arquivos do curso, seja copiada a pasta “Solução dos exercícios e desafios”. Todos os desafios podem ser resolvidos se olharmos na documentação (Help). Optou-se por este formato porque muitos programadores não sabem usar a documentação, e isso os torna dependentes da ajuda de outros (de colegas, de listas de discussão, de exemplos e tutoriais). Aceite os desafios e não seja este tipo de profissional! Programação ActionScript com Flash CS5 7 2008 Processor Alfamídia LTDA. 1.3 Estrutura de diretórios - Os exercícios e desafios de cada unidade devem ser salvos na pasta da unidade correspondente. - Os arquivos .fla dos exercícios sempre seguem o formato “ex”+num_unidade+”- “+num_exercicio. Por exemplo ex4-1.fla, ex3-2.fla - Os desafios, quando antes da unidade três, seguem o mesmo padrão, porém com o prefixo “des”. Por exemplo: des2-1.fla. - Os arquivos de classes (.as), quando depois da unidade dois têm um nome que identifica o propósito do desafio ou exercício (por exemplo: Animate.as) - Os desafios, quando após a unidade dois, têm a palavra “Desafio” adicionada ao nome. Por exemplo: AnimateDesafio.as. - Sugere-se que, ao começar um desafio, que os arquivos sejam salvos na pasta da unidade com o nome do desafio resolvido. 1.4 Convenções adotadas nesta apostila. - Deste ponto em diante, a linguagem ActionScript 3.0 será referida apenas como AS3. - Por questão de brevidade, quando for mencionado Flash, subentenda-se Flash CS4. - As expressões compilar e executar correspondem à ação de testar o movie, e pode ser feita usando o atalho de teclado Ctrl+Enter. - As expressões imprima e rastreie indicam o uso da função trace(). - Os nomes de variáveis, métodos e classes estão todos em inglês. Esta é uma opção individual. Sugere-se que, após escolher um idioma, mantenha-o sempre. Também são utilizados ícones para indicar locais especiais dentro do texto. Preste atenção quando encontrar um deles: - Indica uma curiosidade, uma dica. - Indica um exercício ou desafio sugerido. - Indica o final de uma unidade, com a apresentação da unidade seguinte. Programação ActionScript com Flash CS5 8 2008 Processor Alfamídia LTDA. - Indica um assunto que deve ser tratado com mais atenção, quer seja porque é mais difícil ou porque é uma novidade. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 9 2010 Alfamídia `Prow Unidade 2 AS3 2.1 Sobre o AS3 O AS3 é uma linguagem orientada a objetos, que pode ser utilizada no Flash CS4 e Flex Builder. Além disso, é possível desenvolver para AS3 com ferramentas open-source, utilizando,por exemplo: - O SDK do Flex (http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html), compilando o código com o compilador mxmlc; - O Eclipse (www.eclipse.org/downloads/), com a compilação através do ANT FlashDevelop (www.osflash.org). AS3 é case sensitive, ou seja, maiúsculas e minúsculas são diferentes! Assim, se você escrever Movieclip, você pode receber um erro como o da figura abaixo, portanto atenção! Fig 1. JANELA COMPILER ERRORS Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 10 2010 Alfamídia `Prow Unidade 3 Conceitos Chaves de Programação 3.1 Variáveis O estudo das variáveis, usualmente, é o primeiro tópico em cursos de programação, já que estas estruturas são uma das peças fundamentais em qualquer programa. Variáveis guardam dados que serão utilizados pelo programa. Elas contêm um identificador – nome, se preferir e um valor (figura 1). Em linguagens tipadas, também estão associadas a um tipo. Fig 2. DEMONSTRAÇÃO DE VARIÁVEIS Em AS3, variáveis podem ser de quatro tipos: locais, de instância, dinâmicas e estáticas (as definições de cada uma estão em unidades posteriores). A declaração acima é um exemplo de variável local do tipo String. No Flash, quando você coloca um clipe de filme, um botão ou uma caixa de texto no palco, e dá a eles um nome de instância, uma variável é criada para este objeto. Por exemplo: ao criar um clipe de filme e dar o nome de instância “myClip”, a seguinte declaração é criada “behind the scenes”: var myClip:MovieClip; 3.1.1 Tipos Nativos do AS3 Vimos que, ao declarar uma variável, atribuímos um nome, um valor e um tipo. Em linguagens orientadas a objeto (como o AS3), toda classe corresponde a um tipo, como será estudado mais tarde. Nas unidades anteriores ao estudo da orientação a objetos, serão utilizados os tipos nativos “primitivos” e “compexos” do AS3, ou seja: os que vêm com o Flash CS4. Os tipos, ou as classes que vêm com o Flash CS4 não são as mesmas que vêm com o Flex (um ambiente de desenvolvimento que também utiliza AS3). Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 11 2010 Alfamídia `Prow Assim, todos os códigos desta apostila poderão ser compilados no Flex (talvez com algumas modificações). Os tipos “primitivos” são: String – para valores de texto. Para reconhecer um String basta ver se o valor está entre aspas; Numéricos, podendo ser de três tipos: o Number – qualquer valor numérico, inclusive frações; o int – valores inteiros positivos; o uint – valores inteiros; Boleanos – valores lógicos: true e false; Os tipos “complexos” são todas as classes que vêm com o Flash CS4. Entre eles, são citados MovieClip, TextField, Date e Sprite. 3.2 Debug com trace( ) Trace ( ) é uma função global do AS3 (não está relacionada da a nenhuma classe), muito utilizada para fazer debug (verificar o estado do programa enquanto ele roda). Exercício1 - Declarando variáveis e utilizando trace( ); 1- No Flash, crie um arquivo novo e salve como ex3-1, na pasta unidade3. 2- Crie uma variável myName, do tipo String, e atribua a ela o seu nome. 3- Crie uma variável mySurname, do tipo String, e atribua a ela o seu sobrenome. 4- Compile o código. Se você recebeu erros, verifique se os valores das variáveis estão entre aspas. 5- Crie uma terceira variável – myFullName - do tipo String e atribua a ela a concatenação dos valores das duas variáveis anteriores. 6- Imprima o resultado na tela. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 12 2010 Alfamídia `Prow Fig 3. JANELA OUTPUT DO RESULTADO DO EXERCÍCIO Exercício 2 - Erros relacionados ao tipo 1- No Flash, crie um arquivo novo e salve como ex3-2, na pasta unidade 3. 2- Crie uma variável myFirstInt, do tipo int e atribua a ela o valor 200; 3- Crie uma variável mySecondInt, do tipo int , e atribua a ela o valor 100; 4- Imprima na tela a soma dos dois valores e compile. 5- Crie uma terceira variável myThirdInt, do tipo uint e atribua a ela o valor -200; 6- Imprima na tela a soma de myFirstInt e myThirdInt. Veja que um valor muito diferente do esperado foi impresso na tela, e que o Compilador acusou erro. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 13 2010 Alfamídia `Prow Fig 4. COMPILANDO O RESULTADO DO EXERCÍCIO O tipo int e o uint têm 32 bits, porém o int “usa” um dos bits para “guardar” sinal, de forma que, na verdade, ele representa um valor de 31 bits ao passo que uint tem 32bits. Se você calcular o tamanho de um número de 32 bits verá que o resultado é o que foi impresso na tela no exercício anterior. 3.3 Condicionais Impor uma condição para um programa executar é um procedimento comum. Estas condições são expressas sob a forma de if, if / else, if / else if / else e switch.Todos os condicionais avaliam a expressão para true. Veja os exemplos a seguir. Observe os exemplos abaixo e veja que, para testar para igualdade, se utiliza o sinal “= =” . Este é o operador de comparação, ao passo que o “=” é de atribuição. Fig 5. EXEMPLOS COM DIVERSOS TESTES IF Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 14 2010 Alfamídia `Prow Fig 6. EXEMPLO COM IF /ELSE Fig 7. EXEMPLO COM IF /ELSE IF / ELSE Desafio com Condicionais Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo na pasta solution. 1. Tente escrever um script que verifique se um número qualquer é par. Você vai precisar pesquisar na ajuda pelo operador modulo: %. Abra o Help e navegue conforme a figura abaixo. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 15 2010 Alfamídia `Prow Fig 8. DEMONSTRAÇÃO DO HELP 3.4 Loops Loops são blocos que repetem um conjunto de instruções um determinado número de vezes. O loop mais utilizado em AS3 é o for. A figura abaixo mostra um exemplo. Fig 9. EXEMPLO DE LOOP FOR 3.5 Arrays Arrays são estruturas muito úteis no AS3. Utiliza-se arrays para guardar dados, como as variáveis. A diferença é que dentro de um array cabem muitos dados. No AS3 os arrays não são tipados, nem é preciso dizer qual o tamanho do array antes de utilizá-lo. Isso significa que você pode colocar e retirar dados dentro dele à vontade. A figura abaixo mostra como se declara um array. Fig 10. DECLARAÇÃO DE ARRAY Exercício 3 – Declaração de Array 1- No Flash, crie um arquivo novo e salve como ex3-3, na pasta unidade 3. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 16 2010 Alfamídia `Prow 2- Declare myArray, do tipo Array, e o inicialize (da forma que preferir) com os valores verde,azul e vermelho (lembre-se que estes valores são strings). 3- Acrescente a string preto ao final do array. Para ver como acrescentar dados ao final de um array, siga o Help como na figura abaixo. Fig 11. EXEMPLO DO HELP 4- Imprima na tela o tamanho do array (procure na ajuda pelas propriedades do array). 5- Remova o último elemento do array. Desafio - Procurando elementos em um array Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo na pasta solution. 1- Crie um array e o inicialize (da forma que preferir) com os valores verde, azul e vermelho. 2- Faça um script que procura, dentro do array, por um valor igual a “vermelho”. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 17 2010 Alfamídia `Prow 3.6 Funções Funções, a exemplo dos tópicos vistos anteriormente, são peças fundamentais do AS3. Numa situação de programação na Timeline (como estamos fazendo), elas têm a função de reaproveitar código. Quando começarmos a escrever classes, elas serão os métodos das classes. Funções podem ou não receber parâmetros e podem ou não retornar valores. A figura abaixo mostra um exemplo de função. Fig 12. EXEMPLO DE FUNÇÃO QUE RECEBE PARÂMETROS E RETORNA UM VALOR. Próximos Passos Até o momento os códigos feitos eram escritos na Timeline do Flash. Este é o modelo que foi utilizado durante muitos anos, de forma que a maioria das pessoas que escreve para ActionScript está acostumada com esse procedimento. Desta forma, era muito fácil qualquer programa passar de 400 linhas de código. Este hábito continuo mesmo depois que foi viabilizada (e incentivada) a orientação a objeto em projetos de ActionScript, e a utilização de arquivos externos. Programadores de outras linguagens podem achar isso um pouco diferente, porque, afinal de contas, ActionScript é uma linguagem orientada a objetos. Por isso, para não fazer uma transição tão grande – e que pode ser abrupta para muitos usuários experientes do Flash – entre programação na Timeline e utilização de classes próprias, ficaremos, nas próximas unidades, no meio termo. Usaremos classes próprias, mas uma classe por projeto, de forma que todo o código poderia ser colocado dentro uma Timeline (como muitos estão acostumados a fazer). Como isso é uma transição – uma iniciação – não entraremos em detalhes sobre alguns termos relacionados à programação orientada a objetos. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 18 2010 Alfamídia `Prow Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 19 2010 Alfamídia `Prow Unidade 4 Conceitos Específicos do AS3 – Display Programming 4.1 Classes que Compõe a Display API A Display API é a API do AS3 que gerencia os elementos gráficos que são colocados no palco. Ela é constituída de uma série de classes, que estendem umas às outras como mostra a imagem abaixo. Você pode acompanhar a discussão sobre este pacote abrindo o Help e selecionando Programming ActionScript 3.0 > Display Programming > Core Display Classes Fig 13. ORGANOGRAMA A classe da qual todas as demais descendem chama-se DisplayObject. Isso significa que “tudo que DisplayObject tem ou faz, as demais classes têm ou fazem”. Também é correto dizer, por exemplo: que “todo InteractiveObject é um DisplayObject” Todos os descendentes de DisplayObject herdam certas funcionalidades: podem ser rotacionados e movidos em x e y, por exemplo. A linha logo abaixo de DisplayObject (suas primeiras descendentes), mostra classes que não podem interagir com o usuário nem conter outros objetos visuais e InteractiveObject, que define uma linha de descendência de classes que permitem interação. A terceira linha mostra classes que podem interagir com o usuário mas não podem conter outros objetos visuais e DisplayObjectContainer. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 20 2010 Alfamídia `Prow A quarta linha mostra classes que podem interagir com o usuário e que podem conter outros objetos visuais. A quinta linha mostra MovieClip, que é um Sprite com frames. 4.2 Inserir Instâncias de Clipe de Filme da Library n o Palco Para demonstrar o procedimento, serão feitos dois exercícios. Exercício1 - Inserindo instâncias de clipes de filme no palco 1- No Flash, crie um arquivo novo e salve como ex4-1, na pasta unidade4. 2- Crie um clipe de filme utilizando uma das ferramentas de desenho e dê o nome de sua preferência ao símbolo. 3- Remova-o do palco. 4- Abra a Library e clique com o botão direito no clipe de filme. 5- Selecione a opção Linkage e configure a caixa como mostra a figura. Fig 14. JANELA LINKAGE PROPERTIES 6- Abra as Actions do arquivo e escreva o seguinte código. Fig 15. ACTIONS 7- Compile o programa. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 21 2010 Alfamídia `Prow 8- Teste alguma propriedades que podem ser aplicadas a este clipe de filme, como por exemplo: myFirstClip.x=100; myFirstClip.y=100; myFirstClip.scaleX=2; myFirstClip.alpha=0.5; Exercício 2 – Usando Classe externa Este será o procedimento padrão deste ponto em diante, até começar o estudo da orientação a objeto. Os passos são os seguintes: - Criar um arquivo .fla. - Definir a classe do documento. - Criar um arquivo .as com o mesmo nome da classe do documento.. - Declarar a classe com o mesmo nome do arquivo .as. - Importar as classes necessárias (varia caso a caso). - Declarar o método construtor com o mesmo nome do arquivo .as. - Colocar o código dentro do método construtor. 1- No Flash, salve o arquivo ex4-1 como ex4-2, na pasta unidade4. 2- Apague o código do 1° keyframe. 3- Sem nada selecionado, abra o painel de propriedades e, no campo Document Class escreva FirstClass Fig 16. ESCREVENDO A CLASSE 4- Crie um novo arquivo de ActionScript e salve-o como FirstClass, na mesma pasta do arquivo .fla. A extensão atribuída será .as. 5- Neste arquivo, insira o seguinte código. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 22 2010 Alfamídia `Prow Fig 17. CÓDIGO INSERIDO NO PAINEL ACTION 6. Salve e compile o .fla. Afinal o que está acontecendo? Estamos começando, de forma bastante superficial, o estudo da orientação a objetos no AS3. Todos os conceitos que precisaremos nesta etapa intermediária do curso estão ilustrados no código recém escrito. Linha 1: package Significa o pacote, a pasta onde o arquivo se localiza. Indica um namespace, uma forma de fazer reserva de nomes, para evitar duplicações (duas classes podem ter nomes iguais, se estiverem em packages diferentes). Neste código, não indicamos a pasta porque é a mesma do arquivo .fla. Linha 2: import É a instrução para importar as classes externas que iremosutilizar. Neste caso importamos MovieClip, porque é a classe base para FirstClass (que extende MovieClip). Linha 4: public Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 23 2010 Alfamídia `Prow É o atributo da classe. Significa que classes fora do package podem acessá-la. Existem outros atributos, que serão estudados em outro momento. Linha 4: extends Significa que a classe FirstClass é um MovieClip, herda de MovieClip, extende MovieClip, e portanto tem todas as propriedades e métodos de MovieClip e de seus ascendentes (como Sprite e InteractiveObject). Linha 4: FisrtClass O nome da classe. No AS3, deve ter o mesmo nome do arquivo .as. É convenção usar inicial maiúscula em nomes de classes. Linha 8: public function FirstClass É o método construtor. No modelo que estamos utilizando – definir uma classe como base para um arquivo .fla – o método construtor é automaticamente executado. Um método construtor, como o nome denota, é executado toda vez que uma cópia – instância – da classe é criada; não precisamos chamá-lo explicitamente. Ele deve ter o mesmo nome da classe. Desafio1 : Qual classe implementa o método addChild? Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo na pasta solution. 1- Qual classe implementa o método addChild? 2- Qual o tipo de retorno do método addChild? O que isso significa? 3- Porque o código seguinte não é válido? var myFirstShape:Shape = new Shape(); var mySecondShape:Shape = new Shape(); myFirstShape.addChild(mySecondShape); Desafio2: Posicionando instâncias de clipes de filme com o loop for Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo PlaceMovieDesafio.as. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 24 2010 Alfamídia `Prow 1- Abra o arquivo des4-2. Veja que na Library existe um clipe de filme com nome de classe associado (como no exercício 4-1 e 4-2). 2- O desafio é: posicione quatro instâncias dispostas em duas colunas, como na imagem a seguir. Fig 18. EXEMPLO DE FORMAS 4.3 Inserir Objetos em Containeres Inserir objetos em containeres é útil quando se deseja manipulá-los como um grupo. Para ver como isso pode ser feito, será feito um exercício. Exercício 3: Inserindo objetos em containeres 1- No Flash, crie um arquivo .fla com o nome ex4-3 e salve na pasta unidade4. 2- Crie um clipe de filme e associe-o a uma classe (botão direito no símbolo na Library e escolher Linkage). No exercício será usado o nome myClip. 3- Remova o clipe de filme do palco. 4- Na mesma pasta, crie um arquivo .as com o nome CreateGroup 5- Defina CreateGroup como classe base do arquivo ex4-3.fla 6- Crie a classe, definindo package, classe e o método construtor. 7- Não esqueça de importar a classe base, ou seja: MovieClip Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 25 2010 Alfamídia `Prow Fig 19. PAINEL ACTIONS Atenção! Fica combinado que os passos acima listados são o procedimento padrão para criar uma classe e associá-la a um arquivo .fla. Nos exercícios seguintes, estes passos não serão detalhados, apenas indicados por uma instrução do tipo “crie uma classe com o nome Nome a associe ao arquivo .fla”. 8- Importe a classe Sprite (no mesmo package de MovieCLip) import flash.display.MovieClip; import flash.display.Sprite; 9- Crie uma variável public para o MovieClip da Library (no exercício tem o nome de myClip). As variáveis da classe, ou melhor, propriedades da classe, são declaradas fora de qualquer método. O melhor lugar é logo após a declaração de class. 10- Crie uma variável public que contém uma instância de Sprite. O container será do tipo Sprite. public var myFirstClip:myClip=new myClip(); public var container:Sprite= new Sprite(); 11- No construtor, coloque a instância de Sprite no palco. 12- Coloque a instância do clipe de filme dentro do Sprite. 13- Posicione o Sprite. public function CreateGroup():void { addChild(container); container.addChild(myFirstClip); container.x=100; container.y=100; } 14- Encare os próximos passos como desafios. Se você preferir, pode olhar a solução na imagem. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 26 2010 Alfamídia `Prow 15- Crie uma caixa de texto dentro do Sprite (container), coloque texto dentro dela e a desloque para que não fique sobreposta ao clipe de filme. Para isso você precisa saber: Qual classe representa caixas de texto. Qual o pacote contém caixas de texto. Descubra tudo isso olhando o Help. Fig 20. CÓDIGO COMPLETO DO EXERCÍCIO 4.4 Remover Objetos de Containeres Remover objetos de containeres é bastante simples. Assim como existe um método para inserir objetos visuais, existe um para removê-los, chamado removeChild( ). Exercício 4: Removendo objetos de containeres Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 27 2010 Alfamídia `Prow 1- Salve o arquivo ex4-3 como ex4-4. 2- Modifique a classe do documento para RemoveObject 3- Salve o arquivo CreateGroup.as como RemoveObject.as 4- Modifique o nome da classe e do método construtor para coincidir com o nome do arquivo (RemoveObject). 5- Remova a caixa de texto utilizando o método removeChild(). container.removeChild(myText); 4.5 Desenhar com Programação Para desenhar utilizaremos a classe Graphics, que define os métodos para fazer retângulos, círculos, definir linhas de contorno e preenchimentos. Abra a ajuda e procure pela classe Graphics, procurando descobrir: Sua lista de métodos. De quem ela descende. Em qual package ela se encontra. No texto de apresentação da classe encontramos diversas informações relevantes. Vemos que todos os objetos que suportam desenho incluem uma propriedade graphics. Essa propriedade contém um objeto Graphics. Também descobrimos que não é possível instanciar Graphics (new Graphics() causa um erro), e que não podemos extender Graphics. Depois de estudar a classe Graphics, procure no Help pela classe Shape. Veja se ela tem uma propriedade graphics Exercício 5: Desenhando com programação 1- Crie uma arquivo .fla e salve-o como ex4-5. 2- Associe a este arquivo a classe Draw 3- Crie a classe Draw 4- Faça com que a classe Draw extenda Sprite. 5- Defina os elementos básicos (package, nome da classe, método construtor e classe base que deve ser importada) Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 28 2010 Alfamídia `Prow Porque antes extendíamos MovieCLip e agora estamos extendendo Sprite? É apenas uma questão de decidir entre ter ou não keyframes. Como não pretendemos ter keyframes neste exemplo, podemos usar Sprite como classe base. Nos exemplos anteriores, é possível substituir MovieClip por Sprite (se fizer issonão esqueça de importar a classe Sprite). package { import flash.display.Sprite; public class Draw extends Sprite { public var container:Sprite= new Sprite(); public function Draw():void { } } } 6- Importe a classe Shape. import flash.display.Shape; 7- Defina uma variável publica, do tipo Sprite para ser um container do Shape. 8- Defina uma variável publica do tipo Shape. public var container:Sprite= new Sprite(); public var shape:Shape = new Shape(); 9- No método construtor, defina uma linha de contorno vermelha, com dois pixels de largura e opaca, na propriedade graphics do objeto tipo Shape. shape.graphics.lineStyle(2,0xFF0000, 1); 10- Em seguida, defina o preenchimento amarelo, na propriedade graphics do objeto tipo Shape. shape.graphics.beginFill(0xFFFF00); 11- Desenhe um círculo com x e y iguais a 30 e diâmetro igual a 30, na propriedade graphics do objeto tipo Shape. shape.graphics.drawCircle(30,30,30); Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 29 2010 Alfamídia `Prow 12- Finalize chamando o método endFill(), na propriedade graphics do objeto tipo Shape; shape.graphics.endFill(); 13- Coloque o Sprite no palco. addChild(container); 14- Coloque o Shape dentro do Sprite. container.addChild(shape); 15- Compile e teste. Fig 21. FORMA DESENHADA ATRAVÉS DO ACTIONSCRIPT Próximos Passos Nesta unidade estudamos classes que compõe a Display API, que permite, entre outras coisas, inserir objetos visuais no palco e desenhar através de scripts. Há mais ainda para estudar sobre esta API, o que será feito ao longo do curso. Na próxima unidade estudaremos eventos, para poder interagir com o usuário. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 30 2010 Alfamídia `Prow Unidade 5 Eventos e Manipulação de Eventos 5.1 Eventos e Manipulação de Eventos. Um evento é, em termos gerais, uma ocorrência em tempo de execução que vale a pena saber que aconteceu. Há dois tipos de eventos em AS3: os built-in e os customizados. Nesta unidade estudaremos apenas eventos built-in. Para lidar com / manipular / tratar / responder a eventos, utiliza-se ouvintes de evento (event listeners). Fig 22. EXEMPLO DE CÓDIGO Na figura acima, temos que: Linha 11: registro do objeto someButton a um evento CLICK, do tipo MousEvent, que executará a função (método) onClick. Linha 15: Declaração da função (método) onClick, que recebe um parâmetro do tipo MouseEvent, e não retorna dados (void). Linha 16: Declaração de uma variável do tipo Object, que recebe o target do evento (igual a someButton, neste caso). Linha 17: Declaração de uma variável tipo String, que recebe o tipo do evento disparado (CLICK). Todas as classes que podem ser alvos de eventos descendem de EventDispatcher. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 31 2010 Alfamídia `Prow Observe no Help a documentação da classe EventDispatcher. Observe as classes que descendem de EventDispatcher. Veja que EventDispacther possui os métodos addEventListener e dispatchEvent. Veja o que este método faz. Veja que dispatchEvent recebe como parâmetro um objeto do tipo Event. Observe a classe Event. Veja quais as propriedades de um evento. Veja quais as classes descendem de Event. Exercício 1: Animando com eventos 1- Crie uma arquivo .fla e salve-o como ex5-1, na pasta unidade 5. 2- Associe a este arquivo a classe Animate 3- Crie a classe Animate 4- Faça com que a classe Animate extenda Sprite. 5- Defina os elementos básicos (package, nome da classe, método construtor e classe base que deve ser importada). 6- No arquivo ex5-1.fla crie um clipe de filme com qualquer forma e associe uma classe a ele (definir na opção Linkage). Neste exercício o nome da classe será myClip. 7- Crie uma variável publica para este clipe de filme. public var myFirstClip:myClip=new myClip(); 8- No construtor, coloque-o no palco, defina y igual a 100 e compile o filme. myFirstClip.y=100; addChild(myFirstClip); 9- Para responder a eventos importaremos a classe que lista os eventos no AS3. import flash.events.Event; 10- A animação com este clipe de filme o mostrará movendo-se para a direita. Para isso, devemos registrar Animate para responder ao evento EnterFrame. addEventListener(Event.ENTER_FRAME); 11- Em seguida, estabelecemos a função que será executada quando o evento for despachado (dispatched). addEventListener(Event.ENTER_FRAME, onEnterFrame); 12- A função deve fazer com que myFirstClip modifique o valor de sua propriedade x, aumentando-a em 10 pixels por disparo do evento. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 32 2010 Alfamídia `Prow public function onEnterFrame(evt:Event):void{ myFirstClip.x+=10; } 13- Compile e teste o código. Fig 23. FORMAS INSERIDAS NO PALCO Exercício 2: Respondendo a eventos do Mouse Neste exercício, faremos com que o clipe de filme do exercício anterior comece a mover-se apenas depois de clicar em um botão. O botão será uma instância da classe SimpleButton, e definiremos os estados UP e OVER deste botão, desenhando formas com o objeto graphics. 1- Salve o arquivo ex5-1.fla como ex5-2, na pasta unidade 5. 2- Modifique a classe associada de Animate para Mouse. 3- Salve Animate como Mouse. 4- Modifique o nome da classe e do método construtor de Animate para Mouse. 5- Comente o registro de Mouse com o evento EnterFrame. //addEventListener(Event.ENTER_FRAME, onEnterFrame) ; 6- Comente a chamada para a função onEnterFrame. /* public function onEnterFrame(evt:Event):void{ myFirstClip.x+=10; } */ 7- Em primeiro lugar, importaremos as classes Shape e SimpleButton. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 33 2010 Alfamídia `Prow import flash.display.SimpleButton; import flash.display.Shape; 8- Em seguida, definiremos duas variáveis públicas para Shape e SimpleButton. public var myButton: SimpleButton = new SimpleButto n(); public var shape: Shape = new Shape(); 9- No construtor, criaremos o desenho de um círculo com x e y iguais a 30, diâmetro igual a 30, cor azul, sem contorno. shape.graphics.lineStyle(); shape.graphics.beginFill(color); shape.graphics.drawCircle(30,30,30); shape.graphics.endFill(); 10- Definiremos que esta variável será passada aos estados upState, overState e hitTestState de SimpleButton. myButton.upState=shape; myButton.overState=shape; myButton.hitTestState=shape; 11- Finalmente colocaremos a instância de SimpleButton no palco e compilaremos o filme. 12- Nos próximos passos faremos com que o botão responda ao evento CLICK do Mouse. Ao clicar, o clipe de filme que foi colocado no palco (myClip) deve começar a mover-se. 13- A primeira coisa a fazer é importar a classe MouseEvent. import flash.events.MouseEvent; 14- Em seguida, registraremos o SimpleButton com o evento CLICK. myButton.addEventListener(MouseEvent.CLICK); 15- Definiremos a função onClick para serexecutada quando o evento for despachado. myButton.addEventListener(MouseEvent.CLICK, onClick); 16- Escreveremos a função onClick, que contém uma chamada para trace. Ao clicar no botão, deve aparecer na janela de saída a string “clicou”. Desta forma, podemos ter certeza que o evento foi disparado. public function onClick(evt:MouseEvent):void{ trace("clicou"); } Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 34 2010 Alfamídia `Prow 17- Repare que o parâmetro que esta função recebe é do tipo MouseEvent, pois este é o tipo de evento disparado. 18- Salvar, compilar e testar. 19- Volte para o arquivo Mouse.as e exclua a chamada para trace. 20- Recorte a linha comentada com o registro de Mouse para o evento EnterFrame e cole dentro da função onClick. public function onClick(evt:MouseEvent):void{ addEventListener(Event.ENTER_FRAME, onEnterFrame); } 21- Remova os comentários da função onEnterFrame. 22- Salvar, compilar e testar. Fig 24. CLICANDO COM O MOUSE Desafio 1: Criando diferentes estados para o botão Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo MouseDesafio.as. O objetivo deste desafio é modificar o arquivo Mouse, fazendo com que o SimpleButton tenha cores diferentes ao passar o mouse sobre ele. É claro que poderíamos fazer isso criando dois objetos Shape diferentes, mas isso ficaria muito deselegante. O que você deve fazer é criar um método público (por enquanto todos os métodos e propriedades serão públicos) com o nome estado, que deve receber um int para especificar a cor (sim, você pode passar valores hexadecimais, que também são ints) e retornar um Shape. Desafio 2: Criando um botão para parar a animação Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 35 2010 Alfamídia `Prow Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo AnimateDesafio.as. O objetivo é criar um botão para parar a animação do clipe de filme depois de ela ter começado. Sugere-se que você utilize a classe Mouse.as porque ela já tem boa parte do código pronto. Dica: quando você quer registrar um objeto com um event você acrescenta (add) um ouvinte. Para remover o registro, que método você usaria? Procura no Help pela classe EventDispatcher. Desafio 3: Respondendo a eventos de foco Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo FocusDesafio.as. O objetivo é fazer com que duas caixas de texto respondam a eventos de receber e perder o foco. O comportamento desejado segue: Sem foco: caixa deve ter bordas pretas. Com foco (usuário clica nela para iniciar digitação): deve ficar com uma cor de fundo (a seu critério). Como você já sabe criar caixas de texto e colocá-las na cena, isso não faz parte do desafio. Por isso, sugere-se, se houver necessidade, abrir o arquivo unidade3/CreateGroup.as. As propriedades que você deve manipular (borda, cor de fundo) podem ser estudadas no Help. Você não estudou, explicitamente, neste curso, como responder a eventos de foco. Mas você sabe tudo o que é preciso para descobrir. Perceba que você passará por situações como essa muitas vezes. Desafio 4: Rolagem de texto Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo ScrollDesafio.as. Objetivo é implementar uma rolagem vertical simples para um texto. Haverá dois botões, uma que “rola o texto para cima” e outro que “rola o texto para baixo”. Procure na Internet por algum site que contenha bastante texto e use-o como a propriedade text de sua TextField. Se preferir, use o arquivo someText.txt que está na pasta assets. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 36 2010 Alfamídia `Prow Como você já sabe desenhar através de scripts, fazer SimpleButton e inserir clipes de filme da Library, escolha a solução que considerar mais conveniente. Dica: veja na ajuda as propriedades scrollV e maxScroll, da classe TextField Dica: economize desenhos: inverta-o na vertical usando a propriedade scaleY= -1 Próximos Passos Saber lidar com eventos é extremamente importante para programadores AS3. Ao final desta unidade, você está apto a compreender como funcionam os eventos built-in do Flash. O próximo passo é compreender o ciclo de carregamento de arquivos externos. Como você pode imaginar, há diversos eventos que devemos observar enquanto um dado está sendo carregado, por exemplo: quando ele começa a ser carregado, quando ele termina de carregar, o progresso do carregamento e os erros que podem acontecer durante o processo. A próxima unidade é dedicada a este assunt Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 37 2010 Alfamídia `Prow Unidade 6 Carregamento de Arquivos Externos 6.1 Carregando Arquivos Externos O carregamento de arquivos externos é uma tarefa rotineira para programadores AS3. Lidar com arquivos e acompanhar o processo é o objetivo desta unidade. O fluxo pode acontecer de três formas: Para dados de texto (textos, XML e variáveis codificadas como URLs) utiliza-se a classe URLLoader. Esta classe define um método load, que indica o que deve ser carregado. Classes de som e imagem definem seus próprios métodos load, que também indicam o que deve ser carregado. Nestes casos, deve-se fornecer aos métodos load um parâmetro do tipo URLRequest, que contém o endereço do arquivo a ser carregado. O carregamento de vídeos, como não segue este formato, será estudado à parte. 6.2 Carregar Textos O processo de carregar textos e XML é bastante direto, conforme segue: 1- Importa-se as classes URLLoader e URLRequest 2- Cria-se um objeto URLRequest e o inicializamos com o endereço do arquivo a ser carregado. 3- Cria-se um objeto URLLoader. 4- Chama-se o método load do objeto URLLoader e passa-se o objeto URLRequest. 5- Registra-se o objeto URLLoader com o evento COMPLETE. 6- O objeto URLRequest possui uma propriedade data, que contém os dados carregados depois de COMPLETE disparar, logo, passa-se o resultado da propriedade data para a caixa de texto, variável String ou XML que se deseja manipular. Exercício 1: Carregar um arquivo de texto Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 38 2010 Alfamídia `Prow 1- Crie um arquivo .fla novo e salve-o como ex6-1 na pasta unidade. 2- Defina a classe do documento como LoadText. 3- Crie um aqruivo .as com o nome LoadText, faça-o descender de Sprite, importe a classe Sprite e defina o método construtor. 4- Importe a classe TextField. import flash.text.TextField; 5- Crie uma variável pública do tipo TextField (no exercício usa-se myText). public var myText:TextField= new TextField(); 6- Atribua qualquer texto à propriedade text desta TextField, apenas para ver se está tudo certo e coloque-a no palco. myText.text="Gabriela"; addChild(myText); 7- Compile. 8- Comente a linha que atribui um texto à propriedade text da TextField. //myText.text="Gabriela"; 9- A partirdeste ponto faremos o carregamento do texto. Para isso, importe as classes URLLoader e URLRequest. import flash.net.URLLoader; import flash.net.URLRequest; 10- Crie uma variável pública do tipo URLRequest e passe a “../assets/someText.txt” para o construtor do objeto URLRequest. Neste exercício utiliza-se “url”. public var url:URLRequest = new URLRequest("../assets/someText.txt"); 11- Crie uma variável pública para a classe URLLoader e atribua um novo objeto URLLoader. Neste exercício utiliza-se “loader”. public var loader:URLLoader= new URLLoader(); 12- No construtor, chame o método load do objeto URLLoader e passe o objeto URLRequest para ele. loader.load(url); 13- Importe a classe Event, para poder utilizar o evento COMPLETE. Import flash.events.Event; 14- Registre o objeto URLLoader para responder ao evento COMPLETE, e associe-o a um método com o nome de onLoadText. loader.addEventListener(Event.COMPLETE, onLoadText) ; Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 39 2010 Alfamídia `Prow 15- Dentro do método onLoadText, passe a propriedade data do URLLoader para a propriedade text da TextField. public function onLoadText(evt:Event):void{ myText.text=evt.target.data; } 16- Compile. Exercício 2: Carregar um arquivo XML 1- O carregamento de um arquivo XML é igual ao de um arquivo de texto. Por este motivo, você vai reaproveitar o código do exercício anterior. Assim, salve o arquivo ex6-1 como ex6-2. 2- Atribua LoadXML como classe do documento. 3- Salve o arquivo LoadText como LoadXML. Modifique o nome da classe e do método construtor para que fiquem iguais ao nome do arquivo. 4- Comente a linha que atribui à propriedade data do URLLoader para a propriedade text da TextField. //myText.text=evt.target.data; 5- Modifique o arquivo a ser carregado para “../assets/someXML.xml”. public var url:URLRequest = new URLRequest(" ../assets/someXML.xml"); 6- Imprima na tela (usando trace) o conteúdo do arquivo XML quando o evento COMPLETE disparar. trace(evt.target.data); 7- Compile. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 40 2010 Alfamídia `Prow Fig 25. TRACE DO ARQUIVO XML 6.3 Acessar Elementos do Arquivo XML Um arquivo XML é útil porque descreve dados. Assim, após aprender como carregar o arquivo XML devemos aprender como pesquisá-lo. Em primeiro lugar, o conteúdo de um arquivo XML deve estar em um objeto do tipo XML, como no exemplo que segue: Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 41 2010 Alfamídia `Prow var myXML:XML= <raiz> <curso nome="Animação com Flash CS4"> <sala>Horizon</sala> <turno>Tarde</turno> <periodo>5/11/2207 até 16/11/2207</periodo> </curso> <curso nome="Programação em AS3"> <sala>Enterprise</sala> <turno>Tarde</turno> <periodo>19/11/2207 até 30/11/2207</periodo> </curso> <curso nome="Edição de vídeos com Flash CS4"> <sala>Horizon</sala> <turno>Tarde</turno> <periodo>03/12/2207 até 14/12/2207</periodo> </curso> </raiz> Para ilustrar como utilizar a classe XML observaremos alguns exemplos: Para acessar a sala do primeiro curso: xml.curso[0].sala Para acessar o nome do primeiro curso: xml.curso[0].@nome Exercício 3: Acessar dados em um arquivo XML 1- Salve o arquivo ex6-2 como ex6-3, na pasta unidade6. 2- Salve o arquivo LoadXML.as como AccessXML.as, e modifique o nome da classe e do método construtor para ficarem iguais ao nome do arquivo. 3- Crie uma variável pública do tipo XML (no exercício utiliza-se xml). public var xml:XML; 4- Dentro do método onLoadText, atribua a esta variável XML o conteúdo de data. xml=evt.target.data; Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 42 2010 Alfamídia `Prow ou xml=loader.data; 5- Compile. O que está acontecendo? Na documentação, o tipo de retorno da propriedade data da classe URLLoader é *, ou seja: sem tipo (untyped). Porém, isso não significa que o objeto evt.target.data não tenha um tipo. Para saber qual é o tipo, use getQualifiedClassName. 6- Importe o pacote utils. import flash.utils.getQualifiedClassName; 7- Imprima na tela o tipo de evt.target.data (ou loader.data); trace(getQualifiedClassName(evt.target.data)); XML não é String... Se você tem dúvidas, veja no Help se elas estão relacionadas de alguma forma. 8- Como fazer com que evt.target.data seja tratado como XML? Fazendo o casting para XML. xml=XML(evt.target.data); 9- Configure a propriedade ignoreWhiteSpace do XML para true. xml.ignoreWhitespace=true; 10- Comente a chamada para getQualifiedClassName. //trace(getQualifiedClassName(evt.target.data)); 11- Imprima na tela (usando trace) o nome do primeiro curso e a sala do primeiro curso. trace(xml.curso[0].sala); trace(xml.curso[0].@nome); 12- Compile. Fig 26. VISUALIZAÇÃO DO XML Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 43 2010 Alfamídia `Prow 6.4 Pesquisar um XML A pesquisar em um XML pode ser feita com um loop for ou for each, por exemplo. Porém, há uma forma mais direta de fazer isso, como no exemplo que segue. trace(xml.curso.(@nome=="Programação em AS3")); /*Retorna <curso nome="Programação em AS3"> <sala>Enterprise</sala> <turno>Tarde</turno> <periodo>19/11/2207 até 30/11/2207</periodo> </curso> */ A linha a seguir: trace( getQualifiedClassName( xml.curso.(@nome=="Programação em AS3") ) ); por sua vez, retorna XMLList, o tipo do dado retornado. XMLList é útil quando desejamos tratar de pedaços do XML. Desafio1: Pesquisando um XML Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo SearchXMLDesafio.as. O objetivo é obter o nome do primeiro curso que acontece na sala Horizon. A ordem é estabelecida pelo XML (a tag que vier primeiro). Você pode escolher se prefere imprimir o resultado na tela ou colocar em uma caixa de texto. Também pode escolher se quer carregar o arquivo XML ou atribuir o conteúdo do arquivo someXML.xml à uma variável do tipo XML. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 44 2010 Alfamídia `Prow 6.5 Carregar Sons O processo de carregar sons é parecido com os estudados anteriormente. Utilizaremos um objeto do tipo URLRequest, e o método load será o da classe Sound. Exercício 4: Carregando um arquivo de som 1- Crie um arquivo .fla com o nome de ex6-4 e salve-o na pasta unidade 6. 2- Atribua a classe LoadSound como classe do documento. 3- Crie um arquivo .as com o nome de LoadSound, que descende de Sprite, declare a classe e o método construtor para que fiquem com o mesmo nome do arquivo e importe a classe base. 4- Importe as classes Sound e URLRequest. import flash.net.URLRequest; import flash.media.Sound; 5- Crie uma variável públicado tipo URLRequest e passe para seu construtor o arquivo “../assets/asound.mp3” (no exercício utiliza-se url). public var url:URLRequest = new URLRequest("../assets/asound.mp3"); 6- Crie uma variável pública do tipo Sound e atribua um novo Sound (no exercício utiliza-se sound). public var sound:Sound= new Sound(); 7- No construtor, atribua a variável URLRequest ao método load da classe Sound. Sound.load(url); 8- Importe a classe Event para poder responder ao evento COMPLETE. Import flash.events.Event; 9- Registre o Sound para responder ao evento COMPLETE, disparando o método onLoadSound. sound.addEventListener(Event.COMPLETE, onLoadSound) ; 10- Quando o método onLoadSound executar, o som deve começar a tocar. public function onLoadSound(evt:Event):void{ evt.target.play(); Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 45 2010 Alfamídia `Prow } 11- Compile. 6.6 Carregar Imagens O processo de carregar imagens é parecido com o de carregar sons. O fluxo é basicamente o mesmo: criar um objeto URLRequest e passá-lo para o método load de um outro objeto. Porém, no caso de imagens, este objeto não é, como se poderia pensar, do tipo Bitmap, e sim do tipo Loader. Loader descende de DisplayObjectContainer, logo ele pode tanto estar dentro de outros containeres como ele mesmo pode ser um container. Use Loader para carregar swf, jpg, png e gif. Exercício 5: Carregando uma imagem 1- Crie um arquivo .fla com o nome de ex6-5 e salve-o na pasta unidade 6. 2- Atribua a classe LoadImage como classe do documento. 3- Crie um arquivo .as com o nome de LoadImage, que descende de Sprite, declare a classe e o método construtor para que fiquem com o mesmo nome do arquivo e importe a classe base. 4- Importe as classes Loader e URLRequest. import flash.net.URLRequest; import flash.display.Loader; 5- Crie uma variável pública do tipo URLRequest e passe para seu construtor o arquivo “../assets/aguape.jpg” (no exercício utiliza-se url). public var url:URLRequest = new URLRequest("../assets/aguape.jpg"); 6- Crie uma variável pública do tipo Loader e inicialize com um novo Loader (no exercício utiliza-se loader). public var loader:Loader= new Loader(); 7- No construtor, passe o URLRequest para o método load do Loader. loader.load(url); 8- Coloque o Loader no palco. addChild(loader); 9- Compile. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 46 2010 Alfamídia `Prow 10- A imagem deve aparecer, porém, ela é grande demais. Nos próximos passos iremos diminuir o tamanho dela. 11- Para diminuir o tamanho da imagem, devemos modificar propriedades do objeto que contém a imagem: o Loader. Porém, só teremos acesso a elas depois que a imagem carregar. Precisamos então, responder ao evento COMPLETE. O objeto que verifica o estado do carregamento de dados não é o Loader, e sim LoaderInfo! 12- Importe a classe Event, para poder responder ao evento COMPLETE. import flash.events.Event; 13- Registre o objeto contentLoaderInfo para responder ao evento COMPLETE, disparando o método onComplete. loader.contentLoaderInfo.addEventListener( Event.COMPLETE, onComplete); Fig 27. ILUSTRAÇÃO Como se vê na figura acima, a propriedade contentLoaderInfo contém um objeto LoaderInfo. Este objeto guarda as propriedades do arquivo sendo carregado. Por isso devemos registrar estes objetos para responder aos eventos. Para ver os eventos aos quais este objeto pode se registrar, ver a seção Events da classe LoaderInfo. 14- No método onComplete, defina as propriedades width e height do loader para 200. public function onComplete(evt:Event):void{ loader.width=200; loader.height=200; } Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 47 2010 Alfamídia `Prow Fig 28. ARQUIVO SENDO CARREGADO EXTERNAMENTE Desafio 2: Flexibilizando o código Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo WhichLoaderDesafio.as. Use como base os arquivos do exercício anterior. O objetivo é atribuir o valor 200 às propriedades width e height do Loader, deixando o código mais solto, evitando que se codifique nomes de instância desnecessariamente (hard-coding). Desta forma, tente descobrir como, dentro do método onComplete, referenciar o Loader que contém o objeto registrado ao evento. Dica: imprima, dentro do método onComplete, evt.target. Você verá que a saída é LoaderInfo. Como acessar o Loader? E como modificar as propriedades width e height acessando o Loader desta forma? Desafio 3: Respondendo a outros eventos de carregamento Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o arquivo LoaderDesafio.as. Use como base os arquivos do desafio anterior. O objetivo é imprimir na tela strings definidas dentro de métodos que disparam quando os eventos OPEN e PROGRESS disparam. O conteúdo destes métodos são: trace(“OPEN”) e trace(“PROGRESS”) Dica: verifique, na documentação, qual package define o evento de progresso.Não é tão difícil quanto parece. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 48 2010 Alfamídia `Prow Exercício 6: Utilizando uma barra de progresso 1- Crie um arquivo .fla com o nome de ex6-6 e salve-o na pasta unidade 6. 2- Modifique a classe do documento para LoaderProgress. 3- Salve o arquivo LoaderDesafio.as como LoaderProgress e modifique o nome da classe e do método construtor para que fiquem iguais ao nome do arquivo. 4- Importe a classe ProgressBar. import fl.controls.ProgressBar; 5- Declare uma variável pública pb do tipo ProgressBar, que recebe uma nova ProgressBar. public var pb:ProgressBar=new ProgressBar(); 6- Atribua o objeto Loader à propriedade source da ProgressBar. pb.source=loader.contentLoaderInfo; 7- Coloque-a no palco. addChild(pb); 8- Compile. O que está acontecendo? Quando utilizamos componentes, precisamos de diversos clipes de filme que “constroem” o componente em run time. Para que o componente possa ser criado, precisamos arrastar uma cópia dele para o palco, de forma que fique na Library. Faça isso abrindo o painel de Components, sob o menu Window. Remova o componente do palco em seguida. 9- Compile O que está acontecendo? Você atribui o objeto Loader à propriedade source da ProgressBar. Lembre que Loader não tem informações sobre o arquivo sendo carregado. O objeto que tem estas referências é o LoaderInfo, acessível através da propriedade contentLoaderInfo. 10- Compile. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 49 2010 Alfamídia `Prow 6.7 Carregar Vídeos O modelo de carregamento de vídeos é diferente dos demais estudados até o momento porque vídeos podem ser carregados via streaming. Para dar suporte a streaming são utilizadas classes que criam conexões com o servidor que hospeda o arquivo. Neste curso não faremos exemplos de carregamento via streaming, porque para isso é preciso ter um servidor de streaming, como o Fash Media Server. A forma de carregamentoque será utilizada é o download progressivo. Todavia, os scripts para carregar vídeos de uma forma ou de outra são praticamente iguais. Exercício 7: Carregando Vídeos 1- Crie um arquivo .fla com o nome de ex6-7 e salve-o na pasta unidade 6. 2- Atribua a classe LoadVideo como classe do documento. 3- Crie um arquivo .as com o nome de LoadVideo, que descende de Sprite, declare a classe e o método construtor para que fiquem com o mesmo nome do arquivo e importe a classe base. 4- Importe as classes NetStream e NetConnection, que abrem a ligação com o servidor streaming. import flash.net.NetConnection; import flash.net.NetStream; 5- Declare uma variável pública do tipo NetStream, não a inicialize ainda (no exercício utiliza-se stream). public var stream:NetStream; 6- Declare uma variável pública do tipo Net Connection que recebe um novo NetConection (no exercício utiliza-se connection). public var connection:NetConnection = new NetConnection(); 7- No construtor execute o método connect de NetConnection, passando null como parâmetro. Esta é a diferença entre streaming e progressive download. Se fosse streaming, seria passada a url do vídeo para o método connect. connection.connect(null); 8- Atribua, à variável NetStream (stream) um novo NetStream, que recebe o objeto NetConnection (connection) em seu construtor. stream= new NetStream(connection); 9- Execute o método play de NetStream. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 50 2010 Alfamídia `Prow stream.play("../assets/avideo.flv"); 10- Compile. O que está acontecendo? O arquivo flv está despachando, enviando um evento para o player, que está tentando responde. Este evento é do tipo built-in (como os estudados anteriormente), e se chama onMetaData (veja a documentação da classe NetStream, seção Events). Este evento contém propriedades descritivas embutidas no vídeo, e é para ser usado quando houver streaming. Quando não há (como no caso presente), é necessário atribuir um método com o nome do evento esperado à propriedade client do NetStream. Desta forma, o objeto NetStream delegará a este objeto client a tarefa de lidar com estes dados embutidos no arquivo de vídeo. O objeto client será do tipo Object, e ele definirá um método com o nome de onMetaData. O tipo Object é o mais indicado porque Object é uma das classes dinâmicas do AS3, ou seja, pode-se acrescentar métodos e propriedades à instâncias de Object no run time. Além disso, NetStream descende de Object (como todas as demais classes). 11- Crie uma variável pública do tipo Object, que recebe um novo Object (no exercício utiliza-se clientObject). public var clientObject:Object = new Object(); 12- Atribua à propriedade onMetaData deste Object o método onMetaData. clientObject.onMetaData= onMetaData; 13- Crie um método com o nome de onMetaData, que recebe como parâmetro um Object. public function onMetaData(data:Object):void{ } 14- Atribua à propriedade client de NetStream o Object clientObject. stream.client=clientObject; 15- Compile. O que está acontecendo? Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 51 2010 Alfamídia `Prow O erro já foi sanado, porém não conseguimos ver o vídeo. Para isso, deveremos trabalhar com a classe Vídeo. 16- Importe a classe Vídeo. import flash.media.Video; 17- Crie uma variável pública do tipo Vídeo que recebe um novo Vídeo (no exercício utiliza-se vídeo). public var video:Video = new Video(); 18- Execute o método attachNetStream de Vídeo e passe o objeto NetStream como parâmetro. video.attachNetStream(stream); 19- Coloque a instância de Vídeo no palco. addChild(video); 20- Compile. Fig 29. VÍDEO SENDO EXECUTADO 6.8 Security Sandboxes As operações que foram estudadas até agora podem ser permitidas ou proibidas dependendo do contexto de segurança associado ao arquivo. Para ilustrar as diferentes situações, serão apontadas formas de carregar e enviar dados suportadas pelo AS3, e como elas se relacionam com estas permissões. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 52 2010 Alfamídia `Prow 1- Carregar conteúdo: Utilizar os métodos load de Loader e Sound. Utilizar o método play de NetStream. 2- Acessar dados: Acessar uma imagem através da propriedade content de Loader. Invocar draw em BitmapData. Invocar o método computeSpectrum de SoundMixer. Acessar a propriedade id3 de Sound. 3- Cross-scripting: Muitas operações podem ser utilizadas para cross-scripting, como as citadas acima. Na documentação há uma lista que explicita as restrições de segurança para cada uma delas. 4- Carregar dados: Carregar dados usando o método load de URLLoader. Carregar dados usando o método load de URLStream. Baixar arquivos através de FileReference. Operação Arquivos locais Recursos remotos dentro do domínio remoto Recursos remotos fora do domínio remoto Carregar conteúdo Proibido Permitido Permitido Acessar dados Proibido Permitido Com permissão do distribuidor** Cross-scripting Proibido Permitido Com permissão do criador* Carregar dados Proibido Permitido Com permissão do distribuidor** Sandbox remota, operações permitidas e proibidas. Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 53 2010 Alfamídia `Prow Operação Arquivos não-swf locais Swf local- with- filesystem Swf local- with- nerworking Swf local- trusted Recursos locais Carregar conteúdo Permitido Permitido Proibido Permitido Proibido Acessar dados Permitido n/a n/a n/a Proibido Cross- scripting n/a Permitido Proibido Com permissão do criador* Proibido Carregar dados Permitido n/a n/a n/a Proibido Sandbox local-with-filesystem. Operação Arquivos não-swf locais Swf local- with- filesystem Swf local- with- nerworking Swf local- trusted Recursos locais Carregar conteúdo Permitido Proibido Permitido Permitido Permitido Acessar dados Proibido n/a n/a n/a Com permissão do distribuidor** Cross- scripting n/a Proibido Permitido Com permissão do criador* Com permissão do criador* Carregar dados Proibido n/a n/a n/a Com permissão do distribuidor** Sandbox local-with-networking. Operação Arquivos não-swf locais Swf local- with- filesystem Swf local- with- nerworking Swf local- trusted Recursos locais Carregar Permitido Permitido Permitido Permitido Permitido Programação ActionScript com Flash CS5 ________________________________________________________________________________________ 54 2010 Alfamídia `Prow conteúdo Acessar dados Permitido n/a n/a n/a Permitido Cross- scripting n/a Permitido Permitido Permitido Permitido Carregar dados Permitido n/a n/a n/a Permitido Sandbox local-trusted. * Com permissão do criador significa que há uma chamada para Security.allowDomain() ou Security.allowInsecureDomain() ** Com permissão do distribuidor significa que foi publicado um arquivo de políticas cross domain Para compilar um arquivo para a sandbox local-with-filesystem:
Compartilhar