criando aplicações em flash para web
Post on 02-Jul-2015
193 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Duvidas?
jpradd@ice.ufjf.b
Contato
III GETMeeting - 2013 31
OBRIGADO!
top related