Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila Action PDF
Apostila Action PDF
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.
Alfamdia Prow
http://www.alfamidia.com.br
UNIDADE 1
1.1
1.2
1.3
1.4
UNIDADE 2
2.1
UNIDADE 3
3.1
3.1.1
3.2
3.3
3.4
3.5
3.6
VARIVEIS ............................................................................................................................... 10
Tipos Nativos do AS3 ........................................................................................................... 10
DEBUG COM TRACE( )................................................................................................................ 11
CONDICIONAIS .......................................................................................................................... 13
LOOPS ...................................................................................................................................... 15
ARRAYS ................................................................................................................................... 15
FUNES .................................................................................................................................. 17
UNIDADE 4
4.1
4.2
4.3
4.4
4.5
UNIDADE 5
5.1
UNIDADE 6
6.1
6.2
6.3
6.4
6.5
6.6
6.7
6.8
UNIDADE 7
7.1
UNIDADE 8
8.1
8.2
8.3
8.4
9.1
9.2
9.3
9.4
9.5
9.6
9.7
Unidade 1
Adobe Flash CS5 Animao Multimdia
1.1
Sobre o Curso
O curso Desenvolvedor ActionScript para Flash CS4 foi projetado para ensinar a
linguagem ActionScript, com foco em criao de aplicaes no Flash CS4. Sero
beneficiados designers que pretendem utilizar a linguagem para tarefas rotineiras
sem recorrer ao auxlio de programadores e os programadores que pretendem
aprofundar seus estudos na linguagem.
Nos captulos deste curso, ser apresentada a linguagem, desde uma reviso dos
conceitos-chave em programao, passando por conceitos especficos do
ActionScript at a criao de uma interface de aplicao de comrcio
eletrnicoEstrutura do Curso
Durante o curso, o aluno ser incentivado a fazer desafios, que so pequenos
programas que necessitam de cdigos que o mesmo no estudou de forma direta
ou que pedem um pouco mais de esforo lgico.
1.2
Estrutura do Curso
As unidades iniciais apresentam conceitos-chave de programao; uma reviso
dos contedos de lgica. A terceira comea a introduzir conceitos especficos da
linguagem, como DisplayObjects, Eventos e a manipulao de certas classes
importantes no cotidiano de um programador. A partir da terceira unidade, os
exerccios e desafios deixam de ser escritos na Timeline, para serem escritos em
classes. Na unidade sete, tratada a questo da orientao a objetos, com a
posterior implementao de uma interface para comrcio eletrnico.
Tambm ser seguida uma conveno para os diretrios onde os arquivos devero
ser salvos, a fim de evitar problemas com localizao de arquivos externos.
Sugere-se que, para manter um backup dos arquivos do curso, seja copiada a pasta
Soluo dos exerccios e desafios.
Todos os desafios podem ser resolvidos se olharmos na documentao (Help).
Optou-se por este formato porque muitos programadores no sabem usar a
documentao, e isso os torna dependentes da ajuda de outros (de colegas, de
listas de discusso, de exemplos e tutoriais).
Aceite os desafios e no seja este tipo de profissional!
1.3
Estrutura de diretrios
- Os exerccios e desafios de cada unidade devem ser salvos na pasta da unidade
correspondente.
- Os arquivos .fla dos exerccios sempre seguem o formato ex+num_unidade++num_exercicio. Por exemplo ex4-1.fla, ex3-2.fla
- Os desafios, quando antes da unidade trs, seguem o mesmo padro, porm com
o prefixo des. Por exemplo: des2-1.fla.
- Os arquivos de classes (.as), quando depois da unidade dois tm um nome que
identifica o propsito do desafio ou exerccio (por exemplo: Animate.as)
- Os desafios, quando aps a unidade dois, tm a palavra Desafio adicionada ao
nome. Por exemplo: AnimateDesafio.as.
- Sugere-se que, ao comear um desafio, que os arquivos sejam salvos na pasta da
unidade com o nome do desafio resolvido.
1.4
- Indica um assunto que deve ser tratado com mais ateno, quer seja
porque mais difcil ou porque uma novidade.
Unidade 2
AS3
2.1
Sobre o AS3
O AS3 uma linguagem orientada a objetos, que pode ser utilizada no Flash CS4
e Flex Builder. Alm disso, possvel desenvolver para AS3 com ferramentas
open-source, utilizando, por exemplo:
- O SDK do Flex (http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html),
compilando o cdigo com o compilador mxmlc;
- O Eclipse (www.eclipse.org/downloads/), com a compilao atravs do ANT
FlashDevelop (www.osflash.org).
________________________________________________________________________________________
9
2010 Alfamdia `Prow
Unidade 3
Conceitos Chaves de Programao
3.1
Variveis
O estudo das variveis, usualmente, o primeiro tpico em cursos de
programao, j que estas estruturas so uma das peas fundamentais em qualquer
programa.
Variveis guardam dados que sero utilizados pelo programa. Elas contm um
identificador nome, se preferir e um valor (figura 1). Em linguagens tipadas,
tambm esto associadas a um tipo.
Assim, todos os cdigos desta apostila podero ser compilados no Flex (talvez
com algumas modificaes).
Os tipos primitivos so:
Os tipos complexos so todas as classes que vm com o Flash CS4. Entre eles,
so citados MovieClip, TextField, Date e Sprite.
3.2
________________________________________________________________________________________
11
2010 Alfamdia `Prow
________________________________________________________________________________________
12
2010 Alfamdia `Prow
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.
________________________________________________________________________________________
13
2010 Alfamdia `Prow
________________________________________________________________________________________
14
2010 Alfamdia `Prow
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.
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.
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.
________________________________________________________________________________________
16
2010 Alfamdia `Prow
3.6
Funes
Funes, a exemplo dos tpicos vistos anteriormente, so peas fundamentais do
AS3. Numa situao de programao na Timeline (como estamos fazendo), elas
tm a funo de reaproveitar cdigo. Quando comearmos a escrever classes, elas
sero os mtodos das classes.
Funes podem ou no receber parmetros e podem ou no retornar valores. A
figura abaixo mostra um exemplo de funo.
Prximos Passos
At o momento os cdigos feitos eram escritos na Timeline do Flash. Este o
modelo que foi utilizado durante muitos anos, de forma que a maioria das pessoas
que escreve para ActionScript est acostumada com esse procedimento. Desta
forma, era muito fcil qualquer programa passar de 400 linhas de cdigo.
Este hbito continuo mesmo depois que foi viabilizada (e incentivada) a
orientao a objeto em projetos de ActionScript, e a utilizao de arquivos
externos.
Programadores de outras linguagens podem achar isso um pouco diferente,
porque, afinal de contas, ActionScript uma linguagem orientada a objetos.
Por isso, para no fazer uma transio to grande e que pode ser abrupta para
muitos usurios experientes do Flash entre programao na Timeline e utilizao
de classes prprias, ficaremos, nas prximas unidades, no meio termo. Usaremos
classes prprias, mas uma classe por projeto, de forma que todo o cdigo poderia
ser colocado dentro uma Timeline (como muitos esto acostumados a fazer).
Como isso uma transio uma iniciao no entraremos em detalhes sobre
alguns termos relacionados programao orientada a objetos.
________________________________________________________________________________________
17
2010 Alfamdia `Prow
________________________________________________________________________________________
18
2010 Alfamdia `Prow
Unidade 4
Conceitos Especficos do AS3 Display
Programming
4.1
________________________________________________________________________________________
19
2010 Alfamdia `Prow
A quarta linha mostra classes que podem interagir com o usurio e que podem
conter outros objetos visuais.
A quinta linha mostra MovieClip, que um Sprite com frames.
7- Compile o programa.
________________________________________________________________________________________
20
2010 Alfamdia `Prow
8- Teste alguma propriedades que podem ser aplicadas a este clipe de filme, como
por exemplo:
myFirstClip.x=100;
myFirstClip.y=100;
myFirstClip.scaleX=2;
myFirstClip.alpha=0.5;
________________________________________________________________________________________
21
2010 Alfamdia `Prow
Linha 1: package
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
Linha 4: extends
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.
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.
4.3
________________________________________________________________________________________
24
2010 Alfamdia `Prow
Ateno!
Fica combinado que os passos acima listados so o procedimento padro para criar
uma classe e associ-la a um arquivo .fla.
Nos exerccios seguintes, estes passos no sero detalhados, apenas indicados por
uma instruo do tipo crie uma classe com o nome Nome a associe ao arquivo
.fla.
8- Importe a classe Sprite (no mesmo package de MovieCLip)
import flash.display.MovieClip;
import flash.display.Sprite;
9- Crie uma varivel public para o MovieClip da Library (no exerccio tem o
nome de myClip). As variveis da classe, ou melhor, propriedades da classe, so
declaradas fora de qualquer mtodo. O melhor lugar logo aps a declarao de
class.
10- Crie uma varivel public que contm uma instncia de Sprite. O container ser
do tipo Sprite.
public var myFirstClip:myClip=new myClip();
public var container:Sprite= new Sprite();
11- No construtor, coloque a instncia de Sprite no palco.
12- Coloque a instncia do clipe de filme dentro do Sprite.
13- Posicione o Sprite.
public function CreateGroup():void {
addChild(container);
container.addChild(myFirstClip);
container.x=100;
container.y=100;
}
14- Encare os prximos passos como desafios. Se voc preferir, pode olhar a
soluo na imagem.
________________________________________________________________________________________
25
2010 Alfamdia `Prow
15- Crie uma caixa de texto dentro do Sprite (container), coloque texto dentro dela
e a desloque para que no fique sobreposta ao clipe de filme. Para isso voc
precisa saber:
4.4
________________________________________________________________________________________
26
2010 Alfamdia `Prow
4.5
________________________________________________________________________________________
27
2010 Alfamdia `Prow
Prximos Passos
Nesta unidade estudamos classes que compe a Display API, que permite, entre
outras coisas, inserir objetos visuais no palco e desenhar atravs de scripts. H
mais ainda para estudar sobre esta API, o que ser feito ao longo do curso.
Na prxima unidade estudaremos eventos, para poder interagir com o usurio.
________________________________________________________________________________________
29
2010 Alfamdia `Prow
Unidade 5
Eventos e Manipulao de Eventos
5.1
________________________________________________________________________________________
30
2010 Alfamdia `Prow
import flash.display.SimpleButton;
import flash.display.Shape;
8- Em seguida, definiremos duas variveis pblicas para Shape e SimpleButton.
public var myButton: SimpleButton = new SimpleButton();
public var shape: Shape = new Shape();
9- No construtor, criaremos o desenho de um crculo com x e y iguais a 30,
dimetro igual a 30, cor azul, sem contorno.
shape.graphics.lineStyle();
shape.graphics.beginFill(color);
shape.graphics.drawCircle(30,30,30);
shape.graphics.endFill();
10- Definiremos que esta varivel ser passada aos estados upState, overState e
hitTestState de SimpleButton.
myButton.upState=shape;
myButton.overState=shape;
myButton.hitTestState=shape;
11- Finalmente colocaremos a instncia de SimpleButton no palco e compilaremos
o filme.
12- Nos prximos passos faremos com que o boto responda ao evento CLICK do
Mouse. Ao clicar, o clipe de filme que foi colocado no palco (myClip) deve
comear a mover-se.
13- A primeira coisa a fazer importar a classe MouseEvent.
import flash.events.MouseEvent;
14- Em seguida, registraremos o SimpleButton com o evento CLICK.
myButton.addEventListener(MouseEvent.CLICK);
15- Definiremos a funo onClick para ser executada quando o evento for
despachado.
myButton.addEventListener(MouseEvent.CLICK, onClick);
16- Escreveremos a funo onClick, que contm uma chamada para trace. Ao
clicar no boto, deve aparecer na janela de sada a string clicou. Desta forma,
podemos ter certeza que o evento foi disparado.
public function onClick(evt:MouseEvent):void{
trace("clicou");
}
________________________________________________________________________________________
33
2010 Alfamdia `Prow
17- Repare que o parmetro que esta funo recebe do tipo MouseEvent, pois
este o tipo de evento disparado.
18- Salvar, compilar e testar.
19- Volte para o arquivo Mouse.as e exclua a chamada para trace.
20- Recorte a linha comentada com o registro de Mouse para o evento EnterFrame
e cole dentro da funo onClick.
public function onClick(evt:MouseEvent):void{
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
21- Remova os comentrios da funo onEnterFrame.
22- Salvar, compilar e testar.
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.
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.
________________________________________________________________________________________
35
2010 Alfamdia `Prow
Como voc j sabe desenhar atravs de scripts, fazer SimpleButton e inserir clipes
de filme da Library, escolha a soluo que considerar mais conveniente.
Dica: veja na ajuda as propriedades scrollV e maxScroll, da classe TextField
Dica: economize desenhos: inverta-o na vertical usando a propriedade scaleY= -1
Prximos Passos
Saber lidar com eventos extremamente importante para programadores AS3. Ao
final desta unidade, voc est apto a compreender como funcionam os eventos
built-in do Flash.
O prximo passo compreender o ciclo de carregamento de arquivos externos.
Como voc pode imaginar, h diversos eventos que devemos observar enquanto
um dado est sendo carregado, por exemplo: quando ele comea a ser carregado,
quando ele termina de carregar, o progresso do carregamento e os erros que
podem acontecer durante o processo. A prxima unidade dedicada a este assunt
________________________________________________________________________________________
36
2010 Alfamdia `Prow
Unidade 6
Carregamento de Arquivos Externos
6.1
6.2
Carregar Textos
O processo de carregar textos e XML bastante direto, conforme segue:
1- Importa-se as classes URLLoader e URLRequest
2- Cria-se um objeto URLRequest e o inicializamos com o endereo do arquivo a
ser carregado.
3- Cria-se um objeto URLLoader.
4- Chama-se o mtodo load do objeto URLLoader e passa-se o objeto
URLRequest.
5- Registra-se o objeto URLLoader com o evento COMPLETE.
6- O objeto URLRequest possui uma propriedade data, que contm os dados
carregados depois de COMPLETE disparar, logo, passa-se o resultado da
propriedade data para a caixa de texto, varivel String ou XML que se deseja
manipular.
________________________________________________________________________________________
39
2010 Alfamdia `Prow
6.3
________________________________________________________________________________________
40
2010 Alfamdia `Prow
________________________________________________________________________________________
41
2010 Alfamdia `Prow
ou
xml=loader.data;
5- Compile.
________________________________________________________________________________________
42
2010 Alfamdia `Prow
6.4
Pesquisar um XML
A pesquisar em um XML pode ser feita com um loop for ou for each, por
exemplo. Porm, h uma forma mais direta de fazer isso, como no exemplo que
segue.
trace(xml.curso.(@nome=="Programao em AS3"));
/*Retorna
<curso nome="Programao em AS3">
<sala>Enterprise</sala>
<turno>Tarde</turno>
<periodo>19/11/2207 at 30/11/2207</periodo>
</curso>
*/
A linha a seguir:
trace(
getQualifiedClassName(
xml.curso.(@nome=="Programao em AS3")
)
);
por sua vez, retorna XMLList, o tipo do dado retornado.
XMLList til quando desejamos tratar de pedaos do XML.
________________________________________________________________________________________
43
2010 Alfamdia `Prow
6.5
Carregar Sons
O processo de carregar sons parecido com os estudados anteriormente.
Utilizaremos um objeto do tipo URLRequest, e o mtodo load ser o da classe
Sound.
(no
________________________________________________________________________________________
44
2010 Alfamdia `Prow
}
11- Compile.
6.6
Carregar Imagens
O processo de carregar imagens parecido com o de carregar sons. O fluxo
basicamente o mesmo: criar um objeto URLRequest e pass-lo para o mtodo load
de um outro objeto. Porm, no caso de imagens, este objeto no , como se
poderia pensar, do tipo Bitmap, e sim do tipo Loader. Loader descende de
DisplayObjectContainer, logo ele pode tanto estar dentro de outros containeres
como ele mesmo pode ser um container.
Use Loader para carregar swf, jpg, png e gif.
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.
________________________________________________________________________________________
46
2010 Alfamdia `Prow
________________________________________________________________________________________
47
2010 Alfamdia `Prow
________________________________________________________________________________________
48
2010 Alfamdia `Prow
6.7
Carregar Vdeos
O modelo de carregamento de vdeos diferente dos demais estudados at o
momento porque vdeos podem ser carregados via streaming. Para dar suporte a
streaming so utilizadas classes que criam conexes com o servidor que hospeda o
arquivo.
Neste curso no faremos exemplos de carregamento via streaming, porque para
isso preciso ter um servidor de streaming, como o Fash Media Server. A forma
de carregamento que ser utilizada o download progressivo. Todavia, os scripts
para carregar vdeos de uma forma ou de outra so praticamente iguais.
stream.play("../assets/avideo.flv");
10- Compile.
________________________________________________________________________________________
50
2010 Alfamdia `Prow
O erro j foi sanado, porm no conseguimos ver o vdeo. Para isso, deveremos
trabalhar com a classe Vdeo.
16- Importe a classe Vdeo.
import flash.media.Video;
17- Crie uma varivel pblica do tipo Vdeo que recebe um novo Vdeo (no
exerccio utiliza-se vdeo).
public var video:Video = new Video();
18- Execute o mtodo attachNetStream de Vdeo e passe o objeto NetStream
como parmetro.
video.attachNetStream(stream);
19- Coloque a instncia de Vdeo no palco.
addChild(video);
20- Compile.
6.8
Security Sandboxes
As operaes que foram estudadas at agora podem ser permitidas ou proibidas
dependendo do contexto de segurana associado ao arquivo. Para ilustrar as
diferentes situaes, sero apontadas formas de carregar e enviar dados suportadas
pelo AS3, e como elas se relacionam com estas permisses.
________________________________________________________________________________________
51
2010 Alfamdia `Prow
1- Carregar contedo:
2- Acessar dados:
3- Cross-scripting:
4- Carregar dados:
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**
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
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
Depois, criaremos as classes para o modelo de dados e para a view de cada uma
das msicas.
Cada item de som dever estar descrito em um objeto modelo, que conter
apenas as informaes a respeito dele. Este objeto ser um SoundItem.
Os objetos SoundItem
SoundItemView.
tero
representao
visual
na
classe
SoundItem.as
1- Crie um arquivo com o nome de SoundItem e defina a estrutura. Este no ser
um objeto visual, portanto no precisa descender de Sprite.
Esta classe define trs propriedades: musica, foto e thumb. Todas so Strings.
public var musica:String;
public var thumb:String;
public var foto:String;
________________________________________________________________________________________
56
2010 Alfamdia `Prow
2- Faa com que ela recebe estes dados no construtor e passe o valor recebido no
construtor para as propriedades.
public function SoundItem(param_musica:String,
param_thumb:String,
param_foto:String){
musica=param_musica;
thumb=param_thumb;
foto=param_foto;
}
SoundItemView.as
Esta ser a classe que representa cada uma das opes da lista. Ela deve descender
de Sprite.
1- Defina a estrutura da classe e faa com que ela descenda de Sprite.
2- Sero necessrias diversas classes:
a- TextField e TextFormat para dar as informaes das msicas.
import flash.text.TextField;
import flash.text.TextFormat;
b- URLRequest, Loader e Event para carregar as imagens thumbnail.
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
c- Sound e ID3Info para ler os dados das msicas.
import flash.media.Sound;
import flash.media.ID3Info;
3- Cada instncia desta classe define uma propriedade item, do tipo SoundItem.
Crie esta propriedade.
public var item:SoundItem;
4- Crie variveis para a caixa de texto, para o formato do texto, para o loader, para
o som e um sprite para conter tudo isso.
public var caixa:TextField= new TextField();
public var format:TextFormat= new TextFormat();
________________________________________________________________________________________
57
2010 Alfamdia `Prow
________________________________________________________________________________________
58
2010 Alfamdia `Prow
"+soInfo.artist+"
________________________________________________________________________________________
59
2010 Alfamdia `Prow
xml.musica[i].@thumb,
xml.musica[i].@foto);
b- Passe para SoundItemView um novo SoundItemView coom este SoundItem
recm criado.
itemView=new SoundItemView(item);
c- Faa com que este SoundItemView registre-se para ser notoficado do clique do
mouse, e dispare o mtodo onChoose.
itemView.addEventListener(MouseEvent.CLICK, choose);
d- Coloque o SoundItemView no palco.
addChild(itemView);
e- Posicione seu y para que no se sobreponham.
itemView.y=130+i*40;
5- Defina o mtodo onChoose.
public function choose(evt:MouseEvent):void{
}
SounPlayerView.as
Este ser o arquivo que efetivamente tocar as msicas escolhidas.
1- Crie um arquivo novo e defina estrutura dele. Este deve extender Sprite.
2- Importe as seguintes classes:
a- Loader e URLRequest: carregar as imagens.
import flash.display.Loader;
import flash.net.URLRequest;
b- Sound, SoundChannel e SoundTransform: para lidar com os sons.
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.media.SoundTransform;
c- Event e ProgressEvent.
import flash.events.Event;
________________________________________________________________________________________
60
2010 Alfamdia `Prow
import flash.events.ProgressEvent;
d- ProgressBar, Slider e SliderEvent, para os componentes.
import fl.controls.ProgressBar;
import fl.events.SliderEvent;
import fl.controls.Slider;
3- Declare propriedades para o Sprite, Loader,ProgressBar, Slider, Sound,
SoundChannel e SoundTransform. Ateno: o nico que NO recebe nada o
Sound.
public var sp:Sprite= new Sprite();
public var loader:Loader= new Loader();
public var pb:ProgressBar= new ProgressBar();
public var sl:Slider= new Slider();
public var sound:Sound;
public var channel:SoundChannel=new SoundChannel();
public var stransform:SoundTransform =
new SoundTransform();
4- Declare uma propriedade SoundItem.
public var item:SoundItem;
5- No construtor, faa com que esta classe se registre para ser notificada do evento
CHANGE, e disparar o mtodo onChange.
addEventListener(Event.CHANGE, onChange);
6- Coloque o Sprite no palco.
addChild(sp);
7- Define o x e o y da ProgressBar como 30, faa com que sua propriedade source
seja o objeto contentLoaderInfo do Loader.
pb.x=30;
pb.y=30;
pb.source=loader.contentLoaderInfo;
________________________________________________________________________________________
61
2010 Alfamdia `Prow
8- Coloque o Slider no Sprite, faa com que seu x seja 30 e o y 110, sua largura
100.
sp.addChild(sl);
sl.x=30;
sl.y=110;
sl.width=100;
9- Coloque o Loader no palco e registre-o para ser notificado do evento
COMPLETE e disparar o mtodo onComplete.
sp.addChild(loader);
loader.contentLoaderInfo.addEventListener(Event.COMPLET
E, complete);
10- Defina o evento onComplete. Nele faa o Loader ficar com alpha = 0.5, e
remova a ProgressBar do Sprite.
public function complete(evt:Event):void{
loader.alpha=0.5;
sp.removeChild(pb);
}
11- Defina o evento onChange.
public function onChange(evt:Event):void{
}
12- Nele:
a- Coloque a ProgressBar no Sprite.
sp.addChild(pb);
b- Faa com que o Loader carregue a propriedade foto do SoundItem.
loader.load(new URLRequest(item.foto));
c- Atribua ao Sound um novo Sound.
sound= new Sound();
d- Faa com que ele carregue a propriedade musica do SoundItem.
sound.load(new URLRequest(item.musica));
e- Registre-o para responder ao evento COMPLETE e disparar o mtodo
loadSound.
sound.addEventListener(Event.COMPLETE,
loadSound);
________________________________________________________________________________________
62
2010 Alfamdia `Prow
________________________________________________________________________________________
63
2010 Alfamdia `Prow
Prximos Passos
Nesta unidade estudamos como carregar diferentes tipos de contedo. Na prxima
unidade, que encerra o estudo de tpicos especficos em AS3, ser estudado como
se comunicar com um servidor atravs de AMF, um formato de transmisso de
dados serializados, muito mais rpido que os demais mtodos.
________________________________________________________________________________________
64
2010 Alfamdia `Prow
________________________________________________________________________________________
65
2010 Alfamdia `Prow
Unidade 7
Comunicao com o Servidor
7.1 Solicitar, Receber e Enviar Dados para um Servidor
atravs de AMF.
AMF (action message format) uma forma de comunicao entre o Flash player e
um servidor remoto. AMF codifica chamadas remotas a procedimentos (mtodos
em classes remotas) que compactada em uma representao binria e enviada
atravs de HTTP/HTTPS ou RTMP/RTMPS (no caso do Flash Media Server).
Este formato mais rpido que XML e troca de dados atravs de Strings (como
URLLoader ou URLVariables). AMF, na verdade, tambm mais rpido que
outros mtodos, como Ajax [http://www.jamesward.org/census].
Para utilizar AMF preciso ter instalado, no servidor, uma biblioteca que serialize
e deserialize os dados. No caso do php, utiliza-se a biblioteca amfphp
[http://www.amfphp.org], que utiliza o formato AMF3.
Alm da excelente performance, o uso de AMF traz um benefcio adicional da
portabilidade, pois possvel alterar os mtodos remotos (at mesmo o prprio
servidor) sem maiores prejuzos ao cdigo.
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.
________________________________________________________________________________________
67
2010 Alfamdia `Prow
________________________________________________________________________________________
68
2010 Alfamdia `Prow
Prximos Passos
Nesta unidade estudamos como receber e fazer o envio de dados para um servidor
e tambm como enviar arquivos. Estas so duas aes bastante comuns. O AS3
implementa mecanismos para desempenhar estas funes em que seja necessrio
contato com os cdigos remotos. Apenas preciso fornecer a localizao deles.
Este modelo garante bastante independncia, pois permite liberdade de escolher
que tipo de tecnologia de servidor utilizar.
Na prxima unidade ser iniciada a discusso da orientao a objetos. At o
presente ponto, sabemos apenas como definir um pacote, classes e mtodos e
propriedades pblicas. Com um pouco mais de informao seremos capazes de
construir projetos maiores.
________________________________________________________________________________________
72
2010 Alfamdia `Prow
Unidade 8
Orientao a Objetos no AS3
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
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.
________________________________________________________________________________________
73
2010 Alfamdia `Prow
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.
8.5
8.6
Atributos de Propriedades
Local do
cdigo e
relao
Public
internal
protected private
________________________________________________________________________________________
74
2010 Alfamdia `Prow
propriedade
Classe que
contm a
definio
Classes
descendentes
Classe
diferente,
mesmo
package
Package e
classe
diferente
Permitido
Proibido
Proibido
Permitido Proibido
Proibido
Proibido
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
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;
________________________________________________________________________________________
76
2010 Alfamdia `Prow
8.13 Herana
o relacionamento entre duas ou mais classes, onde uma herda as definies de
variveis e mtodos de outra. No entanto, preciso ficar atento, pois herana
significa mais do que reutilizar cdigo. Se o objetivo apenas esse, pode-se
considerar utilizar composio ao invs.
Para fazer com que uma classe descenda de outra, utiliza-se a palavra extends na
declarao da classe.
Exerccio 1: Herana
1- Crie um arquivo .fla na pasta unidade 7, e salve-o como ex7-1.
2- No defina classe neste exerccio.
3- Crie uma classe com o nome Inheritance e defina o mtodo construtor (no
necessrio extender Sprite).
4- No construtor de Inheritance, imprima a String Inheritance.
5- Crie um novo arquivo as e chame-o de Descendant.
6- Declare a classe (internal) e o mtodo construtor.
7- Faa a classe extender Inheritance.
8- No construtor de Descendant, imprima a String Descendant.
9- No arquivo ex7-1, declare uma nova instncia de Inheritance (neste exerccio
usa-se inh);
var inh:Inheritance= new Inheritance();
10- Compile.
11- Comente a declarao de inh.
//var inh:Inheritance= new Inheritance();
12- Declare uma nova instncia de Descendant (neste exerccio usa-se desc);
var desc:Descendant= new Descendant();
13- Compile.
________________________________________________________________________________________
77
2010 Alfamdia `Prow
________________________________________________________________________________________
78
2010 Alfamdia `Prow
Unidade 9
Projeto Final Galeria de Imagens
9.1
Escopo Geral
O objetivo do projeto implementar e desenvolver uma aplicao padro que servir como modelo
para galeria de imagens, dentro da estrutura de um website. Para suporte, tambm sero
desenvolvidos os mdulos para gerenciar o carregamento dos devidos arquivos utilizados (XML,
JPG e SWF), bem como a arquitetura geral do website, o padro de menu e o modelo de navegao.
Os recursos aqui aplicados devero ser a base para experimentao dos contedos abordados
durante o curso, com o foco nas tcnicas associadas Programao Orientada Objetos em AS3,
utilizao da API Display List e das demais classes de carregamento e controle.
Este projeto possui uma pasta (Galeria/) com a base de cada arquivo fonte a ser trabalhado (fla),
bem como uma pasta (Galeria_referencia/) com verso do projeto completa e finalizada, para
avaliao e comparativo com o resultado obtido.
9.2
Arquitetura
O sistema prev um mdulo inicial, contendo a classe base para o menu, constituda por cada um
dos objetos da classe de botes, bem como o container principal que ir administrar o carregamento
e armazenar a rea selecionada. Para efeitos didticos todas as sees carregadas, exceto a de
Galeria, sero desenvolvidas apenas como modelo de layout e somente em um nvel, com
utlizao de uma nica classe denominada MainInternas. A seo Galeria, a qual se destina maior
parte do projeto, ser desenvolvida integralmente contemplando as etapas de carregamento dos
thumbnails, fotos ampliadas, rolagem dos itens, navegao seqencial das imagens, transio entre
as imagens e apersentao das informaes espeficas de cada foto, como ttulo e texto explicativo.
O sitemap da aplicao dever seguir a seguinte estrutura:
index.swf
home.swf
historico.s
wf
clientes.sw
f
contato.sw
f
galeria.swf
dadosImagem.x
ml
th_a.jpg
foto_a.jp
g
________________________________________________________________________________________
79
2010 Alfamdia `Prow
+ utils/
CarregaImg.as
CarregaXML.as
Plano3D
+ com/ (pasta contendo as classes de suporte e animao do projeto)
________________________________________________________________________________________
80
2010 Alfamdia `Prow
/ 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
________________________________________________________________________________________
84
2010 Alfamdia `Prow
Mtodos:
public function mcThumb($dados:Object):void
public function get ativo():Boolean
public function set ativo(value:Boolean):void
public function get texto():String
public function get titulo():String
public function get imagem():String
public function init($d:Object):void
private function configEventos():void
private function onOverThumb(e:MouseEvent = null):void
private function onOutThumb(e:MouseEvent = null):void
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
________________________________________________________________________________________
89
2010 Alfamdia `Prow
________________________________________________________________________________________
90
2010 Alfamdia `Prow