programaÇÃo para internet ica - caetano.eng.br animação em actionscript 3 •quanto mais quadros...
TRANSCRIPT
![Page 1: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/1.jpg)
PROGRAMAÇÃO PARA INTERNET RICA
Prof. Dr. Daniel Caetano
2013 - 1
FUNÇÕES E EVENTOS EM ACTIONSCRIPT 3
![Page 2: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/2.jpg)
Objetivos
• Entender funções em Flash
• Compreender os eventos de interação
• Compreender a contagem de tempo de quados
• Capacitar para criar animações interativas simples usando AS3 e o Flash CS4
• Trabalho B!
![Page 3: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/3.jpg)
Material de Estudo
Material Acesso ao Material
Tutorial Extra http://www.caetano.eng.br/ Adobe Flash CS4
Apresentação http://www.caetano.eng.br/ (Aula 13)
Internet http://slekx.com/as3-intro/ Free AS3 Tutorial
Google ActionScript 3 AS3
![Page 4: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/4.jpg)
FUNÇÕES EM ACTIONSCRIPT 3
![Page 5: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/5.jpg)
Funções em ActionScript 3 • As funções são parecidas com C
• Experimente!
![Page 6: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/6.jpg)
Funções em ActionScript 3 • As funções são parecidas com JavaScript
• Experimente!
O tipo de retorno vem depois do
nome da função
![Page 7: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/7.jpg)
Funções em ActionScript 3 • Função com parâmetros são mais úteis:
• Experimente!
![Page 8: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/8.jpg)
Funções em ActionScript 3 • Misturando tudo...
• Experimente!
![Page 9: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/9.jpg)
EXERCITANDO O ACTIONSCRIPT 3
![Page 10: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/10.jpg)
Introdução
• Vamos iniciar retomando a aula passada...
![Page 11: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/11.jpg)
Introdução
• Adicionando texto no botão...
![Page 12: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/12.jpg)
Introdução
• Deixando o texto em negrito e... branco
![Page 13: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/13.jpg)
Introdução • Vamos centralizar o texto...
![Page 14: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/14.jpg)
Introdução • E, algo novo... Configurar o cenário...
![Page 15: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/15.jpg)
EVENTOS EM ACTIONSCRIPT 3
![Page 16: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/16.jpg)
Introdução
• Interação JavaScript é baseada em eventos...
– onclick, onmouseover, onmouseout...
• ActionScript também depende de eventos
– Interação com o mouse
– Interação com o teclado
– Controle de tempo...
![Page 17: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/17.jpg)
Eventos: Clique (Mouse) • Criando função que será executada no clique
![Page 18: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/18.jpg)
Eventos: Clique (Mouse) • Associando função ao clique:
![Page 19: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/19.jpg)
Eventos: Clique (Mouse) • E para associar o clique ao botão?
![Page 20: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/20.jpg)
Eventos: Clique (Mouse) • Em que lugar foi o clique?
![Page 21: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/21.jpg)
Eventos: Clique (Mouse) • Alterando transparência do Sprite...
![Page 22: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/22.jpg)
Eventos: Clique (Mouse) • Aumentando o Sprite...
![Page 23: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/23.jpg)
Eventos: Clique (Mouse) • Movendo o Sprite...
![Page 24: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/24.jpg)
ATIVIDADE
![Page 25: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/25.jpg)
Atividade
• Limpe o conteúdo da função clique!
• Altere o função para que girar o botão 10o a cada clique.
• O que acontece?
![Page 26: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/26.jpg)
Atividade
• Altere o programa para mover o sprite para uma posição aleatória, dentro do cenário, quando for clicado.
• Dica: o tamanho máximo do cenário: stage.stageWidth e stage.stageHeight
• Dica: Math.random() sempre retorna um valor entre 0 e 1.
• Dica: stage.stageWidth*Math.random() = ???
![Page 27: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/27.jpg)
ANIMAÇÃO
![Page 28: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/28.jpg)
Animação em ActionScript 3 • O que é uma animação?
• Uma animação é uma sucessão de imagens estáticas, chamadas quadros (ou frames)
![Page 29: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/29.jpg)
Animação em ActionScript 3 • Exemplo....
![Page 30: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/30.jpg)
Animação em ActionScript 3 • Exemplo....
![Page 31: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/31.jpg)
Animação em ActionScript 3 • Exemplo....
![Page 32: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/32.jpg)
Animação em ActionScript 3 • Exemplo....
![Page 33: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/33.jpg)
Animação em ActionScript 3 • Quanto mais quadros de animação por
segundo, mais suave é a animação
• Uma animação de 10 segundos precisa de quantos quadros?
• Depende da taxa de quadros por segundo...
– frame rate
– Medida em fps (frames por segundo)
– Quanto maior o fps, mais suave a animação
![Page 34: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/34.jpg)
Animação em ActionScript 3 • Se a animação tiver 10 fps, terá quantos
frames em 10 segundos?
10s * 10fps = 100 frames
• Se a animação tiver 24 fps, terá quantos frames em 10 segundos?
10s * 24fps = 240 frames
• O que acontece se configurar 24fps e usar apenas 100 frames? – Animação acaba em menos de 10 segundos!
![Page 35: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/35.jpg)
Animação em ActionScript 3 • Exemplo
24 fps x 48 fps
![Page 36: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/36.jpg)
Animação em ActionScript 3 • Como configurar a taxa de frames?
![Page 37: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/37.jpg)
Animação em ActionScript 3 • Como configurar a taxa de frames?
Como Animar o Corpo?
![Page 38: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/38.jpg)
EVENTO DE ANIMAÇÃO EM ACTIONSCRIPT 3
![Page 39: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/39.jpg)
Evento de Animação ActionScript 3 • Momento de um novo quadro?
– Evento: ENTER_FRAME
![Page 40: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/40.jpg)
Evento de Animação ActionScript 3 • Vamos mover o corpo a cada quadro...
![Page 41: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/41.jpg)
ATIVIDADE
![Page 42: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/42.jpg)
Atividade
• Modifique a animação desenvolvida para que o corpo comece a girar 5 graus por quadro. Ele deve continuar se deslocando lateralmente, como estava antes.
![Page 43: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/43.jpg)
Atividade
• Corrija o programa para que o quadrado gire em torno de seu centro!
![Page 44: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/44.jpg)
Atividade
• Modifique o programa para que o corpo só comece a rodar quando ele for clicado
![Page 45: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/45.jpg)
Atividade
• Modifique o programa para que o corpo só comece a rodar quando ele for clicado e...
• A cada clique subsequente, inverta o giro
![Page 46: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/46.jpg)
DISCUSSÃO: VÍDEO X JOGOS
![Page 47: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/47.jpg)
Vídeo x Jogos
• Vídeo e jogos são iguais?
• 24 fps é suficiente para um jogo?
• Jogo envolve simulação física – Processamento quadro a quadro.
– Se a bala se move 10m/s...
– Bala pula personagem!
• Em simulações...
– 24 fps não são suficientes!
– Para jogos também não!
![Page 48: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/48.jpg)
USANDO UM POUCO DA INTERFACE DO FLASH
![Page 49: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/49.jpg)
Usando um Pouco o Flash • É claro que podemos colocar um fundo
criado como um sprite...
• Mas que tal usarmos algumas vantagens do Flash CS4?
![Page 50: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/50.jpg)
Usando um Pouco o Flash • Para adicionar uma imagem de fundo, clique
em File > Import > Import to Library...
![Page 51: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/51.jpg)
Usando um Pouco o Flash • Escolha uma imagem...
![Page 52: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/52.jpg)
Usando um Pouco o Flash • Observe que ela aparecerá na Library
– Olhe no canto inferior esquerdo!
![Page 53: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/53.jpg)
Usando um Pouco o Flash • Arraste a imagem para o “stage” e use a
ferramenta FreeTransform para redimensioná-la para o tamanho correto.
![Page 54: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/54.jpg)
Usando um Pouco o Flash • Execute... O que houve?
• Ajuste para não redimensionar o “stage”
![Page 55: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/55.jpg)
Usando um Pouco o Flash • Que tal usar uma imagem como sprite?
• Importe a imagem para a Library...
• E abra as propriedades...
![Page 56: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/56.jpg)
Usando um Pouco o Flash • Clique no botão “Advanced”
![Page 57: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/57.jpg)
Usando um Pouco o Flash • Ajuste para exportar para o ActionScript...
• E indique o nome da classe: Imagem
![Page 58: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/58.jpg)
Usando um Pouco o Flash • Vamos usar essa nova classe no código!
![Page 59: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/59.jpg)
ATIVIDADE
![Page 60: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/60.jpg)
Atividade
• Modifique o programa para que:
– Transparência do sprite varie de 1.0 a 0.0
– De 0.05 em 0.05...
• Extras:
– Quando chegar em 0.0, aumente até 1.0...
– Quando chegar em 1.0, diminua até 0.0...
![Page 61: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/61.jpg)
EXTRA: EVENTOS DE TECLADO
![Page 62: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/62.jpg)
Eventos de Teclado em AS3 • Experimente isso...
![Page 63: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/63.jpg)
CONCLUSÕES
![Page 64: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/64.jpg)
Resumo • ActionScript 3: ótimo para animações
• Controle de interação e tempo: eventos
• Criando funções de maneira inteligente...
– Simples fazer um aplicativo/jogo completo
• ActionScript 3: pode ser integrado ao Flash
– Elementos criados pela interface do Flash
• TAREFA
– Trabalho B!
![Page 65: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/65.jpg)
PERGUNTAS?
![Page 66: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/66.jpg)
Próxima Aula
• AS3 é bom para animações...
–Mas e se tiver de fazer um aplicativo/página mais tradicional?
–Que tal um pouco de ASP.Net?
![Page 67: PROGRAMAÇÃO PARA INTERNET ICA - caetano.eng.br Animação em ActionScript 3 •Quanto mais quadros de animação por ... •Vídeo e jogos são iguais? ... •Mas que tal usarmos](https://reader031.vdocuments.mx/reader031/viewer/2022022106/5be349b009d3f24a208ce7d9/html5/thumbnails/67.jpg)
BOM DESCANSO A TODOS!