Criando aplicações em Flash para WEB
João Paulo Radd

Departamento de
Ciência da Computação

III GETMeeting - 2013
Breve Apresentação
• Aluno de Ciência da Computação (4º
Período)
• Formado no curso profissionalizante de
Web Designer pel...
Objetivos
• Conhecer o Flash
• Diferenciar as Páginas Estáticas das
Páginas Dinâmicas
• Saber como está o Flash hoje
• Con...
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)
...
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ár...
Páginas Dinâmicas / Internet Rica
• Internet Rica / Rich Internet Application (RIA)
• Focada no usuário com funcionalidade...
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çõe...
Mais exemplos

III GETMeeting - 2013

8
HTML5 vs Flash
 Flash vai acabar?
 Qual o melhor?

III GETMeeting - 2013

9
HTML5 vs Flash
Flash Player-> estatísticas de uso de acordo com a
Adobe/wikipedia.en(2010):
 85% dos sites mais visitados...
HTML5 vs Flash
Algumas semanas atrás:

III GETMeeting - 2013

11
HTML5 vs Flash
• Conclusão:

Vida longa ao FLASH!

III GETMeeting - 2013

12
Adobe Flash CS5
Infelizmente, nossa versão a ser utilizada é
portable, pelo fato do original ser pago.
Ou seja:
• Os atalh...
Adobe Flash CS5

III GETMeeting - 2013

14
Área de trabalho do Flash
 Barra dos menus
 Workspace Control:
Opção

Finalidade

Animator

Para visualizar as ferrament...
Área de trabalho do Flash
•
•
•
•

Campo de ajuda
Cs live services
Scene –(cena/palco)
Propriedades
- Dimensão
- Fundo
- F...
III GETMeeting - 2013

17
Observações
Interpolações:
 Classic tween: Cria o movimento com
uma posição inicial e final.
 Motion tween: Cria uma tra...
Observações
• Recursos do timeline

III GETMeeting - 2013

19
Observações
• Aplicando o Banner ou site numa página:
Utilizando o Dreamweaver fica mais fácil:
-> Cria-se uma <div></div>...
Observações
Transformar algo em botão:
• Selecione o texto / imagem;
• Pressione F8;
• Nomeie e coloque no type como butto...
Button
• UP: estado natural do botão
• Over: Estado do botão quando o mouse está sobre o
mesmo;
• Down: como fica durante ...
Música
•
•
•
•

Cria-se uma layer para tal;
File->Import->Import to Library...
Escolha a música e confirme;
Confirme com S...
Criando cenas
• Window->Other Panels->Scene (ou Shift+F2)
• Você verá aí uma ou mais cenas, se é a primeira
vez, nomeie.
•...
Stop()
• Crie uma layer no topo;
Para Scenes:
• Tecle F9;
• Ative o Script Assist;
• No menu lateral, clique no Timeline C...
Importando Vídeo
• Ctrl + R;
• Selecione o vídeo;
• Dentro do “On your computer”, selecione
a 1ª opção e tecle next;
• Ski...
“Linkando” Cenas
Nos botões criados para novas partes são ligados
assim:
• Selecione o botão e tecle F9;
• Ligue o Script ...
“Linkando” Cenas
• Caso não queira q a música prossiga:
Timeline Control->stopAllSonds;
• O código fica mais ou menos assi...
“Linkando” para outras páginas
• Quase os mesmos passos, mas o código
fica mais ou menos assim:
on(release){
getURL("www.p...
Publicando
Para a criação de um site é preferível importar o flash
para dentro do HTML e trabalha-lo lá. No entanto,
pode ...
Duvidas?

Contato
jpradd@ice.ufjf.b
III GETMeeting - 2013

31
OBRIGADO!
Próximos SlideShares
Carregando em…5
×

Criando aplicações em flash para web

452 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
452
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
24
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!

×