Post on 24-Dec-2015
description
Animação 2D 1
|
P A R T E 1 ............................................................................................... 4
Parte 1 - Introdução .................................................................................. 4
Enquadramento do curso .................................................................................. 5
Objectivos Pedagógicos .................................................................................... 6
1.2. Objectivos Gerais ............................................................................... 6
1.3. Objectivos Específicos ......................................................................... 6
Estrutura Programática .................................................................................... 7
P A R T E 2 ............................................................................................... 8
Parte 2 - Desenvolvimento .......................................................................... 8
2. Flash .................................................................................................... 9
2.2. Flash – o que é? .................................................................................. 9
2.3. A quem se destina ............................................................................. 10
2.4. Flash Player ..................................................................................... 10
2.5. Características gerais ......................................................................... 11
3. PROJECTOS MULTIMÉDIA ............................................................................ 13
3.1. A riqueza da multimédia ...................................................................... 13
3.2. Concepção dos projectos ..................................................................... 14
4. DINÂMICA DO FLASH ................................................................................. 16
4.1. Metáforas ....................................................................................... 16
4.2. Interface ........................................................................................ 17
4.2.1. Gestão dos painéis ....................................................................... 22
4.3. Etapas ........................................................................................... 23
4.3.1. Criação/Importação do conteúdo ...................................................... 23
4.3.2. Organização e Sincronização ........................................................... 24
4.3.3. Adicionar interactividade/programação (opcional) ................................. 25
4.3.4. Publicação/ Exportação do filme ...................................................... 25
4.4. Ajuda ............................................................................................ 26
5. DO PALCO AOS BASTIDORES ........................................................................ 27
5.1. Separadores de documentos.................................................................. 27
5.2. Palco (stage) .................................................................................... 27
5.3. Camadas (layers) ............................................................................... 29
5.3.1. Criar/remover camadas ................................................................. 31
5.3.2. Criar/renomear pastas .................................................................. 31
5.3.3. Gerir pastas ............................................................................... 32
5.3.4. Apagar camadas e pastas ............................................................... 32
5.3.5. Alteração da ordem das camadas e pastas ........................................... 33
5.3.6. Seleccione camadas e pastas ........................................................... 33
Animação 2D 2
|
5.3.7. Copiar camadas .......................................................................... 34
5.3.8. Copiar pastas ............................................................................. 34
5.3.9. Modos de visualizarção das camadas e pastas ....................................... 34
5.3.10. Propriedades das camadas e pastas ................................................... 35
5.4. Linha do tempo (Timeline) ................................................................... 36
5.4.1. Mover ...................................................................................... 37
5.4.2. Redimensionar ............................................................................ 37
5.4.3. Barra de estados ......................................................................... 38
5.4.4. Cabeça de leitura (Playhead) .......................................................... 38
5.5. Frames ........................................................................................... 38
5.5.1. Tipos de frames .......................................................................... 39
5.5.2. Modos de visualização ................................................................... 40
5.5.3. Operações sobre frames ................................................................ 41
5.5.4. Rótulos, Comentários e Âncoras ....................................................... 44
5.5.5. Onion skin ................................................................................. 44
5.6. Símbolos ......................................................................................... 46
5.6.1. Tipos de símbolos ........................................................................ 46
5.6.2. Criação genérica de símbolos .......................................................... 48
5.6.3. Graphics ................................................................................... 49
5.6.4. Botões ..................................................................................... 49
5.6.5. Clips de filme ............................................................................. 50
5.6.6. Edição de símbolos ....................................................................... 51
5.6.7. Duplicação de símbolos ................................................................. 51
5.7. Biblioteca (libraries) ........................................................................... 52
5.7.1. Painel Library ............................................................................. 52
5.7.2. Redimensionar a janela ................................................................. 53
5.7.3. Ordenar itens ............................................................................. 54
5.7.4. Menu Options ............................................................................. 54
5.7.5. Bibliotecas comuns common libraries) ............................................... 56
5.7.6. Biblioteca de outros filmes ............................................................. 58
5.7.7. Bibliotecas partilhadas (shared libraries) ............................................ 58
5.7.8. Símbolos de outros Filmes .............................................................. 59
5.8. Instâncias ....................................................................................... 59
5.8.1. Criação de instâncias .................................................................... 60
5.8.2. Propriedades das instâncias ............................................................ 60
5.8.3. Quebra de ligação das instâncias ...................................................... 62
5.9. Um painel com história ....................................................................... 63
Animação 2D 3
|
6. Desenho de Objectos ................................................................................ 65
6.1. Cor e transparência ............................................................................ 65
6.1.1. Painel Color Mixer ....................................................................... 66
6.1.2. Gradientes ................................................................................ 68
6.1.3. Paletas ..................................................................................... 69
6.2. Personalização das ferramentas de desenho ............................................... 70
6.3. Ferramentas de desenho e pintura .......................................................... 70
7. TÉCNICAS DE ANIMAÇÃO ............................................................................ 76
7.1. Cenas ............................................................................................ 76
7.2. Animação frames-by-frame .................................................................. 77
7.3. Animação interpolada (tweening) ........................................................... 78
7.3.1. Interpolação de formas (shape tweening) ............................................ 78
7.4. Distribuir objectos pelas camadas ........................................................... 82
7.5. Guias de movimento ........................................................................... 83
7.5.1. Parte 3 - Conclusão ...................................................................... 87
Conclusão ................................................................................................... 88
Bibliografia ................................................................................................. 89
Nota ....................................................................... Erro! Marcador não definido.
Animação 2D 4
|
PARTE 1
Introdução
Parte 1 - Introdução
Animação 2D 5
|
Enquadramento do curso
É hoje fundamental, para o desenvolvimento dos diversos sectores, dinamizar e valorizar os
recursos humanos através de programas formativos adaptados às novas tecnologias.
É reconhecida a importância que as novas tecnologias desempenham no trabalho e na vida
moderna. Os computadores deixaram de ser considerados como objectos estranhos, tornando-
se um auxiliar precioso e indispensável ao desenvolvimento das actividades económicas e com
um profundo reflexo nas outras vertentes da vida humana, sejam elas de carácter social,
administrativo, cientifico, cultural e até do laser.
Esta situação, não permite que hoje, na generalidade das actividades profissionais, se possa
prescindir da utilização de recursos informáticos.
Animação 2D 6
|
Objectivos Pedagógicos
1.2. Objectivos Gerais
O curso de Produção Multimédia para a Internet – O Flash visa dotar os formandos dos
conhecimentos necessários para desenvolvimento de animação para sites com Flash MX,
animações com imagens, gráficos 2D, som e interactividade.
1.3. Objectivos Específicos
Em termos de competências específicas a adquirir, pretende-se que no final do curso os
formandos sejam capazes de:
Criar símbolos;
Trabalhar com layers;
Manipular Frames;
Tweening motion com motion guide;
Publicar e exportar projectos.
Animação 2D 7
|
Estrutura Programática
A estrutura programática do curso de formação foi desenvolvida tendo por base as
características do público-alvo, as suas necessidades de formação e os objectivos pedagógicos
que se pretendem alcançar com a intervenção formativa. Os conteúdos programáticos a
desenvolver visam, globalmente, o reforço do nível de conhecimentos e aptidões dos
formandos, de forma a potenciar a melhoria do seu desempenho profissional.
No âmbito do curso de formação, será prosseguido o seguinte plano de estudos:
Apresentação
Comportamento organizacional
Introdução ao multimédia local e em rede
Interface e ferramentas
Introdução à time line
Criação de símbolos
Introdução aos layers
Frame by Frame
Tweening
Comandos básicos
Test movie
Publicar e exportar projectos
Animação 2D 8
|
PARTE 2
Desenvolvimento
Parte 2 - Desenvolvimento
Animação 2D 9
|
2. Flash
2.2. Flash – o que é?
Semelhante à história de muitos outros programas, o Flash começou por ser Future Splasch
Animator, um pequeno programa de criação e de animação vectorial. Contudo, em 1997,
adivinhando o que viria a ser a base tecnologia da disponibilização de conteúdo multimédia
na web, a Macromedia compra a Future Wave technologies e modifica o nome do programa
para Flash, promovendo-o como uma ferramenta de autor para a criação de interfaces de
navegação para a web. Em 2005 a Macromedia foi comprada pela Adobe e muda o nome do
programa para Adobe Flash CS.
O formato VECTORIAL é aplicado aos objectos desenhados no Flash. Assentando em equações
matemáticas ou vectores, que incluem informação acerca das dimensões dos, objectos da
forma de preenchimento, da cor e da posição, este formato é independente da resolução, o
que significa que uma imagem que ocupe todo o ecrã do monitor não sofre nenhuma
degradação de qualidade após ter sido redimensionada a partir de outra mais pequena.
Este tipo de formato contrasta com o formato bitmap (mapa de bits), que representa uma
imagem através de um conjunto de PIXELS (unidade de medida dos pontos visíveis num ecrã)
agrupados de forma a criarem determinadas áreas coloridas. Devido ao facto de determinados
efeitos só poderem ser aplicados sobre este formato, o suporte a este tipo de imagens está
garantido no Flash, sendo posteriormente aplicada uma tecnologia de compressão optimizada
para a web.
A chave do sucesso do Flash é muito simples: integrar, interligar e compatibilizar na sua
génese tudo o que seja necessário (som, imagem fixa e animada, texto e vídeo) para criar
web sites, sejam ferramentas para CRIAÇÃO/EDIÇÃO DE IMAGENS, HTML necessário para
visualização do conteúdo nos browsers; PROGRAMAÇÃO básica e avançada... tudo isto é
possível manipular de maneira simples e consistente, obtendo-se em contrapartida um
resultado profissional e atractivo.
Aplicações web, interfaces de utilizador (ex. CD-ROM, DVD, telemóveis, PDA e outros
dispositivos móveis) ou e-learning são apenas algumas das áreas que utilizam conteúdo criado
com o Macromedia Flash. Proponho uma visita aos links seguintes para observar algumas das
potencialidades do Flash:
Animação 2D 10
|
www.evb.com
www.virtualbyron.com/vb.htm
www.ideum.com/sunearthviewer.html
www.hummer.com
2.3. A quem se destina
Estudos conduzidos pela independente NPD, revelam que 98 % dos browsers utilizados na web
estão em condições de apreciar as animações ou outros elementos criados no Flash.
Este programa tem interesse para a generalidade das entidades que utilizam a Web como
plataforma de distribuição de informação de carácter institucional, educativo, lazer,
publicidade ou de outros tipos. De entre os utilizadores do Flash, destacam-se:
Profissionais (ex. web desingners /programadores ) ligados à produção/ publicação de
interfaces de navegação para a web (ou outros suportes do tipo CD-ROM, DVD, televisão
interactiva, PDA, Pochet PC, consolas de jogo/entretenimento, etc.) e de animação rica em
multimédia;
Alunos, formadores de cursos nas áreas da Internet, multimédia ou ferramentas digitais.
Apesar de ser um programa com uma complexidade técnica maior do que, por exemplo, um
processador de texto vulgar, isto não significa que aqueles que no dia-a-dia apenas realizam
processamento de texto não possam criar web sites de grande riqueza visual, com elementos
de navegação, vídeo, logótipos animados, animações potentes e sincronizados com sons e com
um nível substancial de interactividade e programação.
2.4. Flash Player
Para visualizarmos os filmes criados no Flash, necessitamos de uma aplicação denominada
Macromedia Flash Player.
Ao tornar-se um standard na web ganhou o estatuto de ser suportado por diversas
plataformas, browsers e dispositivos. Apple, Microsoft, Netscape e AOL são alguns dos
exemplos de terceiros que suportam esta aplicação.
Animação 2D 11
|
Com o Macromedia Flash MX Professional 2004 surgiu a possibilidade de criar conteúdo
multimédia para uma versão específica do Flash Player, denominada Flash Lite, dirigida aos
dispositivos móveis. É uma versão semelhante ao Flash Player 4, sendo que está optimizada
para a memória, velocidade do processador e área de ecrã características dos dispositivos
móveis. O conteúdo criado no Flash Profissional pode ser validado para ser suportado pelo
Flash Lite, sendo que este contém algumas características, entre as quais:
Estarem reservadas determinadas teclas para efeitos de navegação (estas teclas podem variar
de dispositivo para dispositivo);
Algumas das funções e propriedades do ActionScript não suportadas;
Os formatos de som suportados são apenas o MIDI e o MFi.
Os dispositivos MicrosoftTV, Symbiam EPOC,PocketPC e outros podem disfrutar da
compatibilidade com o Macromedia Flash Player. O Flash Player poderá ser distribuído em
diferentes suportes (ex: CD-ROM; Intranet), pelo que deverá consultar os seguintes endereços
para obter mais informações:
http://www.macromedia.com/support/ shockwave/info/licensing/faq.html
http://www.macromedia.com/shockwave/dowload/license/desktop/
Com a “pré-instalação” nos browsers de maior relevo, não é de estranhar que principais
empresas líderes nos seus mercados tenham adoptado esta tecnologia.
Só para citar algumas: Cisco®, Compaq®, Intel®, Microsoft®, IBM®, Netscape, America
Online®, Apple®, Oracle, Disney, Paramount, Dreamworks, Fox, Sony Peugeot. Audi, Ford,
Volkswagen, Pepsi, etc...
Uma outra aplicação da Macromedia, o Macromedia Shochwave Player, também permite
visualizar conteúdo multimédia.
2.5. Características gerais
É inquestionável que vivemos hoje em dia o “sonho digital”. A mensagem, a ideia ou a linha
de força têm de vir revestidas de impulsos digitais instantâneos atractivos, interactivos e num
formato diversificado.
A incorporação de suportes como o CD-ROM nos computadores pessoais veio abrir uma luz ao
fundo do túnel no que diz respeito à experiência multimédia, principalmente ao nível da
percepção de cariz pessoal.
Animação 2D 12
|
Mas, depressa a necessidade individual se tornou um imperativo global. Sendo um fenómeno
de massas, nomeadamente a partia da década de 90, a www acelerou a convergência maciça
de diferentes formatos de informação numa plataforma comum de comunicação. Aliadas á
diversidade, surgiram também a morosidade e a (falta de) atractivamente.
Dúvidas cada vez mais unânimes pairavam na cabeça dos utilizadores: porquê suportar
tamanha lentidão nas ligações, para no fundo aceder a repositórios estáticos de informação,
sem qualquer tipo de interactividade? Para quando formatos de informação estandardizados e
optimizados para uma plataforma comum? Texto dinâmico, imagens fixas e animadas, som e
vídeo...será possível compatibilizar e sincronizar todos estes itens?
Estavam criadas as premissas para a vaga de fundo que ainda hoje se faz sentir, por exemplo,
no âmbito dos MÉTODOS DE COMPRESSÃO aplicados aos diferentes formatos, PNG, SWF, XML,
MP3 e outros tipos de formatos/tecnologias permitem perspectivar um universo dinâmico de
sensações digitais cada mais realistas.
A mais-valida do Flash reside basicamente em dois pontos: formato vectorial das imagens e
controlo rigoroso sobre as mesmas.
Uma característica implícita ao funcionamento do flasch diz respeito a uma inteligente
REUTILIZAÇÃO DE ELEMENTOS MULTIMÉDIA (um pouco semelhante à filosofia do Macromedia
Director). Como por exemplo imagens e sons, convertendo-os primeiro em elementos de uma
biblioteca e só depois aplicando diversas INSTÂNCIAS desses mesmos elementos em diferentes
situações, não contribuindo este facto para o aumento dos ficheiros de suporte, mas antes
mantendo tamanhos indicados para distribuição na web. Inclusive, as instâncias de um mesmo
objecto poderão ter características e comportamentos diferentes consoante o contexto em
estão inseridas.
Existe ainda a possibilidade de criar bibliotecas partilhadas com elementos (ex: um
determinado som que é invocado ao longo de um site) que poderão ser utilizado pelos
diferentes indivíduos que intervêm na concepção do projecto.
Os SCRIPTS e os COMPONENTES oferecem funcionalidades acessíveis aos mais inexperientes ao
mesmo tempo que garantem aos profissionais uma sofisticação na interactividade.
SCRIPTS são combinações de expressões que dão origem a determinadas instruções. Estas
instruções são criadas no Flash através da linguagem de programação ActionScrit, controlando
aquelas o comportamento de determinados objectivos e do filme em geral. Estas instruções
Animação 2D 13
|
são despoletadas através de determinadas através de determinadas eventos (ex: efectuar um
clique sobre determinado botão), desencadeando-se logo em seguida acções predefinidas.
Importa referir que o Flash está orientado para a criação e posterior distribuição de
conteúdo via web. No entanto, se assim o desejar, este mesmo conteúdo pode ser visto como
vídeo digital em ambas as plataformas Windows e Macintosh ( formato A V I ou QuickTime),
em CD-ROM, DVD ou noutro suporte digital compativel, num formato do tipo stand-alone,
juntamente com o Flash Payer devidamente licenciado. PDA, televisão interactiva e
consolas de jogos/entretenimento são outros dispositivos onde o Flash começa a ganhar
terreno.
Eis algumas das características gerais deste programa:
SUPORTE EM DIFERENTES PLATAFORMAS E DESPOSITIVOS –entre outras: Dispositivos portáteis,
consolas de jogos, televisão interactiva, rtc.;
SUPORTE PARA DIVERSOS STANDARDS INTERNET –HTML, MP3, XML.,ECMAScript, etc.;
INTEGRAÇÃO CLIENTE-SERVIDOR – através do Flash Remoting MX existe a intergação com o
ColdfFusion MX, Java e Microsoft.NET, entre outros;
CONTEÚDO COM ACESSIBILIDADES – suporte para utilizadores com incapacidade de várias
ordem;
TEMPLATES – a criação de templates personalizados e componentes de interface pré-
concebidos poderá originar ganhos de produtividade;
CONJUNTO PROFISSIONAL DE FERRAMENTAS –no seu ambiente de edição são disponibilizadas
ferramentas profissionais de design multimédia e de desenvolvimento para a web;
FERRAMENTAS DE DESENVOLVIMENTO – utilização de uma linguagem(ActonScript) potente,
versátil e eficaz com recurso a depuração de código.
Para os programas nesta área, a Macromedia disponibilizou o FLASH PLAYER SDK que contém
documentação sobre a portabilidade para qualquer plataforma, com referência às
implementações em Windows 32 ActiveX, Windows CE 3.0 para o PocketPC 2002 ActiveXe
Linux.
3. PROJECTOS MULTIMÉDIA
3.1. A riqueza da multimédia
Animação 2D 14
|
Ao tratarmos os elementos multimédia, (imagem, texto, som, vídeo e outros) como
OBJECTOS, estes tornam-se MODULARES, ou seja, podem ser movimentados livremente entre
aplicações desde que exista compatibilidade.
Vídeos, sons, textos, imagens fixas ou animadas e demais objectos são manipulados e o
respectivo comportamento pode ser definido via programação.
Para o Flash convergem vários tipos de formato de informação, enriquecendo assim os web
sites.
Imagens (BMP, JPEG, GIF, PNG), vídeo (QuickTime) e sons (WAV, MP3) são alguns dos tipos de
informação suportados. No Flash é possível EDITAR alguns destes elementos, INTERLIGÁ-LOS e
SINCRONIZÁ-LOS.
Uma das potencialidades do Flash na capacidade de divisão dos filmes em CENAS,
aumentando assim a flexibilidade na estruturação das animações.
3.2. Concepção dos projectos
A questão da DEFINIÇÃO DA AUDIENCIA é fulcral.
Quem trabalha nesta área sabe que o seu seguro morreu de velho... por isso, antes de
meter a “mão na massa” é usual dedicar grande parte do tempo do projecto á análise de pré
–requisitos. Inicialmente, teremos de dar resposta a questões do género:
A quem se destina o filme? Qual é o público-alvo?
Qual vai ser a mensagem? Em que formato?
É uma animação simples, linear ou destina-se a ser uma ferramenta de pesquisa interactiva
de formação? Sendo este último caso o pretendido, qual é a extensão do grau de
interactividade?
Quais os elementos média necessários? O documento irá conter, para além de imagens
Vectoriais, bimtaps, vídeo e sons?
Qual irá ser o suporte de distribuição? Será através da Internet, em CD-ROM do tipo stand-
alone?
De quanto é o orçamento afecto a este projecto?
Se a televisão já faz parte da nossa família, tal facto deve-se a uma cada vez MAIOR
PERSONALIZAÇÃO DA MENSAGEM, isto é, cada um de nós sente se cada vez mais representado
Animação 2D 15
|
nos seus gostos. A sofisticação da publicidade daquele meio de comunicação serve de
ensinamento para as plataformas tecnológicas mais recentes e, quando acompanhada de
humor, a combinação pode ser explosiva!
É muito comum no cinema os realizadores utilizarem folhas com as descrições das cenas (um
dos que recorre ao STORYBOARDING é o realizador Steven Spielberg). Este tipo de método
visa expor, de forma simples, as ideias e descreve de uma forma sumária o conteúdo. Ao
mesmo tempo, é um método eficaz de identificar potenciais problemas. Este tipo de
abordagem deve contemplar os itens do projecto: layout, tipos de animações e movimentos,
duração e sincronização, pontos de interactividade e outros que se acharem relevantes. Para
além de permitir explorar várias opções naqueles tópicos, este documento poderá servir de
suporte para discussão entre os intervenientes no projecto.
Muito importante para levar em consideração é o processador dos computadores... Mas
atenção! O PROCESSADOR DOS COMPUTADORES DE DESTINO e não as nossas super máquinas. É
um erro frequente julgar os outros à nossa imagem, imaginando uma audiência com meios
tecnológicos fartos, obtendo-se muitas vezes documentos desajustados às necessidades.
É sabido que em computadores lentos mesmo as animações mais “dinâmicas” poderão parecer
autênticos zombies. Para MENHORAR A PERFOMANCE, deverá ser evitada a animação
simultânea de muitos objectos, principalmente utilizando a interpolação (explicado mais
adiante), para além de, sempre que possível, restringir esta animação a pequenas àreas.
A VELOCIDADE DE PRODUÇÃO também é muitas vezes um factor mal compreendido. Não
devemos seguir a ideia de “quando mais rápido melhor”, já que para uma máquina que no
máximo reproduz 25 fps, de nada adianta estar definido no filme 100 fps. Recomenda-se 12
fps como um valor elevado e 24 fps como o máximo dos máximos. A excepção acontece
quando o filme é exportado no formato QuickTime ou AVI, em que se podem definir outros
valores.
A DIMENSÃO DO FILME é também importante e varia consoante a natureza do projecto. Sabe-
se que, em princípio, um filme em ecrã inteiro (full sreen é executado de forma mais lenta
do que outro com 1/3 do tamanho. Contudo, muitas vezes necessitamos de filme de ecrã
inteiro, por exemplo, para promover determinados produtos em que é importante visualizar
detalhes.
Animação 2D 16
|
A primeira impressão é muitas vezes decisiva e se ainda não existe um lema no que diz
respeito à visualização dos filmes Flash na web, arriscaria um do género “grandes demoras
implicam grandes desistências”. Para fugir a este lema, muitos sites utilizam PRELOADERS,
que mais não são do que pequenas sequências animadas que são executadas enquanto o
conteúdo do filme é carregado. No entanto, estas sequências não deverão ultrapassar 5 a 10%
da duração do filme, caso contrário, “grandes demoras implicam grandes desistências”.
4. DINÂMICA DO FLASH
Depois de descodificarmos alguns termos que fazem parte do léxico de tralho do Flash, será
focada a interface do programa, bem como toda a dinâmica subjacente à elaboração dos
filmes, i.é., as etapas a executar para a realização dos filmes flash. Vamos então perceber a
razão pela qual o flash é considerado o mago da web.
4.1. Metáforas
No Flash vamos encontrar cenários, elencos, cenas, efeitos especiais, montagens, sons e
muitas outras coisas.
Alguns termos que desde já convém descodificar:
DOCUMENTO- é o filme que vai sendo criado durante a fase de edição; tem como suporte o
ficheiro nativo do Flash, com extensão Fla; neste formato há sempre a possibilidade de editar
os elementos que o integram;
FILME FLASH- é uma versão optimizada tendo em vista a distribuição na web; tem como
suporte o ficheiro com o formato .swf (conhecido como swif, derivado de Shochwave Flash);
para efectuar alterações nestes filmes, estas terão de recair sobre o documento associado;
ANIMAÇÕES – parte de um filme, resultante de um conjunto de objectivos animados;
PROJECTOS (executáveis)- formato de publicação, com extensão .exe no ambiente Windows
e, hpx em Macintosh; são ficheiros que permitem correr os filmes nos computadores sem
Animação 2D 17
|
que seja necessário ter instalado o Macromedia Flash; este formato não permite a edição dos
conteúdos, sendo neste caso necessário editar os documentos de origem (fla);
EXECUTAR (fora)/REPRODUZIR (dentro)- embora o resultado seja semelhante, o que os
destingue é o facto de o filme estar ou não no ambiente de edição do Flash.
O Macromedia Flash é um programa que corre em diferentes sistemas operativos e estes
podem estar configurados para suportar diferentes utilizadores. Para lidar com as diferentes
configurações/personalizações, o Flash utiliza duas pastas;
First Run – contém os ficheiros comuns a todos os utilizadores;
Configuration –contém os ficheiros que cada utilizador personalizou durante a sessão da
aplicação.
Cada vez que iniciamos uma sessão do Flash, é feita uma comparação entre as duas pastas e
caso algum dos ficheiros comuns não se encontre na pasta Configuration (por exemplo, se foi
apagado), este é reposto.
4.2. Interface
À primeira vista a interface do Macromedia Flash pode parecer muito complicada, com muitas
áreas, muitos painéis acopláveis, etc. É provável que um designer personalize o ambiente de
edição de forma diferente à de um programador, já que desempenhando diferentes papéis
utilizam diferentes recursos (por exemplo, ferramentas).
Animação 2D 18
|
A partir do comando Preferentes do menu Edit, temos acesso ao separador General da caixa
de diálogo Preferences. Na parte inferior deste separador existem várias opções para o
arranque da aplicação: Show Start Page (mostrar página inicial), New Document (criar novo
documento), Last documents open (abrir documentos recentes) e No document ( sem
documento).
Panorâmica geral da interface do Flash:
Animação 2D 19
|
Painéis
Palco Linha do tempo
Camada
Ferramentas de desenho e pintura
Inspector de propriedades
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 se podem incluir:
FERRAMENTAS PADRÃO (Main)
Animação 2D 20
|
New – criar ficheiro
Open – abrir ficheiro;
Save – gravar ficheiro;
Print – Imprimir;
Cut – cortar;
Copy – copiar;
Paste – colar;
Undo – desfazer acção;
Redo – refazer acção;
Snap – encaixar objectos; é uma espéciedeíman;
Smooth – suavizar linhas e contornos;
Straighten – endireitar linhas e contornos;
Rotate and Sskew – rodar e inclinar objectos;
Scale – redimensionar objectos;
Align – alinhar objectos.
FERRAMENTAS DE DESENHO E DE PINTURA (Tools)
Animação 2D 21
|
BARRA DE EDIÇÃO (Edit Bar )
Retroceder ao modo de edição do documento;
Cena corrente;
Símbolo editado;
Menu pendente de acesso às cenas do filme;
Menu pendente de acesso aos símbolos do filme;
Percentagem de visualização do palco.
CONTROLADOR (Controller)
Semelhante a um vulgar comando de vídeo, permite aplicar sobre o filme determinadas
acções:
Animação 2D 22
|
Stop- para a reprodução
Rewind – “ rebobinar” o filme para o frame 1;
Step Back – retroceder frame a frame;
Play – reproduzir;
Step Forward – avançar frame a frame;
Go To End – saltar para o último frame.
A BARRA DE MENU
É uma das formas de aceder a alguns comandos do Flash. Para além destes menus, estão
também disponíveis menus de contexto, cujos comandos surgem referenciados à posição do
cursor do rato (efectuar um clique com o botão direito do rato sobre o palco, objectos,
frames, camadas, etc.)
As barras Main e Controller poderão estar flutuantes sobre a interface. Uma maneira rápida
para efectivar esta opção é a combinação <Ctrl> + Para voltar ao estado inicial, bastará
efectuar um duplo clique sobre a barra de título.
4.2.1. Gestão dos painéis
O ambiente de edição no Flash pode tornar-se confuso para quem não estiver habituado a
tantos painéis com diferentes tipos de informação.
Os PAINÉIS ajudam-nos a ver, organizar e modificar propriedades de diferentes elementos
que constam num determinado documento (por exemplo, frames, símbolos, instâncias, cores,
etc.). Os diversos painéis são invocados a partir do menu Window e estão divididos em três
categorias:
DESIGN PANELS (painéis ligados ao design) –Align, Color Mixer, Color Swaychs, Info, Scene e
Transform;
Animação 2D 23
|
DEVELOPMENT PANELS (painéis ligados à programação) – Actins, Bbehaviors, Componentes,
Componentes Inspector , Debugger, Output e Web Services;
OTHER PANELS (outros painéis) Accessibility, History, Movie Explorer, String e Common
Libraries.
4.3. Etapas
Para entendermos melhor a elaboração das animações, devemos seguir as seguintes etapas
básicas inerentes à criação de filmes no Flash.
4.3.1. Criação/Importação do conteúdo
Criamos novos documentos a partir da página inicial ou do menu File -> New. Há ainda a
possibilidade de criar a partir de um modelo/template. Um filme não é mais do que um
conjunto de OBJECTOS, criados com as ferramentas ao dispor no Flash ou importados de
outras fontes complementares e que se encontram, ou não, animados. Muitas das
propriedades destes objectos podem ser alteradas recorrendo a PAINÉIS específicos.
Animação 2D 24
|
Depois de personalizados, estes ou qualquer outro tipo de documentos poderão ser gravados
como template, através do comando Save as Template do menu File.
O conteúdo dos filmes do Flash é suportado por dois tipos de ficheiros: um de edição, com a
extensão .fla, onde são criadas as animações e aplicada a interactividade; ao outro, com
extensão .swf, é aplicada a compressão, de forma a obter uma versão optimizada para a
web, Como é lógico, o ficheiro de edição (documento) tem um tamanho maior quando
comparado ao filme Flash,
Os objectos criados ao ambiente de edição do Flash transformar-se-ão em elementos
efectivos do “elenco” logo que sejam convertidos em SÍMBOLOS (Modify ->Convert to Symbol)
e estejam assim armazenados numa BIBLIOTECA (library), facilitando desta forma a sua
gestão. Estes símbolos poderão ser criados de raiz no documento, através do comando New
Symbol do menu Insert.
A mais-valia do Fash consiste em aplicar diversas INSTÂNCIAS de um mesmo símbolo em
diferentes cenários e com diferentes propriedades.
4.3.2. Organização e Sincronização
Agora que já temos elementos disponíveis para o nosso filme, teremos de posiciona-lo no
PALCO (stage), a partir do qual visualizamos o decorrer de toda a acção.
A estrutura e a sequência da acção estão definidas na LINHA DO TEMPO (timeline), na qual
esta descrito onde e quando se passa determinado evento. Assim, utilizamos o palco e a Linha
do tempo para organizar os elementos no espaço e no tempo, através dos FRAMES.
OS FRAMES representam instantes temporais onde visualizamos o conteúdo do filme num
determinado momento, permanecendo este conteúdo visível enquanto o frame está no “ar”.
Dito de outra forma, ao reproduzirmos o filme, existe um PONTEIRO/CABEÇA DE REPRODUÇÃO
que se move de frame em frame (da esquerda para a direita na Linha do tempo, caso não
exista programação que altere esta ordem), lendo a informação que vai sendo visualizada no
palco. A velocidade do filme tem assim uma relação directa com o número de frames
(fotogramas) processados num segundo, i.é., fps.
Animação 2D 25
|
Quando estruturarmos o conteúdo dos nossos filmes, pensamos e agimos numa lógica de
sobreposição de diferentes objectos, de forma a criar determinados efeitos, noções de
profundidade, transparências, máscaras, etc. Para este efeito, utilizamos as CAMADAS
disponíveis na Linha do tempo.
As aplicações de diferentes TÉCNICAS DE ANIMAÇÃO, de que é exemplo a interpolação,
também estão contempladas no Flash.
Uma outra vantagem do Flash é a possibilidade de dividir o filme em CENAS para uma melhor
distribuição do conteúdo, obtendo-se assim uma flexibilidade inexistente noutros programas
similares. Como é óbvio, todas estas cenas vão constar da publicação do filme.
4.3.3. Adicionar interactividade/programação (opcional)
A INTERACTIVIDADE num filme pode estar representada através de botões ou noutros pontes,
permitindo a navegação por diferentes secções, cenas ou até saltos para o exterior (por
exemplo, para determinado URL).
O flash coloca à disposição do leitor determinados COMPONENTES que mais não são do que
elementos visuais de interface pré-concebidos (por exemplo, caixa de verificação caixa de
listagem, caixa de combinação, botão de opção, botão de comando, barras de deslocamento,
etc.).
A programação ACTIONSCRIPT 2.0 vem estender as capacidades do filme para além daquilo
que é efectuado no palco e na Linha do tempo.
Mas para quem a programação se resume a aplicar num filme o mínimo de interactividade,
estão disponíveis BEHAVIORS que poupam o utilizador de aprofundar a linguagem de
programação.
4.3.4. Publicação/ Exportação do filme
À medida que finalizamos o filme, vamos utilizando o CONTROLADOR (uma espécie de
comando de vídeo) para o reproduzir dentro do ambiente de edição do Flash, bem como para
efectuar TESTES.
Animação 2D 26
|
Depois de confirmado o pleno funcionamento, chega a altura de decidir o formato de
distribuição do filme (caso seja esse o seu destino)- ou EXPORTAR para um dos formatos
suportados ou PUBLICAR em diferentes formatos, com características específicas inerentes a
cada um deles.
4.4. Ajuda
Através dos comandos do menu Help acedemos ao painel Help que contém dois separadores:
Help- informação de ajuda generalizada;
How Do I...- pequenas lições sobre as funcionalidades do Flash; é por aqui que os
utilizadores menos experientes deverão começar.
Assim, só temos que clicar nas matérias do lado esquerdo dos separadores e vizualizar o
conteúdo pretendido no lado direito. No painel existem ainda alguns botões:
History Back – retroceder um passo;
History Forward – avançar um passo;
Table of Contents- mostrar o índice de conteúdos dos separadores;
Sarch- pesquisar palavras ou expressões;
Print- imprimir conteúdo;
Update- actualizar conteúdos via Internet.
No ambiente Windows é possível aumentarmos o tamanho da letra nos painéis de ajuda. Para
isso, prima (e não largue) a tecla <Ctrl> e rode o terceiro botão (normalmente um botão em
forma de roda) do rato.
Através do menu Help temos acesso a diferentes manuais em formato digital:
Animação 2D 27
|
GETTIN STARTED- serve de introdução ao Flash;
USING FLASH – informação acerca do ambiente de trabalho (interface, comandos, etc.) do
Flash;
USING COMPOTADORES – informadores sobre como criar, configurar e adicionar componentes
nos filmes;
ACTIONSCRIPT REFERENCE GUIDE – introdução aos conceitos da programação ActionScript.
5. DO PALCO AOS BASTIDORES
Como se processa a criação de um filme, focando para isso o palco onde decorre a acção e o
modo de interligar e compor os diferentes tipos de conteúdos.
5.1. Separadores de documentos
A forma de acesso aos documentos é através de separadores identificado com os nomes que
dão títulos aos ficheiros. Para aceder ao documento basta efectuar um clique sobre o
separador que contém o nome do filme, destacando-se esse separador em primeiro plano
relativamente aos restantes.
Sempre que editamos um documento, e até gravamos as alterações, aparece um asterisco à
direita do novo separador.
5.2. Palco (stage)
É no palco que criamos e visualizamos o conteúdo da nossa animação. Serve assim, de pano
de fundo para o nosso filme.
Animação 2D 28
|
Dizendo isto de uma outra forma: é no palco que está representado o conteúdo do filme, isto
é o palco representa o conteúdo, num determinado momento, da(s) camada(s). É através do
palco e os objectos nele apresentados que interagimos directamente com o filme.
Para uma melhor precisão e orientação, temos à disposição no palco uma régua (View ->
Rulers), uma grelha (View -> Grid -> Show Grid) e guias (View -> Guides -> Show Guides).
Quando criamos um novo documento, devemos definir logo de início algumas propriedades,
através da caixa de diálogo Document Properties que encontramos no menu Modify ->
Document:
Animação 2D 29
|
Dimensions –especificar o tamanho do filme, através da largura ( Width) e da altura (Height);
as unidades são representadas em pixels;
Em relação ao tamanho padrão do filme, ele é de 550x400 pixels; no que diz respeito aos
valores mínimo e máximo, eles são de 1x1 pixels e de 2880 x 2880 pixels, respectivamente.
Match:
Printer- ao efectuar um clique neste botão faz coincidir o tamanho do palco com a área de
impressão definida para a impressora;
Contents – ao efectuar um clique neste botão atribui um espaço idêntico às margens do palco;
se o objectivo for minimizar o tamanho do filme, deverá alinhar todos os elementos ao canto
superior esquerdo do palco antes de efectuar o clique neste botão;
Default – ao efectuar um clique neste botão atribui ao palco o tamanho por valor assumido;
Background Color – definir a cor de fundo do palco através da paleta;
Frame Rate – definir a velocidade de reprodução do filme, i. é ., o número de frames
(fotogramas ou quadros) exibidos num segundo (fps);
Se, por exemplo, definirmos uma velocidade de 10 frames por segundo para determinado
filme, isto quer dizer que num segundo vão ser percorridos 10 frames ou, por outras palavras,
os objectos de cada frame permanecerão no palco (no “ar”) cerca de 1/10 segundos. O valor
normal indicado para a reprodução de animações nos web sites varia entre 8 e 12 fps. No
entanto, não custa nada ir testando diferentes velocidades...
Ruler Units - unidade de medida da régua (Inches, Inches decimal, Points, Centimeters,
Milimeters e Pixels);
Make Default – aplica as definições escolhidas a todos os novos documentos.
5.3. Camadas (layers)
Animação 2D 30
|
As CAMADAS são o coração do Flash. Reparem no seguinte: com uma ferramenta deste tipo,
com todas as potencialidades disponíveis e com uma inspiração “divina”, podemos cair (e
bem!) na tentação de criar animações complexas, com uma variedade de objectos distintos,
com diferentes posições perspectivas, tamanhos, formas, cores, transparências, etc...!
Ora, até aqui tudo bem. Mas... como é possível organizar toda esta panóplia de itens, de uma
forma integrada, coerente, realística e independente? Através das camadas.
A analogia recorrente para a abordagem das camadas é imaginá-las como um conjunto de
folhas transparentes, do tipo papel vegetal, sobrepostas umas em cima das outras.
Transpondo isto para o Flash, vemos que as camadas são linhas horizontais que atravessam a
Linha do tempo (timeline).
Por valor assumido, ao criar um documento no Flash é criada apenas uma camada na Linha do
tempo. Sabendo nós que o aumento do número de camadas não contribui para o aumento de
tamanho do documento é possível ir adicionando camadas sucessivas até ao limite imposto
pela memória disponível no computador.
A vantagem desta abordagem. Comum a outros programas, como por exemplo, o Adobe
Photoshop e o próprio Macromedia Director (com os canais do Score) recai na separação
entre, por exemplo, objectos estáticos e objectos animados, permitindo, por um lado, uma
fácil identificação das porções que compõem a animação e, por outro, a edição independente
de determinados objectos, sem interferir assim nos demais.
Para aplicar sons e acções a um filme, utilizam camadas separadas.
Animação 2D 31
|
No Macromedia Flash existe a possibilidade de criação de PASTAS na Linha do tempo que nos
permitem organizar as camadas segundo determinados critérios (por exemplo, de acordo com
o tipo de objectos nela contidos).
5.3.1. Criar/remover camadas
Sempre que uma nova camada é adicionada à Linha do tempo, esta é colocada acima da
camada ou pasta previamente seleccionada. Efectue um dos seguintes processos:
Invoque o comando Layer do menu Insert;
Efectue um clique no botão Insert Layer que está posicionado na parte inferior da área das
camadas.
O nome que o Flash aplica à camada está directamente relacionado com o número de
camadas ou pastas já criadas (Layer 1, Layer 2, Layer 3... Layer n). Ora, este critério pode
não ser o mais coerente para o nosso projecto, pelo que sempre que possível aquele nome
deverá reflectir o tipo de objectivos e as acções a eles associadas. Para alterar este nome,
podemos efectuar um duplo clique sobre a camada ou invocar o comando Layer do menu
Modify (explicado mais adiante) e escreve o novo nome.
5.3.2. Criar/renomear pastas
Sempre que uma nova pasta é adicionada à Linha do tempo, esta é colocada acima da camada
ou pasta previamente seleccionada. Efectue um dos seguintes processos:
Animação 2D 32
|
Invoque o comando Layer Folder do menu Insert;
Efectue um clique no botão Insert Layer Folder que está posicionado na parte inferior da área
das camadas.
O nome que o Flash aplica à pasta está directamente relacionada com o número de pastas ou
camadas já criadas (Folder 1, 2, Folder 3... Folder n). Ora, tal como acontece com a
criação de camadas, este critério pode não ser o mais coerente para o nosso projecto, pelo
que sempre que possível aquele nome deverá reflectir o tipo de camadas que residem na
pasta. Para alterar este nome, podemos efectuar um duplo clique sobre a pasta ou invocar o
comando Layer do menu Modify e escrever o novo nome.
5.3.3. Gerir pastas
As estruturas de pastas no Flash seguem a filosofia de “directório” que encontramos em
alguns sistemas operativos. Assim as pastas podem conter não só camadas, mas também
outras pastas.
Podemos utilizar o triângulo logo atrás no nome da pasta para EXPANDIR ou FECHAR PASTAS.
Para MOVER UMA PASTA ou UMA CAMADA PARA DENTRO DE UMA PASTA, basta arrastá-los.
No processo de arrastamento das camadas para uma nova posição, e para que nenhuma caia
inadvertidamente numa pasta, mantenha fechada (s) a(s) pasta (s) por onde irá passar a
camada.
5.3.4. Apagar camadas e pastas
Para APAGAR UMA CAMADA ou UMA PASTA, e assim todos os objectos nelas contidos,
efectuarmos um dos seguintes processos:
Seleccione a camada ou a pasta e efectue um clique no botão Delete Layer que está
posicionado na parte inferior da Linha do tempo;
ou
Arraste a camada até ao botão Delete Layer.
Pode utilizar a tecla de <Shift> para seleccionar blocos de camadas/pastas adjacentes ou a
tecla de <Ctrl> para camadas/pastas não adjacentes. O que pode acontecer é que vai apagar
Animação 2D 33
|
algumas vezes “coisas” por engano. Não se esqueça do comando Undo do menu Edit que
permite desfazer acções.
5.3.5. Alteração da ordem das camadas e pastas
A HIERARQUIA DE SOBREPOSIÇÃO no palco é o reflexo directo da forma como estão ordenadas
as camadas na Linha do tempo. Assim, os objectos que pertencem as camadas posicionadas
mais acima na área das camadas são exibidos à frente dos outros objectos contidos nas
camadas mais abaixo.
Dito de forma, um objectivo está mais perto de nós e mais visível em relação aos restantes,
quando mais acima (na área das camadas) estiver a camada que o contém. Para alterar esta
ordem: arraste a camada ou a pasta que se pretende reordenar para uma nova posição.
5.3.6. Seleccione camadas e pastas
A SELECÇÃO DE UMA DETERMINADA CAMADA pode ser efectuada com um dos seguintes
processos:
Seleccionar um objecto no palco;
Seleccionar um determinado frame na Linha do tempo;
Efectuar um clique sobre o nome da camada na Linha do tempo.
Pode utilizar a tecla de <Shift> para seleccionar blocos de camadas adjacentes ou a tecla de
<Ctrl> para camadas não adjacentes.
Animação 2D 34
|
Para SELECCIONAR PASTAS, basta efectuar um clique no nome.
5.3.7. Copiar camadas
O processo de cópia no Flash assume um papel importante, já que com ele é possível copiar
todo o conteúdo de uma camada ou apenas algumas secções da sequência de uma
determinada animação. Mais, esta cópia pode ocorrer entre camadas do mesmo filme. A
camada que irá receber a informação copiada herda o nome da camada atrvés do qual
derivou o conteúdo.
Assim, para efectuar a CÓPIA DE UMA CAMADA:
Efectue um clique no nome da camada que irá ser copiada, de forma a seleccioná-la;
Invoque o comando Copy Frames atrvés do menu Edit; ->Timeline;
Carregue no botão Insert Layer; temos assim uma nova camada criada que irá receber o
conteúdo entretanto copiado;
Clique na nova camada e invoque o comando Paste Frames do menu Edit
5.3.8. Copiar pastas
Para COPIAR PASTAS:
Efectue um clique no triângulo à esquerda da pasta de forma a fecha-la; depois um clique no
nome da pasta cujo conteúdo irá ser copiado, de forma a seleccioná-la;
Invoque o comando Copy Frames do menu Edit;
Carregue no botão Insert Layer Folder ou invoque o comando Layer Folder do menu Insert;
temos assim uma nova pasta criada que irá receber o conteúdo entretanto copiado;
Clique na nova pasta e invoque o comando Paste Frames do menu Edit.
5.3.9. Modos de visualizarção das camadas e pastas
Uma das vantagens do Flash tem a ver com a flexibilidade ao nível da edição das camadas
(apenas uma de cada vez), i e ., durante o processo de edição podemos apenas querer
camadas, para impedir que a edição de algumas interfira no conteúdo de outras. Assim são
quatro os modos de visualização para efeitos de edição:
NORMAL - é o modo que o Flash aplica, por valor assumido, assim que criamos uma nova
camada ou pasta, ou quando determinado objecto é importado, criado criado ou colado no
Animação 2D 35
|
palco; ícone (sob a forma de lápis) logo a seguir ao nome da camada indica-nos qual a camada
actual;
OCULTO - ocultar o conteúdo de camadas ou pastas de maneira a realçar de forma a aparecer
um X; ao ocultar uma pasta está também a ocultar todas as camadas ou pastas nela contidas;
caso queiramos todas as camadas e pastas, efectuamos um clique na coluna com um olho;
mantendo a tecla <Alt> premida e efectuando um clique sobre a primeira coluna à direita do
nome de determinada camada ou pasta, ocultamos todas as outras; para mostrar de novo o
conteúdo, repetimos a operação;
As camadas ou pastas ocultas, apesar de poderem ser exportadas, não poderão ser editadas.
A ocultação das camadas ou pastas não é preservada quando o filme é publicado.
BLOQUEADO - bloquear o conteúdo de camadas ou pastas para que seja visualizado o
conteúdo das mesmas, mas impossibilitada a sua edição, evitando erros acidentais. Para
ocultar determinada camada ou pasta, efectue um clique na segunda coluna á direita do
nome dessa camada ou pasta de forma a aparecer um cadeado ; ao bloquear uma pasta está
também a bloquear todas as camadas ou pastas nela contidas; caso queiramos bloquear todas
as camadas e pastas, efectuamos um clique na coluna com um cadeado (Figura 4.19);
mantendo a tecla <Alt> premida e efectuada um clique sobre a segunda coluna à direita do
nome de determinada camada ou pasta, bloqueamos todas as outras; para desbloquear de
novo, repetimos a operação;
CONTORNOS - aplicar contornos coloridos ao conteúdo de camadas ou pastas para que este
seja facilmente identificado no palco; para aplicar um determinado contorno aos objectivos
de uma camada, efectue um clique na última coluna à direita do nome dessa camada de
forma a aparecer um quadrado sem preenchimento; ao efectuar um clique na última coluna à
direita do nome de uma pasta, aplica contornos a todos os objectos camadas, efectuamos um
clique na última coluna; mantendo a tecla >Alt> premida e efectuado um clique sobre uma
camada, aplicamos contornos a todas as outras; para retirar os contornos, repetimos a
operação.
Diferentes camadas podem ter diferentes modos de visualização e a mesma camada pode
acumulada cada um destes modos. Por exemplo, ter uma camada bloqueada e com um
determinado contorno, enquanto outra está oculta.
5.3.10. Propriedades das camadas e pastas
Muitas das operações descritas anteriormente estão disponíveis na caixa de diálogo Layer
Properties, acessível a partir do menu Modify ->Timeline -> Layer Properties:
Animação 2D 36
|
Name- atribuir um nome à camada ou pasta.
Show - ocultar/mostrar conteúdo da camada ou pasta.
Lock - bloquear/desbloquear camadas ou pastas.
Type – definir o tipo de camada.
Normal - camada normal ou converter pasta em camada .
Guide - vincular camadas à camada guia de movimento.
Mask - definir camada como máscara.
Masked – vincular camadas á camada de máscara.
Folder - converter camada em pasta; se a camada tiver conteúdo, deparamo-nos
com uma caixa de diálogo.
Outline color – definir cor do contorno aplicado à camada.
View layer as outlines – visualizar o conteúdo da camada através de contornos.
Layer Height - definir altura da camada (uma maior altura pode ser útil para Camadas
que contêm sons, por exemplo).
Para aceder rapidamente à caixa de diálogo Layer Properties, efectue um duplo clique sobre
o ícone Layer à esquerda do nome da camada.
5.4. Linha do tempo (Timeline)
Se as camadas são o coração do Flash, o cérebro dos filmes reside na LINHA DO TEMPO.
Aqueles que já trabalham no Macromedia Director decerto encontram algumas semelhanças
entre a Timeline e o Score, pois bem, a lógica é quase a mesma...
Animação 2D 37
|
Um FRAME pode conter várias camadas, i. é., podemos (e devemos) dividir os diversos
componentes da nossa animação por diferentes camadas, seguindo uma lógica de
sobreposição, tendo sempre em vista a composição final dos objectos.
Pense, pense e volte a pensar na composição dos elementos no palco, i. e., a sobreposição
de objectivos tendo em conta as respectivas camadas. É a parte mais criativa, interessante
e importante do Flash!
É na Linha do tempo que iremos temporizar e sincronizar os objectivos, definindo os
respectivos Timings de entrada e saída. Quando um filme é inicializado, a Linha do tempo é
percorrido da esquerda para a direita pela CABEÇA DE LEITURA (playhead), para que a
informação contida nos frames seja processada.
A sequência do filme não é obrigatoriamente linear, dependendo da estrutura elaborada e da
programação aplicada.
5.4.1. Mover
A dinâmica de funcionamento com a Linha do tempo é similar à adoptada para os painéis.
Assim, podemos desacoplar a Timeline através do canto superior esquerdo e colocá-la noutras
posições ou convertê-la numa janela flutuante.
Basta apenas arrastá-la pelo ambiente de edição do Flash; para evitar o encaixe,
pressionamos a tecla <Ctrl>.
A Linha do tempo ainda ser expandida ou fechada, utilizando para o efeito o triângulo que se
encontra à esquerda do nome Timelie ou efectuando um duplo clique sobre esse mesmo
nome.
5.4.2. Redimensionar
Animação 2D 38
|
A Linha do tempo pode ser redimensionada. Para isso, colocamos o cursor no limite da janela
e arrastamos para redimensionar. Com isto alargamos verticalmente a área das camadas. Esta
área também pode ser alargada horizontalmente.
5.4.3. Barra de estados
A barra de estados fornece-nos algumas informações.
Current Frame –frame actual, cujo conteúdo está visível no palco;
Frame Rate – quando o filme não está a ser executado indica a velocidade de reprodução
especificada na caixa de diálogo Document Properties ( ao efectura um duplo clique nesta
área, acedemos àquela janela); quando reproduzimos o filme, o valor vai sendo
constantemente, reflectindo a velocidade real, que poderá estar afastada da velocidade
previamente especificada devido às caracteristicas do computador que processa a animação;
Elapsed Teme –espaço tempo (segundos) decorrido entre o primeiro frame actual.
5.4.4. Cabeça de leitura (Playhead)
A CABEÇA DE LEITURA permite identificar qual o frame actual. Podemos percorrer os frames
arrastando a cabeça para a esquerda ou direita. O botão Center Frame permite centrar a
Linha do tempo relativamente ao frame actual:
5.5. Frames
Os FRAMES são instantes temporais do filme que nos mostram o conteúdo das camadas. É
também no frame que poderá residir determinada programação direccionada para o
comportamento do filme.
Provavelmente já ouviu a expressão “tweening”, um conceito referente aos frames, está
subjacente na sua dinâmica. Designam-se IN-BETWEEN FRAMES (frames intermédios) os
frames que estão determinados por frames mestre e que representam pequenos incrementos
necessários para simular determinado ou efeito. O mais espectacular é que o próprio Flash se
se encarrega de os criar, poupando-nos muito trabalho.
Animação 2D 39
|
5.5.1. Tipos de frames
Consoante o tipo de animação requerido, vamos ter associados diferentes frames.
Assim temos:
FRAMES VAZIOS – são frames desprovidas de conteúdo (com um fundo branco) e que são
inseridos por valor assumido na Linha do tempo assim que criamos um novo documento; a
reprodução cessa a partir do ponto em que todas as camadas contêm frames vazios;
FRAMES ESTÁTICOS – estes frames são sempre precedidos por keyframes; assim o conteúdo do
keyframe aparece reflectido em todos os frames estáticos seguintes até ser encontrado um
novo keyframe; são representados a cinzento claro;
FRAMES MESTRES/CHAVES (KEYFRAMES)- é neste tipo de frames que se definem modificações
a diversos níveis, como por exemplo alterações no movimento ou nas características dos
objectos (por exemplo, cor e dimensão); adição ou remoção; para criar um keyframe
invocamos o comando Keyframe através de Insert -> Timeline ou pressionamos a tecla de
função F6. Por valor assumido, o primeiro frame de cada camada é automaticamente um
frame mestre.
Para melhor identificarmos este tipo de frames e os respectivos tipos de animação associados
(explicados no capítulo das animações), vejamos:
os frames mestres com um pequeno a apenso representam frames com programação;
os frames mestres que referenciam interpolação de movimento estão representados por um
ponto preto e os respectivos frames intermédios têm uma seta preta com um fundo azul
claro a representá-lo;
Animação 2D 40
|
os frames mestres que referenciam interpolação de forma (explicado no âmbito das
animações) estão representados por um ponto preto e os respectivos frames intermédios têm
uma seta preta com um fundo verde claro a representá-los;
Frames com uma linha tracejada referenciam um processo de interpolação
5.5.2. Modos de visualização
Através do menu de exibição dos frames, no canto superior direito da Linha do tempo é
possível acedemos a várias opções no diz respeito ás dimensões das células (quadrículas que
resultam da intersecção da camada com o frame):
Tiny – Células com largura mínima;
Small –células com largura pequena;
Normal – células com largura normal;
Médium- células com largura média;
Large – células com largura grande. Este formato é indicado por exemplo para frames
que contenham sos, de forma a melhor visualizar o formato das ondas sonoras;
Short- encurtar as linhas;
Tinted Frames – colorir os frames que têm conteúdo;
Preview- permite visualizar apenas o conteúdo de cada frame, informação esta
redimensionada de forma a encaixar nas dimensões dos frames , da Linha do tempo,
podendo assim ocorrer variações aparentes no tamanho do conteúdo;
Preview In Contet- permite visualizar totalmente cada frame do filme, informação
esta redimensionada de forma a encaixar nas dimensões dos frames da Linha do
tempo. Esta forma de visualização permite assim observar a movimentação dos
objectos dentro dos respectivos frames durante a reprodução da animação. No
entanto, os elementos que a constituem poderão parecer ter uma menor dimensão.
Animação 2D 41
|
5.5.3. Operações sobre frames
Agora que já sabemos quais os tipos de frames disponíveis na Linha do tempo, vamos
descrever as principais operações que incidem sobre eles:
Para SELECCIONAR UM DETERMINADO FRAME:
efectue um clique sobre o frame, com a tecla < Ctrl > premida.
Para SELECCIONAR UM INTERVALO DE FRAMES:
efectue um clique no primeiro frame do intervalo e arraste até alcançar o último frame;
liberte o botão do rato para se certificar que o intervalo seleccionado é o desejado.
Para INSERIR FRAMES ESTÁTICOS:
seleccione um frame vazio na Linha do tempo e invoque o comando Frame através de Insert
-> Timeline.
Para INSERIR FRAMES ESTÁTICOS NUM INTERVALO DE FRAMES:
seleccione um frame ou uma porção do intervalo de frames já existente; o número de
frames a inserir equivale ao numero de frames seleccionados;
invoque o comando Frame através de Insert -> Timeline; os novos frames são introduzidos à
direita daqueles previamente seleccionados.
Para INSERIR FRAMES MESTRES NUM FRAME VAZIO:
seleccione um frame vazio na camada;
invoque o comando Blank keyframe através de Insert -> Timeline; deparamo-nos agora com
um rectângulo branco que indica onde acaba o conteúdo de um frame mestre e começa
outro.
Animação 2D 42
|
Para INSERIR FRAMES MESTRES VAZIOS NUM INTERVALO DE
FRAMES:
seleccione um determinado frame de um intervalo frames;
invoque o comando Bank keyframe através de Insert -> Timeline; o frame previamente
seleccionado foi convertido num frame mestre e o conteúdo dos frames subsequentes foi
removido.
Para INSERIR UM FRAME MESTRE:
seleccione um frame vazio ou estático;
invoque o comando Keyframe através de Insert -> Timeline; se o frame previamente
seleccionado for um frame vazio, serão um frame estáticos; caso a selecção prévia tenha
incidido sobre um frame estático, este é convertido em frame mestre.
Para INSERIR UM FRAME MESTRE NUM INTERVALO DE FRAMES:
seleccione um intervalo de frames;
invoque o comando Keyframe através de Insert -> Timeline; automaticamente o último frame
seleccionado é convertido em frame mestre.
Para COPIAR E COLAR FRAMES – são utilizados os comandos Copy
Frames e Paste Frames, ambos através de Edit -> Timeline, com funções
diferentes em relação aos tradicionais comandos de copiar e de colar outros objectos. Para
entender melhor estes conceitos, vamos realizar o seguinte exercício:
crie um novo documento, com frames mestres nas posições 1,3,5,7 e 9:
Animação 2D 43
|
em cada destes frames mestre desenhe o número da respectiva posição, com a ajuda da
ferramenta Text da barra de desenho;
seleccione o keyframe 3 e invoque o comando Copy Frames através de Edit - Timeline;
com o frame 4 seleccionado, invoque o comando Paste frames através de Edit -> Timeline ;
este frame (que antes era um frame intermédio) recebe o novo conteúdo e converte-se num
frame mestre;
com o keyframe 5 seleccionado, invoque de novo o comando Paste Frames através de Edit ->
Timeline; verificamos que o conteúdo é substituído pelo novo conteúdo proveniente do
keyframe 3;
com o frame 4 seleccionado, invoque de novo o comando Paste Framesatravés de Edit ->
Timeline; vereficamos que são criados novos frames intermédios e existe agora o novo frame
mestre 14;
Para MOVER OU DUPLICAR FRAMES:
seleccione um frame ou um intervalo frames;
arraste os frames para uma nova secção da Linha do tempo; ao manter pressionada a tecla
<Alt> enquanto arrasta, efectua uma duplicação.
Para ELIMINAR O CONTEÚDO E REMOVER FRAMES:
O comando Clear Keyframe do menu Modify -> Timeline retira o caracter de frame mestre
específico ou a um intervalo de frames ; ao invocarmos este comando é o conteúdo do frames
mestres, estes tornam-se frames intermédios e o respectivo conteúdo é o conteúdo do frame
precedente; no entanto, este comando não interfere quanto ao número de frames num filme;
o comando Remove Frames do menu Edit -> Timeline elimina efectivamente frames,
frames mestres ou sequência de frames, retirando-os inclusive do filme, reduzindo assim o
número de frames que o constituem.
Muitas vezes torna-se difícil eliminar um frame mestre sem primeiro eliminar os frames
intermédios. Para evitar esta situação, seleccione todos os frames intermédios entre os
frames mestres que se querem eliminar ou elimine todo o conteúdo do frame
mestre antes de invocar o comando Remove Frame. Pode, em alternativa, invocar primeiro o
comando Clear Keyframe e só depois o Remove Frame, caso o objecto seja reduzir o número
de frames do filme.
Animação 2D 44
|
5.5.4. Rótulos, Comentários e Âncoras
Para CRIAR UM RÓTULO, UM COMENTÁRIO ou UMA ÂNCORA;
seleccione um frame mestre; caso o inspector de propriedades não esteja visível, invoque o
comando Properties do meu window;
Digite uma descrição na caixa de texto Frame;
A partir do menu pendente Label Type defina qual o tipo associado à descrição:
Para visualizarmos a informação, necessitamos de posicionar o cursor sobre o frame mestre.
Os rótulos são identificados na Linha do tempo através de uma pequena bandeira vermelha;
os comentários por duas barras verdes.
5.5.5. Onion skin
O termo ONION SKIN deriva do processo utilizado pelos desenhadores convencionais que
utilizam diversas folhas transparentes (daí a analogia com “ casca de cebola”) para
Animação 2D 45
|
desenharem determinados elementos, tendo como referência um ou mais elementos que
compõem a animação. A aplicação desta técnica no contexto de edição de filmes do Flash
permite-nos visualizar múltiplos frames simultaneamente, efectivando a sua edição.
Para visualizarmos o conteúdo de vários frames através do onion skin:
Efectue um clique no botão Onion Skin:
repare que o conteúdo de todos os frames incluídos nos marcadores de onion skin aparece
esbatido Os objectos deste conteúdo não podem ser editados, apenas os objectivos do frame
actual, i. e., onde está posicionada a cabeça de leitura;
O conteúdo assente em camadas bloqueadas ou ocultas não é visível quando está
activo o onion skin.
Para visualizar apenas os contornos do conteúdo de vários frames através do onion skin:
Efectue um clique no botão Onion Skin Outlines; repare que do conteúdo de todos os frames
incluídos nos marcadores de onion Skin aparecem apenas os contornos. O funcionamento
deste botão é semelhante ao botão citado anteriormente;
Não esqueça que para cada camada pode atribuir uma cor diferente no que diz respeito ao
contorno, facto este que poderá facilitar o processo de edição.
Para modificarmos o número de fraes pertencentes ao intervalo definido pelos marcadores
de onion skining:
Efectue um clique no botão Modify Onion Markers;
Deparamo-nos com um menu de contexto e várias operações:
Always Show Marke quando seleccionada, permite visualizar os marcadores mesmo quando o
onion Skin está desactivado;
Animação 2D 46
|
Anchor Onion – aplica o onion skin a um intervalo fixo de frames, i, e., o Intervalo não se
desloca à medida que avançamos para outras secções da Linha do tempo. O intervalo poderá
ainda ser rendimensionado arrastando cada um dos marcadores para uma nova posição, i., e
para um novo frame;
Onion 2 – aplica o onion skin os dois frames à esquerda e à direita do frame actual, i. e., da
cabeça de leitura;
Onion 5 – aplica o onion skin aos cinco frames à esquerda e à direita do frame actual;
Onion All – inclui o onion Skin em todos os frames à esquerda e à direita do frame actual.
Para editarmos múltiplos frames (e não só o frame actual) pertencentes ao intervalo definido
pelos marcadores de onion skinnig:
Efectue um clique no botão Edit Multiple Frames;
Efectue um clique no botão Modify Onion Markers e escolha a opção Onion All; podemos assim
seleccionar, redimensionar, mover ou rodar todos os frames simultaneamente.
5.6. Símbolos
Um SÍMBOLO é criado uma única vez e vai sendo utilizado ao longo do documento (ou noutros
documentos, i. e., noutros filmes), sem que isto contribua de forma significativa para o
aumento do filme, já que é armazenado na bilioteca e o download do símbolo ocorre uma
única vez, podendo haver várias INSTANCIAS a ele referenciadas.
Apenas os símbolos efectivamente utilizados no documento serão incluídos na biblioteca do
filme publicado.
Qualquer objecto criado no palco ou importado para o documento pode ser convertido em
símbolo.
Para um melhor performance, deverá sempre pensar em converter os objectos em símbolos.
5.6.1. Tipos de símbolos
No Macromedia Flash existem três tipos de símbolos; GRAPHICS, BOTÕES e CLIPS DE FILME.
Cada um deles tem uma Linha do tempo e um palco específicos. Têm assim diferentes
Animação 2D 47
|
particularidades, mas basicamente o que os distingue é a forma como interagem com a Linha
do tempo do filme principal:
GRAPHICS (imagens) – imagens geralmente estáticas que irão ser reutilizadas ao longo do
filme. Estes símbolos operam em sincronia com a Linha do tempo do filme principal a que
pertencem e o seu ambiente de edição específico é semelhante ao do filme principal; A única
diferença efectiva entre a Linha do tempo do filme principal e a linha do tempo específica
destes símbolos diz respeito a esta última não suportar os sons interactividade. Apesar desta
limitação, é possível efectuar animações na Linha do tempo graphis. O comportamento destas
animações está, no entanto, condicionado pelo comportamento da Linha do tempo do filme
principal.
Buttons (botões) – como o próprio nome indica, refere-se a objectos interactivos, i
e., que reagem aos cliques do rato; os botões têm a sua própria linha do tempo com
quatro frames a representar os quatro estados possíveis : Up (sobre), Down (pressionado),
Hit (área útil de clique). Um botão poderá assim desencadear um conjunto vasto de
acções consoante a interactiva aplicada e está representado na linha do tempo do filme
principal. Para poder interagir com os botões no ambiente de edição, invoque o comando
Enable Simple buttons do menu Control.
MOVIE CLIP (clips de filme) – a linha do tempo dos clips de filme é totalmente
independente da Timeline do filme princípal fazendo com que estes sejam os mais
interactivos e versáteis elementos do Flash; são como minifilmes independentes que podem
conter sons, animações, botões ou outros clips de filme. Uma das utilizações mais eficazes
consiste em colocar uma instância destes clips de filme dentro da Linha do tempo dos botões
e assim criar botões animados.
Animação 2D 48
|
Não se enervem se a interactividade e a animação dos clips de filme não funcionar no
momento da reprodução do filme principal. É mesmo assim! Para as visualizar, necessitamos
de invocar o comando Test Scene, ambos do menu Control.
5.6.2. Criação genérica de símbolos
A criação pode ser de dois tipos convertendo um objecto previamente seleccionado no palco
ou criado um símbolo a partir da caixa de diálogo Create New Symbol, gerando
posteriormente o conteúdo no ambiente de edição do próprio símbolo.
Para os do primeiro tipo:
Seleccione o objecto no palco;
Invoque o comando Convert to Symbol do menu Modify; deparamo-nos com a caixa de diálogo
Convert to Symbol;
Name - nome do símbolo;
Behavior - tipo de símbolo;
Registration – posição do ponto de registo;
Advanced - alterar entre opções básicas ou avançadas.
O objecto transforma-se num símbolo, sendo adicionado à biblioteca do filme.
Para os do seguinte tipo:
Certifique-se que não existem objectos seleccionados no palco;
Invoque o comando New Symbol do menu. Uma outra forma seria através da janela Library
(explicada mais adiante); deparamo-nos com a caixa de diálogo Create New Symbol,
Animação 2D 49
|
semelhante à caixa Convert to Symbol; Depois de preenchida a caixa de diálogo anterior,
passamos para o ambiente de edição do símbolo, onde identificamos o seu nome no canto
superior esquerdo do palco e o respectivo ponto de registo; Depois de ter criado/importado
os objectos, invoque o comando Edit Document do menu Edit para sair do modo de edição dos
símbolos (ou efectuar um clique sobre o nome da cena)e voltar ao ambiente de edição do
filme.
Muitas vezes, quando entramos neste modo de edição, não conseguimos visualizar o ponto de
registo, porque este esta fora de área de visualização. Para o “chamar à razão” invocamos
View -> Magnification -> Show Frame.
5.6.3. Graphics
Na criação de imagens não existem diferentes substanciais ao nível do ambiente de edição
destas em relação ao filme de edição. Palco Linha do tempo, barra de ferramentas, camadas
e animação coincidem na aparência e na dinâmica de trabalho.
5.6.4. Botões
A única diferença efectiva entre a linha do tempo destes botões reage às interacções
provocadas pelo utilizador através do rato.
Para CRIAR BOTÕES:
Depois de certificar-se que não existem elementos seleccionados no palco, invoque o
comando New Symbol do menu Insert. Na caixa de diálogo Creat New Symbol escolha a opção
Button para o comportamento do símbolo e indique um nome. Neste passo, o Flash
proporciona o ambiente de edição específico dos botões;
Na linha do tempo temos agora quatro Frames consecutivos, referentes aos quatro estados do
botão: Up (normal), Over (sobre) Down (pressionando), Hit (área). No estado Up deparamo-
nos com um frame chave em branco;
Na criação do botão no estado Up é possível utilizar ferramentas de desenho à disposição do
Flash, importar imagens ou colocar determinada instância de um símbolo no palco;
Animação 2D 50
|
Para a criação de botões, é possível a utilização de símbolos do tipo clip de filme ou imagens,
mas não de um outro botão. Os botões animados são criados com recurso aos clips de filme.
Efectue um clique no frame Over e invoque o comando Keyframe através Insert -> Timeline; a
imagem do frame anterior é repetida para um novo instante temporal;
Segue-se a respectiva edição neste estado; repita o passo anterior e a respectiva alteração da
imagem para os estados Down e Hit;
O frame Hit define a área do clique que activa o botão, i, é., área útil de clique. Devera ser
uma área sólida suficiente para contemplar todos os elementos afectos aos restantes estados,
não existindo problema caso ultrapasse estes limites. Caso não seja especificado este filme, a
área do estado normal (Up) será utilizada, por valor assumido, como área útil de clique.
Para terminar, ivocamos o comando Edit Document do menu Edit e arrastamos uma instância
do novo símbolo para o palco.
O comando Enable Simple Buttons do menu Control activa/desactiva os botões no ambiente
de edição.
Um botão tem que ser suficientemente atractivo e explícito acerca da acção que desencadeia
porque afinal de contas é o ponto de interactividade com o utilizador. Os botões animados
são uma forma de valorizar os filmes e trair a atenção. Outros aspectos relacionados passam
por adicionar sons e texto, valorizando assim a interactividade.
5.6.5. Clips de filme
Estes símbolos são pequenas animações que funcionam como minifilmes, já que contêm toda
a interactividade, som funcionalidade do filme principal. A linha do tempo dos clips de filme
é independente da linha do tempo do filme principal. É possível transformar determinada
animação já criada no palco num clip de filme.
A animação dos clips torna-se independente da Linha do tempo do filme principal, pelo que
pode ser utilizada ao longo do nosso filme, sendo arrastadas instâncias da biblioteca para o
palco.
Animação 2D 51
|
5.6.6. Edição de símbolos
Quando se fala em edição de símbolos, esta pode ocorrer ao nível do conteúdo e a Linha do
tempo a ele associada.
Não se esqueça que, ao editar determinado símbolo, está a efectuar todas as instâncias que
dele derivam.
Para invocar os diferentes ambientes de edição, basta efectuar um clique com o botão direito
do rato sobre o símbolo e do menu de contexto escolher um dos seguintes comandos:
Edit – aqui visualizamos apenas o símbolo; repare que no topo do palco tem informação
acerca do nome do símbolo e da cena em que está inserido; para voltar ao ambiente do filme
principal, pode efectuar uma destas três acções:
invocar o comando Edit Document do menu Edit;
ou
efectuar um clique no nome da cena.
Edit In Place - aqui estamos a editar o símbolo no respectivo contexto/local;
decerto reparou que os outros objectos no palco ficaram em 2º plano para que fosse possível
diferenciá-los do símbolo a editar; para voltar ao ambiente do filme principal, pode efectuar
uma destas três acções:
invocar o comando Edit Document do menu Edit;
efectuar um clique um clique no botão de retorno;
efectuar um clique no nome da cena.
Edit In New Window –aqui podemos editar o símbolo numa janela separada e visualizar o
palco e a Linha do tempo associados ao símbolo, bem como estes itens associados ao filme
principal; para voltar ao ambiente no filme principal feche a janela no botão fechar do canto
superior direito.
5.6.7. Duplicação de símbolos
Animação 2D 52
|
Caso se queira poupar tempo na criação de símbolos semelhantes, mas que tenham por
exemplo comportamentos diferentes, umas hipóteses é a duplicação, onde todo o conteúdo
ou apenas uma parte de determinado símbolo é utilizada.
Seleccione o símbolo na bilbioteca (invoque a bilbioteca a partir do comando Library do
menu Window);
Efectue um clique com o botão direito do rato e do menu de contexto escolha Dupicate;
Preencha o nome do novo símbolo na caixa de diálogo Duplicate Symbol e escolha o
respectivo comportamento, repare no novo elemento na biblioteca.
Esta duplicação também pode ser efectuada partindo de uma instância do símbolo:
Seleccione no palco uma instância do símbolo a duplicar;
Efectue um clique com o botão direito do rato e do menu de contexto escolha Duplicate
Symbol;
Preencha o nome do novo símbolo na caixa de diálogo Duplicate Symbol; Repare no novo
elemento biblioteca.
A instância seleccionada no primeiro ponto foi entretanto substituída por uma instância do
novo símbolo.
5.7. Biblioteca (libraries)
Uma BIBLIOTECA funciona como um repositório dos elementos (itens) que constituem o nosso
filme. Símbolos, sons, vídeos e bimaps são alguns daqueles elementos cujas instâncias
(explicado mais adiante) serão colocados em diversas partes do filme.
Na biblioteca vamos poder organizar, segundo uma lógica personalizada, os diversos itens em
pastas (folders), semelhante ao processo desenvolvido no nosso sistema operativo em relação
aos diferentes tipos de ficheiros.
5.7.1. Painel Library
Para invocarmos a biblioteca do filme principal, invocarmos o comando Library do menu
Window :
Animação 2D 53
|
nome da biblioteca;
número de itens que constituem a biblioteca, incluindo as pastas;
àrea reservada à visualização do item; Ao premir o botão direito do rato na àrea
reservada à visualização do item, poderá escolher, a partir do menu de contexto, o
tipo de fundo a aplicar.
botões de play para visualização de símbolos não estáticos ou com interactividade;
colunas com informações sobre algumas características dos itens (explicadas mais
adiante);
ordenar os itens;
expandir o tamanho da janela;
reduzir o tamanho da janela;
criar um novo símbolo; acedemos à caixa de diálogo Create New Simbol;
criar uma nova pasta;
propriedades do item;
apagar itens da biblioteca (inclusive pastas); basta arrastá-los para cima deste ícone;
Ao contrário das versões anteriores do Flash, o comando Undo (desfazer acção)
permite recuperar itens eliminados. Noentanto, estude muito bem a situação antes de
tomar m,edidas concretas.
menu Options (explicado mais adiante ).
5.7.2. Redimensionar a janela
Através dos botões de redução e expansão do tamanho da janela, podemos ajustar o detalhe
da informação fornecido.
As dimensões das colunas Name (nome), Kind (tipo). Use Count (número de instâncias
associadas), Linkage (associado a uma biblioteca partilhada) e Date Modified (data de
Animação 2D 54
|
modificação) poderão ser modificadas posicionando o cursor na divisória desses campos,
arrastando-a posteriormente para a esquerda ou para a direita.
Por valor assumido, a coluna Use Count não é actualizada automaticamente.
Para este efeito, teremos de seleccionar o comando Keep Use Counts Updated do menu
Options.
5.7.3. Ordenar itens
Para ordenarmos os itens através das propriedades associadas, basta efectuar um clique sobre
a coluna com o nome da propriedade. O botão de ordenar os itens permite organizá-los de
forma alfanumérica.
5.7.4. Menu Options
No menu Options da janela Library, temos as seguintes opções:
New Symbol – criar um novo símbolo. Tem o mesmo efeito que efectuar um clique no botão
New Symbol; depois de escolhido o nome e o tipo de comportamento associado, vamos
directamente para o ambiente de edição específico, com os respectivos palcos e Linhas do
tempo;
Animação 2D 55
|
New Folder – criar uma nova pasta na raiz da estrutura da biblioteca; esta nova pasta poderá
estar residente dentro de outra pasta, bastando para isso arrastá-lo e largá-la em cima da
pasta com nível superior;
New Font – criar determinado símbolo de texto para partilhar;
New Vídeo – adicionar vídeo ao filme. Ao criar este item na biblioteca, efectua sobre ele um
duplo clique; a partir do botão Import da caixa de diálogo Embedded Video Propeties
importante um determinado vídeo:
Rename – renomear itens;
Move to New Folder – mover determinado item para uma nova pasta; o nome desta pasta é
definido através da caixa de New Folder;
Duplicate – duplicar um determinado símbolo; definir um nome e um comportamento para o
novo símbolo;
Delete – apagar determinado item; o mesmo efeito que efectuar um clique no botão Delete;
deparamo-nos com uma caixa de diálogo para confirmar este acto. É possível seleccionar
múltiplos itens e sobre eles aplicar este comando;
O comando Undo (desfazer acção) não tem efeito o comando Delete, por isso é necessário
estudar muito bem a situação antes de tomar medidas concretas.
Edit e Edit With – editar determinado item dentro ou fora do Flash; neste segundo caso
escolher o editor externo a partir da caixa de diálogo Select External Editor;
Properties – aceder às propriedades de determinados itens; no caso dos símbolos, acedemos à
caixa de diálogo Symbol Properties, onde para além do nome podemos modificar o
comportamento associado determinado símbolo;
Animação 2D 56
|
Linkage - definir propriedades associados aos símbolos partilhados (explicado mais
adiante);
Component Definition - definir determinados parâmetros para os componentes
(explicados no âmbito dos componentes);
Select Unused Items –seleccionar itens que não foram utilizados no filme;
Os objectos não utilizados no nosso filme, apesar de constarem na biblioteca, não vão
aumentar o tamanho do filme publicado. No entanto, estes itens itens deverão ser apagados,
já que pesam no documento (fla). Se pretender retirá-los definitivamente (e assim já não
poder invocar o comando Undo) pode utilizar o comando Save and Compact do menu File.
Update – actualizar itens importados; deparamo-nos com a caixa de diálogo Update Library
Items;
Bitmaps, sons e vídeos têm características diferentes dos símbolos. Através do botão Update
da caixa de diálogo Update Library Items fazemos reflectir sobre o elemento incorporado no
nosso filme qualquer alteração ocorridao sobre ele no exterior.
Play – executar determinado item (por exemplo: botão, som);
Expand Folder - expandir determinada pasta;
Collapse Folder – fechar determinada pasta,
Expandir All Folders – expandir todas as pastas;
Shared Library Properties – especificar um URL para uma biblioteca partilhada;
Keep Use Counts Updated – manter actualizada a coluna Use Count;
Update Use Counts Now – actualizar instantaneamente a coluna Use Count;
Help – ajuda sobre bibliotecas;
Maximize Panel – expandir painel;
Close Panel – fechar painel.
5.7.5. Bibliotecas comuns common libraries)
Para além da biblioteca standard do filme principal, o Macromedia Flash incorpora algumas
bibliotecas com itens já incorporados e acessíveis através do comando Common Libraries do
menu Window -> Other Panels:
Animação 2D 57
|
Estas bibliotecas mais não são do que documentos do Flash armazenados na pasta Libraries,
subpasta da pasta de instalação do programa. Assim, qualquer ficheiro que esteja inserido na
pasta Libraries encontra-se imediatamente disponível no Flash.
Para CRIAR UMA BIBLIOTECA:
Crie um novo documento;
Crie os símbolos que se querem armazenar na biblioteca ou importe-os;
Agora que estão armazenados, apague-os do palco para poupar no tamanho do
documento;
Invoque o comando Save As do menu; File; na caixa de diálogo Save As indique um
nome para a biblioteca e guarde-a na pasta Libraries do Flash;
Verifique se esta biblioteca se encontra disponível a partir de Window -> Others Panels
-> Common Libraries.
Para visualizar, poderá ter a necessidade de fechar o Macromedia Flash e iniciar uma
nova sessão.
Animação 2D 58
|
5.7.6. Biblioteca de outros filmes
Podemos incorporar no nosso filme símbolos de outras bibliotecas afectas a outros filmes.
Para este efeito, invocamos o comando Open External Library do menu File -> Import.
Agora podemos efectuar duas operações; arrastar para o palco símbolos da biblioteca
“externa” e estes serão adicionados automaticamente à biblioteca standard ou arrastá-lo
(s)directamente para esta.
5.7.7. Bibliotecas partilhadas (shared libraries)
Para optimizar o trabalho em equipa e a gestão dos elementos dos filmes, bem como para
controlar as diferentes revisões do projecto, é possível criar bibliotecas partilhadas, i, é.,
com determinados itens partilhados, aos quais diferentes filmes poderão recorrer. Vantagens
são pelo menos: consist~encia dos elementos e garantia de versões actualizadas.
Assim, elementos que fazem parte de animações comuns em diferentes cenas ou filmes e
ainda sons ou tipos de fontes de texto iguais em diferentes secções do site (só para citar
alguns exemplos), tudo isto poderá ser gerido através da partilha de bibliotecas.
Para que outros filmes possam aceder aos itens partilhados, é necessário colocar na web a
biblioteca partilhada.Ora, isto acontece quando publicamos o filme que suporta essa
biblioteca. A biblioteca partilhada será assim o ficheiro .swf colocado num determinado
URL.
Basicamente, o processo divide-se em duas fases:
No documento que serve de origem/fonte teremos que dar “permissões” de
exportação para itens a partilhar;
No documento que vai ligar à origem (documento de destino) teremos que dar
indicações de importação dos itens partilhados.
Tanto no ficheiro de origem como nos ficheiros de destino é necessário indicar a localização
(URL) do ficheiro de origem (o que contém a biblioteca partilhada) e a identificação do
elemento partilhado.
Animação 2D 59
|
São então colocados dois cenários possíveis:
Durante a edição de um filme são utilizados símbolos que residem numa biblioteca
partilhada;
Durante a execução de um filme é efectuado o download, por parte do Flash Player,
de símbolos que residem numa biblioteca partilhada.
5.7.8. Símbolos de outros Filmes
A incorporação de símbolos de outros filmes está assegurada através de compatibilidade entre
bibliotecas. Apesar desta compatibilidade, não existe nenhuma ligação (link) entre símbolos
de diferentes filmes, i. e., a edição em cada um dos filmes é independente. O processo é
simples:
Invoque o comando Open External Library do menu File Import para escolher o filme
onde iremos buscar o(s) símbolo(s);
Os Símbolos da biblioteca do filme seleccionado ficam disponíveis, apesar da
indisponibilidade dos comandos do menu Options;
Arraste para o palco o símbolo desejado, criando assim uma instância; neste passo, o
novo símbolo é adicionado à biblioteca do nosso filme principal, mantendo o nome de
origem; para finalizar fechamos a janela da biblioteca.
5.8. Instâncias
A cada uma das ocorrências do símbolo no palco dá-se o nome de INSTÂNCIA.
Estas instâncias aparecem-nos apenas como referências ao símbolo. A mais-valia desta
abordagem reside no facto de não ser obrigatória que estas instâncias apresentem as mesmas
propriedades que o símbolo ou entre elas próprias.
Assim ao editar uma istância, não é afectado o símbolo associado, nem as outras instâncias
que dele derivaram. No entanto, as alterações efectuadas num determinado símbolo
reflectem-se em todas as instâncias dele derivadas.
Animação 2D 60
|
5.8.1. Criação de instâncias
As instâncias podem assumir comportamentos diferentes daquele que está estipulado para o
símbolo de onde derivam.
É ponto assente que, quando criamos determinado símbolo e definimos para ele um
comportamento específico, as instâncias que dele derivam vão herdar aquele
comportamento. No entanto, esta instância poderá assumir outros comportamentos
diferentes, i, e., é possível modificar um botão para imagem ou um clip de filme para um
botão e até uma imagem para um clip de filme. Logo que tal modificação ocorra, a instância
perde a funcionalidade advinda do comportamento do símbolo. A criação das instâncias é
muito simples:
Seleccione na Linha do tempo uma determinada camada:
As instâncias são colocadas sempre em frames chave; caso não esteja seleccionado um
frame chave, a instância será colocada no primeiro frame mestre à esquerda do
frame actual.
Invoque o comando Library do meu Window para visualizar a biblioteca com os
símbolos;
Arraste o símbolo para o palco.
5.8.2. Propriedades das instâncias
Através de diferentes valores associados à propriedade das instâncias, como por exemplo o
brilho, a transparência e a tonalidade, é possível obter variantes a partir de um mesmo
símbolo.
Para efectivar as alterações, não existe nenhum botão de OK é só alterar e verificar no palco
a modificação.
Rodar, inclinar ou redimensionar uma instãncia, bem como alterar o seu comportamento, são
outras das opçôes.
Através do menu Modify Transform Remove Transform, é possível desfazer as alterações
efectuadas ao nível do redimensionamento e das rotações.
Animação 2D 61
|
As propriedades das instâncias são alteradas através do inspector de propriedades nas quatro
áreas que compõem:
Symbol behavior - nesta área está definido o comportamento do símbolo de onde
deriva a instância e o nome dessa instância que funcionará como uma referência
(target) e poderá ser invocado na definição de determinadas acções;
Widht, Height - nesta área está definida a largura (W) e altura da instância (H), bem
como a sua posição horizontal (X) e vertical (Y):
No painel Info (Window Design Panels Info) é possível observar estas
propriedades.
Options of graphics - nesta área visualizamos qual o nome do símbolo associado á
instância; para além desta informação, temos nesta área mais opções:
o o botão Swap Symbols permite substituir o símbolo associado a uma instância;
ao efectuar um clique sobre este botão, acedemos à caixa de diálogo Swap
Symbol;
Animação 2D 62
|
o à direita do botão Swap, e consoante o tipo de símbolo associado à instância,
surgem-nos algumas características que nos ajudam a aperfeiçoar o
comportamento do objecto;
As opções são: loop, (repetição contínua de toda a sequência da animação da instância, pelos
frames que esta ocupa); Play Once (apenas uma repetição da sequência da animação a partir
do frame especificado); Single Frame (exibição de apenas um frame da sequência da
animação); First (define, para os três modos de produção atrás citados, o primeiro frame da
sequência de animação).
As opções são: Track as Button e Track as Menu Item e especificam a forma de reacção em
relação aos movimentos e cliques do rato.
Color - nesta área visualizamos as propriedades de cor associadas à instância:
o None – nenhuma cor;
o Brightness - ajustar a luminosidade da instância, numa escala que vai do preto
(-100%) ao branco (100%);
o Tint - aplicar sobre a instância uma determinada tonalidade: definir
percentagem da tonalidade; definir tonalidade através da introdução de
valores nas caixas de texto para as tonalidades vermelho (Red),verde (Green) e
azul (Blue);
o Alpha – definir, a partir da caixa de diálogo Advanced
o Effect - os valores de vermelho, azul, verde e da transparência; as caixas de
texto à esquerda com as respectivas barras de controlo permitem reduzir uma
determinada percentagem dos valores de cores e/ou da transparência; as
caixas de texto à direita com as respectivas barras de controlo permitem
reduzir ou aumentar os valores das cores e ou da transparência por um valor
constante
5.8.3. Quebra de ligação das instâncias
Animação 2D 63
|
Caso deseje quebrar o elo de ligação entre a instância e o respectivo símbolo a ela associado,
de forma a alterar de raiz a sua composição(agora um conjunto de formas e linhas
desagrupadas) e sem que isto afecte o símbolo ou outras instâncias relacionadas:
seleccione a instância no palco;
invoque o comando Break Apart do menu Modify.
Caso o símbolo através do qual derivou a instância seja alterado após a quebra de ligação
entre ambos, tal facto não se repercute na instância em questão.
5.9. Um painel com história
Surgiu nesta versão do Flash uma novidade que de certeza vai agradar a muitos utilizadores: o
painel History (Window -> Other Panels -> History). Os passos executados durante a edição do
filme ficam gravados (são convertidos em javaScript) e à disposição do autor para os utilizar
no mesmo documento, noutros documentos da mesma sessão ou mesmo para serem invocados
posteriormente, através de comandos.
O painel é constituído por:
lista de passos ocorridos no documento actual; os passos precedidos por um X
vermelho indicam a impossibilidade de serem reutilizados;
barra de deslocamento que nos indica o último passo registado;
repetir o(s) passo (s) seleccionados;
copiar o(s) passo (s);
gravar passos como comandos para posterior utilização; depois de dar o nome ao
comando na caixa de diálogo Save As Command, este fica disponível partir do menu
Commands;
repetir o(s) passo (s) seleccionados;
copiar o(s) passo (s);
Animação 2D 64
|
gravar passos como comandos para posterior utilização;
formas de visualização dos passos no painel;
limpar o histórico de passos no painel; esta operação não tem repercussões.
A ordem dos passos no painel não pode ser alterado. Por valor assumido, são cerca de100
passos que podem ser alvo de operações no painel History. Este valor pode variar entre 2 e
9999 e é configurado no painel Preferences (Edif -> Preferences) através do separador
General.
Para DESFAZER PASSOS com o painel History, basta deslocar o elevador até ao passo
pretendido.
A REPETIÇÃO DE PASSOS no mesmo documento é efectuado com o comando Replay. Para
efectuar a operação, seleccione o título do passo e arraste o rato até ao último passo
pretendido, sem utilizar a barra de deslocamento. Por último, clique no botão Replay.
Para seleccionar passos não adjacentes pode ser utilizada a tecla <Ctrl>.
Para COPIAR PASSOS ENTRE DOCUMENTOS processa-se da seguinte forma:
No documento que contém os passos a copiar, seleccionamos esse (s) passo (s) no
painel;
Clicamos no botão para copiar os passos;
Seleccionamos um objecto nom documento onde vão recair os passos;
Invocamos o comando Paste do menu Edit; repare que no painel History ficou
registado apenas o passo Paste Steps.
Para EXECUTAR COMANDOS Java Script ou Flash JavaScript invocamos o comando Run
Command do menu Cmmands para procurar e abrir o ficheiro. Ainda neste menu temos a
opção Manage Saved commands para apagar ou renomear comandos e a opção Get More
commands que permite obter, via Internet (www. Macromedia.
Com/cfusion/exchange/index.cfm), outros comandos que outros autores colocaram à
disposição.
Animação 2D 65
|
6. Desenho de Objectos
6.1. Cor e transparência
O Fash utiliza dois métodos de descrição da cor: HSB e RGB.
O MÉTODO HSB em que Hue (tonalidade), Saturation (saturação) e Brightness
(brilho/luminosidade) descrevem as cores como um espectro contínuo. Os valoresda
TONALIDADE podem variar de Oº a 360º (número máximo de grus num círculo) e designam a
cor , definindo assim o grau de pureza do tom. A luminosidade da tonalidade é definida
através do BRILHO e varia de O% a 100%.
É também possível classificar determinada cor com o MÉTODO RGB. Estas três componentes
definem a qualidade de vermelho (Red), verde (Green) e azul (Blue) associada ao objecto,
utilizando valores do sistema decimal que variam de 0 a 255. Assim, se para cada componente
o valor é de 255, obtemos a cor branca; se por outro lado o valor for 0, obtemos o preto.
Logo se as componentes vermelho e azul tiverem o valor 0 e a componente verde o valor 255,
obtemos o verde já agora... e a cor laranja? Pois bem, na escala RGB os valores são 255-177-
0.
Os valores RGB podem ainda ser convertidos em NÚMEROS HEXADECIMAIS (muito utilizado nas
páginas web). Consiste num valor de seis elementos que variam entre 00 e FF.
Eis alguns exemplos de valores hexadecimais e respectivas cores:
FF0000 –vermelho;
00FF00 – verde;
0000FF – azul;
FFFFFF – branco;
000000- preto
Ao número de cores para representar determinado objecto dá-se o nome de PROFUNDIDADE
DE COR (color depth). A profundidade de cores é expressa como o número de bits usados
Animação 2D 66
|
(valor binário) para representar a informação (cor) ou para identificar o número de cores que
o sistema suporta num determinado instante.
Imagine a seguinte animação: é noite e determinado farol incide o seu foco de luz sobre
edifícios de uma cidade, gerando um movimento rotativo. Apenas os edifícios sobre os quais
incide a luz deverão estar visíveis, ficando os restantes visíveis. Para podermos controlar a
visibilidade/transparência de objectos, utilizamos a propriedade ALPHA. O valor da
transferência pode variar de 0% (totalmente transparente) a 100% (totalmente opaco).
Outras abordagens à questão da transparência/visibilidade poderão ser feitas através da
manipulação da ordem das camadas e do preenchimento, ou não, dos objectos.
6.1.1. Painel Color Mixer
No Flash, bem como noutros tipos de programas mais ligados à parte de edição de imagens,
surgem mais vezes referidos os termos STROKE e FILLS. Em relação ao stroke, podemos pensar
nele como o traço ou o contorno do que é criado e que, por sua vez, irá ou não ter um
preenchimento (fill) com uma cor sólida ou com determinado gradiente ou mistura de cores.
Assim, as ferramentas para criação de formas ovais ou rectangulares podem, no Macromedia
Flash, criar apenas traços, apenas áreas preenchidas ou ambas as coisas.
O termo SHAPE (forma) designa gráficos vectoriais que, ao invés de serem formados por um
conjunto de pixels, contêm determinadas informações sobre, por exemplo, a localização,
dimensão e a cor da imagem.
Para criar e editar cores sólidas, utilizamos o painel Color Mixer do menu Window. Qualquer
escolha aqui definida é automaticamente aplicada ao objecto seleccionado no palco.
Animação 2D 67
|
1. cor do traço; efectue um clique no triângulo para escolher uma determinada cor;
2. cor do preenchimento; efectue um clique no triângulo para escolher uma determinada
cor ou gradiente;
3. tipo de preenchimento;
Existem vários tipos de preenchimento: a opção None não aplica nenhum preenchimento; a
opção Solid aplica ao objecto preenchimento com uma cor sólida; a opção Radial utiliza duas
cores, ficando uma no centro, ocorrendo uma transição suave para a cor que está posicionada
na periferia do objecto; a opção Bitmap permite aplicar um bitmap ao objecto; estes bitmaps
podem ser importados através da caixa de diálogo Import, ficando disponíveis no painel
Color Mixer.
4. cor por valor assumido (traço preto e preenchimento branco);
5. definir traço ou preenchimento transparente;
6. trocar cores do traço e do preenchimento;
7. barra de cores;
8. definir escala RGB ou escala HSB;
9. valores RGB ou HSB;
10. transparência da cor;
11. expandir painel.
Para criar CORES PERSONALIZADAS:
Efectue um clique no triângulo do traço ou preenchimento;
Carregue no botão Color Picker; depara-se com a caixa de diálogo Color;
1
2
3
4, 5 e 6
Animação 2D 68
|
Arraste o cursor pelo espectro de cores de forma a seleccionar a cor sólida ou insira
valores nas caixas de texto;
Controle o nível de luminosidade;
Carregue no botão Adicionar às cores personalizadas de forma a adicionar esta nova
cor a uma das 16 caixas à personalização; a partir de agora poderá utilizar esta cor
para o traço ou preenchimento.
6.1.2. Gradientes
OS GRADIENTES resultam da transição mesclada de duas ou mais cores. Podem ser utilizados
para criar determinados efeitos visuais, como por exemplo profundidades e sombras.
Não abusem dos gradientes, já que estas pesam na performance dos filmes. Por exemplo,
cada área ocupada por um gradiente necessita de mais 50 bytes em relação a uma cor sólida.
Basicamente existem dois tipos de gradientes:
Animação 2D 69
|
GRADIENTE LINEAR – mescla de cores, de uma ponta à outra do objecto;
GRADIENTE RADIAL – mescla de cores, do centro para a periferia do objecto.
Para CRIAR GRADIENTES:
Escolha no preenchimento o tipo de gradiente (Linear ou Radial).
Efectue um clique logo a baixo da barra de cor para criar um ponto de Gradiente;
este ponto assume por valor assumido uma determinada cor, mas esta poderá ser
alterada;
Através do selector de cor, escolha uma outra cor para o ponto; ocorrerá uma
transição entre o ponto criado e o ponto logo à esquerda;
Introduza se necessário mais pontos de gradiente;
Desloque os pontos para modificar a distribuição das cores;
No menu do painel Color Mixer escolha o comando Add Swatch de forma a adicionar o
gradiente.
6.1.3. Paletas
Cada um dos documentos do Flash tem associada uma paleta de cores própria.
Apesar de a informação estar contida no ficheiro de suporte do filme, não afecta o respectivo
tamanho. A paleta padrão do Flash è a paleta de 216 cores ajustadas á web (Web 216).
O número de cores que podemos definir para um determinado filme é limitado
Apenas pela profundidade de cor do sistema.
Existem dois formados de importação/exportação de paletas suportados pelo
Flash:
.clr para Windowsl.fclr para Macintosh: importação/expotação das cores sólidas e
dos gradientes, mas apenas entre ficheiros do Macromedia Flash;
.act é um formato que apenas importa/exporta as cores sólidas, não suportando os
gradientes; apesar desta limitação, este formato é suportado por outros programas,
como o Fireworks e o Adobe Photoshop.
Animação 2D 70
|
Ao importar imagens do formato. GIF, pode importar as paletas associadas, mas não os
ingredientes.
Para exportar, importar e modificar a paleta de cores de um filme do Flash,Utilizamos o
painel Color Swatches.
6.2. Personalização das ferramentas de desenho
Invocamos o comando Preferences, do menu Edit, deparamo-nos com a caixa de diálogo
Preferences e com o separador Editing, com diversas opções que permitem automatizar
alguns aspectos relacionados com as ferramentas de desenho.
6.3. Ferramentas de desenho e pintura
A barra de ferramentas de desenho e pintura (Window -> Tools ) encontra-se dividida
em quatro áreas:
1. Tools –zona onde estão as ferramentas que podemos escolher através de Cliques;
2. View – zona com ferramentas que nos permitem modificar a área visível do ambiente
de edição;
3. Colors – área onde escolhemos quais as cores a aplicar aos traços e preenchimentos;
4. Options- área de acesso a modificadores específicos de ferramenta activa,que
permitem várias opções de desenho.
Animação 2D 71
|
No que diz respeito às ferramentas que nos permitem modificar a área visível do ambiente
de edição (zona 2 da barra de ferramentas), temos:
HAND (mão) – esta ferramenta permite que o utilizador se movimente facilmente pela
área de trabalho, bastando para tal manter premido o botão do rato, arrastando o palco em
qualquer direcção mais conveniente. Esta ferramenta só está plenamente funcional quando o
comando Work Area do menu View está activo.
Para activar esta ferramenta, podemos pressionar a tecla <H> Também podemos alternar esta
ferramenta com qualquer outra que seja activa, mantendo precionada a tecla <Spacebar>.
ZOOM (lupa) – esta ferramenta permite aumentar ou reduzir a percentagem de
visualização do palco.
ARROW (seta)- esta é provavelmente a ferramenta mais utilizada no Flash; com ela
podemos seleccionar, mover, e redimensionar objectos.
Animação 2D 72
|
Modificadores da ferramenta ARROW:
Snap to Objects – permite alinhar os objectos editados, entre si ou em relação ao
palco; ao mover determinado objecto para alinhar, temos como referência um anel de
encaixe; para indicar que dois pontos podem ser alinhados com precisão, o anel surge mais
denso;
Com o comando Snap Align do menu View -> Snapping activo, surgem eixos de alinhamento
durante o alinhamento dos objectos. Ainda neste menu e através do comando Edit Snap Align,
é possível definir (em pixels) a tolerância da distância de alinhamento dos objectos.
Smooth- reduz irregularidade e o número de segmentos numa curva, dando uma noção
de continuidade a linhas e formas simples;
Invocando o comando Optimize do menu Modify -> Shape, deparamo-nos com a caixa de
diálogo Optimize Curves, onde poderão ser definidas suavizações para as linhas curvas e para
os contornos associados aos preenchimentos. A opção Use multiple passes (slower) maximiza o
processo de suavização; a opção Show totals message permite exibir uma caixa de alerta com
a informação acerca da optimização relacionada com o processo de suavização.
Este processo de suavização contribui ainda para a diminuição do tamanho do documento e do
filme .swf.
Straighten – permite endireitar círculos, ovais, quadrados, rectângulos, triângulos e arcos
desenhados em formas geometricamente perfeitas;
As opções Smooth e Straighten não actuam à partida sobre grupos, texto, símbolo e bitmaps.
Para que tal aconteça, necessitamos de aplicar sobre estes elementos o comando Break Apart
do menu Modify.
SUBSELECT (subselecção) - esta ferramenta permite modificar os ângulos, as direcções e
os comprimentos associados aos segmentos rectilíneos e curvos dos objectos , através da
manipulação dos pontos âncora.
Mantendo pressionada a tecla < Shift> enquanto arrastamos, permite restringir o ângulo
associado a múltiplos de 45º.
Para ajustar um segmento rectilíneo, seleccionamos esse segmento com a ajuda da
ferramenta Subselect; arrastar um ponte âncora para uma nova posição.
Animação 2D 73
|
Para apagar pontos âncora, seleccione-os com a ferramenta Subslect e carregue na tecla
<Delete>.
Line (linha) – esta ferramenta permite desenhar linhas ou segmentos. A linha só é
efectivamente desenhada no palco quando libertamos o botão do rato. Assim, logo que
escolhemos a ferramenta e até libertamos o rato, pode-mos (re)definir sucessivamente a
direcção da linha ou o ângulo associado
Mantendo pressionada a tecla <Shift> enquanto desenhamos a linha, permite restingi-la a uma
direcção vertical, horizontal ou com um ângulo de 45º.
LASSO (laço)- esta ferramenta permite seleccionar objectos, à mão livre ou através de
linhas rectas.
Esta ferramenta inclui 3 modificadores:
Magic wand –permite seleccionar determinada área de uma cor particular
independente da sua forma;
Magic wand Properties – permite ajustar as definições da opção Magic wand; na caixa
de diálogo Magic wand Settings, podemos definir qual a tolerância em relação à cor de
pontos adjacentes (Threshold), i e., um valor igual a O selecciona apenas pontos
adjacentes com cor exactamente igual, enquanto o valor máximo 100 selecciona todos
os pontos; podemos ainda definir a tolerância no que diz respeito ao limite da área
colorida seleccionada Smoothing;
Polygon – permite seleccionar determinada área através de linhas rectas.
Para SELECCIONAR ÁREAS À MÃO LIVRE, seleccione a ferramenta Lasso e prima o botão do
rato, arrastando o cursor ao longo da área.
Animação 2D 74
|
Para SELECCIONAR ÁREAS DE LINHAS RECTAS, seleccione a ferramenta Lasso e o modificar
Polygon, efectue um clique para definir o ponto de início, posicionando depois o cursor ponto
de destino e efectuando aí um clique; para fechar a área, efectue um duplo clique.
Para SELECCIONAR ÁREAS ATRAVÉS DE LINHAS RECTAS E À MÃO LIVRE, seleccione a
ferramenta Lasso E O MODIFICADOR Polygon; para efectuar um segmento à mão livre, arraste
o cursor sobre o palco; para efectuar um segmento recto, mantenha pressionada a tecla <Alt>
e efectue cliques para definir os pontos de início e de destino; para fechar a área, efectue
um duplo clique.
PEN (caneta) – esta ferramenta permite desenhar linhas rectas ou trajectórias curvilíneas
com grande precisão, manipulando os ângulos associados.
Mantendo pressionada a tecla <Shift> enquanto desenhamos a linha, permite restringir o
ângulo associado a múltiplos de 45º.
Para DESENHAR CURVAS com esta ferramenta:
Seleccione a ferramenta;
Especifique cores para o traço e o preenchimento através do inspector de
propriedades;
Posicione o cursor no sítio onde quer iniciar a curva e arraste a cabeça de leitura de
forma a definir uma direcção; repare nas duas linhas que podem servir para distorcer a
linha e assim criar a curvatura;
Posicione o cursor num outro local e mova o rato, definindo o comprimento e o ângulo
da linha;
Desenhe uma segunda linha e note que o final da linha curva serve agora de de ponto
de partida;
Para dar por concluído o trabalho, deverá seleccionar uma nova ferramenta ou invocar
o comando Deselect All do menu Edit.
TEXT (texto) – é através desta ferramenta que digamos texto no palco
OVAL (oval) – esta ferramenta permite desenhar objectos ovais. O objecto só é
efectivamente desenhado no palco quando libertamos o botão do rato. Assim lobo que
Animação 2D 75
|
escolhemos a ferramenta e até libertamos o rato, podemos (re)definir sucessivamente a
forma oval.
Mantendo pressionada a tecla <Shift> enquanto desenhamos o objecto, permite criar formas
com as proporções de um círculo perfeito.
RECTANGLE (rectângulo) – esta ferramenta permite desenhar objectos rectangulares.
Mantendo pressionada a tecla <Shift> enquanto desenhamos o objecto, permite criar formas
com as proporções de um quadrado perfeito.
PENCIL (lápis) – esta ferramenta permite desenhar linhas em três modos de desenho.
Mantendo pressionada a tecla <Shif> enquanto desenhamos as linhas, restringimo-las a uma
posição vertical ou horizontal.
BRUSH (pincel) – esta ferramenta permite criar traços que se assemelham a pinceladas.
Mantendo pressionada a tela <Shft> enquanto desenhamos as pinceladas, restringimo-las a
uma direção vertical ou horizontal.
FREE TRANSFORM (transformar) – esta ferramenta permite transformar (mover, rodar,
redimensionar, inclinar, desfigurar e distorcer) determinados objectos.
Símbolos, bitmaps, vídeos, sons, gradientes, grupos de objectos e texto não podem ser
distorcidos . Para que o texto possa ser transformado, há primeiro que convertê-lo em
formas.
FILL TRANSFORM (transformar) – esta ferramenta permite transformar o preenchimento
de um objecto (gradiente ou bitmap), alterando neste o tamanho, a direcção ou o centro.
INK BTTLE (tinteiro)- esta ferramenta permite criar e modificar a cor, a espessura e o
estilo dos contornos dos obJectos.
Apenas cores sólidas podem ser aplicadas aos contornos e não gradientes ou bitmaps.
Animação 2D 76
|
PAINT BUCKET (balde de tinta) – esta ferramenta permite colorir áreas vazias ou
delimitadas (com cores sólidas, gradientes ou bitmaps), podendo também alterar a cor já
existente num determinado objecto.
Mantendo pressionado a tecla <shift>, podemos restringir a direcção do preenchimento do
gradiente a múltiplos de 45º.
EYEDROPPER (seleccionador de cor) – esta ferramenta permite retirar amostras de cor
de imagem e ou copiar os atributos relacionados com o contorno e preenchimento dos
objectos.
ERASER (borracha) – esta ferramenta permite remover contornos e preenchimentos.
7. TÉCNICAS DE ANIMAÇÃO
7.1. Cenas
A divisão da animação em CENAS vem facilitar a organização do conteúdo do filme, já que
podemos dividi-lo de uma forma mais versátil e menos penosa. Imagine que tem um filme
com cerca de 800 frames. É um pouco cansativo ter de percorrer tanta frame para modificar
determinado pormenor, não acha? Então, porque não dividir todo aquele conteúdo em
pequenas secções, como se de minifilmes interligados se tratassem?
Apesar das vantagens desta abordagem, esta torna-se contraproducente em filmes
interactivos onde abundem variáveis e acções de preoading. Nestes casos, é preferível uma
de duas abordagens: manter um único filme ou criar diversos filmes, garantindo a
interactividade e a interligação através de programação (por exemplo, com LoadMovie).
PARA CRIAR UMA CENA:
Invoque o comando Scene do menu Insert ou carregue no botão Add scene do painel
Scene;
Animação 2D 77
|
Repare que os nomes por valor assumido são do tipo Scene “x”, onde o “x” representa
o número da cena criada; ao clicar na cena, passamos automaticamente para o frame
1 da Linha do tempo.
7.2. Animação frames-by-frame
O frame-by-frame é um tipo de animação tradicional nos estúdios de animação. Consiste na
alteração do conteúdo em frames consecutivos, gerando assim a ilusão da animação e do
movimento. Partindo de um frame, altera-se o conteúdo (adicionado, removendo ou
reorganizando elementos) no instante temporal seguinte, volta-se a editar o conteúdo num
outro instante temporal e assim sucessivamente. É claro que o conteúdo só pode ser editado
em frames - chave...
É um processo em que o utilizador tem um elevado grau de controlo sobre a animação
(quando comparado com a animação interpolada), é mais lento na edição e aumenta
consideravelmente o tamanho do ficheiro. Deverá ser utilizado apenas quando estritamente
necessário em movimento algo complexos, delicados e rápidos. A animação frame-by-frame
pode ocorrer conjugada com os restantes tipos de animação… desde que cada um esteja em
camadas diferentes.
Para CRIAR UMA ANIMAÇÃO FRAME-BY-FRAME
Seleccione determinado frame na linha do tempo e invoque o comando Keyframe a
partir de Insert – Timeline;
Crie no frame mestre um objecto ou importe uma imagem;
Faça do frame seguinte um frame mestre; repare que o conteúdo do novo frame
mestre é igual ao do anterior;
Animação 2D 78
|
Altere o conteúdo deste frame (por exemplo, com as ferramentas de desenho) com o
intuito de incrementar o processo de animação.
Repita os 2 passos anteriores até completar a sequência da animação;
Não se esqueça de reproduzir a animação frequentemente para despistar qualquer problema
e verificar o comportamento.
Quando terminada a sequência, reproduza a animação através do comando Play do menu
Control ou carregando directamente no botão Play do Controlador.
7.3. Animação interpolada (tweening)
O termo tweening deriva de frame in between, i.e., frames intermédios. O Flash facilita-nos
a vida no que diz respeito à criação de animação que consiste em alterações de movimento,
de tamanho, de rotação, de forma ou de cor, já que nos basta definir os frames inicial e
final, sendo criados automaticamente pelo Flash os frames intermédios.
É um processo em que o utilizador tem um grau de controlo relativo sobre a animação
(quando comparado com a animação frame-by-frame), é mais rápido na edição e minimiza o
tamanho do ficheiro, já que armazena apenas os valores associados às alterações efectuadas
entre os frames. É utilizado em movimentos fluidos e suaves, e, transições e em efeitos do
tipo morphing. A animação interpolada pode ocorrer conjugada com os restantes tipos de
animação… desde que cada um esteja em camadas diferentes.
7.3.1. Interpolação de formas (shape tweening)
Neste tipo de animação interpolada, um objecto é transformado noutro, fruto das alterações
incrementais automaticamente efectuadas pelo Flash, tendo como referência os conteúdos
dos frames inicial e final definidos pelo utilizador.
Instâncias de símbolos, bitmaps e grupos não são contemplados por este tipo de animação, a
não ser que sobre eles invoque o comando Break Apart do menu Modify.
O tamanho, a forma, a cor, a transparência e a localização dos objectos são os atributos
interpoláveis. Como os frames intermédios são criados automaticamente pelo Flash, podem-
se obter resultados que não são propriamente os mais desejados. Para colmatar este tipo se
Animação 2D 79
|
situações, podemos utilizar REFERENCIAS DE FORMAS, que sustentam uma interpolação mais
personalizada e aperfeiçoada.
O Flash permite interpolar diversas formas numa mesma camada, mas a experiência
aconselha a “cada macaco seu galho”, i.e., cada forma na sua camada.
INTERPOLAR UMA FORMA
Seleccione um frame;
Com a ajuda das ferramentas de desenho, crie uma determinada forma;
No Inspector de propriedades escolha na caixa de menu pendente Tween a opção Shape
(interpolação de forma); na barra de controlo Ease, arraste a seta para definir a
atenuação da transição no início ou no fim da sequência, i.e., a taxa de alteração entre os
frames interpolados (entre os valores -1 e -100 a interpolação inicia-se gradualmente e
acelera no fim da animação, enquanto que entre os valores 1 e 100 a interpolação se
inicia rapidamente para dar lugar a uma desaceleração no final da animação); o tipo de
mesclagem/mistura, Blend, pode ser distributiva (Distributive), que consiste em tornar as
Animação 2D 80
|
formas intermédias mais suaves e mais irregulares, ou do tipo angular (Angular), que se
aplica em formas intermédias onde se queiram preservar os ângulos e as linhas rectas;
Crie um segundo frame mestre que represente o final da animação e aqui seleccione o
objecto; modifique-lhe a forma, cor ou posição ou apague-o e substitua-o por uma
outra forma;
Repare que o Flash criou automaticamente os frames intermédios;
Reproduza a animação através do comando Play do menu Control ou carregando
directamente no botão Play do Controlador.
Interpolação de movimento (motion tweening)
Este tipo de animação permite interpolar a rotação, o tamanho, a localização, a cor, a
transparência e a inclinação dos objectos. Apenas um objecto por camada pode conter
interpolação de movimento.
Símbolos, grupos e blocos de texto são contemplados por este tipo de animação. Para
interpolar a cor de grupos e de texto, há que convertê-los primeiro em símbolos.
Animação 2D 81
|
Já reparou com certeza em alguns Web sites com transições espectaculares… pois bem, foram
realizados utilizando o Flash e este tipo de animação. Isto porque, como veremos explicado
mais adiante, no Flash é possível interpolar movimento ao longo de uma trajectória não
linear.
Existem dois métodos para criar este tipo de animação: através da opção Motion do Inspector
de propriedades ou através do comando Create Motion Tween a partir de Insert – Timeline.
Utilizando o Inspector de propriedades:
Desenhe num frame mestre vazio um objecto ou arraste para o palco uma instância de
um símbolo;
Crie um segundo frame mestre que represente o final da animação e seleccione o
frame imediatamente anterior;
Neste frame seleccionado efectue uma destas três operações: desloque o objecto para
uma nova posição; altere a dimensão, a rotação ou inclinação do objecto; modifique-
lhe a cor;
Efectue um duplo clique no último frame da Linha do tempo;
No Inspector de propriedades escolha na caixa de menu pendente Tween opção
Motion (interpolação de movimento); a validação da opção Scale permite uma
interpolação referente ao tamanho; na barra de controlo Ease, arraste a seta para
definir a atenuação da transição no início ou no fim da sequência, i.e., a taxa de
alteração entre os frame interpolados (entre os valores -1 e -100, a interpolação
inicia-se gradualmente e acelera no fim da animação, enquanto que entre os valores 1
e 100 a interpolação se inicia rapidamente, para dar lugar a uma desaceleração no
final da animação); na caixa de menu pendente Rotate, define-se o tipo de rotação do
elemento (a opção None não aplica rotação; a opção Auto corresponde a uma
movimentação mínima; a opção CW para rodar no sentido horário e CCW para o
sentido anti-horário) e na caixa de texto o respectivo número de ciclos de rotação; a
validação da opção Orient to path permite orientar a linha de base do elemento em
relação à trajectória; a validação da opção Sync assegura a sincronização dos objectos
com a Linha do tempo; a validação da opção Snap encaixa automaticamente o ponto
de registro do elemento à trajectória.
Utilizando o comando Create Motion Tween a partir de Insert Timeline:
Animação 2D 82
|
Desenhe num frame mestre vazio um objecto ou arraste para o palco uma instância de um
símbolo;
Invoque o comando Create Motion Tween do a partir de Insert Timeline;
Ao ter invocado o comando sobre um objecto desenhado no palco, tal objecto
converteu-se automaticamente num símbolo com o nome Tween 1 (todos os objectos
criados desta forma recebem o nome genérico Tween “x”).
Efectue um clique no frame que representa o final da animação; neste frame
seleccionado desloque o objecto para uma nova posição ou ajuste-lhe o tamanho e a
rotação;
Na barra de controlo Ease, arraste a seta para definir a atenuação da transição no
início ou no fim da sequência, i.e., a taxa de alteração entre os frames interpolados
(entre os valores -1 e -100, a interpolação inicia-se gradualmente e acelera no fim da
animação, enquanto que entre os valores 1 e 100 a interpolação se inicia rapidamente,
para dar lugar a uma desaceleração no final da animação); na caixa de menu pendente
Rorate, define-se o tipo de rotação do elemento (a opção None não aplica rotação; a
opção Auto corresponde a uma movimentação mínima; a opção CW para rodar no
sentido horário e CCW para o sentido anti-horário) e na caixa de texto o respectivo
número de ciclos de rotação; a validação da opção Orient to path permite orientar a
linha de base do elemento em relação à trajectória; a validação da opção Sync
assegura a sincronização dos objectos com a linha do tempo; a validação da opção
Snap encaixa automaticamente o ponto de registo do elemento à trajectória.
Reproduza a animação através do comando Play do menu Control ou carregando
directamente no botão Play do Controlador.
Qualquer movimentação dos objectos nos frames mestres ou qualquer alteração do número
de frames será correspondida por um ajuste automático da interpolação por parte do Flash.
7.4. Distribuir objectos pelas camadas
Imagine o que seria distribuir manualmente inúmeros objectos, indevidamente criados numa
só camada, por vários layers. Para resolver este processo de uma forma automática,
recorremos ao comando Distribute to Layers a partir de Modify Timeline. Eis os passos a
executar:
Animação 2D 83
|
Seleccione os objectos a distribuir; estes objectos poderão estar todos colocados na mesma
camada ou inclusive em camadas não contíguas;
Invoque o comando Distribute to Layers; pode em alternativa efectuar um clique com o
botão direito do rato e do menu de contexto escolher o comando Distribute to Layers;
verifique as novas camadas criadas.
7.5. Guias de movimento
E se fosse possível definir no Flash uma ou mais camadas cujo conteúdo servisse de
trajectória para diversos objectos do nosso filme? Pois bem, isto está contemplado através
das CAMADAS GUIA DE MOVIMENTO (GUIDE LAYERS).
As camadas guia ficam ocultas nos filmes publicados.
As camadas guia podem actuar sobre interpolação de movimento, mas não sobre interpolação
de formas. Numa cena poderá existir múltiplas camadas guia de movimento. Por sua vez,
várias camadas podem estar vinculadas (guide layers) à mesma camada guia de movimento.
Apesar de não ser possível aplicar camadas guia sobre interpolação de formas, p Flash suporta
um efeito similar: as REFERÊNCIAS DE FORMA, abordadas no âmbito da animação complexa.
Para CRIAR UMA CAMADA GUIA DE MOVIMENTO:
Efectue um clique no botão Add Motion Guide ou invoque o comando Motion Guide a
partir de Insert Timeline; repare na nova camada entretanto criada logo acima da
camada já existente e que agora se encontra vinculada;
Animação 2D 84
|
Convém posicionar todas as camadas guia no fim da ordem das restantes camadas,
para que não se arraste por engano uma camada, tornando-se assim numa camada
vinculada à camada guia de movimento (explicando mais adiante no capítulo da
animação interpolad).
Para desvincular as camadas em relação às guias de movimento, basta colocá-las
acima das guias ou invocar a caixa de diálogo Layer Properties (a partir de Modify
Timeline) e aí escolher a opção Normal.
Utilize uma ferramenta de desenho para desenhar a trajectória;
Todas as ferramentas de desenho e pintura podem ser utilizadas para definir a
trajectória … excepto a ferramenta Text. Se utilizar as ferramentas Oval ou
Rectangle, deverá seleccionar a opção No Color para o preenchimento.
Efectue um clique no frame que representa o final da animação; invoque o comando
Keyframe a partir de Insert Timeline; o objecto que representa a trajectória ficará
assim estático no intervalo definido;
Invoque o comando Keyframe a partir de Insert Timeline na camada que contém o
objecto que vai descrever a trajectória;
Animação 2D 85
|
Apesar de não ser obrigatório este frame mestre coincidir no tempo com o frame
criado no ponto 3, este último deve estender-se para além do frame mestre da
camada vinculada.
Ainda com este último frame seleccionado, arraste o objecto a movimentar para a
posição final da trajectória; para o objecto se cingir à trajectória, pode activar o
botão Snap to Objects;
Seleccione agora o primeiro frame da camada vinculada e arraste o objecto a
movimentar par a aposição inicial da trajectória (Figura 6.14);
Por valor assumido, o Flash começa o movimento a partir do início da trajectória definida na
camada guia, mas esse começo poderá não coincidir com o nosso propósito. Para que não
ocorram saltos bruscos tanto no início como no fim da trajectória, habitue-se a definir as
posições inicial e final do objecto um pouco desfasadas do início e fim da trajectória.
Efectue um clique num qualquer frame da camada vinculada e invoque o comando Create
Motion Tween a partir de Insert Timeline;
Reproduza a animação através do comando Play do menu Control ou carregando
directamente no botão Play do Controlador.
Algumas CONSIDERAÇÕES E DICAS a ter em conta:
É suposto que com as guias de movimento alguns objectos tenham um comportamento similar
àquele que observamos no nosso dia-a-dia e não comportamentos irreais e absurdos; deverá
assim ter algum cuidado e ponderação na aplicação das guias de movimento;
Atenção às guias de movimento que vinculam mais do que uma camada e, assim, vários
objectos; os pontos de partida e final da trajectória destes objectos poderão não coincidir;
Se animar vários objectos ao mesmo tempo com as guias de movimento, tenha atenção para
que as respectivas trajectórias não conduzam a choques ou efeitos inesperados de
sobreposição;
Para que não ocorram saltos bruscos tanto no início como no fim da trajectória, habitue-se a
definir as posições inicial e final do objecto um pouco desfasadas do início e fim da
trajectória; há ainda quem estenda a trajectória da guia de movimento para alem dos limites
d palco;
Caso a trajectória de um objecto cuja camada está vinculada deixe de ser coincidente com a
da guia de movimento foi indevidamente alterada; para que este tipo de acidentes não
ocorra, as camadas guias de movimento deverão estar bloqueadas;
Animação 2D 86
|
Caso a trajectória de um objecto cuja camada está vinculada seja em linha recta e não siga a
trajectória da guia de movimento previamente definida, isto significa que o objecto não foi
encaixado (snap) à trajectória da guia; não se esqueça deste pormenor e do botão Snap to
Objects;
Caso determinada camada não esteja devidamente vinculada a uma guia de movimento,
poderá utilizar a caixa d diálogo Layer Properties e a opção Guided.
PARTE 3
Conclusão
Animação 2D 87
|
7.5.1. Parte 3 - Conclusão
Animação 2D 88
|
Conclusão
Este manual de formação, seguindo um estilo prático e directo, permite conhecer as
principais potencialidades do Flash MX.
Animação 2D 89
|
Bibliografia
Internet www.pc-cuadernos.com – Flash MX.
Flash MX 2004 – Pedro Cid Ferreira, FCA – Editora de Informática.