apostila action flash

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


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 [email protected];

- 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:

[email protected] – dúvidas após contratação

[email protected] – novas contratações


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



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.



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!



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.



- Indica um assunto que deve ser tratado com mais atenção, quer seja porque é mais difícil ou porque é uma novidade.


________________________________________________________________________________________ 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


________________________________________________________________________________________ 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).


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


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


________________________________________________________________________________________ 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


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


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


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


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


________________________________________________________________________________________ 18 2010 Alfamídia `Prow


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


________________________________________________________________________________________ 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 no 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.


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


________________________________________________________________________________________ 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 iremos utilizar. Neste caso importamos MovieClip, porque é a classe base para FirstClass (que extende MovieClip).

Linha 4: public


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


________________________________________________________________________________________ 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


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


________________________________________________________________________________________ 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


________________________________________________________________________________________ 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)


________________________________________________________________________________________ 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 isso nã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);


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


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


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


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


________________________________________________________________________________________ 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 SimpleButton();

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 ser executada 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");

}


________________________________________________________________________________________ 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


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


________________________________________________________________________________________ 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


________________________________________________________________________________________ 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


________________________________________________________________________________________ 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 partir deste 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);


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


________________________________________________________________________________________ 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:


________________________________________________________________________________________ 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>



</curso>

<curso nome="Edição de vídeos com Flash CS4">

<sala>Horizon</sala>



</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;


________________________________________________________________________________________ 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


________________________________________________________________________________________ 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>



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


________________________________________________________________________________________ 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ública do 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();


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


________________________________________________________________________________________ 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;

}


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


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


________________________________________________________________________________________ 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 carregamento que 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.


________________________________________________________________________________________ 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?


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


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


________________________________________________________________________________________ 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-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-trusted

Recursos locais

Carregar Permitido Permitido Permitido Permitido Permitido


________________________________________________________________________________________ 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: File > Publish Setting > Flash > Local Playback security > Access local files only.

Para compilar um arquivo para a sandbox local-with-networking.: File > Publish Setting > Flash > Local Playback security > Access network only.

Para compilar um arquivo como local-trusted (nem mesmo arquivos swf do mesmo local, remotos ou não podem acessar) ver na documentação: Programming AS3 > Flash player´s API > Flash player security > Overviwe of permission controls > Administrative user controls.

Projeto de interface para Player de Som Neste projeto será feito um player bastante simples, que servirá como revisão do conteúdo estudado até agora. Os requisitos do player são: - Carregar os arquivos de um XML.

- Mostrar cada uma das músicas com uma foto ao lado da descrição do arquivo (nome da música, autor, álbum).

- Ao clicar a música começa a tocar. - Uma imagem maior deve aparecer no player.

- Enquanto ela estiver sendo carregada, uma barra de progresso indica o carregamento. - Deve ser possível trocar o volume.

Para começar, criaremos o arquivo .fla.


________________________________________________________________________________________ 55 2010 Alfamídia `Prow

Depois, criaremos as classes para o modelo de dados e para a view de cada uma das músicas.

Criar o arquivo .fla 1- Crie uma pasta nova (se não houver uma), com o nome de player. 2- Crie um arquivo novo no flash dentro desta pasta.

3- Arraste para o placo uma cópia do componente ProgressBar e outra do Slider. 4- Defina a classe do documento como Player.

Criar o arquivo Player.as Este é o arquivo responsável por fazer o carregamento do XML para o player. Estes scripts estão neste arquivo pois, segundo as especificações do player, esta operação deve ser executada apenas uma vez. Caso a especificação fosse “permitir carregar várias listas de arquivos”, provavelmente este não seria o melhor desenho.

1- Defina a estrutura do arquivo: package, import, class e construtor. Não esqueça que esta classe deve extender Sprite.

2- Importe as classes que farão o carregamento do XML (URLLoader, URLRequest e Event).


import flash.net.URLLoader;

import flash.events.Event;

3- Crie uma variável url, do tipo URLRequest, que recebe o XML das músicas. public var url:URLRequest= new URLRequest("musicas.xml");

4- Crie uma variável urlloader, do tipo URLLoader, que recebe um novo URLLoader. public var urlloader:URLLoader= new URLLoader();

5- Declare a variável do tipo XML (não recebe nada por enquanto). public var xml:XML;


________________________________________________________________________________________ 56 2010 Alfamídia `Prow

6- No construtor, faça com que o URLLoader carregue o URLRequest. urlloader.load(url);

7- Registre-o para ser notificado do evento COMPLETE, disparando o método loadXML. urlloader.addEventListener(Event.COMPLETE, loadXML);

8- Defina o método loadXML. public function loadXML(evt:Event):void{

}

9- Atribua a xml o valor da propriedade data deste evento. Faça o casting para XML para evitar erros de conversão de tipo (coerção). xml=XML(evt.currentTarget.data)

10- Salve todos os arquivos.

Discussão da arquitetura

Cada item de som deverá estar descrito em um objeto modelo, que conterá apenas as informações a respeito dele. Este objeto será um SoundItem.

Os objetos SoundItem terão representação visual na classe SoundItemView.

Cada SoundItemView deve possuir um SoundItem.

O player será um SoundPlayerView. Cada vez que se clicar em um SoundItemView, um evento será despachado, notificando SoundPlayerView, que deve fazer as mudanças necessárias para trocar o som.

SoundItem.as 1- Crie um arquivo com o nome de SoundItem e defina a estrutura. Este não será um objeto visual, portanto não precisa descender de Sprite. Esta classe define três propriedades: musica, foto e thumb. Todas são Strings. public var musica:String;

public var thumb:String;

public var foto:String;


________________________________________________________________________________________ 57 2010 Alfamídia `Prow

2- Faça com que ela recebe estes dados no construtor e passe o valor recebido no construtor para as propriedades. public function SoundItem(param_musica:String, param_thumb:String, param_foto:String){

musica=param_musica;

thumb=param_thumb;

foto=param_foto;

}

SoundItemView.as Esta será a classe que representa cada uma das opções da lista. Ela deve descender de Sprite. 1- Defina a estrutura da classe e faça com que ela descenda de Sprite.

2- Serão necessárias diversas classes: a- TextField e TextFormat para dar as informações das músicas. import flash.text.TextField;

import flash.text.TextFormat;

b- URLRequest, Loader e Event para carregar as imagens thumbnail. import flash.display.Loader;



c- Sound e ID3Info para ler os dados das músicas. import flash.media.Sound;

import flash.media.ID3Info; 3- Cada instância desta classe define uma propriedade item, do tipo SoundItem. Crie esta propriedade. public var item:SoundItem;

4- Crie variáveis para a caixa de texto, para o formato do texto, para o loader, para o som e um sprite para conter tudo isso. public var caixa:TextField= new TextField();

public var format:TextFormat= new TextFormat();


________________________________________________________________________________________ 58 2010 Alfamídia `Prow

public var loader:Loader=new Loader();

public var sp:Sprite;

public var sound:Sound;

5- Modifique o construtor para que receba um SoundItem como parâmetro, e faça-o passar este parâmetro para a propriedade SoundItem recém declarada. public function

SoundItemView(item_param:SoundItem):void{

item=item_param;

6- Ainda dentro do construtor: a- Atribua ao Sprite um novo Sprite e coloque-o no palco. sp= new Sprite();

addChild(sp);

b- Atribua às propriedades font, size e color do format os valores “Arial”, 12 e 0x263440. format.font="Arial";

format.size=12;

format.color=0x263440;

c- Posicione a TextField em x=35, atribua false à propriedade selectable e faça-a ajustada à esquerda. Coloque-a no palco. caixa.x=35;

caixa.autoSize="left";

caixa.selectable=false;

sp.addChild(caixa);

d- Coloque o Loader no Sprite e faça com que carregue a propriedade thumb do SoundItem. sp.addChild(loader);

loader.load(new URLRequest(item.thumb));

e- Registre-o para ser notificado do evento COMPLETE e disparar o método loadThumb. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadThumb);


________________________________________________________________________________________ 59 2010 Alfamídia `Prow

f- Atribua à Sound um novo Sound. Faça-o carregar a propriedade musica do SoundItem. sound= new Sound(new URLRequest(item.musica));

g- Registre-o para ser notificado do evento ID3 e disparar o método onID3. sound.addEventListener(Event.ID3, onID3);

7- Defina o método onID3. public function onID3(event:Event):void{

}

8- Declare uma variável do tipo ID3Info.

var soInfo:ID3Info = ID3Info(sound.id3);

9- Passe para a propriedade text da TextField as propriedades songName, álbum a artist do ID3Info. caixa.text= soInfo.songName+" - "+soInfo.artist+" - "+soInfo.album;

10- Atribua o TextFormat à TextField. caixa.setTextFormat(format);

Volte para Player.as Agora percorreremos o XML em um loop e instanciaremos várias vezes as views. 1- Importe a classe MouseEvent. import flash.events.MouseEvent;

2- Crie duas propriedades novas: uma do tipo SoundItem e outra do tipo SoundItemView. public var item:SoundItem;

public var itemView:SoundItemView;

3 - No método loadXML faça um loop de 0 até o tamanho do XML. for(var i:int=0; i<xml.musica.length(); i++){

}

4- A cada iteração: a- Crie um novo objeto SoundItem. item= new SoundItem(xml.musica[i].@arquivo,


________________________________________________________________________________________ 60 2010 Alfamídia `Prow

xml.musica[i].@thumb,

xml.musica[i].@foto);

b- Passe para SoundItemView um novo SoundItemView coom este SoundItem recém criado. itemView=new SoundItemView(item);

c- Faça com que este SoundItemView registre-se para ser notoficado do clique do mouse, e dispare o método onChoose. itemView.addEventListener(MouseEvent.CLICK, choose);

d- Coloque o SoundItemView no palco. addChild(itemView);

e- Posicione seu y para que não se sobreponham. itemView.y=130+i*40;

5- Defina o método onChoose. public function choose(evt:MouseEvent):void{

}

SounPlayerView.as Este será o arquivo que efetivamente tocará as músicas escolhidas.

1- Crie um arquivo novo e defina estrutura dele. Este deve extender Sprite.

2- Importe as seguintes classes: a- Loader e URLRequest: carregar as imagens. import flash.display.Loader;


b- Sound, SoundChannel e SoundTransform: para lidar com os sons. import flash.media.Sound;

import flash.media.SoundChannel;

import flash.media.SoundTransform;

c- Event e ProgressEvent. import flash.events.Event;


________________________________________________________________________________________ 61 2010 Alfamídia `Prow

import flash.events.ProgressEvent;

d- ProgressBar, Slider e SliderEvent, para os componentes. import fl.controls.ProgressBar;

import fl.events.SliderEvent;

import fl.controls.Slider;

3- Declare propriedades para o Sprite, Loader,ProgressBar, Slider, Sound, SoundChannel e SoundTransform. Atenção: o único que NÃO recebe nada é o Sound.

public var sp:Sprite= new Sprite();

public var loader:Loader= new Loader();

public var pb:ProgressBar= new ProgressBar();

public var sl:Slider= new Slider();

public var sound:Sound;

public var channel:SoundChannel=new SoundChannel();

public var stransform:SoundTransform =

new SoundTransform();

4- Declare uma propriedade SoundItem. public var item:SoundItem;

5- No construtor, faça com que esta classe se registre para ser notificada do evento CHANGE, e disparar o método onChange. addEventListener(Event.CHANGE, onChange);

6- Coloque o Sprite no palco.

addChild(sp);

7- Define o x e o y da ProgressBar como 30, faça com que sua propriedade source seja o objeto contentLoaderInfo do Loader. pb.x=30;

pb.y=30;

pb.source=loader.contentLoaderInfo;


________________________________________________________________________________________ 62 2010 Alfamídia `Prow

8- Coloque o Slider no Sprite, faça com que seu x seja 30 e o y 110, sua largura 100. sp.addChild(sl);

sl.x=30;

sl.y=110;

sl.width=100;

9- Coloque o Loader no palco e registre-o para ser notificado do evento COMPLETE e disparar o método onComplete. sp.addChild(loader);

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, complete);

10- Defina o evento onComplete. Nele faça o Loader ficar com alpha = 0.5, e remova a ProgressBar do Sprite. public function complete(evt:Event):void{

loader.alpha=0.5;

sp.removeChild(pb);

}

11- Defina o evento onChange. public function onChange(evt:Event):void{

}

12- Nele: a- Coloque a ProgressBar no Sprite.

sp.addChild(pb);

b- Faça com que o Loader carregue a propriedade foto do SoundItem. loader.load(new URLRequest(item.foto));

c- Atribua ao Sound um novo Sound. sound= new Sound();

d- Faça com que ele carregue a propriedade musica do SoundItem. sound.load(new URLRequest(item.musica));

e- Registre-o para responder ao evento COMPLETE e disparar o método loadSound. sound.addEventListener(Event.COMPLETE,

loadSound);


________________________________________________________________________________________ 63 2010 Alfamídia `Prow

f- Atribua à propriedade value do Slider o valor zero. sl.value=0;

13- Defina o método loadSound. public function loadSound(evt:Event):void{

}

14- Nele:

a- Atribua ao SoundChannel o método play do Sound. channel=sound.play();

b- Sete a propriedade volume do SoundTransform para 0.1 stransform.volume =0.1;

c- Atribua o SoundTransform à propriedade soundTransform do SoundChannel. channel.soundTransform = stransform;

d- Registre o Slider para ser notificado do evento CHANGE, e disparar o método sliderChange. sl.addEventListener(SliderEvent.CHANGE,

sliderChange);

15- Defina o método sliderChange. public function sliderChange(evt:SliderEvent):void {

}

16- Nele:

a- Sete a propriedade volume do SoundTransform para 0.1 mais p valor do Slider atual multiplicado por 0.09 stransform.volume =0.1+ evt.target.value*0.09;

b- Atribua o SoundTransform à propriedade soundTransform do SoundChannel. channel.soundTransform = stransform;

Volte para Player.as Agora definiremos o que acontece quando se clica sobre um SoundItemView. 1- No loop do método loadXML, faça com que um novo SoundPlayerView seja colocado no palco, passando o primeiro item para ele. if(i==0){


________________________________________________________________________________________ 64 2010 Alfamídia `Prow

player= new SoundPlayerView();

player.item=item;

addChild(player);

}

2- No método onChoose:

a- Pare o SoundChannel do SoundItemView. player.channel.stop()

b- Atribua à propriedade item do SoundItemView o item correspondente. player.item=SoundItem(evt.currentTarget.item);

c- Dispare o evento CHANGE. player.dispatchEvent(new Event(Event.CHANGE));

Fig 30. VISUALIZAÇÃO DO PLAYER

Próximos Passos Nesta unidade estudamos como carregar diferentes tipos de conteúdo. Na próxima unidade, que encerra o estudo de tópicos específicos em AS3, será estudado como se comunicar com um servidor através de AMF, um formato de transmissão de dados serializados, muito mais rápido que os demais métodos.


________________________________________________________________________________________ 65 2010 Alfamídia `Prow


________________________________________________________________________________________ 66 2010 Alfamídia `Prow

Unidade 7 Comunicação com o Servidor

7.1 Solicitar, Receber e Enviar Dados para um Servidor através de AMF.

AMF (action message format) é uma forma de comunicação entre o Flash player e um servidor remoto. AMF codifica chamadas remotas a procedimentos (métodos em classes remotas) que é compactada em uma representação binária e enviada através de HTTP/HTTPS ou RTMP/RTMPS (no caso do Flash Media Server). Este formato é mais rápido que XML e troca de dados através de Strings (como URLLoader ou URLVariables). AMF, na verdade, também é mais rápido que outros métodos, como Ajax [http://www.jamesward.org/census]. Para utilizar AMF é preciso ter instalado, no servidor, uma biblioteca que serialize e deserialize os dados. No caso do php, utiliza-se a biblioteca amfphp [http://www.amfphp.org], que utiliza o formato AMF3.

Além da excelente performance, o uso de AMF traz um benefício adicional da portabilidade, pois é possível alterar os métodos remotos (até mesmo o próprio servidor) sem maiores prejuízos ao código.

Exercício 1: Olá mundo AMF! 1- Inicie o servidor wamp e teste (acessando localhost ou 127.0.0.1). Se não conseguir, encerre o IIS.

2- Antes de começar, iremos instalar a biblioteca AMFPHP 1.9. Os procedimentos para isso variam de caso a caso, de acordo com a linguagem que será utilizada.

3- Copie a pasta amfphp e cole dentro da pasta www. 4- Abra o arquivo services/OlaMundo/Ola.php

5- Veja que, além do método construtor há um método digaOi, que retorna a string “Olá mundo AMF!”.

6- Crie um arquivo .fla com o nome de ex7-1 e salve-o na pasta unidade 7. 7- Atribua a classe HelloAMF como classe do documento.

8- Crie um arquivo .as com o nome de HelloAMF, 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. 9- Importe as classes ObjectEnconding, Responder e NetConnection.


________________________________________________________________________________________ 67 2010 Alfamídia `Prow

import flash.net.ObjectEncoding;

import flash.net.NetConnection;

import flash.net.Responder;

10- Declare uma variável pública do tipo NetConnection (abre uma comunicação com o servidor). public var service:NetConnection =


11- No construtor, execute o método connect e indique o endereço do arquivo gateway.php. service.connect("/amfphp/gateway.php");

12- Execute o método call deste NetConnection. Passe como parâmetros o método remoto que deseja executar e uma instância de Responder, que vai definir os comportamentos padrão para sucesso e falha no recebimento da resposta. service.call("OlaMundo.Ola.digaOi",

new Responder(resultHandler, faultHandler));

13- Crie um método para o caso de sucesso no recebimento dos dados. public function resultHandler(result:String):void {

trace(result);

}

14- Crie um método para o caso de falha no recebimento dos dados. public function faultHandler(fault:String):void {

trace(fault);

}

15- Compile.

Exercício 2: Enviando e recebendo dados 1- Abra o arquivo services/SendingData/GetnSend.php

2- Veja que, além do método construtor há um método getsend, que retorna uma String enviada pelo Flash acrescida de outra String.

3- Crie um arquivo .fla com o nome de ex7-2 e salve-o na pasta unidade 7. 4- Atribua a classe SendingData como classe do documento.


________________________________________________________________________________________ 68 2010 Alfamídia `Prow

5- Crie um arquivo .as com o nome de SendingData, 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. 6- Importe as classes ObjectEnconding, Responder e NetConnection. import flash.net.ObjectEncoding;

import flash.net.NetConnection;

import flash.net.Responder;

7- Declare uma variável pública do tipo NetConnection (abre uma comunicação com o servidor). public var service:NetConnection =


8- No construtor, execute o método connect e indique o endereço do arquivo gateway.php. service.connect("/amfphp/gateway.php");

9- Execute o método call deste NetConnection. Passe como parâmetros o método remoto que deseja executar e uma instância de Responder, que vai definir os comportamentos padrão para sucesso e falha no recebimento da resposta. Defina o terceiro parâmetro, que são os dados que serão enviados por AMF para o método remoto. service.call("SendingData.GetnSend.getsend",

new Responder(resultHandler, faultHandler),

"Gabriela");

10- Crie um método para o caso de sucesso no recebimento dos dados. public function resultHandler(result:String):void {

trace(result);

}

11- Crie um método para o caso de falha no recebimento dos dados. public function faultHandler(fault:String):void {

trace(fault);

}

12- Compile. Envio de arquivos para um servidor

Enviar arquivos para um servidor é uma ação bastante comum, principalmente em aplicativos que funcionam como gerenciadores de conteúdo.


________________________________________________________________________________________ 69 2010 Alfamídia `Prow

No AS3 há duas classes que tratam deste tema: FileReference e FileReferenceList. A primeira, e que será objeto de atenção neste curso, envia um arquivo por vez para o servidor.

Para fazer o envio do arquivo é necessário um script no servidor. O Flash Player não pode fazer operações de transferência de arquivos. Neste curso, será usado php para fazer o upload.

Exercício 3: Enviando arquivos para um servidor 1- Abra o arquivo unidade6/upload.php e veja que ele aponta para a pasta uploadedFiles. É para lá que os arquivos deste exercícios serão enviados.

2- Crie um arquivo .fla com o nome de ex7-3 e salve-o na pasta unidade 7. 3- Atribua a classe Upload como classe do documento.

4- Insira um componente Button (Window > Components) no palco, e remova-o em seguida (o objetivo é ter os assets na biblioteca).

5- Crie um arquivo .as com o nome de Upload, 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. 6- Importe as classes seguintes:

FileReference – cuidará do envio URLRequest – aponatrá para o php e fará o envio de dados

Event – eventos do FileReference MouseEvent – eventos do mouse (clique no botão)

Button – o botão import flash.net.FileReference;



import flash.events.MouseEvent;

import fl.controls.Button;

7- Crie uma variável pública para o FileReference (neste exercício se utiliza fileRef).


________________________________________________________________________________________ 70 2010 Alfamídia `Prow

public var fileRef:FileReference =

new FileReference();

8- Crie uma variável pública para o Button (neste exercício se utiliza senButton). public var sendButton:Button= new Button();

9- No construtor, dê ao Button o label “Envia arquivos”. sendButton.label="Enviar arquivo";

10- Coloque-o no palco. addChild(sendButton);

11- Registre-o para responder ao evento clique do mouse, disparando o método onClick. sendButton.addEventListener(MouseEvent.CLICK, onClick);

12- Defina o método onClick e faça-o chamar o método browse de FileReference. public function onClick(MouseEvent:Event):void{

fileRef.browse();

}

13- No contrutor, registre o FileReference para responder aos eventos COMPLETE e SELECT, disparando, respectivamente, os métodos onComplete e onSelect. fileRef.addEventListener(Event.COMPLETE, completeEvent);

fileRef.addEventListener(Event.SELECT, selectEvent);

14- Defina o método onComplete e faça-o imprimir na tela a String “Enviado”. public function completeEvent(event:Event):void {

trace("Enviado");

}

15- Defina o método onSelect, e dentro dele:

Declare uma variável String com o conteúdo “Filedata” (neste exercício se utiliza param).

Declare uma variável do tipo URLRequest e passe ao construtor o endereço do arquivo php que fará a transferência (neste exercício se utiliza req).

Execute o método upload de FileReference, passando como parâmetros param, req e false.

public function selectEvent(event:Event):void{


________________________________________________________________________________________ 71 2010 Alfamídia `Prow

var param:String = "Filedata";

var req:URLRequest =

new URLRequest('http://localhost/upload.php');

fileRef.upload(req, param, false);

}

16- Compile e veja o conteúdo da pasta uploadedFiles.

Exercício 4: Mostrando uma barra de progresso e o nome do arquivo que está sendo enviado. 1- Salve o arquivo ex7-3 como ex7-4.

2- Defina a classe do documento como UploadProgress. 3- Salve Upload como UploadProgress e modifique o nome da classe e do método construtor para que fiquem com o mesmo nome do arquivo. 4- Arraste um componente ProgressBar (Window > Components) no palco, e remova-o em seguida (o objetivo é ter os assets na biblioteca). 5- Importe as classes ProgressBar e Progressevent. import flash.events.ProgressEvent;

import fl.controls.ProgressBar;

6- Declare uma variável pública para a ProgressBar (neste exercício se utiliza pb). public var pb:ProgressBar=new ProgressBar();

7- No construtor, defina a faixa de progresso da ProgressBar de 0 até 100. pb.setProgress(0, 100);

8- Defina o y da Progressbar como 50 e coloque-a no palco. pb.y=50;

addChild(pb);

9- Defina a propriedade source de PorgressBar como o FileReference. pb.source=fileRef;

10- Registre o FileReference para responder ao evento de progresso PROGRESS, disparando o método progressEvent. fileRef.addEventListener(ProgressEvent.PROGRESS, progressEvent);

11- Defina o método progressEvent, e nele execute o método setProgress da ProgressBar e passe os parâmetro bytesLoaded e bytesTotal do evento.


________________________________________________________________________________________ 72 2010 Alfamídia `Prow

public function progressEvent(event:ProgressEvent):void {

pb.setProgress(event.bytesLoaded, event.bytesTotal);

}

12- Compile e teste com um arquivo de tamanho médio.

Próximos Passos Nesta unidade estudamos como receber e fazer o envio de dados para um servidor e também como enviar arquivos. Estas são duas ações bastante comuns. O AS3 implementa mecanismos para desempenhar estas funções em que seja necessário contato com os códigos remotos. Apenas é preciso fornecer a localização deles. Este modelo garante bastante independência, pois permite liberdade de escolher que tipo de tecnologia de servidor utilizar.

Na próxima unidade será iniciada a discussão da orientação a objetos. Até o presente ponto, sabemos apenas como definir um pacote, classes e métodos e propriedades públicas. Com um pouco mais de informação seremos capazes de construir projetos maiores.


________________________________________________________________________________________ 73 2010 Alfamídia `Prow

Unidade 8 Orientação a Objetos no AS3

Deste ponto em diante, será mostrado como escrever código orientado a objeto em AS3. No entanto, não estudaremos orientação a objeto em profundidade. Há muitas questões teóricas a respeito de projeto que são debatidas a este respeito, e este tipo de assunto foge do escopo deste curso. Também não serão estudadas design patterns, por necessitarem de uma compreensão maior dos problemas comuns de projeto para serem compreendidas.

8.1 Começando um Projeto Depois de definidas quais as classes e quais os métodos e propriedades de cada classe, começa a etapa de implementação. Ao escrever as classes, para evitar conflitos com nomes de outras classes de outros projetos, usamos packages.

8.2 Declarar uma Classe Para declarar uma classe usa-se a forma:

modificador class Identificador{

}

8.3 Atributos de Classes No AS3, por default, uma classe, se não tem um atributo definido, pode ser acessada apenas pelas classes que estão no mesmo package, isto é, seu atributo é internal. Caso se deseje que a classe seja acessada for do package, seu atributo deve ser public.

Apesar de todas as classes que foram escritas até este momento serem usadas apenas dentro de seu próprio package, nenhuma delas pode ter o atributo


________________________________________________________________________________________ 74 2010 Alfamídia `Prow

internal, pois, por exigência do compilador, é preciso que classes de documento sejam declaradas public.

Para definir um atributo, usa-se a seguinte forma: atributo class Identificador{

}

No AS3 não se pode declarar uma classe abstrata.

8.4 Métodos Construtores Um método construtor é um conjunto de instruções utilizados para inicializar uma classe. Assim que uma classe é instanciada, este método é disparado. Ele precisa ter o mesmo nome da classe.

No AS3 todos os construtores precisam ser public. A razão para esta decisão pode ser encontrada em http:kuwamoto.org/2006/04/05/as3-on-the-lackprivate-and-protected-constructors.

A falta de construtores privados torna a implementação de Singleton um pouco diferente do usual, mas ainda assim ela está completamente correta. Construtores podem receber parâmetros, mas não podem retornar nada.

8.5 Propriedades ou Variáveis de Instância É uma variável relacionada a um objeto. Não confundir com variáveis locais, que são as variáveis declaradas dentro de métodos. Para declarar uma propriedade usa-se a forma: atributo var identificador;

8.6 Atributos de Propriedades Local do código e relação à

Public internal protected private


________________________________________________________________________________________ 75 2010 Alfamídia `Prow

propriedade Classe que contém a definição

Permitido Permitido Permitido Permitido

Classes descendentes

Permitido Permitido Permitido Proibido

Classe diferente, mesmo package

Permitido Permitido Proibido Proibido

Package e classe diferente

Permitido Proibido Proibido Proibido

Costuma-se usar um “_” antes de identificadores de propriedades privadas, por exemplo: private var _somProp:SomeKind;

8.7 Métodos É um conjunto de instruções de uma função. Pra criar um método usa-se a forma: atributo function nome(){

}

8.8 Atributos de Métodos São os mesmos das propriedades.

8.9 Getters e Setters Getters e setters são métodos que permitem o acesso e modificação de variáveis (na maioria variáveis privadas). Assim, ao invés de declarar um método que define o nome de um item como item.setName(“Apostila de AS3”);

Utiliza-se: item.name=“Apostila de AS3”;


________________________________________________________________________________________ 76 2010 Alfamídia `Prow

Neste caso, se está utilizando um método setter para modificar o valor da propriedade privada (digamos que seja _name).

Podemos também querer acessar o valor de uma propriedade privada. Nesse caso, utilizamos um método getter. No mesmo exemplo, pode-se passar o nome do item como propriedade text em uma caixa de texto. caixa.text=item.name;

Nos casos mostrados acima, os métodos ficariam como segue: private var _name:String;

public function set name(value:String):void{

_name=value;

}

public function get name():String{

return _name;

}

8.10 Propriedades Estáticas Propriedades estáticas devem ser usadas quando se tem um dado que se relaciona com toda a classe, ao invés de dados que variam de instância para instância. Por exemplo, as propriedades altura e largura, em uma classe que cria um botão, não devem ser estáticas, pois se pode querer criar botões com tamanhos diferentes. Porém uma propriedade tamanhoPadrão deve ser estática.

8.11 Constantes É uma variável que, uma vez inicializada, nunca tem seu valor alterado. Usa-se a palavra const ao invés de var.

Normalmente seus nomes são em caixa alta: public static const DEFAULTSIZE:Number=90;

8.12 Métodos Estáticos Assim como propriedades estáticas se relacionam com toda a classe.


________________________________________________________________________________________ 77 2010 Alfamídia `Prow

8.13 Herança É o relacionamento entre duas ou mais classes, onde uma herda as definições de variáveis e métodos de outra. No entanto, é preciso ficar atento, pois herança significa mais do que reutilizar código. Se o objetivo é apenas esse, pode-se considerar utilizar composição ao invés. Para fazer com que uma classe descenda de outra, utiliza-se a palavra extends na declaração da classe.

Exercício 1: Herança 1- Crie um arquivo .fla na pasta unidade 7, e salve-o como ex7-1. 2- Não defina classe neste exercício.

3- Crie uma classe com o nome Inheritance e defina o método construtor (não é necessário extender Sprite).

4- No construtor de Inheritance, imprima a String “Inheritance”. 5- Crie um novo arquivo as e chame-o de Descendant.

6- Declare a classe (internal) e o método construtor. 7- Faça a classe extender Inheritance.

8- No construtor de Descendant, imprima a String “Descendant”. 9- No arquivo ex7-1, declare uma nova instância de Inheritance (neste exercício usa-se inh); var inh:Inheritance= new Inheritance();

10- Compile. 11- Comente a declaração de inh. //var inh:Inheritance= new Inheritance();

12- Declare uma nova instância de Descendant (neste exercício usa-se desc); var desc:Descendant= new Descendant();

13- Compile.

Métodos e propriedades estáticas não são herdadas.


________________________________________________________________________________________ 78 2010 Alfamídia `Prow

Exercício 2: Reescrever um método 1- Defina, em Inheritance, um método público com o nome “A”. Faça-o imprimir na tela a String “Inheritance´s A”. public function A():void{

trace("Inheritance´s A");

}

2- Faça o mesmo em Descendant, apenas mude a String de marcação. public function A():void{

trace("Descendant´s A");

}

3- Marque o método como override. override public function A():void{

4- Em ex7-1, chame o método A. desc.A();

5- Compile.

8.14 Prevenir Classes de Serem Extendidas e Métodos de Serem reescritos.

Use a palavra final.


________________________________________________________________________________________ 79 2010 Alfamídia `Prow

Unidade 9 Projeto Final – Galeria de Imagens

9.1 Escopo Geral O objetivo do projeto é implementar e desenvolver uma aplicação padrão que servirá como modelo para galeria de imagens, dentro da estrutura de um website. Para suporte, também serão desenvolvidos os módulos para gerenciar o carregamento dos devidos arquivos utilizados (XML, JPG e SWF), bem como a arquitetura geral do website, o padrão de menu e o modelo de navegação.

Os recursos aqui aplicados deverão ser a base para experimentação dos conteúdos abordados durante o curso, com o foco nas técnicas associadas à Programação Orientada à Objetos em AS3, utilização da API Display List e das demais classes de carregamento e controle.

Este projeto possui uma pasta (Galeria/) com a base de cada arquivo fonte a ser trabalhado (fla), bem como uma pasta (Galeria_referencia/) com versão do projeto completa e finalizada, para avaliação e comparativo com o resultado obtido.

9.2 Arquitetura O sistema prevê um módulo inicial, contendo a classe base para o menu, constituída por cada um dos objetos da classe de botões, bem como o container principal que irá administrar o carregamento e armazenar a área selecionada. Para efeitos didáticos todas as seções carregadas, exceto a de Galeria, serão desenvolvidas apenas como modelo de layout e somente em um nível, com utlização de uma única classe denominada MainInternas. A seção Galeria, a qual se destina maior parte do projeto, será desenvolvida integralmente contemplando as etapas de carregamento dos thumbnails, fotos ampliadas, rolagem dos itens, navegação seqüencial das imagens, transição entre as imagens e apersentação das informações espeíficas de cada foto, como título e texto explicativo.

O sitemap da aplicação deverá seguir a seguinte estrutura:

home.swf

index.swf

historico.swf

clientes.swf

contato.swf

galeria.swf

dadosImagem.xml

th_a.jpg

foto_a.jpg


________________________________________________________________________________________ 80 2010 Alfamídia `Prow

A estrutura das pastas deverá possuir a seguinte hierarquia: + Projeto Galeria/ (pasta raiz contendo os arquivos principais da aplicação) • índex.swf • home.swf • historico.swf • contato.swf • clientes.swf • galeria.swf • dadosImagem.xml + imgs/ (pasta das imagens carregadas pelo XML, os nomes vão sequencialmente de A a X) • th_a.jpg ... th_x.jpg • foto_a.jpg ... foto_x.jpg + src/ (pasta dos arquivos e códigos-fonte da aplicação) • projetoAS3.as3proj • índex.fla • home. fla • historico. fla • contato. fla • clientes. fla • galeria. fla + classes/ (pasta contendo as classes pricipais do projeto) + mains/ • Main.as • MainInternas.as • Galeria.as • Contato.as + movies/ • btNavegaImagens.as • mcMenu.as • mcThumbs • mcBarraLoader.as • mcBotao.as • mcContainerAreas.as • mcContainerInfos.as • mcContainerThumbs.as + utils/ • CarregaImg.as • CarregaXML.as • Plano3D + com/ (pasta contendo as classes de suporte e animação do projeto)


________________________________________________________________________________________ 81 2010 Alfamídia `Prow

O padrão de relacionamento entre as classes deverá seguir a seguinte modelo:

Objeto instanciado: / objeto extendido:

9.3 Especificação

9.3.1 Galeria Estudo de Caso A Galeria é a seção principal do projeto. Iniciaremos por ela por se tratar da área que mais congrega os conhecimentos trabalhados nesta apostila. O estudo de caso da galeria é a especificação que se destina a descrever, do ponto de vista de um usuário, quais as funcionalidades que a ferramenta deverá executar, as respostas e o comportamentos relacionado em cada interação.

MainInternas

Main

mcMenu

mcContainerArea

mcBotao

mcBarraLoader

Loader

Galeria

Contato

btNavegaImagens

mcContainerInfos

Plano3D

CarregaXML

mcContainerThumbs

mcThumb

CarregaImg


________________________________________________________________________________________ 82 2010 Alfamídia `Prow

• A ferramenta deverá proporcionar uma navegação entre uma carga de imagens previamente carregadas a partir de um arquivo XML. • Dispor horizontalmente, no rodapé do stage, uma faixa de imagens em menor escala (thumbnails) que por serem menores em dimensões e peso, facilitam o carregamento e a pré-seleção visual, por parte do usuário. • Ao passar o mouse sobre os demais thumbs da faixa, estes deverão reagir de forma a ampliar a imagem em 1.1 nas escalas X e Y, com base em seu centro. Além disso deverá haver ser executada uma transição de seu alpha atual de 0.3 para 1. • Se o número total de thumbnails carregados não couber completamente no stage, deverá ser gerada uma rolagem, caso o usuário posicione o mouse em uma distância inferior ou igual a 80 pixels, contados a partir de cada um dos limites horizontais (esquerda e direita) da tela. • Estes thumbs deverão ser inicializados em uma escala de 1 e com o alpha 0.3. • O evento de click, sobre um thumb não selecionado deverá tornar seu estado como ATIVO. Um thumb ativo deverá ter a escala fixa em 1 (não recebendo mais eventos de mouse), alpha em 1 e uma borda branca de 2 pixels. Esta ação também deverá carregar o conteúdo da imagem ampliada, seus dados textuais e disparar a transição da imagem ampliada atual, para a próxima. • Ao completar o preenchimento da lista dos thumbnails, o sistema deverá carregar no centro X e Y da tela a imagem ampliada do primeiro thumb. • Junto também deverão ser carregadas as informações textuais que acompanham a imagem. • Estas informações ficarão "minimizadas" sobre a faixa dos thumbnais, com uma prévia do título da foto e uma indicação de "+ informações". • Ao passar o cursor sobre a área "+ informações" o conteúdo completo das informações deverá expandir verticalmente, com uma animação em easing de desaceleração. • A navegação entre as imagens ampliadas deverá ser executada por meio de uma transicão que aplique um efeito de giro tridimensional, no eixo Y central da imagem. A idéia é de que a próxima imagem fique “atrás” da atual, como se foto possuisse uma "dupla face". O sentido de rotação do giro deverá respeitar o posicionamento de um thumb em relação ao outro, ou seja, se o usuário clicar em um thumb à direita do atual, o giro deverá ser no sentido da esquerda para a direita, e vice-versa. • Na tela deverão constar duas setas para navegação sequencial das imagens, posicionadas no centro vertical da imagem e nos cantos direito e esquerdos. • O evento de rollouver e rollout será limitado a um efeito de glow nas bordas da imagem. Ao sobrepor o mouse aparece o efeito, e ao retirar ele some. • O clique sobre as setas navegação deverá proporcionar o mesmo comportamento da navegação que ocorre de modo direto pelos thumbs, porém com a função de atualizar na faixa o próximo thumb correspondente à imagem apresentada. Especificação da classe Galeria.as


________________________________________________________________________________________ 83 2010 Alfamídia `Prow

A classe Galeria é responsável por instanciar cada um dos componentes da seção, bem como o montagem dos thumbs e a navegação seqüencial com o carregamento das imagens ampliadas. Package: classes.mains / Extends: MovieClip Propriedades: private var static const proximo : int private var static const anterio r: int private var sentido : int private var arquivoXM L: String private var dadosXML: CarregaXML private var mcAreaThumbs : mcContainerThumbs private var mcInfos : mcContainerInfos private var mcImgFrente :Sprite private var mcImgVerso :Sprite privat var e mcImgAtual :Sprite private var mcImgsAmpliadas:Plano3D private var btNavegaEsquerda:MovieClip private var btNavegaDireita :MovieClip Métodos: public function Galeria():void public function init():void private function carregaDados():void private function carregaImagemMaior(th:mcThumb, s:int = 0):void private function configContainerImagens():void private function configElmentosTela():void private function onNavegaDireita(e:MouseEvent):void private function onNavegaEsquerda(e:MouseEvent):void private function onMontaDadosCompletos(e:Event):void private function onImgAmpliadaCompleta(e:Event):void private function onClickThumb(e:MouseEvent):void private function onOverInfos(e:MouseEvent):void private function onOutInfos(e:MouseEvent):void private function onResizeTela(e:Event = null):void private function onRender(e:Event):void Especificação da classe CarregaXML.as Classe que gerencia o carregamento e tratamento do arquivo XML. Package: classes.utils / Extends: EventDispatcher Propriedades: public static const COMPLETE:String private var _arquivo:String private var _dados:Array private var ldr:URLLoader Métodos: public function CarregaXML($arquivo:String, $carrega:Boolean = true):void


________________________________________________________________________________________ 84 2010 Alfamídia `Prow

public function get arquivo():String public function get dados():Array public function carrega($arquivo:String):void private function estruturaDados($listaXML:XML):void private function onArquivoCarregado(e:Event):void Especificação da classe mcContainerThumbs.as É a classe que armazena e gerencia os thumbs, desde o carregamento da instância até o controle da rolagem e eventos de redimensionamento de tela. Package: classes.movies / Extends: MovieClip Propriedades: private var _thumbAtivo:mcThumb private var _totalItens:int private var container:Sprite private var indexThumbAtivo:int private var limiteDetecaoRolagem:Number private var velocidadeRolagem:Number Métodos: public function mcContainerThumbs():void public function get thumbAtivo():mcThumb public function set thumbAtivo(value:mcThumb):void public function get totalItens():int public function novoThumb(th:mcThumb):void public function pegaThumbPorIndex(id:int):mcThumb public function pegaIndexPorThumb(th:mcThumb):int public function navegaItem(sentido:int):mcThumb private function init():void private function onRolaThumbs(e:Event):void private function onRender(e:Event):void private function onControlaLargura(e:Event = null):void Especificação da classe mcThumb.as Armazena as informações associadas a cada imagem carregada. Responde a eventos de resize do stage a controle de rolagem do texto. Package: classes. movies/ Extends: MovieClip Propriedades: private var _ativo:Boolean private var _titulo:String private var _texto:String private var _imagem:String private var mcLdr:MovieClip private var estadoOver:Number private var estadoOut:Number private var imgThumb:CarregaImg


________________________________________________________________________________________ 85 2010 Alfamídia `Prow

Métodos: public function mcThumb($dados:Object):void public function get ativo():Boolean public function set ativo(value:Boolean):void public function get texto():String public function get titulo():String public function get imagem():String public function init($d:Object):void private function configEventos():void private function onOverThumb(e:MouseEvent = null):void private function onOutThumb(e:MouseEvent = null):void Especificação da classe mcContainerInfos.as É a classe que define as propriedades e caracteerísticas básicas de um thumb, como status (ativo: true / false) e eventos de rollover e rollout. Package: classes. movies/ Extends: MovieClip Propriedades: private var _ativo :Boolean private var _altura:Number private var _titulo:String private var _texto:String private var rolagem:UIScrollBar Métodos: public function mcContainerInfos():void public function get ativo():Boolean public function set ativo(value:Boolean):void public function get altura():Number public function get titulo():String public function set titulo(value:String):void public function get texto():String public function set texto(value:String):void private function configRolagem():void private function onResizeTela(e:Event = null):void private function onRender(e:Event):void Especificação da classe CarregaImg.as Classe que gerencia o carregamento de imagens bitmap. Package: classes.utils / Extends: EventDispatcher Propriedades: private static const CENTRO:String public static const TOPO_ESQUERDO:String public static const COMPLETE:String private var _posicao:String; private var _container:DisplayObjectContainer


________________________________________________________________________________________ 86 2010 Alfamídia `Prow

private var arqImg:Bitmap; private var img:String; private var ldr:Loader; private var mcLdr:MovieClip; Métodos: public function CarregaImg($img:String, $container:DisplayObjectContainer, $posicao:String = CarregaImg.TOPO_ESQUERDO):void public function get posicao():String public function get container():DisplayObjectContainer public function set container(value:DisplayObjectContainer):void private function carregar():void private function onImgCompleta(e:Event):void Especificação da classe Plano3D.as Classe container e base para o efeito de transição tridimensional, para a navegação das imagens ampliadas. Package: classes.utils / Extends: Sprite Propriedades: private static var _girando:Boolean private var_frente:DisplayObject private var _verso :DisplayObject private var containerFrente:Sprite private var containerVerso :Sprite Métodos: public function Plano3D($frente:DisplayObject = null, $verso:DisplayObject = null):void public function get frente():DisplayObject public function set frente(value:DisplayObject):void public function get verso():DisplayObject public function set verso(value:DisplayObject):void public function get girando():Boolean public function gira(sentido:int):void private function insereObjeto(ob:DisplayObject, ct:Sprite):void private function onControleDuplaFace(e:Event):void Especificação da classe btNavegaImagens.as Classe base que atribui as propriedades de status (ativo true / false) e eventos de rollover e rollout ao objeto botão que navega sequencialmente as imagens ampliadas. Package: classes.utils / Extends: Sprite Propriedades: private var _ativo:Boolean private var estadoAtivo:Number private var estadoInativo:Number


________________________________________________________________________________________ 87 2010 Alfamídia `Prow

Métodos: public function btNavegaImagens():void public function get ativo():Boolean public function set ativo(value:Boolean):void private function init():void private function onOvr(e:Event):void private function onOut(e:Event):void

9.4 Main Estudo de Caso Main é a seção responsável pelo controle geral do site, concentrando as classes que gerenciam o carregamento de cada seção, bem como o modelo de navegação, associado ao menu. • O site deverá possuir um arquivo base para carregamento e construção do menu, separadamente das demais seções, com o objetivo de tornar o carregamento e navegação entra as áreas independentes e rápido. • O menu deverá ser composto por botões retangulares, com o nome da seção e dispostos horizontalmente, alinhados no topo e canto esquerdo da tela. • Cada botão do menu deverá possuir um rollover que simule uma barra vertical subindo ao fundo, preenchendo por completo a imagem. Seu estatus inicial deverá ser inativo, mantendo um alpha de 0.6. • Ao clicar no botão, este deverá deixar a barra do fundo fixada, seu status ativo e com alpha de 1. • O clique do botão deverá executar o carregamento da área selecionada, dentro de um container central. Ao executar o carregamento, a tela atual deverá ser fechada por uma máscara de forma retangular que cubra toda a tela, com uma animação que irá reduzir sua escala até esconder completamente a seção atual. • Após fechar a máscara deverá ser carregada a barra de progresso do loader, indicando o status do carregamento durante seu progresso. • Ao completar o carregamento o loader some e a máscara anterior é então ampliada revelando a nova seção. • A entrada inicial do site deverá vir carregada com a seção Home. Especificação da classe Main.as Classe responsável por ativar o menu de navegação e como acesso ao carregamento das seções. Package: classes.mains / Extends: MovieClip Propriedades: private var areas:Array private var mcMenuAreas:mcMenu private var CONTEUDO:mcContainerArea Métodos: public function Main():void


________________________________________________________________________________________ 88 2010 Alfamídia `Prow

private function init():void private function configMenu():void private function onRender(e:Event):void private function onResizeTela(e:Event = null) Especificação da classe mcMenu.as Classe container para os botões do menu, responsável pela ordenação, instanciamento e disparo do carregamento das seções. Package: classes.movies / Extends: Sprite Propriedades: private var _areaAtual:String private var _areas:Array private var _container:mcContainerArea private var btsMenu:Array private var linkAtual:mcBotao Métodos: public function mcMenu($areas:Array):void public function get areas():Array public function set areas(value:Array):void public function get areaAtual():String public function get container():mcContainerArea public function set container(value:mcContainerArea):void public function carrega(secao:String):void private function configMenu():void private function onClickBt(e:MouseEvent):void Especificação da classe mcBotao.as Classe base para o botão do menu que atribui as propriedades de status (ativo true / false) e eventos de rollover e rollout ao objeto. Package: classes.movies / Extends: Sprite Propriedades: private var _titulo:String; private var _link:String private var _ativo:Boolean private var _inativo:Boolean Métodos: public function mcBotao($titulo:String, $link:String = ""):void public function get titulo():String public function set titulo(value:String):void public function get link():String public function set link(value:String):void public function get ativo():Boolean public function set ativo(value:Boolean):void public function get inativo():Boolean


________________________________________________________________________________________ 89 2010 Alfamídia `Prow

public function set inativo(value:Boolean):void private function configBt():void private function onOver(e:MouseEvent):void private function onOut(e:MouseEvent):void Especificação da classe mcContainerArea.as Classe que armazena a área carregada. Executa o controle de animação da máscara, dispara e controla o carregamento das seções. Package: classes.movies / Extends: Sprite Propriedades: private var _secaoAtual:String private var loaderArquivo:Loader private var barraLoader:mcBarraLoader private var statusMascara:Boolean public static const MASCARA_ABERTA :Boolean public static const MASCARA_FECHADA:Boolean Métodos: public function mcContainerArea():void public function get secaoAtual():String public function carregaSecao(secao:String):void private function init():void private function abreMascara(abre:Boolean):void private function executaCarregamento(secao:String = ""):void private function configuraLoader():void private function configuraMascara():void private function fimAnimaMascara():void private function onProgresso(e:ProgressEvent):void private function onCompleto(e:Event):void private function onRender(e:Event):void private function onResizeTela(e:Event = null):void Especificação da classe mcBarraLoader.as Classe base para a barra de progresso do loader, repondendo aos eventos de atualização de progresso. Package: classes.movies / Extends: Sprite Propriedades: private var _percentual:Number private var _raiz:DisplayObjectContainer Métodos: public function mcBarraLoader($raiz:DisplayObjectContainer):void public function get percentual():Number public function set percentual(value:Number):void public function get raiz():DisplayObjectContainer


________________________________________________________________________________________ 90 2010 Alfamídia `Prow

public function set raiz(value:DisplayObjectContainer):void public function destroy():void Especificação da classe MainInternas.as Classe genérica para definição das demais seções internas representadas por layout. Package: classes.mains / Extends: MovieClip Métodos: public function MainInternas() private function onRender(e:Event):void private function onResizeTela(e:Event = null) Especificação da classe Contato.as Classe que extende MainInternas e aplica funcionalidades básicas de validação de formulário. Package: classes. mains / Extends: MainInternas Métodos: public function Contato():void private function configForm():void private function onValidaForm(e:MouseEvent):void

apostila action flash

Documents