Introduo a ActionScript 3.

0
Profa. Flvia Pereira de Carvalho

Fontes: Adobe Flash CS4 Design para Web Processor Alfamdia Classroom in a Book Guia de Treinamento Oficial da Adobe Crie, Anime e Publique seu Site - Fireworks, Flash e Dreamweaver William Alves ActionScript 3.0 Guia de Referncia Rpida Stiller, Shupe, deHaan & Richardson Programao do ADOBE ACTIONSCRIPT 3.0 (PDF 758pg-10.1MB)
http://www.flexbrasil.com.br/viewtopic.php?f=35&t=980&start=0&sid=55de7d405e35dc4257e3b07832d3d48f

Atividade Prtica
http://www.youtube.com/watch?v=B-GVkJJof3o

Tarefa 16: Botes para Controlar Animao

Criar mais 2 camadas e renome-las Camada1 = botoes Camada2 = animacoes Camada3 = acoes Selecionar a camada botoes: desenhar 3 botes Textos dos botes: Iniciar, Parar, Voltar Formatar cores, bordas, fonte

Atividade Prtica
http://www.youtube.com/watch?v=B-GVkJJof3o

Tarefa 16: Botes para Controlar Animao

Selecionar o boto Iniciar (todo boto: forma e texto)

Converter em smbolo:

Nome = btn_iniciar Tipo = button Fazer nos demais botes: Parar: nome = btn_parar Voltar: nome = btn_voltar

Atividade Prtica

Tarefa 16: Botes para Controlar Animao

Selecionar o boto Iniciar Painel Propriedades > Instance Name

Nomear as instncias dos 3 botes Inst_btn_iniciar, inst_btn_parar, inst_btn_voltar Ctrl + Enter (s pra ver que j so botes)

O nome da instncia o que ser usado na linguagem ActionScript na hora de se referir ao boto.

Atividade Prtica

Tarefa 16: Botes para Controlar Animao

Dois cliques no boto Iniciar (ver slide 8)

Over > F6 > Mudar cor do boto ou do texto ou da borda 2 cliques fora do boto Fazer os mesmos passos com os outros 2 botes Ctrl + Enter

Atividade Prtica

Tarefa 16: Botes para Controlar Animao

F6 no frame 30 na camada botoes: bloquear a camada Frame 1 da camada animacoes: desenhar uma figura F6 no frame 30 e mover a figura (na camada animacoes) Create Classic Tween na camada animacoes Mudar trajetria da figura Clicar no frame desejado e mudar a figura de lugar
6

Atividade Prtica
http://www.youtube.com/watch?v=ZD-ZF-5agRw http://www.youtube.com/watch?v=VyHYYQXwPYo

Tarefa 16: Botes para Controlar Animao

Selecionar a camada acoes (bloquear as outras camadas) Window > Actions (F9) Clicar no frame 1 da camada acoes Digitar as aes dos botes: ActionScript Aplicar som ao boto (dentro do modo edio do boto): Window > Common Libraries > Sounds Clicar com o boto direito = play: para ouvir o som Arrastar o som escolhido para cima do boto (Ctrl+Enter)

Botes

Up: boto em seu estado normal, sem a proximidade do mouse Over: estgio em que o usurio passa o mouse sobre o boto Down: instante em que o usurio est clicando no boto Hit: rea clicvel do boto, que no visualizada pelo usurio

Voltar ao slide 5

ActionScript 3.0

uma linguagem de programao orientada a objetos (OO) baseada em ECMAScript, utilizada principalmente para construo de aplicaes Internet. executada em uma mquina virtual (AVM - ActionScript Virtual Machine), atualmente na verso 3 que est disponvel no Adobe Flash Player (plug-in encontrado em navegadores web) e tambm no ambiente Adobe AIR (Adobe Integrated Runtime). Adobe AIR uma tecnologia que permite a criao de aplicaes a partir de tecnologias de desenvolvimento de pginas web, como HTML, Ajax ou Flash.
9

ActionScript 3.0

Lanado em Junho de 2006, em conjunto com o ambiente de desenvolvimento Adobe Flex 2.0 e o Flash Player 9. ECMAScript uma linguagem de programao baseada em scripts, padronizada pela Ecma International na especificao ECMA-262 (European Computer Manufacturers Association). A linguagem bastante usada em tecnologias para Internet, sendo esta base para a criao do JavaScript/JScript e tambm do ActionScript.
10

ActionScript 3.0

obrigatria a declarao de variveis, funes e seus valores retornados, at mesmo quando a funo no retorna valor algum. Exemplo de cdigo em AS 3:

11

ActionScript 3.0

Os programadores JavaScript no tero grandes dificuldades para se adaptar programao ActionScript. So grandes as semelhanas entre elas devido ao uso do padro ECMAScript (Ecma-262). Em ActionScript, recomendvel separar cada linha do cdigo por um ponto-e-vrgula (;). No obrigatrio, mas no entanto extremamente recomendvel para separar comandos. Alm do mais, diferentemente da verso 2.0, o ActionScript 3.0 no permite tipagem fraca: todas os tipos de variveis devem ser declaradas (tipagem forte). Exemplo:

12

ActionScript 3.0

Toda funo deve ter um valor com que ir retornar, mesmo que seja um valor vazio (void). Por exemplo:

13

ActionScript 3.0

Todos os comandos de uma funo, clusula condicional, loops, classes e pacotes devem estar inseridos dentro de chaves ({ }). A identao no obrigatria, mas extremamente recomendvel, assim como na maioria das linguagens. Variveis e funes no devem ter nomes que iniciam com nmeros, nem com os caracteres "_" ou "$".

14

ActionScript 3.0

Os comentrios so teis tanto para inserir lembretes e informaes sobre o cdigo como para tirar linhas de cdigo que numa compilao no sejam executadas (til para testes). H duas maneiras de comentar em ActionScript:

15

ActionScript 3.0

Alm do conhecido Adobe Flash, h outras IDEs (Ambiente de Desenvolvimento Integrado) que permitem a programao de ActionScript. A maioria deles so gratuitas. Dentre as mais conhecidas podemos citar:
Flex Builder: feita para os programadores tradicionais interessados em desenvolver para a Plataforma Flash. No apenas um editor de script, pois inclui vrios componentes de interface de usurio (UI) e classes indisponveis para Flash (mas disponveis no Flex SDK). Feita para a criao de RIAs (Rich Internet Applications). FlashDevelop: IDE gratuita, com vrios recursos que agilizam a criao, e cdigo aberto para Windows, construda sobre Microsoft .NET Framework. Para criao de AS em verso 2 e 3, tambm possvel criar HTML, CSS e outras. Com auto-complete e outros recursos. SE|PY: editor gratuito para Windows e Mac, desenvolvido em Python por Alessandro Crugnola, originalmente para AS 2.0, mas tambm permite edio de AS 3.0 e JavaScript. PrimalScript: criada pela SAPIEN Technologies, suporta mais de 40 linguagens para criao, incluindo HTML/CSS, JavaScript, Java, C#, Flash e Flex, Python, Ruby, Perl, entre muitas outras. Funciona por um perodo de teste de 45 dias. Notepad++: mais limitado para uso de AS, um editor de texto mais avanado que o Bloco de Notas do Windows, por exemplo. Permite colorao de sintaxe AS e de outras linguagens.

16

ActionScript 3.0

Tipos de variveis no ActionScript:

Number: qualquer nmero, incluindo os de ponto flutuante (exemplo: 4.5) int: qualquer nmero inteiro, positivo ou no (452, -32...) uint: nmero inteiro e no negativo (2,487,0...) String: para textos ("ol", "Fulano Beltrano") Boolean: valor booleano (true ou false) Array: Registro de um ou mais valores ([25,"Fulano",54.47]) Object: A estrutura bsica de qualquer valor ActionScript, pode ser usado tambm como alternativa ao tipo Array - ser usado como um dicionrio (meuObj.nome = "Fulano").
17

ActionScript 3.0

Para declarar uma varivel:

No preciso configurar um tipo de codificao (Unicode, ANSI, etc.) em ActionScript: ele trabalha de maneira tranquila com caracteres e acentos como cedilha (), til (~), pois, por padro, utiliza o Unicode, que uma especificao que reconhece caracteres latinos, japoneses, russos, entre outros. Para alterar a codificao, basta ir em: Edit > Preferences > ActionScript (na IDE Adobe Flash)
18

ActionScript 3.0

Constantes

No AS 3.0 foi introduzido o conceito de constantes, que nada mais so do que valores com um valor fixo e imutvel.

Por conveno (e no obrigao) comum declarar constantes com nome em letras maisculas.

19

ActionScript 3.0

A declarao if uma das mais comuns. Tambm podem ser usadas as declaraes else if e else. Exemplo:

20

ActionScript 3.0

Operadores de comparao:

Igualdade: == No-igualdade: != Maior: > Menor: < Maior ou igual: >= Menor ou igual: <= Operador E: && Operador OU: || Operador de negao (false): !
21

Operadores lgicos:

ActionScript 3.0

22

ActionScript 3.0

switch

H a opo switch, que um modo de comparao mais simplificado e leve que o if, porm no pode ser usado para comparaes complexas. Em vez de if, esta condicional utiliza a palavra case para sinalizar uma comparao. E no fim de cada comparao necessrio inserir a palavra reservada break, seno todos os comandos sero lanados at o fim do switch (causando erro de comparao). A palavra default executa uma ao caso nenhuma das comparaes tenha sido bem-sucedida.
23

ActionScript 3.0

24

ActionScript 3.0
for: loop para executar aes de acordo com uma condio.

Na primeira linha do loop criamos uma varivel especificamente para o loop (no caso, i). Logo aps, fazemos uma comparao: se i for menor que 10, iremos executar trace(i.toString()) e tambm incrementaremos o valor de i (i++). O i++ traz o mesmo resultado que i = i+1. Ou seja, ele incrementa 1 a cada iterao. H tambm a possibilidade de subtrair: atravs de i--.
25

ActionScript 3.0

26

ActionScript 3.0
preciso ter cuidado: muito fcil errar com este tipo de loop, porque se voc no fizer nada para tornar a expresso false ele ir repetir a operao infinitamente, o que poder fazer o seu programa travar (caso do exemplo anterior). Para fazer o loop parar, s fazer a expresso tornar-se falsa. Exemplo:

27

ActionScript 3.0
Funes podem conter parmetros ou no. E podem retornar em determinados tipos (String, Number...) ou no (retornando void).

28

ActionScript 3.0
Se voc quer que uma funo retorne um valor em um determinado tipo, esse tipo de dado dever ser discriminado depois do sinal de dois pontos (:). Exemplo:

29

Atividade Prtica
Apostila Adobe: Programao do ActionScript 3.0 Pg. 23

Tarefa 17: Botes para Controlar Animao e Abrir Site

Criar mais 2 camadas e renome-las Camada1 = botoes Camada2 = animacoes Camada3 = acoes Selecionar a camada botoes: desenhar 2 botes Textos dos botes: Animar, Google Formatar cores, bordas, fonte
30

Atividade Prtica
Apostila Adobe: Programao do ActionScript 3.0 Pg. 23

Tarefa 17: Botes para Controlar Animao e Abrir Site

Selecionar o boto Animar (todo boto: forma e texto) Converter em smbolo: Nome = btn_animar Tipo = button

Fazer o mesmo no boto Home: Google: nome = btn_google

31

Atividade Prtica
Apostila Adobe: Programao do ActionScript 3.0 Pg. 23

Tarefa 17: Botes para Controlar Animao e Abrir Site

Selecionar o boto Animar Painel Propriedades > Instance Name

Nomear as instncias dos 2 botes inst_btn_animar, inst_btn_google Ctrl + Enter (s pra ver que j so botes)

O nome da instncia (ocorrncia) o que ser usado na linguagem ActionScript na hora de se referir ao boto. Instncia uma cpia do objeto.

32

Atividade Prtica
Apostila Adobe: Programao do ActionScript 3.0 Pg. 23

Tarefa 17: Botes para Controlar Animao e Abrir Site

Na camada animacoes Fazer as animaes desejadas Clicar no frame 1 da camada acoes = F9 Digitar as aes em ActionScript

33

Atividade Prtica
Apostila Adobe: Programao do ActionScript 3.0 Pg. 31

Tarefa 18: Criar Aplicativo do ActionScript

File > New = ActionScript File

Digite as aes

File > Save = selecione o local e o nome do arquivo

Nome = greeter.as

34

Atividade Prtica
Apostila Adobe: Programao do ActionScript 3.0 Pg. 31

Tarefa 18: Criar Aplicativo do ActionScript

File > New = Flash File (ActionScript 3.0) Ferramenta Texto: faa um campo de texto Ferramenta Free Transform: 300 px X 100 px Ferramenta Texto: tamanho, cor, tipo de letra

Painel Propriedades Instance Name = mainText Dynamic Text

35

Atividade Prtica
Apostila Adobe: Programao do ActionScript 3.0 Pg. 31

Tarefa 18: Criar Aplicativo do ActionScript

No frame 1 = F9

Digitar o cdigo script

Salvar o arquivo = helloworld.fla

Salvar no mesmo local do arquivo greeter.as Ctrl + Enter

36

Atividade Prtica
Apostila Adobe: Programao do ActionScript 3.0 Pg. 31

Tarefa 18: Criar Aplicativo do ActionScript

Abrir o arquivo Greeter.as

Digitar o cdigo script

Abrir o arquivo helloworld.fla

Clicar no frame 1 = F9 Modificar o script Ferramenta Texto Desenhar 2 campos abaixo do mainText existente No primeiro campo = User Name:
37

Atividade Prtica
Apostila Adobe: Programao do ActionScript 3.0 Pg. 31

Tarefa 18: Criar Aplicativo do ActionScript Selecionar o segundo campo: Painel Propriedades

Input Text Instance Name = textIn Behavior = Single Line

Clicar no frame 1 e digitar as aes Salvar e testar

38

Atividade Prtica
http://www.youtube.com/watch?v=RyjPwI89An0&feature=related

Tarefa 19: Menu Animado

Renomear a camada para home

Desenhar um retngulo: ver posio e medidas Selecionar o retngulo: converter em smbolo Movie Clip Nome = home Entrar no modo edio do MovieClip: dois cliques Camada1 = retngulo1 Camada2 = retngulo2 Na camada retangulo2: desenhar um retngulo da mesma altura do outro, mas mais escuro e na mesma posio
39

Atividade Prtica
http://www.youtube.com/watch?v=RyjPwI89An0&feature=related

Tarefa 19: Menu Animado Camada retangulo1 = frame 20 = F6 Camada retangulo2 = frame 10 = F6 e frame 20 = F6 Camada retangulo2 = frame 10

Ferramenta Free Transform: aumentar retngulo escuro Clicar no frame 1: boto direito = copiar frame Clicar no frame 20: boto direito = colar frame Boto direito entre os frames: Create Shape Tween Entre o frame 1 e 10 e tambm entre o 10 e o 20

40

Atividade Prtica

Tarefa 19: Menu Animado Camada retangulo2: clicar no frame 1 = F9

Digitar: stop(); Fazer o mesmo no frame 10

Inserir nova camada = texto

Ferramenta Texto: digitar Home (em cima do retngulo) Frame 20 = F6

41

Atividade Prtica

Tarefa 19: Menu Animado Voltar para cena 1 Selecionar o objeto todo: F9 (digitar o script)
on (rollOver){ gotoAndPlay(2); } on (rollOut){ gotoAndPlay(11); }
42

Atividade Prtica

Tarefa 19: Menu Animado

on (release){ getURL(http://fit.faccat.br) }

43