Você está na página 1de 90

Programao ActionScript

com Flash CS5

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.

Programao ActionScript com Flash CS5

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.

Programao ActionScript com Flash CS5

Adobe Flash CS5 Programao ActionScript

UNIDADE 1
1.1
1.2
1.3
1.4
UNIDADE 2
2.1

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

UNIDADE 3

CONCEITOS CHAVES DE PROGRAMAO .................................................................................... 10

3.1
3.1.1
3.2
3.3
3.4
3.5
3.6

VARIVEIS ............................................................................................................................... 10
Tipos Nativos do AS3 ........................................................................................................... 10
DEBUG COM TRACE( )................................................................................................................ 11
CONDICIONAIS .......................................................................................................................... 13
LOOPS ...................................................................................................................................... 15
ARRAYS ................................................................................................................................... 15
FUNES .................................................................................................................................. 17

UNIDADE 4

CONCEITOS ESPECFICOS DO AS3 DISPLAY PROGRAMMING .................................................. 19

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

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

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.

9.1
9.2
9.3
9.4
9.5
9.6
9.7

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.

2008 Processor Alfamdia LTDA.

Programao ActionScript com Flash CS5

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!

2008 Processor Alfamdia LTDA.

Programao ActionScript com Flash CS5

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.

2008 Processor Alfamdia LTDA.

Programao ActionScript com Flash CS5

- Indica um assunto que deve ser tratado com mais ateno, quer seja
porque mais difcil ou porque uma novidade.

2008 Processor Alfamdia LTDA.

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

________________________________________________________________________________________
18
2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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.

6.2

O carregamento de vdeos, como no segue este formato, ser estudado


parte.

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

(no

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

________________________________________________________________________________________
44
2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

}
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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

1- Carregar contedo:

Utilizar os mtodos load de Loader e Sound.

Utilizar o mtodo play de NetStream.

2- Acessar dados:

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.

3- Cross-scripting:

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.

4- Carregar dados:

Carregar dados usando o mtodo load de URLLoader.

Carregar dados usando o mtodo load de URLStream.

Baixar arquivos atravs de FileReference.

Operao

Arquivos locais

Recursos
remotos dentro
do domnio
remoto

Recursos
remotos fora do
domnio remoto

Carregar
contedo

Proibido

Permitido

Permitido

Acessar dados

Proibido

Permitido

Com permisso
do distribuidor**

Cross-scripting

Proibido

Permitido

Com permisso
do criador*

Carregar dados

Proibido

Permitido

Com permisso
do distribuidor**

Sandbox remota, operaes permitidas e proibidas.


________________________________________________________________________________________
52
2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

Operao

Arquivos
no-swf
locais

Swf localwithfilesystem

Swf localwithnerworking

Swf localtrusted

Recursos
locais

Carregar
contedo

Permitido

Permitido

Proibido

Permitido

Proibido

Acessar
dados

Permitido

n/a

n/a

n/a

Proibido

Crossscripting

n/a

Permitido

Proibido

Com
permisso
do
criador*

Proibido

Carregar
dados

Permitido

n/a

n/a

n/a

Proibido

Sandbox local-with-filesystem.

Operao

Arquivos
no-swf
locais

Swf localwithfilesystem

Swf localwithnerworking

Swf localtrusted

Recursos
locais

Carregar
contedo

Permitido

Proibido

Permitido

Permitido

Permitido

Acessar
dados

Proibido

n/a

n/a

n/a

Com
permisso
do
distribuidor**

Crossscripting

n/a

Proibido

Permitido

Com
permisso
do
criador*

Com
permisso
do criador*

Carregar
dados

Proibido

n/a

n/a

n/a

Com
permisso
do
distribuidor**

Sandbox local-with-networking.
Operao

Arquivos
no-swf
locais

Swf localwithfilesystem

Swf localwithnerworking

Swf localtrusted

Recursos
locais

Carregar

Permitido

Permitido

Permitido

Permitido

Permitido

________________________________________________________________________________________
53
2010 Alfamdia `Prow

Programao ActionScript com Flash CS5


contedo
Acessar
dados

Permitido

n/a

n/a

n/a

Permitido

Crossscripting

n/a

Permitido

Permitido

Permitido

Permitido

Carregar
dados

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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.

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.

tero

representao

visual

na

classe

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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;

"+soInfo.artist+"

10- Atribua o TextFormat TextField.


caixa.setTextFormat(format);

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

________________________________________________________________________________________
65
2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

propriedade
Classe que
contm a
definio
Classes
descendentes
Classe
diferente,
mesmo
package
Package e
classe
diferente

Permitido Permitido Permitido

Permitido

Permitido Permitido Permitido

Proibido

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

dadosImagem.x
ml

th_a.jpg

foto_a.jp
g

________________________________________________________________________________________
79
2010 Alfamdia `Prow

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Programao ActionScript com Flash CS5

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

Você também pode gostar