apostila de flash mx - blog da prof andrea garcia · macromedia® flash™ mx 3 introduÇÃo esta...

Macromedia® Flash™ MX

2

SUMÁRIO

INTRODUÇÃO 3 O FLASH MX 3 INICIANDO O MACROMEDIA FLASH MX 3 AMBIENTE DE TRABALHO 3 SALVANDO UMA ANIAMAÇÃO 4 ABRINDO UMA ANIMAÇÃO EDITÁVEL 4 O PALCO 5 BARRA DE FERRAMENTAS 5 PAINEIS 6 LINHA DO TEMPO 6 FERRAMENTAS DE EDIÇÃO 7 EDITANDO COM O FLASH 9 DEFININDO E MODIFICANDO LINHAS 9 MODIFICANDO FIGURAS 11 ATIVIDADES PROPOSTAS 12 DEFININDO MODOS DE PREENCHIMENTO 13 USANDO PINCEL 14 APAGANDO PREENCHIMENTOS 14 ATIVIDADES PROPOSTAS 15 VETORIZANDO BITMAPS 16 OTIMIZAÇÃO DE IMAGENS 18 ATIVIDADES PROPOSTAS 18 AGRUPANDO FORMAS 19 CRIANDO SIMBOLOS 20 EDITANDO SIMBOLOS 21 ATIVIDADES PROPOSTAS 23 ANIMAÇÕES QUADRO A QUADRO 24 ANIMAÇÕES COM INTERPOLAÇÃO 25 ATIVIDADES PROPOSTAS 29 CRIANDO BOTÕES 30 CRIANDO UM CURSOR 33 ATIVIDADES PROPOSTAS 34 ADICIONANDO SOM 35 ATIVIDADES PROPOSTAS 37 BANNERS 38 AJUSTANDO OS ATRIBUTOS DE UM FILME 38 ATIVIDADES PROPOSTAS 39 EXPORTANDO IMAGENS E FILMES 41 CRIANDO UM PROJETOR 41 PUBLICANDO O ARQUIVO EM HTML 42 ATIVIDADES PROPOSTAS 43 ACTIONSCRIPT 44 CONTROLADORES DE FILME 44 NAVEGADORES DE REDE 44 CONTROLE DO CLIPE DE FILME 45


3

INTRODUÇÃO

Esta apostila auxilia no estudo do Macromedia Flash MX, interface em português, possibilitando consultas a usuário iniciantes e usuários de versões anteriores do Flash. O FLASH MX

Bem-vindo ao Macromedia Flash MX, a solução para desenvolver animações para internet com riqueza de recursos. O Macromedia Flash MX fornece tudo que é necessário para criar material para a Web com riqueza de recursos e aplicativos poderosos. Se você estiver criando gráficos com movimento ou aplicativos geridos por dados, o Flash MX tem as ferramentas de que você necessita para produzir grandes resultados e proporcionar ao usuário máximo aproveitamento, em diferentes plataformas e dispositivos. INICIANDO O MACROMEDIA FLASH MX

Para iniciar o Flash MX clique no botão iniciar. Posicione o cursor do mouse em Programas/Macromedia Clique em Macromedia Flash MX.

AMBIENTE DE TRABALHO


4

SALVANDO UMA ANIMAÇÃO

Para salvar uma animação, clique Arquivo/Salvar Como (CTRL+SHIFT+S). Dê um nome para a animação e escolha a pasta onde você salvará a animação, clique no botão Salvar.

Os arquivos salvos serão arquivos editáveis posteriormente, gerando um arquivo com a

extensão .FLA.

ABRINDO UMA ANIMAÇÂO EDITAVEL Para abrir uma animação editável clique em Arquivo/Abrir (CTRL+O) e selecione arquivos com extensão .FLA


5

O PALCO

O Palco é a parte mais importante da área de trabalho do Flash. Todos os arquivos de imagens vetoriais ou bitmaps são visualizados e trabalhados aqui. É no Palco que, ao se criar um filme, serão definidas propriedades como dimensões, velocidade de exibição, cor de fundo, unidades de medida etc. BARRA DE FERRAMENTAS

Todas as ferramentas necessárias para a criação e edição de gráficos encontram-se na barra de ferramentas. Dependendo da ferramenta selecionada, são mostrados modificadores na área Opções que alteram o comportamento de cada uma delas. Nesta barra também podemos mudar a cor da linha e a cor de preenchimento das figuras através da área Cores.


6

PAINEIS O Flash MX possui painéis que auxiliam o gerenciamento de propriedades dos elementos, tais como Misturador de cores, Efeitos de cores, Respostas de ajuda. Esses painéis podem ser recolhidos ou fechados a qualquer momento.

1) Para recolher um painel clique sobre o seu título. 2) Para fechar um painel clique com o botão direito do

do mouse sobre o título e selecione a opção Fechar Painel.

LINHA DO TEMPO

Para se criar animações no Flash MX, cada intervalo de tempo deve decomposto em quadros seqüenciais.

É na janela Linha do Tempo que os quadros de uma animação estão coordenados e todas as camadas do projeto estão dispostas. A Linha do Tempo mostra todos os quadros um a um.

As camadas são poderosas aliadas na criação de animações e podem ser entendidas

como folhas dispostas uma sobre a outra. As camadas podem ser bloqueadas para que não sejam modificadas ou ocultadas.

Utilizar camadas é uma excelente maneira de organizar um projeto, pois podemos especificar camadas diferentes para cada gráfico, som ou até scripts de códigos.

Um arquivo novo gerado no Flash Mx apresenta somente uma camada. Para aumentar o

número de camadas, basta adicionar uma nova. A melhor forma de se organizar as camadas é nomeando cada uma com nomes sugestivos, principalmente em trabalhos que contenham inúmeras camadas.


7

FERRAMENTAS DE EDIÇÂO

( ) FERRAMENTA DE SELEÇÃO: Como o próprio nome já diz, serve para selecionarmos os objetos no palco e tem como atalho, a tecla "V". ( ) FERRAMENTA SUBSELECIONAR: Ao contrário do que muitos pensam, não faz a mesma coisa que a de seleção que vimos acima. Experimente clicar com esta ferramenta em cima de um quadrado, por exemplo. Você perceberá que poderá manipular os vetores deste quadrado. Serve também para trabalhar em conjunto com a ferramenta "Caneta" que veremos a seguir. Tem como tecla de atalho, a letra A. ( ) FERRAMENTA LINHA: Ferramenta utilizada para construir linhas que tem como tecla de atalho a letra N.

( ) FERRAMENTA LAÇO: A ferramenta lasso serve para selecionarmos partes de uma imagem. Clicando nesta ferramenta, o flash ainda nos dá a possibilidade de escolhermos por exemplo a opção varinha mágica. Tem como tecla de atalho a letra L.

( ) FERRAMENTA CANETA: Utilizada para criar linhas em curva e tem com atalho a letra P.

( ) FERRAMENTA TEXTO: Ferramenta de texto do Flash Mx. Nos dá possibilidade de trabalharmos com texto no Flash, sua tecla de atalho é a letra T.

( ) FERRAMENTA OVAL: A ferramenta Oval, também conhecida como círculo, serve para construirmos/desenharmos circunferências. Tem como atalho, a tecla O. ( ) FERRAMETNA RETÂNGULO: Serve para desenharmos retângulos, quadrados...tem como atalho a tecla R. Ainda nos dá as seguintes opções:

O Botão Raio do Retângulo Arredondado ( ) que aparece nas opções serve para configurarmos as bordas do retângulo. Se você quiser um retângulo com bordas arredondadas, por exemplo, é ali que deve configurar.

( ) FERRAMENTA LÁPIS: Serve para desenharmos livremente no palco. Ainda nos dá as seguintes opções:

Acertar: o flash endireita a linha automaticamente. Suavizar: fará com que seu traçado seja suave. Tinta: o flash deixa seu traço o mais “Fiel” possível.

( ) FERRAMENTA PINCEL: a ferramenta Pincel serve para pintarmos uma determinada imagem ou até mesmo para desenharmos. Esta ferramenta - assim como algumas outras - ainda nos dá algumas opções no painel "Opções" conforme indica a figura:


8

Opções: opções de preenchimento Tamanho: opção para modificarmos o tamanho do Pincel Formato: opção para modificarmos o formato do Pincel Bloquear Preenchimento: Serve para travarmos um determinado preenchimento

( ) FERRAMENTA TRANSFORMAÇÃO LIVRE: ferramenta de transformação livre do Flash. Se você tem por exemplo um retângulo e quer aumentar seu tamanho, esta é a ferramenta a ser utilizada. Tem como atalho a letra Q e nos fornece as opções:

Rotacionar Escala Distorcer Envelope

( ) FERRAMENTA TRANSFORMAR PREENCHIMENTO: a ferramenta de transformação de preenchimento é muito útil, principalmente quando utilizamos um gradiente em algum objeto e queremos mudar as propriedades deste gradiente, que no caso é o preenchimento. Tem como atalho a letra F. ( ) FERRAMENTA TINTEIRO: serve para contornarmos um objeto com uma determinada cor. Imagine que você possui um quadrado e cortou o meio deste quadrado. Este quadrado ficou com o meio "vazado" e você quer colocar uma cor de contorno nele. Basta utilizar esta ferramenta que possui como tecla de atalho a letra S.

( ) FERRAMENTA BALDE DE TINTA: serve para preenchermos determinadas áreas/objetos. Ela possui a tecla de atalho K.

( ) FERRAMENTA CONTA-GOTAS: para capturarmos uma determinada cor de uma determinada área/objeto. Imagine que você quer selecionar uma cor de uma determinada imagem mas não sabe exatamente qual o código hexadecimal dela. Basta utilizar o conta-gotas e tudo se resolve. Possui como tecla de atalho a letra I.

( ) FERRAMENTA APAGADOR: também conhecida como "borracha" serve para apagarmos uma determinada área ou um objeto. Tem como tecla de atalho a letra E e possui as seguintes opções:

Modo: mostra os modos da borracha Torneira: apaga todo o objeto selecionado Formato: mostra os formatos disponíveis para a borracha


9

( ) FERRAMENTA MÃO: esta ferramenta serve para "navegarmos" pelo palco ou objeto. Basta seleciona-la, pressionar o botão do mouse e segurar para "navegarmos". Possui como atalho a tecla H. ( ) FERRAMENTA ZOOM: serve para darmos zoom na imagem/palco/objeto/filme enquanto trabalhos. É extremamente útil e possui como teclas de atalho as letras Z e M. ( ) COR DO TRAÇO: serve para alterar a cor do contorno.

( ) COR DO PREENCHIMENTO: serve para alterar a cor do preenchimento. ( ) IMÃ: com esta ferramenta "ligada" o Flash "cola" os objetos na grade. Muitas vezes ela é bastante útil, porém, dependendo do caso pode irritar o usuário.

( ) TRANSFORMAÇÃO: serve para transformação de objetos. Transformar uma linha reta em curva, por exemplo.

EDITANDO COM O FLASH

Quando vamos desenhar qualquer figura utilizando as ferramentas vistas anteriormente, o flash cria vetores. Essas figuras podem ser editadas utilizando as ferramentas disponíveis no flash sem perder qualidade, por estarmos trabalhando com um vetor.

As cores a podem ser definidas antes de criar qualquer figura, utilizando as ferramentas Cor do Traço e Cor do Preenchimento.

Observe que quando desenhamos um objeto, o preenchimento está desagrupado de seu

contorno, sendo necessário dois cliques com o mouse para selecionarmos as duas partes.

Podemos AGRUPAR (CTRL+G) os objetos para manipularmos sem haver alterações

indesejáveis no trabalho. Para alterar cores ou apagar com o apagador é necessário DESMEMBRAR (CTRL+B) o

objeto. Cuidado, não deve ter nenhum símbolo atrás dele, ou ele vai para trás dele e você não o achará. DEFININDO E MODIFICANDO LINHAS

1) Selecione a ferramenta Linha ( ) e mude a cor do traço para preto. 2) No palco, construa um triângulo utilizando a ferramenta Linha.


10

Ao usar a ferramenta Lápis para desenhar linhas, o Flash pode suavizar as curvas de seu desenho, bastando para isso, ajustar o comportamento da ferramenta. Além disso, possui o reconhecimento de formas, transformando automaticamente um desenho em uma forma geométrica semelhante. 3) Com o palco novamente limpo, clique sobre a ferramenta Lápis. 4) Tente desenhar uma circunferência no palco e veja o ajuste que o programa faz.. ,

5) Clique no modificador de desenho Formado de Lápis ( ), que apareceu na área de Opções da caixa de ferramentas.

6) Note que o modo está ajustado para Acertar. Mude-o para Suavizar.

7) Desenhe uma linha no paco e observe como o Flash suaviza a linha desenhada. O modo Tinta quase não interfere e suaviza um pouco as linhas. Esse é o modo onde seu desenho ficará mais semelhante ao que você traçar.

A ferramenta Caneta ( ) permite desenhar linhas retas e curvas com maior precisão. As formas são criadas a partir de pontos definidos na área de trabalho.


11

Clicando em dois pontos distintos cria-se uma linha reta. O ato de clicar e arrastar cria curvas. 8) Clique sobre a ferramenta Caneta. 9) Experimente traçar uma linha com essa ferramenta. Ao se trabalhar com a ferramenta de linhas, deve-se especificar antes duas características

de espessura, de estilo e de cor. Feito isto, qualquer linha que for feita com a ferramenta Lápis ou Caneta aparecerá com essa característica.

Mas para alterá-la posteriormente, existe um painel específico para o tratamento de linhas de contorno de figuras gráficas criadas no Flash.

A ferramenta Tinteiro ( ) altera as características de uma figura de acordo com os atributos definidos previamente. Basta selecionar essa ferramenta, fazer as definições e clicar sobre a figura que se deseja alterar.

10) Limpe o palco novamente e desenhe uma circunferência qualquer. 11) Selecione a ferramenta Tinteiro. 12) Mude a cor de contorno no painel Traço para a cor vermelha localizada na primeira coluna. 13) Clique sobre a circunferência. Observe que, independentemente de onde você clicou, a alteração só ocorreu na linha de

contorno da figura. Se uma figura não possui linha de contorno, também é possível adicionar uma. Ao se clicar

com a ferramenta Tinteiro sobre a figura qualquer sem contorno, este é acrescentado automaticamente.

MODIFICANDO FIGURAS

É possível dar uma nova forma a uma linha ou a um objeto usando a ferramenta de seleção e arrastando para uma nova posição uma extremidade ou uma curva. No momento em que isso é feito, o cursor muda de forma para indicar a linha que pode ser mudada e tem-se uma visualização da alteração feita.

Quando o botão do mouse é solto, o programa redesenha a forma de acordo. Mantendo a tecla <CTRL> pressionada durante essa operação, o Flash cria um novo ponto para modificação.


12

Se precisar refazer a alteração, abra o menu Editar e selecione a opção Desfazer. Este

comando também poderia ser acionado através das teclas CTRL+Z. A rotação e o dimensionamento de objetos gráficos no Flash é feito utilizando,

respectivamente, os botões Girar e Dimensionar localizados em Opções quando a ferramenta de seleção é escolhida.

Com o objeto previamente selecionado, só é preciso clicar no modificador desejado e executar a alteração clicando e arrastando um dos oito pontos de modificação que aparecem.

Para modificações exatas de escala e rotação deve-se utilizar o comando Dimensionar e Girar localizado na opção Transformar do menu Modificar.

1) No menu Modificar, posicione o cursor do mouse sobre Transformar e clique em Dimensionar e Girar.

2) Na janela que se abriu, dê um clique duplo no campo Girar, digite o número 45 e clique em OK. A figura rotacionará em 45°.

3) Escolha novamente o comando Dimensionar e Girar no menu Modificar e digite 50 no campo Dimensionar.

4) Dê um clique duplo no campo Girar, digite 0 e clique em OK. O tamanho da figura será reduzido em 50%.

ATIVIDADES PROPOSTAS

1. Usando as ferramentas próprias para a criação de linhas e ovais, desenhe um balão de texto no estilo que encontramos em revista em quadrinhos.

2. Escreva no interior do balão um texto de sua escolha. Formate-o com uma fonte tamanho e cor diferentes do padrão.

3. A partir de uma simples linha reta criada com a ferramenta linha, transforme-a em uma curva.


13

DEFININDO MODOS DE PREENCHIMENTOS

Para pintar formas criadas no Flash, usa-se a ferramenta Balde de Tinta. Essa ferramenta possui o mesmo princípio da maioria dos softwares gráficos para o preenchimento de figuras: define-se uma cor e, com um clique do mouse, pinta-se a forma desejada.

Mas a semelhança fica apenas nesse aspecto, pois a ferramenta Balde de Tinta tem também a capacidade de ignorar pequenas aberturar e, mesmo assim, preencher formas diversas. Se uma forma não está completamente fechada, pode-se determinar que o programa ignore essas pequenas aberturar. Ajustando a tolerância para pequenas, médias ou grandes lacunas, obtém-se uma poderosa e inteligente ferramenta de pintura.

1) Selecionar a ferramenta Balde de Tinta.

O modificador ( ) que está posicionando na área Opções permite o ajuste da ferramenta para ignorar lacunas.

2) Clique sobre o modificador e selecione Fechar Lacunas Médias.

A ferramenta agora está ajustada para ignorar aberturar médias. Observe que a figura ao lado possui uma pequena abertura. Mesmo com a figura não fechada totalmente, o programa é capaz de pintar o seu conteúdo sem deixa a tinta vazar para o palco. Algumas vezes você precisará experimentar esses ajustes até encontrar um que consiga preencher sua figura. Também é possível pintar ou alterar figuras com cores sólidas ou com gradientes de cores. O Flash possui uma paleta de cores pré-definidas para uma rápida escolha, mas permite também customizá-las.

Observe os gradientes de cores do painel Amostra de Cores. Eles podem ser lineares ou radiais e, ao usá-los, conseguimos resultados interessantes. A única desvantagem é que imagens que usam degrades ficam maiores no tamanho dos arquivos finais do que figuras com cores sólidas. O primeiro gradiente na parte inferior da paleta possui a orientação linear das cores; O segundo, a orientação radial. Nesse caso o Flash toma a posição do seu clique como centro do gradiente de cores. 3) Experimente alterar o primeiro com gradiente radial, clicando em diversas posições dentro de uma circunferência ou de um retângulo. Pode-se transformar as características de um gradiente já aplicado clicando no botão Transformar

Preenchimento ( ) e selecionando a figura que se deseja alterar. Assim, é possível modificar curvatura, direção, tamanho e outros atributos.


14

Ao se clicar com o botão acionado Transformar Preenchimento sobre uma figura, uma linha cinza com pontos de modificação a circunda para que o gradiente seja alterado. Cada ponto exerce uma influência diferente no gradiente. O ponto circular do centro modifica o raio de ação do preenchimento gradiente. O ponto quadrado modifica a forma do gradiente radial para uma forma elíptica e o outro ponto circular rotaciona o gradiente. USANDO O PINCEL

O Pincel ( ) cria linhas livres e preenche áreas com cores sólidas ou degradês, com vantagem de podermos definir que tipo de comportamento queremos que ele tenha. Pode-se pintar normalmente, somente figuras preenchidas, sob figuras, somente objetos selecionados ou pintar o objeto que recebeu o primeiro clique do mouse.

1) Clique na ferramenta Pincel e abra o modificador Tipo de

Pincel localizado a área Opções. Veja os tipos de comportamento que podemos dar à ferramenta Pincel. Com exceção da opção Pintar Normal, nenhuma delas afeta linhas de contorno. Essas opções também são poderosas aliadas de pintura e tornam o trabalho muito mais dinâmico.

O segundo modificador aumenta ou diminui o tamanho do pincel.

2) Dê um clique no segundo modificador para abri-lo, observe os tamanhos disponíveis e em seguida feche-o com outro clique.

Ajustando o modificador Formato do Pincel, obtemos diversos tipos de desenho de linha 3) Clique sobre esse modificador e veja os formatos disponíveis. APAGANDO PREENCHIMENTOS

Similar ao pincel, a ferramenta Apagador ( ) possui opções de comportamento. O modo normal apaga qualquer linha e preenchimento onde o cursor passar. As opções dessa ferramenta são apagar preenchimentos, apagar linhas, apagar preenchimentos selecionados e apagar dentro de figuras.

A ferramenta Borracha também traz um outro modificador que apaga áreas fechadas ou formas preenchidas. Esse item tem o ícone de uma torneira e, para usa-lo, basta clicar na área a ser apagada. Uma linha ou forma selecionada também é apagada clicando-se sobre ela.

1) Selecione a ferramenta Apagador e observe o aparecimento do modificador Torneira ( ). 2) Toda a área que recebe um clique com essa ferramenta é apagada. Pode-se apagar

também somente linhas de contorno. O procedimento de apagar linhas e contornos também poderia ser feito simplesmente selecionando uma parte e teclando <DEL>.


15

ATIVIDADES PROPOSTAS 1) Crie alguns círculos concêntricos, começando do maior para o menor e pinte-os de cores

diversas. 2) Faça o mesmo exercício anterior com outras formas geométricas. 3) Experimente preencher essas figuras com os gradientes de cores que estão no painel

Amostras. 4) Apague esses preenchimentos usando a ferramenta Torneira.


16

VETORIZANDO BITMAPS Nesta lição aprenderemos a importar imagens no Flash, convertendo bitmaps em vetores gráficos. A essa operação damos o nome de vetorização. Antes, cabe responde a uma pergunta: por que vetorizar, ou seja, por que é necessário converter um bitmap em vetor? Uma imagem bitmap importada para o Flash é interpretada como um único objeto. O que isso significa? Que o bitmap é uma peça única, as formas que o compõem não existem individualmente.

Um bitmap de um vaso de flores pode ser movido, mas nunca poderá alterar suas formas. Não será possível, por exemplo, mudar detalhes em sua cor. A conversão de um bitmap para vetor permite que suas áreas de cores variadas sejam editadas. A vetorização é, portanto, o processo de conversão que nos permite editar imagens no Flash.

Sempre lembrando, o Flash importa bitmap, mas não só editar vetor. Com a vetorização as formas são desagrupadas e a imagem passa a ser composta por várias áreas editáveis.

Alguns valores devem ser ajustados antes de se vetorizar um bitmap para que se consiga resultados diferentes. Podemos vetorizar imagens para que se pareçam ao máximo com a imagem original ou para a criação de formas menos detalhadas.

Para ilustrar nossa explicação, utilizaremos a figura ao lado. Você pode trabalhar com a imagem semelhante, obtida, por exemplo, na internet. O

importante é que você salve a imagem para que possa abri-la posteriormente. A seguir, execute os seguintes passos:

1) Importe o arquivo com a figura que você salvou acessando o menu Arquivo e escolhendo

Importar.


17

A imagem bitmap é carregada para o programa. Nesse momento você não pode alterá-la. Vamos converter a imagem em vetores.

2) Vá ao menu Modificar e selecione Traçar Bitmap.

Ao escolher o comando Traçar Bitmap, uma caixa de diálogo aparece para que esses parâmetros sejam ajustados antes da vetorização.

Limite de Cor informa o intervalo de cores que ele deve interpretar com uma única cor. Quando menos esse valor, que vai de 1 a 200, maior o número de objetos na imagem vetorizada. O parâmetro Área Mínima indica o tamanho da área a ser detectada. Ajuste de Curva desenha as linhas de contorno mais detalhadas ou mais simples. Limite de Ângulo cria cantos arredondados ou cantos agudos nos vetores criados. Quando o botão OK é pressionado, a imagem bitmap é substituída pela cópia vetorial.

3) Deixe o padrão do Flash. Clique em OK. 4) É feita a vetorização do bitmap e a imagem fica toda selecionada. Clique em um ponto fora

da imagem.

Veja o resultado. Ajustando os valores do comando Traçar Bitmap antes da vetorização é possível a obtenção de resultados diferentes. Com certeza ocorreu processo bastante semelhante com a imagem que você utilizou.

Fotos normalmente possuem uma gama de cores muito grande. Nesses casos geralmente

a vetorização cria muitos objetos na imagem final, às vezes deixando a imagem vetorizada tão grande quando o bitmap.

Quando se vetorizam ilustrações, dependendo do ajuste no comando de traçar bitmap, teremos um resultado mais leve e com poucos objetos. Isso porque algumas ilustrações possuem áreas com cores sólidas e uniformes. O resultado pode ficar muito mais próximo da imagem original.

Vamos trabalhar com outra imagem. Para ilustrar nossa apresentação, utilizaremos a

figura do Bart. A figura possui cores diferentes.

A ilustração deve ser composta por áreas distintas, separadas por

linhas. Observe como a figura é composta por diversas partes. Isso nos permitirá, principalmente, colorir apenas uma área da figura.

Observe também como a ilustração possui somente cores sólidas. Para se alterar a cor do Bart, é preciso vetorizá-lo antes.


18

5) Com a imagem selecionada, escolha novamente Traçar Bitmap. 6) Modifique os valores de Limite de Cor para 5 e a Área Mínima para 1, teclando <TAB>

para mudar de campo. 7) Abra o campo Limite de Ângulo e selecione Poucos Cantos. Com esses valores, o programa vai aproximar bastante a imagem vetorizada da imagem original.

OTIMIZAÇÃO DE IMAGENS

Existe uma função no programa que reduz o número de curvas dos vetores fazendo com que a imagem fique mais leve. É a função Otimizar. Para isso, precisamos selecionar toda a imagem. Ainda estamos trabalhando com a imagem anterior, lembre-se disto.

1) Abra o menu Editar e clique em Selecionar Tudo. 2) Abra o menu Modificar e clique em Otimizar.

A barra de ajustes que aparece nos permite escolher entre curvas mias ou menos suaves. 3) Deixe a barra como está. Clique em OK. O programa informa a porcentagem de otimização que ele fará na imagem. 4) Clique novamente OK. 5) Clique na ferramenta de seleção, Seta, e em seguida num ponto fora da imagem. Você pode ter resultados diferentes alterando os ajustes da ferramenta de otimização, fazendo com que sua imagem vetorizada fique muita mais leve. É importante lembrar de uma grande vantagem da imagem vetorizada sobre o bitmap: a leveza. Um arquivo vetorizado pode ser várias vezes menores do que uma imagem bitmap, desde que seja devidamente otimizado e contenha o menor número de curvas possíveis. É sempre importante lembrar que estamos estudando edição de imagens para internet, onde o tamanho do arquivo é tão importante quando a qualidade visual. ATIVIDADES PROPOSTAS 1. Importe algum bitmap para o Flash e experimente vetorizá-lo alterando os valores de

Limite de cor, Área mínima e Ajuste de curva. Observe os diferentes resultados. 2. Tente mudar as cores da imagem que você vetorizou. Apague algumas áreas também. 3. Tente vetorizar uma outra imagem qualquer. Separe algum elemento dessa imagem e

tente colocá-lo em um outro cenário.


19

AGRUPANDO FORMAS

Agrupar elementos é uma forma prática de se trabalhar com gráficos e prevenir alterações

indesejadas nas formas que compõem o trabalho. Formas não agrupadas, se possuírem a mesma cor e forem postas uma sobre as outras,

criam uma versão mesclada dos elementos. Por outro lado, quando as cores são diferentes, a área correspondente à segunda forma é eliminada da primeira.

Consideremos, para efeito de estudo, dois elementos de cores diferentes. Utilizaremos a

figura abaixo, lembrando somente que devem ser dois objetos vetoriais de cores distintas.

1) Selecione a figura da esquerda clicando sobre ela. 2) Pressione a tecla <SHIFT> e clique sobre a outra figura. Os dois objetos estarão selecionados. Vamos agrupa-los agora. 3) No menu Modificar, escolha Agrupar. Note que a seleção mudou para que você saiba que os objetos estão agora agrupados.

O Flash trata um grupo de objetos como um único objeto, e é capaz de editá-lo sem precisar desagrupar. Para isso, usa-se o comando Editar Selecionados do menu Editar. 4) Vamos editar os objetos agrupados. Clique com o botão da direita sobre um dos objetos agrupados e escolhe Editar Selecionados.

Você entrará no modo de edição de objetos agrupados e símbolos. Atente para o ícone que surgiu no canto superior esquerdo da Linha do Tempo, chamando a atenção para o fato de que se trata de um grupo.


20

Todos os outros objetos que não fazem parte do grupo ficam mais claros. Nesse momento, somente podem ser modificados os objetos que fazem parte do grupo. 5) Clique em um ponto do palco para desfazer a seleção dos objetos. 6) Pinte a cadeira com uma cor diferente da cor dela. Lembre-se de usar a ferramenta

adequada, selecionando primeiramente a cor no painel Amostra de cores. Após a edição, para voltar à área de trabalho, basta dar um clique duplo em qualquer parte do palco que não seja um dos elementos agrupados ou clicar na lingüeta com o nome da cena que se encontra no canto inferior esquerdo da Linha do Tempo. 7) Clique na Cena 1 para voltar ao modo de edição normal.

CRIANDO SÍMBOLOS

Os Símbolos são uma maneira excelente de se reduzir o tamanho dos arquivos. Criar símbolos para animações cíclicas reduz muito o tempo de processamento, pois ele só precisará ser carregado uma vez, não importando quantas vezes a ação venha a se repetir. O filme também rodará mais fácil, uma vez que poucas informações foram lidas.

Símbolos: arquivos criados ou importados no Flash que podem ser arquivos gráficos, sons

ou clipe de filme. Pode-se reutilizar um símbolo guardado na janela Biblioteca quantas vezes se queira, bastando arrastá-lo para o palco.

Observe a biblioteca ao lado. Vários gráficos formam uma animação, basta adicionar o clipe a cena e ajustarmos o Flash para repetir essa animação quantas vezes acharmos necessária.

Símbolos podem conter muitos quadros e camadas como se fossem um filme comum. Ao

se criar símbolos, o Flash guarda todos na janela Biblioteca para utilizarmos inúmeras vezes. É possível se criar símbolos com comportamento de imagens gráficas, botões ou filmes completos.

A seguinte figura foi criada dentro do próprio Flash. Ela possui

linha de contorno e preenchimento. Vamos transformá-la em um símbolo gráfico. Você pode criar sua própria imagem com as ferramentas de desenho do Flash ou utilizar uma forma simples para o próximo exercício.


21

1) Dê um clique duplo com a ferramenta de seleção na figura para selecioná-la. O duplo clique é fundamental. Um clique simples selecionará apenas o preenchimento da figura, ignorando o contorno.

2) No menu Inserir, escolha Converter em Símbolo. 3) Na caixa de diálogo que se abrirá digite ELEMENTO 1 para o nome da figura. 4) Nesta janela, a primeira opção de comportamento que aparecerá marcada será Clipe de Filme. Clique na opção Gráfico. 5) Clique no botão OK. Pronto. Você acaba de criar um símbolo gráfico chamado ELEMENTO 1. 6) Agora, no menu Janela, selecione Biblioteca para abrirmos a janela Biblioteca. 7) Na lista de símbolos, clique em ELEMENTO1. O símbolo que você criou aparece na janela e está armazenado na biblioteca para ser usado quantas vezes você quiser. 8) Clique na amostra que aparece na janela Biblioteca e arraste para o palco.

Observe que o símbolo agora aparece duas vezes na tela. Isso não sobrecarrega a memória, pois a informação só é lida uma vez. Atenção: caso, posteriormente, o símbolo seja modificado, toda cópia que estiver no filme também será modificada.


22

EDITANDO SÍMBOLOS

Para editar símbolos, o Flash aciona o modo de edição em que somente podem ser alterados os elementos pertencentes àquele símbolo. Nesse momento, qualquer alteração feita ao símbolo é atualizada em cada cópia que faz parte do filme.

Todas as ferramentas usadas no filme podem ser usadas na edição de símbolos, até mesmo a inserção de outros símbolos. Vamos para o modo de edição. Considere que ainda estamos trabalhando com o arquivo do exercício anterior.

1) Utilizando a ferramenta de seleção, selecione um dos símbolos que estão no palco e em

seguida, no menu Editar, escolha Editar Selecionados.

O programa entra no modo de edição de símbolos. Observe que apenas o símbolo selecionado aparece na tela, mas está selecionado como um todo.

Após as alterações, para retornar ao modo de edição do filme, bastaria clicar na guia com o nome do filme. Quando não é definido esse nome, o Flash cria a denominação automática para o filme de Cena 1.

2) Como queremos alterar apenas parte da imagem, clique em algum ponto do palco para desfazer a seleção. Você acabou de desfazer qualquer seleção de contorno ou preenchimento. 3) Clique somente uma vez no centro da figura. Somente o preenchimento será selecionado. A linha de contorno, não. Isso aconteceria se você clicasse duas vezes na figura. 4) Pressione a tecla <DELETE> para apagar esse preenchimento. 5) Volte para o modo de edição normal de filme clicando na guia com o nome Cena 1.


23

O símbolo foi modificado, e sua cópia também. Toda cópia desse símbolo que existir no

filme será mudada.


1. Crie alguns desenhos utilizando as próprias ferramentas do Flash e trasforme-as em símbolos. Experimente criar símbolos também com imagens vetorizadas.

2. Após crias os símbolos, arraste várias instâncias (cópias) da biblioteca para o palco. 3. Edite uma das instâncias e observe o que acontece com as outras.


24

ANIMAÇÕES QUADRO A QUADRO

Os recursos de animação são uma das partes mais atraentes do Flash, que se popularizou mundialmente por oferecer esse tipo de efeito para o ambiente Web.

Para se criar a sensação de animação, são necessárias mudanças sucessivas em cada quadro de um filme. No Flash, podemos ter dois tipos de animações: quadro a quadro e animação interpolada. A diferença é que, enquanto é preciso criar as mudanças em cada quadro da animação quadro a quadro, na animação interpolada cria-se o primeiro e o último quadro e determina-se que ele crie quadros intermediários.

No Flash, os quadros da animação que contenham informação gráfica são chamados

quadros-chave. Quando é criado um novo filme, por padrão, o programa cria um único quadro ativo e vazio.

O Flash só permite alterações em quadros-chave ativos. Para identificar os quadros ativos de uma camada, basta localizar aqueles com pequenos marcadores circulares.

Quadros intermediários não têm marcadores, ao contrário de quadros-chaves. Ambos pordem ser parte integrante da animação, mas podem ser retirados ou acrescidos em favor do ritmo ou velocidade pretendidos pelo animador. Vamos aprender agora os passos básicos para uma animação quadro a quadro. Para este exemplo você criará cinco figuras utilizando as ferramentas de edição do Flash. As ilustrações deverão ter uma sequência para conseguirmos cria a impressão de movimento. Após ter criado a seguência, trasforme cada um em símbolo como, por exemplo, peixe1, peixe2, peixe3, etc. No final, a janela Biblioteca terá a lista das figuras. É preciso, nesse momento, habilitar o primeiro quadro da animação.

1) Insira um quadro na posição 1 da camada 1 clicando com o botão direito do mouse sobre ele e escolhendo Inserir Quadro (F5).


25

2) Arraste o seu primeiro símbolo localizado na biblioteca para o palco Observe que após arrastar o primeiro símbolo para o palco, o marcador assinala a presença dele no quadro 1. O primeiro quadro da animação foi posicionado. Para inserir um novo símbolo, você deve criar um espaço para ele também no quadro seguinte. 3) Clique com o botão direito do mouse no quadro 2 da camada 1 e escolha Inserir Quadros-

chave em Branco (F7). A área de trabalho, agora, está totalmente em brando nesse quadro. O próximo passo será ocupa-la com o símbolo seguinte. 4) Clique e arraste o segundo símbolo também para o palco. Tente colocá-lo na mesma

posição do símbolo anterior. O segundo quadro da animação também foi posicionado no palco. Teremos que repetir os passos para todos os outros símbolos. 5) Após cada símbolo ser colocado em um quadro diferente, volte ao quadro 1 clicando sobre

ele e aperte CTRL+ENTER para ver a animação. Para parar a visualização aperte CTRL+W.

Você também pode clicar no cabeçote de reprodução que se encontra sobre os quadros da Linha do Tempo e arrastá-lo para ver as mudanças em cada quadro. 6) Tente arrastar o cabeçote de reprodução. Esse é fundamento de uma animação de uma animação quadro-a-quadro, ou seja, para cada quadro uma imagem diferente para dar noção de movimento. Um detalhe importante: pode acontecer de, durante o processo de montagem, os símbolos ficarem desalinhados, criando animação “tremida”. Para alinhá-los no Flash, tendo uma visão de sombra de todos os símbolos ao mesmo tempo, você pode usar a ferramenta Papel de transparência ( ), que estudaremos com mais detalhes logo a seguir.

ANIMAÇÕES COM INTERPOLAÇÃO

As animações feitas com interpolação são uma forma simples de simular movimentos e mudanças. Além disso, os arquivos finais ficam menores que os feitos com mudanças quadro a quadro.

O comando interpolação calcula os quadros intermediários de um segmento de quadros em que definimos os quadros-chave inicial e final. Por exemplo, para se obter uma forma que se movimente da esquerda para a direita, basta definir a quantidade de quadros para a animação e posicioná-la nos extremos da página.

Em seguida, aplicando Interpolação de movimento nos quadros intermediários, o programa calcula as modificações necessárias.

Observe a figura ao lado. Veja na Linha do Tempo

que a figura se repete em 3 quadros diferentes e com intervalos vazios entre eles. O que fizemos foi repetir a figura em posições diferentes. Veja, também, que o Flash pintou de cinza e acrescentou um ícone retangular no quadro anterior ao próximo Quadro-chave. Isso significa que a informação de um quadro-chave se repetirá até o próximo quadro ativo.


26

Agora será aplicada a interpolação entre os quadros para que o programa acrescente automaticamente as mudanças necessárias. Para se aplicar tal efeito, bastaria selecionar todos os quadros. Para isso, selecione o quadro 1 da camada Bola e segure a tecla SHIFT para clicar no último quadro e selecionar todo o intervalo. Após, clique com o botão direito na seleção, no menu que se abre, escolher Criar Interpolação Movimento.

Ao se aplicar a interpolação no intervalo, o Flash acrescenta uma indicação de formato de

seta na cor lilás.

Pode-se, também, fazer com que um símbolo qualquer percorra um caminho pré-definido e complexo. Esse efeito é possível usando uma trajetória de movimento.

Uma vez definidas as posições inicial e final do

percurso para um determinado símbolo, será preciso criar uma camada exclusiva que irá conter o caminho a ser percorrido. Isso é feito clicando-se com o botão direito na camada que contém o símbolo e escolhendo Adicionar Guia de Movimento.


27

Uma camada denominada Guia é acrescentada sobre a

camada anterior. Ela mostra que a camada inferior está relacionada com ela. É nessa camada que se deve desenhar o caminho a ser percorrido pela imagem.

Esse caminho pode ser qualquer linha desenhada com a ferramenta lápis, como a imagem

abaixo, por exemplo. Só é necessário desenhá-lo em uma única camada, nesse caso, a camada guia.

Sempre lembrando que, para desenhar um caminho a lápis, você deverá clicar na camada

Guia, a seguir no quadro que servirá como ponto de partida da trajetória e, só então, traçar o caminho. É preciso tomar cuidado ao preparar as imagens em relação ao caminho, para que o seu registro coincida com as extremidades da linha desenhada. Usando como exemplo o símbolo do pato do exercício anterior, o palco estaria como o da imagem a seguir:

Uma vez que os símbolos já estão posicionados em relação ao trajeto, é preciso clicar com

o botão direito do mouse sobre o quadro 1 da camada que contém os símbolos e escolher Criar Interpolação Movimento.

Agora, para esconder a linha que foi usada como

caminho, basta clicar no primeiro ponto loco após o nome da camada Guia.


28

A interpolação é um forte aliado para criação de animações. Além de movimentos, a interpolação também faz transformação de formas e cores. Vamos ver um exemplo.

Veja as figuras ao lado. Vamos fazer a

transformação do bule para a xícara. Para isso é preciso que uma figura esteja em um quadro e outra esteja alguns quadros depois.

Neste caso nenhum dos desenhos precisará ser transformado em símbolo, pois vamos

fazer a interpolação das formas. 1) Tente copiar os dois desenhos acima, cada um em um quadro (1 e 10, por exemplo). 2) Após criar as duas formas, selecione o desenho do primeiro quadro com a ferramenta

de seleção. 3) Selecione a opção Forma abrindo o campo Interpol. 4) Clique em qualquer ponto do palco para desfazer a seleção. Note que surgiu uma seta Verde na linha de Tempo indicando o efeito de interpolação do

primeiro quadro para o último. 5) Tecle CTRL+ENTER para ver o resultado. O programa calculou as modificações de forma necessária e as desenhou nos quadros

intermediários. No Flash, você pode ver essa transformação quadro a quadro arrastando o cabeçote de

reprodução do primeiro ao último quadro. É simples fazer uma visualização de vários quadros ao mesmo tempo. Observe os botões

existentes na parte inferior da Linha de Tempo. Eles são ajudantes para as nossas animações. 6) Clique no segundo botão denominado Papel de Transparência ( ). Esse botão exibe vários quadros ao mesmo tempo como se tivéssemos folhas

transparentes uma sobre a outra. 7) Agora clique no último botão denominado Modificar Marcadores da Transparência ( ) e

escolha Transparência para Todos. Isso faz com que todos os quadros sejam postos no palco. Esse recurso é muito útil para

animações quadro-a-quadro. Para sair desse modo de visualização, aperte novamente o botão Papel de transparência.


29

ATIVIDADES PROPOSTAS 1. Crie uma animação simples usando a técnica de animação quadro a quadro. Faça um

pequeno planejamento com o lápis e papel e depois o execute no Flash. Não tente criar nada muito complicado, apenas lembre-se de que a técnica foi feita para se criar mudanças sucessivas.

2. Animações com símbolos estáticos utilizando a técnica de interpolação são mais simples de serem executadas. Use sua criatividade e crie uma.

3. Crie uma animação onde um símbolo qualquer percorre um caminho em espiral. 4. Utilizando a ferramenta Pincel e o efeito de interpolação de forma, crie uma animação

onde uma letra se transforma em outra diferente.


30

CRIANDO BOTOES

Criar botões é uma tarefa simples no Flash. Quando definimos uma imagem como símbolo com o comportamento de botão, o Flash cria automaticamente os 4 quadros necessários para que possamos definir as mudanças que ele terá ao interagir com o cursor.

Vamos executar algumas ações que nos mostrarão os estágios atribuíveis ao botão. O primeiro deles é o estágio normal. 1) Reproduza a imagem ao lado. Basta desenhar a

forma geométrica e depois escrever a frase sobre a forma.

2) Selecione todos os objetos. 3) No menu Inserir, escolha Converter em Símbolo. 4) Na janela que se abre, digite BOTÃO 1 para nomear a figura e mude o

comportamento para Botão. Em seguida, clique em OK. Você acabou de criar um símbolo com o comportamento de botão. Mas agora precisa criar as modificações dos outros quadros para que fique realmente aparecendo com um botão.

5) Clique com o botão direito sobre a figura e, no menu popup que se abre escolha

Editar. Observe na Linha de Tempo os quatro quadros que a compõem. O quadro Normal já contém a imagem que você converteu. Agora vamos criar os outros 3 quadros. O segundo estágio é a forma que indica que o cursor está sobre o botão e costuma ser uma versão do primeiro com uma leve mudança, mas isso não é uma regra. 6) Na Linha de Tempo, clique no quadro referente ao estágio Sobre. 7) Insira um quadro-chave clicando no menu Inserir e escolhendo Quadro-chave (F6). A imagem, que só existia no estado Normal, é copiada para Sobre. Note que foi acrescentado um marcador cheiro ao quadro. 8) Desfaça a seleção da imagem clicando em um ponto qualquer do palco. 9) Clique na ferramenta Balde de Tinta. 10) Clique no botão Cor de Preenchimento na área de Cores e, a seguir selecione uma

cor diferente da que você pintou no 1° passo do exercício. 11) Clique sobre o botão para colori-lo. 12) Clique novamente na ferramenta de seleção Seta. 13) Clique no menu Inserir e escolha a opção Quadro-chave. 14) Desfaça a seleção da imagem clicando em um ponto qualquer do palco. 15) Selecione a ferramenta Tinteiro. 16) No painel de propriedades do Tinteiro, dê um clique no campo Altura do Traço e

digite 2.


31

17) Clique na figura para pintá-la. É assim que o botão deverá estar no terceiro estágio, quando for pressionado: O último estágio indica qual a área sensível ao clique do mouse. Vamos atribuir essa propriedade ao botão recém-criado. 18) Clique no quadro correspondente à Área. 19) No menu Inserir, insira um Quadro-chave (F6). 20) Desfaça a seleção clicando em um ponto livre do palco. Vamos deixar a imagem desse estágio com uma única cor. 21) Selecione toda a figura e determine a figura com a cor Preta. Como estamos apenas definindo a área sensível do botão, o texto não é necessário. 21) Clique na ferramenta de seleção. 22) Dê um clique sobre o texto da figura e pressione a tecla <DELETE> para apaga-la. Ele deverá estar como a imagem ao lado, somente a silhueta. 23) O botão agora está completo. Clique em cada título dos quadros da Linha do Tempo

para ver as modificações. 24) Pressione CTRL+ENTER para visualizar. O comportamento do botão já está definido, mas ainda falta definir suas atribuições, ou seja, que tipo de ação é executada quando se passa o cursor ou se clica sobre o botão. 25) Retorne a edição pressionando CTRL+W. 26) Clique no menu Janela e escolha a opção Biblioteca (F11). 27) Dentro da biblioteca, clique no item BOTÃO 1. Observe que a biblioteca incorporou o símbolo recém-criado.


32

28) Salve o arquivo e em seguida abra um novo. Observe que o palco está novamente limpo, mas a biblioteca continua exibindo o símbolo criado no arquivo anterior. Isso significa que você poderá utilizá-lo neste novo arquivo. 29) Arraste o botão par ao palco. A cópia que você acabou de criar recebe, no Flash, o nome de Instância. 30) Clique no quadro 10 da Camada 1. 31) Clique no menu Inserir e insira um Quadro-chave em Branco. 32) Vamos inserir uma frase nesse quadro. Clique na ferramenta de texto. 33) Insira o seguinte texto na cor preta: Estou dominando o Flash! 34) Clique no quadro 20 e insira um quadro (F5) para repetirmos a frase do quadro 10 ao

20. 35) Retorne ao quadro 1 e no menu Ações clique em Controle do filme para abrir sua

lista de comandos. 36) Dê um clique duplo no comando Goto. Observe que o programa escreve todo o código, mas assume o quadro 1 como padrão. 37) Agora, no campo quadro, que já está selecionado, digite o número 10, que é o

número do quadro onde escrevemos Estou dominando o Flash! Você acabou de determinar que, quando o botão for clicado, o filme deverá ir para o quadro 10, ou seja, mostrar a frase que escrevemos. Precisamos agora determinar ao programa que fique parado no quadro 1 esperando que tomemos alguma decisão. Caso contrário, a animação correria automaticamente até o último quadro. 38) Clique com o botão direito no quadro 1 da camada 1 e escolha Ações para abrir o

menu ações. 39) No painel aberto dê um clique duplo em Stop e, em seguida, feche o painel. Com esse simples comando, o cabeçote de leitura ficará parado nesse quadro. 40) Clique na ferramenta de seleção e, em seguida, em um ponto qualquer do palco.


33

Observe que um símbolo ‘a’ foi acrescentado ao quadro. 41) No menu Controlar, escolha Testar Filme (CTRL+ENTER) para executá-lo. Veja que o filme fica parado no quadro 1 esperando uma ação. Clica agora no botão que foi criado e veja o resultado. Ao clicarmos no botão, o comando que inserimos nele faz com que o cabeçote pule do

quadro 1 para o 10. Como no quadro 10 não colocamos nenhuma ação, ele prossegue até o quadro 20 e retorna ao quadro 1, onde fica aguardando novamente um comando.

Esse percurso do quadro 10 ao 20 é que determina o tempo de amostragem do texto na tela. Se o percurso fosse estendido até o quadro 40, a frase demoraria o dobro do tempo na tela.

Não se esqueça de salvar o seu trabalho. Vamos precisar dele no próximo capítulo. CRIANDO UM CURSOR Que tal criar um cursos personalizado para seus arquivos Flash? Esse processo é bastante simples de executar nessa atual versão. Basicamente você precisa criar um gráfico que será o cursor e aplicar umas poucas ações nele. O resultado final enriquece bastante seu trabalho. Vamos utilizar um gráfico que é criado simplesmente com uma circunferência e algumas linhas. Reproduza a imagem ao lado ou, se preferir, crie uma diferente. 1) Após criar a imagem, clique no menu Editar e, a seguir, em Selecionar Tudo. 2) O próximo passo é transformá-la em símbolo. Vamos utilizar uma tecla de atalho.

Pressione F8. 3) Na janela que aparece, digite CURSOR no campo Nome. Não vamos alterar o

comportamento desse símbolo, ele deve ficar em Clipe de Filme. Clique no botão OK.

4) No painel de Propriedades, aparece a

opções de Instância, clique no campo Nome da Instância, escreve CURSOR e tecle ENTER.

A partir desse momento, vamos inserir algumas ações que farão todo o trabalho de

transformação do símbolo em cursor. Começaremos criando uma nova camada. 5) No canto inferir da Linha de Tempo, clique no ícone de página com um sinal positivo

( ). 6) Dê um clique duplo na nova camada para renomeá-la. Atenção, ela sempre estará

acima da camada que estava selecionada anteriormente. 7) Digite Ações. Essa camada foi criada para colocarmos somente ações. 8) Clique com o botão direito do mouse no primeiro quadro da camada Ações e escolha

Ações. O painel Ações é mostrado mais um vez. 9) Clique na parte inferior da barra de rolagem e clique no item Objetos, em seguida em

Filme, Mouse, Métodos e escolha Hide dando um clique duplo.


34

Este comando informa ao Flash para esconder o cursor normal. Vamos agora colocar o nosso cursor personalizado.

10) Feche as categorias de Ações clicando sobre elas. 11) Encontre startDrag em Ações, Controle do Clipe de Filme. Dê um clique duplo sobre

esta opção. 12) Precisamos fazer os ajustes necessários para o comando startDrag. Escreve a linha

de comando _root.CURSOR no campo Destino e marque Bloquear mouse no centro.

Pronto! Não precisamos fazer mais nada. Feche a janela de Ações. 13) Aperte CTRL+ENTER para testar.

ATIVIDADES PROPOSTAS 1. Importe algumas imagens de frutas e coloque cada uma em um quadro diferente. Para

cada fruta, crie também um botão com o nome dela. Faça com que cada botão mude para o quadro correspondente a fruta especificada. Lembre-se de repetir todos os botões em todos os quadros com imagens para que se tenha acesso as outras frutas. Dica: Use a ação Stop para que o cabeçote de reprodução fique parado no quadro especificado pelos botões.

2. Gere uma versão swf (shockwave) desse trabalho. 3. Crie um cursor com o seu nome. Não se esqueça de incluir uma pequena seta nele como

ponteiro. 4. Salve seus arquivos em sua pasta de trabalho pessoal.


35

ADICIONANDO SOM

O áudio vem se tornando um recurso imprescindível em um projeto para internet. Um site com áudio é muito mais atrativo. Uma animação qualquer com sons é mais divertida de se assistir. Porém, devido às baixas taxas de transferência da internet, o resultado final pode ficar muito baixo do esperado em termos de performance.

É preciso estudar a colocação de sons com muito cuidado para que o projeto não fique pesado e de difícil execução.

Vamos adicionar som ao botão que foi criado no capítulo anterior. 1) Abra o arquivo que você criou no capítulo anterior. O botão aparecerá no palco. 2) No painel de Propriedades você tem as opções de Som. O Flash trabalha com dois tios de sons: fluxo e de eventos. Fluxo de som são tocados à

medida que uma parte é lida e é suficiente para tocar. Sons de eventos, por outro lado, precisamos ser totalmente lidos antes de serem executados.

3) Clique com o botão direito do mouse sobre o botão que está no palco e escolha Editar.

Será preciso criar uma nova camada que será exclusiva do som, como um canal separado das imagens.

4) No menu Inserir, escolha Camada. Observe que a nova camada, intitulada Camada 2, foi criada acima da camada anterior. 5) Vamos renomear a camada que foi criada. Na Linha de Tempo, clique com o botão

direito sobre Camada 2 e escolha Propriedades. 6) Digite SOM no campo Nome e clique em OK. Veja que, ao clicar no nome da camada, todos os quadros foram selecionados. Será

preciso selecionar apenas um para a próxima tarefa. 7) Clique no quadro relativo ao estado Para baixo da mesma camada que foi

renomeada para SOM.


36

8) Clique com o botão direito sobre o quadro selecionado e pressione F8 para acrescentar um quadro-chave editável em branco.

Vamos escolher um som para utilizarmos. O Flash já vem com alguns sons disponíveis. 9) Abra o menu Janela, posicione o cursor em Bibliotecas Comuns e selecione o

comando Sons. Uma biblioteca de sons é aberta. 10) Clique em Brick Drops na lista da biblioteca. Um mini controlador aprece na janela da biblioteca de

sons junto com o gráfico correspondente. 11) Clique no botão Play para ouvir o som. 12) Clique e arraste o com para qualquer ponto do palco. Observe que um gráfico similar ao da biblioteca de sons foi adicionado na camada SOM da

Linha de Tempo. Esse som só será ouvido no estado Para baixo do botão. 13) Volte ao modo de edição normal clicando guia Cena 1 e, em seguida, pressione

CTRL+ENTER para ver o resultado. 14) Salve o arquivo e feche a biblioteca de sons. 15) Feche o arquivo.


37

ATIVIDADES PROPOSTAS 1. O Flash dispõe de uma pequena biblioteca de botões acessando o menu

Janela/Bibliotecas comuns/Botões. Escolha dois ou três botões e arraste-os para o palco. 2. Insira um som diferente para cada botão. Esse som deve ser ouvido ao se clicar sobre

cada um. Utilize a biblioteca pronta de sons de que o Flash dispõe. 3. Abra o arquivo com as imagens de frutas que você criou na lição anterior e insira alguns

sons aos botões. Lembre-se de salvá-lo com alterações.


38

BANNERS

Trabalhar com um único objeto em uma só camada é uma tarefa simples. Mas o que ocorre quando precisamos fazer animações mais complicadas? Muitos objetos podem se movimentar, girar e trocar de cor ao mesmo tempo, distribuídos em muitas camadas.

Observe a Linha de Tempo abaixo. Ela representa um pouco do que falamos. Veja quantos marcadores existem na Camada 1. Esta poderia ser a Linha de Tempo de

um banner feito em Flash. Banner são imagens incluídas em sites, geralmente animadas, com anúncios de outros

sites, produtos, ofertas ou qualquer outro tipo de publicidade. Uma de suas características é que ela é também um link, ou seja, um atalho para seu site

de origem. Os banner são uma excelente forma de chamar a atenção de internautas, e tornaram-se presença obrigatória em qualquer site de bom tamanho. AJUSTANDO OS ATRIBUTOS DE UM FILME

Quando o Flash é aberto, cria automaticamente um filme padrão. Nem sempre o padrão

imposto é o desejado. Por isso é possível alterá-lo e, sendo o caso, fazer com que essas alterações se torne um padrão.

Para um melhor entendimento desses novos conceitos, vamos exercitar criando um banner.

1) Abra o Flash ou simplesmente crie um novo filme (CTRL+N). 2) No menu Modificar, escolha Documento... (CTRL+J). O campo Taxa de Quadros diz respeito à velocidade de amostragem do filme, sendo

ajustável em quadros por segundo. Dimensões indica a largura e a altura em pixel, respectivamente.

3) Dê um clique duplo no campo Largura e digite 468. 4) Agora, no campo Altura, dê um clique duplo e digite 60. Os botões do campo Corresponder personalizam a área de trabalho. O botão Impressora

dimensiona a área de trabalho com o mesmo tamanho da área de impressão e o botão Conteúdo, com o tamanho suficiente para conter todos os objetos que fazem parte do filme.


39

5) Mude a cor de fundo. Clique sobre o botão correspondente ( ). 6) Na paleta que se abre, escolha a cor amarela da primeira fileira. Essa será a cor do

banner. O campo Unidades de Régua determina em qual unidade de medida é possível trabalhar. Como definição para unidade de medida a ser utilizada no filme, permaneceremos com a opção Pixel. A opção Salvar Padrão permite fazer das modificações o padrão para os próximos filmes. 7) Clique em OK para fechar essa janela e aplicar as mudanças feitas para esse filme.


40


1. Crie um novo filme com os seguintes atributos: - 300 x 200 pixels; - cor de fundo diferente de branco; - 5 qps.

2. Faça com que a frase ”clique aqui para entrar”, apareça descendo da parte superior ao centro do palco. Utilize quantos quadros achar necessário.

3. Ao atingir o centro, a frase deve ir diminuindo o seu tamanho até desaparecer completamente.

4. Salve o arquivo em sua pasta pessoal.


41

EXPORTANDO IMAGENS E FILMES

Após criar gráficos e filmes no Flash, é possível exportá-los em diversas formas para que possam ser utilizados, por exemplo, em outros programas. Além de suas próprias extensões .fla para arquivos não protegidos e .swf para arquivos prontos para serem rodados na Internet, é possível exportar em outros formatos de imagem e filmes.

Gif animado, BMP, JPG, AI, EPS e DXF para imagens e AVI e MOV para filmes, são algumas das extensões em que o Flash trabalha.

Vamos salvar o banner criado no capítulo anterior como GIF animado. Para isso, é preciso usar o comando Exportar Filme.

1) Abra o arquivo BANNER e, seguida, escolha Exportar Filme no menu Arquivo. 2) Digite BANNER para o nome do arquivo. Escolha a opção GIF Animado no campo

Salvar como o tipo e clique em Salvar. 3) A janela Exportar GIF é aberta para algumas definições que você queira mudar. Deixe-a como está. Clique em OK. O GIF foi criado e está salvo na mesma pasta que contém o banner.

CRIANDO UM PROJETOR

Quando se concluir a montagem de um filme, é preciso salva-lo em uma extensão para que possa ser visto em diversos meios. O Flash é capaz de criar um projetor próprio que pode ser visto em qualquer plataforma para a qual ele foi gerado, sem a necessidade de ter sito instalado o plugin do Flash player.

Para colocar uma animação em uma página na internet, bastaria exportá-la com a extensão SWF. A única limitação é que o navegador que for usado deverá, obrigatoriamente, ter instalado o plug-in Flash player distribuído gratuitamente no site da Macromedia (www.macromedia.com).

Mas, como já definimos antes, vamos gerar um projetor. 1) No menu Arquivo, escolha Configurações de Publicação. 2) Na janela que se abre desmarque as caixas marcadas clicando em Flash e escolha

somente a caixa Windows Projector.

http://www.macromedia.com


42

3) Para escolher um nome para o projetor, clique na caixa Usar nomes padrão para

desmarcá-la. 4) Altere o nome do projetor para PROJETOR.EXE e clique em Publicar. O projetor foi criado no mesmo diretório do arquivo Flash. 5) Clique em OK.

PUBLICANDO O ARQUIVO EM HTML

Para publicarmos um arquivo para a Web, o Flash dispõe na opção Publicar a criação do código necessário para a interpretação nos navegadores existentes.

Antes de executar esse comando, é preciso ajustar algumas configurações necessárias, como qualidade de imagem, nome e tipo de arquivo.

Quando recebe a instrução de publicar um filme, o programa gera, automaticamente, um arquivo Shockwave e o código relativo em HTML necessário para rodar em um browser. Para publicar o arquivo na internet, a ação é semelhante a que utilizamos para criar o projetor.

1) Escolha Configurações de Publicação no menu Arquivo novamente. 2) Deixe marcada apenas a opção HTML. Observe que a opção Flash é automaticamente marcada quando você escolhe HTML, pois

os dois trabalham em conjunto. 3) No campo Flash, altere o nome para Banner.html 4) Clique na guia HTML. Veja as configurações que o programa apresenta. Entre outras, é possível ajustar as

características de reprodução e alinhamento do Flash. Observe em detalhes as demais configurações.


43


1. Exporte algumas cópias de uma animação feita por você no formato GIF animado, mas altere a quantidade de cores para cada cópia e veja o resultado.

2. Publique também uma cópia para internet. 3. Reveja os exercícios dos capítulos anteriores e publique-os também para serem vistos

em um navegador de páginas da internet.


44

ACTIONSCRIPT

O ActionScript é uma LPOO (Linguagem de Programação Orientada a Objetos), que a partir da quinta versão do Flash, tornou sua sintaxe bastante próxima a do JavaScript.

O ActionScript pode ser usado para controlar objetos em filmes do Flash a fim de criar elementos para a navegação e interatividade, possibilitando a criação de filmes e aplicativos da Web com grande interatividade.

A seguir você verá alguns exemplos das mais básicas ações disponíveis no Flash, com elas você entenderá como é o funcionamento da linguagem. CONTROLADORES DE FILME

Controladores de filme são ações que podemos definir para comandar um filme. Abaixo veremos algumas propriedades dessas ações:

GOTO: Serve para ir para um determinado local do filme e reproduzi-lo. Exemplo: gotoAndPlay(quadro); Com essa ação você também pode pular para um determinado ponto do filme e parar, assim o filme fica parado em um determinado quadro aguardando uma próxima ação. Exemplo: gotoAndStop(quadro);

PLAY: Faz o filme reproduzir caso uma ação anterior o fez parar.

Exemplo: play();

STOP: Para o filme.

Exemplo: stop();

STOPALLSOUNDS: Apenas para todos os sons que estiverem sendo reproduzidos.

Exemplo: stopAllSounds(); NAVEGADORES DE REDE

As ações que controlam o navegador da Web e a rede:

FSCOMMAND: Permite que o filme Flash se comunique com o Flash Player ou com o programa que hospeda o Flash Player, como um navegador da Web.

Exemplo: on (release){ fscommand("fullscreen", true); } Nesse exemplo a ação fscommand determina que o Flash Player ajuste o filme para toda a tela do monitor quando o botão for liberado.


45

GETURL: Carrega um documento de uma URL específica em uma janela ou passa variáveis para outro aplicativo em uma URL definida. Para testar esta ação, certifique-se de que o arquivo a ser carregado esteja no local especificado. Para usar uma URL externa (por exemplo, http://www.apostilando.com), você precisa de uma conexão internet. Parâmetros: URL: de onde o documento será obtido. JANELA: Um parâmetro opcional que especifica a janela ou quadro HTML em que o documento deve ser carregado. Você pode inserir o nome de uma janela específica ou escolher um dos seguintes nomes de destino reservados: • _self especifica o quadro atual na janela atual. • _blank especifica uma nova janela. • _parent especifica a origem do quadro atual.

• _top especifica o quadro de nível superior na janela atual. Exemplo: getURL("http://www.apostilando.com", "_blank"); CONTROLE DO CLIPE DE FILME

STARTDRAG: Torna o clipe de filme de destino arrastável enquanto o filme está sendo exibido. Somente um clipe de filme pode ser arrastado de cada vez. Quando uma operação startDrag é executada, o clipe de filme permanece arrastável até que seja explicitamente encerrado por uma ação stopDrag ou até que uma ação startDrag para outro clipe de filme seja chamada.

Exemplo: on (press) {

startDrag(""); }

STOPDRAG: Encerra a operação de arraste em andamento.

Exemplo: on (release) { stopDrag(); }

http://www.apostilando.com

http://www.apostilando.com

apostila de flash mx - blog da prof andrea garcia · macromedia® flash™ mx 3 introduÇÃo esta...

Documents