Adobe Flash CS3 Animação Multimídia
Todos os direitos reservados para Processor Alfamídia LTDA. AVISO DE RESPONSABILIDADE As informações contidas neste material de treinamento são distribuídas NO ESTADO EM QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implícita. Embora todas as precauções tenham sido tomadas na preparação deste material, a Processor Alfamídia LTDA. não têm qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito à responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou indiretamente, pelas instruções contidas neste material ou pelo software de computador e produtos de hardware aqui descritos. 12/2007 Versão 1.1 Processor Alfamídia LTDA (51) 2111-1666 http://www.alfamidia.com.br 2 2008 Processor Alfamídia LTDA.
A Alfamídia dá Boas Vindas aos seus clientes e deseja um excelente treinamento. Benefícios ao aluno - Suporte pós-treinamento via e-mail (3 consultas por 90 dias após o término do curso) para tirar dúvidas do conteúdo ministrado em aula, através do e-mail matricula@alfamidia.com.br ; - Acesso a extranet www.alunoalfamidia.com.br para verificação de agenda e pontos do PROGRAMA FIDELIDADE; - Convênio com o estacionamento do prédio (desconto); - Avaliações de acompanhamento e final de curso (em cada módulo) durante todo o treinamento, garantindo a qualidade do curso. Observações Importantes - É obrigatório que sejam salvos todos os trabalhos efetuados durante a aula, no servidor indicado pelo instrutor. - Não é permitido entrar em sala de aula com alimentos ou bebidas de qualquer espécie ou fumar nas dependências da Alfamídia; - Não é permitida a instalação de outros Hardwares ou Softwares que não sejam os utilizados em treinamento; - O preenchimento da avaliação final de curso/módulo é condição obrigatória para que o aluno possa acionar a garantia do curso, conforme previsto na ficha de matrícula; - Somente será fornecido certificado ao aluno com assiduidade igual ou superior a 75% do treinamento; - Qualquer necessidade de alteração na agenda ou cursos contratados inicialmente, consulte os Termos de Contratação na Ficha de Matrícula; - Contatos com a Alfamídia podem ser feitos através dos e-mails: matricula@alfamidia.com.br dúvidas após contratação info@alfamidia.com.br novas contratações 3 2008 Processor Alfamídia LTDA.
Adobe Flash CS3 Animação Multimídia UNIDADE 1 ADOBE FLASH CS3 ANIMAÇÃO MULTIMÍDIA... 7 1.1 SOBRE O CURSO... 7 1.2 ESTRUTURA DO CURSO... 7 UNIDADE 2 O AMBIENTE DE TRABALHO DO FLASH CS3... 8 2.1 A TELA INICIAL (START PAGE)... 9 2.2 O LAYOUT DO FLASH... 10 2.3 PERSONALIZANDO A INTERFACE... 13 2.4 PAINEL PROPERTIES... 15 2.5 A TIMELINE... 16 2.6 A BARRA TOOLS... 17 2.7 FLA E SWF... 20 UNIDADE 3 COMPONDO NO FLASH CS3... 21 3.1 INICIANDO A MONTAGEM DO SITE... 21 3.2 MODO OBJECT DRAWING... 22 3.3 USANDO O PAINEL ALIGN... 24 3.3.1 Snap Align... 27 UNIDADE 4 TRABALHANDO COM CAMADAS... 29 4.1 AS CAMADAS (LAYERS)... 29 4.2 FERRAMENTA TEXT TOOL... 30 4.3 DISTRIBUINDO ELEMENTOS EM UMA CAMADA... 32 4.4 CRIANDO E APLICANDO PREENCHIMENTOS... 34 4.4.1 Gradiente Transform Tool... 37 UNIDADE 5 ANIMAÇÕES... 40 5.1 CONHECENDO A TIMELINE... 40 5.2 ANIMAÇÃO QUADRO A QUADRO... 42 5.2.1 Onion Skin... 43 5.3 CONHECENDO OS SÍMBOLOS DO FLASH... 44 5.3.1 Biblioteca... 46 5.4 INTERPOLAÇÃO DE MOVIMENTO... 49 5.5 ATRIBUTOS DA ANIMAÇÃO... 51 5.5.1 Animação com Rotação... 51 5.5.2 Animação com Transparência... 51 5.5.3 Aceleração e Desaceleração de Movimento... 52 5.6 COPIAR E COLAR MOVIMENTOS... 56 5.7 IMPORTANDO MÍDIAS... 58 UNIDADE 6 ANIMAÇÃO DE FORMAS... 63 6.1 ANIMAÇÃO SHAPE... 63 6.1.1 Shape Hints... 64 6.2 TRANSIÇÃO ENTRE TEXTOS... 66 6.3 UTILIZANDO BREAK APART EM BITMAP... 67 UNIDADE 7 TRAJETÓRIAS... 69 4 2008 Processor Alfamídia LTDA.
7.1 MOTION GUIDE... 69 7.2 DESENHANDO CAMINHOS COM A FERRAMENTA PEN TOOL... 72 7.3 SUBSELECT TOOL... 74 UNIDADE 8 MÁSCARAS NA ANIMAÇÃO... 77 8.1 USANDO MÁSCARAS... 77 8.2 EFEITO PREENCHIMENTO... 81 8.3 MÁSCARA COM GUIA DE MOVIMENTO... 85 8.4 MÁSCARA ARRÁSTAVEL... 89 8.5 MÁSCARA COM GRADIENTE... 91 UNIDADE 9 APLICANDO EFEITOS... 95 9.1 APLICANDO SOMBRAS... 95 9.2 SOMBRA PROJETADA... 100 9.3 EFEITO BLUR... 103 9.4 EFEITO GLOW... 105 9.5 EFEITO BEVEL... 106 9.6 EFEITO GRADIENT GLOW... 107 9.7 EFEITO GRADIENT BEVEL... 108 9.8 ADJUST COLOR... 108 9.9 COPIANDO E COLANDO FILTROS... 110 UNIDADE 10 CRIANDO BOTÕES... 112 10.1 O SÍMBOLO BOTÃO... 112 10.2 ANIMANDO OS BOTÕES... 114 10.3 BOTÕES DA BIBLIOTECA... 115 UNIDADE 11 INTERAÇÕES COM O MOUSE... 118 11.1 PERSONALIZANDO O CURSOR... 118 UNIDADE 12 CARREGANDO IMAGENS EXTERNAS... 120 12.1 IMPORTANDO IMAGENS EXTERNAS... 120 UNIDADE 13 NAVEGAÇÃO NO FLASH... 127 13.1 TRABALHANDO COM CENAS... 127 13.2 CARREGANDO ARQUIVOS EXTERNOS... 131 13.3 NAVEGAÇÃO NA TIMELINE... 137 13.4 USANDO LABEL... 140 13.5 CRIANDO ROLAGEM DE CONTEÚDO... 141 13.6 COMPONENTE SCROLLPANE... 147 13.7 ALTERANDO AS CORES DO SCROLLPANE... 150 UNIDADE 14 TRABALHANDO COM TEXTOS DINÂMICOS... 158 14.1 BUSCA DE VARIÁVEIS EM UM ARQUIVO DE TEXTO... 158 14.2 TEXTO COM FORMATAÇÃO HTML... 161 UNIDADE 15 BANNERS ANIMADOS... 165 15.1 CRIANDO UM BANNER... 165 15.2 BANNER EXPANSÍVEL... 171 UNIDADE 16 TRANSIÇÕES COM ACTION SCRIPT 3.0... 178 16.1 EFEITO BLINDS... 178 16.2 EFEITO PIXELDISSOLVE... 180 16.3 EFEITO DE ZOOM... 181 5 2008 Processor Alfamídia LTDA.
UNIDADE 17 ÁUDIO NO FLASH... 186 17.1 IMPORTANDO ÁUDIO PARA O FLASH... 186 17.2 CARREGANDO ÁUDIO EXTERNO... 192 17.3 CONTROLE DE VOLUME... 194 17.4 INSERINDO ÁUDIO EM BOTÕES... 197 UNIDADE 18 IMPORTANDO VÍDEO... 200 18.1 IMPORTANDO VÍDEOS PARA O FLASH... 200 18.2 MÁSCARAS EM VÍDEOS... 209 18.3 DOWNLOAD PROGRESSIVO... 210 18.4 CRIANDO UM VÍDEO COM COMPONENTES... 215 18.5 VÍDEO EM TELA CHEIA... 218 18.6 VÍDEO COM FUNDO TRANSPARENTE... 222 UNIDADE 19 PRELOADER NO FLASH CS3... 225 19.1 CONSTRUINDO UM PRELOADER... 225 UNIDADE 20 CRIANDO UM FORMULÁRIO... 228 20.1 UTILIZANDO COMPONENTES... 228 20.2 CONFIGURANDO O ENVIO DE DADOS... 233 UNIDADE 21 CRIANDO MODELOS E COMANDOS NO FLASH... 235 21.1 TORNANDO O FILME UM MODELO (TEMPLATE)... 235 21.2 USANDO OS COMMANDS... 237 UNIDADE 22 PUBLICANDO DOCUMENTOS DO FLASH... 241 22.1 CONFIGURAÇÕES DE PUBLICAÇÃO... 241 22.2 FLASH... 242 22.3 HTML... 245 22.4 GIF... 247 22.5 PNG... 248 22.6 FULL SCREEN... 250 6 2008 Processor Alfamídia LTDA.
Unidade 1 Adobe Flash CS3 Animação Multimídia 1.1 Sobre o Curso O Curso Adobe Flash CS3: Animação Multimídia apresenta aos alunos as principais ferramentas da última versão do programa, fornecendo inúmeras dicas e técnicas para a aplicação do Design. O curso de Flash CS3 trás o que de mais atual a linguagem ActionScript 3.0 trouxe para esta versão do programa. O aluno se surpreenderá com a facilidade e a eficiência que o Adobe Flash CS3 pode realizar em projetos multimídia. Para o profissional de Design, o curso é fundamental por fornecer uma base para entender a animação 2D. 1.2 Estrutura do Curso As primeiras unidades apresentam a interface gráfica deste software, como fazer uma animação básica e visualizá-la. Agrega, também, as ferramentas de desenho e as formas geométricas deste software. As unidades seguintes abordam tópicos como: animação com máscaras, filtros e efeitos, botões e carregamentos de arquivos externos. Também, será montado um site inteiro em Flash, com recursos de áudio, vídeo e utilização de componentes. O curso trás exercícios para criar e manipular elementos visuais como: transições através de programação, efeito de zoom e criação de banners. Durante o transcorrer de todo o curso o aluno aprenderá a trabalhar de forma autônoma e criativa com este software, conhecendo as mudanças e novidades incorporadas ao programa. 7 2008 Processor Alfamídia LTDA.
Unidade 2 O Ambiente de Trabalho do Flash CS3 As animações para Web, tempo atrás, eram feitas principalmente com GIFs animados. A principal dificuldade para os desenvolvedores do Flash era a necessidade de plugin, entretanto a quantidade de usuários que possui o plugin cresceu tanto que o software se tornou o principal meio para a produção de animações para Web. Na versão CS3 o Flash não vem mais com dois programas distintos. Possui apenas a versão Adobe Flash CS3 Professional. Fig 1. TELA DE INICIALIZAÇÃO DO ADOBE FLASH CS3 PROFESSIONAL 8 2008 Processor Alfamídia LTDA.
2.1 A Tela Inicial (Start Page) Fig 2. START PAGE Quando iniciamos o Adobe Flash CS3 aparece à tela inicial, aonde podemos escolher entre abrir um dos trabalhos recentes criados com o Flash, criar um arquivo em branco e escolher entre as seguintes possibilidades: - Flash File: novo documento básico do Flash em branco, opção que utiliza a estrutura de criação tradicional do programa. Temos esta opção tanto para a versão 2.0 quanto 3.0 do ActionScript. - Flash File (Mobile): utilizada para criar um arquivo compatível com o Flash Lite (Flash para dispositivos móveis). - ActionScrit File: gera outro documento numa espécie de editor de texto dentro do Flash para digitarmos scripts do Flash. Este arquivo possui a extensão. as. - ActionScript Communication File: funciona da mesma forma que a opção anterior, mas destinado a escrever scripts para o Flash Media Server (servidor para aplicações server) O arquivo gerado terá a extensão. asc. 9 2008 Processor Alfamídia LTDA.
- Flash Javascript File: permite criar scripts que controlem e auxiliem a utilização do programa. O arquivo terá a extensão JSFL. - Flash Project: Um projeto Flash pode agrupar e organizar diversos arquivos e posteriormente publicá-los no servidor de hospedagem que for configurado. É possível ainda criar um trabalho baseado num modelo (Template) preexistente. 2.2 O Layout do Flash O layout do Flash é desenvolvido para o melhor aproveitamento do espaço, facilitando sua utilização. Na tela inicial crie um novo documento (Flash File ActionScript 3.0). Fig 3. ÁREA DE TRABALHO DO FLASH Do lado direito temos os painéis juntos. Podemos expandi-los ou retraí-los apenas clicando nas setas ao lado direito superior. Ao escolher esta opção vemos os painéis em forma de ícones: 10 2008 Processor Alfamídia LTDA.
Fig 4. PAINÉIS EM FORMA DE ÍCONES Alguns painéis possuem opções adicionais que podem ser chamadas clicando no ícone a sua direita no topo: Fig 5. VISUALIZAÇÃO DO MENU POP-UP DOS PAINÉIS Para abrir um painel que não esteja na tela, clique no menu Window, e entre suas opções escolha o painel desejado. Também, é possível alterar a posição de um painel bastando arrastá-lo pela sua barra superior. Para remover um painel do local em que se encontre encaixado, basta arrastá-lo para fora de sua área, primeiro aproximando o cursor do topo do painel, em seguida pressionando o botão do mouse e arrastando a janela para a área desejada. 11 2008 Processor Alfamídia LTDA.
Para anexá-lo a alguma área, basta movê-lo e quando estiver em um local que possa ser encaixado, a área será realçada. Se soltá-lo em uma área que não ficou realçada, o painel ficará flutuante na tela: Fig 6. PAINEL FLUTUANTE NA TELA DO FLASH Se em algum momento desejarmos que todos os painéis (exceto o painel Timeline) sejam escondidos, basta clicarmos na tecla F4. 12 2008 Processor Alfamídia LTDA.
Fig 7. TELA DO FLASH COM OS PAINÉIS OCULTOS 2.3 Personalizando a Interface É importante a customização da interface do Flash de acordo com seu foco de trabalho, que irá permitir uma maior produtividade do seu trabalho. Temos na parte superior do Flash uma área chamada Workspace, que é responsável por escolher e gerenciar os layouts de área de trabalho como: forma e posicionamento dos painéis. Fig 8. VISUALIZAÇÃO DA AREA WORKSPACE 13 2008 Processor Alfamídia LTDA.
É possível gravar as configurações que tenhamos criado para escolhê-la posteriormente. Depois de configurar como queremos que os painéis estejam distribuídos na área de trabalho, escolhemos a opção Save Current. Na janela digite um nome para este layout de painéis: Fig 9. JANELA SAVE WORKSPACE LAYOUT A partir deste momento podemos encontrar essa opção nas opções da área da Workspace e também no menu Window > Workspace Layout. Fig 10. VISUALIZAÇÃO DA ÁREA DE TRABALHO SALVA Caso queira renomear ou remover um modelo de layout criado na área de Workspace basta escolher a opção Manage e definir as opções desejadas na janela: Fig 11. JANELA MANAGE WORKSPACE LAYOUTS 14 2008 Processor Alfamídia LTDA.
2.4 Painel Properties No painel properties encontram-se as principais opções do elemento que estiver selecionado. Esse painel se subdivide em três partes (separadas por pequenas abas): Properties, Parameters e Filters. Fig 12. PAINEL PROPERTIES Uma área muito importante no Flash é o palco (Stage). Somente os elementos que estiverem nessa área aparecerão do filme gerado pelo programa. O Stage é semelhante à lente de uma filmadora, pois apenas o que estiver no seu foco será apresentado como resultado final do filme. Quando não estivermos com nenhum objeto selecionado no palco a opção Size fica ativa. Nessa janela temos a opção de metadados, que servem para anexar informações nos arquivos SWF, facilitando a indexação em sites de busca. Fig 13. JANELA DOCUMENT PROPERTIES 15 2008 Processor Alfamídia LTDA.
Em Title digitamos o título do nosso arquivo e em Description colocamos uma descrição. Na área Dimensions definimos Largura (Width) e altura (Height) do Stage do Flash. Na área Match podemos fazer com que as dimensões do Stage se modifiquem de acordo com a área de impressão (Printer), que acomodem todos os elementos em cena (Contents) ou que utilizem à dimensão padrão (Default). Em Background color escolhemos a cor do Stage do Flash. Se desejarmos que essas configurações sejam a padrão para os novos filmes do Flash (exceto os metadados, que devem ser criados para cada filme), basta clicarmos no botão Make Default. 2.5 A Timeline Permite controlar o tempo e a estrutura de qualquer projeto. Mostra onde os elementos se encontram a cada momento, conforme o tempo passa. Fig 14. A TIMELINE DO FLASH CS3 A Timeline funciona como um roteiro cronometrado que controla o momento em que o elemento deve estar em determinadas posições, indicadas nessa janela por intermédio de quadros-chave. Para recolher esse painel, devemos clicar no botão Hide Timeline na parte inferior esquerda do painel. Para expandir esse painel, basta clicarmos novamente neste botão., localizado A linha do tempo funciona como uma seqüência de quadros que, ao se deslocar em função do tempo, passa a impressão de que está ocorrendo um movimento. Sua velocidade é medida pela quantidade de quadros que passa a cada segundo (frames por segundo) e quanto maior a quantidade de quadros por segundo, mais rápida a animação estará. 16 2008 Processor Alfamídia LTDA.
Para configurarmos essa velocidade, no painel de propriedades, basta alterarmos o valor do Frame Rate: Fig 15. VISUALIZAÇÃO DO FRAME RATE NO PAINEL PROPERTIES 2.6 A Barra Tools Essa barra contém as ferramentas necessárias para desenharmos, criarmos objetos e definirmos cores no Flash. 17 2008 Processor Alfamídia LTDA.
Fig 16. BARRA TOOLS DO FLASH CS3 Esse painel pode ser exibido de duas formas: como uma única coluna de ferramentas ou como duas colunas: 18 2008 Processor Alfamídia LTDA.
Fig 17. VISUALIZAÇÃO DOS DOIS MODOS DE EXIBIÇÃO DA BARRA TOOLS Para alterarmos entre as formas, basta clicarmos na seta localizada na parte superior do painel, que está apontando para a direita (quando a forma atual for de uma coluna) ou para a esquerda (quando a forma atual for de duas colunas). 19 2008 Processor Alfamídia LTDA.
2.7 FLA e SWF Os arquivos editáveis do Adobe Flash possuem o formato.fla, entretanto, por guardarem todas as informações necessárias para edição, possuem tamanhos maiores que o ideal para Web. Quando finalizamos um filme, geramos um arquivo extremamente leve que será levado para Web, é o formato swf (Shockwave Flash). O swf pode ser importado para um novo filme, mas não pode ser editado. Fig 18. VISUALIZAÇÃO DOS ÍCONES DOS FORMATOS DE ARQUIVOS 20 2008 Processor Alfamídia LTDA.
3.1 Iniciando a Montagem do Site Unidade 3 Compondo no Flash CS3 Podemos criar desenhos e layouts no Flash e todos os tipos de objetos, sem precisarmos importar de algum programa vetorial ou de tratamento de imagem. Suas ferramentas de desenho são de fácil manuseio e podem ser usadas para criar os mais complexos layouts. É bom ressaltar que a criatividade e a prática vão definir a qualidade de cada profissional. 1- Crie um novo documento no Flash. 2- Na opção Size configure a janela Document Properties como na imagem abaixo: Fig 19. CONFIGURAÇÃO DA JANELA DOCUMENT PROPERTIES Agora nosso palco está com fundo preto e com as dimensões que especificamos. 21 2008 Processor Alfamídia LTDA.
3- Salve este arquivo na pasta site como index.fla Antes de começarmos a desenhar formas no Flash vamos ver o Modo Object Drawing. 3.2 Modo Object Drawing Por padrão (quando o modo Object Drawing estiver desativado) as formas que criarmos não serão consideradas como objetos separados. Por exemplo, quando desenhamos duas formas (uma em cima da outra) as informações do desenho que ficarão por trás são descartadas (sendo as duas formas de cores diferentes): Fig 20. FORMAS COM O MODO OBJECT DRAWING DESATIVADO Importante: Se as duas formas forem de cores iguais e estiverem com o modo Object Drawing desativado as formas se unem: 22 2008 Processor Alfamídia LTDA.
Fig 21. FORMAS DE CORES IGUAIS E COM O MODO OBJECT DRAWING DESATIVADO Quando trabalhamos com o modo Object Drawing ativado, os objetos que criarmos serão tratados como objetos separados, os quais podem ser sobrepostos a outros sem haver a perda de nenhuma informação. Fig 22. FORMAS COM CORES IGUAIS E COM O MODO OBJECT DRAWING ATIVADO Um objeto criado por este modo é diferenciado na tela por uma área retangular envolvendo-o. 4- Na Barra Tools selecione a forma Rectangle Primitive 5- Na barra Properties desmarque o cadeado (para não fazer as alterações em todos os lados) e digite como na imagem abaixo, escolhendo uma cor de preenchimento sem contorno: 23 2008 Processor Alfamídia LTDA.
Fig 23. PAINEL PROPERTIES COM AS OPÇÕES DA FORMA RECTANGLE PRIMITIVE 6- Clique e arraste o mouse no palco na parte superior para desenhar a forma: Fig 24. FORMA DESENHADA 7- Para especificar a largura e altura desta forma selecione a ferramenta Free Transform. Quando habilitamos esta ferramenta o painel properties muda. 8- Coloque a largura e altura como na imagem: Fig 25. ESPECIFICAÇÕES DA FORMA RECTANGLE PRIMITIVE 3.3 Usando o Painel Align Para alinharmos esta forma em relação ao palco vamos usar o painel Align. 8- Para habilitar este painel clique no menu Window > Align e posicione o painel: 24 2008 Processor Alfamídia LTDA.
Fig 26. PAINEL ALIGN POSICIONADO O atalho CTRL + K permite acessar rapidamente o painel. Quando a opção To stage estiver selecionada indica que todas as modificações serão aplicadas em relação à Stage: Fig 27. VISUALIZAÇÃO DO PAINEL ALIGN A opção Align poder ser efetuada das seguintes formas: 25 2008 Processor Alfamídia LTDA.
Fig 28. OPÇÃO ALIGN Alinhamento pela esquerda, pelo centro, pela direita, pelo topo, pelo centro, pela base. Fig 29. OPÇÃO DISTRIBUTE A opção Distribute é bastante utilizada quando é necessário distribuir elementos selecionados no palco de maneira que seus pontos centrais ou bordas fiquem com espaços uniformes. Fig 30. OPÇÃO MATCH SIZE Com a opção Match size é possível alterar os tamanhos e posições dos objetos. Fig 31. OPÇÃO SPACE Na opção Space podemos configurar o espaçamento entre três ou mais objetos no palco. 9- No painel Align deixe habilita a opção To Stage. 10- Selecione a forma que criamos e clique na opção: Align horizontal center e depois clique na opção: Align top edge no painel Align. 11- Desça um pouquinho nossa forma geométrica como na imagem abaixo: 26 2008 Processor Alfamídia LTDA.
Fig 32. 12- Salve seu arquivo. FORMA POSICIONADA NO STAGE 3.3.1 Snap Align Temos uma facilidade no Flash quanto temos mais de um elemento no palco. Enquanto arrastamos algum objeto aparecem linhas pontilhadas indicando um possível alinhamento em relação a outro elemento: Fig 33. MOVENDO OBJETOS NO STAGE DO FLASH 27 2008 Processor Alfamídia LTDA.
Para ativar este ajuste, escolha a opção de menu: View > Snapping > Snap Align (por padrão esta opção já vem habilitada) 28 2008 Processor Alfamídia LTDA.
4.1 As Camadas (Layers) Unidade 4 Trabalhando com Camadas As camadas (Layers) correspondem a um método de trabalho muito prático em qualquer tipo de software que se utilize de imagens gráficas, sejam elas vetoriais ou bitmap. Elas permitem organizar mais facilmente conteúdos e localizar elementos. Fig 34. VISUALIZAÇÃO DE UMA LAYER Um projeto em Flash é mais facilmente organizado e composto graças às camadas. As camadas podem ser ainda, subdivididas em pastas, que permitem dividir e organizar todas as categorias de objetos em um projeto de maior amplitude. O manuseio de camadas no Flash é feito de forma idêntica ao de diversos outros programas de edição de imagem. Entretanto, temos algumas opções especiais: Fig 35. ÍCONES DAS OPÇÕES DAS CAMADAS DO FLASH - Insert Layer : permite adicionar uma nova camada a lista; - Add Motion Guide : adiciona uma opção de guia de movimento, criando uma camada especificamente para este fim. - Insert Layer Folder : insere uma nova pasta para organizar as camadas correspondentes. - Delete Layer : remove uma ou mais camadas selecionadas. 29 2008 Processor Alfamídia LTDA.
- Show/Hide All Layers : serve para determinar se as camadas estarão visíveis ou não no documento. Ao clicar no olho as camadas ficarão ocultas e ao clicar novamente, serão exibidas. Podemos escolher apenas uma camada desejada, bastando clicar na bolinha correspondente da camada. - Lock/Unlock All Layers : cria uma trava na(s) camada(s), impedindo que os seus objetos sejam modificados (movidos, deletados, selecionados). - Show All Layers as Outlines : possibilita esconder a visualização dos preenchimentos e contornos do objeto, deixando-os visíveis apenas através de uma fina borda colorida. É uma alternativa a opção de ocultar completamente a camada, uma vez que com essa opção não perdemos a noção do local e tamanho do objeto. Ao selecionar uma camada, observe a presença de um pequeno lápis, indicando que é a camada ativa a ser editada: Fig 36. CAMADA SELECIONADA Ao bloquear a camada, um risco vermelho aparece sobre o lápis, determinando que aquela camada não pode ser editada por encontrar-se bloqueada: Fig 37. CAMADA BLOQUEADA É extremamente importante desenvolvermos o costume de sempre atribuir nomes às camadas criadas, uma vez que esse procedimento otimiza a busca de objetos. Para nomear ou renomear uma camada basta clicarmos duas vezes sobre seu nome e digitar o nome desejado. Para aplicar o nome é só clicar em Enter: Fig 38. CAMADA SENDO RENOMEADA 1- Abra o arquivo index.fla na pasta site. 2- Renomeie a camada que contém a forma geométrica para topo e clique em Enter para aplicar o nome. 4.2 Ferramenta Text Tool Essa ferramenta é utilizada para inserirmos textos no Flash 30 2008 Processor Alfamídia LTDA.
Existem duas opções para esta ferramenta: podemos clicar na área que o bloco de texto deve iniciar e depois digitar ou podemos clicar na área em que o bloco de texto deve iniciar e depois, mantendo o botão do mouse pressionado, arrastar até a área final do bloco, criando uma área predeterminada que o texto deve utilizar. Clicando na Text Tool podemos configurar o texto utilizando as configurações disponíveis na janela de propriedades: Fig 39. OPÇÕES DO TEXTO NO PAINEL PROPERTIES O primeiro elemento a ser configurado é o tipo de texto com as seguintes opções: - Static Text: texto simples que não aceita entrada nem alteração. - Dynamic Text: texto que podemos alterar por meio de ActionScript. - Input Text: caixa de entrada de texto. No painel Properties temos as seguintes opções: - Letter Spacing (espaçamento de caracteres) aceita um valor entre: -60 e 60. - Change Orientation of Text (orientação do texto): horizontal, vertical da esquerda para direita e vertical da direita para a esquerda. - Character Position (posição do caractere): normal, superscript (acima da linha base) e subscript (abaixo da linha base). - Auto Kern : espaçamento automático. - Selectable : se marcado, faz com que, ao passar o mouse sobre o texto (no filme final), o cursor mude e possamos selecionar o texto desejado. - URL : neste campo podemos digitar um link e em Target escolher a opção do frame no HTML em que será aberta a página para qual o link apontará. 31 2008 Processor Alfamídia LTDA.
Quando criamos um texto, podemos utilizar diferentes métodos para renderizá-lo, escolhendo entra suas opções na área Font rendering method: - Use device fonts: faz com o que o filme procure no computador do usuário a fonte que escolhemos na área Font (não incorpora a fonte no filme), deixando o filme com um tamanho menor. - Bitmap Text (No Anti-Alias): remove a opção de suavização de serrilhado, acentuando o serrilhado da fonte. Não recomendada para textos com fontes pequenas. - Anti-Alias for Animation: boa opção para textos envolvidos em animação, melhora a animação e suaviza o desenho. - Anti-Alias for Readability: deixa mais fácil a leitura dos textos, principalmente os que utilizam fontes menores. - Custom Anti-Alias: nesta opção podemos personalizar a suavização de serrilhado. Temos também a opção Edit Format Options na qual é possível definir em pixels uma identação (Indent), espaçamento entre as linhas que compõem um bloco de texto (Line spacing), uma margem à esquerda (Left Margin) e uma margem à direita do texto (Right margin). 4.3 Distribuindo Elementos em uma Camada 3- No arquivo index.fla selecione a ferramenta Text Tool e clique do lado esquerdo do layout digitando: Home 4- Configure as opções do texto como na imagem: Fig 40. CONFIGURAÇÃO DO TEXTO 5- Clique logo abaixo da palavra Home com a Text Tool e digite Produtos. 6- Repita estes passos digitando: Vídeos e Clientes 32 2008 Processor Alfamídia LTDA.
7- Utilize o painel Align para alinhar os textos: Fig 41. TEXTOS DOS MENUS DIGITADOS Agora nossos textos estão alinhados. Observe que todos os textos estão na mesma camada junto com a forma, que esta na camada topo. Iremos distribuir cada texto em uma camada distinta. 8- Selecione todos os textos e clique no menu: Modify > Timeline > Distribute to layers. Observe como ficarão nossas layers: Fig 42. TEXTOS DISTRIBUÍDOS NAS CAMADAS Quando aplicamos o comando Distribute to Layers, a camada criada assume automaticamente o nome que atribuímos ao elemento. Quando trabalhamos com textos e os distribuímos em camadas, as camadas assumem os nomes dos textos. 9- Clique no ícone Insert Layer Folder e renomei-a para menus: 33 2008 Processor Alfamídia LTDA.
Fig 43. NOVA PASTA CRIADA NAS CAMADAS DO ARQUIVO INDEX.FLA 10- Clique em cima das camadas que contém os textos e arraste para dentro da pasta menus. 11- Ordene as camadas de textos na mesma ordem do menu do layout: Fig 44. CAMADAS DE TEXTOS DENTRO DA PASTA MENUS Observe que no lado esquerdo da pasta temos uma pequena seta branca. Quando a seta aponta para baixo, indica que a pasta está aberta, exibindo todas as camadas do seu interior. Para fechá-la, basta clicar na seta. A pasta se contrai e esconde todas as camadas que estão dentro dela. 4.4 Criando e Aplicando Preenchimentos No Flash podemos criar algumas opções de preenchimentos que podem ser aplicados em diversos tipos de objetos. Além das cores sólidas, o Flash cria preenchimentos de gradientes e transparências, que nos permitem a criação de elementos mais sofisticados e com melhor acabamento. 12- Crie um retângulo, em uma nova camada, de 700px por 20px e posicione na parte inferior do Layout (use o painel Align, se necessário): 34 2008 Processor Alfamídia LTDA.
Fig 45. RETÂNGULO CRIADO NO STAGE E POSICIONADO NA PARTE INFERIOR 13- Renomeie esta camada para baixo. 14- Habilite o painel Color: Window > Color (Shift +F9). As configurações de cor e preenchimento estão neste painel: Fig 46. PAINEL COLOR Nas caixas de texto R, G e B colocamos valores entre 0 e 255 para vermelho, verde e azul respectivamente. É possível também escolher as opções Black e White e Swap Color (troca às cores do traço e preenchimento). Na opção Alpha define-se a quantidade de visibilidade que a cor terá, bastando escolhermos um valor entre 0 (transparente) e 100 (totalmente visível). 35 2008 Processor Alfamídia LTDA.
Na opção Type escolhemos o estilo de preenchimento desejado: - Solid: esse estilo de preenchimento aceita uma única cor para cada objeto. - Linear: esse tipo permite a definição de duas ou mais cores e o Flash calcula todas as cores e tons necessários para passar de uma cor a outra. Para alterar uma das cores, basta clicar no quadrado pequeno da cor duas vezes e a caixa de cor se abre. Fig 47. SELEÇÃO DA COR Para adicionar um novo ponto de cor, movimente o mouse na mesma linha. Repare que irá aparecer um sinal de + abaixo do cursor do mouse. Basta clicarmos no local onde desejamos a nova cor e um novo quadrado irá aparecer. Fig 48. QUATRO CORES NA OPÇÃO LINEAR Para remover um ponto de cor, devemos clicar no quadrado referente a ela e mantendo o botão do mouse pressionado arrastar com o mouse para baixo. Temos, também, nesse painel a opção Overflow que indica o que ocorrerá com o que exceder área de atuação do gradiente: repete-se a última cor do gradiente, se repete o gradiente em sentido oposto ou se recomeça o gradiente. - Radial: esse tipo permite a definição de duas ou mais cores e o Flash calcula todas as cores e tons necessários para passar de uma cor a outra. Esse tipo de efeito ocorre em forma circular de dentro para fora. - Bitmap: utiliza uma imagem bitmap como padrão para o preenchimento. 36 2008 Processor Alfamídia LTDA.
4.4.1 Gradiente Transform Tool Essa ferramenta é utilizada para modificar as configurações do preenchimento de gradiente. Para modificar um gradiente linear, devemos clicar no preenchimento com essa ferramenta selecionada. Aparecerão três controles: um círculo ao centro que representa o ponto central do gradiente, um quadrado com uma seta ao centro de uma das linhas, o qual podemos movimentar para dentro e para fora fazendo com que diminua ou aumente a área de abrangência do gradiente e um círculo com uma pequena seta numa das pontas que serve para girar a área do gradiente: Fig 49. MODIFICAÇÃO DO GRADIENTE LINEAR Se alterarmos nosso preenchimento para Gradiente Radial aparecerão quatro controles e uma seta: um círculo ao centro que representa o ponto central da área do gradiente, um quadrado com uma seta ao longo do círculo representativo da área do gradiente, que serve para ajustar a distância entre seus pontos inicial e final, uma pequena alça circular que podemos movimentar para dentro e para fora fazendo com que diminua ou aumente a área de abrangência do gradiente, uma outra alça circular que serve para rotacionar a área do gradiente e a seta para ajustar o ponto central da transformação de cores do gradiente. 37 2008 Processor Alfamídia LTDA.
Fig 50. MODIFICAÇÃO DO GRADIENTE RADIAL 15- Com o retângulo selecionado escolha a opção linear (de preto para vermelho). 16- Selecione a ferramenta Gradiente Transform Tool para modificar seu preenchimento: Fig 51. GRADIENTE DO RETÂNGULO MODIFICADO 38 2008 Processor Alfamídia LTDA.
17- Salve seu arquivo. 39 2008 Processor Alfamídia LTDA.
Unidade 5 Animações 5.1 Conhecendo a Timeline O processo de animação do Flash é orientado pela janela Timeline, na qual se situam as layers e, mais importante, na qual se encontram os frames. Uma animação é uma seqüência de quadros que se altera em função do tempo, dando uma ilusão de movimento. Podemos configurar a quantidade de quadros (frames) que passará a cada segundo. Na parte superior da timeline estão os números em intervalos de cinco em cinco que servem para localizar a quantidade de quadros presente na animação. Fig 52. TIMELINE DO FLASH CS3 Na reta de cada layer temos os frames correspondentes a ela. A cada cinco frames eles estão pintados de cinza para simples referência, mas este fato não altera nada na animação. Logo do início podemos perceber um círculo vazado no primeiro quadro, o que indica que nesse frame não foi desenhado nada nele, é o quadro-chave vazio (Blank Keyframe): Fig 53. QUADRO-CHAVE VAZIO 40 2008 Processor Alfamídia LTDA.
Vamos desenhar um quadrado no palco do Flash. Repare que o círculo representando o Keyframe (quadro-chave) não está mais vazado e sim preenchido, indicando que esse Keyframe possui algum objeto: Fig 54. QUADRO-CHAVE PREENCHIDO COM UM OBJETO Para prolongar a permanência desta forma na tela durante a animação, devemos acrescentar frames a sua layer. Para isso basta clicar com o botão direito no último quadro em que deseja a forma visível e escolher a opção Insert Frame: Fig 55. ESCOLHENDO A OPÇÃO DE INSERT FRAME NO FRAME 30 DA TIMELINE Podemos, ainda, usar a tecla de atalho que é o F5. Caso deseje remover alguns frames da timeline, devemos clicar no quadro que desejamos remover, mantendo o botão do mouse pressionado, arrastá-lo, selecionando todos os frames que queremos retirar e clicar com o botão direito mo mouse escolhendo a opção Remove Frames. Fig 56. QUADROS-CHAVES SELECIONADOS COM E OPÇÃO REMOVE FRAMES MARCADA Na janela da Timeline existe um quadrado vermelho na área numerada com uma linha fina vermelha abaixo. Esta é a cabeça leitora do filme. Ao passar pelos quadros, ela faz a varredura de todos os elementos em cena, exibindo-os. 41 2008 Processor Alfamídia LTDA.
Fig 57. VISUALIZAÇÃO DA CABEÇA LEITORA DO FILME Observe que quando a cabeça leitora passa pelos quadros, ela faz a varredura das informações deles. Na opção Current Frame, localizada na parte inferior da Timelime, podemos visualizar o número do quadro atual, a quantidade de Frame Rate e a quantidade de tempo decorrido até o quadro em que estamos: Fig 58. VISUALIZAÇÃO DO CURRENT FRAME DA TIMELINE 5.2 Animação Quadro a Quadro Esse processo remonta aos primórdios da animação e se constitui na seqüência de várias imagens, uma levemente diferenciada da anterior para simular o movimento. É o tipo de animação mais trabalhoso, entretanto é o que possui resultados mais satisfatórios em termos visuais. 1- Para criarmos uma animação quadro a quadro, vamos desenhar uma elipse e inserir um Keyframe na posição 2 (a tecla de atalho é o F6). Fig 59. TIMELINE COM DOIS QUADROS-CHAVES INSERIDOS 2- Neste caso, a alteração será o deslocamento da elipse. Para fazer isso, vamos selecionar o quadro 2 e deslocar o desenho da elipse um pouco para baixo da posição atual. 42 2008 Processor Alfamídia LTDA.
3- Repita estes procedimentos até chegar ao quadro 10 da Timeline, sempre primeiro inserindo o Keyframe e em seguida deslocando um pouco para baixo a forma. Fig 60. TIMELINE COM 10 QUADROS-CHAVES INSERIDOS Ao final, teremos efetuado nossa primeira animação. Para testá-la, podemos pressionar a tecla Enter ou testá-la na janela de testes do Flash clicando em CTRL + Enter. 5.2.1 Onion Skin Para melhor visualizar os quadros do filme, podemos usar a opção Onion Skin. Essa técnica mostra todos os quadros que desejarmos com diferenciação na opacidade, facilitando o entendimento da animação. Para aplicar esse efeito clique no botão representado pelo ícone Onion Skin, localizado na parte inferior na Timeline: Fig 61. VISUALIZAÇÃO NO BOTÃO ONION SKIN Assim que estiver selecionada essa opção, aparece na parte numerada da Timeline uma área mais escura com alças circulares dos dois lados. Podemos arrastar essas alças para definir quais quadros serão visualizados com o recurso Onion Skin. 43 2008 Processor Alfamídia LTDA.
Fig 62. VISUALIZAÇÃO DO RECURSO ONION SKIN 5.3 Conhecendo os Símbolos do Flash Os elementos desenhados no Flash com as suas ferramentas de desenho correspondem a formas vetoriais. Esses desenhos não suportam determinados tipos de animação que o Flash pode realizar, bem como não permitem diversas aplicações. Para tornar o elemento compatível com as aplicações, é necessário convertê-lo em símbolo. Ao transformarmos um desenho ou objeto em um símbolo, aplicamos um comportamento a esse objeto, indicando que agora ele deve receber ações e comportar-se de forma específica. 44 2008 Processor Alfamídia LTDA.
Todo símbolo criado é armazenado na Biblioteca e pode ser reutilizado diversas vezes, o que não aumenta de forma significativa o tamanho final do filme. 1- Crie uma forma semelhante a uma lua no palco. Fig 63. FORMA DA LUA DESENHADA NO STAGE DO FLASH 2- Com essa forma selecionada, clique no menu: Modify > Convert to Symbol ou pressione a tecla F8. Fig 64. JANELA CONVERT TO SYMBOL Abre-se a tela Convert to Symbol. Nessa tela, além de nomeá-lo, podemos definir que tipo de símbolo o objeto será. Ao definir o tipo de símbolo, estamos determinando de que forma nosso objeto se comportará: - Movie Clip: transforma seu objeto em um clipe de filme, que podem receber animações e outras aplicações, mantendo o vínculo com o filme principal. Cada instancia deste símbolo no palco do Flash pode ser nomeada para ser utilizada por programação. 45 2008 Processor Alfamídia LTDA.
- Button: transforma o objeto em um botão, que permitem realizar a conexão de elementos em projetos interativos e outras funções. - Graphic: converte o objeto em um gráfico. Não mantém vínculo com a Timeline do filme principal. 3- Atribua um nome ao seu símbolo, definindo que ele deve ser um Movie Clip. Observe que ao lado das opções de comportamento do símbolo temos uma opção denominada Registration, na qual podemos definir o ponto de registro do símbolo, o qual é muito útil, uma vez que permite determinar o ponto de rotação de um símbolo, por exemplo. 4- Deixe marcada a opção padrão (ponto superior esquerdo). 5- Clique em OK. 5.3.1 Biblioteca Os símbolos ficam armazenados para que possamos utilizá-los a qualquer momento no Flash. Para abrir a biblioteca escolha o menu: Window > Library ou utilize as teclas de atalho: CTRL + L. Para aplicar um símbolo no palco que esteja na biblioteca, basta arrastá-lo da biblioteca para o palco. Quando um elemento é levado da biblioteca para o palco recebe o nome de instância, uma vez que ele é apenas uma aparição do símbolo na tela. Podemos ter um símbolo aparecendo diversas vezes na tela. Neste caso teríamos diversas instâncias do símbolo no palco. Uma vez que modifiquemos um símbolo, todas as instâncias que o usam como referência também sofreram a alteração. 6- Vamos criar uma estrela. Selecione a forma PolyStar Tool e na janela Properties clique em Options e selecione a opção Star: 46 2008 Processor Alfamídia LTDA.
Fig 65. OPÇÃO TOOL SETTINGS DA FORMA POLYSTAR 7- Desenhe esta forma no palco do Flash e transforme-a em um símbolo do tipo Movie Clip. Fig 66. ESTRELA, JUNTAMENTE COM A LUA NO PLACO DO FLASH Observe que nossos dois símbolos criados estão na biblioteca: 47 2008 Processor Alfamídia LTDA.
Fig 67. VISUALIZAÇÃO DA BIBLIOTECA (LIBRARY) Ao convertemos um objeto em Movie Clipe, atribuímos a ele a possibilidade de ser animado independentemente do filme principal. 8- Vamos entrar no modo de edição do símbolo estrela. Dê um duplo clique nela. Na edição deste símbolo temos camadas, o que significa que podemos animar a estrela na sua própria linha de tempo: Fig 68. VISUALIZAÇÃO DO MOVIE CLIP ESTRELA NA SCENE 1 9- Crie dez Keyframes, no qual cada um, de forma decrescente, deixará a estrela menor. 10- Retorne para o palco principal do Flash clicando no ícone Scene 1. 11- Para ver a animação clique em CTRL + Enter. Nossa estrela está animada, uma animação simples, mas está funcionando. 12- Salve seu arquivo. Importante: Podemos arrastar mais estrelas para o nosso palco. Teste e veja o que acontece. 48 2008 Processor Alfamídia LTDA.
5.4 Interpolação de Movimento Em grandes estúdios de animação, o principal artista não costumava desenhar todos os quadros das animações. Geralmente criava pontos mais importantes e sua equipe desenhava todos os quadros necessários entre os pontos importantes. O Flash trabalha de maneira semelhante. Para melhorar sua produtividade e facilitar nosso trabalho, ele utiliza o sistema de interpolação de movimento, no qual definimos o ponto inicial e final e o Flash calcula todos os quadros intermediários necessários para a animação. Para esse tipo de animação temos que converter nosso objeto em um símbolo. 1- Retorne ao nosso arquivo.fla que contém a estrela e a lua. 2- Selecione a estrela e clique em delete. Veja que nosso símbolo ainda esta na Biblioteca. 3- Crie uma nova estrela com a ferramenta PolyStar Tool. 4- Transforme esta forma em um símbolo do tipo Movie Clip. Observe que teremos que dar um nome diferente para esta nova estrela criada, visto já termos um símbolo estrela armazenado na biblioteca. 5- Clique duas vezes em cima do novo símbolo criado para entrarmos na sua edição. Iremos considerar que nossa animação esta no seu estado inicial e criaremos um Keyframe para o seu estado final. Importante: Antes de fazermos as modificações, devemos sempre inserir o Keyframe; caso contrário nossas alterações serão efetuadas no elemento inicial. 6- Clique no quadro 30 e insira um Keyframe: Fig 69. TIMELINE DA EDIÇÃO DO SÍMBOLO MOVIE CLIP 7- No Keyframe 30 mude a posição da estrela. 49 2008 Processor Alfamídia LTDA.
8- Agora basta clicar com o botão direito do mouse em qualquer quadro entre o primeiro Keyframe e o penúltimo quadro e escolher a opção Create Motion Tween (o último não serve, pois o Flash entenderia que o processo de animação seria dele em diante): Fig 70. CRIANDO A INTERPOLAÇÃO DO TIPO MOTION Ao escolhermos esta opção o Flash se encarrega de calcular todos os quadros intermediários da animação. Na Layer que foi animada, uma seta entre os Keyframes indica que a animação esta correta. Fig 71. TIMELINE COM A INTERPOLAÇÃO DE MOVIMENTO CRIADA E CORRETA Caso apareça uma linha tracejada, significa que há erros na animação: Fig 72. TIMELINE COM A INTERPOLAÇÃO DE MOVIMENTO CRIADA E INCORRETA Podemos, ainda, mudar o tamanho da nossa forma, rotacioná-la e aplicar alguns efeitos. Só que para isso teremos que transformar o objeto que esta dentro do nosso Movie Clip em um símbolo Graphic. 9- Teste a animação. 10- Salve este arquivo na pasta da lição. 50 2008 Processor Alfamídia LTDA.
5.5 Atributos da Animação 5.5.1 Animação com Rotação 1- Crie um novo documento. 2- Crie uma forma geométrica do palco do Flash. 3- Converta-a em um símbolo do tipo Movie Clip. 4- Entre na edição do símbolo e transforme a forma (que é um Shape) é um símbolo Graphic. 5- Crie um quadro-chave na posição 30. 6- Clique entre os quadros-chave e peça um: Create Motion Tween. Selecionando qualquer frame da interpolação é possível verificar que na janela Properties temos algumas opções: Fig 73. OPÇÕES DA INTERPOLAÇÃO NO PAINEL PROPERTIES - Rotate: faz com que o objeto seta rotacionado durante a animação no sentido horário (CW) ou anti-horário (CCW) e até a quantidade de volta na opção times. 7- Clique na opção: CW. 8- Clique em Enter para ver que nossa animação já esta rodando. 5.5.2 Animação com Transparência Em alguns sites vemos animações com elementos diversos que surgem transparentes e tornam-se opacos no decorrer no tempo. Esse efeito é possível graças à propriedade Alpha. 51 2008 Processor Alfamídia LTDA.
Essa propriedade, aplicada em símbolos, pode ser ajustada do valor de 0% (totalmente transparente) até o valor de 100% (totalmente visível). 9- Além de vermos nossa estrela rodando queremos que ela vá diminuindo a opacidade. Selecione o Keyframe 30 e clique no objeto. 10- Na janela Properties temos a opção de Color selecione a opção Alpha com o valor de 0%. Fig 74. PROPRIEDADE ALPHA EM 0% Isso significa que no primeiro Keyframe da animação teremos a forma completamente visível e no keyframe 30 completamente transparente. 11- Clique em Enter para ver a animação. Importante: A animação com Alpha não necessita de movimento para acontecer. O objeto pode estar situado no mesmo ponto do início ao fim. A propriedade Alpha só pode ser aplicada em símbolos: Movie Clipes, gráficos ou botões. 12- Salve seu arquivo na pasta da lição. 5.5.3 Aceleração e Desaceleração de Movimento Muitas vezes em uma animação realizada no Flash precisamos criar um efeito de aceleração ou desaceleração em um objeto, para que a animação fique mais realista. No Flash, nos referimos a essas ações de aceleração e desaceleração como atenuações de movimento, ou Ease. 1- Crie uma elipse e transforme-a em um Movie Clip. 2- Crie um keyframe na posição 40: 3- Na posição inicial deixe esta forma na parte superior do palco e na posição final deixe-a na parte inferior. 4- Crie um movimento do tipo: Tween Motion. 52 2008 Processor Alfamídia LTDA.
Fig 75. TWEEN MOTION SENDO SELECIONADO PARA O SÍMBOLO 5- Na interpolação da linha de tempo da forma clique em qualquer frame. No painel properties, logo abaixo do Tween, encontra-se a opção Ease. Selecione o valor como na imagem abaixo: Fig 76. VALOR DO EASE SENDO MARCADO PARA A INTERPOLAÇÃO Os valores existentes para atenuação de um movimento variam de -100 a 100. Os valores negativos correspondem ao início de movimento lento e posterior aceleração gradual. Já os valores positivos (acima de zero) fazem o movimento iniciar acelerado e tornar-se lento no decorrer do tempo. 6- Teste sua animação. Podemos, também, customizar a aceleração de uma animação, dando mais controle ao usuário para criar movimentos complexos. 7- Ao lado da opção Ease, clique no botão Edit. Abre-se a janela Custom Ease In/Ease Out: 53 2008 Processor Alfamídia LTDA.
Fig 77. JANELA CUSTOM EASE IN/EASE OUT Temos um gráfico em cuja vertical (Tween) esta a animação em si (sendo no exemplo 0% o início da animação e no valor 100% o final da animação) em função dos frames (0 a 30). Este gráfico esta em uma linha reta, ou seja, gradativamente a animação vai da posição inicial até a sua posição final de forma constante. 8- Clique no meio da reta e ajuste esse ponto um pouco mais para baixo: 54 2008 Processor Alfamídia LTDA.
Fig 78. JANELA CUSTOM EASE IN/EASE OUT SENDO ALTERADA 9- Adicione mais pontos no gráfico como na imagem abaixo: Fig 79. 10- Teste sua animação. JANELA CUSTOM EASE IN/EASE OUT COM MAIS PONTOS CRIADOS E ALTERADOS 55 2008 Processor Alfamídia LTDA.
Ao testar, veremos que a animação transformou-se completamente, A bola, em vez de simplesmente descer vai quicar até parar. Uma outra vantagem também é o fato de podermos ajustar as propriedades da animação em separado. Para isso é só desmarcar a opção: Use one setting for all properties, localizada na parte superior da janela. 11- Salve seu arquivo na pasta da lição como bola.fla 5.6 Copiar e Colar Movimentos Muitas vezes criamos uma animação com diversos detalhes como: posições, tamanhos, movimentos, etc. e gostaríamos de reaproveitar a animação criada em outro arquivo filme do Flash. 1- Crie um retângulo com a ferramenta Rectange Tool e transforme-o em um Movie Clip. 2- Crie um Keyframe na posição 40 e mude o Alpha do objeto para 0%. 3- Crie um Tween: motion. O que faremos agora é copiar o movimento e suas características. 4- Clique com o botão direito do mouse em qualquer quadro onde se encontre a animação e escolha a opção de menu: Copy Motion: Fig 80. ESCOLHENDO A OPÇÃO COPY MOTION 56 2008 Processor Alfamídia LTDA.
5- Crie um novo arquivo no Flash. 6- No novo arquivo desenhe uma estrela e converta-a em um símbolo do tipo Movie Clip. 7- Para aplicar a animação que acabamos de copiar, basta clicar com o botão direito do mouse no primeiro Keyframe do nosso novo arquivo e escolher a opção: Paste Motion. A mesma animação criada no arquivo anterior aparece no novo mantendo suas características. Se tivéssemos escolhido a opção Paste Motion Special, seria aberta uma janela para selecionarmos as características que desejamos aplicar no novo arquivo: Fig 81. JANELA PASTE MOTION SPECIAL 57 2008 Processor Alfamídia LTDA.
5.7 Importando Mídias Apesar de o Flash possuir suas próprias ferramentas para desenho, em alguns casos queremos importar nossa arte vetorial, feita em outro software, e manipular a mesma dentro do Flash. Também, podemos importar arquivos bitmaps para ilustrar nosso projeto e ainda obter efeitos bastante interessantes dentro do programa. 1- Abra o arquivo index.fla na pasta da lição. 2- Clique no menu: File > Import > Import to Library e selecione a imagem topo.jpg que esta na pasta site > imagens. Nossa imagem já esta na Biblioteca: Fig 82. IMAGEM JÁ NA BIBLIOTECA DO ARQUIVO 3- Selecione a forma retângulo, que corresponde ao nosso topo, e habilite o painel Color. 4- Na opção Type selecione: Bitmap. Veja como ficou nosso arquivo (Clique em CTRL + Enter): 58 2008 Processor Alfamídia LTDA.
Fig 83. FORMA JÁ COM O PREENCHIMENTO DO BITMAP Se o arquivo ficar piscando teremos que usar um comando básico para fazer com que nosso filme fique parado. 5- Crie uma nova camada acima de todas as outras e renomei-a para acoes 6- Com esta camada selecionada clique em F9 ou Window > Actions. Automaticamente abrirá nosso painel: Actions. Este painel serve para adicionarmos códigos aos frames do nosso arquivo. 7- Digite na primeira linha: stop(); Observe que com este comando nosso filme não estará mais piscando quando clicarmos em CTRL + Enter. Em alguns casos queremos alterar as configurações da imagem para diminuir seu tamanho ou até trocá-la. Para ter acesso as configurações de uma imagem específica, clique duas vezes no ícone que a representa na biblioteca. Será aberta a janela de configurações para imagens: 59 2008 Processor Alfamídia LTDA.
Fig 84. JANELA BITMAP PROPERTIES Nesta janela podemos ver o nome da imagem na biblioteca, o local na sua máquina em que ela se encontra, a data da criação/alteração, suas dimensões e a profundidade da cor. Podemos definir a compressão desejada através das opções: - Photo (JPEG): se possuirmos uma imagem com grande quantidade de cores e tonalidades, devemos usar esta opção. - Lossless (PNG/GIF): se não quisermos que algumas informações de cor e tonalidade sejam descartadas da imagem, devemos usar esta opção. Ideal para imagens que não possuem uma quantidade de cores muito grande. Se quisermos alterar a compressão da imagem, basta desmarcar a opção: Use imported JPG data: 60 2008 Processor Alfamídia LTDA.