Prática 2 Características do Flash 1. Objetivos Se familiarizar com os Painéis, Frames e Timelines. Desenvolver uma animação simples. 2. Recursos Necessários Computador com o programa Macromedia Flash ou superior e QuickTime Player. 3. Conceitos Gerais e Procedimentos 3.1. Vetores e Bitmaps Vetores e bitmaps são dois tipos distintos de gráficos. O flash trabalha basicamente com formas vetoriais mas, aceita também os bitmaps que podem ser criados em qualquer programa gráfico e importados para o Flash. Os arquivos vetoriais são constituídos na verdade por fórmula matemática. Este é o segredo dos arquivos do flash serem pequenos, pois guardar estas fórmulas requer muito menos informação do que guardar pixels das imagens Bitmap. As formas vetoriais são compostas por linhas, vértices e preenchimentos. 3.2. Grid, Guide e Rulers (Gride, Guias e Régua) O Flash possui um conjunto importante de ferramentas que o auxiliarão de diversas maneiras. Gride: é um aramado estático que fica por debaixo de todo o desenho. Com ele podemos encaixar mais facilmente os objetos. Guias: São linhas móveis verticais e horizontais que podem ser colocadas em qualquer parte da área de trabalho. Régua: São estruturas dispostas ao topo e no canto esquerdo do documento e que facilitam a medição de tamanhos e distâncias. 1
3.3. Painéis Os painéis servem para facilitar o trabalho. Já estudamos o Inspetor de Propriedades e o Painel Actions. Else contem as opções disponíveis para as ferramentas e os objetos. O Inspetor de Propriedades é um painel especial, que muda conforme o objeto ou ferramenta que está em ação. Ele e o painel Actions, por padrão, ficam na parte de baixo da tela. Outros painéis, como o Color Mixer e o Color Swatches, costumam ficar à direita da tela, em cascata. Se desejar tirar um painel, basta clicar no ícone no canto superior direito do painel e, no menu que aparecer, clicar em Close Panel. 3.3.1. Atividade 1 Trabalhando com cores O Flash nos permite manipular cores de várias maneiras. As cores são utilizadas no preenchimento e nos contornos. Podemos utilizar não só cores sólidas mas, gradientes (degrades) de vários tipos, texturas e bitmaps. O Painel Misturador de cores nos permite criar cores e degradês para aplicar em contornos e preenchimentos. Podemos também alterar as propriedades de preenchimentos de bitmaps. a) Abra um novo arquivo Flash. 2
b) Desenhe um quadrado de contorno preto e preenchimento azul, um círculo de contorno preto e preenchimento verde e um triângulo de contorno preto e preenchimento vermelho. c) Com a ferramenta seta, selecione o preenchimento do quadrado e, no Painel Misturador, aumente a claridade do tom de azul até obter um azul claro. d) Com a ferramenta seta, selecione o preenchimento do círculo e em seguida, no Painel Misturador, clique no balde (1). Em Type (2), selecione Radial. Clique em (3) para selecionar a cor verde para fazer um degradê radial no círculo. e) Com a ferramenta seta, selecione o preenchimento do triângulo e em seguida, no Painel Misturador, clique no balde (1). Em Type (2), selecione Linear. Clique em (3) para selecionar a cor vermelha de um lado e outro branco, formando um degradê. f) Salve o arquivo como p2_ativ1_seunome.fla 3.4. Frames e Keyframes (Quadros e Quadros-chave) Animações, como as que vemos em desenhos animados, nada mais são do que uma ilusão de óptica. Para causar a impressão de movimento, são mostradas várias imagens em seqüência, em alta velocidade, de modo que o olho humano não perceba a transição entre elas. As animações no Flash são imagens em quadros sucessivos e depois faz com que eles rodem a determinada velocidade. Para isto, você pode desenhar as imagens ou usar figuras prontas. Os frames e os keyframes são os elementos responsáveis por criar as modificações e animações nas cenas. Os keyframes guardam as alterações a serem feitas em um determinado quadro. Podemos inserir interpolações entre os keyframes, desta maneira o Flash se encarrega de fazer a transição gradual da animação de um quadro para outro criando movimentos fluidos. 3
3.5. Timeline (Linha de Tempo) e Layers (Camadas) A Linha de Tempo é utilizada para organizar os filmes Flash. Os dois elementos principais do Timeline são as camadas e os quadros (frames). Podemos separar cada desenho em uma camada organizando-os e controlando a sobreposição. Uma das inovações é a possibilidade de agrupar camadas em pastas facilitando ainda mais a organização das animações. As camadas são como folhas de papel transparente colocadas umas sobre as outras. Através de uma camada, você pode ver o que está por baixo. No Flash, a camada que aparece em primeiro lugar na lista corresponde à folha que está por cima de todas as outras. Com isto podemos sobrepor vários elementos e desenhos facilitando assim a criação de apresentações e animações elaboradas. Para inserir uma nova camada vá ao menu Insert> Layer. Uma camada nova irá aparecer na sua timeline. Renomeie-a digitando um nome no campo que fica em destaque. Se você quiser excluir uma camada, bata clicar com o botão direito na camada a ser removida e escolher a opção Delete Layer. Se desejar mudar a ordem das camadas, basta clicar em uma camada na listagem e arrastá-la para a posição desejada. Você também pode travar camadas para impedir sua edição. Assim, você pode lidar mais facilmente com as outras camadas sem mexer em uma que já está pronta. Quando o palco está cheio, esse recurso é particularmente útil. Para travar uma camada, clique na bolinha correspondente à coluna marcado por um ícone cadeado. 4
3.5.1. Atividade 2 - Animação simples a) No arquivo p2_ativ2_seunome.fla, desenhe um círculo no primeiro frame da sua linha do tempo. b) Clique com o botão direito no frame seguinte e selecione a opção Insert Keyframe c) Repita a operação até o frame 5 d) Em cada frame, mova o círculo um pouco para a direita. Dica: quando for mover o círculo, mantenha pressionada a tecla Shift. Assim, a movimentação vai acontecer em linha reta. e) Vá ao menu Control> Test Movie, ou pressione Ctrl+Enter, para testar a animação f) Se você quiser, você pode alterar a velocidade da animação. Por padrão, a taxa é de 12 frames por segundo. Basta clicar em uma área livre do seu palco de edição que o painel de propriedades irá exibir as propriedades da animação. Nela, você pode digitar uma outra taxa de fps. Dica: quanto mais alta a taxa, mais pesado ficará o arquivo. Vale dizer que para que o olho humano entenda a animação como um movimento fluido, é recomendável 30fps. g) Salve o arquivo. 3.5.2. Atividade 3 - Importando Artes O Flash suporta a importação de vários formatos de arquivos vetoriais, bitmaps, vídeos e sons. Você pode importar trabalhos feitos no Fireworks preservando as propriedades destes arquivos. Com o Quicktime ou o DirectX você poderá importar vídeos do tipo AVI, MPEG e MOV. Em outras aulas veremos como importar e trabalhar com arquivos de áudio. Veja a seguir a lista de arquivos suportados pelo Flash: Tipo de Arquivo Adobe Ilustrator AutoCad DXF Bitmap Enhanced Windows Metafile FreeHand FutureSplash Player Gif e gif animado Jpeg Pict Png Flash Player Windows Metafile Extensão.eps,.ai.dxf.bmp.emf.fh7,.fh8,.fh9,.fh10.spl.gif.jpg.pct,.pic.png.swf.wmf Com Quicktime instalado: 5
MacPaint Photoshop Pict Imagem QuickTime Imagem Silico Graphics TGA Tiff.pntg.psd.pct, pic.qtif.sgi.tga.tif a) Inicie um arquivo chamdo p2_ativ3_seunome.fla, vá em File> Import> Import to Library (Importar para Biblioteca). b) Todos os símbolos, imagens, sons, vídeos e gráficos utilizados no Flash são armazenados em uma biblioteca. Pelo painel Biblioteca podemos organizar e alterar as propriedades destes elementos. As bibliotecas podem ser compartilhadas com outros arquivos.fla. Você poderá também criar bibliotecas permanentes de maneira que o Flash as exibirão sempre que for iniciado. Se sua janela de biblioteca ainda não estiver aberta, vá em Window> Library. c) Escolha o arquivo cascao.eps dentro do diretório aula2. Na janela popup que aparece deixe marcado os valores padrão. d) Crie uma nova camada chamada cascao-fundo. Clique no frame vazio e arraste e solte a figura importada para o palco. e) Vamos agora transformar esta figura bitmap em vetorial. No menu, vá em Modify> Bitmap> Trace Bitmap. 6
Onde: Color threshold é o valor inicial que pode variar de 1 a 500. Quanto mais você aumenta este valor, mais você diminui o número de cores. Minimum area" pode variar de 1 a 1000 para estabelecer o número de píxels ao redor que devem ser considerados quando o Flash determina a cor para o píxel. Quando dois pixels são comparados, se a diferença na cor RGB é menor que o valor inicial da cor, os dois pixels são considerados da mesma cor. Curve fit mostra opções para determinar quão suave os contornos são desenhados. Corner Threshold, mostra opções para determinar quando os cantos são angulosos ou suaves. Para criar um gráfico vetorial que se pareça mais com o bitmap original, entre com os seguintes valores: Color Threshold: 10 Minimum Area: 1 pixel Curve Fit: Pixels Corner Threshold: Many Corners f) Se você ficou satisfeito com a transformação, salve seu arquivo e trave esta camada. g) Importe para a biblioteca o arquivo cascao.tif que está dentro do diretório aula2 h) Crie uma camada chamada cascao-linhas. Nela, arraste e solte este arquivo importado. i) Transforme esta imagem em um gráfico vetorial. j) Com a seta, selecione as áreas em branco e apague-as. k) Sobreponha os contornos ao fundo. l) Salve o arquivo. 3.6. Atividade 4 Traçando sobre uma forma A camada guia, ou guide layer, serve para proporcionar maior controle ao projeto. Nela, você pode traçar guias para ajudar no desenho das camadas normais. O conteúdo dela não aparece no resultado final. No Flash, a camada guia aparece com um ícone diferente. a) No arquivo p2_ativ4_seunome.fla, importe para a biblioteca o arquivo pimpao.gif dentro do diretório aula2 7
b) Crie uma camada chamada traço e arraste o arquivo pimpao.gif para o palco. Você vai fazer um desenho a partir dessa foto um recurso muito usado por designers. c) Dê um clique duplo no quadrado colorido que aparece à direita e, no menu que aparece, marque a opção Guide. d) Crie uma nova camada chamada desenho para desenhar os traços sobre a imagem da Mônica. e) Na caixa de ferramentas selecione a ferramenta lápis e nas propriedades da ferramenta escolha a cor azul para destacar do fundo e selecione o modo Smooth (suave). Comece a contornar a imagem. f) De vez em quando pare e veja como o desenho está ficando. Para isto, oculte a camada da figura clicando no ícone do olho no lado direito ao nome da camada. Ao fazer isto, aproveite para fazer alguns ajustes no desenho. g) Com a ferramenta seta selecione regiões que precisam ser suavizadas e clique no símbolo de suavização. Se quiser, com a seta, estique as linhas para onde desejar. Quando estiver satisfeito com os contornos, pinte a figura usando a ferramenta Balde. h) Salve o arquivo. Atenção: faça uma cópia de todos os arquivos desta aula para no diretório determinado pelo professor para correção. 8