Apostila Action Flash

Programao ActionScript com Flash CS5
Todos os direitos reservados para Alfamdia LTDA.
AVISO DE RESPONSABILIDADE As informaes contidas neste material de treinamento so distribudas NO ESTADO EM QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implcita. Embora todas as precaues tenham sido tomadas na preparao deste material, a Processor Alfamdia LTDA. no tm qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou indiretamente, pelas instrues contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.
01/2010 Verso 1.1
Alfamdia Prow http://www.alfamidia.com.br
2010 Alfamdia LTDA.
A Alfamdia d Boas Vindas aos seus clientes e deseja um excelente treinamento.

Benefcios ao aluno - Suporte ps-treinamento via e-mail (3 consultas por 90 dias aps o trmino do curso) para tirar dvidas do contedo ministrado em aula, atravs do e-mail matricula@alfamidia.com.br; - Acesso a extranet www.alunoalfamidia.com.br para verificao de agenda e pontos do PROGRAMA FIDELIDADE; - Convnio com o estacionamento do prdio (desconto); - Avaliaes de acompanhamento e final de curso (em cada mdulo) durante todo o treinamento, garantindo a qualidade do curso. Observaes Importantes - obrigatrio que sejam salvos todos os trabalhos efetuados durante a aula, no servidor indicado pelo instrutor. - No permitido entrar em sala de aula com alimentos ou bebidas de qualquer espcie ou fumar nas dependncias da Alfamdia; - No permitida a instalao de outros Hardwares ou Softwares que no sejam os utilizados em treinamento; - O preenchimento da avaliao final de curso/mdulo condio obrigatria para que o aluno possa acionar a garantia do curso, conforme previsto na ficha de matrcula; - Somente ser fornecido certificado ao aluno com assiduidade igual ou superior a 75% do treinamento; - Qualquer necessidade de alterao na agenda ou cursos contratados inicialmente, consulte os Termos de Contratao na Ficha de Matrcula; - Contatos com a Alfamdia podem ser feitos atravs dos e-mails: matricula@alfamidia.com.br dvidas aps contratao info@alfamidia.com.br novas contrataes
2010 Alfamdia LTDA.
Adobe Flash CS5 Programao ActionScript
UNIDADE 1 1.1 1.2 1.3 1.4 UNIDADE 2 2.1 UNIDADE 3 3.1 3.1.1 3.2 3.3 3.4 3.5 3.6 UNIDADE 4 4.1 4.2 4.3 4.4 4.5 UNIDADE 5 5.1 UNIDADE 6 6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 UNIDADE 7 7.1 UNIDADE 8 8.1 8.2 8.3 8.4
ADOBE FLASH CS4 ANIMAO MULTIMDIA ................................................................................ 6 SOBRE O CURSO .......................................................................................................................... 6 ESTRUTURA DO CURSO ............................................................................................................... 6 ESTRUTURA DE DIRETRIOS ........................................................................................................ 7 CONVENES ADOTADAS NESTA APOSTILA. ................................................................................. 7 AS3...................................................................................................................................................... 9 SOBRE O AS3.............................................................................................................................. 9 CONCEITOS CHAVES DE PROGRAMAO .................................................................................... 10 VARIVEIS ............................................................................................................................... 10 Tipos Nativos do AS3 ........................................................................................................... 10 DEBUG COM TRACE( )................................................................................................................ 11 CONDICIONAIS .......................................................................................................................... 13 LOOPS ...................................................................................................................................... 15 ARRAYS ................................................................................................................................... 15 FUNES .................................................................................................................................. 17 CONCEITOS ESPECFICOS DO AS3 DISPLAY PROGRAMMING .................................................. 19 CLASSES QUE COMPE A DISPLAY API ...................................................................................... 19 INSERIR INSTNCIAS DE CLIPE DE FILME DA LIBRARY NO PALCO ................................................ 20 INSERIR OBJETOS EM CONTAINERES .......................................................................................... 24 REMOVER OBJETOS DE CONTAINERES ....................................................................................... 26 DESENHAR COM PROGRAMAO ............................................................................................... 27 EVENTOS E MANIPULAO DE EVENTOS ..................................................................................... 30 EVENTOS E MANIPULAO DE EVENTOS. ................................................................................... 30 CARREGAMENTO DE ARQUIVOS EXTERNOS ................................................................................ 37 CARREGANDO ARQUIVOS EXTERNOS ......................................................................................... 37 CARREGAR TEXTOS .................................................................................................................. 37 ACESSAR ELEMENTOS DO ARQUIVO XML ................................................................................. 40 PESQUISAR UM XML ................................................................................................................ 43 CARREGAR SONS ...................................................................................................................... 44 CARREGAR IMAGENS ................................................................................................................ 45 CARREGAR VDEOS ................................................................................................................... 49 SECURITY SANDBOXES.............................................................................................................. 51 COMUNICAO COM O SERVIDOR ................................................................................................ 66 SOLICITAR, RECEBER E ENVIAR DADOS PARA UM SERVIDOR ATRAVS DE AMF. ......................... 66 ORIENTAO A OBJETOS NO AS3 ................................................................................................. 73 COMEANDO UM PROJETO ........................................................................................................ 73 DECLARAR UMA CLASSE ........................................................................................................... 73 ATRIBUTOS DE CLASSES ............................................................................................................ 73 MTODOS CONSTRUTORES ........................................................................................................ 74
2008 Processor Alfamdia LTDA.
Programao ActionScript com Flash CS5 8.5 8.6 8.7 8.8 8.9 8.10 8.11 8.12 8.13 8.14 UNIDADE 9 9.1 9.2 9.3 9.4 9.5 9.6 9.7 PROPRIEDADES OU VARIVEIS DE INSTNCIA ............................................................................ 74 ATRIBUTOS DE PROPRIEDADES .................................................................................................. 74 MTODOS ................................................................................................................................. 75 ATRIBUTOS DE MTODOS .......................................................................................................... 75 GETTERS E SETTERS .................................................................................................................. 75 PROPRIEDADES ESTTICAS ........................................................................................................ 76 CONSTANTES ............................................................................................................................ 76 MTODOS ESTTICOS ............................................................................................................... 76 HERANA ................................................................................................................................. 77 PREVENIR CLASSES DE SEREM E XTENDIDAS E MTODOS DE SEREM REESCRITOS. ........................ 78 PROJETO DE INTERFACE PARA COMRCIO ELETRNICO .... ERRO! INDICADOR NO DEFINIDO.
CRIAR OS BOTES ................................................................... ERRO! INDICADOR NO DEFINIDO. CRIAR O MODELO DE DADOS................................................... ERRO! INDICADOR NO DEFINIDO. CRIAR A COLEO DE ITENS.................................................... ERRO! INDICADOR NO DEFINIDO. CRIAR UMA VIEW PARA A COLEO ......................................... ERRO! INDICADOR NO DEFINIDO. CRIAR UM MTODO PARA FORMATAR O PREO ......................... ERRO! INDICADOR NO DEFINIDO. CRIAR UMA VIEW PARA STORELTEMCOLLECTION..................... ERRO! INDICADOR NO DEFINIDO. TESTAR O QUE FOI FEITO AT AGORA: CRIANDO O ARQUIVO STORE.AS ....... ERRO! INDICADOR NO DEFINIDO. 9.8 CONSERTANDO A VISUALIZAO DOS ITENS: DE VOLTA A STORELTEMCOLLECTIONVIEW ..... ERRO! INDICADOR NO DEFINIDO. 9.9 SCROLLING: AINDA EM STORELTEMCOLLECTIONVIEW ............. ERRO! INDICADOR NO DEFINIDO. 9.10 MELHORANDO ONUPDATE: EM STORELTEMCOLLECTIONVIEW . ERRO! INDICADOR NO DEFINIDO. 9.11 FAZER OS ITENS ARRASTVEIS................................................. ERRO! INDICADOR NO DEFINIDO. 9.12 ALGUMAS MODIFICAES EM STORE ....................................... ERRO! INDICADOR NO DEFINIDO. 9.13 LTIMAS MODIFICAES: O CARRINHO DE COMPRAS .............. ERRO! INDICADOR NO DEFINIDO.
Unidade 1 Adobe Flash CS5 Animao Multimdia

1.1 Sobre o Curso
O curso Desenvolvedor ActionScript para Flash CS4 foi projetado para ensinar a linguagem ActionScript, com foco em criao de aplicaes no Flash CS4. Sero beneficiados designers que pretendem utilizar a linguagem para tarefas rotineiras sem recorrer ao auxlio de programadores e os programadores que pretendem aprofundar seus estudos na linguagem. Nos captulos deste curso, ser apresentada a linguagem, desde uma reviso dos conceitos-chave em programao, passando por conceitos especficos do ActionScript at a criao de uma interface de aplicao de comrcio eletrnicoEstrutura do Curso Durante o curso, o aluno ser incentivado a fazer desafios, que so pequenos programas que necessitam de cdigos que o mesmo no estudou de forma direta ou que pedem um pouco mais de esforo lgico.
1.2
Estrutura do Curso
As unidades iniciais apresentam conceitos-chave de programao; uma reviso dos contedos de lgica. A terceira comea a introduzir conceitos especficos da linguagem, como DisplayObjects, Eventos e a manipulao de certas classes importantes no cotidiano de um programador. A partir da terceira unidade, os exerccios e desafios deixam de ser escritos na Timeline, para serem escritos em classes. Na unidade sete, tratada a questo da orientao a objetos, com a posterior implementao de uma interface para comrcio eletrnico. Tambm ser seguida uma conveno para os diretrios onde os arquivos devero ser salvos, a fim de evitar problemas com localizao de arquivos externos. Sugere-se que, para manter um backup dos arquivos do curso, seja copiada a pasta Soluo dos exerccios e desafios. Todos os desafios podem ser resolvidos se olharmos na documentao (Help). Optou-se por este formato porque muitos programadores no sabem usar a documentao, e isso os torna dependentes da ajuda de outros (de colegas, de listas de discusso, de exemplos e tutoriais). Aceite os desafios e no seja este tipo de profissional!
1.3
Estrutura de diretrios
- Os exerccios e desafios de cada unidade devem ser salvos na pasta da unidade correspondente. - Os arquivos .fla dos exerccios sempre seguem o formato ex+num_unidade++num_exercicio. Por exemplo ex4-1.fla, ex3-2.fla - Os desafios, quando antes da unidade trs, seguem o mesmo padro, porm com o prefixo des. Por exemplo: des2-1.fla. - Os arquivos de classes (.as), quando depois da unidade dois tm um nome que identifica o propsito do desafio ou exerccio (por exemplo: Animate.as) - Os desafios, quando aps a unidade dois, tm a palavra Desafio adicionada ao nome. Por exemplo: AnimateDesafio.as. - Sugere-se que, ao comear um desafio, que os arquivos sejam salvos na pasta da unidade com o nome do desafio resolvido.
1.4
Convenes adotadas nesta apostila.

- Deste ponto em diante, a linguagem ActionScript 3.0 ser referida apenas como AS3. - Por questo de brevidade, quando for mencionado Flash, subentenda-se Flash CS4. - As expresses compilar e executar correspondem ao de testar o movie, e pode ser feita usando o atalho de teclado Ctrl+Enter. - As expresses imprima e rastreie indicam o uso da funo trace(). - Os nomes de variveis, mtodos e classes esto todos em ingls. Esta uma opo individual. Sugere-se que, aps escolher um idioma, mantenha-o sempre. Tambm so utilizados cones para indicar locais especiais dentro do texto. Preste ateno quando encontrar um deles: - Indica uma curiosidade, uma dica. - Indica um exerccio ou desafio sugerido. - Indica o final de uma unidade, com a apresentao da unidade seguinte.
- Indica um assunto que deve ser tratado com mais ateno, quer seja porque mais difcil ou porque uma novidade.
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. Alm disso, possvel 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 cdigo com o compilador mxmlc; - O Eclipse (www.eclipse.org/downloads/), com a compilao atravs do ANT FlashDevelop (www.osflash.org).
AS3 case sensitive, ou seja, maisculas e minsculas so diferentes! Assim, se voc escrever Movieclip, voc pode receber um erro como o da figura abaixo, portanto ateno!
Fig 1. JANELA COMPILER ERRORS
________________________________________________________________________________________ 9 2010 Alfamdia `Prow
Unidade 3 Conceitos Chaves de Programao

3.1 Variveis
O estudo das variveis, usualmente, o primeiro tpico em cursos de programao, j que estas estruturas so uma das peas fundamentais em qualquer programa. Variveis guardam dados que sero utilizados pelo programa. Elas contm um identificador nome, se preferir e um valor (figura 1). Em linguagens tipadas, tambm esto associadas a um tipo.
Fig 2. DEMONSTRAO DE VARIVEIS
Em AS3, variveis podem ser de quatro tipos: locais, de instncia, dinmicas e estticas (as definies de cada uma esto em unidades posteriores). A declarao acima um exemplo de varivel local do tipo String.
No Flash, quando voc coloca um clipe de filme, um boto ou uma caixa de texto no palco, e d a eles um nome de instncia, uma varivel criada para este objeto. Por exemplo: ao criar um clipe de filme e dar o nome de instncia myClip, a seguinte declarao criada behind the scenes: var myClip:MovieClip;
3.1.1 Tipos Nativos do AS3

Vimos que, ao declarar uma varivel, atribumos 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 orientao a objetos, sero utilizados os tipos nativos primitivos e compexos do AS3, ou seja: os que vm com o Flash CS4.
Os tipos, ou as classes que vm com o Flash CS4 no so as mesmas que vm com o Flex (um ambiente de desenvolvimento que tambm utiliza AS3).
________________________________________________________________________________________ 10 2010 Alfamdia `Prow
Assim, todos os cdigos desta apostila podero ser compilados no Flex (talvez com algumas modificaes). Os tipos primitivos so: String para valores de texto. Para reconhecer um String basta ver se o valor est entre aspas; Numricos, podendo ser de trs tipos: o Number qualquer valor numrico, inclusive fraes; o int valores inteiros positivos; o uint valores inteiros; Boleanos valores lgicos: true e false; Os tipos complexos so todas as classes que vm com o Flash CS4. Entre eles, so citados MovieClip, TextField, Date e Sprite.
3.2
Debug com trace( )

Trace ( ) uma funo global do AS3 (no est relacionada da a nenhuma classe), muito utilizada para fazer debug (verificar o estado do programa enquanto ele roda).
Exerccio1 - Declarando variveis e utilizando trace( ); 1- No Flash, crie um arquivo novo e salve como ex3-1, na pasta unidade3. 2- Crie uma varivel myName, do tipo String, e atribua a ela o seu nome. 3- Crie uma varivel mySurname, do tipo String, e atribua a ela o seu sobrenome. 4- Compile o cdigo. Se voc recebeu erros, verifique se os valores das variveis esto entre aspas. 5- Crie uma terceira varivel myFullName - do tipo String e atribua a ela a concatenao dos valores das duas variveis anteriores. 6- Imprima o resultado na tela.
________________________________________________________________________________________ 11 2010 Alfamdia `Prow
Fig 3. JANELA OUTPUT DO RESULTADO DO EXERCCIO
Exerccio 2 - Erros relacionados ao tipo 1- No Flash, crie um arquivo novo e salve como ex3-2, na pasta unidade 3. 2- Crie uma varivel myFirstInt, do tipo int e atribua a ela o valor 200; 3- Crie uma varivel 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 varivel 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.
________________________________________________________________________________________ 12 2010 Alfamdia `Prow
Programao ActionScript com Flash CS5 Fig 4. COMPILANDO O RESULTADO DO EXERCCIO
O tipo int e o uint tm 32 bits, porm 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 nmero de 32 bits ver que o resultado o que foi impresso na tela no exerccio anterior.
3.3
Condicionais
Impor uma condio para um programa executar um procedimento comum. Estas condies so expressas sob a forma de if, if / else, if / else if / else e switch.Todos os condicionais avaliam a expresso 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 comparao, ao passo que o = de atribuio.
Fig 5. EXEMPLOS COM DIVERSOS TESTES IF
________________________________________________________________________________________ 13 2010 Alfamdia `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 no. Se quiser ver a soluo, abra o arquivo na pasta solution. 1. Tente escrever um script que verifique se um nmero qualquer par. Voc vai precisar pesquisar na ajuda pelo operador modulo: %. Abra o Help e navegue conforme a figura abaixo.
________________________________________________________________________________________ 14 2010 Alfamdia `Prow
Programao ActionScript com Flash CS5 Fig 8. DEMONSTRAO DO HELP
3.4
Loops
Loops so blocos que repetem um conjunto de instrues um determinado nmero 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 so estruturas muito teis no AS3. Utiliza-se arrays para guardar dados, como as variveis. A diferena que dentro de um array cabem muitos dados. No AS3 os arrays no so 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. DECLARAO DE ARRAY
Exerccio 3 Declarao de Array 1- No Flash, crie um arquivo novo e salve como ex3-3, na pasta unidade 3.
________________________________________________________________________________________ 15 2010 Alfamdia `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 so 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 no. Se quiser ver a soluo, 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- Faa um script que procura, dentro do array, por um valor igual a vermelho.
________________________________________________________________________________________ 16 2010 Alfamdia `Prow
3.6
Funes
Funes, a exemplo dos tpicos vistos anteriormente, so peas fundamentais do AS3. Numa situao de programao na Timeline (como estamos fazendo), elas tm a funo de reaproveitar cdigo. Quando comearmos a escrever classes, elas sero os mtodos das classes. Funes podem ou no receber parmetros e podem ou no retornar valores. A figura abaixo mostra um exemplo de funo.
Fig 12. EXEMPLO DE FUNO QUE RECEBE PARMETROS E RETORNA UM VALOR.
Prximos Passos At o momento os cdigos 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 fcil qualquer programa passar de 400 linhas de cdigo. Este hbito continuo mesmo depois que foi viabilizada (e incentivada) a orientao a objeto em projetos de ActionScript, e a utilizao 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 no fazer uma transio to grande e que pode ser abrupta para muitos usurios experientes do Flash entre programao na Timeline e utilizao de classes prprias, ficaremos, nas prximas unidades, no meio termo. Usaremos classes prprias, mas uma classe por projeto, de forma que todo o cdigo poderia ser colocado dentro uma Timeline (como muitos esto acostumados a fazer). Como isso uma transio uma iniciao no entraremos em detalhes sobre alguns termos relacionados programao orientada a objetos.
________________________________________________________________________________________ 17 2010 Alfamdia `Prow
________________________________________________________________________________________ 18 2010 Alfamdia `Prow
Unidade 4 Conceitos Especficos do AS3 Display Programming

4.1 Classes que Compe a Display API
A Display API a API do AS3 que gerencia os elementos grficos que so colocados no palco. Ela constituda de uma srie de classes, que estendem umas s outras como mostra a imagem abaixo. Voc pode acompanhar a discusso 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 tm ou fazem. Tambm 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 no podem interagir com o usurio nem conter outros objetos visuais e InteractiveObject, que define uma linha de descendncia de classes que permitem interao. A terceira linha mostra classes que podem interagir com o usurio mas no podem conter outros objetos visuais e DisplayObjectContainer.
________________________________________________________________________________________ 19 2010 Alfamdia `Prow
A quarta linha mostra classes que podem interagir com o usurio e que podem conter outros objetos visuais. A quinta linha mostra MovieClip, que um Sprite com frames.
4.2 Inserir Instncias de Clipe de Filme da Library no Palco

Para demonstrar o procedimento, sero feitos dois exerccios.
Exerccio1 - Inserindo instncias 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 preferncia ao smbolo. 3- Remova-o do palco. 4- Abra a Library e clique com o boto direito no clipe de filme. 5- Selecione a opo Linkage e configure a caixa como mostra a figura.
Fig 14. JANELA LINKAGE PROPERTIES
6- Abra as Actions do arquivo e escreva o seguinte cdigo.
Fig 15. ACTIONS
7- Compile o programa.
________________________________________________________________________________________ 20 2010 Alfamdia `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;
Exerccio 2 Usando Classe externa Este ser o procedimento padro deste ponto em diante, at comear o estudo da orientao a objeto. Os passos so 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 necessrias (varia caso a caso). - Declarar o mtodo construtor com o mesmo nome do arquivo .as. - Colocar o cdigo dentro do mtodo construtor. 1- No Flash, salve o arquivo ex4-1 como ex4-2, na pasta unidade4. 2- Apague o cdigo 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 extenso atribuda ser .as. 5- Neste arquivo, insira o seguinte cdigo.
________________________________________________________________________________________ 21 2010 Alfamdia `Prow
Fig 17. CDIGO INSERIDO NO PAINEL ACTION
6. Salve e compile o .fla.
Afinal o que est acontecendo? Estamos comeando, de forma bastante superficial, o estudo da orientao a objetos no AS3. Todos os conceitos que precisaremos nesta etapa intermediria do curso esto ilustrados no cdigo recm 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 duplicaes (duas classes podem ter nomes iguais, se estiverem em packages diferentes). Neste cdigo, no indicamos a pasta porque a mesma do arquivo .fla.
Linha 2: import
a instruo para importar as classes externas que iremos utilizar. Neste caso importamos MovieClip, porque a classe base para FirstClass (que extende MovieClip). Linha 4: public
________________________________________________________________________________________ 22 2010 Alfamdia `Prow
o atributo da classe. Significa que classes fora do package podem acess-la. Existem outros atributos, que sero 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 mtodos 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. conveno usar inicial maiscula em nomes de classes. Linha 8: public function FirstClass
o mtodo construtor. No modelo que estamos utilizando definir uma classe como base para um arquivo .fla o mtodo construtor automaticamente executado. Um mtodo construtor, como o nome denota, executado toda vez que uma cpia instncia da classe criada; no precisamos cham-lo explicitamente. Ele deve ter o mesmo nome da classe.
Desafio1 : Qual classe implementa o mtodo addChild? Este um desafio. Voc pode aceitar ou no. Se quiser ver a soluo, abra o arquivo na pasta solution. 1- Qual classe implementa o mtodo addChild? 2- Qual o tipo de retorno do mtodo addChild? O que isso significa? 3- Porque o cdigo seguinte no vlido? var myFirstShape:Shape = new Shape(); var mySecondShape:Shape = new Shape(); myFirstShape.addChild(mySecondShape);
Desafio2: Posicionando instncias de clipes de filme com o loop for Este um desafio. Voc pode aceitar ou no. Se quiser ver a soluo, abra o arquivo PlaceMovieDesafio.as.
________________________________________________________________________________________ 23 2010 Alfamdia `Prow
1- Abra o arquivo des4-2. Veja que na Library existe um clipe de filme com nome de classe associado (como no exerccio 4-1 e 4-2). 2- O desafio : posicione quatro instncias 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 exerccio. Exerccio 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 (boto direito no smbolo na Library e escolher Linkage). No exerccio 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 mtodo construtor. 7- No esquea de importar a classe base, ou seja: MovieClip
________________________________________________________________________________________ 24 2010 Alfamdia `Prow
Programao ActionScript com Flash CS5 Fig 19. PAINEL ACTIONS
Ateno! Fica combinado que os passos acima listados so o procedimento padro para criar uma classe e associ-la a um arquivo .fla. Nos exerccios seguintes, estes passos no sero detalhados, apenas indicados por uma instruo 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 varivel public para o MovieClip da Library (no exerccio tem o nome de myClip). As variveis da classe, ou melhor, propriedades da classe, so declaradas fora de qualquer mtodo. O melhor lugar logo aps a declarao de class. 10- Crie uma varivel public que contm uma instncia 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 instncia de Sprite no palco. 12- Coloque a instncia 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 prximos passos como desafios. Se voc preferir, pode olhar a soluo na imagem.
________________________________________________________________________________________ 25 2010 Alfamdia `Prow
15- Crie uma caixa de texto dentro do Sprite (container), coloque texto dentro dela e a desloque para que no fique sobreposta ao clipe de filme. Para isso voc precisa saber: Qual classe representa caixas de texto. Qual o pacote contm caixas de texto. Descubra tudo isso olhando o Help.
Fig 20. CDIGO COMPLETO DO EXERCCIO
4.4
Remover Objetos de Containeres

Remover objetos de containeres bastante simples. Assim como existe um mtodo para inserir objetos visuais, existe um para remov-los, chamado removeChild( ).
Exerccio 4: Removendo objetos de containeres
________________________________________________________________________________________ 26 2010 Alfamdia `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 mtodo construtor para coincidir com o nome do arquivo (RemoveObject). 5- Remova a caixa de texto utilizando o mtodo removeChild(). container.removeChild(myText);
4.5
Desenhar com Programao

Para desenhar utilizaremos a classe Graphics, que define os mtodos para fazer retngulos, crculos, definir linhas de contorno e preenchimentos. Abra a ajuda e procure pela classe Graphics, procurando descobrir: Sua lista de mtodos. De quem ela descende. Em qual package ela se encontra.
No texto de apresentao da classe encontramos diversas informaes relevantes. Vemos que todos os objetos que suportam desenho incluem uma propriedade graphics. Essa propriedade contm um objeto Graphics. Tambm descobrimos que no possvel instanciar Graphics (new Graphics() causa um erro), e que no podemos extender Graphics. Depois de estudar a classe Graphics, procure no Help pela classe Shape. Veja se ela tem uma propriedade graphics
Exerccio 5: Desenhando com programao 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- Faa com que a classe Draw extenda Sprite. 5- Defina os elementos bsicos (package, nome da classe, mtodo construtor e classe base que deve ser importada)
________________________________________________________________________________________ 27 2010 Alfamdia `Prow
Porque antes extendamos MovieCLip e agora estamos extendendo Sprite? apenas uma questo de decidir entre ter ou no keyframes. Como no pretendemos ter keyframes neste exemplo, podemos usar Sprite como classe base. Nos exemplos anteriores, possvel substituir MovieClip por Sprite (se fizer isso no esquea 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 varivel publica, do tipo Sprite para ser um container do Shape. 8- Defina uma varivel publica do tipo Shape. public var container:Sprite= new Sprite(); public var shape:Shape = new Shape(); 9- No mtodo 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 crculo com x e y iguais a 30 e dimetro igual a 30, na propriedade graphics do objeto tipo Shape. shape.graphics.drawCircle(30,30,30);
________________________________________________________________________________________ 28 2010 Alfamdia `Prow
12- Finalize chamando o mtodo 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 ATRAVS DO ACTIONSCRIPT
Prximos Passos Nesta unidade estudamos classes que compe a Display API, que permite, entre outras coisas, inserir objetos visuais no palco e desenhar atravs de scripts. H mais ainda para estudar sobre esta API, o que ser feito ao longo do curso. Na prxima unidade estudaremos eventos, para poder interagir com o usurio.
________________________________________________________________________________________ 29 2010 Alfamdia `Prow
Unidade 5 Eventos e Manipulao de Eventos

5.1 Eventos e Manipulao de Eventos.
Um evento , em termos gerais, uma ocorrncia em tempo de execuo 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 CDIGO
Na figura acima, temos que: Linha 11: registro do objeto someButton a um evento CLICK, do tipo MousEvent, que executar a funo (mtodo) onClick. Linha 15: Declarao da funo (mtodo) onClick, que recebe um parmetro do tipo MouseEvent, e no retorna dados (void). Linha 16: Declarao de uma varivel do tipo Object, que recebe o target do evento (igual a someButton, neste caso). Linha 17: Declarao de uma varivel tipo String, que recebe o tipo do evento disparado (CLICK). Todas as classes que podem ser alvos de eventos descendem de EventDispatcher.
________________________________________________________________________________________ 30 2010 Alfamdia `Prow
Observe no Help a documentao da classe EventDispatcher. Observe as classes que descendem de EventDispatcher. Veja que EventDispacther possui os mtodos addEventListener e dispatchEvent. Veja o que este mtodo faz. Veja que dispatchEvent recebe como parmetro um objeto do tipo Event. Observe a classe Event. Veja quais as propriedades de um evento. Veja quais as classes descendem de Event.
Exerccio 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- Faa com que a classe Animate extenda Sprite. 5- Defina os elementos bsicos (package, nome da classe, mtodo 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 opo Linkage). Neste exerccio o nome da classe ser myClip. 7- Crie uma varivel 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 animao 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 funo que ser executada quando o evento for despachado (dispatched). addEventListener(Event.ENTER_FRAME, onEnterFrame); 12- A funo deve fazer com que myFirstClip modifique o valor de sua propriedade x, aumentando-a em 10 pixels por disparo do evento.
________________________________________________________________________________________ 31 2010 Alfamdia `Prow
public function onEnterFrame(evt:Event):void{ myFirstClip.x+=10; } 13- Compile e teste o cdigo.
Fig 23. FORMAS INSERIDAS NO PALCO
Exerccio 2: Respondendo a eventos do Mouse Neste exerccio, faremos com que o clipe de filme do exerccio anterior comece a mover-se apenas depois de clicar em um boto. O boto ser uma instncia da classe SimpleButton, e definiremos os estados UP e OVER deste boto, 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 mtodo 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 funo onEnterFrame. /* public function onEnterFrame(evt:Event):void{ myFirstClip.x+=10; } */ 7- Em primeiro lugar, importaremos as classes Shape e SimpleButton.
________________________________________________________________________________________ 32 2010 Alfamdia `Prow
import flash.display.SimpleButton; import flash.display.Shape; 8- Em seguida, definiremos duas variveis pblicas para Shape e SimpleButton. public var myButton: SimpleButton = new SimpleButton(); public var shape: Shape = new Shape(); 9- No construtor, criaremos o desenho de um crculo com x e y iguais a 30, dimetro 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 varivel ser passada aos estados upState, overState e hitTestState de SimpleButton. myButton.upState=shape; myButton.overState=shape; myButton.hitTestState=shape; 11- Finalmente colocaremos a instncia de SimpleButton no palco e compilaremos o filme. 12- Nos prximos passos faremos com que o boto responda ao evento CLICK do Mouse. Ao clicar, o clipe de filme que foi colocado no palco (myClip) deve comear 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 funo onClick para ser executada quando o evento for despachado. myButton.addEventListener(MouseEvent.CLICK, onClick); 16- Escreveremos a funo onClick, que contm uma chamada para trace. Ao clicar no boto, deve aparecer na janela de sada a string clicou. Desta forma, podemos ter certeza que o evento foi disparado. public function onClick(evt:MouseEvent):void{ trace("clicou"); }
________________________________________________________________________________________ 33 2010 Alfamdia `Prow
17- Repare que o parmetro que esta funo 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 funo onClick. public function onClick(evt:MouseEvent):void{ addEventListener(Event.ENTER_FRAME, onEnterFrame); } 21- Remova os comentrios da funo onEnterFrame. 22- Salvar, compilar e testar.
Fig 24. CLICANDO COM O MOUSE
Desafio 1: Criando diferentes estados para o boto Este um desafio. Voc pode aceitar ou no. Se quiser ver a soluo, 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 poderamos fazer isso criando dois objetos Shape diferentes, mas isso ficaria muito deselegante. O que voc deve fazer criar um mtodo pblico (por enquanto todos os mtodos e propriedades sero pblicos) com o nome estado, que deve receber um int para especificar a cor (sim, voc pode passar valores hexadecimais, que tambm so ints) e retornar um Shape.
Desafio 2: Criando um boto para parar a animao

________________________________________________________________________________________ 34 2010 Alfamdia `Prow
Este um desafio. Voc pode aceitar ou no. Se quiser ver a soluo, abra o arquivo AnimateDesafio.as. O objetivo criar um boto para parar a animao do clipe de filme depois de ela ter comeado. Sugere-se que voc utilize a classe Mouse.as porque ela j tem boa parte do cdigo pronto. Dica: quando voc quer registrar um objeto com um event voc acrescenta (add) um ouvinte. Para remover o registro, que mtodo voc usaria? Procura no Help pela classe EventDispatcher.
Desafio 3: Respondendo a eventos de foco Este um desafio. Voc pode aceitar ou no. Se quiser ver a soluo, 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 (usurio clica nela para iniciar digitao): deve ficar com uma cor de fundo (a seu critrio).
Como voc j sabe criar caixas de texto e coloc-las na cena, isso no 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 no estudou, explicitamente, neste curso, como responder a eventos de foco. Mas voc sabe tudo o que preciso para descobrir. Perceba que voc passar por situaes como essa muitas vezes.
Desafio 4: Rolagem de texto Este um desafio. Voc pode aceitar ou no. Se quiser ver a soluo, abra o arquivo ScrollDesafio.as. Objetivo implementar uma rolagem vertical simples para um texto. Haver dois botes, 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.
________________________________________________________________________________________ 35 2010 Alfamdia `Prow
Como voc j sabe desenhar atravs de scripts, fazer SimpleButton e inserir clipes de filme da Library, escolha a soluo 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
Prximos 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 prximo 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 comea a ser carregado, quando ele termina de carregar, o progresso do carregamento e os erros que podem acontecer durante o processo. A prxima unidade dedicada a este assunt
________________________________________________________________________________________ 36 2010 Alfamdia `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 trs formas: Para dados de texto (textos, XML e variveis codificadas como URLs) utiliza-se a classe URLLoader. Esta classe define um mtodo load, que indica o que deve ser carregado. Classes de som e imagem definem seus prprios mtodos load, que tambm indicam o que deve ser carregado.
Nestes casos, deve-se fornecer aos mtodos load um parmetro do tipo URLRequest, que contm o endereo do arquivo a ser carregado. O carregamento de vdeos, como no 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 endereo do arquivo a ser carregado. 3- Cria-se um objeto URLLoader. 4- Chama-se o mtodo 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 contm os dados carregados depois de COMPLETE disparar, logo, passa-se o resultado da propriedade data para a caixa de texto, varivel String ou XML que se deseja manipular.
Exerccio 1: Carregar um arquivo de texto

________________________________________________________________________________________ 37 2010 Alfamdia `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, faa-o descender de Sprite, importe a classe Sprite e defina o mtodo construtor. 4- Importe a classe TextField. import flash.text.TextField; 5- Crie uma varivel pblica do tipo TextField (no exerccio 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 varivel pblica do tipo URLRequest e passe a ../assets/someText.txt para o construtor do objeto URLRequest. Neste exerccio utiliza-se url. public var url:URLRequest = new URLRequest("../assets/someText.txt"); 11- Crie uma varivel pblica para a classe URLLoader e atribua um novo objeto URLLoader. Neste exerccio utiliza-se loader. public var loader:URLLoader= new URLLoader(); 12- No construtor, chame o mtodo 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 mtodo com o nome de onLoadText. loader.addEventListener(Event.COMPLETE, onLoadText);
________________________________________________________________________________________ 38 2010 Alfamdia `Prow
15- Dentro do mtodo 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.
Exerccio 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 cdigo do exerccio 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 mtodo 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 contedo do arquivo XML quando o evento COMPLETE disparar. trace(evt.target.data); 7- Compile.
________________________________________________________________________________________ 39 2010 Alfamdia `Prow
Fig 25. TRACE DO ARQUIVO XML
6.3
Acessar Elementos do Arquivo XML

Um arquivo XML til porque descreve dados. Assim, aps aprender como carregar o arquivo XML devemos aprender como pesquis-lo. Em primeiro lugar, o contedo de um arquivo XML deve estar em um objeto do tipo XML, como no exemplo que segue:
________________________________________________________________________________________ 40 2010 Alfamdia `Prow
var myXML:XML= <raiz> <curso nome="Animao com Flash CS4"> <sala>Horizon</sala> <turno>Tarde</turno> <periodo>5/11/2207 at 16/11/2207</periodo> </curso> <curso nome="Programao em AS3"> <sala>Enterprise</sala> <turno>Tarde</turno> <periodo>19/11/2207 at 30/11/2207</periodo> </curso> <curso nome="Edio de vdeos com Flash CS4"> <sala>Horizon</sala> <turno>Tarde</turno> <periodo>03/12/2207 at 14/12/2207</periodo> </curso> </raiz> Para ilustrar como utilizar a classe XML observaremos alguns exemplos: Para acessar a sala do primeiro curso: xml.curso[0].sala Para acessar o nome do primeiro curso: xml.curso[0].@nome
Exerccio 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 mtodo construtor para ficarem iguais ao nome do arquivo. 3- Crie uma varivel pblica do tipo XML (no exerccio utiliza-se xml). public var xml:XML; 4- Dentro do mtodo onLoadText, atribua a esta varivel XML o contedo de data. xml=evt.target.data;
________________________________________________________________________________________ 41 2010 Alfamdia `Prow
ou xml=loader.data; 5- Compile.
O que est acontecendo? Na documentao, o tipo de retorno da propriedade data da classe URLLoader *, ou seja: sem tipo (untyped). Porm, isso no significa que o objeto evt.target.data no 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 no String... Se voc tem dvidas, veja no Help se elas esto 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. VISUALIZAO DO XML
________________________________________________________________________________________ 42 2010 Alfamdia `Prow
6.4
Pesquisar um XML
A pesquisar em um XML pode ser feita com um loop for ou for each, por exemplo. Porm, h uma forma mais direta de fazer isso, como no exemplo que segue. trace(xml.curso.(@nome=="Programao em AS3")); /*Retorna <curso nome="Programao em AS3"> <sala>Enterprise</sala> <turno>Tarde</turno> <periodo>19/11/2207 at 30/11/2207</periodo> </curso> */ A linha a seguir: trace( getQualifiedClassName( xml.curso.(@nome=="Programao em AS3") ) ); por sua vez, retorna XMLList, o tipo do dado retornado. XMLList til quando desejamos tratar de pedaos do XML.
Desafio1: Pesquisando um XML Este um desafio. Voc pode aceitar ou no. Se quiser ver a soluo, 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. Tambm pode escolher se quer carregar o arquivo XML ou atribuir o contedo do arquivo someXML.xml uma varivel do tipo XML.
________________________________________________________________________________________ 43 2010 Alfamdia `Prow
6.5
Carregar Sons
O processo de carregar sons parecido com os estudados anteriormente. Utilizaremos um objeto do tipo URLRequest, e o mtodo load ser o da classe Sound.
Exerccio 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 mtodo 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 varivel pblica do tipo URLRequest e passe para seu construtor o arquivo ../assets/asound.mp3 (no exerccio utiliza-se url). public var url:URLRequest = new URLRequest("../assets/asound.mp3"); 6- Crie uma varivel pblica do tipo Sound e atribua um novo Sound exerccio utiliza-se sound). public var sound:Sound= new Sound(); 7- No construtor, atribua a varivel URLRequest ao mtodo 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 mtodo onLoadSound. sound.addEventListener(Event.COMPLETE, onLoadSound); 10- Quando o mtodo onLoadSound executar, o som deve comear a tocar. public function onLoadSound(evt:Event):void{ evt.target.play(); (no
________________________________________________________________________________________ 44 2010 Alfamdia `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 mtodo load de um outro objeto. Porm, no caso de imagens, este objeto no , 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.
Exerccio 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 mtodo 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 varivel pblica do tipo URLRequest e passe para seu construtor o arquivo ../assets/aguape.jpg (no exerccio utiliza-se url). public var url:URLRequest = new URLRequest("../assets/aguape.jpg"); 6- Crie uma varivel pblica do tipo Loader e inicialize com um novo Loader (no exerccio utiliza-se loader). public var loader:Loader= new Loader(); 7- No construtor, passe o URLRequest para o mtodo load do Loader. loader.load(url); 8- Coloque o Loader no palco. addChild(loader); 9- Compile.
________________________________________________________________________________________ 45 2010 Alfamdia `Prow
10- A imagem deve aparecer, porm, ela grande demais. Nos prximos passos iremos diminuir o tamanho dela. 11- Para diminuir o tamanho da imagem, devemos modificar propriedades do objeto que contm a imagem: o Loader. Porm, s teremos acesso a elas depois que a imagem carregar. Precisamos ento, responder ao evento COMPLETE.
O objeto que verifica o estado do carregamento de dados no 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 mtodo onComplete. loader.contentLoaderInfo.addEventListener( Event.COMPLETE, onComplete);
Fig 27. ILUSTRAO
Como se v na figura acima, a propriedade contentLoaderInfo contm 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 seo Events da classe LoaderInfo. 14- No mtodo onComplete, defina as propriedades width e height do loader para 200. public function onComplete(evt:Event):void{ loader.width=200; loader.height=200; }
________________________________________________________________________________________ 46 2010 Alfamdia `Prow
Fig 28. ARQUIVO SENDO CARREGADO EXTERNAMENTE
Desafio 2: Flexibilizando o cdigo Este um desafio. Voc pode aceitar ou no. Se quiser ver a soluo, abra o arquivo WhichLoaderDesafio.as. Use como base os arquivos do exerccio anterior. O objetivo atribuir o valor 200 s propriedades width e height do Loader, deixando o cdigo mais solto, evitando que se codifique nomes de instncia desnecessariamente (hard-coding). Desta forma, tente descobrir como, dentro do mtodo onComplete, referenciar o Loader que contm o objeto registrado ao evento. Dica: imprima, dentro do mtodo onComplete, evt.target. Voc ver que a sada 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 no. Se quiser ver a soluo, abra o arquivo LoaderDesafio.as. Use como base os arquivos do desafio anterior. O objetivo imprimir na tela strings definidas dentro de mtodos que disparam quando os eventos OPEN e PROGRESS disparam. O contedo destes mtodos so: trace(OPEN) e trace(PROGRESS) Dica: verifique, na documentao, qual package define o evento de progresso.No to difcil quanto parece.
________________________________________________________________________________________ 47 2010 Alfamdia `Prow
Exerccio 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 mtodo construtor para que fiquem iguais ao nome do arquivo. 4- Importe a classe ProgressBar. import fl.controls.ProgressBar; 5- Declare uma varivel pblica 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 cpia dele para o palco, de forma que fique na Library. Faa 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 no tem informaes sobre o arquivo sendo carregado. O objeto que tem estas referncias o LoaderInfo, acessvel atravs da propriedade contentLoaderInfo. 10- Compile.
________________________________________________________________________________________ 48 2010 Alfamdia `Prow
6.7
Carregar Vdeos
O modelo de carregamento de vdeos diferente dos demais estudados at o momento porque vdeos podem ser carregados via streaming. Para dar suporte a streaming so utilizadas classes que criam conexes com o servidor que hospeda o arquivo. Neste curso no 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 vdeos de uma forma ou de outra so praticamente iguais.
Exerccio 7: Carregando Vdeos 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 mtodo 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 ligao com o servidor streaming. import flash.net.NetConnection; import flash.net.NetStream; 5- Declare uma varivel pblica do tipo NetStream, no a inicialize ainda (no exerccio utiliza-se stream). public var stream:NetStream; 6- Declare uma varivel pblica do tipo Net Connection que recebe um novo NetConection (no exerccio utiliza-se connection). public var connection:NetConnection = new NetConnection(); 7- No construtor execute o mtodo connect de NetConnection, passando null como parmetro. Esta a diferena entre streaming e progressive download. Se fosse streaming, seria passada a url do vdeo para o mtodo connect. connection.connect(null); 8- Atribua, varivel NetStream (stream) um novo NetStream, que recebe o objeto NetConnection (connection) em seu construtor. stream= new NetStream(connection); 9- Execute o mtodo play de NetStream.
________________________________________________________________________________________ 49 2010 Alfamdia `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 documentao da classe NetStream, seo Events). Este evento contm propriedades descritivas embutidas no vdeo, e para ser usado quando houver streaming. Quando no h (como no caso presente), necessrio atribuir um mtodo 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 vdeo. O objeto client ser do tipo Object, e ele definir um mtodo com o nome de onMetaData. O tipo Object o mais indicado porque Object uma das classes dinmicas do AS3, ou seja, pode-se acrescentar mtodos e propriedades instncias de Object no run time. Alm disso, NetStream descende de Object (como todas as demais classes). 11- Crie uma varivel pblica do tipo Object, que recebe um novo Object (no exerccio utiliza-se clientObject). public var clientObject:Object = new Object(); 12- Atribua propriedade onMetaData deste Object o mtodo onMetaData. clientObject.onMetaData= onMetaData; 13- Crie um mtodo com o nome de onMetaData, que recebe como parmetro 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?
________________________________________________________________________________________ 50 2010 Alfamdia `Prow
O erro j foi sanado, porm no conseguimos ver o vdeo. Para isso, deveremos trabalhar com a classe Vdeo. 16- Importe a classe Vdeo. import flash.media.Video; 17- Crie uma varivel pblica do tipo Vdeo que recebe um novo Vdeo (no exerccio utiliza-se vdeo). public var video:Video = new Video(); 18- Execute o mtodo attachNetStream de Vdeo e passe o objeto NetStream como parmetro. video.attachNetStream(stream); 19- Coloque a instncia de Vdeo no palco. addChild(video); 20- Compile.
Fig 29. VDEO SENDO EXECUTADO
6.8
Security Sandboxes
As operaes que foram estudadas at agora podem ser permitidas ou proibidas dependendo do contexto de segurana associado ao arquivo. Para ilustrar as diferentes situaes, sero apontadas formas de carregar e enviar dados suportadas pelo AS3, e como elas se relacionam com estas permisses.
________________________________________________________________________________________ 51 2010 Alfamdia `Prow
1- Carregar contedo: Utilizar os mtodos load de Loader e Sound. Utilizar o mtodo play de NetStream. Acessar uma imagem atravs da propriedade content de Loader. Invocar draw em BitmapData. Invocar o mtodo computeSpectrum de SoundMixer. Acessar a propriedade id3 de Sound. Muitas operaes podem ser utilizadas para cross-scripting, como as citadas acima. Na documentao h uma lista que explicita as restries de segurana para cada uma delas. Carregar dados usando o mtodo load de URLLoader. Carregar dados usando o mtodo load de URLStream. Baixar arquivos atravs de FileReference.
2- Acessar dados:
3- Cross-scripting:
4- Carregar dados:
Operao
Arquivos locais
Recursos remotos dentro do domnio remoto Permitido
Recursos remotos fora do domnio remoto
Carregar contedo Acessar dados
Proibido
Permitido
Proibido
Permitido
Com permisso do distribuidor** Com permisso do criador* Com permisso do distribuidor**
Cross-scripting
Proibido
Permitido
Carregar dados
Proibido
Permitido
Sandbox remota, operaes permitidas e proibidas.

________________________________________________________________________________________ 52 2010 Alfamdia `Prow
Operao
Arquivos no-swf locais Permitido
Swf localwithfilesystem Permitido
Swf localwithnerworking Proibido
Swf localtrusted
Recursos locais
Carregar contedo Acessar dados Crossscripting
Permitido
Proibido
Permitido
n/a
n/a
n/a
Proibido
n/a
Permitido
Proibido
Com permisso do criador* n/a
Proibido
Carregar dados
Permitido
n/a
n/a
Proibido
Sandbox local-with-filesystem.
Operao
Arquivos no-swf locais Permitido
Swf localwithfilesystem Proibido
Swf localwithnerworking Permitido
Swf localtrusted
Recursos locais
Carregar contedo Acessar dados
Permitido
Permitido
Proibido
n/a
n/a
n/a
Com permisso do distribuidor** Com permisso do criador*
Crossscripting
n/a
Proibido
Permitido
Com permisso do criador* n/a
Carregar dados
Proibido
n/a
n/a
Com permisso do distribuidor**
Sandbox local-with-networking.
Operao Arquivos no-swf locais Permitido Swf localwithfilesystem Permitido Swf localwithnerworking Permitido Swf localtrusted Recursos locais
Carregar
Permitido
Permitido
________________________________________________________________________________________ 53 2010 Alfamdia `Prow
Programao ActionScript com Flash CS5 contedo Acessar dados Crossscripting Carregar dados Permitido n/a n/a n/a Permitido
n/a
Permitido
Permitido
Permitido
Permitido
Permitido
n/a
n/a
n/a
Permitido
Sandbox local-trusted. * Com permisso do criador significa que h uma chamada para Security.allowDomain() ou Security.allowInsecureDomain() ** Com permisso do distribuidor significa que foi publicado um arquivo de polticas 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 no podem acessar) ver na documentao: Programming AS3 > Flash players 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 reviso do contedo estudado at agora. Os requisitos do player so: - Carregar os arquivos de um XML. - Mostrar cada uma das msicas com uma foto ao lado da descrio do arquivo (nome da msica, autor, lbum). - Ao clicar a msica comea a tocar. - Uma imagem maior deve aparecer no player. - Enquanto ela estiver sendo carregada, uma barra de progresso indica o carregamento. - Deve ser possvel trocar o volume. Para comear, criaremos o arquivo .fla.
________________________________________________________________________________________ 54 2010 Alfamdia `Prow
Depois, criaremos as classes para o modelo de dados e para a view de cada uma das msicas.
Criar o arquivo .fla 1- Crie uma pasta nova (se no houver uma), com o nome de player. 2- Crie um arquivo novo no flash dentro desta pasta. 3- Arraste para o placo uma cpia do componente ProgressBar e outra do Slider. 4- Defina a classe do documento como Player.
Criar o arquivo Player.as Este o arquivo responsvel por fazer o carregamento do XML para o player. Estes scripts esto neste arquivo pois, segundo as especificaes do player, esta operao deve ser executada apenas uma vez. Caso a especificao fosse permitir carregar vrias listas de arquivos, provavelmente este no seria o melhor desenho. 1- Defina a estrutura do arquivo: package, import, class e construtor. No esquea que esta classe deve extender Sprite. 2- Importe as classes que faro o carregamento do XML (URLLoader, URLRequest e Event). import flash.net.URLRequest; import flash.net.URLLoader; import flash.events.Event; 3- Crie uma varivel url, do tipo URLRequest, que recebe o XML das msicas. public var url:URLRequest= new URLRequest("musicas.xml"); 4- Crie uma varivel urlloader, do tipo URLLoader, que recebe um novo URLLoader. public var urlloader:URLLoader= new URLLoader(); 5- Declare a varivel do tipo XML (no recebe nada por enquanto). public var xml:XML;
________________________________________________________________________________________ 55 2010 Alfamdia `Prow
6- No construtor, faa com que o URLLoader carregue o URLRequest. urlloader.load(url); 7- Registre-o para ser notificado do evento COMPLETE, disparando o mtodo loadXML. urlloader.addEventListener(Event.COMPLETE, loadXML); 8- Defina o mtodo loadXML. public function loadXML(evt:Event):void{ } 9- Atribua a xml o valor da propriedade data deste evento. Faa o casting para XML para evitar erros de converso de tipo (coero). xml=XML(evt.currentTarget.data) 10- Salve todos os arquivos. Discusso da arquitetura Cada item de som dever estar descrito em um objeto modelo, que conter apenas as informaes a respeito dele. Este objeto ser um SoundItem. Os objetos SoundItem SoundItemView. tero representao visual na classe
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 mudanas necessrias para trocar o som.
SoundItem.as 1- Crie um arquivo com o nome de SoundItem e defina a estrutura. Este no ser um objeto visual, portanto no precisa descender de Sprite. Esta classe define trs propriedades: musica, foto e thumb. Todas so Strings. public var musica:String; public var thumb:String; public var foto:String;
________________________________________________________________________________________ 56 2010 Alfamdia `Prow
2- Faa 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 opes da lista. Ela deve descender de Sprite. 1- Defina a estrutura da classe e faa com que ela descenda de Sprite. 2- Sero necessrias diversas classes: a- TextField e TextFormat para dar as informaes das msicas. import flash.text.TextField; import flash.text.TextFormat; b- URLRequest, Loader e Event para carregar as imagens thumbnail. import flash.display.Loader; import flash.net.URLRequest; import flash.events.Event; c- Sound e ID3Info para ler os dados das msicas. import flash.media.Sound; import flash.media.ID3Info; 3- Cada instncia desta classe define uma propriedade item, do tipo SoundItem. Crie esta propriedade. public var item:SoundItem; 4- Crie variveis 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();
________________________________________________________________________________________ 57 2010 Alfamdia `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 parmetro, e faao passar este parmetro para a propriedade SoundItem recm 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 faa-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 faa 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 mtodo loadThumb. loader.contentLoaderInfo.addEventListener(Event.COMPLET E, loadThumb);
________________________________________________________________________________________ 58 2010 Alfamdia `Prow
f- Atribua Sound um novo Sound. Faa-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 mtodo onID3. sound.addEventListener(Event.ID3, onID3); 7- Defina o mtodo onID3. public function onID3(event:Event):void{ } 8- Declare uma varivel 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.album; 10- Atribua o TextFormat TextField. caixa.setTextFormat(format); "+soInfo.artist+" -
Volte para Player.as Agora percorreremos o XML em um loop e instanciaremos vrias 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 mtodo loadXML faa um loop de 0 at o tamanho do XML. for(var i:int=0; i<xml.musica.length(); i++){ } 4- A cada iterao: a- Crie um novo objeto SoundItem. item= new SoundItem(xml.musica[i].@arquivo,
________________________________________________________________________________________ 59 2010 Alfamdia `Prow
xml.musica[i].@thumb, xml.musica[i].@foto); b- Passe para SoundItemView um novo SoundItemView coom este SoundItem recm criado. itemView=new SoundItemView(item); c- Faa com que este SoundItemView registre-se para ser notoficado do clique do mouse, e dispare o mtodo onChoose. itemView.addEventListener(MouseEvent.CLICK, choose); d- Coloque o SoundItemView no palco. addChild(itemView); e- Posicione seu y para que no se sobreponham. itemView.y=130+i*40; 5- Defina o mtodo onChoose. public function choose(evt:MouseEvent):void{ }
SounPlayerView.as Este ser o arquivo que efetivamente tocar as msicas 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; import flash.net.URLRequest; 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;
________________________________________________________________________________________ 60 2010 Alfamdia `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. Ateno: o nico que NO 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, faa com que esta classe se registre para ser notificada do evento CHANGE, e disparar o mtodo onChange. addEventListener(Event.CHANGE, onChange); 6- Coloque o Sprite no palco. addChild(sp); 7- Define o x e o y da ProgressBar como 30, faa com que sua propriedade source seja o objeto contentLoaderInfo do Loader. pb.x=30; pb.y=30; pb.source=loader.contentLoaderInfo;
________________________________________________________________________________________ 61 2010 Alfamdia `Prow
8- Coloque o Slider no Sprite, faa 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 mtodo onComplete. sp.addChild(loader); loader.contentLoaderInfo.addEventListener(Event.COMPLET E, complete); 10- Defina o evento onComplete. Nele faa 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- Faa 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- Faa 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 mtodo loadSound. sound.addEventListener(Event.COMPLETE, loadSound);
________________________________________________________________________________________ 62 2010 Alfamdia `Prow
f- Atribua propriedade value do Slider o valor zero. sl.value=0; 13- Defina o mtodo loadSound. public function loadSound(evt:Event):void{ } 14- Nele: a- Atribua ao SoundChannel o mtodo 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 mtodo sliderChange. sl.addEventListener(SliderEvent.CHANGE, sliderChange); 15- Defina o mtodo 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 mtodo loadXML, faa com que um novo SoundPlayerView seja colocado no palco, passando o primeiro item para ele. if(i==0){
________________________________________________________________________________________ 63 2010 Alfamdia `Prow
player= new SoundPlayerView(); player.item=item; addChild(player); } 2- No mtodo 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. VISUALIZAO DO PLAYER
Prximos Passos Nesta unidade estudamos como carregar diferentes tipos de contedo. Na prxima unidade, que encerra o estudo de tpicos especficos em AS3, ser estudado como se comunicar com um servidor atravs de AMF, um formato de transmisso de dados serializados, muito mais rpido que os demais mtodos.
________________________________________________________________________________________ 64 2010 Alfamdia `Prow
________________________________________________________________________________________ 65 2010 Alfamdia `Prow
Unidade 7 Comunicao com o Servidor

7.1 Solicitar, Receber e Enviar Dados para um Servidor atravs de AMF.
AMF (action message format) uma forma de comunicao entre o Flash player e um servidor remoto. AMF codifica chamadas remotas a procedimentos (mtodos em classes remotas) que compactada em uma representao binria e enviada atravs de HTTP/HTTPS ou RTMP/RTMPS (no caso do Flash Media Server). Este formato mais rpido que XML e troca de dados atravs de Strings (como URLLoader ou URLVariables). AMF, na verdade, tambm mais rpido que outros mtodos, 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. Alm da excelente performance, o uso de AMF traz um benefcio adicional da portabilidade, pois possvel alterar os mtodos remotos (at mesmo o prprio servidor) sem maiores prejuzos ao cdigo.
Exerccio 1: Ol mundo AMF! 1- Inicie o servidor wamp e teste (acessando localhost ou 127.0.0.1). Se no conseguir, encerre o IIS. 2- Antes de comear, 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, alm do mtodo construtor h um mtodo 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 mtodo construtor para que fiquem com o mesmo nome do arquivo e importe a classe base. 9- Importe as classes ObjectEnconding, Responder e NetConnection.
________________________________________________________________________________________ 66 2010 Alfamdia `Prow
import flash.net.ObjectEncoding; import flash.net.NetConnection; import flash.net.Responder; 10- Declare uma varivel pblica do tipo NetConnection (abre uma comunicao com o servidor). public var service:NetConnection = new NetConnection(); 11- No construtor, execute o mtodo connect e indique o endereo do arquivo gateway.php. service.connect("/amfphp/gateway.php"); 12- Execute o mtodo call deste NetConnection. Passe como parmetros o mtodo remoto que deseja executar e uma instncia de Responder, que vai definir os comportamentos padro para sucesso e falha no recebimento da resposta. service.call("OlaMundo.Ola.digaOi", new Responder(resultHandler, faultHandler)); 13- Crie um mtodo para o caso de sucesso no recebimento dos dados. public function resultHandler(result:String):void { trace(result); } 14- Crie um mtodo para o caso de falha no recebimento dos dados. public function faultHandler(fault:String):void { trace(fault); } 15- Compile.
Exerccio 2: Enviando e recebendo dados 1- Abra o arquivo services/SendingData/GetnSend.php 2- Veja que, alm do mtodo construtor h um mtodo 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.
________________________________________________________________________________________ 67 2010 Alfamdia `Prow
5- Crie um arquivo .as com o nome de SendingData, que descende de Sprite, declare a classe e o mtodo 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 varivel pblica do tipo NetConnection (abre uma comunicao com o servidor). public var service:NetConnection = new NetConnection(); 8- No construtor, execute o mtodo connect e indique o endereo do arquivo gateway.php. service.connect("/amfphp/gateway.php"); 9- Execute o mtodo call deste NetConnection. Passe como parmetros o mtodo remoto que deseja executar e uma instncia de Responder, que vai definir os comportamentos padro para sucesso e falha no recebimento da resposta. Defina o terceiro parmetro, que so os dados que sero enviados por AMF para o mtodo remoto. service.call("SendingData.GetnSend.getsend", new Responder(resultHandler, faultHandler), "Gabriela"); 10- Crie um mtodo para o caso de sucesso no recebimento dos dados. public function resultHandler(result:String):void { trace(result); } 11- Crie um mtodo 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 ao bastante comum, principalmente em aplicativos que funcionam como gerenciadores de contedo.
________________________________________________________________________________________ 68 2010 Alfamdia `Prow
No AS3 h duas classes que tratam deste tema: FileReference e FileReferenceList. A primeira, e que ser objeto de ateno neste curso, envia um arquivo por vez para o servidor.
Para fazer o envio do arquivo necessrio um script no servidor. O Flash Player no pode fazer operaes de transferncia de arquivos. Neste curso, ser usado php para fazer o upload.
Exerccio 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 exerccios sero 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 mtodo 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 boto) Button o boto import flash.net.FileReference; import flash.events.Event; import flash.net.URLRequest; import flash.events.MouseEvent; import fl.controls.Button; 7- Crie uma varivel pblica para o FileReference (neste exerccio se utiliza fileRef).
________________________________________________________________________________________ 69 2010 Alfamdia `Prow
public var fileRef:FileReference = new FileReference(); 8- Crie uma varivel pblica para o Button (neste exerccio 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 mtodo onClick. sendButton.addEventListener(MouseEvent.CLICK, onClick); 12- Defina o mtodo onClick e faa-o chamar o mtodo 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 mtodos onComplete e onSelect. fileRef.addEventListener(Event.COMPLETE, completeEvent); fileRef.addEventListener(Event.SELECT, selectEvent); 14- Defina o mtodo onComplete e faa-o imprimir na tela a String Enviado. public function completeEvent(event:Event):void { trace("Enviado"); } 15- Defina o mtodo onSelect, e dentro dele: Declare uma varivel String com o contedo Filedata (neste exerccio se utiliza param). Declare uma varivel do tipo URLRequest e passe ao construtor o endereo do arquivo php que far a transferncia (neste exerccio se utiliza req). Execute o mtodo upload de FileReference, passando como parmetros param, req e false.
public function selectEvent(event:Event):void{

________________________________________________________________________________________ 70 2010 Alfamdia `Prow
var param:String = "Filedata"; var req:URLRequest = new URLRequest('http://localhost/upload.php'); fileRef.upload(req, param, false); } 16- Compile e veja o contedo da pasta uploadedFiles.
Exerccio 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 mtodo 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 varivel pblica para a ProgressBar (neste exerccio 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 mtodo progressEvent. fileRef.addEventListener(ProgressEvent.PROGRESS, progressEvent); 11- Defina o mtodo progressEvent, e nele execute o mtodo setProgress da ProgressBar e passe os parmetro bytesLoaded e bytesTotal do evento.
________________________________________________________________________________________ 71 2010 Alfamdia `Prow
public function progressEvent(event:ProgressEvent):void { pb.setProgress(event.bytesLoaded, event.bytesTotal); } 12- Compile e teste com um arquivo de tamanho mdio.
Prximos Passos Nesta unidade estudamos como receber e fazer o envio de dados para um servidor e tambm como enviar arquivos. Estas so duas aes bastante comuns. O AS3 implementa mecanismos para desempenhar estas funes em que seja necessrio contato com os cdigos remotos. Apenas preciso fornecer a localizao deles. Este modelo garante bastante independncia, pois permite liberdade de escolher que tipo de tecnologia de servidor utilizar. Na prxima unidade ser iniciada a discusso da orientao a objetos. At o presente ponto, sabemos apenas como definir um pacote, classes e mtodos e propriedades pblicas. Com um pouco mais de informao seremos capazes de construir projetos maiores.
________________________________________________________________________________________ 72 2010 Alfamdia `Prow
Unidade 8 Orientao a Objetos no AS3
Deste ponto em diante, ser mostrado como escrever cdigo orientado a objeto em AS3. No entanto, no estudaremos orientao a objeto em profundidade. H muitas questes tericas a respeito de projeto que so debatidas a este respeito, e este tipo de assunto foge do escopo deste curso. Tambm no sero estudadas design patterns, por necessitarem de uma compreenso maior dos problemas comuns de projeto para serem compreendidas.
8.1
Comeando um Projeto
Depois de definidas quais as classes e quais os mtodos e propriedades de cada classe, comea a etapa de implementao. 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 no tem um atributo definido, pode ser acessada apenas pelas classes que esto 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 prprio package, nenhuma delas pode ter o atributo
________________________________________________________________________________________ 73 2010 Alfamdia `Prow
internal, pois, por exigncia do compilador, preciso que classes de documento sejam declaradas public. Para definir um atributo, usa-se a seguinte forma: atributo class Identificador{ }
No AS3 no se pode declarar uma classe abstrata.
8.4
Mtodos Construtores
Um mtodo construtor um conjunto de instrues utilizados para inicializar uma classe. Assim que uma classe instanciada, este mtodo disparado. Ele precisa ter o mesmo nome da classe.
No AS3 todos os construtores precisam ser public. A razo para esta deciso pode ser encontrada em http:kuwamoto.org/2006/04/05/as3-on-thelackprivate-and-protected-constructors.
A falta de construtores privados torna a implementao de Singleton um pouco diferente do usual, mas ainda assim ela est completamente correta. Construtores podem receber parmetros, mas no podem retornar nada.
8.5
Propriedades ou Variveis de Instncia

uma varivel relacionada a um objeto. No confundir com variveis locais, que so as variveis declaradas dentro de mtodos. Para declarar uma propriedade usase a forma: atributo var identificador;
8.6
Atributos de Propriedades
Local do cdigo e relao Public internal protected private
________________________________________________________________________________________ 74 2010 Alfamdia `Prow
propriedade Classe que contm a definio Classes descendentes Classe diferente, mesmo package Package e classe diferente
Permitido Permitido Permitido
Permitido
Permitido Permitido Permitido Permitido Permitido Proibido
Proibido Proibido
Permitido Proibido
Proibido
Proibido
Costuma-se usar um _ antes de identificadores de propriedades privadas, por exemplo: private var _somProp:SomeKind;
8.7
Mtodos
um conjunto de instrues de uma funo. Pra criar um mtodo usa-se a forma: atributo function nome(){ }
8.8
Atributos de Mtodos
So os mesmos das propriedades.
8.9
Getters e Setters
Getters e setters so mtodos que permitem o acesso e modificao de variveis (na maioria variveis privadas). Assim, ao invs de declarar um mtodo que define o nome de um item como item.setName(Apostila de AS3); Utiliza-se: item.name=Apostila de AS3;
________________________________________________________________________________________ 75 2010 Alfamdia `Prow
Neste caso, se est utilizando um mtodo setter para modificar o valor da propriedade privada (digamos que seja _name). Podemos tambm querer acessar o valor de uma propriedade privada. Nesse caso, utilizamos um mtodo 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 mtodos 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 Estticas

Propriedades estticas devem ser usadas quando se tem um dado que se relaciona com toda a classe, ao invs de dados que variam de instncia para instncia. Por exemplo, as propriedades altura e largura, em uma classe que cria um boto, no devem ser estticas, pois se pode querer criar botes com tamanhos diferentes. Porm uma propriedade tamanhoPadro deve ser esttica.
8.11 Constantes
uma varivel que, uma vez inicializada, nunca tem seu valor alterado. Usa-se a palavra const ao invs de var. Normalmente seus nomes so em caixa alta: public static const DEFAULTSIZE:Number=90;
8.12 Mtodos Estticos

Assim como propriedades estticas se relacionam com toda a classe.
________________________________________________________________________________________ 76 2010 Alfamdia `Prow
8.13 Herana
o relacionamento entre duas ou mais classes, onde uma herda as definies de variveis e mtodos de outra. No entanto, preciso ficar atento, pois herana significa mais do que reutilizar cdigo. Se o objetivo apenas esse, pode-se considerar utilizar composio ao invs. Para fazer com que uma classe descenda de outra, utiliza-se a palavra extends na declarao da classe.
Exerccio 1: Herana 1- Crie um arquivo .fla na pasta unidade 7, e salve-o como ex7-1. 2- No defina classe neste exerccio. 3- Crie uma classe com o nome Inheritance e defina o mtodo construtor (no necessrio 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 mtodo construtor. 7- Faa a classe extender Inheritance. 8- No construtor de Descendant, imprima a String Descendant. 9- No arquivo ex7-1, declare uma nova instncia de Inheritance (neste exerccio usa-se inh); var inh:Inheritance= new Inheritance(); 10- Compile. 11- Comente a declarao de inh. //var inh:Inheritance= new Inheritance(); 12- Declare uma nova instncia de Descendant (neste exerccio usa-se desc); var desc:Descendant= new Descendant(); 13- Compile.
Mtodos e propriedades estticas no so herdadas.
________________________________________________________________________________________ 77 2010 Alfamdia `Prow
Exerccio 2: Reescrever um mtodo 1- Defina, em Inheritance, um mtodo pblico com o nome A. Faa-o imprimir na tela a String Inheritances A. public function A():void{ trace("Inheritances A"); } 2- Faa o mesmo em Descendant, apenas mude a String de marcao. public function A():void{ trace("Descendants A"); } 3- Marque o mtodo como override. override public function A():void{ 4- Em ex7-1, chame o mtodo A. desc.A(); 5- Compile.
8.14 Prevenir Classes de Serem Extendidas e Mtodos de Serem reescritos.

Use a palavra final.
________________________________________________________________________________________ 78 2010 Alfamdia `Prow
Unidade 9 Projeto Final Galeria de Imagens

9.1 Escopo Geral
O objetivo do projeto implementar e desenvolver uma aplicao padro que servir como modelo para galeria de imagens, dentro da estrutura de um website. Para suporte, tambm sero desenvolvidos os mdulos para gerenciar o carregamento dos devidos arquivos utilizados (XML, JPG e SWF), bem como a arquitetura geral do website, o padro de menu e o modelo de navegao. Os recursos aqui aplicados devero ser a base para experimentao dos contedos abordados durante o curso, com o foco nas tcnicas associadas Programao Orientada Objetos em AS3, utilizao 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 verso do projeto completa e finalizada, para avaliao e comparativo com o resultado obtido.
9.2
Arquitetura
O sistema prev um mdulo inicial, contendo a classe base para o menu, constituda por cada um dos objetos da classe de botes, bem como o container principal que ir administrar o carregamento e armazenar a rea selecionada. Para efeitos didticos todas as sees carregadas, exceto a de Galeria, sero desenvolvidas apenas como modelo de layout e somente em um nvel, com utlizao de uma nica classe denominada MainInternas. A seo Galeria, a qual se destina maior parte do projeto, ser desenvolvida integralmente contemplando as etapas de carregamento dos thumbnails, fotos ampliadas, rolagem dos itens, navegao seqencial das imagens, transio entre as imagens e apersentao das informaes espeficas de cada foto, como ttulo e texto explicativo. O sitemap da aplicao dever seguir a seguinte estrutura:
index.swf
home.swf
historico.s wf
clientes.sw f
contato.sw f
galeria.swf th_a.jpg foto_a.jp g
dadosImagem.x ml
________________________________________________________________________________________ 79 2010 Alfamdia `Prow
A estrutura das pastas dever possuir a seguinte hierarquia: + Projeto Galeria/ (pasta raiz contendo os arquivos principais da aplicao) ndex.swf home.swf historico.swf contato.swf clientes.swf galeria.swf dadosImagem.xml + imgs/ (pasta das imagens carregadas pelo XML, os nomes vo sequencialmente de A a X) th_a.jpg ... th_x.jpg foto_a.jpg ... foto_x.jpg + src/ (pasta dos arquivos e cdigos-fonte da aplicao) 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 animao do projeto)
________________________________________________________________________________________ 80 2010 Alfamdia `Prow
O padro de relacionamento entre as classes dever seguir a seguinte modelo: Objeto instanciado: / objeto extendido:
Main mcBarraLoader
mcMenu
mcContainerArea
Loader
mcBotao
Contato
MainInternas Galeria
CarregaXML
mcContainerThumbs
mcContainerInfos
CarregaImg
Plano3 D
btNavegaImagens
mcThumb
9.3
Especificao
9.3.1 Galeria
Estudo de Caso
A Galeria a seo 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 especificao que se destina a descrever, do ponto de vista de um usurio, quais as funcionalidades que a ferramenta dever executar, as respostas e o comportamentos relacionado em cada interao.
________________________________________________________________________________________ 81 2010 Alfamdia `Prow
A ferramenta dever proporcionar uma navegao 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 dimenses e peso, facilitam o carregamento e a pr-seleo visual, por parte do usurio. Ao passar o mouse sobre os demais thumbs da faixa, estes devero reagir de forma a ampliar a imagem em 1.1 nas escalas X e Y, com base em seu centro. Alm disso dever haver ser executada uma transio de seu alpha atual de 0.3 para 1. Se o nmero total de thumbnails carregados no couber completamente no stage, dever ser gerada uma rolagem, caso o usurio posicione o mouse em uma distncia inferior ou igual a 80 pixels, contados a partir de cada um dos limites horizontais (esquerda e direita) da tela. Estes thumbs devero ser inicializados em uma escala de 1 e com o alpha 0.3. O evento de click, sobre um thumb no selecionado dever tornar seu estado como ATIVO. Um thumb ativo dever ter a escala fixa em 1 (no recebendo mais eventos de mouse), alpha em 1 e uma borda branca de 2 pixels. Esta ao tambm dever carregar o contedo da imagem ampliada, seus dados textuais e disparar a transio da imagem ampliada atual, para a prxima. 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 tambm devero ser carregadas as informaes textuais que acompanham a imagem. Estas informaes ficaro "minimizadas" sobre a faixa dos thumbnais, com uma prvia do ttulo da foto e uma indicao de "+ informaes". Ao passar o cursor sobre a rea "+ informaes" o contedo completo das informaes dever expandir verticalmente, com uma animao em easing de desacelerao. A navegao entre as imagens ampliadas dever ser executada por meio de uma transico que aplique um efeito de giro tridimensional, no eixo Y central da imagem. A idia de que a prxima imagem fique atrs da atual, como se foto possuisse uma "dupla face". O sentido de rotao do giro dever respeitar o posicionamento de um thumb em relao ao outro, ou seja, se o usurio clicar em um thumb direita do atual, o giro dever ser no sentido da esquerda para a direita, e vice-versa. Na tela devero constar duas setas para navegao 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 navegao dever proporcionar o mesmo comportamento da navegao que ocorre de modo direto pelos thumbs, porm com a funo de atualizar na faixa o prximo thumb correspondente imagem apresentada. Especificao da classe Galeria.as
________________________________________________________________________________________ 82 2010 Alfamdia `Prow
A classe Galeria responsvel por instanciar cada um dos componentes da seo, bem como o montagem dos thumbs e a navegao seqencial 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 Mtodos: 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 Especificao 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 Mtodos: public function CarregaXML($arquivo:String, $carrega:Boolean = true):void
________________________________________________________________________________________ 83 2010 Alfamdia `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 Especificao da classe mcContainerThumbs.as a classe que armazena e gerencia os thumbs, desde o carregamento da instncia 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 Mtodos: 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 Especificao da classe mcThumb.as Armazena as informaes 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
________________________________________________________________________________________ 84 2010 Alfamdia `Prow
Mtodos: 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
Especificao da classe mcContainerInfos.as a classe que define as propriedades e caracteersticas bsicas 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 Mtodos: 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 Especificao 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
________________________________________________________________________________________ 85 2010 Alfamdia `Prow
private var arqImg:Bitmap; private var img:String; private var ldr:Loader; private var mcLdr:MovieClip; Mtodos: 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 Especificao da classe Plano3D.as Classe container e base para o efeito de transio tridimensional, para a navegao 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 Mtodos: 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 Especificao da classe btNavegaImagens.as Classe base que atribui as propriedades de status (ativo true / false) e eventos de rollover e rollout ao objeto boto que navega sequencialmente as imagens ampliadas. Package: classes.utils / Extends: Sprite Propriedades: private var _ativo:Boolean private var estadoAtivo:Number private var estadoInativo:Number
________________________________________________________________________________________ 86 2010 Alfamdia `Prow
Mtodos: 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 seo responsvel pelo controle geral do site, concentrando as classes que gerenciam o carregamento de cada seo, bem como o modelo de navegao, associado ao menu. O site dever possuir um arquivo base para carregamento e construo do menu, separadamente das demais sees, com o objetivo de tornar o carregamento e navegao entra as reas independentes e rpido. O menu dever ser composto por botes retangulares, com o nome da seo e dispostos horizontalmente, alinhados no topo e canto esquerdo da tela. Cada boto 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 boto, este dever deixar a barra do fundo fixada, seu status ativo e com alpha de 1. O clique do boto dever executar o carregamento da rea selecionada, dentro de um container central. Ao executar o carregamento, a tela atual dever ser fechada por uma mscara de forma retangular que cubra toda a tela, com uma animao que ir reduzir sua escala at esconder completamente a seo atual. Aps fechar a mscara 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 mscara anterior ento ampliada revelando a nova seo. A entrada inicial do site dever vir carregada com a seo Home. Especificao da classe Main.as Classe responsvel por ativar o menu de navegao e como acesso ao carregamento das sees. Package: classes.mains / Extends: MovieClip Propriedades: private var areas:Array private var mcMenuAreas:mcMenu private var CONTEUDO:mcContainerArea Mtodos: public function Main():void
________________________________________________________________________________________ 87 2010 Alfamdia `Prow
private function init():void private function configMenu():void private function onRender(e:Event):void private function onResizeTela(e:Event = null) Especificao da classe mcMenu.as Classe container para os botes do menu, responsvel pela ordenao, instanciamento e disparo do carregamento das sees. 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 Mtodos: 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 Especificao da classe mcBotao.as Classe base para o boto 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 Mtodos: 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
________________________________________________________________________________________ 88 2010 Alfamdia `Prow
public function set inativo(value:Boolean):void private function configBt():void private function onOver(e:MouseEvent):void private function onOut(e:MouseEvent):void Especificao da classe mcContainerArea.as Classe que armazena a rea carregada. Executa o controle de animao da mscara, dispara e controla o carregamento das sees. 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 Mtodos: 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 Especificao da classe mcBarraLoader.as Classe base para a barra de progresso do loader, repondendo aos eventos de atualizao de progresso. Package: classes.movies / Extends: Sprite Propriedades: private var _percentual:Number private var _raiz:DisplayObjectContainer Mtodos: public function mcBarraLoader($raiz:DisplayObjectContainer):void public function get percentual():Number public function set percentual(value:Number):void public function get raiz():DisplayObjectContainer
________________________________________________________________________________________ 89 2010 Alfamdia `Prow
public function set raiz(value:DisplayObjectContainer):void public function destroy():void Especificao da classe MainInternas.as Classe genrica para definio das demais sees internas representadas por layout. Package: classes.mains / Extends: MovieClip Mtodos: public function MainInternas() private function onRender(e:Event):void private function onResizeTela(e:Event = null)
Especificao da classe Contato.as Classe que extende MainInternas e aplica funcionalidades bsicas de validao de formulrio. Package: classes. mains / Extends: MainInternas Mtodos: public function Contato():void private function configForm():void private function onValidaForm(e:MouseEvent):void
________________________________________________________________________________________ 90 2010 Alfamdia `Prow

Apostila Action Flash

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila Action Flash

Uploaded by

Copyright:

Available Formats

Programao ActionScript com Flash CS5

Programao ActionScript com Flash CS5

Todos os direitos reservados para Alfamdia LTDA.

01/2010 Verso 1.1

Alfamdia Prow http://www.alfamidia.com.br

2010 Alfamdia LTDA.

Programao ActionScript com Flash CS5

A Alfamdia d Boas Vindas aos seus clientes e deseja um excelente treinamento.

2010 Alfamdia LTDA.

Programao ActionScript com Flash CS5

Adobe Flash CS5 Programao ActionScript

2008 Processor Alfamdia LTDA.

2008 Processor Alfamdia LTDA.

Programao ActionScript com Flash CS5

Unidade 1 Adobe Flash CS5 Animao Multimdia

2008 Processor Alfamdia LTDA.

Programao ActionScript com Flash CS5

Convenes adotadas nesta apostila.

2008 Processor Alfamdia LTDA.

Programao ActionScript com Flash CS5

2008 Processor Alfamdia LTDA.

Programao ActionScript com Flash CS5

Fig 1. JANELA COMPILER ERRORS

________________________________________________________________________________________ 9 2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

Unidade 3 Conceitos Chaves de Programao

Fig 2. DEMONSTRAO DE VARIVEIS

3.1.1 Tipos Nativos do AS3

Programao ActionScript com Flash CS5

Debug com trace( )

________________________________________________________________________________________ 11 2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

Fig 3. JANELA OUTPUT DO RESULTADO DO EXERCCIO

________________________________________________________________________________________ 12 2010 Alfamdia `Prow

Programao ActionScript com Flash CS5 Fig 4. COMPILANDO O RESULTADO DO EXERCCIO

Fig 5. EXEMPLOS COM DIVERSOS TESTES IF

________________________________________________________________________________________ 13 2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

Fig 6. EXEMPLO COM IF /ELSE

Fig 7. EXEMPLO COM IF /ELSE IF / ELSE

________________________________________________________________________________________ 14 2010 Alfamdia `Prow

Programao ActionScript com Flash CS5 Fig 8. DEMONSTRAO DO HELP

Fig 9. EXEMPLO DE LOOP FOR

Fig 10. DECLARAO DE ARRAY

Programao ActionScript com Flash CS5

Fig 11. EXEMPLO DO HELP

________________________________________________________________________________________ 16 2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

Fig 12. EXEMPLO DE FUNO QUE RECEBE PARMETROS E RETORNA UM VALOR.

________________________________________________________________________________________ 17 2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

________________________________________________________________________________________ 18 2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

Unidade 4 Conceitos Especficos do AS3 Display Programming

Fig 13. ORGANOGRAMA

________________________________________________________________________________________ 19 2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

4.2 Inserir Instncias de Clipe de Filme da Library no Palco

Fig 14. JANELA LINKAGE PROPERTIES

6- Abra as Actions do arquivo e escreva o seguinte cdigo.

Fig 15. ACTIONS

________________________________________________________________________________________ 20 2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

Fig 16. ESCREVENDO A CLASSE