O documento apresenta uma palestra sobre criação de aplicações em Flash para a web. Resume os principais tópicos sobre o Flash, diferencia páginas estáticas e dinâmicas, apresenta recursos e ferramentas do Flash CS5 e fornece exemplos de como criar banners, importar vídeos, criar cenas e linkar elementos entre páginas.
Slides Lição 6, CPAD, As Nossas Armas Espirituais, 2Tr24.pptx
Criando aplicações em flash para web
1. Criando aplicações em Flash para WEB
João Paulo Radd
Departamento de
Ciência da Computação
III GETMeeting - 2013
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. 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. 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. 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. 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. 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
9. HTML5 vs Flash
Flash vai acabar?
Qual o melhor?
III GETMeeting - 2013
9
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
12. HTML5 vs Flash
• Conclusão:
Vida longa ao FLASH!
III GETMeeting - 2013
12
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
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. Á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
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
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. 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. 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. 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. 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. 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. 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. “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. “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. “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. 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