CURSO

ActionScript com Flash CS5

MÓDULO
04

www.ginead.com.br
Programação ActionScript com Flash CS5

Todos os direitos reservados para Alfamídia LTDA.

AVISO DE RESPONSABILIDADE

As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM

QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as
precauções tenham sido tomadas na preparação deste material, a Processor Alfamídia
LTDA. não têm qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito
à responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou
indiretamente, pelas instruções contidas neste material ou pelo software de computador e
produtos de hardware aqui descritos.

2
Programação ActionScript com Flash CS5

Adobe Flash CS5 – Programação ActionScript

UNIDADE 4 CONCEITOS ESPECÍFICOS DO AS3 – DISPLAY PROGRAMMING

4.1 CLASSES QUE COMPÕE A DISPLAY API
4.2 INSERIR INSTÂNCIAS DE CLIPE DE FILME DA LIBRARY NO PALCO
4.3 INSERIR OBJETOS EM CONTAINERES
4.4 REMOVER OBJETOS DE CONTAINERES
4.5 DESENHAR COM PROGRAMAÇÃO

3
Programação ActionScript com Flash CS5

Unidade 4
Conceitos Específicos do AS3 – Display
Programming
4.1 Classes que Compõe a Display API
A Display API é a API do AS3 que gerencia os elementos gráficos que são
colocados no palco. Ela é constituída de uma série de classes, que estendem umas
às outras como mostra a imagem abaixo. Você pode acompanhar a discussão sobre
este pacote abrindo o Help e selecionando Programming ActionScript 3.0 >
Display Programming > Core Display Classes

Fig 13. ORGANOGRAMA

A classe da qual todas as demais descendem chama-se DisplayObject. Isso

significa que “tudo que DisplayObject tem ou faz, as demais classes têm ou
fazem”. Também é correto dizer, por exemplo: que “todo InteractiveObject é um
DisplayObject”

Todos os descendentes de DisplayObject herdam certas funcionalidades: podem

ser rotacionados e movidos em x e y, por exemplo.
A linha logo abaixo de DisplayObject (suas primeiras descendentes), mostra
classes que não podem interagir com o usuário nem conter outros objetos visuais e
InteractiveObject, que define uma linha de descendência de classes que permitem
interação.
A terceira linha mostra classes que podem interagir com o usuário mas não podem
conter outros objetos visuais e DisplayObjectContainer.

4
Programação ActionScript com Flash CS5

A quarta linha mostra classes que podem interagir com o usuário e que podem
conter outros objetos visuais.
A quinta linha mostra MovieClip, que é um Sprite com frames.

4.2 Inserir Instâncias de Clipe de Filme da Library no

Palco
Para demonstrar o procedimento, serão feitos dois exercícios.

Exercício1 - Inserindo instâncias de clipes de filme no palco

1- No Flash, crie um arquivo novo e salve como ex4-1, na pasta unidade4.
2- Crie um clipe de filme utilizando uma das ferramentas de desenho e dê o nome
de sua preferência ao símbolo.
3- Remova-o do palco.
4- Abra a Library e clique com o botão direito no clipe de filme.
5- Selecione a opção Linkage e configure a caixa como mostra a figura.

Fig 14. JANELA LINKAGE PROPERTIES

6- Abra as Actions do arquivo e escreva o seguinte código.

Fig 15. ACTIONS

7- Compile o programa.

5
Programação 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;

Exercício 2 – Usando Classe externa

Este será o procedimento padrão deste ponto em diante, até começar o estudo da
orientação a objeto. Os passos são os seguintes:
- Criar um arquivo .fla.
- Definir a classe do documento.
- Criar um arquivo .as com o mesmo nome da classe do documento..
- Declarar a classe com o mesmo nome do arquivo .as.
- Importar as classes necessárias (varia caso a caso).
- Declarar o método construtor com o mesmo nome do arquivo .as.
- Colocar o código dentro do método construtor.

1- No Flash, salve o arquivo ex4-1 como ex4-2, na pasta unidade4.

2- Apague o código do 1° keyframe.
3- Sem nada selecionado, abra o painel de propriedades e, no campo Document
Class escreva FirstClass

Fig 16. ESCREVENDO A CLASSE

4- Crie um novo arquivo de ActionScript e salve-o como FirstClass, na mesma

pasta do arquivo .fla. A extensão atribuída será .as.
5- Neste arquivo, insira o seguinte código.

6
Programação ActionScript com Flash CS5

Fig 17. CÓDIGO INSERIDO NO PAINEL ACTION

6. Salve e compile o .fla.

Afinal o que está acontecendo?

Estamos começando, de forma bastante superficial, o estudo da orientação a
objetos no AS3. Todos os conceitos que precisaremos nesta etapa intermediária do
curso estão ilustrados no código recém escrito.
 Linha 1: package
Significa o pacote, a pasta onde o arquivo se localiza. Indica um namespace, uma
forma de fazer reserva de nomes, para evitar duplicações (duas classes podem ter
nomes iguais, se estiverem em packages diferentes). Neste código, não indicamos
a pasta porque é a mesma do arquivo .fla.

 Linha 2: import
É a instrução para importar as classes externas que iremos utilizar. Neste caso
importamos MovieClip, porque é a classe base para FirstClass (que extende
MovieClip).

 Linha 4: public

7
Programação ActionScript com Flash CS5

É o atributo da classe. Significa que classes fora do package podem acessá-la.

Existem outros atributos, que serão estudados em outro momento.

 Linha 4: extends
Significa que a classe FirstClass é um MovieClip, herda de MovieClip, extende
MovieClip, e portanto tem todas as propriedades e métodos de MovieClip e de
seus ascendentes (como Sprite e InteractiveObject).

 Linha 4: FisrtClass
O nome da classe. No AS3, deve ter o mesmo nome do arquivo .as. É convenção
usar inicial maiúscula em nomes de classes.

 Linha 8: public function FirstClass

É o método construtor. No modelo que estamos utilizando – definir uma classe
como base para um arquivo .fla – o método construtor é automaticamente
executado.
Um método construtor, como o nome denota, é executado toda vez que uma cópia
– instância – da classe é criada; não precisamos chamá-lo explicitamente. Ele deve
ter o mesmo nome da classe.

Desafio1 : Qual classe implementa o método addChild?

Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o
arquivo na pasta solution.
1- Qual classe implementa o método addChild?
2- Qual o tipo de retorno do método addChild? O que isso significa?
3- Porque o código seguinte não é válido?
var myFirstShape:Shape = new Shape();
var mySecondShape:Shape = new Shape();
myFirstShape.addChild(mySecondShape);

Desafio2: Posicionando instâncias de clipes de filme com o loop for

Este é um desafio. Você pode aceitar ou não. Se quiser ver a solução, abra o
arquivo PlaceMovieDesafio.as.

8
Programação 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 exercício 4-1 e 4-2).
2- O desafio é: posicione quatro instâncias dispostas em duas colunas, como na
imagem a seguir.

Fig 18. EXEMPLO DE FORMAS

4.3 Inserir Objetos em Containeres

Inserir objetos em containeres é útil quando se deseja manipulá-los como um
grupo. Para ver como isso pode ser feito, será feito um exercício.

Exercício 3: Inserindo objetos em containeres

1- No Flash, crie um arquivo .fla com o nome ex4-3 e salve na pasta unidade4.
2- Crie um clipe de filme e associe-o a uma classe (botão direito no símbolo na
Library e escolher Linkage). No exercício será usado o nome myClip.
3- Remova o clipe de filme do palco.
4- Na mesma pasta, crie um arquivo .as com o nome CreateGroup
5- Defina CreateGroup como classe base do arquivo ex4-3.fla
6- Crie a classe, definindo package, classe e o método construtor.
7- Não esqueça de importar a classe base, ou seja: MovieClip

9
Programação ActionScript com Flash CS5

Fig 19. PAINEL ACTIONS

Atenção!
Fica combinado que os passos acima listados são o procedimento padrão para criar
uma classe e associá-la a um arquivo .fla.
Nos exercícios seguintes, estes passos não serão detalhados, apenas indicados por
uma instrução do tipo “crie uma classe com o nome Nome a associe ao arquivo
.fla”.
8- Importe a classe Sprite (no mesmo package de MovieCLip)
import flash.display.MovieClip;
import flash.display.Sprite;
9- Crie uma variável public para o MovieClip da Library (no exercício tem o
nome de myClip). As variáveis da classe, ou melhor, propriedades da classe, são
declaradas fora de qualquer método. O melhor lugar é logo após a declaração de
class.
10- Crie uma variável public que contém uma instância de Sprite. O container será
do tipo Sprite.
public var myFirstClip:myClip=new myClip();
public var container:Sprite= new Sprite();

11- No construtor, coloque a instância de Sprite no palco.

12- Coloque a instância do clipe de filme dentro do Sprite.
13- Posicione o Sprite.

public function CreateGroup():void {

addChild(container);
container.addChild(myFirstClip);

container.x=100;
container.y=100;
}

14- Encare os próximos passos como desafios. Se você preferir, pode olhar a
solução na imagem.

10
Programação ActionScript com Flash CS5

15- Crie uma caixa de texto dentro do Sprite (container), coloque texto dentro dela
e a desloque para que não fique sobreposta ao clipe de filme. Para isso você
precisa saber:
 Qual classe representa caixas de texto.
 Qual o pacote contém caixas de texto.
 Descubra tudo isso olhando o Help.

Fig 20. CÓDIGO COMPLETO DO EXERCÍCIO

4.4 Remover Objetos de Containeres

Remover objetos de containeres é bastante simples. Assim como existe um
método para inserir objetos visuais, existe um para removê-los, chamado
removeChild( ).

Exercício 4: Removendo objetos de containeres

11
Programação 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 método construtor para coincidir com o nome
do arquivo (RemoveObject).
5- Remova a caixa de texto utilizando o método removeChild().
container.removeChild(myText);

4.5 Desenhar com Programação

Para desenhar utilizaremos a classe Graphics, que define os métodos para fazer
retângulos, círculos, definir linhas de contorno e preenchimentos. Abra a ajuda e
procure pela classe Graphics, procurando descobrir:
 Sua lista de métodos.
 De quem ela descende.
 Em qual package ela se encontra.
No texto de apresentação da classe encontramos diversas informações relevantes.
Vemos que todos os objetos que suportam desenho incluem uma propriedade
graphics. Essa propriedade contém um objeto Graphics.
Também descobrimos que não é possível instanciar Graphics (new Graphics()
causa um erro), e que não podemos extender Graphics.
Depois de estudar a classe Graphics, procure no Help pela classe Shape. Veja se
ela tem uma propriedade graphics

Exercício 5: Desenhando com programação

1- Crie uma arquivo .fla e salve-o como ex4-5.
2- Associe a este arquivo a classe Draw
3- Crie a classe Draw
4- Faça com que a classe Draw extenda Sprite.
5- Defina os elementos básicos (package, nome da classe, método construtor e
classe base que deve ser importada)

12
Programação ActionScript com Flash CS5

Porque antes extendíamos MovieCLip e agora estamos extendendo

Sprite?
É apenas uma questão de decidir entre ter ou não keyframes. Como não
pretendemos ter keyframes neste exemplo, podemos usar Sprite como classe base.
Nos exemplos anteriores, é possível substituir MovieClip por Sprite (se fizer isso
não esqueça de importar a classe Sprite).
package {
import flash.display.Sprite;

public class Draw extends Sprite {

public var container:Sprite= new Sprite();

public function Draw():void {

}
}
}

6- Importe a classe Shape.

import flash.display.Shape;
7- Defina uma variável publica, do tipo Sprite para ser um container do Shape.
8- Defina uma variável publica do tipo Shape.
public var container:Sprite= new Sprite();
public var shape:Shape = new Shape();
9- No método construtor, defina uma linha de contorno vermelha, com dois pixels
de largura e opaca, na propriedade graphics do objeto tipo Shape.
shape.graphics.lineStyle(2,0xFF0000, 1);
10- Em seguida, defina o preenchimento amarelo, na propriedade graphics do
objeto tipo Shape.
shape.graphics.beginFill(0xFFFF00);
11- Desenhe um círculo com x e y iguais a 30 e diâmetro igual a 30, na
propriedade graphics do objeto tipo Shape.
shape.graphics.drawCircle(30,30,30);

13
Programação ActionScript com Flash CS5

12- Finalize chamando o método endFill(), na propriedade graphics do objeto tipo

Shape;
shape.graphics.endFill();
13- Coloque o Sprite no palco.
addChild(container);
14- Coloque o Shape dentro do Sprite.
container.addChild(shape);
15- Compile e teste.

Fig 21. FORMA DESENHADA ATRAVÉS DO ACTIONSCRIPT

Próximos Passos
Nesta unidade estudamos classes que compõe a Display API, que permite, entre
outras coisas, inserir objetos visuais no palco e desenhar através de scripts. Há
mais ainda para estudar sobre esta API, o que será feito ao longo do curso.
Na próxima unidade estudaremos eventos, para poder interagir com o usuário.

14
Semeando Conhecimento