Criando aplicações em flash para web

468 visualizações

Publicada em

Slide auxiliar no curso básico de Flash realizado na UFJF pelo aluno João Paulo Radd

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
468
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
25
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Criando aplicações em flash para web

  1. 1. Criando aplicações em Flash para WEB João Paulo Radd Departamento de Ciência da Computação III GETMeeting - 2013
  2. 2. Breve Apresentação • Aluno de Ciência da Computação (4º Período) • Formado no curso profissionalizante de Web Designer pela Prepara Cursos • Monitor de Criação de Documentos Web, UNI113 do PUI (Projeto de Universalização da Informática) III GETMeeting - 2013 2
  3. 3. Objetivos • Conhecer o Flash • Diferenciar as Páginas Estáticas das Páginas Dinâmicas • Saber como está o Flash hoje • Conhecer o Flash CS5 • Utilizar alguns recursos do Flash • Criar Banners • Criar um site III GETMeeting - 2013 3
  4. 4. Sobre o Flash Criado pela Macromedia em 1996 Hoje pertence à Adobe, na versão Adobe Flash CS6 (v.12.0.2.529 – 24/04/12) ActionScript 3.0 Utilizado na construção de banners de propaganda, vídeos (YouTube), animações, jogos (facebook), sites... Enfim, para criação de páginas DINÂMICAS! III GETMeeting - 2013 4
  5. 5. Páginas Estáticas • • • • Páginas contendo basicamente HTML Recursos q não vão além dos links Não possuem o foco no usuário Todo processamento é concentrado no servidor e o cliente fazia apenas requisições de páginas na Internet • Pouco objetivas e sem facilidade ao acesso dar informações III GETMeeting - 2013 5
  6. 6. Páginas Dinâmicas / Internet Rica • Internet Rica / Rich Internet Application (RIA) • Focada no usuário com funcionalidades voltadas a facilitar a navegação do mesmo • Tenta adivinhar o que o usuário quer • Aplicações inteligentes, bonitas e buscando a satisfação do usuário III GETMeeting - 2013 6
  7. 7. Páginas dinâmicas  Páginas com alto teor de interação com o usuário através do uso de aplicações ricas onde as informações e funcionalidades da página não são estáticas.  Páginas dinâmicas são obtidas através de diversos recursos e linguagens. Exemplos: III GETMeeting - 2013 7
  8. 8. Mais exemplos III GETMeeting - 2013 8
  9. 9. HTML5 vs Flash  Flash vai acabar?  Qual o melhor? III GETMeeting - 2013 9
  10. 10. HTML5 vs Flash Flash Player-> estatísticas de uso de acordo com a Adobe/wikipedia.en(2010):  85% dos sites mais visitados da web usam Flash,  75% dos vídeos na web são vistos através do Flash Player,  98% das empresas contam com o Flash Player, e  70% dos jogos da web são feitos em Flash. III GETMeeting - 2013 10
  11. 11. HTML5 vs Flash Algumas semanas atrás: III GETMeeting - 2013 11
  12. 12. HTML5 vs Flash • Conclusão: Vida longa ao FLASH! III GETMeeting - 2013 12
  13. 13. Adobe Flash CS5 Infelizmente, nossa versão a ser utilizada é portable, pelo fato do original ser pago. Ou seja: • Os atalhos para páginas web não funcionam • Nessa versão portable, possui limitações em alguns recursos • Se acharem um portable melhor e sem vírus me mandem III GETMeeting - 2013 13
  14. 14. Adobe Flash CS5 III GETMeeting - 2013 14
  15. 15. Área de trabalho do Flash  Barra dos menus  Workspace Control: Opção Finalidade Animator Para visualizar as ferramentas de animação Classic Para visualizar as ferramentas clássicas. Essas ferramentas eram exibidas como padrão em versões anteriores Debug Selecionando esta opção é possível visualizar as ferramentas para encontrar erros/bugs na programação Developer Para a visualização das ferramentas de programação Essentials Visualização padrão a partir do CS4. Ferramentas essenciais New Workspace Cria-se a própria visualização. III GETMeeting - 2013 15
  16. 16. Área de trabalho do Flash • • • • Campo de ajuda Cs live services Scene –(cena/palco) Propriedades - Dimensão - Fundo - Frames por segundo (fps) - Unidade de medida • Linha do tempo III GETMeeting - 2013 16
  17. 17. III GETMeeting - 2013 17
  18. 18. Observações Interpolações:  Classic tween: Cria o movimento com uma posição inicial e final.  Motion tween: Cria uma trajetória com vários pontos definindo cada posição do frame.  Shape tween: Com uma imagem inicial e final, ele cria a interpolação da mudança da forma ao longo dos quadros. III GETMeeting - 2013 18
  19. 19. Observações • Recursos do timeline III GETMeeting - 2013 19
  20. 20. Observações • Aplicando o Banner ou site numa página: Utilizando o Dreamweaver fica mais fácil: -> Cria-se uma <div></div> ->Nela, importa-se o arquivo flash de extensão .swf III GETMeeting - 2013 20
  21. 21. Observações Transformar algo em botão: • Selecione o texto / imagem; • Pressione F8; • Nomeie e coloque no type como button e tecle “ok”; • Com um duplo clique, abrirá uma edição... III GETMeeting - 2013 21
  22. 22. Button • UP: estado natural do botão • Over: Estado do botão quando o mouse está sobre o mesmo; • Down: como fica durante o clique • Hit: é a área clicável do botão a ser definido; III GETMeeting - 2013 22
  23. 23. Música • • • • Cria-se uma layer para tal; File->Import->Import to Library... Escolha a música e confirme; Confirme com Selection tool se a layer está selecionada; • Vá em Library, selecione o arquivo e arraste para o palco; • Bloqueie a layer e configure o som na aba Properties->Sounds a gosto; III GETMeeting - 2013 23
  24. 24. Criando cenas • Window->Other Panels->Scene (ou Shift+F2) • Você verá aí uma ou mais cenas, se é a primeira vez, nomeie. • Clique no “Duplicate Scene” que se encontra na parte inferior. Será do mesmo nome q o anterior com um “copy” no final. Serão cenas idênticas. • Se quer criar uma nova cena do zero, clique no “Add scene” e renomeie. • Obs.: Não esqueça de criar uma layer no final de cada cena com o comando stop() III GETMeeting - 2013 24
  25. 25. Stop() • Crie uma layer no topo; Para Scenes: • Tecle F9; • Ative o Script Assist; • No menu lateral, clique no Timeline Control, depois no stop (criará um stop();) e feche. Para animações de objetos: • Clique no último frame e tecle F6 • Depois faça o mesmo processo para Scenes. III GETMeeting - 2013 25
  26. 26. Importando Vídeo • Ctrl + R; • Selecione o vídeo; • Dentro do “On your computer”, selecione a 1ª opção e tecle next; • Skinning: selecione as opções de menu para seu vídeo e tecle next; • Aparecerá um resumo do que foi feito, tecle Finish. III GETMeeting - 2013 26
  27. 27. “Linkando” Cenas Nos botões criados para novas partes são ligados assim: • Selecione o botão e tecle F9; • Ligue o Script Assist; • Movie Clip Control->on; • No assistente marque release; • Timeline Control->goto; • Em scene, marque a cena a ser executada ao clicar e em frame, “1”. • Caso não queira q a música prossiga: III GETMeeting - 2013 27
  28. 28. “Linkando” Cenas • Caso não queira q a música prossiga: Timeline Control->stopAllSonds; • O código fica mais ou menos assim: on(release){ gotoAndPlay(“CenaX”, 1); stopAllSonds(); } • Feche e faça o mesmo nas outras cenas e botões; III GETMeeting - 2013 28
  29. 29. “Linkando” para outras páginas • Quase os mesmos passos, mas o código fica mais ou menos assim: on(release){ getURL("www.page.com"); stopAllSonds(); } • Feche e faça o mesmo nas outras cenas e botões; III GETMeeting - 2013 29
  30. 30. Publicando Para a criação de um site é preferível importar o flash para dentro do HTML e trabalha-lo lá. No entanto, pode se fazer: • File->Publish Settings... • Ative os formatos Flash e HTML e tecle ok; Não esqueça ao transferir os arquivos, para o servidor, que é necessário os arquivos: • .swf / .html / e os vídeo(se tiver e na mesma pasta q o arquivo swf) III GETMeeting - 2013 30
  31. 31. Duvidas? Contato jpradd@ice.ufjf.b III GETMeeting - 2013 31
  32. 32. OBRIGADO!

×