Download - Flash material

Transcript

Formação flash Mx Emanuel Cruz [email protected]

- 1 -

Introdução

m 1997, Web Designers conheceram o que podemos chamar de "Canivete Suíço" para autoria

"Canivete Suíço" tinha o nome de Future Splash, e foi inventado pela Future Wave

plugin, que era o grande entrave para a criação de sites em Flash, já está mais popular que o

canivete suíço

om a versão 4, o Flash tornou-se um programa de autoria multimédia completo e, apesar de ser

rabalhar com sons e figuras

Flash trabalha com imagens e animações vectoriais, onde equações matemáticas definem o

lém de ágil e compacto, o programa também é versátil: tem a capacidade de importar uma série

xtensão Programa compatível Plataforma

I .EPS Adobe Illustrator 6.0 ou superior Win, Mac

Mac

Emultimédia na Web. Com uma interface simples, fácil de aprender e incrivelmente poderosa, uma única ferramenta permite criar portfólios digitais, animações, páginas Web com diagramas perfeitos, apresentações, mini webstores, chats, formulários, ilustrações, entre outros. OTechnologies, uma empresa comprada pela Macromedia no início de 1997. Após a compra, a Macromedia adicionou ao Splash vários recurso multimédia para trabalhar com bitmaps, áudio sincronizado, botões interactivos, e muito mais. O novo programa foi baptizado de Flash. Hoje na sua versão MX (2004), o Flash é uma ferramenta única. Opróprio Java. E já faz parte do Explorer e do Netscape. O Coptimizado para Web, também serviu e para a criar apresentações multimédia stand alone, ilustrações para diversos usos. Actualmente, é possível construir sites 100% em Flash, minimizando a necessidade de HTML, JavaScript e até mesmo CGIs complexos nos servidores. Os designers habituados a trabalhar com o Photoshop, ou outros editores gráficos, estão a meio caminho de aprender a usar o Flash. Agora que conceitos como layers (Camadas) e overlays (Objetos) já estão bem assimilados, só resta animar a criação. Toda animação, ou apresentação, é composta por uma série de quadros ou slides que se sucedem. Estes quadros, ou frames, quando substituídos a uma velocidade constante - 7 a 12 quadros (frames) por segundo, por exemplo - dão a impressão de movimento, ou seja: animação. Pronto. Bastam alguns efeitos sonoros e temos uma apresentação multimédia completa. Por outro lado, se quisermos a simples substituição de quadros, como numa apresentação de slides, também podemos criar com o Flash. Aliás, com ele pode-se criar trabalhos com ambos, pois o Flash permite total controlo sobre as frames. T Odesenho, a cor e a forma de preenchimento. Desenhos vectoriais podem ser aumentados ou reduzidos sem nenhuma perda de qualidade. E ainda são infinitamente menores do que bitmaps. Ade formatos gráficos estáticos e animados como os indicados. E .A.GIF GIF 89a Win, Mac .BMP Windows Bitmap Win .DXF Autodesk DXF Win, .EMF Enhanced Metafile Win

Emanuel cruz Formação 2005 copyright 2

.JPG JPEG Win, Mac

h Mac

Mac

e os arquivos de imagem estiverem numerados sequencialmente, o Flash permite que os importe

agens importadas podem ser “vectorizadas” automaticamente ou desmembradas por cor,

Flash também importa arquivos de som nos formatos. WAV (Windows) e. AIFF (Macintosh), e

trodução

epois de termos visto o que é o Macromedia Flash, vamos conhecer os conceitos de frames e

esenhar

al como programas de ilustração, desenhar no Flash é bem simples: nele encontra todas as

a hora de pintar, alguns resultados interessantes podem ser obtidos com as ferramentas

pintura pode ser feita tanto com cores sólidas ou gradientes, ou até mesmo com bitmaps, sendo

riar interactividade

om o Flash é possível criar botões interactivos, que parecem reagir à presença do cursor do rato,

resentar várias animações e emitir

.PICT Programas de desenho Macintosh Mac

.SWF Animação Shockwave Flas Win,

.WMF Windows Metafile Win

.PNG Progressive Network Graphics Win, Sordenadamente, colocando cada imagem importada num frame diferente, gerando automaticamente uma animação. Impermitindo editá-las, criar efeitos especiais como colorização e transparências, e usar o Bitmap como "tinta" para preencher figuras. Tudo isto de forma muito simples e interactiva, usando o próprio menu. Opermite fade-in, fade-out, troca de canais e outros efeitos, sem contar que podemos usar compressão MP3. Vale utilizar "partes" de um som como efeito especial, tudo isto editado facilmente no próprio programa. In Dlayers do programa e como é que ele funciona na produção de uma animação. D Tferramentas básicas de desenho e pintura. É possível configurar o nível de assistência no Flash, optimizando o reconhecimento de linhas e formas, a suavidade das curvas, e a intensidade de conexão de linhas. Nconfiguráveis para vários preenchimentos: dentro, fora, por trás, ou somente nas áreas seleccionadas dos objectos. A nova paleta de cores do Flash ficou altamente completa, e é possível, por exemplo, extrair as cores de uma imagem GIF qualquer, um tesouro para designers exigentes. Aque nestes dois últimos casos há a possibilidade de editar a iluminação, afastando, deslocando ou aproximando o foco de luz. C Ccoisa que antes precisava ser desenvolvida com Applets Java. Os botões criados com o Flash podem mudar de aparência, apsom quando o rato passa sobre este ou quando clicamos nele.

Emanuel cruz Formação 2005 copyright 3

A acção do botão, ou seja, o que vai acontecer quando pressionado, é definida na hora de colocá-lo

acções combinadas. No Flash

a mesma forma que as acções nos botões, o programa permite definir acções para as frames.

om os recursos de manipulação de movie clips, podemos deslocar, duplicar, transformar e até

ditar

Flash tem alguns recursos básicos dos programas de edição, todos bastante familiares para quem

podemos travar ("Lock") desde objectos até layers inteiros.

aída do seu trabalho

té na hora de editar o trabalho o Flash mostra versatilidade. Os trabalhos criados no Flash podem

presentar o trabalho ao cliente ficou bastante fácil com o Flash: pode-se imprimir as frames como

hockwave Flash

Shockwave Flash, gerado pelo Flash, é extremamente compacto. O recurso de "streaming"

ara se ter uma idéia de como o Shockwave Flash é compacto, uma GIF animada com 10 frames

omo a aplicação mais difundida do Flash tem sido a criação de Shockwave (botões, banners,

no desenho. A ação pode ser dos tipos Play, Stop, Stop all sounds, Goto frame, Next e Previous frame, Get URL..., além de outraspodemos definir acções para todos os estados, ou seja, quando o rato passar sobre o botão tem-se uma reacção; quando clicamos, outra; quando soltamos o botão dentro ou fora da área do botão, ou até mesmo quando pressionamos teclas, outras acções podem ocorrer. DAssim podemos fazer a animação parar quando chega a determinada frame, carregar uma URL ou passar por uma determinada frame, e muito mais. Cmesmo arrastar um movie clip no mais perfeito conceito "drag and drop". Com isto, muitos desenvolvedores de vanguarda criam interactividade de óptima qualidade. E Ousa estas ferramentas. Podemos alinhar objectos de diversas formas, utilizar uma grade para facilitar a montagem dos elementos, arranjá-los para frente ou para trás, inverter, girar, espelhar e alterar o tamanho dos objectos. Para evitar alterações acidentais S Aser exportados como sequências e imagens fixas em todos os formatos gráficos que ele reconhece. Para exportar uma animação, o Flash usa os formatos QuickTime no Apple, Windows AVI, e no melhor e mais compacto formato para a Web, Shockwave Flash. Aum story-board ou flowchart, em página inteira ou como lhe convier, de forma totalmente configurável, ou criar um executável para Mac ou PC. S Opotencializa seu desempenho, permitindo que uma animação possa ser vista e baixada ao mesmo tempo. P("quadros"), ocupando 1/4 a janela do navegador, tem o mesmo tamanho que um Shockwave Flash Full Screen – que ocupa a janela inteira – com mais de 10 frames, além de botões interativos, som etc. Cmensagens dinâmicas, cartoons) vale a pena realçar ainda outras três vantagens do Shockwave full screen:

Emanuel cruz Formação 2005 copyright 4

a) Toda a página, incluindo textos e figuras, fica "empacotada" dentro de um arquivo Shockwave

mas proporções em qualquer resolução de vídeo. o

erguntas e respostas

que é Flash e o que é Shockwave? ar para criar animações vectoriais. O Flash gera um arquivo.

uase todas as ferramentas da Macromedia possuem a característica de ser uma única ferramenta

Shockwave é nome dado à saída multimédia das ferramentas da Macromedia para a Internet,

orque é que as animações em Shockwave Flash são tão compactas? ticas, ou seja, são vectoriais,

ma animação é composta de uma sequência de imagens estáticas (frames) que são exibidas numa

tweened. Pode-se usar qualquer

imeline é o controlo principal na criação de animações. Entender a timeline é essencial na

rames é o bloco de construção básico no Flash. Uma série de frames reproduzida em numa

ayers ão como camadas. É possível termos várias animações simultâneas, uma em cada layer.

Imagine uma peça de teatro onde personagens se movimentam, uns mais a frente, outros mais atrás e às vezes passam em frente ou atrás de cenários, dando ao público uma ideia de profundidade.

Flash. O seu direito de autor fica assegurado. b) Shockwave em Full Screen apresenta as mesc) Finalmente pode usar as suas fontes preferidas, sem ter que se preocupar com o facto de visitante de sua página tê-las ou não. P OFlash é uma ferramenta que irá estudFLA que contem toda informação de uma animação no seu formato normal, ou seja, sem nenhuma compactação. Qde edição para múltiplas saídas, ou seja, tudo que se criar no Flash pode ser exportado para a Internet, impresso como um trabalho editorial, exportado como uma GIF estática ou animada ou até mesmo como um vídeo no formato. AVI ou. MOV. Oanteriormente o plugin chamava-se Shockwave Flash, hoje ganhou o nome pomposo de Flash Player. PAs animações em Flash são construídas através de equações matemáquando um computador abre uma animação em Flash ele processa uma série de cálculos para construir a imagem. Um arquivo contendo uma série de informações matemáticas é muito menor do que um arquivo de Bitmap que contem todas as informações de uma figura, pixel a pixel. Além disto o Flash compacta áudio e Bitmap muito bem. O único ponto desfavorável neste caso é que computadores com baixa capacidade de processamento podem não rodar animações complexas em Flash muito bem, mas isso hoje já é pouco provável acontecer... Uvelocidade constante (frame rate) e dão a ilusão de movimento. Existem dois tipos de animação no Flash: quadro a quadro ecombinação desses dois tipos de animação no Flash. TA timelineaprendizagem do Flash. A timeline, é composta de layers e frames e outros acessórios que facilitam a sua utilização. FA framesucessão rápida cria uma animação. Um frame é qualquer imagem solta dentro de uma animação, como se cada frame fosse uma página de caderno ou um quadro de uma película de cinema. LLayers s

Emanuel cruz Formação 2005 copyright 5

Recursos da timeline Para manipular a timeline existem três menus: Menu de frames – Permite a gestão de frames individualmente ou em conjunto com acções como:

nserir key frame, frame e blank key frame; inserir cções e scripts, inserir e editar som nas frames; criar tweening, e nomear os frames.

ia ixos e de movimento).

lém disto existem as ferramentas de onion skin, menu de acesso rápido a símbolos e cenas e

dro ma animação quadro-a-quadro é criada mudando a imagem a cada frame. É o tipo de animação sada em desenhos animados. Apresentados em sucessão rápida, as frames produzem uma

uadro-a-quadro não é a melhor opção quando se fala em arquivos

interpolar um movimento que estiver entre dois ey frames (between), em geral define-se o primeiro frame e o segundo e o Flash interpola o resto.

animação tweening no Flash: motion e shape. Vamos ver o que cada forma

objetos.

(símbolo, agrupamento, texto e bitmap); . Só pode ter um objeto por layer;

ser o mesmo do início.

epois desta pequena introdução o melhor é vermos o nosso programa.

seleccionar, incluir, excluir e inverter frames; ia Menu de layers - Permite a gestão de layers individualmente ou em conjunto com acções como: opções de visualização e edição; Inserir, excluir e renomear layers; criar máscaras e layers gu(f Menu de visualização – Permite configurar a forma de exibição de layers e frames. Apropriedades do filme. Animação quadro-a-quaUuanimação. Uma animação qcompactos, mas em muitos casos é a única opção. Animação tweening Podemos dizer que tween significa que o Flash irá kExistem dois tipos depossibilita. Tweening motion O tweening motion significa deslocamento, rotação e transformação de cor, transparência e tamanho de Regras de tweening 1. Só pode usar objeto23. O objeto final deve D

Emanuel cruz Formação 2005 copyright 6

primeira vista a interface do Macromédia Flash pode parecer muito complicada, com muitas

Aáreas, muitos painéis acopláveis, etc.

Emanuel cruz Formação 2005 copyright 7

É provável que um designer personalize o ambiente de edição de forma diferente e um programador de outra. A minha é só assim……

Emanuel cruz Formação 2005 copyright 8

Panorama da interface do Flash Através dos comandos Toolbar e Tools do menu Window, é possível personalizar a interface ao nível das barras de ferramentas a incluir, são quatro as barras que podem incluir: Ferramentas Padrão (main)

Ferramentas padrão Main 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1- New - criar novo ficheiro; 2- Open - abrir ficheiro; 3- Save - gravar ficheiro; 4- Print- imprimir; 5- Print Preview - ;pré-visualização da impressão; 6- Cut – cortar; 7- Copy – copiar; 8- Paste – colar; 9- Undo –desfazer acção: 10- Redo- refazer acção; 11- Snap - encaixar objectos; é uma espécie de íman; 12- Smooth – suavizar linhas econtornos;

Emanuel cruz Formação 2005 copyright 9

13- Straigten – endireitar linhas econtornos; 14- Rotate – rodar objectos; 15- Scale - redimencionar objectos; 16- Align – alinhar objectos;

Ferramentas de desenho e de pintura (tools) Ferramentas de selecção Ferramentas de desenho Ferramentas de visualização Selecção de cores Opções das ferramentas

Emanuel cruz Formação 2005 copyright 10

Estado (status): é uma área horizontal na janela que fornece informações sobre os comandos e botões invocados e sobre estado corrente dos Botões Caps Lock e Num Lock.

ação 2005 copyright 11

Na barra de estados imperam as informações sobre comandos, botões, etc.

Emanuel cruz Form

Controlador (controller) semelhante a um vulgar comando remoto, permite aplicar sobre o filme determinadas acções. 1 2 3 4 5 6 1- Stop - parar reprodução; 2- Rewind - “rebobinar” o filme para o frame1; 3 - Strep Back - retroceder frame a frame; 4 - Play - reproduzir; 5 - Step Forward - avançar frame a frame; 6 - Go to End – saltar para o último frame; As barras Main e Controller poderão estar flutuantes sobre a interface. Gestão dos paneis Os paneis ajudam-nos a ver e modificar propriedades de diferentes elementos que constam num determinado documento ( ex. frames, símbolos Instâncias). Os diversos painéis são invocados a partir do menu Windows. Abrir – invoca-los a partir do menu Windows.

Emanuel cruz Formação 2005 copyright 12

Seleccionar opções efectuar um clique no canto superior direito do painel; do menu pendente escolher a opção pretendida. Expandir e fechar - efectuar um clique no triângulo de expansão/fechar Redimencionar arrastar qualquer um dos lados do painel. Mover – arrastar o painel pela barra de títulos. Intercalar- arrastar um painel pela barra de títulos até outro painel.

Emanuel cruz Formação 2005 copyright 13

Criar conjuntos – intercalar painéis ir ao menu Windows invocar o comando. Save Panel Layout ; digitar o nome do conjunto na caixa de diálogo Save Panel Layout; esta disposição de painéis ficara num ficheiro que se encontra no Panel Set.

Seleccionar conjunto: escolher o conjunto a partir de Windows Panel Set. Fechar todos – invocar o comando Close All Panels do menu Windows. Inspector de Propriedades Para reduzir o número de paneis e opções nos menus, temos à disposição um inspector de propriedades (properties), que mais não é do que um painel sensível ao contexto (o tipo de informação evidenciada varia de acordo com o objecto seleccionado) e onde podemos efectuar alterações a atributos de objectos ou documentos. É invocado a partir do comando Properties do menu Windows.

Emanuel cruz Formação 2005 copyright 14

Como já vimos o flash possui uma barra de ferramentas na qual estão localizados os seus principais elementos. Essa barra divide-se em quatro grupos principais: ferramentas de selecção e de desenho, ferramentas de visualização, cores, opções (esta modifica-se, dependendo da ferramenta que está seleccionada).

ação 2005 copyright 15

Ferramentas de selecção Ferramentas de desenho Ferramentas de visualização Selecção de cores Opções das ferramentas

Emanuel cruz Form

Line tool

Esta ferramenta serve para desenhar linhas com o flash. Para a utilizar, basta seleccionar a opção Line Tool, clicar no ponto inicial da nossa linha e, mantendo o botão do rato pressionado, movimentá-lo até o ponto que desejamos que seja o final. Se a opção Snap to Object (o imã) estiver seleccionada, teremos maior facilidade para criar rectas.

Emanuel cruz Formação 2005 copyright 16

Repare que, no final da linha, enquanto ainda mantemos o rato pressionado, aparece o símbolo de um círculo vazado quando estamos na posição correcta. Exercício: criar um triângulo.

Emanuel cruz Formação 2005 copyright 17

Arrow Tool

Essa ferramenta é usada para seleccionar um elemento ou parte dele. Aproveitando o nosso triângulo, clique numa das três linhas que será automaticamente seleccionada (repare que ela fica realçada). Para seleccionar as outras linhas, manter a tecla shift pressionada enquanto clica nelas. Um modo mais fácil de seleccionar as três é clicar duas vezes seguidas em qualquer uma delas, todas as que estiverem conectadas serão seleccionadas junto.

Paint Bucket Tool

Para aplicar um preenchimento ao nosso triângulo, devemos inicialmente escolher a opção Fill color e na caixa que abrirá ao lado dela, seleccionar a cor desejada.

Emanuel cruz Formação 2005 copyright 18

Gap size Feito isso, basta escolher a ferramenta Paint bucket tool e clicar no interior do objecto. Na área de opções, poderá ver que existe a opção Gap size com as suas configurações. Esta opção define o tamanho de abertura que pode existir no traçado para aplicar o preenchimento, ou seja, mesmo que o desenho não esteja completamente fechado, pode preenche-lo com utilizando esse artificio.

Don’t Close Gaps: o flash apenas coloca preenchimento se todos os pontos estiverem conectados. Close Small Gaps: coloca preenchimento mesmo que exista uma pequena abertura. Close Médium Gaps: preenchimento mesmo que exista uma abertura média. Close Large Gaps: coloca preenchimento mesmo que exista uma abertura considerável. Exercício seleccionar o preenchimento. Exercício arrastar o preenchimento. Repare que quando selecciona, por baixo do cursor aparecem quatro setas, formando um símbolo semelhante a uma cruz, indicando que pode deslocar o objecto. Para alterar a posição de um dos cantos, basta colocar o cursor próximo deste (repare que aparece um símbolo semelhante a um ângulo recto). Pressione o botão do rato e solte-o na posição desejada.

Emanuel cruz Formação 2005 copyright 19

Também pode alterar a curvatura dos lados utilizando a ferramenta de selecção. Posicionando o cursor sobre a linha, o ícone que nos aparece agora é uma linha curva.

Para alterar o lado basta aproximar o cursor destes pressionar o botão do rato e arrastar a linha até a curvatura desejada. Importante: para alterar o canto ou a curvatura da linha não deve estar com a linha seleccionada. Exercício: alterar canto e curvatura do triângulo. Oval Tool

Para desenhar elipses, basta seleccionar a ferramenta Oval Tool e clicar no ponto inicial, e mantendo o botão do rato pressionado arrastar até que esteja no tamanho desejado. Se desejar um circulo, basta manter a tecla shift pressionada enquanto arrasta(quando se esta a desenhar um circulo aparece o símbolo de circulo na extremidade do cursor ao arrastar.

Emanuel cruz Formação 2005 copyright 20

Rectangle Tool

Para desenhar rectângulos o procedimento é o mesmo. Para desenhar um quadrado basta manter a tecla shift pressionada. Se quiser criar um quadrado/rectângulo com os cantos arredondados, basta clicar duas vezes no ícone do Retangle Tool na barra de ferramentas. Será aberta uma janela Rectangle Settings na qual deve seleccionar um valor entre 0 (cantos recto) e 999 (totalmente arredondado)

Dica pode visualizar o arredondamento enquanto desenha o quadrado/rectângulo, basta para isso pressionar a seta do teclado para baixo para aumentar, para cima para diminuir essa quantidade. Exercício: desenhe um rectângulo com os cantos arredondados. Ink Bottle Tool:

Para trocar a cor de um contorno, ou mesmo colocar o contorno num desenho que tem apenas o preenchimento, deve primeiro seleccionar a cor desejada na opção Stroke Color. Depois de seleccionada basta clicar no interior do elemento e o contorno será aplicado.

Emanuel cruz Formação 2005 copyright 21

Pencil Tool

Esta ferramenta serve para desenhar directamente o seu objecto, basta pressionar o botão do rato enquanto desenha e quando decidir terminar basta solta-lo. (semelhante ao Paint). Esta ferramenta possui a opção Pencil Mode:

Straighten- acentua as rectas da forma desenhada Smooth- acentua as curvas da linha Ink- mantém o traço o mais próximo de mão livre. Após desenhada e seleccionada a linha, pode acentuar as suas rectas e curvas com as opções Smooth e Straighten.

Emanuel cruz Formação 2005 copyright 22

Brush Tool

sta ferramenta é utilizada de maneira semelhante ao Pencil. Clica no ponto que deve ser inicial, antendo o botão do rato pressionado arraste-o para criar o desenho, para finalizar basta soltar o

O Brush difere do Pencil por criar preenchimentos (o pencil contornos). cas do pincel pelas suas configurações de tamanho e forma na sua

Embotão.

Pode configurar as característiárea de opções. A maneira como o pincel vai se comportar é definida pela opção Brush Mode.

Emanuel cruz Formação 2005 copyright 23

Paint Normal- passa por cima de todos os elementos que estiverem na tela, independentemente de nde começou a desenhar.

as os preenchimentos, ignorando os contornos dos elementos.

aint Behind- pinta por trás dos elementos na tela, dando a impressão que foi primeiro o pincel a er utilizado.

o

Paint Fills- pinta apen Ps

Emanuel cruz Formação 2005 copyright 24

Paint Selection pinta apenas sobre um elemento previamente seleccionado.

aint Inside- pinta somente no mesmo elemento que começou a desenhar.

P Eraser Tool

Essa ferramenta serve para apagar partes do desenho. O seu modo de utilização e configuração são bastante semelhante aos do pincel.

rase Fills- apaga apenas preenchimentos.

elemento seleccionado.

Para configurar como irá actuar, deve configurar a opção Eraser Mode. Erase Normal- apaga tudo por onde passar. E Erase Lines- apaga apenas os contornos. Erase Selected Fills- somente é apagado o

Emanuel cruz Formação 2005 copyright 25

Erase Inside- apaga somente no mesmo elemento em que começou a apagar. ode ainda utilizar a opção faucet (ícone torneira). Esta opção apaga todo o elemento que será

ropper Tool

Ptocado por ela. D

Esta ferramenta catura a cor de um preenchimento ou contorno para poder aplicá-la noutra área do desenho.

asso Tool

outra ferramenta de selecção, para a usar basta proceder da mesma maneira como a ferramenta encil para seleccionar parte do elemento.

ode que é a padrão e a Magic Wand que trabalha eleccionando cores semelhantes dentro de um área.

tolerância desta em Magic Wand Properties. o seleccioná-lo abre-se uma janela Magic Wand Settings na qual configura a tolerância no campo

en Tool

r caneta de Bézier, serve tanto para traçar rectas, fornecidos os pontos icial e final, quanto para traçar linhas curvas, cujos pontos inicial e final são definidos. E ainda

mos

L

ÉP Esta ferramenta possui as opções Polygon Ms Para utilizar a opção Magic Wand deve configurar a AThreshold* com valor entre de 0 e 200. Quanto maior o valor maior a abrangência da selecção. P

Também conhecida poinpode definir a curvatura existente entre esses dois pontos. O resultado visual é como se tivésseuma linha recta e puxássemos até entorta-la.

Emanuel cruz Formação 2005 copyright 26

Emanuel cruz Formação 2005 copyright 27

Subselect Tool

e já utilizou a ferramenta Pencil ou qualquer outra para desenhar pode modificar pontos dos lementos com a ferramenta Subselect, deve seleccionar a linha e clicar sobre os pontos que deseja lterar.

ext Tool

nta utilizada para inserir textos no flash. em que o bloco de texto deve iniciar e mantendo o botão do rato

pressionado arrasta até ao final do bloco (procedimento igual ao usado para desenha um .

Sea T

FerramePara utiliza-la, pesssione na área

rectângulo)

Se depois quiser alterar o tamanho da caixa de texto, basta utilizar a alça que se encontra na sua xtremidade direita, alterando assim a área disponível para o texto. e

Emanuel cruz Formação 2005 copyright 28

Pode configurar o seu texto utilizando as configurações disponíveis na janela de propriedades.

tatic Text- texto simples que não aceita entrada nem se altera.

S

Dymamic Text- texto que se pode alterar por meio de ActionScript durante o filme.

Imput Text- caixa de entrada de texto – semelhante à textfield de formulário.

Pode escolher Fonte, Tamanho, Cor, Negrito, Itálico, Alinhamento, Largura, Altura, Posição Horizontal, Posição Vertical. E Também: Direcção do texto. Espaçamento dos caracteres - um valor entre -60 e 60. Posição do caractere – normal, superescrito (acima da linha base) e subescrito (abaixo da linha

mático. que ao passar o rato sobre o texto (filme final), o cursor mude e

ext. Quando criamos um texto existe um suavização de serilhado que para melhorar o

base) Auto kern – espaçamento autoSelectable – se marcado, faz compode-se seleccionar o texto desejado. URL – pode aqui digitar um link. Alias tdesenho dos caracteres. Exemplo pático.

Emanuel cruz Formação 2005 copyright 29

Vamos digitar: Visite o site.

onfiguração. Fonte Times New Roman, cor Vermelha, tamanho 20, alinhamento centralizado. Na rea URL digite um endereço da sua preferência, seguindo o padrão http//www.emanuelpio.com. gora se testar o filme será um link para a página digitada.

Cáa

Se quiser fazer um link para Email basta digitar no campo URL a palavra mailto ante do endereço electónico. Exemplo: mailto:[email protected] Free Transform Tool:

Esta ferramenta é responsável por me rotação.

odificar o tamanho de um objecto , bem como a sua inclinação

Para alterar o tamanho de um objecto deve selecciona-lo e puxar por uma das alças. Se for uma dos cantos pode modificar ao mesmo tempo a altura e a largura; se quiser modificar proporcional, basta manter pressionada a tecla Shift.

o objecto, posicione o cursor fora do objecto aparecerá um ícone circular; basta

:

Para o inclinar basta, arrastar a partir de um dos lados e não na alça como anteriormente Para rodar pressionar no botão do rato e abter a rotação desejada. Opções da ferramenta Free Transforme

Emanuel cruz Formação 2005 copyright 30

Scale – redimensiona o objecto.

Rotate and Skew – roda e inclina o objecto.

Distort – modifica distorcendo a imagem original. Envelope – altera totalmente a imagem deformando-a de acordo com molde gerado pelo utilizador.

Emanuel cruz Formação 2005 copyright 31

Configurações de cor e preenchimento. Uma das características do flash está em descartar informações que julga desnecessárias. Por exemplo quando sobrepomos algum objecto, as informações do desenho que ficou por trás são eliminadas.

Emanuel cruz Formação 2005 copyright 32

O flash reúne as configurações de cor e preenchimento numa única janela chamada Color Mixer com a qual só precisa de seleccionar o objecto e já aparecerá a cor de preenchimento, de traço, e o estilo de preenchimento.

Nas caixas R, G e B introduz valores entre 0 e 255para vermelho, verde e azul respectivamente. Pode também escolher as opções Default Color (preto e branco) e Swap Color (troca as cores do traço e preenchimento). A cor pode ser seleccionada pressionando directamente na rampa de cores ou digitando o valor em hexadecimal. Na opção Alpha pode defenir a quantidade de visibilidade que a cor terá; basta escolher um valor entre 0 (transparente) e 100 (totalmente visível). Estilos de preenchimentos: Bipmap – esse tipo aplica ao objecto como preenchimento uma imagem já importada.

Emanuel cruz Formação 2005 copyright 33

Solid – esse tipo de preenchimento aceita uma única cor para cada objecto.

Linear Gradient – esse tipo permite definir duas ou mais cores e o flash calcula todas as cores para passar de uma para a outra. Para alterar uma das cores, basta clicar no quadro pequeno da cor que quer alterar e escolher na parte superior a nova cor para adicionar um novo ponto de cor, basta mover o rato na mesma linha em que já existem outros pontos. Repare que abaixo do cursor do rato aparece um sinal de adição, bastando clicar no local onde deseja a nova cor. Para remover um ponto de cor, deve clicar no quadrado referente a esta e ainda mantendo o botão do rato pressionado arrastar o rato para baixo.

Emanuel cruz Formação 2005 copyright 34

Radial Gradient semelhante ai Linear Gradient, esse efeito ocorre em forma circular de dentro para fora. As suas configurações são exactamente iguais às do Linear.

Fill Transform Tool

Essa ferramenta é utilizada para modificar as configurações do preenchimento Gradient. Para modificar um Gradiente Linear, deve clicar no preenchimento com essa ferramenta seleccionada. Aparecerão três controladores, que se podem manipular até obtermos o gradiente pretendido.

Emanuel cruz Formação 2005 copyright 35

Animações Antes de começarmos a criar a nossas animações, é importante entender como funciona o processo da animação. Existe um fenómeno conhecido como permanência da visão, pelo qual percebemos que o nosso cérebro retém uma imagem visualizada por um curto período de tempo, mesmo após a imagem ter sido retirada da nossa vista. Assim duas imagens incompletas podem formar uma terceira se estas forem vistas rapidamente. Um filme, por exemplo, não é nada mais do que uma sequência de imagens que são alteradas em função de um curto período de tempo, que nos leva à ilusão de ver movimento. Camadas (layers) A melhor definição de camadas seria compará-las a folhas de acetato que são sobrepostas para montar um resultado final, cada uma com as suas próprias configurações e propriedades. Assim se quisermos alterar parte do texto ou filme não precisamos de o alterar todo mas sim a camada que deve mudar. As camadas ficam situadas na janela Timeline e cada uma é representada por um ícone de uma pequena página com o seu nome à direita. Timeline O processo de animação é orientado pela janela Timeline, na qual com já vimos se situam as camadas (layers) e, mais importante onde se encontram os frames (quadros). Como vimos, uma animação é uma sequência de imagens que se altera em função do tempo, dando uma ilusão de movimento.

o flash podemos configurar a quantidade de frames que passarão em cada segundo. Para alterar o

Nessa quantidade podemos abrir o painel Document Propreties (Modify- document) e alterar a opçãframe rate para a quantidade desejada por segundo.

Emanuel cruz Formação 2005 copyright 36

Uma vez configurada essa quantidade vamos observar melhor a área de frames da janela Timeline.

Na parte superior estão números em intervalos de 5 em 5 que servem para localizar a quantidade de frames presentes na animação. Na recta de cada Layer (camada) estão as frames correspondentes a essa layer. A cada 5 frames eles estão pintados de cinza para simples referência. (Mac. Não). Sempre que ocorrer um ponto significativo na animação, uma alteração deve-se colocar um Keyframe (ponto chave/quadro Chave) F6 indicando ao flash essa importância. Logo de inicio podemos ver um círculo vazio no primeiro frame, o que indica que haverá um ponto importante e está vazio porque ainda nada nele foi desenhado... é um Blank keyframe).

Emanuel cruz Formação 2005 copyright 37

Vamos agora desenhar um quadrado no Stage (palco). O círculo que estava no Keyframe não se encontra mais vazio. Mas sim preenchido indicando que esse Keyframe possui elementos desenhados.

Para prolongar a permanência do elemento na tela durante a animação deve-se adicionar frames à sua layer. Para isso basta clicar com o botão direito na última frame desejada e escolher a opção insert Frame, ou ainda seleccionar o primeiro frame da animação e pressionar a tecla F5, prolongando as frames até a permanência desejada. Shift F5 para remover. Ou seleccionar, como seleccionamos texto clicar no botão direito e escolher remove frames.

Na janela Timeline podemos reparar num quadro vermelho na área numerada com uma linha fina vermelha abaixo. É a cabeça de leitura ao passar em cada frame ela faz uma leitura de todos os elementos existentes nesse frame, exibindo-os. É responsável pela animação. Para movimentar a cabeça de leitura podemos arrasta-la puxando-a pelo quadro vermelho. Carregando em enter, ou ainda fazendo Controlo play (comandos).

Emanuel cruz Formação 2005 copyright 38

Na opção Current Frame localizada na barra de estado na parte inferior da Timeline , podemos ver o nº do frame actual, e em Elapsed Time, a quantidade de tempo decorrida até esse Frame, calculo gerado com base na velocidade de frames por segundos configurada anteriormente. Animação frame by frame

sse processo remonta aos primórdios da animação e constitui-se na sequência de várias imagens,

s mais satisfatórios em

eleccionarmos o frame 2 e, clicar no botão direito do rato neste, escolher a opção

Euma levemente diferenciada da anterior para simular o movimento. É o tipo de animação mais trabalhoso, entretanto é o que possui resultadotermos visuais. Para isso basta sInsert Keyframe (também poderíamos ter seleccionado o frame 1 e clicar a tecla F6 para obter o mesmo resultado).

Emanuel cruz Formação 2005 copyright 39

Inserimos um Keyframe para avisar o Flash que no frame 2 o elemento da nossa layer sofrerá uma importante alteração. Neste caso a alteração será o deslocamento do nosso quadrado. Para fazer isso seleccionamos o frame 2 e vamos deslocar o desenho um pouco mais abaixo da posição actual. Repetiremos os procedimentos descritos anteriormente até chegar ao frame 10 da

Timeline, sempre inserindo o Keyframe e em seguida deslocando um pouco o desenho. Pronto efectuamos a nossa primeira animação. Para testa-la podemos pressionar Enter (também escolhendo a opção Control - TestMovie, para testar na zona de teste). Para sair da zona de teste, basta clicar na opção fechar (o X mais abaixo do canto superior direito da tela). Onion Skin Para melhor visualizar os frames do filme simultaneamente podemos lançar mão da ferramenta Onion Skin. Essa ferramenta mostra todos os frames que desejamos com diferenciação na opacidade, facilitando assim o entendimento da animação. Para aplicar o efeito deve clicar no botão -----representando o ícone de Onion Skin, localizado na área inferior da Timeline. Assim que estiver seleccionada essa opção, aparecerá na parte numerada da Timeline uma área mais escura com alças circulares dos dois lados.

Emanuel cruz Formação 2005 copyright 40

Podemos arrastar essas alças para definir quais os frames que visualizaremos simultaneamente com recurso a Onion Skin. Esse recurso facilita muito a criação de animações, principalmente a de frame by frame, possibilitando verificar a trajectória e demais alterações sem ter que executar o filme constantemente.

Emanuel cruz Formação 2005 copyright 41

Símbolos Ao criar os elementos, o Flash possibilita-os armazena-los numa biblioteca para podermos utiliza-los quantas vezes quisermos. Utilizando símbolos podemos aproveitar a opção de interpolação de movimento (tweening motion) do flash, reaproveitando os elementos e muito mais. Para criar um símbolo, basta seleccionarmos o objecto que desejamos e pressionar a tecla F8 ou na janela Iinsert e Convert to Symbol ou ainda clicar no elemento com o botão direito do rato e escolher essa mesma opção. Na janela Convert to Symbol devemos escolher um nome para esse símbolo na opção Name. Na opção Behavior (durante este capitulo utilizaremos a opção Graphic, mais adiante veremos as outras opções Button e Movie Clip)

Emanuel cruz Formação 2005 copyright 42

…Interpolada (tweenig) Interpolação de movimentos Nos grandes estúdios de animação, o desenhador principal não costumava desenhar todos os quadros de animação. Geralmente criava os pontos mais importantes e o resto da sua equipa desenhava todos os outros quadros necessários entre os pontos importantes. O flash trabalha de maneira semelhante. Para melhorar a sua produtividade e facilitar o seu trabalho, o flash utiliza o sistema de interpolação de movimento em que se define o Frame inicial (Keyframe) e o frame final calcula todos os outros frames intermédios necessários para essa animação. Para esse tipo de animação o primeiro facto a considerar é que se deve tornar o objecto a ser animado num símbolo. Crie o desenho de um círculo no stage (palco) e torne-o um símbolo gráfico. Repare que surge uma linha azul a volta do objecto.

O segundo passo a considerar é que deve criar um Keyframe no quadro que deseja como final na animação, em que ocorrerá uma modificação importante. Antes de fazer as modificações deve sempre inserir o Keyframe, caso contrário as modificações serão aplicadas ao elemento inicial.

Emanuel cruz Formação 2005 copyright 43

Exemplo Clique no frame 30, no qual inserimos um Keyframe. Agora deve mudar o círculo no stage para a posição que quer no final da animação. Uma vez que tenha os pontos inicial e final, basta clicar no botão direito do rato, em qualquer parte (frame) entre o primeiro e o penúltimo (o ultimo não serviria pois entenderia que o processo de animação seria dele em diante) e escolher a opção Create Motion Tween.

Na layer que foi animada, uma seta entre os Keyframes indica que a animação está correcta caso apareça em vez da seta uma linha tracejada significa que há erros na animação. Nesse caso deve-se rever todos os passos necessários para localizar o erro.

Emanuel cruz Formação 2005 copyright 44

Outra maneira de fazer esse tipo de animação é seguir os passos iniciar (converter o objecto em símbolo, adicionar um Keyframe ao ponto final, deslocar o objecto do segundo Keyframe), mas em vez de escolher a opção Create Motion Tween, deve seleccionar um dos frames entre os Keyframes (executando o último), e utilizando o painel properties escolher na área Tween a opção Motion. Nesse mesmo painel pode ainda alterar a opção Ease com um valor entre -100 (começa mais lenta e termina mais rápida) e 100 (começa mais rápida e termina mais lenta) e na opção e na opção o sentido horário (CW) anti-horário (CCW) e quantidade de voltas.

A animação de interpolação não serve somente para movimentar o objecto mas também para altera-lo durante o movimento. Se alterar o tamanho do símbolo no último Keyframe, o flash calcula todos os tamanhos necessários durante a transição podemos ainda alterar outras configurações do símbolo no painel Properties utilizando um dos efeitos de cor na opção Color:

Emanuel cruz Formação 2005 copyright 45

-Brightness – pode escolher um valor para o brilho entre -100 e 100 - Tint – escolhe a cor que quer aplicar ao símbolo, seja na caixa de cor, seja nos valores (entre 0 e 255) para Vermelho (R), o Verde (G) e para a Azul (B). Pode Aida escolher a intensidade com que será aplicado esse efeito de cor em Tint Amount (valor entre 0 e 100) - Alpha – quantidade de visibilidade do símbolo, um valor entre 0 (invisível) e 100 (totalmente visível). - Advanced – nessa opção configura tanto o Alpha quanto as opções de Tint ao mesmo tempo. …Interpolação de formas Animação Shape O flash possui um um tipo característico de animação denominado de Shape no qual um elemento transforma-se num outro. Importante, ao contrário do Tween Motion para a animação Shape não deve transformar o objecto num símbolo deve ser uma simples forma. Para fazer um círculo transformar-se num quadrado, devemos primeiro desenhar o círculo no Stage. A seguir, inserir um frame vazio na layer que esta a animar. Clique no botão direito do rato no frame deseja como final da animação escolha Insert Blank Keyframe.

Emanuel cruz Formação 2005 copyright 46

No frame que possui o Keyframe vazio vamos desenhar um quadrado que será o segundo desenho da animação.

Para animar a forma pode utilizar o Painel properties. Na opção Tween deve escolher Shape.

Emanuel cruz Formação 2005 copyright 47

Esse tipo é simples de fazer desde que se lembre que não pode converter o objecto em símbolo nem agrupá-lo. Podemos ainda usar as Shape Hint. Essa opção diz que pontos definidos no início no início da animação devem corresponder a pontos que definimos no final.

Seleccione o primeiro frame da animação e vamos colocar um Shape Hint que servirá de referência para a animação, escolhendo a opção de menu Modify Shape- Add Shape Hints. Outra maneira é escolher as teclas de atalho (Control+Shift+H)

Emanuel cruz Formação 2005 copyright 48

Desenhamos um quadrado e aparecerá um círculo com a letra a no seu centro arraste-o para o canto superior esquerdo.

Agora vá ao último frame e verá novamente o pequeno círculo, leve-o até a posição que considerar correspondente ao circulo do primeiro frame.

Repita esses passos até achar que a animação ficou melhor. Pode remover todos os Shape Hints escolhendo a opção Remove All Hints, no primeiro frame. Para remover uma única referência, basta clicar sobre o Shape Hint com o botão direito do rato e escolher a opção Remove Hint. Como as Shape Hints são utilizadas com identificação de letras, terá um máximo de 26 Shape Hints. Transição entre textos Podemos utilizar a animação de forma também para fazer a transição entre textos. Vamos escrever o nosso nome ex. EMANUEL Para termos uma animação Shape, precisamos ter uma forma desenhada no stage, no entanto temos um texto editável. Seleccione o texto e utilize a opção Modify _Break Apart. Nas versões anteriores esse comando era suficiente para converter um texto em forma, mas na versão MX a primeira vez que utilizar o comando, este separa os diversos elementos do texto e só na segunda é que o torna forma.

Emanuel cruz Formação 2005 copyright 49

Aplique novamente o comando Modify Break Apart que agora as vai converter em forma.

Insira um Keyframe vazio no frame 30 e digite outro texto ex. Flash Mx, repita os procedimentos aplicados anteriormente, feito isso seleccione qualquer frame entre o primeiro e o penúltimo frame e aplique uma animação Shape. Pronto agora é só testar…

Emanuel cruz Formação 2005 copyright 50

Movie Clip A melhor forma de descrever um Movie Clip é considerá-lo como um filme que roda dentro do filme principal, sem contudo, manter o vínculo com a sua linha de tempo. Outra característica importantíssima desse símbolo é que cada instância (clone do símbolo, como chamamos na aula), pode ser nomeada para ser utilizada pele programação do Flash, o Action Script. Vamos criar uma animação semelhante à que fizemos anteriormente. Crie um quadrado no Stage

(palco) e converta-o num símbolo Movie Clip, que chamamos quadrado.

Emanuel cruz Formação 2005 copyright 51

Clique duas vezes nesse símbolo no Stage ou na biblioteca (Windows – Library), para entrar no seu modo de edição (habitat). No modo de edição do Movie Clip quadrado, converta o quadrado no stage num símbolo gráfico (ainda esta em forma) ou seja temos um Movie Clip e dentro deste um símbolo gráfico.

Emanuel cruz Formação 2005 copyright 52

Insira um Keyframe na posição 30 da Timeline do símbolo quadrado e modifique a posição do ímbolo interno para a direita. s

C

Emanuel cruz Formação 2005 copyright 53

lique com o botão direito do rato em qualquer um dos frames anteriores ao último Keyframe e scolha a opção Create Motion Tween ou Motion na janela das propriedades.

Volte para a cena clicando no link Scene 1 ou na seta .

e

Emanuel cruz Formação 2005 copyright 54

Clique Control + Enter para testar o filme e ao contrário do que aconteceu com o símbolo gráfico,

ode ainda ais duas instâncias do ovie Clip quadrado para o Stage.

Com isso temos três quadrados na cena principal do Flash. Aumente o tamanho de uma delas e vamos diminuir a sua visibilidade utilizando o efeito de cor alpha na janela das propriedades.

a animação ocorre mesmo que na Timeline principal o símbolo quadrado ocupe apenas um Keyframe. P abrir a janela Window – Library ou Control + L) a arraste mM

Emanuel cruz Formação 2005 copyright 55

Diminua o tamanho de outra e altere a sua cor através do efeito Tint. Mantenha a ultima com o seu formato original.

este oerá três instâncias do símbolo que receberam as características principais do símbolo quadrado ue está na nossa Library e que possuem algumas características distintas que foram alteradas em ada um das nossas instâncias.

T filme (Control + Enter). Tqc

Símbolo Botão

m interagir

os outros

bolos. Vamos bolo (F8) do tipo Button e

Muito do sucesso de um site está na interactividade que possui, uma vez que o utilizador não deseja apenas contemplar (admirar) um site ou no nosso caso uma animação, mas sicom esta. Na maioria dos casos a interacção dá-se por meio do símbolo botão que se diferencia dsímbolos do Flash, principalmente quando o utilizador movimenta o cursor sobre a área deste, pois o cursor torna-se uma mãozinha que permite que se clique neste. Para criar um botão, utilizamos o procedimento semelhante aos dos outros símdesenhar no Stage um quadrado, seleccionamo-lo, convertê-lo em símchamamo-lo B1.

Agora vamos clicar duas vezes no símbolo botão que se encontra no Stage para entrar no seu modo de Edição. Repare que a Timeline é um pouco diferente das que vimos anteriormente, possuindo quatro estados; Up, Over, Down e Hit.

Emanuel cruz Formação 2005 copyright 56

Up- estado correspondente ao botão no seu estado normal sem proximidade do rato.

que o utilizador passa o cursor sobre o botão. own – momento em que o utilizador em a clicar sobre o botão

m (lembrando que o Hit não aparece no Stage, não terá necessidade de lhe trocar a cor).

um efeito bastante agradável para o filme. Um dos modos de criar um botão animado (sem necessidade de programação) é de colocar num dos seus estados uma animação que precise de apenas um Keyframe para ocorrer, e como já vimos o Movie Clip responde a esse requisito uma vez que a sua Timeline é totalmente independente.

Over – estado emDHit- área clicável do botão que não é visualizada pelo utilizador. Vamos agora editar o botar. Insira um Keyframe em cada um desses estados e troque a sua cor ecada estadoAgora volte para a cena e teste o seu filme. Verá os três estados iniciais dependendo da interacçãoque mantiver. Botão animado Um botão que se movimenta quando o utilizador o clicar ou simplesmente passar com o cursor sobre este produz

Emanuel cruz Formação 2005 copyright 57

Aproveitando o botão já feito, entre no modo de edição do botão (clicar duas vezes nele) eleccione o seu estado Over, desenhe aí um rectângulo e converta-o num Movie Clip

overt to simbol ou F8) clique duas vezes neste entre no seu modo de edição faça agora aí uma nimação ao seu gosto Shape ou Motion (atenção para está última terá de converter para símbolo ráfico a figura quadrado) depois de fazer a animação do Movie Clip é só voltar a cena principal e zer correr o filme em Control –test movie e verá que na posição Over terá o seu Movie Clip a abalhar.

s

(cagfatr

Emanuel cruz Formação 2005 copyright 58

Áudio Uma das grandes diferenças do Flash em relação a outros tipos de animações é o facto de poder onter som. omo inserir e configurar um ficheiro áudio: rie um novo ficheiro e importe um arquivo de áudio (Wav. Mp3.). ode parecer que nenhum ficheiro foi carregado, isto acontece porque o ficheiro vai directamente ara a Library. bra a Library (F11) verá aí o seu arquivo, apesar de estar na Library o arquivo de som não é um

ímbolo, é um pseudo – símbolo, uma vez que só temos três tipos de símbolos (Gráfico, Botão ovie Clip).

e desejar reproduzir o som basta clicar no botão de Play localizado na área superior da isualização prévia dele.

cCCPpAsMSv

ara configP urar o som, devemos clicar duas vezes no seu ícone na Library. anela Sound Properties abre-se. ssa janela podemos testar as configurações do som com o botão Test, para essa reprodução com

botão Stop, actualizar o som após alterações feitas externamente ao flash clicando no botão pdate ou até importar um novo som com o botão Import.

A jeN

oU

Emanuel cruz Formação 2005 copyright 59

As configurações ocorrem na área Export Settings. Quando utilizamos um arquivo Mp3 e estiver marcada a opção Use Imported Mp3 quality, o som utilizará a configuração que o MP3 possuía originalmente. Quando desmarcamos essa opção aparecem novos campos para configuramos. Na área Compression escolhemos a compressão desejada para o som. As suas opções são : ADPCM ( ideal para sons curtos), Mp3 (mais utilizada para trechos tipo loop), RAW (geralmente sem compressão) , SPEECH (compressão configurada especialmente para Voz). Escolha a compressão MP3. Temos agora que definir a taxa de amostragem utilizada (Bit Rate), um valor acima de 16 kbps produz resultados melhores. Cuidado para não deixar muito grande o arquivo (aparece na área inferior o tamanho com a configuração seleccionada). No Campo Quality definimos a qualidade desejada. O valor Fast é uma qualidade mais voltada para a web e as outras

pções resultam em som com qualidades melhores. ara aplicar um som no filme, devemos arrasta-lo da Library para o Stage como faríamos com

na Timeline representando o som.

yer (é escolhendo aqui a opção nome que removemos um som da Layer). No campo Sync estão as configurações do comportamento do som.

oPqualquer outro elemento. Repare na “wave form” que apareceAs configurações de comportamento do som no filme ocorrem no painel Properties com o Keyframe em que o som se encontra seleccionado. No campo Sound seleccionamos o som que desejamos na La

Emanuel cruz Formação 2005 copyright 60

scolhendo Event, uma nova instância do som será iniciada quando a cabeça de leitura passar por sse Keyframe. Nessa opção o som toca inteiramente de forma semelhante ao que ocorre com o ovie Clip que, mesmo ocupando um quadro do filme, tem toda sua animação reproduzida. Tenha

uidado, pois podem ser iniciadas novas instâncias do som enquanto a primeira ainda não tenha

ova

EeMcterminado sobrepondo sons. A configuração Start funciona da mesma forma que a Event, a diferença é que só inicia uma ninstância do dom quando a actual já tiver sido finalizada, não sobrepondo assim o som. Stop para a instância que está a tocar no momento. Sream funciona da seguinte maneira: os trechos de som são anexados aos frames do filme, portanto só pode ouvir enquanto houver frames na Timeline. São carregados somente os trechos de música que aparecem nos frames. É a melhor opção para som que desejarmos sincronizar a animação.

Emanuel cruz Formação 2005 copyright 61

Em Effect pode utilizar alguns dos efeitos para o som já existentes ou criar o seu clicando no botãoEdit. Na janela Edit Envelop, terá uma representação gráfica do som nos seus dois canais (esquerda e direita). Para alterar o volume nalguns dos canais, basta clicar na sua janela que um quadrado representativo aparecerá. Qua

nto mais próximo do topo, mais alto o volume.

Teste o seu filme e verá que o som reproduzido seguindo as configurações e efeitos que tenha configurado. Exercício: Controlo de volume

Emanuel cruz Formação 2005 copyright 62

Para controlar o volume do áudio, vamos criar um novo filme e importar um arquivo áudio MP3 para poder controlá-lo. Abra a Library e arraste para o Palco o seu som. Renomeie a layer como som. Crie uma nova layer chamada controlo Vamos agora abrir uma biblioteca que possui diversos botões e elementos prontos para usar. Escolha a opção de menu Windows – Common Library – Buttons. Nessa biblioteca temos diversas categorias e várias opções de botão. Escolha a pasta Knobs & Faders e dentro dela arraste uma instância do símbolo Fader – Gain para o palco.

Para podermos associar esse controle ao som, seleccione o Movie Clip do controlo no Palco e nas propriedades atribua como nome da instância Volume.

Emanuel cruz Formação 2005 copyright 63

Crie uma nova layer e nomeie Action. Seleccione o primeiro frame dessa camada a abra o painel Action (F9). Digite na área de actions (e como Expert mode) a seguinte instrução: volume.sound=new Sound( )

Emanuel cruz Formação 2005 copyright 64

Aqui estamos a criar um objecto (elemento a ser utilizado na programação) chamado sound que se encontra dentro do movie clip (chamado volume) que gera a instrução volume.sound (estamos a utilizar a sintaxe de pontos), em seguida estamos a dizer que esse elemento receberá (=) as características de um elemento de programação responsável pelo som (new Sound). Não é necessário mais nenhuma programação, pois o botão que fomos buscar a Common Library já contem toda a programação necessária. Agora é só testar o seu filme e mexer com o volume.

Emanuel cruz Formação 2005 copyright 65

A publicação A publicação dos filmes em diferentes em diferentes formatos permite responder a muitas qa jusante do Flash: largura de banda, sistemas operativos, nível de interactividade, ca

uestões pacidade de

ionalidade e interactividade quando istribuímos o filme na Web. Estes filmes podem ser visualizados se:

izerem parte de um filme QuickTime; orem incluídos em projectors (executáveis).

Estiver instalado o Flash Xtra no Macromedia Director e no Authorware. orem instalados controlos ActiveX do Macromedia Flash nos respectivos hosts. plugin-in do Flash player estiver incorporado nos browsers.

comando Publish, disponível a partir do menu File, é um verdadeiro feiticeiro de Oz: gera todos s ficheiros necessários para que o filme seja visualizado na Web. Assim para alem do próprio lme Flash, o conteúdo pode ser gerado noutros formatos, para o caso de não estar disponível o lash Player. as antes da colocação na Web, convém definir alguns atributos associados à publicação nos

iferentes formatos. Para isso invocamos o comando Publish Settings a partir do menu File, dando rigem à caixa de diálogos Publish Settings.

processamento e armazenamento, etc. Já sabemos que o .swf é aquele que oferece plena funcd- F- F- -F-OOofiFMdo

Type – specificar o formato, por cada formato seleccionado, (excepto nas opções Windows Projector e acintosh Projector), é adicionado um separador à caixa de diálogo. ilename – a opção Use delfaute names atribui nomes padrão aos ficheiros dos diferentes rmatos; caso queira altera-los, desactive esta opção e escreva os nomes personalizados

irectamente nas caixas de texto.

eM Ffod

Emanuel cruz Formação 2005 copyright 66

Flash (.swf)

Os filmes Flash podem ser visualizados nos browsers ou noutros locais. As opções de publicação são: Version: definir qual a versão do Flash Player que irá suportar a execução do filme; nem todos os recursos definidos no Flash MX funcionam em filmes que foram publicados em versões anteriores. Load order : ordem de carregamento das camadas apenas do primeiro frame; a opção Bottom Up (de baixo para cima) carregar primeiro a camada mais abaixo no frame; o opção Top Down ( de cima para baixo) carregar primeiro a camada mais acima no frame; Option: Generate size report – gerar um ficheiro .txt com informação acerca dos frames a acrescenta uma lista com os filmes e as fontes importadas; Protect from import – impede a importação do filme .swf para o Flash, de modo a evitar o seu uso desautorizado. Omite Trace action – remover todas as acções incluídas no filme através do comando Trace, evitando que outros as copiem. Debugging Permited- permitir a depuração do filme.

ade e à mínima

filme).

Compressed Movie – aplicar a compressão ao filme; este filme só será visualizado no Flash Player 6 Password- palavra passe para permitir a importação e a depuração do filme. JPEG Quality – nível de compressão aplicado aos bitmaps; o valor 0 equivale à pior qualidcompressão máxima do filme, o valor 100 equivale a qualidade máxima e à compactação (aumentando assim o tamanho do

Emanuel cruz Formação 2005 copyright 67

Áudio Stream- taxa de compressão aplicada aos sons de fluxo; estas definições são iguais às aixa de dialogo Sound Properties: para alterar, carregue no botão Set.

Áudio Event - taxa de compressão aplicada aos sons de eventos; estas definições são iguais às definidas na caixa de dialogo Sound Properties: para alterar, carregue no botão Set. Override sound Settings: sobrepõe as definições criadas na caixa de diálogo Sound Properties pelas que são definidas através das opções Áudio Stream ou Áudio Event. Html(.html ou htm)

definidas na c

Neste separador podemos criar um documento Html que permita visualizar o filme Flash, incluindo para o efeito determinado parâmetros. As opções de publicação são:

: definir qual o modelo que servirá de suporte à criação do documento HTML; todos os

ensões horizontal e vertical da janela que contém o filme incorporado na página ção

dos valores numéricos nas caixas de texto Width e Heigth¸ a opção ela do browser) nas caixas de texto Width e

Templatemodelos disponíveis na caixa de menu pendente encontram-se na pasta Html, criada durante a instalação do Macromédia Flash; Dimension: dimHTML; a opção Match Movie é o padrão e define como dimensões as medidas do filme; a opPixels permite inserir determinaPercent permite inserir percentagens (em relação à janHeigth. Playback: definir o modo de reprodução. Paused at start: definir uma pausa na reprodução; quando activa esta opção torna falso o parâmetroPlay;

Emanuel cruz Formação 2005 copyright 68

Loop: repetir o filme assim que se chega ao último frame; quando activa, esta opção torna

o Menu;

ível apenas para Windows, substitui as fontes anti-aliased não disponíveis no sistema; quando activa, esta opção torna verdadeiro o parâmetro Device Fonte. Quality: definir o grau de anti-aliasing aplicado; varia entre Low (maior velocidade de reprodução; menos anti-aliasing) e Best (velocidade de reprodução mais lenta ; mais anti-aliasing); Window Mode disponível apenas para Internet Explorer na versão Windows e com o controlo ActiveX do Flash; a opção Windows define a reprodução do filme Flash numa janela rectangular aussente apenas numa página Web; a opção Opaque Windowless permite mover determinados elementos da página Html por detrás da área ocupada pelo Flash sem que nos o vejamos; a opção Transparent Windowless permite visualizar o fundo da página Html nas áreas transparentes ocupadas pelo filme Flash; Html alignment: definir a posição do filme Flash em relação à janela do browser; a opção Delfault torna central o filme em relação à janela ; a opção left alinha o filme pelo rebordo esquerdo da janela; a opção Rigth alinha o filme pelo rebordo direito da janela; a opção Top alinha o filme pele rebordo superior e donw pelo inferior da janela. Scale: a opção Delfault (show all) mantém todo o filme visível e proporcional dentro das dimensões definidas de Width e de Heigth; a opção No Border redimensiona proporcionalmente todo o filme para encaixar nas dimensões definidas através de Widthe de Heigth; a opção No Scale impede o redimensionamento do filme caso se alterem as dimensões do Flash Player. Flash alignment: definir os alinhamentos horizontais e verticais do filme dentro da área do filme; Show Warning messages: definir a activação de mensagens de erros relacionados com os tags.

o de in necessário.

verdadeiro o parâmetro Loop; Display menu: definir um menu de contexto assim que o utilizador efectue um clique com o botão direito do rato; quando activa essa opção torna verdadeiro o parâmetr Display Font: dispon

Gifs (.gif) O formato (GIF89a) é dos mais populares na web, já que para além da compressão, as sequencias podem ser animadas(ao contrario das JPEG e dos PNG)e podem substituir o filme Flash no caso utilizador não ter instalado plug-

Emanuel cruz Formação 2005 copyright 69

Dimensions: definir as dimensões verticais e horizontais da imagem, em pixels, através dade texto Width e Heigth; a opção Match Movie faz coincidir estas dimensões do filme definidas ncaixa de dialogo Document Properties;

s caixas a

layback: definir se o GIF será estático ou animado

tatic- definir um GIF estático;

oop Continuously – repetir continuamente a animação do GIF; epeat – definir o número de repetições;

inir a aparência visual do GiF;

IF, ideal para Downloads sobre redes com velocidades lentas; esta opção não deve ser aplicada sobre GIFs animados; Smooth- aplicas o anti-aliasing sobre GIF. Dither Solids- definir uma mistura de cores na paleta definida para representar determinada cor não definida; para além de não resultar muitas vezes em monitores de baixa resolução, aumenta a tamanho do ficheiro; Remove gradients- define a conversão da gradações em cores sólidas(a primeira cor definida no gradiente). Transparent: definir e a conversão da transparência e do fundo do filme Flash para o formato GIF; a opção Opaque faz com que o fundo se torne opaco; a opção Transparent torna-o transparente; a

P SAnimated – definir um GIF animado; LR Option-defOptimize Colors- remover da tabela de cores aquelas que não estão presentes na imagem, reduzindo assim o tamanho do ficheiro; esta opção não tem efeito sobre a paleta Adaptive; Interlace – definir uma exibição incremental do G

Emanuel cruz Formação 2005 copyright 70

opção Alpha torna-o invisível todas as cores cujo valor de transparência está abaixo do valor definido através da caixa de texto; Dither – definir o tipo de mistura de cores para representar uma cor não definida na paleta; a opção None não activa a mistura; a opção Ordered activa uma mistura razoável de cores com implicações mínimas no aumento do ficheiro; a opção Diffusion( só está funcional para a paleta de cores Web 216) activa a qualidade máxima na mistura de cores mas contribui significativamente para o aumento do ficheiro; Palette Type: definir a paleta de cores associadas ao GIF; Max colors: definir o número máximo de cores a ser criado; está disponível apenas para as paletas Adaptive e Web Snap Adaptive; Palette: disponível apenas para a paleta Custom, permite associar ao GIF. Determinada paleta já criada (ficheiro .act); Jpeg (.jpeg ou .jpg)

Este é o formato que contempla a compressão e é ideal para imagens com muitas cores (24 biti.e.; bitmapsou imagens com gradientes. Não contempla, no entanto sequênc

s), ias animadas.

ialoga Document properties.

inir o nível de compressão; quanto maior a compressão menor o tamanho do arquivo,

Progressive- é semelhante à opção Interlace das GIFs e permite uma exibição gradual da imagem.

Dimenssions – definir as dimensões verticais e horizontais da imagem, em pixels, através das caixas de texto Width e Heigth; a opção Match Movie faz coincidir estas dimensões do filme definidas na caixa de d Quality- defmas pior a qualidade das imagens; o valor 100 equivale à máxima qualidade;

Emanuel cruz Formação 2005 copyright 71

PNG (.png)

Este é o formato de bitmaps que contempla a transparência (canal alpha), tem algumas vantagens sobre os GIFs, nomeadamente nas áreas de compressão, da transparência e das cores, não contempla seçquencias animadas. Dimenssions – definir as dimensões verticais e horizontais da imagem, em pixels, através das caixas de texto Width e Heigth; a opção Match Movie faz coincidir estas dimensões do filme definidas na caixa de dialoga Document properties. Bit Deph: profundidade de cor associada à imagem; Options -definir a aparência visual do PNG Optimize Colors- remover da tabela de cores aquelas que não estão presentes na imagem

ida na paleta; a

, reduzindo assim o tamanho do ficheiro; esta opção não tem efeito sobre a paleta Adaptive; Interlace – definir uma exibição incremental do PNG, ideal para Downloads sobre redes com

elocidades lentas vSmooth- aplicar o anti-aliasing sobre PNG. Dither Solids- definir uma mistura de cores na paleta definida para representar determinada cornão definida; para além de não resultar muitas vezes em monitores de baixa resolução, aumenta a

manho do ficheiro; taRemove gradients- define a conversão da gradações em cores sólidas(a primeira cor definida no gradiente). Dither – definir o tipo de mistura de cores para representar uma cor não defin opção None não activa a mistura; a opção Ordered activa uma mistura razoável de cores com implicações mínimas no aumento do ficheiro; a opção Diffusion( só está funcional para a paleta de

Emanuel cruz Formação 2005 copyright 72

cores Web 216) activa a qualidade máxima na mistura de cores mas contribui significativamente

Palette Type: definir a paleta de cores associadas ao GIF; Max colors: definir o número máximo de cores a ser criado; está disponível apenas para as paletas Adaptive e Web Snap Adaptive; Palette: disponível apenas para a paleta Custom, permite associar ao GIF. Determinada paleta já criada (ficheiro .act); Filter Optiuons- definir o método de filtragem da imagem que é aplicado antes da compressão. Windows Projector (.exe) Através desta opção, são criados projectors (executáveis ou versões stand-alone) A partir dos filmes Flash, para ambiente Windows, com extensão .exe. Não existem quaisquer definições a especificar. Macintosh Projector (.hqx) Através desta opção, são criados projectors (executáveis ou versões stand-alone) A partir dos filmes Flash, para ambiente Macintosh, com extensão .exe. Não existem quaisquer definições a especificar. QuickTime (.mov)

para o aumento do ficheiro;

Através deste separador, podemos criar uma versão do nosso filme Flash no formato QuickTimepreservando a interactividade. Quando é criado um filme QuickTime o Flash é copiado para uma pista separada. As opções de publicação são:

Emanuel cruz Formação 2005 copyright 73

Dimenssions – definir as dimensões verticais e horizontais da imagem, em pixels, através das caixas de texto Width e Heigth; a opção Match Movie faz coincidir estas dimensões do filme

s dentro do filme Flash; a opção Auto torna a pista do filme Flash

a transparente a pista do filme Flas, visualizando-se assim todo o conteúdo

a colocação dos sons de fluxo do filme Flash numa pista sonora do uickTime.

ontroller- definir o tipo de controlador (comando de reprodução);

oop- repetição contínua;

ndo iniciada, esta opção faz com que se inicie automaticamente a execução do filme QuickTime; Play every frame – quando activa, esta opção faz com que sejam executados todos od frames, não se reproduzindo o som; File- quando activa , esta opção permite que os vídeos importados para os filmes Flash sejam parte interna deste, não havendo necessidade de referencias externas. Para testar cada um dos formatos de publicação, utilize o comando Publish Preview do menu File, criando assim ficheiros que poderão ser removidos posteriormente a partir da pasta que contém o filme Flash.

definidas na caixa de dialoga Document properties. Alpha definir o modo de transparência do filme Flash no formato QuickTime; as opções nas afectam os valores alpha definidotransarente quando sobreposta a outras ou torna-a opaca quando outras a sobrepõem; a opção Alpha-transparent torndas pistas colocadas por detrás; a opção Copy torna opaca a pista do filme Flash; Layer: definir o posicionamento da pista que contém o filme Flash. Streaming Sound- define Q C Playback definir o modo de reprodução do filme QuickTime L Paused At Start- qua

Emanuel cruz Formação 2005 copyright 74

E com estes conceitos todos já podem dor uso a imaginação utilizando o flash para poder aplicpara proveito próprio…

a-lo

Fontes de informação: http://www.actionscipts.org http://www.bertoflash.nu http://www.concept4web.com http://www.flashkit.com http://www.flahoo.com http://actionscript-toolbox.com

ttp://www.proflasher.comh http://www.flashcentral.com http://www.flashcfm.com http://www.flashhouse.net http://www.flashfilmmaker.com http://www.flashlite.net http://www.flashkills.com http://www.flashxpress.net http://www.flashenabled.com

ttp://virtual-fx.net/vfx/h http://www.trainingtools.com http://www.ultrashock.com

ttp://www.muinar.com/flashproh http://www.flashgeek.com

Emanuel cruz Formação 2005 copyright 75