Upload
dokhanh
View
227
Download
0
Embed Size (px)
Citation preview
Vamos chamar ao Action Script 3.0, AS3 a partir de
agora
Elementos visuais com ActionScript
3.0
Elementos visuais do AS3
Há 2 grupos distintos de elementos visuais no AS3
Display Object – objectos visuais que não podem ter outros
dentro de si como as classes TextField
Display Object Container –Têm as mesmas características
que os Display Objects mas, permitem conter objectos dentro
de si tais como MovieClip e Sprite por exemplo
Elementos visuais do AS3
As principais classes de elementos visuais do AS3 são
Shape – pode ser usada para criar formas e desenhos, pois
possui elementos de programação para realizar esta tarefa
MovieClip – pode conter vídeos, texto, etc. Possuí uma
Timeline (linha do tempo) associada
Sprite – é semelhante ao MovieClip, entretanto difere deste
por não ter opções de controlo de Timeline, o que o torna mais
leve que o MovieClip
Adição de objectos à lista de
visualização
Tanto os objectos criados com as ferramentas de desenho,
como os criados através de programação, fazem parte uma
uma lista de visualização
Um objecto criado por programação não aparece até ter sido
adicionado a essa lista
Adição de objectos à lista de
visualização
Exercício. a)
Desenhe na tela um círculo e converta-o em MovieClip
Na tela de converter em símbolo abra as opções avançadas
(botão Advanced)
Em Linkage marque as opções Export for ActionScript e
Export in first frame
No campo Class dessa janela defina um nome para o símbolo
que será usado quando o chamarmos a partir da biblioteca do
Flash, no caso digite Bola
Clique no botão OK e em seguide elimine o símbolo do palco
(stage)
Adição de objectos à lista de
visualização
Adição de objectos à lista de
visualização
Exercício. a) (continuação)
Seleccione a primeira keyframe e e abra o painel Actions
Digite o seguinte código
Var instancia: MovieClip = new Bola();
Assim, criamos uma instância chamada “instancia” do tipo
MovieClip que será gerada a partir da classe Bola
Em seguida tem que adicionar a bola à lista de visualização
addChild(instancia);
Desta forma, a instancia é adicionada ao palco
Caso quiséssemos adicionar a por exemplo um MovieClip
chamado area, faríamos: area.addChild(instancia)
Adição de objectos à lista de
visualização
Exercício. a) (continuação)
Vamos alterar a posição onde aparece a bola adicionando as
linhas:
instancia.x = 100;
instancia.y = 100;
Uma variante do método addChild() é o método
addChildAt(posição)
Dentro dos parênteses coloca-se o número referente à posição
em que o elemento será inserido na lista de visualziação
Quanto maior for o número, mais à frente dos outros elementos
estará
Remoção de elementos da lista de
visualização Exercício. a) (continuação)
Vamos ver como remover um elemento da lista da visualização
Acrescente as linhas de códigoinstancia.addEventListener(MouseEvent.CLICK, remove);
function remove(evento: MouseEvent): void {
removeChild(instancia);
}
Na primeira linha criamos para a instância um ouvinte que vai observar se o utilizador clica na bola e caso isso ocorra, vai executar uma função chamada remove
Em seguida criamos essa função (remove) que, quando accionada, remove da lista de visualização através do método removeChild a instância criada
Desenhar através de AS3 Podemos desenhar directamente no palco (stage)
Ou desenhar dentro de um MovieClip ou Sprite
Vamos fazer um exercício desenhando directamente no palco
Ex_01graphics.lineStyle(2, 0x000000);graphics.moveTo(100, 200);graphics.lineTo(150, 250);
Este código desenha uma recta, em primeiro lugar definiu-se o estilo da linha em termos de espessura e cor
Depois definiu-se o ponto de início: graphics.moveTo(100, 200)
Em seguida é feita a recta explicitando o último ponto: graphics.lineTo(150, 250)
Teste o filme
Desenhar através de AS3
Ex_01 (continuação)
Acrescente a linha:
graphics.curveTo(200, 300, 250, 250);
Teste o filme:
Adicione a linha:
graphics.lineTo(300, 200);
Teste o filme:
Desenhar através de AS3
Ex_01 (continuação)
Adicione a linha:
graphics.drawRect(50, 50, 300, 250);
Teste o filme:
Desenhar através de AS3
Ex_01 (continuação)
Adicione a linha:
graphics.drawCircle(150, 100, 20);
Teste o filme:
Desenhar através de AS3
Ex_01 (continuação)
Adicione a linha:
graphics.drawEllipse(180, 150, 40, 70);
Teste o filme:
Desenhar através de AS3 Ex_01 (continuação)
Adicione as linhas:
graphics.beginFill(0x333333);
graphics.drawCircle(250, 100, 20); Teste o filme:
A partir do momento que utilizar
o beginFill todas as formas ficam
preenchidas, para parar o preenchimento
tem que usar o método:
endFill
Desenhar dentro de uma Shape
Ex. 01_b
var triangulo: Shape = new Shape();
triangulo.graphics.lineStyle(1, 0x000000, 1);
triangulo.graphics.beginFill(0xFF0000, 1);
triangulo.graphics.moveTo(100, 300);
triangulo.graphics.lineTo(450, 300);
triangulo.graphics.lineTo(275, 100);
triangulo.graphics.lineTo(100, 300);
triangulo.graphics.endFill();
addChild(triangulo);
Desenhar texto
Ex_02
Insira as linhas:
var meuTexto: TextField = new TextField();
meuTexto.text = "Bom dia 11G";
meuTexto.x = 50;
meuTexto.y = 50;
addChild(meuTexto);
Teste o filme:
Desenhar texto Ex_02 (continuação)
Acrescente as linhas:
meuTexto.width = 200;
meuTexto.height = 30;
meuTexto.border = true;
meuTexto.selectable = false;
Teste o filme:
Repare que adicionou largura,
altura e uma borda ao texto
Repare ainda que agora
já não é permitido seleccionar o texto
Desenhar texto
Ex_02 (continuação)
Adicione as linhas:
var meuFormato: TextFormat = new TextFormat();
meuFormato.font = "Arial";
meuFormato.size = 24;
meuFormato.bold = true;
meuTexto.setTextFormat(meuFormato, 2, 7);
Teste o filme:
Desenhar texto
Ex_02 (continuação)
Repare que foi adicionado um formato ao texto, do carácter 2
até ao 7
Também era possível definir o formato de outra forma:
// O construtor do TextFormat pode assumir até 13 parâmetros, podendo-se utilizar
// null para saltar algum dos parâmetros
// Consulte a documentação do TextFormat para ver os parâmetros possíveis
var myFormato: TextFormat = newTextFormat("Arial", 24, 0x0000FF, true);
Desenhar texto
Ex_02 (continuação)
Experimente a utilizar o formato anterior
E altere o código de forma a o formato abranger o texto todo
var myFormato: TextFormat = newTextFormat("Arial", 24, 0x0000FF, true);
meuTexto.setTextFormat(myFormato);
Teste o filme com o novo formato:
Texto com hiperligação Ex_03
var meuTexto: TextField = new TextField();
meuTexto.htmlText = "Visite <A HREF='http://www.marcosoares.com/aia/11'>AIA</A>!";
addChild(meuTexto);
Teste o filme:
Repare que ao clicar em AIA é aberto o browser
da internet com a página em questão
Repare que foi inserido um código em html corresponde a uma
hiperligação:
<A HREF='http://www.marcosoares.com/aia/11'>AIA</A>
Texto com hiperligação com estilos Ex_04 Insira as linhas:
var meuTexto: TextField = new TextField();
meuTexto.htmlText = "Visite <A HREF='http://www.marcosoares.com/aia/11'>AIA</A>!";
var meuEstilo: StyleSheet = new StyleSheet();meuEstilo.setStyle("A", {textDecoration: "underline", color: "#0000FF"});
meuTexto.styleSheet = meuEstilo;
addChild(meuTexto); Teste o filme:
Texto com hiperligação com eventos Ex_05
var meuTexto: TextField = new TextField();
meuTexto.htmlText = "Clique <A HREF='event: testando 1 2 3'>aqui</A>!";
addChild(meuTexto);
addEventListener(TextEvent.LINK, clicaTexto);
function clicaTexto(evento: TextEvent): void {trace(evento.text);
} Teste o filme:
Repare que quando
clica em aqui é
apanhado o evento de
clicar
Utilizar Sprites
Ex_06
Insira as linhas:
var sprite1: Sprite = new Sprite();
sprite1.graphics.lineStyle(2, 0x000000);
sprite1.graphics.beginFill(0xCCCCCC);
sprite1.graphics.drawRect(0, 0, 200, 200);
sprite1.x = 50;
sprite1.y = 50;
addChild(sprite1);
Teste o filme:
Utilizar Sprites
Ex_06 (continuação)
Acrescente as linhas:
var sprite2: Sprite = new Sprite();
sprite2.graphics.lineStyle(2, 0xCCCCCC);
sprite2.graphics.beginFill(0xCCCCCC);
sprite2.graphics.drawRect(0, 0, 200, 200);
sprite2.x = 300;
sprite2.y = 50;
addChild(sprite2);
Teste o filme:
Utilizar Sprites
Ex_06 (continuação)
Acrescente as linhas:
var sprite3: Sprite = new Sprite();
sprite3.graphics.lineStyle(2, 0x000000);
sprite3.graphics.beginFill(0x333333);
sprite3.graphics.drawCircle(0, 0, 25);
sprite3.x = 100;
sprite3.y = 100;
sprite1.addChild(sprite3);
Teste o filme:
Repare que neste caso
o sprite3 não foi adicionado
ao palco mas ao sprite1
Modificando o contentor de um Sprite
Ex_07
Copie as linhas do exercício anterior e acrescente as linhas:sprite1.addEventListener(MouseEvent.CLICK, clicaSprite);
sprite2.addEventListener(MouseEvent.CLICK, clicaSprite);
function clicaSprite(evt: MouseEvent): void {
evt.currentTarget.addChild(sprite3);
}
Teste o filme e repare que ao clicar em cada sprite, o sprite3 salta para esse sprite
Repare que se consegue aceder ao sprite que enviou o evento através da propriedade currentTarget do evento