19
CURSO DE ACTIONSCRIPT 3.0

ActionScript3apostila

Embed Size (px)

Citation preview

CURSO DE ACTIONSCRIPT 3.0

Estrutura

Aula 1 - Introdução ............................................................................................................................................................................................. 3 O que é Actionscript, Variáveis e Tipos de Dados, Função Trace, Sintaxe, Operadores, Iteração com MovieClips.

Aula 2 - Funções .................................................................................................................................................................................................. 6 O que é funções, Instruções de Função, Expressões de Função, Retorno de Valores de Funções, Exercícios

Aula 3 - Eventos .................................................................................................................................................................................................... 7 O que é um Evento, Ovintes de Eventos, MouseEvent, KeyboardEvent, navigateToUrl, Timer

Aula 4 - Estruturas Condicionais ............................................................................................................................................................ 10

If, Else, Else If, Switch, KeyboardEvent e Estruturas Condicionais, Exercícios

Aula 5 - Estruturas de Repetição ............................................................................................................................................................ 10

While, For, Do...While, Exercícios

Cu

rso

de

Ac

tion

sc

ript 3

.0

Aula 1 - Introdução O que é ActionScript

O action script 3 nasceu da necessidade de conseguir ter uma melhor performance nas aplicações e animações Flash, atual- mente sabe-se que teria necessariamente que ser implementadas alterações de raiz no action script 2 para que este pudesse ter a performance do atual AS3, por isso foi preferivél quase que criar uma linguagem de novo à parcial alteração AS2. A lingua- gem AS3 é literalmente tratada à parte da AS2 pela runtime do Flash Player, pelo que logo aí se pode concluir que são mesmo diferentes a nível de código e de performance também.

O grande ponto forte do AS3 é que este é essencialmente focado em POO (Programação Orientada a Objetos), pelo que muitos programadores sentirão dificuldades em compreender bastantes aspectos desta linguagem. Claro que os programa- dors Java partem em vantagem para a aprendizagem, mas para todos os outros fica uma dica. O AS3 não é nenhum bicho de 7 cabeças, e sua vertente POO torna as coisas muito simples, rápidas e organizadas. Para os programadores de AS2 as coisas não serão muito fáceis, muito pelo fato de à primeira vista muitas coisas possam ser compreendidas e interpretadas como no AS2, mas posso dizer por experiência própria de que depois de se aprender a base, torna-se "quase mais" simples que AS2. Um dos grandes problemas que se apresentam ao programar em AS3 é a impossibilidade de programar usando AS3 e AS2 mutuamente, porque são tratadas de forma diferente pleo Flash Player.

Variáveis e Tipos de Dados Variáveis

As variáveis permitem armazenar valores usados no programa. Para declarar uma variável, você deve usar a instrução var com o nome da variável. Tais como em outras linguagens de programação as variáveis são usadas para guardar valores. As variáves devem ser identificadores únicos e que não interfiram com os elementos reservados da própria linguagem.

Certo Errado

var minhaVariavel:Number = 1;

var texto:String = "ActionScript 3.0";

var valor:int;

valor = 20;

var = 2;

var Valor:Number = "1";

As regras para declarações de variáveis são algumas: • Não devem iniciar com números; • O símbolo "$" e "_" podem ser usados se a variável não for nomeada com uma variável ou função reservada do AS3; • Os números podem ser usados desdeque a variável comece com letras.

Tipos de Dados

Tipos de dados ou simplesmente tipos de declaração são usados para informar que tipo de dado está sendo usado. Existem vários tipos de dados, vejamos as mais comuns.

Tipo Descrição

Number Representa inteiros e números de ponto flutuante.

int Conjunto de inteiros de -2.147.483.648 a 2.147.483.647

uint Conjunto de inteiros de 0 a 4.294.967.295 (Núm. Positivos)

String Representa uma seqüência de caracteres.

Boolean Guarda apenas verdadeiro(true) ou falso(false).

Array Guarada mais que um valor em uma variável.

Função Trace O trace como em muitas linguagens é muito util no caso do debug, para obtermos valores de determinadas variáveis e fun-

ções. Este trace() coloca no painel de saída (output) do Flash o valor que lhe indicar-mos. var Curso:String = "ActionScript 3.0";

trace("Curso:", Curso);

Sintaxe A sintaxe de uma linguagem define um conjunto de regras que deve ser seguido durante a escrita de código executável.

Case sensitivity

ActionScript é uma linguagem case-sensitive, o que significa que os identificadores diferem em case (letras maiúsculas de minúsculas).

var num1:int;

var Num1:int;

Sintaxe de ponto (Dot sintax)

O operador dot (.) fornece uma maneira de acessar as propriedades e os métodos de um objeto. Com o uso da sintaxe de pontos, é possível fazer referência a uma propriedade ou um método de classe usando um nome de ocorrência. 3

4

Cu

rso

de

Ac

tion

sc

ript 3

.0

class ExemploPonto {

public var propriedade: String;

public function metodo() : void {}

}

Acessando a propriedade e o método da classe a partir de uma instância. var meuPonto : ExemploPonto = new ExemploPonto();

meuPonto.propriedade = “Curso de ActionScript 3.0”;

meuPonto.metodo();

Ponto e vírgura ( ; )

Você pode usar ponto e vírgula para terminar uma declaração. Alternativamente, se você omitir o ponto e vírgula, o compi- lador irá assumir que cada linha de código representa uma declaração.

Parênteses

Você irá usar parênteses em 3 casos: 1. Para alterar a ordem das operações em uma expressão. Operações agrupadas dentro de parênteses são executadas pri-

meiro. trace(2 + 3 *4); //14

trace((2 + 3) *4); //20

2. Você pode usar parênteses com o operador vírgula ( , ) para avaliar uma série de expressões e retornar o resultado no final da expressão.

var a:int = 2;

var b:int = 3;

trace((a++, b++, a+b)); // 7

3. Você usa parênteses para passar um ou mais parênteses para funções ou métodos. trace("oi");

Comentários

Durante a escrita do ActionScript, muitas vezes, você desejará fazer anotações, talvez para explicar como algumas linhas de código funcionam e por que escolheu uma determinada opção. Os comentários de código são uma ferramenta que você pode usar para escrever um texto que o computador deve ignorar no seu código. O ActionScript inclui dois tipos de comentários:

Comentário de uma linha: um comentário de uma linha é criado colocando duas barras em qualquer lugar de uma linha.

Tudo que vier depois das barras até o fim da linha será ignorado pelo computador: // Este comentário sera ignorado.

var idade:Number = 18; // É maior de Idade?.

Comentário de várias linhas: um comentário de várias linhas inclui um marcador de comentário inicial (/*), o conteúdo do

comentário e um marcador de comentário final (*/). Tudo entre os marcadores inicial e final é ignorado pelo computador, independentemente do número de linhas que o comentário contém:

/*

Aqui temos um comentário de várias linhas.

Lembrando que o mesmo será ignorado nos testes,

ficando visível somente no script.

*/

Palavras-chave e palavras reservadas

As palavras reservadas são palavras que não podem ser usadas como identificadores no código porque são para uso do AS. Elas incluem palavras-chave léxicas, que são removidas do espaço para nomes do programa pelo compilador. O compilador relatará um erro se você usar uma palavra-chave léxica como identificador.

as break case catch class const

continue default delete do else extends

false finally for function if implements

import in instanceof internal is native

new null package private protected public

return super switch this throw to

true try typeof use var void

while with

Há um pequeno conjunto de palavras-chave, chamado palavras-chave sintáticas, que pode ser usado como identificador, mas têm um significado especial em determinados contextos.

5

Cu

rso

de

Ac

tion

sc

ript 3

.0

each get set namespace include dynamic

final native override static

Também há vários identificadores que, às vezes, são referidos como palavras reservadas futuras. Eles não são reservados pelo AS3, embora alguns sejam tratados como palavras-chave pelo software que incorpora o AS3. Você pode usar vários desses identificadores no seu código, mas a Adobe não recomenda essa prática porque eles podem aparecer como palavras-chave em uma versão subseqüente da linguagem.

abstract boolean byte cast char debugger

double enum export float goto intrinsic

long prototype short synchronized throws to

transient type virtual volatile

Operadores Os operadores são símbolos (ou, ocasionalmente, palavras) essenciais que são usados para executar cálculos. Eles são muito

usados em operações matemáticas e também para comparar valores. Como regra geral, um operador usa um ou mais valores e "obtém" um único resultado. Aritiméticos

São as operações básicas da Matemática.

Tipo Descrição Exemplo

Soma (+) É a soma de dois ou mais valores para obeter um único resul- tado.

var soma:Number = 23 + 32;

Subtração (-) É a subtração de dois ou mais valores para obeter um único resultado.

var subt:Number = 53 - 32;

Multiplicação (*) É a multiplicação de dois ou mais valores para obeter um único resultado.

var mult:Number = 18 * 13;

Divisão (/) É a divisão de dois ou mais valores para obeter um único re- sultado.

var div:Number = 52 / 30;

Relacionais

São sinais que identificam uma relação entre dois valores. Uma relação de comparação pode ser de igual, maior ou menor valor.

Tipo Descrição Exemplo

Igualdade (==) A relação de igualdade serve para testar se os valores testa- dos são iguais. Para escrever uma relação de igualdade se utiliza dois sinais de igual (==), um seguido do outro.

Diferente (!=) A relação diferente ou não igual pode ser definida de duas maneiras, a primeira utilizando os sinais de exclamação seguido pelo sinal de igual (!=) ou pelo sinal de menor seguido do sinal de maio (<>).

Maior(>) A relação de maior é exposta quando utilizada o sinal de maior (>) para saber se o valor a esquerda do sinal é maior que o valor a direita do sinal.

Menor (<) A relação de menor é exposta quando utilizada o sinal de maior (<) para saber se o valor a esquerda do sinal é menor que o valor a direita do sinal.

Maior Igual (>=) A relação de maior ou igual é estabelecida quando indicado o sinal de maior seguido do sinal de igual (>=). A relação é verda- deira quando o valor á esquerda dos sinais é maior, ou igual, ao valor á direita dos sinais.

Menor Igual (<=) A relação de menor ou igual é estabelecida quando indicado o sinal de menor seguido do sinal de igual (<=). A relação é verda- deira quando o valor á esquerda dos sinais é menor, ou igual, ao valor á direita dos sinais.

Lógicos

Os operadores lógicos são utilizados para unir um ou mais resultados lógicos, ou transformar um resultado em outro. Existem os operadores binários, que necessitam de dois ou mais testes lógicos, e o operador unário, que necessita de pelo menos um teste.

6

Função Descrição

CLICK Define o valor da propriedade de tipo de um objeto de evento clicar.

Cu

rso

de

Ac

tion

sc

ript 3

.0

Tipo Descrição Exemplo

! (Not) O operador (!) é um operador unário, que só precisa de um teste lógico. Sua função é inverter o valor do teste lógico, ou seja, se um teste lógico retornar true (verdadeiro), o operador not transforma-o em false (falso), e se um teste lógico retornar false (falso), o operador not transforma-o em true (verdadeiro).

|| (Or) O operador (||) é um operador binário, que necessita de dois testes lógicos. Esse operador retorna true (verdadeiro) se pelo menos um dos testes retornar true (verdadeiro). E só retorna false (falso) se os dois testes juntos retornarem falso.

&& (And) O operador (&&) é um operador binário que necessita de dois testes lógicos. Esse operador só retorna true (verdadeiro) se os dois testes retornarem true (verdadeiro). Se um dos testes re- alizados retornarem false (falso), o operaor AND retorna false (falso).

Interação com MovieClips Agora que a aprendemos um pouco de sobre AS3 vamos fazer uma interação entre o Flash e o AS. Para nosso exemplos vamos criar uma interpolação de formas que contenha 4 objetos e nele iremos colocar dois botões: Um

para acionar a interpolação e outro para enviar o usuário para o site do autor. - O palco deve ter as seguintes dimensões: 760x400; - Criar quatro objetos a sua escolha; - Criar um botão: Play.

stop(); //O Filme se inicia parado.

//Função responsável pelo botão Play

function iniciarFilme(event:MouseEvent):void

{

Script

this.play();

}

btnPlay.addEventListener(MouseEvent.CLICK, iniciarFilme);

Abaixo segue explicação dos comandos mais importantes usados nessa interação.

Função Descrição

stop() Para a reprodução de fluxos de uma lista de reprodução.

play() Move o indicador de reprodução na linha do tempo do clipe de filme.

MouseEvent Cria um objeto Event que contém informações sobre eventos de mouse.

addEventListener() Evento Ovidor.*

event É usada como a classe base para a criação de Eventos *Mais detalhes na aula de Eventos.

Aula 2 - Estruturas Condicionais If

Verifica a comparação entre determinados elementos, mais comuns em comparação de variáveis.

Sintaxe Exemplo

if ([teste lógico]){

instrução;

}

var idade:int = 22;

if (idade > 18){

var resultado:String = "Sim";

}

trace("É maior de idade?");

trace("Resposta: " + resultado);

ELSE O else indica quais instruções devem ser executadas caso o teste do if retorne falso. A sintaxe do else é:

Sintaxe Exemplo

Cu

rso

de

Ac

tion

sc

ript 3

.0

if ([teste lógico]) {

instrução1;

}

else {

instrução2;

}

var idadeElse:int = 17;

var respElse:String;

if (idadeElse > 18){

respElse = "Sim";

}

else {

respElse = "Não";

}

trace("É maior de idade?");

trace("Resposta: " + respElse);

ELSE IF

O else if é uma instrução complementar ao if e ao else. Utilizando somente o if e o else, só é possível executar a instrução1 se o teste for verdadeiro, ou a instrução2 se o teste for falso. Mas se desejarmos executar uma terceira instrução, caso o teste seja falso? Ai entra o else if.

Sintaxe Exemplo

if ([teste1]) {

instrução1;

}

else if ([teste2]) {

instrução2;

}

else{

instrução3;

}

var nota:int = 5;

var resul:String;

if (nota == 10){

resul = "Excelente";

}

else if (nota > 5) {

resul = "Regular";

}

else {

resul = "Ruim";

}

trace("Resultado da Nota: " + resul);

SWITCH Switch substitui if quando uma variável é testada para diversos valores.

Estrutura Usando IF e ELSEIF Estrutura usando SWITCH

var situacao:String = "S";

var resposta:String;

if(situacao == "S") {

resposta = "Solteiro";

}

else if(situacao == "C") {

resposta = "Casado";

}

else if(situacao == "D") {

resposta = "Divorciado";

}

else if(situacao == "J") {

resposta = "Separado";

}

else {

resposta = "Situação Inválida";

}

trace(resposta);

situacao = "C";

switch(situacao) { case "S" :

trace("Solteiro"); break;

case "C" :

trace("Casado"); break;

case "D" :

trace("Divorciado"); break;

case "J" :

trace("Separado"); break;

default:

trace("Situação Inválida"); break;

}

Propriedade Descrição

case Indica que a variavel deve ser comparada com o valor que a segue. O valor pode ser numérico, string ou booleano.

break Finaliza as instruções. Indica que o PHP deve finalizar ali.

default Substitui o else, criando uma condição de erro sem comparações.

7

8

Cu

rso

de

Ac

tion

sc

ript 3

.0

-

Aula 3 - Estruturas de Repetição e Array As estruturas de repetição servem para executar um trecho de códigos repetidas vezes, sem a necessidade de reescrevê-los.

While

Essa estrutura é equivalente á estrutura ENQUANTO-FAÇA ou ENQUANTO-REPITA. Muito utilizadas para executar um bloco de comandos continuamente dependendo da condição.

Sintaxe Exemplo

inicialização;

while( teste ) {

instrucao1;

incremento;

}

var inicio:int = 0;

while( inicio < 10 ) {

trace("O contador vale: " + inicio);

inicio ++;

}

For Composto por 3 argumentos, o que, de onde, até onde. É muito útil para fazer comparações ou execuções repetidamente um

determinado número de vezes. A estrutura de repetição for é mais utilizada quando surje a necessidade de utilizar contadores.

Sintaxe Exemplo

for ( inicializacao ; teste ; incremento ) {

instrucao1;

}

var inicioFor:int;

for( inicioFor = 0 ; inicioFor < 10 ; inicioFor++){

trace("O contador vale: " + inicioFor);

}

Do...While O Do...While funciona de maneira bastante semelhante ao While, com a simples diferença que a expressão é testada ao final

do bloco de comandos.

Sintaxe Exemplo

inicializacao;

do {

instrucao1;

incremento;

}

while (teste);

var inicioDoWilhe = 0;

do{

trace("O contador vale: " + inicioDoWilhe);

inicioDoWilhe++;

}

while( inicioDoWilhe < 10 );

Array Um Array pode ser considerado uma variável que armazena múltiplos valores associados a m índice. Os Arrays são ampla-

mente utilizados em qualquer linguagem de programação.

Crando um Array Uma Aray pode ser criada de diversas formas.

var arr:Array = new Array();

Esta é ma forma simples, onde criamos um Array vazio. A partir dele podemos adicionar itens através do método push(). var arr:Array = new Array();

arr.push("Aula 1");

arr.push("Aula 2");

arr.push("Aula 3");

Função Descrição

push() Adiciona um ou mais elementos ao final de uma matriz e retorna o novo comprimento dessa matriz.

pop() Remove o último elemento de uma matriz e retorna o valor desse elemento.

shift() Remove o primeiro elemento de uma matriz e retorna esse elemento.

sort() Classifica os elementos em uma matriz.*

unshift() Adiciona um ou mais elementos ao início de uma matriz e retorna o novo comprimento dessa matriz.

* Esse método classifica de acordo com valores Unicode. (ASCII é um subconjunto de Unicode.) Por padrão, Array. sort() funciona da seguinte maneira: A classificação faz distinção entre maiúsculas e minúsculas (Z precede a). A classificação é ascendente (a precede b). A matriz é modificada para refletir a ordem de classificação; vários elementos que têm campos de classificação idênticos são inseridos

9

Cu

rso

de

Ac

tion

sc

ript 3

.0

consecutivamente na matriz classificada, sem nenhuma ordem em particular. Todos os elementos, independentemente do tipo de dados, são classificados como se fossem strings. Sendo assim, 100 precede 99, já que

"1" é um valor de string menor do que "9".

Exercícios Utilizando os métodos for e while faça:

1 - Criar um sistema que mostre os números pares menores que 10. 2 - Criar um sistema que mostre números multiplos de 5 de 15 a 40.

Utilizando Array faça: 3 - Criar um sistema que preencha uma matriz com números múltiplos de 4 em um intervalo de 21 até 105 e depois

mostre na tela.

Aula 4 - Funções O que é funções?

As funções são blocos de código que executam tarefas específicas e podem ser reutilizados no seu programa.

Chamada de funções

Uma função é chamada usando seu identificador seguido de um operador parênteses "()". O operador parênteses delimita qualquer parâmetro de função que você deseja enviar para a função. Por exemplo, a função trace().

Se estiver chamando uma função sem nenhum parâmetro, você deverá usar parênteses vazios.

Instruções de função A instrução de função é a técnica preferida para definir funções no modo estrito. Uma instrução de função começa com a

palavra-chave function e, em seguida, vem: • O nome da função; • Os parâmetros, em uma lista delimitada por vírgula e entre parênteses; • O corpo da função, ou seja, o código do ActionScript a ser executado quando a função é chamada, delimitado por chaves.

Exemplos

//Exemplo 1

function traceExibe(exibe:String) {

trace(exibe);

}

traceExibe("Aula 2 - Funções");

//Exemplo 2

function traceTexto(){

trace("Instruções de Função");

}

traceTexto();

Expressões de função É usar uma instrução de atribuição com uma expressão de função, que às vezes também é chamada de literal de função ou

função anônima. Este método é mais detalhado e amplamente usado nas versões anteriores do ActionScript. Uma instrução de atribuição com uma expressão de função começa com a palavra-chave var e, em seguida, vem: • O nome da função; • O operador dois-pontos (:); • A classe Function para indicar o tipo de dados; • O operador de atribuição (=); • A palavra-chave function; • Os parâmetros, em uma lista delimitada por vírgula e entre parênteses; • O corpo da função, ou seja, o código do ActionScript a ser executado quando a função é chamada, delimitado por chaves.

Exemplos

//Exemplo 1

var traceEx:Function = function(exibe:String) {

trace(exibe);

}

traceEx("Aula 2 - Funções");

//Exemplo 2

var traceTxt:Function = function(){

trace("Instruções de Função");

}

traceTxt();

Retorno de valores de funções Para retornar um valor de sua função, use a instrução return seguida pela expressão ou pelo valor literal que deseja retornar.

Exemplos

function calculoNum(baseNum:int) {

return (baseNum * 2);

}

var num:Number;

num = calculoNum(20);

trace(num);

10

Cu

rso

de

Ac

tion

sc

ript 3

.0

Função Descrição

return() Faz com que a execução retorne imediatamente à função de chamada.

new

Para criar uma instância de um objeto, um novo objeto deve ser criado e atribuido a uma variável. Um objeto sempre será atribuído quando um novo objeto for criado a não ser que objeto tenha um construtor definido que dispara uma exceção por um erro.

Aula 5 - Eventos O que é um Evento

É tudo que acontece (eventualmente) ao nosso redor. A diferença básica é, se queremos ouvir (dar atenção) e fazer algo quando (e somente quando!) acontecer alguma coisa sobre

um determinado assunto, ou se preferir pode deixar acontecer as coisas ao redor e simplismente fazer nada. Por exemplo, quando chover, quero pegar um guarda-chuva! Ou quando a noite chegar, quero ir em uma festa! Ou se eu quiser tomar banho de chuva e não ir na festa a noite. Tudo bem! São só eventos que acontecem e eu não quis dar atenção.

Eventos no AS3

No caso do amigo Flash, os eventos também acontecem. Basicamente, existem 2 tipos de eventos: Um gerado pela interação do usuário com o conteúdo, quando por exemplo clica no botão, ou quando pressiona uma tecla. E outro tipo de evento que acontece pode ser criado pelo próprio sistema (Player Flash).

Ouvintes de Evento Também chamados de manipuladores de evento, são funções executadas pelo Flash Player e pelo AIR em resposta a eventos

específicos. A adição de um ouvinte de evento é um processo de duas etapas. Primeiro, crie um método de função ou classe a ser executado pelo Flash Player ou AIR em resposta ao evento. Às vezes, isso é chamado de função de ouvinte ou de mani- pulador de evento. Segundo, use o método addEventListener() para registrar a função de ouvinte no destino do evento ou em qualquer objeto da lista de exibição ao longo do fluxo de evento adequado.

Função Descrição

addEventListener() Registra um objeto de ouvinte de evento em um objeto EventDispatcher, de forma que o ouvin- te receba a notificação de um evento.

MouseEvent Cria um objeto Event que contém informações sobre eventos de mouse. Ou seja, um evento do mouse geralmente é gerado por um dispositivo de entrada do usuário, que utiliza o ponteiro do mouse.

Iremos agora trabalhar com uma imagem onde aplicare-mos os efeitos de zoom in e zoom out. Nesse exemplo também ve-

remos um efeito de alpha (transparência) nos botões. - O palco deve ter as seguintes dimensões: 760x400 ou uma a sua escolha; - Utilizar uma imagem para nosso exercício a sua escolha; - Criar dois botões: Zoom In (+) e Zoom Out (-).

Script

11

Cu

rso

de

Ac

tion

sc

ript 3

.0

//Efeitos do Botão

btnIn.alpha = btnOut.alpha = 0.3; //Transparência da Imagem

btnIn.addEventListener(MouseEvent.MOUSE_OVER, overMouse);

btnIn.addEventListener(MouseEvent.MOUSE_OUT, outMouse);

btnOut.addEventListener(MouseEvent.MOUSE_OVER, overMouse2);

btnOut.addEventListener(MouseEvent.MOUSE_OUT, outMouse2);

function overMouse(btn:MouseEvent):void {

btn.target.alpha = 1;

}

function outMouse(btn:MouseEvent):void {

btn.target.alpha = 0.3;

}

function overMouse2(btn:MouseEvent):void {

btn.target.alpha = 1;

}

function outMouse2(btn:MouseEvent):void {

btn.target.alpha = 0.3;

}

//Responsável Por Aumentar ou Diminuir a Imagem

btnIn.addEventListener(MouseEvent.CLICK, aumenta);

btnOut.addEventListener(MouseEvent.CLICK, diminui);

function aumenta(event:MouseEvent):void {

imagem.width += 5;

imagem.height += 5;

}

function diminui(event:MouseEvent):void {

imagem.width -= 5;

imagem.height -= 5;

}

OBS.: O arquivo de exemplo esta na pasta junto com os demais arquivos do curso.

Eventos do Mouse

Constante Descrição

CLICK Define o valor da propriedade de tipo de um objeto de evento clicar.

MOUSE_OVER Define o valor da propriedade de tipo de um objeto de evento mouseOver (Ao passar o Mouse).

MOUSE_OUT Define o valor da propriedade de tipo de um objeto de evento mouseOut.(Ao retirar o Mouse).

Função Descrição

target Faz uma referência a uma função do evento adicionado.

alpha Define o nível de trasparência do objeto, onde 0(0%) e 1(100%).

width Largura de um objeto.

height Altura de um Obeto.

x* Posicionamento Horizontal (Da Esquerda para Direita)

y* Posicionamento Vertical (De Cima para Baixo)

* x e y se alinham apartir do ponto de registro do Objeto.

KeyboardEvent Cria um objeto Event que contém informações sobre eventos de teclado.

Script

stage.addEventListener (KeyboardEvent.KEY_DOWN, chaveDown);

stage.addEventListener (KeyboardEvent.KEY_UP, chaveUp);

function chaveDown (e:KeyboardEvent):void {

downText.text = "Key code: " + e.keyCode + "\n" +

"Ctrl status: " + e.ctrlKey + "\n" +

"Key location: " + e.keyLocation + "\n" +

"Shift key: " + e.shiftKey + "\n";

}

function chaveUp (e:KeyboardEvent):void {

//UpText.text = "" + e.keyCode;

}

Eventos do Teclado

Constante Descrição

12

Cu

rso

de

Ac

tion

sc

ript 3

.0

KEY_DOWN Define o valor da propriedade de tipo de um objeto de evento clicar.

KEY_UP Define o valor da propriedade de tipo de um objeto de evento mouseOver (Ao passar o Mouse).

keyLocation Indica a localização da tecla no teclado.

keyCode O valor de código da tecla pressionada ou solta.

ctrlKey Diz se a tecla Ctrl está presionada ou não.

shiftKey Diz se a tecla Shift está presionada ou não.

Lista de keyCode (Caracteres do Teclado)

keyCode ASC II keyCode ASC II keyCode ASC II keyCode ASC II keyCode ASC II

L-Button 1 Up 38 C 67 W 87 F2 113

R-Button 2 Right 39 D 68 X 88 F3 114

Cancel 3 Down 40 E 69 Y 89 F4 115

M-Button 4 Select 41 F 70 Z 90 F5 116

Back 8 PrintScreen 44 G 71 NP-0 96 F6 117

Tab 9 Insert 45 H 72 NP-1 97 F7 118

Clear 12 Delete 46 I 73 NP-2 98 F8 119

Return 13 Help 47 J 74 NP-3 99 F9 120

Shift 16 0 48 K 75 NP-4 100 F10 121

Control 17 1 49 L 76 NP-5 101 F11 122

Menu 18 2 50 M 77 NP-6 102 F12 123

Pause 19 3 51 N 78 NP-5 103 NumLock 144

Cap 20 4 52 O 79 NP-8 104 Scroll 145

Escape 27 5 53 P 80 NP-9 105 = 187

Space 32 6 54 Q 81 * 106 , 188

Prior 33 7 55 R 82 + 107

Next 34 8 56 S 83 - 109

End 35 9 57 T 84 . 110

Home 36 A 65 U 85 / 111

Left 37 B 66 V 86 F1 112

KeyboardEvent e Estruturas Condicionais Vamos agora interagir o que aprendemos sobre KeyboardEvent com Estruturas condicionais, criando um objeto que irá se

mover na tela. - O palco deve ter as seguintes dimensões: 760x400 ou uma a sua escolha; - Criar um pequeno objeto para se mover na tela.

Script

13

Cu

rso

de

Ac

tion

sc

ript 3

.0

var pressLeft:Boolean = new Boolean(false);

var pressUp:Boolean = new Boolean(false);

var pressRight:Boolean = new Boolean(false);

var pressDown:Boolean = new Boolean(false);

function pressButtonDown(event:KeyboardEvent):void {

switch (event.keyCode) {

case 37 : //ESQUERDA;

pressLeft = true;

break;

case 38 : //CIMA;

pressUp = true;

break;

case 39 : //DIREITA;

pressRight = true;

break;

case 40 : //BAIXO;

pressDown = true;

break;

}

}

function pressButtonUp(event:KeyboardEvent):void {

switch (event.keyCode) {

case 37 : //ESQUERDA;

pressLeft = false;

break;

case 38 : //CIMA;

pressUp = false;

break;

case 39 : //DIREITA;

pressRight = false;

break;

case 40 : //BAIXO;

pressDown = false;

break;

}

}

function runIt(e:Event):void {

if (pressLeft) {

this.quadro.x -= 5;

}

if (pressRight) {

this.quadro.x += 5;

}

if (pressUp) {

this.quadro.y -= 5;

}

if (pressDown) {

this.quadro.y += 5;

}

}

stage.addEventListener(KeyboardEvent.KEY_DOWN, pressButtonDown);

stage.addEventListener(KeyboardEvent.KEY_UP, pressButtonUp);

stage.addEventListener(Event.ENTER_FRAME, runIt);

navigateToUrl Abre ou substitui uma janela no aplicativo que contém o contêiner do Flash Player (geralmente um navegador). No Adobe

AIR, a função abre uma URL no navegador da web padrão do sistema.

Script

function abrirHomePage(event:MouseEvent):void

{

var abrirURL:URLRequest = new URLRequest("http://www.webdesenvolvimentos.com/");

navigateToURL(abrirURL, "_blank");

}

btnAutor.addEventListener(MouseEvent.CLICK, abrirHomePage);

Função Descrição

14

Cu

rso

de

Ac

tion

sc

ript 3

.0

navigateToURL() Sintaxe: navigateToURL(request:URLRequest, window:String = null)

Propriedade Descrição

URLRequest() Especifica uma URL para navegação.

_self Abre na mesma Janela.

_blank Abre em uma nova janela ou aba.

Aula 6 - Trabalhando com Textos Para exibir texto na tela no Adobe® Flash® Player ou Adobe® AIR™, use uma ocorrência da classe TextField ou use as classes

do Mecanismo de texto do Flash. Essas classes permitem criar, exibir e formatar texto. É possível estabelecer conteúdo específico para campos de texto ou designar a origem do texto e, em seguida, definir a apa-

rência desse texto. Também é possível responder a eventos do usuário conforme o usuário insere texto ou clica em um link de hipertexto.

Tarefas comuns do trabalho com texto

São abordadas as seguintes tarefas comuns relacionadas à classe TextField: • Modificação de conteúdo de campo de texto • Uso de HTML em campos de texto • Uso de imagens em campos de texto • Seleção de texto e trabalho com texto selecionado pelo usuário • Captura da entrada de texto • Restrição de entrada de texto • Aplicação de formatação e de estilos CSS ao texto • Ajuste fino da exibição do texto com nitidez, espessura e suavização de borda • Acesso e trabalho com campos de texto estáticos no ActionScript

São abordadas as seguintes tarefas comuns relacionadas às classes do Mecanismo de texto do Flash: • Criação e exibição de texto • Manipulação de eventos • Formatação de texto • Trabalho com fontes • Controle de texto

TextFields O conteúdo do campo de texto pode ser pré-especificado no arquivo SWF, carregado de um arquivo de texto ou de um banco

de dados ou inserido por um usuário em interação com o aplicativo. Dentro de um campo de texto, o texto pode aparecer como conteúdo HTML renderizado, com imagens incorporadas no HTML renderizado. Depois de criar uma ocorrência de um campo de texto, é possível usar as classes flash.text, como TextFormat e StyleSheet, para controlar a aparência do texto. O pacote flash.text contém praticamente todas as classes relacionadas à criação, ao gerenciamento e à formatação de texto no ActionScript.

Tipos de texto

O tipo de texto dentro de um campo de texto é caracterizado por sua origem: Texto dinâmico O texto dinâmico inclui conteúdo carregado de uma origem externa, como um arquivo de texto, um arquivo XML ou mesmo

um serviço remoto da Web. Texto de entrada Texto de entrada é qualquer texto inserido por um usuário ou texto dinâmico que pode ser editado pelo usuário. É possível

configurar uma folha de estilos para formatar texto de entrada ou usar a classe flash.text.TextFormat para atribuir proprieda- des ao campo de texto para o conteúdo de entrada.

Texto estático O texto estático é criado somente através da Ferramenta de autoria. Não é possível criar uma ocorrência de texto estático

usando o ActionScript 3.0. No entanto, é possível usar as classes ActionScript, como StaticText e TextSnapshot, para manipular uma ocorrência de texto estático existente.

var textFld:TextField = new TextField();

Exemplo

textFld.type = TextFieldType.DYNAMIC; //Tipo de Campo

textFld.autoSize = TextFieldAutoSize.LEFT;

textFld.text = "Curso de Actionscript 3.0 - TextField"; //Texto

textFld.textColor = 0xFF8800; //Cor do Texto

addChild(textFld);

15

Constantes Descrição

TextFieldType.DYNAMIC Campo de texto dinâmico, que um usuário não pode editar.

TextFieldType.INPUT Campo de texto de entrada, que um usuário pode editar.

Cu

rso

de

Ac

tion

sc

ript 3

.0

Propriedades Descrição

text Uma string que é o texto atual no campo de texto.

textColor A cor do texto em um campo de texto, em formato hexadecimal.

border Especifica se o campo de texto tem uma borda. Tipo Boleano (true ou false).

borderColor A cor da borda do campo de texto.

background Especifica se o campo de texto tem um preenchimento de plano de fundo. Tipo Boleano (true ou false).

backgroundColor A cor do plano de fundo do campo de texto.

htmlText Contém a representação HTML do conteúdo do campo de texto.

type O tipo do campo de texto.

maxChars O número máximo de caracteres que o campo de texto pode conter, conforme digitado por um usuário.

autoSize Controla o dimensionamento e o alinhamento automáticos de campos de texto.

Constantes Descrição

TextFieldAutoSize.NONE Nenhum redimensionamento ocorrerá (padrão).

TextFieldAutoSize.LEFT O texto será tratado como texto justificado à esquerda ; ou seja, a margem esquerda do campo de texto permanecerá fixa e o redi- mensionamento de uma linha única do campo de texto ocorrerá na margem direita.

TextFieldAutoSize.RIGHT O texto será tratado como texto justificado à direita; ou seja, a mar- gem direita do campo de texto permanecerá fixa e o redimensiona- mento de uma linha única do campo de texto ocorrerá na margem esquerda.

TextFieldAutoSize.CENTER O texto será tratado como texto justificado no centro; ou seja, qual- quer redimensionamento de uma linha única do campo de texto será igualmente distribuído nas margens direita e esquerda.

Métodos Descrição

addChild() É como uma "caixa" que recebe qualquer elemento visual criado com ActionScript (texto, video, mo- vieclip, sprite, imagens, etc). L embra-se de usar o método addChild() pra mostrar o conteúdo criado no stage (palco), do contrário, o objeto será criado e estará na memória do computador mas não será mostrado no Flash Player.

TextFormat Representa informações de formatação de caracteres. Utilize a classe TextFormat para criar formatação de texto específico

para campos de texto. É possível aplicar formatação de texto tanto para campos de texto estáticos quanto para campos de texto dinâmicos.

É necessário utilizar o construtor new TextFormat() para criar um objeto TextFormat antes de definir as suas propriedades.

Exemplo

16

Constantes Descrição

TextFormatAlign.CENTER Centraliza o texto no campo de texto.

TextFormatAlign.JUSTIFY Justifica o texto no campo de texto.

TextFormatAlign.LEFT Alinha o texto à esquerda dentro do campo de texto.

TextFormatAlign.RIGHT Alinha o texto à direita dentro do campo de texto.

Cu

rso

de

Ac

tion

sc

ript 3

.0

var textoSForm:TextField = new TextField();

textoSForm.text = "Curso de Actionscript 3.0 - TextFormat";

textoSForm.autoSize = TextFieldAutoSize.LEFT;

var texto:TextField = new TextField();

texto.text = "\n\n Curso de Actionscript 3.0 - TextFormat";

texto.autoSize = TextFieldAutoSize.LEFT;

var textoForm:TextFormat = new TextFormat();

textoForm.size = 20; //Tamanho do Texto

textoForm.color = 0xFF8800; //Cor do Texto

textoForm.bold = true;

textoForm.indent = 30;

textoForm.italic = true;

texto.setTextFormat(textoForm);

addChild(textoSForm);

addChild(texto);

Propriedades Descrição

align Indica o alinhamento do parágrafo.

bold Especifica se o texto está em negrito (null (padrão) texto sem negrito; true texto em negrito).

bullet Indica que o texto faz parte de uma lista com marcadores.

color Indica a cor do texto.

font O nome da fonte para o texto neste formato de texto, como uma string.

indent Indica o recuo da margem esquerda para o primeiro caractere no parágrafo.

italic Especifica se o texto está em itálico (null (padrão) texto sem itálico; true texto em itálico).

leading Um inteiro que representa a quantidade de espaço vertical (denominado leading) entre linhas.

leftMargin A margem esquerda do parágrafo, em pixels.

letterSpacing Um número que representa a quantidade de espaço uniformemente distribuída entre todos os ca- racteres.

rightMargin A margem direita do parágrafo, em pixels.

size O tamanho do texto em pixels nesse formato de texto.

target Indica a janela de destino na qual o hiperlink é exibido.

underline Indica se o texto que usa esse formato de texto está sublinhado (true) ou não (false).

url Indica o URL de destino do texto neste formato de texto.

Métodos Descrição

setTextFormat() Aplica a formatação de texto determinada pelo parâmetro format ao texto especificado em um cam- po de texto.

TextEvent Um objeto envia um objeto TextEvent quando um usuário digita um texto em um campo de texto ou clica em um hyperlink

em um campo de texto ativado para HTML. Existem dois tipos de evento de texto: TextEvent.LINK e TextEvent.TEXT_INPUT.

Constantes Descrição

TextEvent.LINK Define o valor da propriedade de tipo de um objeto de evento de link.

TextEvent.TEXT_INPUT Define o valor da propriedade de tipo de um objeto de evento textInput.

Aula 7 - Trabalhando com Arquivos Carregando Imagens

No AS3 devemos utilizar basicamente duas classes pra funcionar: Classe Loader e URLRequest(). Quandro utilizamos a classe URLRequest() para carregamento de uma imagem ela pode ser de duas formas:

17

Cu

rso

de

Ac

tion

sc

ript 3

.0

- Absoluto: "http://seu_site.com/minha_pasta/arquivo.extensão_imagem"; - Relativo: "minha_pasta/arquivo.extensão_imagem".

var carregaImg:Loader = new Loader();

Exemplo

var caminhoImg:URLRequest = new URLRequest("caveiraas3.png");

carregaImg.load(caminhoImg);

addChild(carregaImg);

Observação: As classes MovieClipLoader e LoadVars do ActionScript 2.0 não são usadas no ActionScript 3.0. As classes Loader e URLLo- ader as substituem.

Caso queira adicionar uma imagem dentro de um MovieClip específico.

1 - Converta uma imagem em símbolo do tipo MovieClip "Modify > Convert to Symbol…" (F8); 2 - Visualize na Biblioteca(Library, atalho F11 ou Ctrl + L) e insira o novo MovieClip no stage(palco); 3 - Em seguida coloque um nome de Instância para este MovieClip no inspetor de "Propriedades"(Properties "Ctl+F3"); 4 - Ainda utilizando o exmplo anterior faça as modificações e teste.

Modificação do Exemplo Anterior

mClip.addChild(carregaImg); //Substitui addChild(carregaImg);

Removendo uma Imagem e Interatividade com o Mouse

Para Remover uma imagem externa, basta no lugar do "addChild()" digitar o método "removeChild()". A situação é carregar a imagem no palco, e somente quando cilcar sobre a imagem carregada ela irá sumir. Para isso precisamos fazer uma função que tenha este método removeChild() e só chamá-lo quando necessário. Nessa hora

que usamos os Eventos de classes pra controlar o conteúdo. No nosso caso vamos usar evento de mouse MouseEvent.

Acrescente ao Exemplo Anterior

carregaImg.addEventListener(MouseEvent.CLICK, someImg);

function someImg(meuEvento:MouseEvent){

mClip.removeChild(carregaImg);

}

Observação: Lembra-se a imagem externa neste caso está adicionada dentro de um MovieClip. Então temos que remover a imagem que está dentro do MovieClp.

Métodos Descrição

Loader() Cria um objeto Loader que pode ser usado para carregar arquivos, como SWF, JPEG, GIF ou PNG.

removeChild() O método removeChild() é usado para remover o conteúdo criado no stage (palco).

Carregando Textos

Carregando Arquivos Externos A interação AS3 com outras ferramentas é muito grande. Vejamos algumas interações

XML

A classe XML contém métodos e propriedades para trabalhar com objetos XML. Iremos criar uma interação AS3 com XML. Para nossa interação devemos criar um Movie clip e 4 campos de Dynamic Text, onde será exibido nossos dados.

carregandoXML.fla

18

Cu

rso

de

Ac

tion

sc

ript 3

.0

var xml:XML;

var lista:XMLList;

var loadImg:Loader = new Loader();

//Carregando o XML

var loadXML:URLLoader = new URLLoader();

loadXML.addEventListener(Event.COMPLETE, Listar);

loadXML.load(new URLRequest("XML.xml"));

//Mostra o texto no palco

function Listar(e:Event):void{

xml = new XML(e.target.data);

lista = xml.conteudo;

txtNome.text = lista[0].nome;

txtIdade.text = lista[0].idade;

txtNasc.text = lista[0].nasc;

txtProf.text = lista[0].prof;

//Carregando a Imagem

loadImg.load(new URLRequest(lista[0].imagem));

carregaImg.addChild(loadImg);

}

<?xml version="1.0" encoding="ISO-8859-1"?>

<inicio>

<conteudo>

<imagem>img.jpg</imagem>

<nome>Son Goku</nome>

<idade>52 anos</idade>

<nasc>Planeta Vegeta</nasc>

<prof>Lutador</prof>

</conteudo>

</inicio>

XML.xml

Métodos Descrição

XML() Cria um novo objeto XML.

XMLList() Cria um novo objeto XMLList. Contém métodos para trabalhar com um ou mais elementos XML.

load() Envia e carrega dados da URL especificada.

Classes Descrição

URLLoader Baixa dados de uma URL como texto, dados binários ou variáveis codificadas em URL. Ela é útil para o download de arquivos de texto, XML ou outras informações a serem usadas em um aplicativo dinâ- mico com base em dados.

Constantes Descrição

Event.COMPLETE Define o valor da propriedade type de um objeto de evento complete.

Aula 8 - Data e Hora Introdução

Datas e horas são informações comuns usadas nos programas ActionScript. Por exemplo, você talvez precise saber o dia da semana atual ou medir o tempo que o usuário gasta em uma tela específica, entre muitas outras possibilidades. No ActionS- cript, você pode usar a classe Date para representar um único ponto temporal, incluindo informações de data e hora. Em uma ocorrência de Date estão incluídos valores de unidades individuais de data e hora, como ano, mês, data, dia da semana, hora, minutos, segundos, milissegundos e fuso horário. Para usos mais avançados, o ActionScript também inclui a classe Timer, que pode ser usada para realizar ações após um determinado atraso ou em intervalos repetidos.

Tarefas comuns • Trabalho com os objetos de Date • Obtenção da data e hora atuais • Acesso a unidades individuais de data e hora (dias, anos, horas, minutos e assim por diante) • Cálculos aritméticos com datas e horas • Conversão entre fusos horários • Realização de ações repetitivas • Realização de ações após um intervalo de tempo definido

Criando Relógio Digital

19

Cu

rso

de

Ac

tion

sc

ript 3

.0

Criando Relógio Analógico

Aula 9 - Formulário

Vamos ver uma das maneiras de criar um formulário de e-mail utilizando AS3 em conjunto com um script PHP. Pra fazer os testes, você precisa de um servidor para hospedar seu arquivo PHP. O seu servidor deve ter suporte pra função

mail() do PHP.