criando aplicações em flash para web

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!