Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora...
Transcript of Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora...
![Page 1: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/1.jpg)
Vamos chamar ao Action Script 3.0, AS3 a partir de
agora
Elementos visuais com ActionScript
3.0
![Page 2: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/2.jpg)
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
![Page 3: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/3.jpg)
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
![Page 4: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/4.jpg)
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
![Page 5: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/5.jpg)
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)
![Page 6: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/6.jpg)
Adição de objectos à lista de
visualização
![Page 7: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/7.jpg)
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)
![Page 8: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/8.jpg)
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á
![Page 9: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/9.jpg)
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
![Page 10: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/10.jpg)
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
![Page 11: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/11.jpg)
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:
![Page 12: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/12.jpg)
Desenhar através de AS3
Ex_01 (continuação)
Adicione a linha:
graphics.drawRect(50, 50, 300, 250);
Teste o filme:
![Page 13: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/13.jpg)
Desenhar através de AS3
Ex_01 (continuação)
Adicione a linha:
graphics.drawCircle(150, 100, 20);
Teste o filme:
![Page 14: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/14.jpg)
Desenhar através de AS3
Ex_01 (continuação)
Adicione a linha:
graphics.drawEllipse(180, 150, 40, 70);
Teste o filme:
![Page 15: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/15.jpg)
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
![Page 16: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/16.jpg)
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);
![Page 17: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/17.jpg)
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:
![Page 18: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/18.jpg)
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
![Page 19: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/19.jpg)
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:
![Page 20: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/20.jpg)
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);
![Page 21: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/21.jpg)
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:
![Page 22: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/22.jpg)
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>
![Page 23: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/23.jpg)
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:
![Page 24: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/24.jpg)
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
![Page 25: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/25.jpg)
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:
![Page 26: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/26.jpg)
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:
![Page 27: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/27.jpg)
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
![Page 28: Elementos visuais com ActionScript 3 · Vamos chamar ao Action Script 3.0, AS3 a partir de agora ... Tanto os objectos criados com as ferramentas de desenho, como os criados através](https://reader031.fdocumentos.tips/reader031/viewer/2022021911/5c5b522b09d3f263368b7a89/html5/thumbnails/28.jpg)
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