APOSTILA DE FLASH

MACROMEDIA FLASH O Macromedia Flash um software para criao de animaes sofisticadas, onde podemos criar as animaes com movimentos, som e interatividade ao mesmo tempo. Com o Flash no temos limitaes a barreira nossa imaginao.

Alm disso, o Flash suporta outros tipos de arquivos como bitmap (JPG, GIF. BMP) e sons (WAV), porm quanto mais contedos de outros formatos forem inseridos no Flash, maior vai ficar o arquivo, dificultando assim a exibio do projeto. I - OBJETIVO DO FLASH O que podemos criar com o Flash? Alm de animaes sofisticadas para serem inseridas em nosso site, tambm podemos criar: banners com propagandas, promoes, divulgaes, etc., botes com interatividade de som e movimento; layout inteiro em flash, ou seja, criar o site em flash, utilizando apenas um html para carregar o site; jogos para Internet. No Flash podemos utilizar comandos HTML e at mesmo JavaScript para auxiliar em projetos mais complexos.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 1

APOSTILA DE FLASH

II - FORMATO DE ARQUIVOS Quando salvamos um arquivo ou projeto no Flash ele gera um arquivo de extenso .FLA, esse formato nos permite editar o projeto no prprio Flash. Mas para o Browser no entende esse formato de arquivo, o formato necessrio para ser exibido na Internet o SWF. Para conseguir transformar nosso projeto FLA em SWF precisamos publicar o projeto. (Esse processo aprenderemos mais adiante.) No basta o arquivo estar em SWF, para que funcione, necessrio ter o plugin do Flash instalado na mquina. O Browsers novos j vem com esse plugin, mas se por acaso no estiver instalado na mquina, podemos fazer um Download do plugin atravs do site da macromedia. O Macromedia Flash, no gera somente arquivos FLA e SWF, ele tambm gera arquivos executveis (EXE), Imagens (GIF, JPG, PNG), entre outros.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 2

APOSTILA DE FLASH

III - AMBIENTE DO FLASH Ao contrrio do Fireworks, o Flash j inicia o projeto com um documento. Mas antes de dar incio ao trabalho preciso configurar o tamanho do projeto.

Barra de Menu Time Line

Painis ou Paletas

Janela do Documento

Barra de Ferramentas

Painel de Propriedades As opes desse painel mudam conforme a ferramenta escolhida.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 3

APOSTILA DE FLASH

EXERCCIO TERICO 1 O que Macromedia Flash? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ ______________________________________________ 2 Quais os objetivos do Flash? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ ______________________________________________ 3 Podemos fazer desenhos com o Flash? Quais tipos de desenho? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ ______________________________________________ 4 Cite algumas utilizaes do Flash? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ ______________________________________________ _____________________________________________________________ 5 Quais os formatos de arquivos que podem ser gerados pelo Flash e qual o formato do projeto Flash? __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 4

APOSTILA DE FLASH

EXERCCIO PRTICO Desenvolva os exerccios a seguir, no deixe de salvar o exerccio com o nome do ttulo. Competncia: Saber utilizar as ferramentas de desenho do Flash

EXERCICIO_FLASH01

EXERCICIO_FLASH02

so joo

Amor

EXERCICIO_FLASH03

EXERCICIO_FLASH04

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 5

APOSTILA DE FLASH

IV ANIMAO QUADRO-A-QUADRO Andes de criarmos uma animao quadro-a-quadro precisamos entender como funciona a Time Line e saber o que Quadro-Chave. A Time Line ou Linha de Tempo so os quadros que compem uma animao e o Quadro-Chave uma seqncia de quadros. Para organizar nosso trabalho temos as camadas.
Linha de Tempo

Camadas

Quadros Chave

Camadas As camadas so como folhas transparentes uma sobreposta a outra. Para criar novas camadas devemos clicar no boto Adicionar Camada que se localiza na parte inferior das camadas. No mesmo local tambm temos o cone para excluir camadas, devemos sempre prestar ateno na camada que est selecionada. Para mantermos um projeto organizado, aconselhvel renomear as camadas conforme seu contedo.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 6

APOSTILA DE FLASH

IV - ANIMAO QUADRO-A-QUADRO Antes de iniciarmos vamos entender melhor o que uma animao quadro-aquadro. Essa animao a animao onde vamos mostrar para o Flash, quadroa-quadro o que ele deve fazer utilizando o quadro chave. 1) Inicie um novo projeto e salve como Exemplo_01 2) No primeiro frame crie uma quadrado.
Primeiro Frame

3) No segundo frame vamos copiar o frame 1 utilizando a tecla F6: Selecione o frame 2 e tecle F6.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 7

APOSTILA DE FLASH

IV - ANIMAO QUADRO-A-QUADRO 4) Selecione o frame 2 e rotacione e mova o quadrado. Voc vai perceber que no frame 1 temos um posio do quadrado e no frame 2 temos outra situao. Faa isso at o frame 10, trocando a posio, cor e rotacionando o objeto quadrado. 5) Posicione o marcador do tempo no frame 1 e tecle Enter. A animao quadro-a-quadro muito parecido com gif animado, pois precisamos ter todas as posies em detalhes, onde podemos manipular e controlar o movimento que desejamos.

EXERCCIO PRTICO Reproduza o palhao e faa uma animao com os olhos e a boca utilizando quadro-a-quadro. Competncia: Saber utilizar as ferramentas de desenho do Flash e fazer animaes quadro-a-quadro. EXERCICIO_FLASH05

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 8

APOSTILA DE FLASH

V INTERPOLAO Para termos uma animao com efeito Tweening (transformao gradual) basta definir o primeiro e o ltimo frame e o flash se encarrega de fazer a transformao. Ele faz clculos para posicionar cada frame. Temos 2 tipos de interpolao Movimento e Forma. A Interpolao Forma para objetos no agrupados e o Movimento para objetos agrupados ou smbolos. Vamos ver um exemplo de interpolao FORMA. 1) Abra um novo documento do Flash e salve como Exemplo_02 2) No frame 1 crie um circulo no canto esquerdo da rea do documento. 3) Selecione o frame 20 e copie do frame 1utilizando F6. 4) Selecione o objeto (circulo) do frame 20 com o ponteiro e arraste para o canto direito da rea de trabalho. A time line ficar assim:

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 9

APOSTILA DE FLASH

V INTERPOLAO 5) Clique em qualquer lugar na rea cinza da linha de tempo.

6) Na barra de propriedades selecione Forma no campo Interpol,

7) Posicione o cursor no frame 1 e tecle Enter. Experimente trocar a cor do circulo, modificar sua forma e at adicionar outro objeto no frame 20. 8) Crie uma nova camada e nessa nova camada faa uma animao com letras, lembrando que devemos desmembrar a palavra utilizando Ctrl + B.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 10

APOSTILA DE FLASH

V INTERPOLAO Agora que j vimos como se trabalha quadro-a-quadro e interpolao Forma, vamos aprender como trabalhar com a interpolao MOVIMENTO. O procedimento igual ao anterior, a grande diferena que os objetos precisam estar agrupados, ou seja a linha com o preenchimento. Nesse caso no possvel fazer a metamorfose entre os objetos. Exemplo: 1) Abra um novo documento do Flash e salve como Exemplo_03. 2) No frame 1 crie um circulo no canto esquerdo da rea do documento. 3) Agrupe o objeto. Selecione a ferramenta ponteiro, d duplo clique no objeto e tecle Ctrl + G. 4) Selecione o frame 20 e copie do frame 1utilizando F6. 5) Selecione o objeto (circulo) do frame 20 com o ponteiro e arraste para o canto direito da rea de trabalho. 6) Clique em qualquer lugar na rea cinza da linha de tempo. 7) Na barra de propriedades selecione Movimento no campo Interpol.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 11

APOSTILA DE FLASH

EXERCCIO PRTICO Desenvolva os exerccios a seguir, no deixe de salvar o exerccio com o nome do ttulo. Competncia: Saber construir animaes com interpolao de Forma e Movimento.

EXERCICIO_FLASH06 Utilizando a Interpolao Forma, faa uma animao de um circulo se transformando em seu nome com alteraes de cores e tamanhos. Utilize sua imaginao. EXERCICIO_FLASH07 Utilizando a Interpolao Movimento, faa uma animao de um quadrado no cento da tela de tamanho pequeno se transformado em um quadrado grande ocupando quase toda a rea. Em uma nova camada faa seu nome entrando na tela e parando sobre o quadrado.

ANOTAO __________________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________ ______________________________________________________________ ______________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 12

APOSTILA DE FLASH

VI INTERPOLAO SOBRE UM CAMINHO J aprendemos como fazer animaes simples, essa animao simples segue uma trajetria j definida, porm podemos alterar essa trajetria, fazendo com que o objeto faa o movimento no caminho que desejamos. Exemplo: 1) Abra um novo documento do Flash e salve como Exemplo_04. 2) Crie um crculo no canto superior esquerdo com um preenchimento gradiente e agrupe esse objeto.

3) Clique no frame 40 e crie um quadro-chave. (F6) 4) Arraste o objeto para o lado superior direito. 5) Selecione o painel de propriedades Movimento no campo Interpol. 6) Com o quadro 40 selecionado, clique no menu Inserir / Guia de Movimento. Este comando cria mais uma camada automaticamente que tem a funo de guardar o caminho. 7) Utilizando o lpis, desenhe um caminho nessa nova camada.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 13

APOSTILA DE FLASH

V INTERPOLAO SOBRE UM CAMINHO 8) Selecione o Frame 1 da Camada 1 e na barra de ferramentas clique no item Encaixar.

9) Selecione o frame 40 e arraste o objeto at a linha guia. 10) Selecione o frame 1 e tecle Enter. Obs. A linha guia no aparecer no filme. Para visualizar telce Ctrl + Enter.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 14

APOSTILA DE FLASH

EXERCCIO PRTICO Desenvolva os exerccios a seguir, no deixe de salvar o exerccio com o nome do ttulo. Competncia: Saber construir animaes sobre um caminho.

EXERCICIO_FLASH08 Faa uma animao de um crculo dando a volta em outro crculo, conforme ilustraes abaixo.

ANOTAO __________________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________ ______________________________________________________________ ______________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 15

APOSTILA DE FLASH

VI MSCARAS O Efeito de Mscara cria camadas que escondem parte de outros layers que estejam abaixo do layer em que foi criada a mscara. possvel usar qualquer modalidade de animao, exceto trajetrias de movimento, para instruir a movimentao da mscara. Exemplo: 1) Abra um novo arquivo e salve como Exemplo_05. 2) Utilizando a ferramenta de texto, escreva a palavra Flash no centro da tela de documento. Renomeie a camada para Texto. 3)Crie outra camada e escreva e desenhe um crculo e agrupe-o. Renomeie a camada para Animao.

5) Faa uma animao com interpolao movimento do crculo passando sobre o texto. No esquea, com a tecla F5 voc repete o contedo da camada Texto enquanto dure a animao.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 16

APOSTILA DE FLASH

VI MSCARAS 6) Clique com o boto direto sobre a camada Animao e escolha a opo Mscara.

Note que a camada texto um sub-nvel da camada mscara (Animao) e as camadas ficam bloqueadas aps o comando.

EXERCCIO PRTICO Desenvolva os exerccios a seguir, no deixe de salvar o exerccio com o nome do ttulo. Competncia: Saber construir animaes com o efeito mscara. EXERCICIO_FLASH09 Faa uma animao com o seu nome, utilizando o efeito mscara. Use a sua criatividade!

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 17

APOSTILA DE FLASH

VII SMBOLOS Os smbolos so objetos que ficam armazenados em uma biblioteca. Esses objetos podem ser utilizados vrias vezes dentro do projeto, isso otimiza o trabalho e reduz o tamanho do arquivo, pois independente da quantidade de reproduo o Flash armazena apenas 1 cpia dele. As repeties ou instncias de um smbolo aparecem como objetos independentes no projeto, porm ficam interligados a um smbolo principal, por isso, qualquer alterao feita no smbolo mestre, refletir nos smbolos reproduzidos, mas podemos alterar smbolo reproduzido sem afetar o mestre. Utilize smbolos sempre que um objeto for utilizado vrias vezes dentro do projeto, seja animado ou no. Existem 3 tipos de smbolos. Grfico (imagens) Este tipo usado somente para imagens estticas ou seqncia de imagens. Clipe de Filme So utilizados para pequenos trechos de animao que funcionam independente da linha de tempo do projeto, funciona como um ninifilme. Botes Os botes so objetos que responde a eventos do mouse realizando alguma ao dentro do projeto.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 18

APOSTILA DE FLASH

VII SMBOLOS Smbolo Grfico Vamos aprender como criar e manipular smbolo grfico. Exemplo 1) Abra um arquivo novo e salve como Exemplo_06. 2) Desenhe um objeto grfico, por exemplo, um crculo.

3) D duplo clique sobre o objeto para selecionar o preenchimento e o contorno. 4) Com o objeto selecionado, selecione Inserir Converter em Smbolo... Ou tecle F8. 5) Na janela de smbolos selecione a opo Grfico e d um nome para o smbolo, por exemplo, crculo. Clique em OK.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 19

APOSTILA DE FLASH

VII SMBOLOS A partir de agora o seu crculo um smbolo grfico e est na biblioteca do projeto. Para ver a biblioteca, selecione Janela Biblioteca ou F11 ou ainda Ctrl + L.

Vamos incrementar nosso exemplo. 6) Duplique o objeto no frame 5 e no frame 10. O objeto deve permanecer no mesmo local.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 20

APOSTILA DE FLASH

VII SMBOLOS 7) No frame 5 aumente o objeto utilizando a ferramenta dimensionar. 8) Aplique uma transparncia no objeto atravs do painel de propriedades: Cor Alfa, diminuindo a porcentagem de transparncia.

9) Aplique a Interpolao Movimento na linha do tempo.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 21

APOSTILA DE FLASH

VII SMBOLOS Editando o smbolo Como j foi visto, os smbolos ficam armazenados na biblioteca do Flash. Quando h a necessidade de alterar qualquer smbolo, preciso edit-lo atravs da biblioteca ou de sua instncia. Para isso, d duplo clique na instncia ou no objeto da biblioteca.

Nome do smbolo

Repare que automaticamente a linha de tempo mudou, isso porque estamos trabalhando com a edio do smbolo. O Flash abre uma nova cena com o objeto e o nome do smbolo.

Devemos prestar muita ateno em que cena estamos trabalhando.

Troque a cor do crculo e volte para a cena principal clicando sobre Cena 1 na barra onde est indicado o smbolo. Veja o que aconteceu com seu exemplo.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 22

APOSTILA DE FLASH

VII SMBOLOS Smbolo Clipe de Filme Como j vimos, o Clipe de Filme um ninifilme. Vamos comear com um exemplo para entendermos melhor. Nesse exemplo faremos um corao pulsando. 1) Abra um novo documento do Flash e salve como Exemplo_07. 2) Desenhe um corao.

3) Selecione o preenchimento e o contorno. (Duplo clique no objeto) 4) Transforme em um smbolo do tipo Grfico e de o nome do corao.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 23

APOSTILA DE FLASH

VII SMBOLOS Smbolo Clipe de Filme 5) Selecione Inserir Novo smbolo... no menu. Escolha a opo Clipe de Filme e de o nome de Animao.

Abrir uma nova cena com o ponto de referncia do smbolo.

Ponto de referncia do smbolo.

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 24

APOSTILA DE FLASH

VII SMBOLOS Smbolo Clipe de Filme 6) Abra a biblioteca. F11 7) Selecione o smbolo corao e arraste para a rea do documento.

8) Duplique o quadro-chave no frame 10 e no frame 20, utilizando F6. 9) No frame 10 aumente o objeto (corao). 10) Aplique a interpolao na linha de tempo. 11) Volte para a Cena 1. 12) Arraste da biblioteca o smbolo Animao e d Crtl + Enter para verificar como ficou!

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 25

APOSTILA DE FLASH

VII SMBOLOS Smbolo Boto Boto um objeto que respondem a eventos do mouse e a aes implementadas nele. Os botes podem ser animados, com som ou esttico. Vamos construir um boto. 1) Utilizando o mesmo exemplo do corao (Exemplo_07), selecione a opo Inserir Novo Smbolo... do menu. 2) Selecione a opo Botes e de o nome de Boto Exemplo.

Novamente abrir uma nova cena, onde vamos construir nosso boto exemplo, porm a linha de tempo vai mudar.

Aparecer na linha de tempo as opes dos estados dos botes. Para Cima = O boto em seu estado natural. Sobre = Define a imagem, som ou animao do boto quando o mouse passa sobre ele. Para Baixo = Define a imagem, som ou animao quando clicamos no boto. rea = Define a rea que responder aos eventos do mouse.
Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei
Pgina: 26

APOSTILA DE FLASH

VII SMBOLOS Smbolo Boto 3) Vamos desenhar o boto em seu estado natural. Desenhe um crculo com gradiente linear e paralelamente desenhe outro crculo, tambm com gradiente linear mas em outra posio, sem contorno e menor do que primeiro.

Mova o crculo menor para cima do maior.

4) J definimos o estado Para Cima. Agora vamos definir o estado Sobre. Na Linha de tempo selecione a posio Sobre e tecle F6. Ele copiou exatamente o objeto anterior. 5) Troque as cores dos crculos e escreva exemplo.

exemplo

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 27

APOSTILA DE FLASH

VII SMBOLOS Smbolo Boto 6) Agora vamos definir o estado Para baixo. Na Linha de tempo selecione a posio Para baixo e tecle F6. Ele copiou exatamente o objeto anterior. 7) Apague o texto exemplo e deixe os dois crculos da mesma cor.

8) Do mesmo modo, para definir a rea, selecione o estado rea e tecle F6. Como nosso objeto um objeto preenchido, ou seja, no existe elementos em branco ou transparente, no precisamos alterar nada nesse estado. 9) Volte para a Cena 1. 12) Arraste da biblioteca o smbolo Boto exemplo e d Crtl + Enter para verificar como ficou!

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 28

APOSTILA DE FLASH

EXERCCIO PRTICO Desenvolva os exerccios a seguir, no deixe de salvar o exerccio com o nome do ttulo. Competncia: Saber construir animaes com smbolos grfico, clipe de filme e boto.

EXERCICIO_FLASH10 Faa um cenrio onde apresente estrelas ou pontos brilhando (utilize smbolo clipe de filme), que tenha um boto e uma animao com interpolao. Sugestes: Cenrio de cu com estrelas brilhando e um pssaro passando pela tela. Um semforo com o sinal amarelo piscando, enquanto aparece o texto Ateno. Um corao pulsando enquanto aparece uma flexa atravessando o corao.

ANOTAO __________________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________ ______________________________________________________________ ______________________________________________________ __________________________________________________________ __________________________________________________________ __________________________________________________________

Colgio Serrano Guardia Ensino Mdio Tcnico Prof Lslei

Pgina: 29