Elementos visuais com ActionScript 3.0. Vamos chamar ao Action Script 3.0, AS3 a partir de agora

Transcrição

1 Elementos visuais com ActionScript 3.0 Vamos chamar ao Action Script 3.0, AS3 a partir de agora

2 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

3 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

4 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

5 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)

6 Adição de objectos à lista de visualização

7 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)

8 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á

9 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ódigo instancia.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

10 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_01 graphics.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

11 Desenhar através de AS3 Ex_01 (continuação) Acrescente a linha: graphics.curveto(200, 300, 250, 250); Adicione a linha: graphics.lineto(300, 200);

12 Desenhar através de AS3 Ex_01 (continuação) Adicione a linha: graphics.drawrect(50, 50, 300, 250);

13 Desenhar através de AS3 Ex_01 (continuação) Adicione a linha: graphics.drawcircle(150, 100, 20);

14 Desenhar através de AS3 Ex_01 (continuação) Adicione a linha: graphics.drawellipse(180, 150, 40, 70);

15 Desenhar através de AS3 Ex_01 (continuação) Adicione as linhas: graphics.beginfill(0x333333); graphics.drawcircle(250, 100, 20); A partir do momento que utilizar o beginfill todas as formas ficam preenchidas, para parar o preenchimento tem que usar o método: endfill

16 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);

17 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);

18 Desenhar texto Ex_02 (continuação) Acrescente as linhas: meutexto.width = 200; meutexto.height = 30; meutexto.border = true; meutexto.selectable = false; Repare que adicionou largura, altura e uma borda ao texto Repare ainda que agora já não é permitido seleccionar o texto

19 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);

20 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 = new TextFormat("Arial", 24, 0x0000FF, true);

21 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 = new TextFormat("Arial", 24, 0x0000FF, true); meutexto.settextformat(myformato); Teste o filme com o novo formato:

22 Texto com hiperligação Ex_03 var meutexto: TextField = new TextField(); meutexto.htmltext = "Visite <A HREF=' addchild(meutexto); 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='

23 Texto com hiperligação com estilos Ex_04 Insira as linhas: var meutexto: TextField = new TextField(); meutexto.htmltext = "Visite <A HREF=' var meuestilo: StyleSheet = new StyleSheet(); meuestilo.setstyle("a", {textdecoration: "underline", color: "#0000FF"}); meutexto.stylesheet = meuestilo; addchild(meutexto);

24 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); } Repare que quando clica em aqui é apanhado o evento de clicar

25 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);

26 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);

27 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); Repare que neste caso o sprite3 não foi adicionado ao palco mas ao sprite1

28 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