unidade programando no flashuab.ifsul.edu.br/tsiad/conteudo/modulo5/_pdf/lpa_ud_1.pdfaproximada da...

29

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense

Linguagem de Programação para Animação Web | Unidade D

Prezado(a) aluno(a),Nesta unidade, você estudará a linguagem de programação do Flash, o ActionScript 3.0. Conhecido pela sigla

AS. o ActionScript, poderosa linguagem de programação, permite o desenvolvimento de aplicações para Web,

dispositivos móveis e para desktop.

Bons estudos!!!

1. ActionScriptO ActionScript é uma OOP (linguagem de programação orientada a objetos) que é uma forma de programar

aproximada da maneira que interagimos com o mundo real. É a linguagem dos ambientes de tempo de execução

do Adobe Flash e Adobe AIR. Permite interatividade e manipulação de dados, além de ser familiar aos desenvol-

vedores com um conhecimento básico de programação orientada a objetos.

Painel AçõesPara que você aplique um código Action Script em seu projeto, precisa utilizar o painel Ações (actions). Pode

chamar este painel através da tecla de atalho F9 ou através do menu Janela – Ações

PROGRAMANDO NO FLASHUnidade d

30

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense


O painel Ações divide-se em duas partes: biblioteca de ações (à esquerda) e janela de código (à direita). Na parte

superior à direita do painel de ações, encontramos alguns botões:

2. Linguagem do ActionScriptVariáveisPara você declarar uma variável deve utilizar a palavra-chave var seguido do nome da variável. Ainda é neces-

sário atribuir o tipo de dado colocando o caractere dois pontos (:) e o nome do tipo de dado. Pode atribuir um

valor a esta variável utilizando o caractere de igualdade (=).

var nome : tipo de dado = valor;

Os tipos de dados mais usados são:

• String – armazena textos.var curso:String = “Animação”;

• Number – armazena números.var pontos:Number = 20;

• Boolean – armazena apenas dois tipos de dados true (verdadeiro) e false (falso).var carro:Boolean = true;

Vamos praticar?Abra o painel Ações (F9) e digite o seguinte código:

var nome:String = “Rogério Weymar”; trace(nome); //retorna Rogério Weymar

Usamos a função trace para verificar o valor da variável na janela de saída.

Pressione as teclas Ctrl + Enter para testar o código.

31

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense


Após testar o código com uma variável do tipo String, vamos testar com uma variável do tipo Number.

No painel Ações digite:var numero1:Number = 20;var numero2:Number = 4;trace (numero1);

Pressione as teclas Ctrl + Enter e veja na janela o valor da variável numero1 que é 20.

32

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense

Linguagem de Programação para Animação Web | Unidade DOperadores e expressões

Operadores aritméticos• Adição

var soma:Number = 3+2; //retorna 10

• Subtraçãovar subtrai:Number = 3-1; //retorna 2

• Multiplicaçãovar multiplica:Number = 6*2; //retorna 12

• Divisãovar divide:Number = 20/4; //retorna 5

• Módulovar resto:Number = 8 % 5; //retorna 3

Operadores de igualdade• Atribuir e somar

var soma:Number = 3; soma += 2; //retorna 5

• Atribuir e subtrair var subtrai:Number = 10; subtrai -= 5; //retorna 5

• Atribuir e multiplicar var multiplica:Number = 8; multiplica *= 4; //retorna 32

• Atribuir e dividir var divide:Number = 9; divide /= 2; //retorna 4.5

Operadores de comparação• Diferente

var diferente:Boolean = 4 != 7; //true

• Menor var menor:Boolean = 10 < 20; //true

• Menor e/ou Igual var menorigual:Boolean = 6<= 6; //true

• Maior var maior:Boolean = 9> 2; //true

• Maior e/ou Igual var maiorigual:Boolean = 2 >= 5; //false

• Igualdade var igual:Boolean = 8 == 8; //true

33

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense


Estruturas condicionais

if.elseA instrução condicional if..else permite testar uma condição e executar um bloco de código se esta condição for

verdadeira, ou executar um bloco de código alternativo caso seja falsa.

Exemplo:

var vagas:Number = 20; if(vagas > 50) { trace(“Grande capacidade.”); } else if(vagas < 50) { trace(“Pequena capacidade.”); }

switchA instrução Switch avalia uma expressão e usa o resultado para determinar qual bloco de código será executado.Exemplo:

var diadasemana:Date = new Date(); var dia:uint = someDate.getDay(); switch(dia) { case 0: trace(“Domingo”); break; case 1: trace(“Segunda”); break; case 2: trace(“Terça”); break; case 3: trace(“Quarta”); break; case 4: trace(“Quinta”); break; case 5: trace(“Sexta”); break; case 6: trace(“Sábado”); break; default: trace(“Fora da faixa”); break; }

34

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense


Estruturas de repetição

forA repetição For faz uma iteração por meio de uma variável para um intervalo de valores específicos.

Exemplo:

var j:int; for (j = 0; j < 5; j++) { trace(j); }

whileA repetição While é como uma instrução IF, que é repetida desde que a condição seja verdadeira.

Exemplo:

var a:int = 0; while (a < 5) { trace(a); a++; }

FunçõesUma função são blocos de códigos reutilizáveis. Utilizando funções conseguimos códigos menores. Uma função

é iniciada com a palavra-chave function e sua sintaxe é a seguinte:

function nome da função (parâmetros){// comandos;};

Exemplo:

function teste(){ trace(“Rogério”);}

35

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense


Para chamar uma função, basta você escrever o nome dela seguido de (). Por exemplo:

teste();

Podemos passar um parâmetro à função criada. Veja o exemplo abaixo:

function teste( nome:String){ trace(“Olá “ + nome);}teste(“Rogério”);teste(“Adriane”);

Podemos perceber, pelo exemplo, a ideia de uma função. Reutilizamos o mesmo código para conseguir diferen-

tes resultados que em nosso exemplo foi cumprimentar dois usuários diferentes.

Vamos praticar?

1. Crie um novo arquivo chamado função.fla2. Importe para o palco uma imagem de uma ilha para o fundo.3. Crie uma nova camada e nela desenhe um circulo amarelo representando o sol.4. Transforme este círculo em um símbolo Clipe de filme e dê o nome de instância sol.5. Clique no primeiro quadro da camada 2 e pressione a tecla F9 para chamar o painel de Ações.6. Digite o seguinte código:

function mudarSol():void{ sol.scaleX=1.5; sol.scaleY=1.0;}mudarSol();

Teste seu código, pressionando Ctrl + Enter.

36

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense


EventosOs eventos são ações que ocorrem durante a reprodução de um arquivo swf, como um clique com o mouse, o

pressionar de uma tecla, etc. Vamos conhecer alguns eventos?

Mouseevent• CLICK

mc_botao.addEventListener(MouseEvent.CLICK, onClick); function onClick(evt:MouseEvent):void { trace(“CLICK”); }

• MOUSE_OVERmc_botao.addEventListener(MouseEvent.MOUSE_OVER, onOver); function onOver(evt:MouseEvent):void { trace(“EM CIMA DO OBJETO”);}

Vamos praticar?Antes de testar os dois eventos de mouse que você conheceu, vamos criar um botão.

• Abra um novo arquivo e escolha a opção ActionScript 3.0. • Desenhe no palco (stage) um círculo pequeno utilizando a ferramenta oval.• Selecione o círculo usando a ferramenta de seleção e pressione a tecla F8 para converter em símbolo. Escolha, no tipo,

a opção Botão, no nome digite botão e clique em OK conforme a figura a seguir.

Para criar uma ação para o botão é necessário criar um nome para a instância do botão, e em seguida criar uma

ação no Painel Ação. Na janela Propriedades digite o nome mc_botao conforme figura abaixo.

37

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense


Agora abra o Painel Ação e digite o seguinte código:

mc_botao.addEventListener(MouseEvent.MOUSE_OVER, onOver); mc_botao.addEventListener(MouseEvent.CLICK, onClick);

function onOver(evt:MouseEvent):void { trace(“EM CIMA DO OBJETO”);}function onClick(evt:MouseEvent):void { trace(“CLICK”); }

Pressione as teclas Ctrl + Enter para rodar o exemplo. Sempre que o mouse estiver em cima do objeto irá disparar

o evento MOUSE_OVER que irá chamar a função onOver, e sempre que clicar no objeto irá disparar o evento

CLICK que irá chamar a função onClick.

KeYBOaRdeVenT• KEY_DOWN

stage.addEventListener(KeyboardEvent.KEY_DOWN, onDown); function onDown(evt:KeyboardEvent):void { trace(“tecla pressionada”); }

• KEY_UPstage.addEventListener(KeyboardEvent.KEY_UP, onUp); function onUp(evt:KeyboardEvent):void { trace(“tecla solta”); }VERIFICAR SE UMA TECLA FOI PRESSIONADAstage.addEventListener(KeyboardEvent.KEY_DOWN, onDown); function onDown(evt:KeyboardEvent):void { if(evt.keyCode == 65) { trace(“A tecla A foi pressionada!”); } }

LinksVocê pode abrir uma página web, através de um botão. Basta adicionar o código dentro da função chamada por

um dos eventos do mouse. Eis o código:

var url:URLRequest = new URLRequest(“http:tsiad.ifsul.edu.br/moodle/”); navigateToURL(url);

Para testar, utilize o exercício de eventos de mouse e adicione o código abaixo, após o código trace(CLICK). Ao

clicar no botão, irá abrir o navegador com a página escolhida.

38

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense


3. Clipe de filme e suas propriedadesClipe de filme (movieclip), é um pequeno filme ou animação independente que possui sua própria linha do tem-

po, camadas e códigos AS.

Para exemplificar vamos converter um objeto do palco em um clipe de filme. Desenhe um quadrado no palco

utilizando a ferramenta retângulo. Selecione este retângulo inclusive com sua borda. Clique no objeto com o bo-

tão direito do mouse e escolha a opção Converter em Símbolo. Abrirá a janela Converter em Símbolo. No campo

nome, dê um nome para o movieclip, por exemplo, mc_retangulo. Em Tipo

selecione Clipe de filme e clique no botão OK.

Após criar o movieclip no palco, devemos atribuir a ele um nome de instância. Este nome será utilizado nos códi-

gos do ActionScript. Assim poderemos identificar o objeto e interagir com ele usando nosso código.

Para dar um nome de instância temos que abrir o painel Propriedades. Caso não esteja aberto, clique no menu

Janela e na opção Propriedades.

No painel Propriedade, há um campo chamado <Nome da ocorrência>. Digite neste campo um nome de instân-

cia como por exemplo mc_retangulo_verde.

A interação com movieclips é muito simples, e com o ActionScript podemos mudar algumas propriedades destes

movieclips.

Height e widthEssas propriedades mudam a height (altura) e a width (largura) do movieclip.

Exemplo:

mc_retangulo_verde.height = 300;mc_retangulo_verde.width = 300;

39

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense


Coordenadas x e yDefinimos a posição do movieclip no palco, alterando as coordenadas x (horizontal) e y (vertical).

Exemplo

mc_retangulo_verde.x = 200;

mc_retangulo_verde.y = 300;

VisibleIndica se o movieclip ficará visível ou não. Esta propriedade utiliza valores do tipo boolean:

True – visível

False – invisível

Exemplo:

mc_retangulo_verde.visible = false;

RotationRotaciona o movieclip no palco. Os valores são em graus. Positivo para sentido horário e negativo para o sentido

anti-horário.

Exemplo:

mc_retangulo_verde.rotation = 20;mc_retangulo_verde.rotation = -20;

Vamos praticar?Crie um movieclip a partir de um retângulo na cor verde, e dê o nome mc_retangulo_verde como nome de ins-

tância. Digite o seguinte código:

stage.addEventListener(KeyboardEvent.KEY_DOWN, onDown); function onDown(evt:KeyboardEvent):void { if(evt.keyCode == 65) { trace(“A tecla A foi pressionada!”); mc_retangulo_verde.rotation += 15;

} if(evt.keyCode == 66) { trace(“A tecla B foi pressionada!”); mc_retangulo_verde.rotation -= 15;

} }

Para testar pressione as teclas Ctrl + Enter. Pressionando as teclas A ou B nosso movieclip irá rotacionar no palco.

Experimente as outras propriedades que estudamos.

40

Sis

tem

a U

nive

rsid

ade

Abe

rta d

o B

rasi

l - U

AB

| I

F S

ul-r

io-g

rand

ense


ATIVIDADE D – ActionScript 3.0Caro(a) aluno(a),

Utilizando os códigos AS que você aprendeu, crie uma aplicação para calcular a média de três temperaturas me-

didas ao longo do dia. Se a média for menor que 15, informe que a “temperatura está abaixo da média”, se for

igual a 15 informe que a “temperatura está na média” e se for maior que 15 informe que “ a temperatura está

acima da média”. Bom trabalho!

unidade programando no flashuab.ifsul.edu.br/tsiad/conteudo/modulo5/_pdf/lpa_ud_1.pdfaproximada da...

Documents