Upload
joao-paulo-radd
View
190
Download
1
Embed Size (px)
DESCRIPTION
Slide auxiliar no curso básico de Flash realizado na UFJF pelo aluno João Paulo Radd
Citation preview
Departamento de Ciência da Computação
João Paulo Radd
Criando aplicações em Flash para WEB
III GETMeeting - 2013
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
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
Sobre o FlashCriado pela Macromedia em 1996Hoje pertence à Adobe, na versão Adobe
Flash CS6 (v.12.0.2.529 – 24/04/12)ActionScript 3.0Utilizado 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
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
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
Páginas dinâmicasPá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
Mais exemplos
III GETMeeting - 2013 8
HTML5 vs Flash
Flash vai acabar?Qual o melhor?
III GETMeeting - 2013 9
HTML5 vs FlashFlash 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, e70% dos jogos da web são feitos em Flash.
III GETMeeting - 2013 10
HTML5 vs FlashAlgumas 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 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
Adobe Flash CS5
III GETMeeting - 2013 14
Área de trabalho do FlashBarra dos menusWorkspace 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
Á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 tempoIII GETMeeting - 2013 16
III GETMeeting - 2013 17
ObservaçõesInterpolaçõ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
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>->Nela, importa-se o arquivo flash de extensão .swf
III GETMeeting - 2013 20
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
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
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
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
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
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
“Linkando” CenasNos 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
“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
“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
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
OBRIGADO!