elementos visuais com actionscript 3 · vamos chamar ao action script 3.0, as3 a partir de agora...

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