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.

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

8. Mais exemplos
III GETMeeting - 2013
8

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

11. HTML5 vs Flash
Algumas semanas atrás:
III GETMeeting - 2013
11

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

14. Adobe Flash CS5
III GETMeeting - 2013
14

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

17. III GETMeeting - 2013
17

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. Observações
• Recursos do timeline
III GETMeeting - 2013
19

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

31. Duvidas?
Contato
jpradd@ice.ufjf.b
III GETMeeting - 2013
31

32. OBRIGADO!