e-learning de Flash Mx

Transcrição

1 Departamento de Engenharia Informática e-learning de Flash Mx Setembro 2003 Miriam Rodrigues

2

3 Autora Miriam Brigite Soares Rodrigues Aluna n.º Orientador Dr. Carlos Miguel Miranda Vaz de Carvalho

4

5 Agradecimentos Agradecimentos Gostaria de agradecer a todas as pessoas que me ajudaram e apoiaram na realização deste projecto. Em especial ao meu orientador Dr. Carlos Miguel Miranda Vaz de Carvalho, por todo o apoio prestado, quer pela disponibilidade para esclarecer dúvidas, quer pela revisão das versões preliminares deste trabalho, ou através da indicação de bibliografia útil. Quero também agradecer aos meus pais, que sempre me apoiaram e incentivaram ao longo de toda a minha vida escolar e académica. Por fim, quero agradecer a todos os professores, colegas e amigos, que ao longo de todos estes anos, de uma ou outra forma, me apoiaram, de forma a eu atingir com sucesso os meus objectivos. A todos, o meu muito obrigado. Licenciatura de Engenharia Informática v

6 Índice Índice Índice Geral AGRADECIMENTOS...V ÍNDICE...VI ÍNDICE GERAL... VI ÍNDICE DE FIGURAS... X 1. INTRODUÇÃO RESUMO MOTIVAÇÃO METODOLOGIA USADA LIMITAÇÕES DE ESTUDO ESQUEMA DO RELATÓRIO CONSIDERAÇÕES INICIAIS E-LEARNING INTRODUÇÃO HISTÓRIA COMPONENTES CARACTERÍSTICAS VANTAGENS DESVANTAGENS FACTORES DE SUCESSO IMPORTÂNCIA MÉTODOS DE APLICAÇÃO TIPOS DE TECNOLOGIA Tecnologia Síncrona Tecnologia Assíncrona GESTORES DE CONTEÚDO PLATAFORMAS Características Comuns Exemplos STANDARDS Objectivos Projectos SITUAÇÃO EM PORTUGAL CONCLUSÃO CURSO INTRODUÇÃO ÍNDICE DO CURSO E-LEARNING DE FLASH MX capítulo 1 introdução ao flash O que é o Flash? Licenciatura de Engenharia Informática vi

7 Índice 2. Tipos de imagem digitais: Vector e Bitmap Standards de Imagem da Internet Plug-ins: Extensão da Capacidade dos Browsers Problemas de Produção Revisão Resumo Capítulo 2 - O Ambiente do Flash A Área de Trabalho do Flash Configuração da Área de Trabalho do Flash Preferências Revisão Resumo Capítulo 3 - Fundamentos do Flash: As Ferramentas de Desenho Formas em Flash Fundamentos das formas Ferramenta Linha (N) Ferramenta Caneta (P) Ferramenta Oval (O) Ferramenta Rectângulo (R) Ferramenta Lápis (Y) Ferramenta Pincel (B) Ferramenta Tinteiro (S) Ferramenta Balde de Tinta (K) Ferramenta Transformar Preenchimento Ferramenta Conta-gotas (I) Ferramenta Borracha (E) Ferramenta Zoom (M, Z) Ferramenta Mão (H, SPACEBAR) Revisão Resumo Capítulo 4 - Fundamentos do Flash: Cor Cor em Flash Gradient Linear Gradient Radial Criar Cores Personalizadas Criar Gradients Personalizados Usar os Controlos de Cor por Defeito, Sem Cor e de Troca de Cor Gerir Cores Revisão Resumo Capítulo 5 - Fundamentos do Flash: texto Terminologia Tipográfica Ferramenta Texto Estado Agrupado Revisão Resumo Capítulo 6 - Fundamentos do Flash: Selecção Ferramentas de Selecção Ferramenta Laço Ferramenta Seta Licenciatura de Engenharia Informática vii

8 Índice 4. Modificar as Formas com a Ferramenta Seta Criar Formas através de outras Formas Agrupando Formas Usar a Ferramenta Subseleccionar Variações de Cores com Selecções Exercícios Resumo Capítulo 7 - Fundamentos do Flash: Símbolos Símbolos Instâncias Biblioteca Uso de Instâncias Propriedades das Instâncias Edição de Símbolos Exercícios Resumo Capítulo 8 - Imagens externas Bitmaps no Flash Importação de Bitmaps para o Flash Afixar a Compressão Edição de Bitmaps Usar Bitmaps como Preenchimentos Conversão de Bitmaps para Formas (Vectores) Importação de Imagens Vectores Exercícios Resumo Capítulo 9 - Fundamentos do Flash: Introdução à Animação O Básico da Animação Conceitos Narrativos Perspectiva Movimento de Câmara Edição Revisão Resumo Capítulo 10 - Fundamentos do Flash: Timeline Timeline Criação de Animações com a Timeline Propriedades do filme Animação frame por frame Controles de Transparência Exercícios Resumo Capítulo 11 - Fundamentos do Flash: Motion Tweening Motion Tweening Uso de Guias de Movimento Edição de Múltiplas Frames A Rotação no Motion Tweening Exercícios Resumo Capítulo 12 - Fundamentos do Flash: Shape Tweening Licenciatura de Engenharia Informática viii

9 Índice 1. Shape Tweening Tipo de Transformação Usar Shape Hints Exercícios Resumo Capítulo 13 - Fundamentos do Flash: Uso de Máscaras em Animação Máscaras em Animação Uso de Máscaras no Flash Exercícios Resumo Capítulo 14 - Fundamentos do Flash: Símbolos Animados Símbolos Animados Criar Símbolos Animados Visualizar Instâncias Animadas Repetição por Defeito Animação avançada: O Método Pai/Filho Criação da Animação em Espiral Edição de Símbolos na Palco Principal Comportamento dos símbolos: Graphic ou Movie Clip Exercícios Resumo Capítulo 15 - Fundamentos do Flash: Botões Desenho de Botões: Estados do Botão Planear o Botão Criar o Botão A Timeline do Botão Visualizar os Botões O Estado Hit Exercícios Resumo Capítulo 16 - Fundamentos do Flash: Interactividade com ActionScript ActionScript: A Linguagem de programação do Flash Acções de Frame e a Timeline Uso de Acções de Objecto: Botões Adicionar Acções de Objecto a Instâncias de Botões Uso de Rótulos de Frame Revisão da Estrutura Interactiva Exercícios Resumo Capítulo 17 - Interactividade: Ligação ao HTML A Acção Get URL Caminho para o Ficheiro de Web Link para Exercícios Resumo Capítulo 18 - Som Som na Animação Importação de Som Definir a Compressão do Som Export Settings - Compression Licenciatura de Engenharia Informática ix

10 Índice 5. Utilização do Som no Flash O Painel Properties do Som A Biblioteca de Som do Flash Exercícios Resumo Capítulo 19 - Criação de Preloaders O Preloader Planeamento de um Preloader Adicionar Cenas ActionScript do Preloader Exercícios Resumo Capítulo 20 - Publicação de filmes Flash Publicação de um filme Flash Publicação para a Internet Publicação de um Projector Gerando o Projector Exercício Resumo CONCLUSÃO GLOSSÁRIO REFERÊNCIA Índice de Figuras Figura 2.1 Esquema do Modelo Genérico da Formação Figura 2.2 Esquema de uma Implementação de um e-learning Figura 3.1 Bipmap Figura 3.2 Aproximação de Pixel por Pixel (Escala reduzida) Figura 3.3 Imagem vector no tamanho original Figura 3.4 Imagem vector no tamanho aumentado Figura 3.5 Imagem bitmap no tamanho original Figura 3.6 Imagem bipmap no tamanho aumentado Figura 3.7 Imagem bitmap Figura 3.8 Imagem vector Figura 3.9 Ambiente de Trabalho Figura 3.10 Menu Figura 3.11 Barra de Ferramentas Figura 3.12 Ferramenta Seta Figura 3.13 Opções da Ferramenta Seta Figura 3.14 Ferramenta Lápis Figura 3.15 Painel Propriedades Figura 3.16 Timeline Figura 3.17 Palco Figura 3.18 Exemplo de um Painel Figura 3.19 Ambiente de Trabalho Licenciatura de Engenharia Informática x

11 Índice Figura 3.20 {Clique}, segure, arraste para fora, e liberte a Timeline para desencaixar esta do Palco Figura 3.21 A Timeline ancorada ao fundo do Palco Figura 3.22 Demonstração de desencaixar Painel Transform Figura 3.23 Menu Principal Window/Panel Sets/Default Layout Figura 3.24 Caixa de diálogo Save Panel Layout Figura 3.25 À esquerda o Painel no tamanho original, e à direita num tamanho maior Figura 3.26 A caixa de diálogo Preferences Figura 3.27 Forma circular composta por um traço e um preenchimento Figura 3.28 O traço e o preenchimento da forma separados. Agora há duas formas. 45 Figura 3.29 Secção de Cores (Traço e Preenchimento) na Barra de Ferramentas Figura 3.30 Cores (Traço e Preenchimento) no Painel Color Mixer Figura 3.31 Palette de Cores Standard Figura 3.32 Painel Properties (Estilos de Traço) Figura 3.33 A caixa de diálogo Stroke Style Figura 3.34 A caixa de diálogo Stroke Style (Tipo de Estilo do Traço) Figura 3.35 A caixa de diálogo Stroke Style (Tipo do Estilo Tracejado) Figura 3.36 Caixa de diálogo Estilo do Traço (Tipo do Estilo Tracejado com traços de 3 pontos espaçados entre si por 1 ponto) Figura 3.37 Painel Properties (Espessura do Traço) Figura 3.38 A gama da Espessura do Traço é 0.1 a Figura 3.39 Linha seleccionada Figura 3.40 Linha não seleccionada Figura 3.41 Linha com múltiplos segmentos Figura 3.42 A linha modificada através da Ferramenta Subseleccionar Figura 3.43 Ponto criado com tangentes Figura 3.44 Definição das partes constituintes de um ponto com tangentes Figura 3.45 Linha curva criada pela Ferramenta Subseleccionar Figura 3.46 Modificação de uma linha curva Figura 3.47 Uma linha curva com três pontos. Note que o ponto do centro tem duas tangentes Figura 3.48 Ambas as tangentes giram ao redor do ponto do meio Figura 3.49 Manipulação de uma só tangente Figura 3.50 O resultado final Figura 3.51 A caixa de diálogo Preferences (Edição) Figura 3.52 Passagem da Cor do Traço Corrente para Sem Cor Figura 3.53 Forma oval com uma linha exterior (traço) Figura 3.54 Forma oval sem linha exterior (traço) Figura 3.55 Painel Color Mixer (Cor do Traço) Figura 3.56 Passagem da Cor do Preenchimento para Sem Cor Figura 3.57 Forma oval com um traço (linha exterior) Figura 3.58 Forma oval sem Preenchimento Figura 3.59 Painel Color Mixer Figura 3.60 Preenchimento Linear Figura 3.61 Preenchimento Radial Figura 3.62 Painel Color Swatches Figura 3.63 Opção Raio do Rectângulo Arredondado Figura 3.64 Exemplo de uma forma rectangular com um raio de canto de 20 pontos 58 Figura 3.65 As Opções de Formato de Lápis Licenciatura de Engenharia Informática xi

12 Índice Figura 3.66 A linha à esquerda foi desenhada com o formato Ink (sem ajudas). A linha da direita foi desenhada com o formato Figura 3.67 A linha à esquerda foi desenhada com o formato Ink (sem ajudas). A linha à direita foi desenhada com o formato Smooth, em que o Flash suavizou automaticamente a linha Figura 3.68 Linha desenhada pelo formato Tinta antes de {Libertar} o botão do rato Figura 3.69 Linha desenhada pelo formato Tinta depois de {Libertar} o botão do rato Figura 3.70 Tipos de Pincel Figura 3.71 Forma de uma face Figura 3.72 Forma pintada por cima utilizando o tipo de pincel Paint Normal Figura 3.73 Definição de Traços e preenchimento na forma Figura 3.74 Forma pintada por cima utilizando a opção do pincel Paint Fills Figura 3.75 Neste caso, os lábios foram pintados por cima, mas só a área atrás dos lábios foi pintada Figura Parte do cabelo está isolada por uma selecção Figura Com a opção Pintar Selecção só é pintada a área seleccionada Figura Com a opção Pintar Dentro só pinta o interior de uma forma, mesmo que pinte por fora das linhas Figura 3.79 Menu pop-up do Tamanho do Pincel Figura 3.80 Menu pop-up do Formato do Pincel Figura 3.81 Exemplo de uma cor linear bloqueada Figura 3.82 Esta face é composta por preenchimentos e traços Figura O preenchimento é determinado um traço sólido e grosso, enquanto o estilo de linha é mudado para sólido e traçada Figura 3.84 A cor do cabelo é preta e dos lábios vermelha Figura 3.85 Com um único {Clique} da Ferramenta Balde de Tinta, a cor de cabelo é mudada para amarelo (loiro), e os lábios para azul Figura 3.86 Não há nenhuma cor na parte da face Figura 3.87 Com um único {Clique} da Ferramenta Balde de Tinta, a área dentro dos traços, que define a face, fica preenchida com uma cor gradient linear Figura 3.88 Opção do Tamanho da Lacuna Figura 3.89 Esta é considerada, pelo Flash, uma lacuna grande. A opção Fechar Lacunas Pequenas não funcionaria Figura 3.90 A forma com uma lacuna grande foi preenchida com a Ferramenta Balde de Tinta Figura 3.91 O ponto central do gradient radial é o centro desta forma circular Figura 3.92 O ponto central do gradient radial é o topo direito desta forma circular. 69 Figura 3.93 O ponto central do gradient radial é o fundo esquerdo da forma circular69 Figura 3.94 {Clique} na opção escolhida, segure e arraste esta para Figura 3.95 O preenchimento radial é colocado precisamente no centro da forma Figura 3.96 Com a Ferramenta Transformar Preenchimento, o ponto central do preenchimento radial é deslocado para a esquerda da forma Figura 3.97 O preenchimento radial está dimensionado uniformemente, de branco no centro para preto na extremidade da forma circular Figura 3.98 Com a Ferramenta Transformar Preenchimento, o preenchimento radial é comprimido, produzindo uma forma oval Figura 3.99 O preenchimento radial está dimensionado uniformemente, de branco no centro para preto na extremidade da forma circular Licenciatura de Engenharia Informática xii

13 Índice Figura Com a Ferramenta Transformar Preenchimento, a dimensão do preenchimento radial é reduzido. O resultado é um maior grau de preto na extremidade da forma circular Figura Com a Ferramenta Transformar Preenchimento, a dimensão do preenchimento radial é aumentada. O resultado é um menor grau de preto na extremidade da forma circular Figura O preenchimento radial está dimensionado uniformemente, de branco no centro para preto na extremidade da forma circular Figura Com a Ferramenta Transformar Preenchimento, o preenchimento radial é comprimido, produzindo uma forma oval Figura Aplicando a Ferramenta Transformar Preenchimento Rotação, o preenchimento radial é rodado Figura Opções do Tipo Borracha Figura Formatos da Borracha Figura Arraste para criar a área de ampliação e {Liberte} o botão do rato Figura A área do Zoom da forma no Palco Figura O Seleccionador de Zoom é o menu pop-up do lado esquerdo no fundo do Palco Figura O Seleccionador de Zoom Figura O Seleccionador de Zoom tem vários níveis de ampliação pré-definidos Figura Opções da Ferramenta Zoom Figura A este nível de ampliação podemos ver somente o lado esquerdo do Palco. Se precisarmos de editar o lado direito, podemos utilizar a Ferramenta Mão para mover o Palco para aquela parte do Palco Figura Ao usar a ferramenta Mão a área visível do Palco é trocada pelo lado direito. Agora já é possível editar o lado direito do Palco Figura A Palette de Cores para a Cor do Traço no Flash Figura Cores (Traço e Preenchimento) da Barra de Ferramentas Figura A Cor do Traço no Painel Properties Figura A Palette de Cores para a Cor do Preenchimento no Flash Figura Cores (Traço e Preenchimento) da Barra de Ferramentas Figura Painel Color Mixer (Cor do Preenchimento) Figura Painel Color Mixer (Gadient Linear) Figura Painel Color Swatches (Cores Lineares pré-definidas) Figura Este gradient linear consiste em dois (2) Ponteiros de cor Figura Este gradient linear consiste em seis (6) Ponteiros de cor Figura Este gradient linear consiste em sete (7) Ponteiros de cor Figura Painel Color Mixer (Gadient Radial) Figura Painel Color Swatches (Cores Radial pré-definidas) Figura Painel Color Mixer (Funcionalidades) Figura A Cor de Traço é mudada através de {Clique} de uma cor na Gama de Cores Figura Menu do painel Color Mixer Figura O Painel Amostra de Cores no seu tamanho habitual Figura Usando a scroll bar, para visualizar as restantes cores Figura Painel Color Swatches Maximizado Figura Seleccione RGB ou HSB do menu Licenciatura de Engenharia Informática xiii

14 Índice Figura Painel Color Mixer (Alfa) Figura A palette de cor do Traço Figura A caixa de diálogo Color Figura O uso da caixa de diálogo Color torna o método mais flexível Figura Painel Color Mixer (Cores Gradients) Figura Painel Color Mixer (Cor Linear) Figura Menu do Painel Color Mixer Figura O primeiro gradient é duplicado ao fundo da barra de gradientes pré-definidos Figura Antes de {Clicar} no Ponteiro de Cor branco Figura Depois de {Clicar} no Ponteiro de Cor branco, a cor da área triangular sobre o Ponteiro de Cor muda de cinza para preto Figura A cor amarela está seleccionada Figura A cor Gradient Linear mudou de branco para preto para a passagem de amarelo para preto Figura Adição de um novo Ponteiro de Cor Figura A cor do novo Ponteiro de Cor foi mudada para branco Figura O novo Ponteiro de Cor foi mudado de posição Figura Arraste o Ponteiro de Cor para fora da extremidade da Barra de Identificação do Gradient para remover este Figura O Ponteiro de Cor foi removido Figura Gradient Linear: Branco para Preto Figura Gradient Linear: Preto para Transparente Figura O Ponteiro de Cor é fixado a branco com Alfa a 0%, fazendo que a cor seja completamente transparente Figura Exemplo de um gradient radial com 5 Ponteiros de Cor e com o uso de Alfa Figura Estas são formas circulares gémeas preenchidas com o mesmo gradient, mas a Ferramenta Balde de Tinta foi {Clicada} em diferentes pontos dentro da forma, produzindo assim, efeitos muito diferentes Figura Barra de Ferramentas e Painel Color Mixer Figura A Cor de Traço é amarela e do Preenchimento é preta Figura Ao {Clicar} na opção Cor por Defeito a Cor do Traço fica preta e do Preenchimento branca Figura A Cor do Traço é preta e do Preenchimento é branca Figura Ao {Clicar} na opção Sem Cor com a Cor do Preenchimento seleccionada, esta fica Sem Cor Figura Menu do Painel Color Swatch (Guardar conjunto de Cores) Figura Exemplo de uma terminologia tipográfica básica Figura Exemplo de uma palavra escrita em tipos de letra diferentes Figura Bloco de texto extensível Figura O bloco expande-se quando introduz o texto Figura O bloco vai-se expandindo com a introdução de caracteres Figura Bloco de texto fixo Figura Na introdução do texto, o texto passa para a próxima linha quando alcança a extremidade do bloco de texto Figura Bloco de texto seleccionado com a ferramenta Seta Licenciatura de Engenharia Informática xiv

15 Índice Figura O tipo de letra foi mudado de Garamond para Times New Roman através do Painel Propriedades Figura O texto dentro do bloco de texto foi seleccionado com a ferramenta Texto Figura O conteúdo do texto foi alterado de abc para Figura Painel Properties (Ferramenta Texto) Figura Painel Properties (Uso da fonte) Figura Os caracteres são fixados a um tamanho de "40" com o controlo deslizante Figura Os caracteres são fixados a um tamanho de "20" com o controlo deslizante Figura O espaçamento é fixado por defeito a Figura O espaçamento é fixado a 8. Os caracteres estão sobrepostos Figura O espaçamento é fixado a 4. Os caracteres estão separados espaçosamente Figura A linha base fixada a Normal, significa que o texto é pousado na linha base actual Figura A linha base fixada a Sobrescrito, significa que o texto é alinhado sobre a linha base Figura A linha base fixada a Subscrito, significa que o texto é alinhado abaixo da linha base Figura Texto com link Figura O botão de itálico foi {Clicado}. O texto está em itálico Figura A cor amarela (de valor hexadecimal #FFFF00) foi seleccionada Figura Kern é seleccionado para atribuir os valores do kerning a um conjunto de fontes Figura Alinhamento fixado à Esquerda (por defeito) Figura Alinhamento fixado ao Centro Figura Alinhamento fixado à direita Figura Alinhamento fixado como justificado Figura A margem esquerda está fixada a 13 pixels Figura A margem direita está fixada a 32 pixels Figura O recuo está fixado a 13 pixels. Ambos os parágrafos são recuados Figura O espaçamento entre linha está fixado a -2 pontos. As linhas estão mais juntas e mais próximas Figura Painel Properties (Texto Estático) Figura Painel Properties (Texto Dinâmico) Figura Texto Dinâmico (Tipo de Linha) Figura Texto Dinâmico (Variável) Figura {Clique} na opção apropriada Figura Painel Properties (Texto Dinâmico) Figura Exemplo de um bloco de texto Figura Texto e Forma seleccionados Figura Uma parte do preenchimento que compõe o cabelo foi seleccionada com a Ferramenta Laço Figura A selecção foi colorida com uma cor diferente através da Ferramenta Balde de Tinta Figura Foi retirada a selecção da área pelo acto de pressionar a tecla [ESC]. 114 Figura Opções da Ferramenta Laço Licenciatura de Engenharia Informática xv

16 Índice Figura As formas que compõem o cabelo estão rodeadas por uma selecção poligonal Figura Uma vez completa a selecção poligonal, qualquer forma que esteja dentro das linhas é seleccionada Figura Forma circular com um traço e um preenchimento Figura Ao {Clicar} no traço com a Ferramenta Seta só este é seleccionado Figura Forma circular com um traço e um preenchimento Figura Ao {Clicar} no preenchimento com a Ferramenta Seta só este é seleccionado Figura Forma circular com um traço e um preenchimento Figura Ao fazer {Duplo-Clique} no preenchimento, tanto o preenchimento como o traço ficam seleccionados Figura Com a Ferramenta Seta é criada caixa de selecção Figura A parte do topo da forma circular está seleccionada Figura A parte do topo da forma circular foi movida para um diferente local no Palco Figura Opções da Ferramenta Seta Figura O ponto do centro do objecto encaixa na extremidade do próximo objecto (o cabelo) Figura Ao {Libertar} o botão do rato insere o objecto no seu novo local Figura O Palco com a Grade visível Figura A caixa de diálogo Grid Figura Uma linha curva antes de se aplicar a opção Suavizar Figura Depois de aplicar a opção Suavizar (4 vezes), a linha trona-se mais lisa Figura Uma linha curva antes de se aplicar a opção Acertar Figura Depois de aplicar a opção Acertar a linha é endireitada Figura Linha recta Figura Ao {Clicar}, segurar e arrastar o segmento cria uma curva neste Figura O resultado final. Uma linha recta é transformada numa linha curva Figura Linha recta Figura Ao {Clicar}, segurar e arrastar o ponto final cria uma curva na linha. 120 Figura O resultado final. Uma linha recta é transformada numa linha curva Figura Usando a Ferramenta Seta, a forma (1), é redesenhada, {Clicando}, segurando e arrastando, depois libertando o rato para criar uma nova forma (2-3). O processo é novamente repetido (4-6) até alcançar o resultado particular (7). Estes foram os passos para criar o cabelo para a face feminina (8) Figura Há duas formas feitas de preenchimentos (1-2). Uma forma (2) é seleccionada com a Ferramenta Seta e é colocada sobre a outra forma (3). A selecção é retirada (4). Quando tornar a seleccionar a forma, só há uma forma, porque os preenchimentos têm uma cor idêntica Figura Uma forma da letra c (faz de um preenchimento) Figura Uma forma circular, uma cor de preenchimento diferente de preto Figura A forma c é seleccionada com a Ferramenta Seta e posicionada em cima da forma circular Figura A forma c não seleccionada Licenciatura de Engenharia Informática xvi

17 Índice Figura A forma c é seleccionada e removida da forma circular. Como as formas tinham preenchimentos de cor diferentes, uma forma faz um corte na outra Figura A forma no Estado de Forma. A selecção desta tem um padrão quadriculado Figura A forma no Estado Agrupado. A indicação da selecção agora é uma caixa Figura A forma c foi seleccionada com a Ferramenta Subseleccionar Figura Modifica muito precisa podem ser agora feitas Figura A forma c é transformada numa forma significativamente diferente124 Figura Forma circular no Estado de Forma Figura Seleccione do menu (Insert/Convert to Symbol) ou pressione a tecla [F8] para converter em Símbolo Figura A caixa de diálogo Converter em Símbolo Figura Diferencias na selecção de Instância, Forma, e Agrupada Figura Janela Biblioteca Figura Menu da Janela Biblioteca Figura Menu de contexto sensível Figura O símbolo bola Figura Três Instâncias do Símbolo de bola. A primeira não foi modificada. A segunda foi reduzida em tamanho. A terceira foi inclinada e rodada Figura Um Símbolo que se torna na forma base de todos os botões do filme de Flash Figura O Símbolo bola é usado para os botões. Uma Instância com a palavra contact é colocada em cada Instância da bola. Note-se que só há um Símbolo contact e que a dimensão e a tonalidade (uma Instância é preta e a outra é branca) da Instância contact foram modificadas Figura Painel Properties (Propriedades da Instância) Figura O Brilho está afixado a 78% Figura O Brilho está afixado a -68% Figura A Tonalidade está afixada a 100% para preto, substituindo completamente a cor existente Figura A Instância contact está com o Alfa a 100% Figura A Instância contact está com o Alfa a 20% Figura A Instância bola está inalterada Figura A Instância bola é modificada por subtracção, -107 na cor Azul Figura Palco principal Figura Biblioteca Figura Palco do Símbolo bola Figura Biblioteca Figura O Símbolo é editado e modificado. Foi adicionada outra esfera no topo esquerdo Figura Todas as Instância do Símbolo bola mudaram com a edição do Símbolo Figura A caixa de diálogo Document Properties Figura Seleccione o arquivo que você quer importar em Flash Figura Os bitmaps são colocados no Palco quando importados Figura O carro também é inserido na Biblioteca Figura menu de contexto sensível Figura A caixa de diálogo Bitmap Properties Figura Uma qualidade afixada a Licenciatura de Engenharia Informática xvii

18 Índice Figura Relatório da compressão Figura Opções da Ferramenta Laço Figura A caixa de diálogo Migic Wand Settings Figura Forma pitada coma Ferramenta Pincel com um preenchimento bitmap Figura Forma circular com um preenchimento bitmap Figura Há várias opções, inclusive Color, Área Mínima, Ajuste de Curva, e Limiar de Canto Figura Estas configurações produzem o seguinte resultado Figura o resultado das configurações Figura Uma imagem vector Figura A imagem consiste em quatro camadas, representadas na Timeline Figura Composição da imagem Figura Key Frame 1: O corredor faz alongamentos antes de posicionar-se para a partida Figura Key Frame 2: O corredor posicionou-se para a partida Figura Key Frame 3: O corredor sai da posição de partida Figura Key Frame: O corredor cruza a linha da meta Figura O Palco contém linhas imaginárias aproximadamente um terço do espaço. Deverá colocar os objectos que deseja que os espectadores foquem nestas partes da frame Figura A antena no centro do Palco. A composição não é como efectiva Figura Divisão Clássica horizontal do Palco em três partes Figura Utilização das 2 divisões, vertical e horizontal Figura O Palco é dividido em dois eixos, o eixo dos xx (horizontal) e o eixo dos yy (vertical) Figura No mundo real e em programas de animação de 3D, há um eixo do z que nos dá a profundidade dos objectos Figura Numa aplicação de 3D, o modelo de uma molécula pode ser visto ao longo dos três eixos Figura Note o sombreado, produzido pelos efeitos de luz, que dão a noção de profundidade do modelo Figura Grade de Perspectiva Figura Quatro caixas à mesma distância. Note como os topos das caixas debaixo da Linha do Horizonte estão visíveis e que os fundos das caixas sobre a Linha do Horizonte também estão visíveis Figura Quatro caixas a diferentes distâncias. Note que a dimensão de duas caixas é menor que as outras (que são iguais). A diferença das dimensões e das colocações das caixas cria a ilusão de profundidade Figura Exemplo de profundidade em Flash Figura Combinação de duas formas (círculos e rectângulos). As diferentes dimensões dos círculos e dos comprimentos dos rectângulos conseguem criar uma pequena noção de profundidade Figura A mesma combinação das formas. Só que as formas estão pintadas a gradiente, de modo a produzir o efeito de luz. O que produz uma maior noção de uma forte profundidade Figura Como a movimentação da câmara da esquerda para a direita, o conteúdo (os limites de uma montanha) entra no plano de visão e depois sai fora do plano de visão Licenciatura de Engenharia Informática xviii

19 Índice Figura Como os movimentos da câmara (arrasto) da esquerda para a direita, o conteúdo (os limites de uma montanha) entra no plano de visão e depois sai fora do plano de visão Figura A câmara sofre uma inclinação do fundo para o topo do conteúdo Figura O comprimento focal das mudanças da câmara. A diminuição do Zoom, revela a face da pessoa Figura Logotipo fictício Figura Destaque do rabo do tubarão Figura Destaque da barbatana do rabo do tubarão Figura Olho do tubarão Figura Corpo do tubarão Figura Texto flash Figura Pequeno charco Figura Grande charco Figura Imagem final Figura A Timeline (Elementos) Figura Mostrar/Ocultar Layer Figura Bloquear/Desbloquear Layer Figura Esta Instância com o valor de alfa a 100% é invisível quando o valor de Alfa é de 0% Figura Mostrar Layers como Contornos Figura Timeline com uma key frame em branco Figura Timeline com uma key frame com conteúdo Figura Timeline com Layer de nome bola Figura A caixa de diálogo Document Properties Figura Régua Activada Figura Duas Instâncias, da bola e do chão Figura A Instância colocada ao fundo do Palco Figura Neste momento, a animação consiste numa frame Figura A Layer chão contém uma Instância que não se move por 30 frames Figura A Layer chão está bloqueada Figura Uma nova Layer é criada. Ainda não há nada colocado no Palco nesta nova Layer, mas já tem uma gama de 30 frames, que foi copiada da Layer anterior Figura A posição da Instância bola Figura A Timeline neste momento Figura A Timeline actual Figura A posição da Instância na segunda key frame Figura Controles de Transparência Figura Timeline (Marcadores de Transparência) Figura A gama dos Marcadores de Transferência estende-se até à frame30 (toda a gama desta animação). Além disso, os marcadores foram ancorados para não se moverem quando edita a animação Figura Com o local da Instância ajustado em cada key frames e com os Marcadores de Transparência activos, pode ver simultaneamente os sete estados no tempo Figura A Instância é ajustada em cada uma das key frames Figura A Layer bola consiste em 30 key frames Figura As frames de 1 a 5 estão abrangidas pela opção Papel de Transparência Licenciatura de Engenharia Informática xix

20 Índice Figura Uma bola move-se pelo Palco, dum movimento constante Figura A mesma bola move-se pelo Palco, dum movimento constante. A sobreposição entre as Instâncias de cada frame é exactamente do mesmo tamanho Figura Instâncias num movimento inconstante (reduzindo a velocidade) Figura Instâncias num movimento inconstante (aumentando a velocidade) Figura Padrão de Movimento Figura Os Marcadores de Transparência abrangem as frames de 1 a Figura Cada frame é ajustada, particularmente, a key frame verdadeira (a frame 5) é espremida Figura As frames 5 à 10 são ajustadas Figura Instâncias posicionadas adequadamente no Palco Figura Layer bola Figura A key frame da Frame 1 está seleccionada Figura Painel Properties. A opção Motion do menu Tween está seleccionada186 Figura O Motion Tweening existe entre as key frames da Frame 1 e Figura Figura Painel Properties (Opção Scale) Figura Animação da frame 1 à Figura Painel Properties (Opção Ease) Figura Atenuação de Entrada a um valor de -15 na key frame da Frame Figura Atenuação de Entrada a um valor de -100 na key frame da Frame Figura Movimento em linha recta Figura É criada uma Layer temporária para desenhar a Guia de Movimento. 189 Figura A Guia de Movimento é desenhada, suavizada e convertida num Símbolo Figura Menu de contexto sensível (Adicionar Guia) Figura Uma Layer Guia é adicionada à Timeline Figura Animação produzida com uma Guia Figura Ao arrastar a Instância em cada key frame para a Guia de Movimento, a Instância encaixará na Guia Figura Com os Marcadores de Transparência pode visualizar o novo caminho da animação Figura A Guia de Movimento e cada key frame da animação estão seleccionadas Figura A sequência inteira de key frames é editada Figura Painel Properties (Opção de Rotação) Figura A Instância do cão colocada no Palco Figura A Instância do gato colocada no Palco Figura Seleccione a opção Shape para a Shape Tweening Figura A Shape Tweening não funcionará, tal como indica o símbolo triangular Figura Aparece uma linha tracejada na Timeline. A cor verde indica uma Shape Tweening, mas a linha tracejada indica que a Shape Tweening não funcionará Figura A Shape Tweening já funciona, pois a forma está no Estado de Forma Figura Painel Properties (Shape Tweening Opção Distributive) Figura A Shape Hint é adicionada à primeira key frame Figura São colocadas seis Shape Hints na forma do cão Figura São colocadas as Shape Hints na forma do gato Figura Menu de contexto sensível para eliminar as Shape Tweening Licenciatura de Engenharia Informática xx

21 Índice Figura Tragédia e Comédia Figura Duas Layers, uma com a imagem do planeta Terra e a outra com a de uma estrela Figura O conteúdo das Layers que aparece no Palco. A Máscara ainda não foi activada Figura Duas Layers, a Layer estrela designada como Máscara foi activada, estendendo a máscara às Layer abaixo Figura O conteúdo das Layers que aparece no Palco. Note que a estrela é o buraco da máscara, revelando o que está por baixo desta Figura O padrão gradiente Figura Forma rectangular preenchida com cor uma cor sólida Figura Arrastando a Ferramenta Balde de Tinta, de modo a preencher esta com o gradient Figura A forma quadrada com o padrão gradient Figura O texto da key frame 1. Este passará por cima do gradient durante a animação de 30 frames, terminando a cima do topo do Palco Figura Menu de contexto sensível para criar a Layer Mascara Figura Ambas as Layer contêm um indicador de Mascara, apesar de diferentes Figura Timeline principal da animação da bola aos saltos Figura A Timeline principal que caracteriza uma Instância composta pela animação da bola a saltar Figura A caixa de diálogo Create New Symbol Figura O Palco do Símbolo Figura A Instância do Símbolo A colocada no Palco do Símbolo animarletra Figura Painel Align Figura Três (3) Instâncias seleccionadas Figura Três Instâncias alinhadas à esquerda e distribuídas pelo centro Verticalmente Figura Opções do controle Rotação Figura A Instância animada posiciona-se numa única key frame na Timeline211 Figura A orientação da Instância na Frame Figura Uma key frame é inserida na Frame 29 da Timeline animatedletter 213 Figura Menu de contexto sensível (Limpar KeyFrame) Figura O Motion Tweening na nova key frame deve ser incapacitado e esta deve ser movida para a Frame Figura Quatro Instâncias do mesmo Símbolo animado em orientações diferentes e com diferentes Propriedades da Instância aplicadas Figura A animação orbita Figura A animação espiral Figura Tamanho preciso da abertura Figura Abertura pequena Figura Abertura grande Figura A Instância move-se ao longo do caminho espiral Figura A bola e as formas pais são criadas e convertidas em Símbolos Figura A Instância do pai é animada no Símbolo Figura Dentro do Símbolo pai, a Instância do Símbolo bola é anexada à extremidade da Instância rectangular do Símbolo masterparent Licenciatura de Engenharia Informática xxi

22 Índice Figura Dentro do Símbolo pai, o valor de Alfa da Instância do masterparent é fixado a 0%. O pai fica invisível Figura a animação pretendida Figura Menu de contexto sensível (Editar no Lugar) Figura O Símbolo 360 editado no lugar Figura Caixa de dialogo Create New Symbol Figura Mudar o tipo de Comportamento de um Símbolo Figura Painel Properties (Mudar Comportamento de um Instância) Figura O Símbolo animatedletter como um Movie Clip, basta uma única key frame para a animação ser reproduzida Figura O mesmo Símbolo animatedletter como um Graphic, para a animação ser reproduzida a gama da key frame precisa de ser estendida, de modo a igual a gama de frames no Símbolo Figura Painel Properties (Comportamento Graphic) Figura Estado Up (Para cima). Círculo Gradient Figura Estado Over (Sobre). Círculo Gradient, Anéis que pulsam Figura Estado Drow (Para baixo). Círculo Gradient, tamanho reduzido Figura Timeline da animação Figura A caixa de diálogo Create New Symbol Figura A Timeline do Botão Figura A Layer ball Figura Os Estados na Layer ball Figura Criação de uma key frame no Estado Hit Figura Criação de uma nova Layer, neste caso a Layer pulse Figura Foram inseridas key frames em branco em cada Estado Figura A Instância aquaman foi colocada no Estado Over Figura Botões com texto Figura O actual conteúdo do Estado Hit Figura A área onde o ponteiro do rato fica activo é aumentada Figura O Símbolo xarc é estático Figura A Timeline do Símbolo flower Figura As Instâncias em ambas as Layer fortificando gradualmente em visão por 20 Frames Figura As Instâncias em ambas as Layers rodam gradualmente 90 graus por 35 Frames Figura São colocadas três Instâncias do Símbolo flower juntas e animadas no Símbolo flowercombined Figura A última key frame da sequência é seleccionada Figura Painel Actions Figura {Clique} num Livro para o abrir Figura Painel Actions (Declaração na Janela de Script) Figura Frame com uma Acção associada Figura Animações com botões Figura A primeira key frame contém dois botões Figura Painel Actions-Button Figura Painel Actions (Parâmetros) Figura Painel Actions (Acção Go To ) Figura A Layer buttons foi estendida Figura Atribuição de Rótulos às frames Figura Frame com rótulo Licenciatura de Engenharia Informática xxii

23 Índice Figura Duas frames com rótulos Figura Painel Actions (Acção Go To opção Go to and Play não seleccionada) Figura Acções do Painel Actions Figura Parâmetros do Painel Actions (geturl) Figura Exemplo de uma estrutura de um site Figura Exemplo de ficheiro HTHL que contém Flash Figura Menu do site realizado em Flash Figura Ficheiros de Som Figura O padrão de um ficheiro de som na Janela de Pré-visualização Figura Painel Sound Properties Figura Opções da compressão Figura Compressão (Opção ADPCM) Figura Compressão (Opção MP3) Figura Timeline do Botão Figura Painel Properties (Som) Figura Painel Properties (Escolher um Som) Figura Painel Properties (Efeitos de Som) Figura A caixa de diálogo Edit Envelope Figura Painel Properties (Opção Sync do Som) Figura Timeline do botão com o Som já anexado Figura O Flash inclui um conjunto de sons na Biblioteca de Sons Figura Painel Scene Figura Adição de nova cena, a cena preload Figura Painel Actions (Acção ifframeloaded ) Figura Painel Actions (Acção GoTo ) Figura A Timeline final Figura A caixa de diálogo Publish Settings Figura A extensão.html é mudada para.htm depois de retirar a selecção Use default names Figura A caixa de diálogo Publish Settings Figura A caixa de diálogo Publish Settings (Flash) Figura A caixa de diálogo Publish Settings (Flash) Figura Opções do comando Commands for standalone player Figura Selecção do tipo de Projector Licenciatura de Engenharia Informática xxiii

24 Índice Licenciatura de Engenharia Informática xxiv

25 Introdução 1. Introdução 1.1. Resumo Este trabalho foi realizado no âmbito da cadeira de Projecto, do 5º ano do curso de Engenharia Informática Computadores e Sistemas, do Instituto Superior de Engenharia do Porto, durante o segundo semestre do ano lectivo de 2002/2003. Com este trabalho pretendo abordar o e-learning e o Flash de uma forma simples e prática. Numa primeira parte é realizada uma breve apresentação do e-learning, onde menciono a sua história, objectivos, vantagens, desvantagens, standards e algumas das suas ferramentas. De seguida é apresentado o curso de Flash, tendo como objectivo demonstrar as funcionalidades e características da ferramenta, principalmente os conceitos de utilização desta, de maneira, que o aluno aprenda a planear e visualizar o desenvolvimento do seu projecto em Flash, Os tópicos do curso foram agrupados e ordenados por assunto, formando uma sequência lógica, que tem como objectivo ajudar o aluno na sua aprendizagem, para que este possa utilizar a aplicação de Flash de uma forma optimizada e profissional. Neste curso o aluno, encontra material de apoio, material de referência e propostas de exercícios práticos. Na conclusão do curso o aluno, deverá estar familiarizado com os principais processos de criação/produção de uma aplicação de Flash Motivação A escolha e a realização deste trabalho deveu-se ao facto de se tratar de um tema bastante aliciante, já que considero que esta é uma área muito interessante e com grandes perspectivas de futuro, onde Portugal começa a dar passos largos. Outra razão foi por se tratar de um curso de Flash, aplicação com que gostei de trabalhar. O facto de conjugar um novo método de ensino, que ainda não tive a oportunidade de trabalhar, com o Flash provocou-me um interesse desmedido, ainda mais tomando conhecimento que o ISEP tem vindo a desenvolver este método de ensino Metodologia Usada Para a realização deste trabalho foi necessário efectuar algumas pesquisas na Internet e consultar manuais de formação em programação de Flash, de forma a adquirir material referente ao tema. Também foi importante o apoio e material fornecido pelo meu orientador. Licenciatura de Engenharia Informática 1

26 Introdução A elaboração deste trabalho pode ser dividida em três fases distintas: A primeira fase correspondeu à recolha de informação acerca do e-learning e do Flash. Recolha essa efectuada através da Internet, documentos fornecidos pelo meu orientador, livros e teses. A segunda fase correspondeu à análise do material recolhido. A análise foi exaustiva, pois tinha como intuito eliminar toda a informação desnecessária. A terceira e última parte correspondeu à elaboração do relatório. Nesta fase foi necessário proceder à organização do material, de modo a facilitar a realização deste relatório Limitações de Estudo Factores como o tempo disponível, a elevada informação acerca do tema e a complexidade da organização de um curso condicionaram a realização deste trabalho. Um outro factor determinante foi a subjectividade a que se está sujeito quando se organiza um curso. Ao elaborar um curso e-learning deve-se ter em atenção o perfil, o nível e as necessidades do público-alvo, mas tais factores podem variar de uma pessoa para outra, sendo necessário criar um infra-estrutura adaptável a um pequeno grupo de situações, de forma a que os alunos com pouca ou nenhuma formação em Flash adquiram o conhecimento indispensável para desenvolver um projecto em Flash. Por isso na realização do curso de e-leraning baseei-me em critérios que foram mais unânimes entre as pessoas com quem falei e dos documentos a que tive acesso Esquema do Relatório O relatório encontra-se dividido em 5 partes distintas. Introdução, pequena parte introdutória ao relatório em si; e-learning, neste capítulo dá-se a conhecer um pouco do que é o e-learning;, este é o capítulo mais extenso, pois este contém uma pequena explicação do curso e o próprio curso, dividido em vários capítulos; Conclusão, do próprio relatório; Referências, alguns locais que foram consultados para a realização deste relatório. Licenciatura de Engenharia Informática 2

27 Introdução 1.6. Considerações Iniciais O tema abordado neste trabalho é rico na utilização de estrangeirismos. Apesar de se procurar reduzir ao mínimo tais estrangeirismos, mantiveram-se alguma expressões originais, pois em certos casos corria-se o risco de tornar o texto incompreensível e confuso ao usar expressões portuguesas equivalentes, mas pouco habituais. Pela mesma razão optou-se por assinalar com o itálico os estrangeirismos não traduzíveis. Optou-se também por assinalar como o itálico e negrito os comandos e funções referentes à aplicação Flash, de forma a dar mais ênfase. Licenciatura de Engenharia Informática 3

28 Introdução Licenciatura de Engenharia Informática 4

29 e-learning 2. e-learning 2.1. Introdução O termo e-learning tem vindo a emergir nos últimos dois anos e tem vindo a ser utilizado para cobrir praticamente todas as iniciativas tecnológicas de apoio à aprendizagem. A expressão e-learning traduzida literalmente significa aprendizagem electrónica, mas numa abordagem mais concreta consiste numa modalidade educativa mediante a qual os alunos estão fisicamente separados do estabelecimento de ensino, e onde o processo de aprendizagem é feito fora dessa instituição. Os alunos estudam no local que mais lhes convém e ao seu próprio ritmo, e podem mais facilmente conciliar os estudos com compromissos profissionais. Esta é uma modalidade de ensino à distância, que requer a utilização de várias tecnologias educativas que facilitam tanto a aprendizagem como a comunicação entre formador e alunos. O conceito de e-learning, introduzido nos Estados Unidos por Elliot Masie, define o e- Learning como a capacidade de uma pessoa participar num evento de aprendizagem que poderá ser uma aula de uma universidade ou um centro de formação utilizando uma tecnologia como sistema de entrega dos conteúdos. O e-learning apresentar-se hoje em dia como resposta às necessidades emergentes de uma sociedade caracterizada por elevados níveis de competitividade em que o tempo é um factor crítico no desenvolvimento dos indivíduos e das instituições. A aprendizagem sempre foi um processo de longa duração e de acessibilidade limitada. Um trabalhador para poder aumentar o seu valor no mercado de emprego, tinha como única hipótese frequentar uma escola nocturna, o que exige uma grande dose de automotivação. Com o e-learning a escola vai ter com o trabalhador. Com modalidades de formação mais pequenas e personalizadas, num regime de horários totalmente flexíveis o e-learning possibilita a focalização da aprendizagem numa competência específica ou num determinado conjunto de informações. O aumento da sua utilização deve-se em parte ao constante desenvolvimento das novas tecnologias, mas também à necessidade por parte de indivíduos/instituições em encontrar uma forma de aprendizagem de baixo custo, rápida, eficaz e de fácil acesso, características que definem o e-learning. O ensino à distância tem recorrido sempre às novas tecnologias à medida que estas se tornam acessíveis e o seu potencial educativo e interactivo é comprovado. Actualmente, a grande maioria de estabelecimentos educativos em todo o mundo, assim como o sector empresarial, de formação e governamental, reconhecem a importância e o potencial do e-learning na formação e na educação. Licenciatura de Engenharia Informática 5

30 e-learning 2.2. História O conceito de e-learning não é novo, apesar de só ter atingido maior destaque nos últimos anos, devido ao impacto e disseminação das novas tecnologias de informação. Embora alguns especialistas considerem que já o Apóstolo Paulo utilizava métodos de ensino à distância nas suas epístolas, esta modalidade de ensino remonta oficialmente ao século XIX, e coincide com a rápida expansão da rede de caminho de ferro nos Estados Unidos da América. A melhoria das comunicações permitiu o aparecimento e a consolidação do ensino por correspondência, como se chamava então, pois tanto os materiais pedagógicos como a correspondência epistolar entre professores e alunos eram transportados de comboio. Com a invenção do telefone, este novo meio de comunicação foi rapidamente adoptado como forma de interacção entre estabelecimentos de ensino, professores e alunos. O ensino à distância tem recorrido sempre às novas tecnologias à medida que estas se tornam acessíveis e o seu potencial educativo e interactivo é comprovado. Pode-se dizer que a evolução do EAD (Ensino Aberto e à Distancia) deveu-se a quatro fases distintas: Ensino por correspondência Durante a segunda metade do século XIX, com a evolução dos serviços postais, começaram a surgir os primeiros cursos à distancia nos Estados Unidos da América e na Europa. Nesta época o EAD caracterizava-se, essencialmente, pela troca de documentos em papel, tais como manuais de estudo, livros e outros materiais impressos, entre o aluno e o formador, através do correio. Tele-educação Nos anos 60 do século XX o EAD surgiu com outra dinâmica, caracterizando-se, na época, pela difusão através do rádio, televisão, cassetes de áudio ou de vídeo. Nestes sistemas a comunicação era quase sempre unidireccional, a não ser quando havia a necessidade de utilizar o telefone ou a troca de escrita. Serviços telemáticos Nesta fase o EAD surgiu com a comunicação bidireccional entre aluno e formador, houve um aproveitamento das capacidades do som, da imagem e dos movimentos para a transmissão do conhecimento. O surgimento da comunicação assíncrona, tal como o correio electrónico e os grupos de discussão (fóruns), permitiu uma maior flexibilidade e interacção entre os vários intervenientes. Comunidades virtuais e e-learning Com a evolução das tecnologias os meios de comunicação descritos nas fases anteriores tornaram-se mais interactivos. A evolução da telemática e principalmente da Internet veio alterar alguns conceitos de difusão e da gestão da informação que suportam as três fases anteriores e também muitos conceitos tradicionais, baseados na interacção presencial aluno/formador. Licenciatura de Engenharia Informática 6

31 e-learning Actualmente, a maior parte das instituições que ministram o ensino à distância utiliza as mais modernas tecnologias, em simultâneo com as tecnologias tradicionais. Hoje em dia, apesar dos participantes no processo educativo continuarem fisicamente separados uns dos outros, o conceito de distância alterou-se profundamente, visto a separação geográfica já não constituir uma barreira à interacção e à aprendizagem. Enquanto que antigamente a distância geográfica constituía o grande desafio que se colocava ao ensino à distância, actualmente é o factor tempo que se apresenta como o maior obstáculo Componentes Para que um curso e-learning seja bem sucedido, são necessárias algumas exigências, tanto para o aluno, como para o formador e/ou quem estrutura o programa, bem como a nível tecnológico e financeiro, já que a implementação de uma rede capaz é bastante dispendiosa. Assim, no processo de aprendizagem on-line destacam-se quatro elementos fundamentais: O Aluno Este deve ser uma pessoa madura que se auto-motive, que aceite novas experiências e o pensamento critico, saiba e esteja disposto a trabalhar colaborativamente, e que disponha do tempo necessário para se manter a par das matérias abordadas. O Formador Este é o responsável pelo desenho do programa de ensino on-line e o apoio tutorial. O formador tem ainda como funções, guiar o aluno de modo a ajuda-lo a descobrir e a sintetizar o material de estudo, criar um bom ambiente na sala de aula virtual e introduzir o pensamento critico na aprendizagem. O Programa Este deve ser desenhado especificamente para a natureza do ensino on-line, promovendo o dialogo entre os participantes. Todos os programas devem ser sujeitos a um processo de aprovação, tal como acontece no ensino presencial. A Tecnologia Esta deve ser de fácil utilização (intuitiva), acessível e barata, acima de tudo deve ser uma ferramenta que permita a gestão da aprendizagem. A utilização de uma ferramenta desapropriada pode complicar o processo de aprendizagem em vez de o facilitar. Licenciatura de Engenharia Informática 7

32 e-learning 2.4. Características Este novo paradigma apresenta varias características, sendo as mais importantes as seguintes: Personalizado Todas as pessoas acedem ao mesmo conteúdo, apresentado de uma forma personalizada para diferentes necessidades de aprendizagem. Actual O conteúdo no e-learning é actualizado instantaneamente, sempre que necessário, visto estar centralizado e disponível on-line. Interactivo A interactividade torna a aprendizagem mais rápida, mais intuitiva e mais fácil. Em certos casos é possível a assistência imediata de um formador ou a interacção com outros alunos para o esclarecimento de duvidas ou troca de impressões. Disponibilidade O aluno acede ao conteúdo do e-learning em qualquer lugar e em qualquer altura, no momento mais conveniente para ele. Centrado no aluno O aluno dispõe de um modo de aprendizagem que se baseia, primariamente, nas suas necessidades e não apenas naquilo que o formador sabe ou pode transmitir. Baixo custo O e-learning cria uma excelente relação de custo/benefício, anula as despesas de viagem, reduz o tempo que é necessário despender para formar pessoas e diminui o uso de salas de aulas. Facilidade de manuseamento Devido ao número de utilizadores que dominam a utilização do browser e navegam na Internet, não existe nenhum problema de adaptação na utilização do e-learning. Licenciatura de Engenharia Informática 8

33 e-learning 2.5. Vantagens As vantagens mais significativas do e-learning são as seguintes: Independência no espaço Pode-se aceder ao ensino onde se quiser, no emprego, em casa, dentro ou fora do país! Neste tipo de ensino a distância para aprender deixa de ser um impedimento, os alunos podem participar numa aula a partir de qualquer parte do mundo desde que disponham de um computador ligado à Internet. Através do e-learning os melhores especialistas vão ter consigo! Independência no tempo De manhã ou à noite, a sala de aula está aberta 24 horas por dia, 7 dias por semana. Os alunos podem escolher as melhores alturas para aceder à aula, aqui o tempo nuca se torna um impedimento para se aprender. Materiais instrucionais Possibilidade de utilização de formato amplo (incluindo multimedia), que enriquecem o material oferecido. Adaptável ao assunto: se o conteúdo é teórico, textos podem ser o meio mais adequado; se o conteúdo for técnico, pode ser ensinado através de vídeo, com grandes vantagens. Manter os alunos actualizados dispensa uma logística de distribuição de materiais, apenas renovando-se os conteúdos armazenados nos servidores. Interactividade Este tipo de ensino promove a interacção entre o aluno e o formador e entre os próprios alunos através de correio electrónico, fóruns de discussão, ambientes de aula virtual, vídeo-conferência. A dinâmica desta interactividade é uma das características vitais do e-learning. Acesso a recursos Este tipo de ensino destaca-se pela sua flexibilidade. Devido à sua arquitectura assentar na Internet, os alunos têm fácil acesso a recursos e informações em qualquer parte do mundo. Centragem no aluno São os alunos que controlam a sua própria aprendizagem, ou seja, cada aluno aprende ao seu ritmo, desenvolvendo as competências individuais que necessita, no menor tempo possível. Licenciatura de Engenharia Informática 9

34 e-learning Anonimidade Neste ensino mantém-se um certo anonimato, logo os factores discriminativos como a idade, sexo, raça, religião e outros aspectos estão ausentes. O foco deste ensino é, sem duvida, o conteúdo da discussão e a capacidade individual de cada um. Estruturação do dialogo Devido à discussão assentar principalmente na comunicação assíncrona, o aluno tem tempo de reflectir sobre qualquer ponto da discussão antes de responder ou passar ao próximo ponto, o que permite uma melhor estruturação das respostas, mas a existência de uma comunicação síncrona também é necessário (por exemplo, utilização de ferramentas de chat) Desvantagens Como desvantagens do e-learning, aparecem os seguintes itens: Ausência de relação humana formador/aluno; Conteúdos mais generalistas; Contingência tecnológica largura de banda e terminais; Exige alguns conhecimentos tecnológicos; Reduzida confiança neste tipo de estratégias educativas; Custos elevados dos cursos e do material; Pressupõe a utilização de um computador ligado à Internet Factores de Sucesso Os principais factores de sucesso do e-learning são: Autonomia Capacidade de determinar quando e o que quer fazer. Tipicamente um adulto é capaz de lidar com a ausência física de um formador e de horários pré-estabelecidos de estudo, conduzindo sua formação baseando-se em seus objectivos. Estes objectivos, profissionais ou não, devem determinar a escolha dos cursos, uma vez que isto diminui as taxas de desistência e aumenta o seu aproveitamento. Licenciatura de Engenharia Informática 10

35 e-learning Apoio do empregador Numa empresa, é importante que esta suporte a actividade de e-learning, oferecendo: - Condições físicas (equipamentos, local); - Uma parcela do tempo do trabalho para sua realização. A empresa deve considerar o treino como um investimento, a fim de obter melhores condições de se manter num mercado competitivo e globalizado. Deve ter em conta os objectivos do empregado na empresa, visando maximizar o aproveitamento dos cursos oferecidos ao indivíduo. Apoio da família Um curso à distância toma tanto ou mais tempo e esforço do que um convencional. O aluno deve ser informado desta necessidade e negociar com a sua família espaço suficiente para que realize a contento suas actividades. Isto tende a prover uma maior taxa de sucesso, agregando a unidade familiar em torno de um objectivo, facilitando a criação de condições de estudo e de execução de tarefas relativas ao curso. Outras influências Alunos que tenham aplicação, imediata ou prevista, do conteúdo dos cursos em seu trabalho tendem a ser mais bem sucedidos. s que permitem maior controlo por parte do aluno são mais adequados àqueles que possuem um alto nível educacional; cursos directivos tendem a ser mais bem vistos por alunos de menor escolarização. O feedback dos formadores é de grande importância para a manutenção da motivação. A ausência ou baixa qualidade do feedback estão fortemente relacionados as desistências e o baixo aproveitamento Importância A importância do uso do e-learning prende-se a factores como: Os desafios Países e organizações necessitam de se adaptar às demandas que a economia da Internet está a gerar, para estarem sempre à frente de um mercado cada vez mais competitivo. - Os países precisam de educar os seus cidadãos; - As empresas necessitam de formar os seus colaboradores; - Os Institutos Educacionais necessitam de oferecer programas inovadores. Licenciatura de Engenharia Informática 11

36 e-learning As oportunidades Na era da informação, as oportunidades de aprendizagem aumentam o tempo que se pode utilizar para aprender - da infância à vida adulta. As nossas habilidades e conhecimentos precisam de ser constantemente actualizados para nos sentirmos com capacidade de enfrentar as novas tecnologias e desafios. O e-learning permite: - Saber mais e aprender mais rapidamente com menores custos; - Aproveitar o poder da informação e do conhecimento. Benefícios para os negócios: - Melhorar a produtividade; - Incrementar a lucratividade; - Aumentar a fidelidade do colaborador. Benefícios para Educação: - Variadas fontes de informação; - Aumentar o acesso para estudantes tardios; - Melhorar a qualidade; - Adopção rápida das novas informações e novos programas Métodos de Aplicação O modelo genérico da formação, pode ser esquematizado como sendo constituído por sessões de estudo, encadeadas de acordo com a lógica estabelecida pelo programa do curso. Figura 2.1 Esquema do Modelo Genérico da Formação Neste esquema: A primeira sessão tem como objectivo permitir aos alunos e formador a familiarização com o plano do curso, actuando também para estabelecer uma coesão de grupo/turma formador. Licenciatura de Engenharia Informática 12

37 e-learning A última sessão, é tipicamente para se efectuar a avaliação do curso, do formador e dos alunos. A implementação prática de um curso com a aplicação de e-learning, pode ser esquematizada da seguinte forma: Figura 2.2 Esquema de uma Implementação de um e-learning Basicamente o modelo de formação é o mesmo, quer se trate de formação tradicional (presencial) quer se trate de formação à distância. O que muda são os suportes físicos de apoio ao aluno e a forma como os conteúdos são transferidos para assimilação. Na formação tradicional, temos o formador como instrumento dinamizador do estudo dos conteúdos e respectiva transferência, o espaço físico da sala de aula e respectivos suportes, quadro, canetas, projector, etc. Na formação à distância, temos a plataforma de e-learning como interface físico entre aluno e o formador Tipos de Tecnologia Tecnologia Síncrona Esta tecnologia caracteriza-se por permitir comunicações à distância mas coincidentes no tempo, isto é, ambos os intervenientes têm que estar presentes. A interacção pode ser estabelecida pelo o uso da videoconferência, Netmeeting, Chat (conversas on-line) e as sessões são realizadas a uma hora pré-estabelecida Tecnologia Assíncrona Esta tecnologia caracteriza-se por permitir comunicações à distância mas não coincidentes no tempo, isto é, os intervenientes podem estar presentes em tempos diferentes. Os alunos trabalham autonomamente, no local de trabalho, ou em casa, através de download de conteúdos ou de participação em fóruns de discussão, mas sempre via Intranet/Internet. Licenciatura de Engenharia Informática 13

38 e-learning Gestores de Conteúdo Quando uma empresa implementa um programa de e-learning, esta precisa não só dos cursos em si, mas também de uma aplicação que administrará o acesso e disponibilidade de cada curso, a matricula e acompanhamento de aproveitamento de cada aluno, e a geração de relatórios sobre todas estas actividades para a gerência da empresa. LMS e LCMS são aplicações baseados em bancos de dados que fazem todas estas e outras tarefas. LMS é a abreviação de Learning Management System e LCMS é Learning Content Management System. Um LMS é uma aplicação que faz a gestão das actividades dos alunos de e-learning via Internet/Intranet. Este permite o controle das matrículas, dos pagamentos dos cursos quando houver, do andamento de cada aluno nas lições, dos resultados de avaliações, etc. Um LCMS controla a disponibilização do conteúdo dos cursos na Internet/Intranet, permite a sua navegação, etc. Há aplicações que englobam tanto funções de LMS como de LCMS e geralmente são chamadas simplesmente de LMS ou, em português, de gestor de conteúdo. Existem fornecedores de LMS/LCMS de todos os portes e preços, nacionais e estrangeiros. Certos LCMS também permitem aos seus utilizadores criarem conteúdo para e- Learning. O problema das ferramentas de autoria é que a grande maioria de seus utilizadores não são especialistas em conteúdo, nem em design, nem em multimedia, então acabam produzindo cursos do tipo livros on-line e que podem tornar o processo de aprendizagem tedioso e desestimulante. Uma empresa ou universidade deve considerar com cuidado esta opção, porque muitas vezes, se torna mais um caso de o barato sai caro - e ineficiente Plataformas Até à pouco tempo quando um membro duma instituição pretendia oferecer um curso à distância, ou simplesmente oferecer conteúdos de complemento às aulas tradicionais, este ou esta, para além de ser perito no conteúdo a divulgar, teria ainda que ser capaz de conceber de raiz toda uma estrutura que originaria o site onde iria divulgar o seu curso. Todo este processo, quando realizado sem ajuda de profissionais, implicava o investimento de muitas e muitas horas. Primeiro teria que passar por um processo de aprendizagem sobre o funcionamento das ferramentas de edição de páginas web, tarefa que já não exigindo o conhecimento de programação HTML, podia levar várias horas para os menos habituados a estas coisas dos computadores. Depois de dominadas algumas funcionalidades dessas ferramentas, havia ainda uma série de coisas a considerar. Desde opções de imagem, opções dinâmicas e toda uma série de novas Licenciatura de Engenharia Informática 14

39 e-learning opções multimedia, fóruns, chats, que implicam antes demais muitas horas on-line a aprender com o que os outros têm feito. Desenvolver tudo isto de raiz e sem ajuda pode queimar por completo a tal ideia inovadora dos conteúdos on-line. Em Portugal, regra geral é este ainda o processo habitual, com os professores a título individual a desenvolverem as suas páginas de apoio à sua cadeira, envolvendo recursos não institucionais e diferentes tipos de tecnologias. Todo este esforço, talvez possa no futuro ser considerado como a necessária fase de iniciação. Esta fase ficará marcada pelo fraco aproveitamento das tecnologias existentes, com um produto caracterizado pela digitalização, sem tratamento prévio, das velhas sebentas, que em formato PDF são distribuídas pelos alunos nos ditos cursos on-line. Cientes dos altos retornos esperados no mercado do e-learning, várias empresas de desenvolvimento de software têm vindo a desenvolver software específico para a gestão e desenvolvimento de cursos on-line, ao qual tem sido atribuída a designação de plataformas de e-learning. Duma maneira geral a filosofia destas aplicações é permitir aos utilizadores, professores/formadores e alunos/formandos, que com um mínimo de tempo de aprendizagem possam usufruir de tudo o que a tecnologia tem para oferecer. Assim, as instituições adquirem a plataforma que é normalizada pelos serviços de informática ou por grupos de trabalho, tendo em vista a definição da imagem que se pretende transmitir e do tipo de funcionalidades a disponibilizar. Depois os formadores (só) têm que aceder à Internet e mediante uma password fazer uso do espaço que a instituição lhes oferece. Espaço esse que já vem com as tais normalizações, tendo o formador apenas que preencher ao espaços em branco para implementar o seu curso on-line. Se por um lado se perde alguma liberdade na construção das páginas, por outro ganha-se em termos de facilidade de gestão e desenvolvimento, com a grande vantagem de deixar de ser uma iniciativa individual e passando a ser uma questão de imagem de marca da instituição Características Comuns Criam um ambiente integrado para cada disciplina em que só os elementos inscritos têm acesso; Permitem elaborar conteúdos de suporte sem necessidade do docente ter conhecimentos de programação; Possibilitam a elaboração de testes interactivos (fornecem imediatamente feedback ao aluno) com registo de resultados para cada aluno; Dispõem de diversas ferramentas de comunicação com todos os alunos (i.e. anúncios de interesse geral) ou selectivamente (i.e. tirar uma dúvida); Tornam possível a comunicação aos alunos de trabalhos/projectos a realizar e a recepção pelo sistema desses mesmos trabalhos/projectos (i.e. ficheiro) de forma integrada; Licenciatura de Engenharia Informática 15

40 e-learning Asseguram uma zona do aluno na qual ele pode dispor de página pessoal, fóruns próprios, etc Exemplos WebCT O Web-CT é um programa desenvolvido pela University of British Columbia, que permite a criação de ambientes educacionais baseados na Web. Características: - permite a criação da interface (apresentação). - disponibiliza um conjunto de ferramentas para facilitar o aprendizado, a comunicação e a colaboração dos participantes. - possui um conjunto de recursos administrativos que auxiliam o formador no processo de gerenciar e actualizar o curso. LearningSpace O LearningSpace é um ambiente para a criação de cursos on-line desenvolvido pela Lotus/IBM e possui os seguintes recursos: Schedule, MediaCenter, CourseRoom, Profiles e Assessment Manager Existe ainda LearningSpace Central que é um módulo multifuncional que contém várias ferramentas valiosas, inclusive: Ferramentas de Gerenciamento de s, Bibliotecas Personalizadas e Ferramentas de Administração. TopClass O TopClass conecta os alunos em aprendizagem entre si e com o formador num ambiente integrado, através de Intranet ou Internet. Muitas das características que foram somadas derivam de histórias de sucesso real de seus clientes. A Versão 2.0 contém um bom formulário de inscrição on-line e permite, seja para os estudantes existentes ou para os novos, a possibilidade de se associar em uma ou mais classes. Web Course in a Box O Web Course in a Box é uma ferramenta para criação e administração de cursos baseados na Web (Web-based) desenvolvida pela Virginia Commonwealth University. Possui recursos para criação de páginas pessoais dos alunos, secção de informações sobre as aulas, agenda do curso, auxílio a utilização da ferramenta WCB, fóruns de discussão e exercícios auto corrigíveis; a autoria é feita usando um usando um browser e não requer nenhum conhecimento de HTML ou outras habilidades. Licenciatura de Engenharia Informática 16

41 e-learning esocrates O esocrates oferece usa uma infra-estrutura completa de Tecnologia da Informação para prover uma aprendizagem assistida pela Web. O sistema esocrates provê programas, leituras, controle de avaliações, tarefas, de classe, consulta de grau, controle de password, boletim, chatroom, inscrição, desenvolvimento de habilidades on-line, montagem de testes on-line, correcção automática de testes e o Sócrates Cafe com mais de 1000 links educacionais Standards Tal como a maior parte das tecnologias, o e-learning também foi alvo do desenvolvimento de standardização. Para que se consiga uma verdadeira sofisticação em termos de compreensão de entender os objectivos do aluno e atingir esses objectivos com um programa de aprendizagem, é essencial que todos os componentes duma tecnologia baseada em e-learning fale a mesma língua, de modo a garantir a interoperabilidade dos vários produtos e serviços do e-learning Objectivos Os standards do e-learning estão a ser desenvolvidos perante os seguintes aspectos: Acessibilidade Aceder a componentes pedagógicos de uma localização remota e distribui-los para locais diferentes. Interoperabilidade Usar componentes pedagógicos, desenvolvidos num dado local e com um dado conjunto de ferramentas, num outro local com um outro conjunto de ferramentas. Adaptabilidade Desenvolver conteúdos para necessidades individuais e situacionais. Capacidade de Reutilização Desenvolvimento de objectos de conteúdos capazes de ser utilizados em múltiplas utilizações. Durabilidade Possibilidade de continuar a utilizar componentes pedagógicos quando a tecnologia de base muda, sem a necessidade de os reescrever. Licenciatura de Engenharia Informática 17

42 e-learning Diminuição de custos Aumentar a eficácia significativamente enquanto se reduz o tempo e os custos. Dados e Meta-dados Os meta-dados são definidos como sendo a informação acerca da informação. Contêm a descrição dos objectos pedagógicos, tais como autor, assunto, data, preço, etc. Permitem uma melhor indexação dos objectos e, como consequência, uma procura mais fácil e mais rápida. Os standards nesta área permitirão: - Especificar um formato universal de descrição dos objectos, especificando os campos a ser usados na descrição e a sintaxe/semântica dos objectos. - Facilitar a tradução das línguas dos conteúdos, de forma a estender-se a outras culturas. Conteúdos Os standards relacionados com os conteúdos estão a ser desenvolvidos de forma a indicar aos utilizadores e aos sistemas o que contêm, como podem ser acedidos e a melhor forma de os usar. Serão uma espécie de manual How-to. Estes standards terão como objectivo: - Uma linguagem para descrever e referenciar os vários componentes de media, tais como o vídeo, o áudio, animação, etc.) do CBT. Esta medida será útil para estabelecer os meios para a portabilidade dos componentes de um sistema ou ferramenta para outro; - Um mecanismo para gerir e adaptar a forma de apresentação das lições, de acordo com as necessidades do aluno, de forma a criar dinamicamente cursos adaptados individualmente; - O empacotamento dos conteúdos relativamente ao formato, codificação, ambiente, atributos e interacções. Este tipo de standardização permitirá simplificar a transmissão e a activação dos conteúdos de aprendizagem. LMS e Aplicações Os sistemas LMS funcionarão como um gateway onde o conteúdo entra, sendo transformado em lições baseadas no perfil do aluno e posteriormente apresentadas ao aluno, sendo o seu progresso seguido pelo LMS. Os objectivos deste standard são: - Permitir que lições e cursos sejam movidos de um sistema de CMI (Computer Managed Instruction) para outro, mantendo a sua facilidade de uso e funcionalidade; Licenciatura de Engenharia Informática 18

43 e-learning - Facilitar a implementação das tecnologias de aprendizagem em vários tipos de browsers e sistemas operativos; - Estabelecer um protocolo que facilite a comunicação entre as ferramentas que o aluno usa (por exemplo, folhas de cálculo) e o software de aprendizagem. Alunos A aprendizagem deve ser centrada no aluno, nas suas capacidades e conhecimentos, além dos seus objectivos. Estão em desenvolvimento standards que permitirão caracterizar o aluno nestes aspectos, de modo a poder dirigir os conteúdos e a forma como estes são apresentados da melhor forma. Estes standards pretendem: - Criar uma linguagem de caracterização do aluno, incluindo atributos tais como conhecimentos, habilidade, estilos de aprendizagem, registos e informação pessoal; - Uma forma de identificar os alunos para propósitos de registo; - Componentes de sistemas centrados no utilizador que permitirão um processo de aprendizagem vitalícia. Ajudará a desenhar objectivos, planear, executar, acompanhar e documentar os alunos, de forma a ajudar os alunos a atingir os seus objectivos de aprendizagem e ainda obter documentação das competências desenvolvidas Projectos Advanced Distributed Learning Initiative (ADLNet) O Ministério da Defesa Americano e o Gabinete de Política Científica e Tecnológica da Casa Branca lançaram a ADLNet em O seu objectivo é assegurar o acesso a uma educação de elevada qualidade e a materiais didácticos que possam ser adaptados às necessidades individuais do aluno e que tenham disponibilização permanente. Para esse efeito criou o Sharable Content Object Reference Model (SCORM). O modelo SCORM está a tornar-se rapidamente na arquitectura standard para sistemas de e-learning. Garante a interoperabilidade entre diferentes sistemas de e- Learning e aumenta a reutilização dos objectos de ensino. Para além disso, fornece especificações relativas à representação de estruturas de cursos, ao ambiente de execução (run-time environment), ao lançamento de conteúdos e à criação de registos de meta-dados e aos elementos crus/atómicos do media (raw media elements) para cursos e conteúdos. Este modelo permite acelerar o desenvolvimento em larga escala de software de aprendizagem dinâmica e a custos adequados e desenvolver um enquadramento técnico comum para aprendizagem baseada na Licenciatura de Engenharia Informática 19

44 e-learning Web capaz de promover a concepção de conteúdos de aprendizagem reutilizáveis enquanto objectos instrutivos Institute of Electrical and Electronics Engineers (IEEE) Learning Technology Standards Committee (LTSC) O IEEE LTSC desenvolve normas técnicas, recomenda boas práticas e elabora guias para componentes de software, ferramentas, tecnologias e métodos de concepção, que facilitam o desenvolvimento e implementação de componentes e sistemas informáticos de educação e formação. Abrange tópicos que incluem os meta-dados dos objectos de aprendizagem, perfis dos alunos, módulos dos cursos, instruções geridas por computador, localização e armazenamento de conteúdos e definições de competências. O LTSC foi instituído pelo IEEE Computer Society Standards Activity Board. Muitas das normas desenvolvidas pelo LTSC serão avançadas como normas internacionais pelo ISSO/IEC JTCI/SC36 (Tecnologia Informática para a Aprendizagem, Educação e Formação). Em 12 de Junho de 2002, a norma "Standard for Information Technology -- Education and Training Systems - Learning Objects and Metadata" (LOM) foi aprovada (IEEE P /D1, Draft Standard for Learning Technology - Learning Object Metadata - ISO/IEC 11404). Esta norma especifica a sintaxe e a semântica a ser usada nos Learning Object Metadata, permitindo assim a partilha e a troca destes objectos, utilizando qualquer tecnologia (ou WBLE). Esta norma, por exemplo irá permitir mais facilmente aos alunos e professores procurar, avaliar, adquirir, e utilizar objectos da aprendizagem; compartilhar objectos da aprendizagem através da tecnologia de suporte aos sistemas da aprendizagem baseados na Web e suportar a segurança e autenticação necessários para a distribuição e o uso dos Learning Object Metadata. Global Learning Consortium, Inc (IMS) A Global Learning Consortium, Inc, é um consórcio de universidades, agências governamentais, companhias e outras instituições que desenvolve e promove especificações abertas para as actividades de aprendizagem on-line. Para esse efeito foi criado o Projecto IMS O IMS tem como principais objectivos a definição de especificações técnicas para a interoperabilidade de aplicações e serviços de aprendizagem distribuída e o apoio à incorporação das especificações do IMS nos produtos e serviços à escala mundial. As especificações do IMS incluem o ensino on-line e off-line. Isto significa que os contextos da aprendizagem que beneficiam das especificações do IMS incluem sistemas tais como os WBLE e situações da aprendizagem que envolvem recursos electrónicos off-line, tais como recursos de acesso a um CD-ROM. Por exemplo, a especificação dos meta-dados dos recursos da aprendizagem do IMS beneficia o aluno que procura a informação com uma ferramenta da pesquisa na Web e aquele que procurar através uma enciclopédia num CD-ROM no seu computador. Licenciatura de Engenharia Informática 20

45 e-learning Aviation Industry CBT Committee (AICC) A AICC é uma associação internacional de profissionais de formação de base tecnológica. Esta associação desenvolve directrizes sobre o desenvolvimento, distribuição e avaliação de formação baseada em computadores e tecnologias de formação conexas para a indústria aeronáutica. Os objectivos da AICC são o de auxiliar os operadores de aeronaves no desenvolvimento de directrizes destinadas a promover a implementação económica e efectiva da formação baseada em computador, desenvolver directrizes para permitir a interoperabilidade e proporcionar um fórum aberto para a discussão de tecnologias de formação CBT e outras. Fundação Europeia Ariadne (ARIADNE) A fundação Ariadne resulta de um projecto que tem como objectivo desenvolver conceitos e ferramentas para processos de ensino/aprendizagem baseados nas TIC. Esta associação executa e promove trabalhos cooperativos entre instituições de ensino (mas também empresas), que são incentivadas a optimizar e a partilhar seus processos/recursos de ensino/aprendizagem. Este princípio é possível graças a tecnologia desenvolvida pelo projecto ARIADNE (ARIADNE Project), que é disponibilizada a todos os membros da fundação. A Ariadne tem feito contribuições importantes nos standards educacionais. O ARIADNE Educational Metadata specification (the 'pedagogical header') foi a mais importante contribuição na criação do standard da IEEE/LTSC LOM. Dublin Core Metadata Initiative (DCMI) A DCMI, é uma organização dedicada a promover a adopção e a divulgação de meta-dados e a desenvolver vocabulários especializados (metadata vocabularies) para descrever os recursos que permitem sistemas mais inteligentes de pesquisa da informação. A missão do DCMI é permitir encontrar recursos usando a Internet. As suas actividades centram-se no desenvolvimento de meta-dados que permite a pesquisa através de vários domínios e na definição de estruturas (framework) para o interoperabilidade de conjuntos de meta-dados. Uma das actividades da DCMI é o desenvolvimento e distribuição de recursos educacionais e consultadoria e coordenação de actividades com e nas comunidades de meta-dados ligadas ao ensino, para esse efeito criou o DCMI Education Working Group. Este grupo de trabalho tem como objectivo discutir e o desenvolver propostas para o uso do meta-dados na descrição de recursos educacionais. Licenciatura de Engenharia Informática 21

46 e-learning Situação em Portugal O uso do e-learning em Portugal é na sua maioria direccionado para a formação profissional, em que os custos são suportados pelos alunos, existem ainda poucas instituições que recorrem a financiamentos da Comunidade Europeia. Contudo, tem-se notado o crescimento na área do Ensino Superior, existem já algumas Universidades em Portugal que já adoptaram o e-learning, tais como a Universidade de Aveiro, a Universidade Aberta, a Universidade Católica, o Instituto Superior de Engenharia do Porto (ISEP), o Instituto Politécnico de Bragança Conclusão A introdução de processos de ensino/aprendizagem suportados ou exclusivamente de forma distribuída (e-learning) baseia-se numa oferta de ensino, formação e aprendizagem conduzida através da Internet, quer na vertente de pesquisa e disponibilização da informação necessária quer na vertente de interacção entre os intervenientes. Perante a sociedade actual, o e-learning apresenta-se como uma resposta às necessidades emergentes, pois hoje em dia, e mais do que nunca, o tempo é um factor crítico no desenvolvimento dos indivíduos e das instituições. Os cursos on-line proporcionam um método de ensino com flexibilidade de tempo e de localização, possibilitando o acesso à instrução a qualquer hora e de qualquer lugar. Licenciatura de Engenharia Informática 22

47 Introdução A organização de um curso e-learning não difere muito da organização de um curso de ensino tradicional, assim os tópicos do curso foram agrupados e ordenados por assunto, formando uma sequência lógica, que tem como objectivo ajudar o aluno na sua aprendizagem. O desenvolvimento deste curso teve em conta alguns aspectos essenciais, tais como, a utilização ao máximo de recursos como a animação, vídeo, imagens e mecanismos dinâmicos de aprendizagem e avaliação, de forma a que o aluno tenha uma melhor percepção da matéria e que possa organizar o seu método de estudo. O programa deste curso teve em atenção aquando da sua elaboração, o perfil, o nível e as necessidades do público-alvo. Para promover e incentivar o autodidatismo, os conteúdos apresentados consideram os possíveis conhecimentos anteriores do aluno e a sua experiência pessoal. Assim, pode-se dizer que este curso vai ao encontro dos alunos com pouca ou nenhuma formação em Flash. Além disso, o programa é composto por uma avaliação, sendo apresentados exercícios no fim de cada capítulo, permitindo assim, análises e sínteses, da aplicabilidade dos conceitos, dos elementos motivadores e da contextualização com o meio. Por outras palavras, pode-se dizer que o curso está dividido por unidades de conhecimento, que representam graus de evolução. O aluno é avaliado em cada módulo pelo seu desempenho, o que lhe permite obter o feedback necessário para corrigir os erros e identificar os progressos efectuados. A avaliação faz-se de forma contínua, visando validar as competências adquiridas e/ou desenvolvidas pelos alunos. Neste curso está presente o sistema de auto-avaliação, que permite ao aluno avaliar o seu próprio progresso e decidir ele mesmo quando está preparado para avançar para o teste final proposto pelo formador. Após o aluno ser bem sucedido nos diferentes níveis de evolução, que cada capítulo de conhecimento representa, obtém um certificado que pressupõe que o aluno atingiu os objectivos gerais da acção de formação. O curso realizado é constituído por 20 capítulos, havendo uma evolução gradual de um capitulo para o outro. O esquema da evolução é representado primeiro, por explicações mais teóricas para melhor compreensão do conteúdo global, depois por uma apresentação do ambiente de trabalho e das ferramentas, que se utiliza para atingir certos fins, e por fim o desenvolvimento de projectos de Flash, desde o mais baixo nível até ao topo. Os capítulos deverão ser acompanhados por um formador responsável pela análise dos resultados do aluno, após o termo de cada capítulo. Sempre que o aluno concluir uma aula, deverá responder a um exercício e enviar a resolução para o formador. Este processo repete-se até que o aluno conclua o curso. No Licenciatura de Engenharia Informática 23

48 final o formador irá avaliar o aluno através de um exercício proposto por este, personalizado ao aluno Índice do CAPÍTULO 1 INTRODUÇÃO AO FLASH O QUE É O FLASH? TIPOS DE IMAGEM DIGITAIS: VECTOR E BITMAP STANDARDS DE IMAGEM DA INTERNET PLUG-INS: EXTENSÃO DA CAPACIDADE DOS BROWSERS PROBLEMAS DE PRODUÇÃO REVISÃO RESUMO CAPÍTULO 2 - O AMBIENTE DO FLASH A ÁREA DE TRABALHO DO FLASH CONFIGURAÇÃO DA ÁREA DE TRABALHO DO FLASH PREFERÊNCIAS REVISÃO RESUMO CAPÍTULO 3 - FUNDAMENTOS DO FLASH: AS FERRAMENTAS DE DESENHO FORMAS EM FLASH FUNDAMENTOS DAS FORMAS FERRAMENTA LINHA (N) FERRAMENTA CANETA (P) FERRAMENTA OVAL (O) FERRAMENTA RECTÂNGULO (R) FERRAMENTA LÁPIS (Y) FERRAMENTA PINCEL (B) FERRAMENTA TINTEIRO (S) FERRAMENTA BALDE DE TINTA (K) FERRAMENTA TRANSFORMAR PREENCHIMENTO FERRAMENTA CONTA-GOTAS (I) FERRAMENTA BORRACHA (E) FERRAMENTA ZOOM (M, Z) FERRAMENTA MÃO (H, SPACEBAR) REVISÃO RESUMO CAPÍTULO 4 - FUNDAMENTOS DO FLASH: COR COR EM FLASH GRADIENT LINEAR GRADIENT RADIAL CRIAR CORES PERSONALIZADAS CRIAR GRADIENTS PERSONALIZADOS USAR OS CONTROLOS DE COR POR DEFEITO, SEM COR E DE TROCA DE COR GERIR CORES Licenciatura de Engenharia Informática 24

49 8. REVISÃO RESUMO CAPÍTULO 5 - FUNDAMENTOS DO FLASH: TEXTO TERMINOLOGIA TIPOGRÁFICA FERRAMENTA TEXTO ESTADO AGRUPADO REVISÃO RESUMO CAPÍTULO 6 - FUNDAMENTOS DO FLASH: SELECÇÃO FERRAMENTAS DE SELECÇÃO FERRAMENTA LAÇO FERRAMENTA SETA MODIFICAR AS FORMAS COM A FERRAMENTA SETA CRIAR FORMAS ATRAVÉS DE OUTRAS FORMAS AGRUPANDO FORMAS USAR A FERRAMENTA SUBSELECCIONAR VARIAÇÕES DE CORES COM SELECÇÕES EXERCÍCIOS RESUMO CAPÍTULO 7 - FUNDAMENTOS DO FLASH: SÍMBOLOS SÍMBOLOS INSTÂNCIAS BIBLIOTECA USO DE INSTÂNCIAS PROPRIEDADES DAS INSTÂNCIAS EDIÇÃO DE SÍMBOLOS EXERCÍCIOS RESUMO CAPÍTULO 8 - IMAGENS EXTERNAS BITMAPS NO FLASH IMPORTAÇÃO DE BITMAPS PARA O FLASH AFIXAR A COMPRESSÃO EDIÇÃO DE BITMAPS USAR BITMAPS COMO PREENCHIMENTOS CONVERSÃO DE BITMAPS PARA FORMAS (VECTORES) IMPORTAÇÃO DE IMAGENS VECTORES EXERCÍCIOS RESUMO CAPÍTULO 9 - FUNDAMENTOS DO FLASH: INTRODUÇÃO À ANIMAÇÃO O BÁSICO DA ANIMAÇÃO CONCEITOS NARRATIVOS PERSPECTIVA MOVIMENTO DE CÂMARA EDIÇÃO REVISÃO Licenciatura de Engenharia Informática 25

50 7. RESUMO CAPÍTULO 10 - FUNDAMENTOS DO FLASH: TIMELINE TIMELINE CRIAÇÃO DE ANIMAÇÕES COM A TIMELINE PROPRIEDADES DO FILME ANIMAÇÃO FRAME POR FRAME CONTROLES DE TRANSPARÊNCIA EXERCÍCIOS RESUMO CAPÍTULO 11 - FUNDAMENTOS DO FLASH: MOTION TWEENING MOTION TWEENING USO DE GUIAS DE MOVIMENTO EDIÇÃO DE MÚLTIPLAS FRAMES A ROTAÇÃO NO MOTION TWEENING EXERCÍCIOS RESUMO CAPÍTULO 12 - FUNDAMENTOS DO FLASH: SHAPE TWEENING SHAPE TWEENING TIPO DE TRANSFORMAÇÃO USAR SHAPE HINTS EXERCÍCIOS RESUMO CAPÍTULO 13 - FUNDAMENTOS DO FLASH: USO DE MÁSCARAS EM ANIMAÇÃO MÁSCARAS EM ANIMAÇÃO USO DE MÁSCARAS NO FLASH EXERCÍCIOS RESUMO CAPÍTULO 14 - FUNDAMENTOS DO FLASH: SÍMBOLOS ANIMADOS SÍMBOLOS ANIMADOS CRIAR SÍMBOLOS ANIMADOS VISUALIZAR INSTÂNCIAS ANIMADAS REPETIÇÃO POR DEFEITO ANIMAÇÃO AVANÇADA: O MÉTODO PAI/FILHO CRIAÇÃO DA ANIMAÇÃO EM ESPIRAL EDIÇÃO DE SÍMBOLOS NA PALCO PRINCIPAL COMPORTAMENTO DOS SÍMBOLOS: GRAPHIC OU MOVIE CLIP EXERCÍCIOS RESUMO CAPÍTULO 15 - FUNDAMENTOS DO FLASH: BOTÕES DESENHO DE BOTÕES: ESTADOS DO BOTÃO PLANEAR O BOTÃO CRIAR O BOTÃO A TIMELINE DO BOTÃO VISUALIZAR OS BOTÕES Licenciatura de Engenharia Informática 26

51 6. O ESTADO HIT EXERCÍCIOS RESUMO CAPÍTULO 16 - FUNDAMENTOS DO FLASH: INTERACTIVIDADE COM ACTIONSCRIPT ACTIONSCRIPT: A LINGUAGEM DE PROGRAMAÇÃO DO FLASH ACÇÕES DE FRAME E A TIMELINE USO DE ACÇÕES DE OBJECTO: BOTÕES ADICIONAR ACÇÕES DE OBJECTO A INSTÂNCIAS DE BOTÕES USO DE RÓTULOS DE FRAME REVISÃO DA ESTRUTURA INTERACTIVA EXERCÍCIOS RESUMO CAPÍTULO 17 - INTERACTIVIDADE: LIGAÇÃO AO HTML A ACÇÃO GET URL CAMINHO PARA O FICHEIRO DE WEB LINK PARA EXERCÍCIOS RESUMO CAPÍTULO 18 - SOM SOM NA ANIMAÇÃO IMPORTAÇÃO DE SOM DEFINIR A COMPRESSÃO DO SOM EXPORT SETTINGS - COMPRESSION UTILIZAÇÃO DO SOM NO FLASH O PAINEL PROPERTIES DO SOM A BIBLIOTECA DE SOM DO FLASH EXERCÍCIOS RESUMO CAPÍTULO 19 - CRIAÇÃO DE PRELOADERS O PRELOADER PLANEAMENTO DE UM PRELOADER ADICIONAR CENAS ACTIONSCRIPT DO PRELOADER EXERCÍCIOS RESUMO CAPÍTULO 20 - PUBLICAÇÃO DE FILMES FLASH PUBLICAÇÃO DE UM FILME FLASH PUBLICAÇÃO PARA A INTERNET PUBLICAÇÃO DE UM PROJECTOR GERANDO O PROJECTOR EXERCÍCIO RESUMO Licenciatura de Engenharia Informática 27

52 3.3. e-learning de Flash Mx C APÍTULO 1 INTRODUÇÃO AO FLASH Neste capítulo, será apresentado o Flash, o que é o Flash e qual é o seu lugar na Internet e no desenvolvimento de nova media. Para além disto, também abordaremos algumas das limitações actuais dos ambientes de nova media. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Definir o Flash; 2. Entender os padrões de Imagem Digital; 3. Entender a natureza dos Plug-ins; 4. Entender as limitações comuns da Internet. 1. O QUE É O FLASH? O Flash é uma das aplicações mais significantes na história da nova media. Este tornouse num killer app que foi abraçado por um grande número de programadores. Além disso, o Flash é exclusivamente uma comunidade, onde os programadores partilham livremente entre si dicas, truques e processos, contribuindo assim para o desenvolvimento da própria aplicação. O Flash Mx é a liberação mais significante, caracterizado por uma interface mais produtiva (organização do programa com painéis), uma Timeline (linha de tempo) de animação revisada, ferramentas de desenho mais profissionais, suporte a vídeos, e com um novo idioma de ActionScripting mais abrangente e fácil de usar. O Flash funcionou principalmente como uma aplicação autorizada para programadores de web, proporcionando criações de grande impacto e sites web completamente interactivos. Antes do aparecimento do Flash, a criação de sites web animados (completados com som) envolviam o uso de grandes ficheiros, que requeriam uma largura da banda robusta. Os ficheiros de Flash, em contraste, podem ser muito pequenos, tornando a largura da banda um problema a menos. Além disso, o Flash trouxe um nível avançado de animação e interactividade, previamente indisponível, na tradicional tecnologia de Internet. Embora o Flash seja predominantemente usado para a Internet, o seu poder está-se a expandir e seu uso fora da web a aumentar. O Flash tanto pode ser usado para a web, como para apresentações, CD-ROMs, entre outras coisas. O êxito do Flash deve-se a várias razões, sendo uma das razões principais o núcleo de sua tecnologia de imagem: gráficos de vector (vector graphics). 2. TIPOS DE IMAGEM DIGITAIS: VECTOR E BITMAP Existem dois tipos de imagem digitais: bitmap e vector. Licenciatura de Engenharia Informática 28

53 As imagens de bitmap são o tipo mais comum de ficheiros de imagem, fora do mundo da impressão profissional. Os ficheiros bitmap delineiam a imagem numa base de pixel por pixel. As exibições por computador são compostas por um conjunto de pontos individuais ou simplesmente por pontos, chamados pixels, organizados em colunas e linhas (semelhante a uma grade) onde cada célula representa um pixel da imagem. O ficheiro de imagem bitmap delineia basicamente cada pixel, como por exemplo, o pixel 300 em largura com o 250 em altura é vermelho, o pixel 301 em largura com o 250 em altura também é vermelho e o pixel 302 em largura com o 250 em altura é amarelo e assim por diante. Devido à largura da banda ser a principal preocupação no desenvolvimento de sites web, manter o tamanho das imagens a um mínimo é fundamental. Assim o principal benefício das imagens de bitmap é a cor fotográfica, o tom e a textura com que as imagens são produzidas. Ao delinear-se um bitmap numa grade, cada pixel é detalhado. Essencialmente, é isto o que o computador faz quando exibe bitmaps. Figura 3.1 Bipmap Figura 3.2 Aproximação de Pixel por Pixel (Escala reduzida) As imagens de vector não delineiam as imagens numa base de pixel por pixel. Ao invés disso, os ficheiros de vector contêm uma descrição da imagem expressa matematicamente. Essencialmente, o que acontece é que o ficheiro descreve ao computador a imagem e o computador por sua vez a exibe. Por exemplo, a imagem de um círculo em formato vector, escrita, poderia parecer-se com algo do género: Circulo(200px) Cor do enchimento: Gradient Tipo de Gradient: Radial Cores: Branco, Preto Cor da linha: Nenhuma Um dos benefícios das imagens de vector é tamanho do ficheiro, particularmente em relação ao tamanho do ficheiro das imagens de bitmap. O mesmo círculo em formato bitmap, a uma resolução de 320x200, poderia parecer-se com algo do género: Linha 1 Licenciatura de Engenharia Informática 29

54 Pixel 1x1 é branco Pixel 2x1 é branco Pixel 3x1 é branco Pixel 4x1 é branco, etc. até se alcançar o Pixel 320x1 Linha 2 Pixel 1x2 é branco Pixel 2x2 é branco, etc. A descrição de um círculo (e da cor deste) numa base de pixel por pixel é um processo muito mais demorado do que descrever ao computador o desenho do próprio círculo. Outro dos grandes benefícios dos gráficos de vector é estes serem redimensionáveis. Ou seja, o tamanho da imagem pode ser aumentado ou diminuído sem qualquer degradação da qualidade da imagem e sem aumentar o próprio tamanho do ficheiro. Figura 3.3 Imagem vector no tamanho original Figura 3.4 Imagem vector no tamanho aumentado Na imagem da esquerda pode-se visualizar a bola no seu tamanho original. Na imagem da direita a mesma bola depois de se ter aumentado a sua dimensão. Note que o tamanho de ficheiro é exactamente o mesmo. As imagens bitmap também podem ser redimensionadas, mas ao aumentar a sua dimensão degrada-se a qualidade da imagem, porque o computador não tem a informação necessária para criar a nova imagem. Como o computador leva, somente, a informação do pixel existente e traduz um pixel em múltiplos pixels, a transformação da imagem resulta em extremidades dentadas. Por exemplo, se redimensionar uma imagem de 45x45 para 90x90, cada pixel individual da imagem no seu estado original torna-se em quatro (4) pixels no seu estado redimensionado. Licenciatura de Engenharia Informática 30

55 Figura 3.5 Imagem bitmap no tamanho original Figura 3.6 Imagem bipmap no tamanho aumentado Ao dobrar o tamanho de uma imagem bitmap o computador vai substituir cada pixel original por quatro pixels. Como resultado, a imagem fica desfocada ou denteada e o tamanho de ficheiro irá aumentar. Infelizmente, as imagens vector, por serem descritas em termos de formas, linhas, curvas, pontos, cores, comprimento, etc., não reproduzem imagens fotográficas com grande precisão. Em geral, as imagens bitmap são mais satisfatórias para as imagens fotográficas, e as imagens vector para ilustrações. Figura 3.7 Imagem bitmap Figura 3.8 Imagem vector Note que a imagem bitmap faz um melhor trabalho com imagens fotográficas do que a imagem vector, que usa padrões de cores sólidas, que se assemelham às tradicionais ilustrações. Embora o núcleo da tecnologia de imagem no Flash seja a de vector, este também suporta as imagens bitmap. A regra geral, nos projectos web, é usar imagens vector sempre que possível e bitmap sempre que apropriado, mas deve-se ter cuidado, pois as imagens bitmap afectam o tamanho do ficheiro. Assim, em projectos onde largura de banda não é um problema, pode-se usar as imagens bitmap pontualmente e só se o uso destas é apropriado. O uso de imagens bitmap no Flash é retractado mais à frente num capítulo posterior. Licenciatura de Engenharia Informática 31

56 3. STANDARDS DE IMAGEM DA INTERNET Além dos dois tipos de imagens digitais (bitmap e vector), também existe uma variedade de tipos de ficheiros bitmap e vector. Os ficheiros bitmap, a um nível mais básico, são como foram descritos - um mapa ou um enredo individual de cada pixel. Porém, os ficheiros de imagem podem conter (e frequentemente contêm) outra informação - dependendo do uso destes. Por exemplo, o autor da imagem poderá ser incluído na informação do ficheiro de imagem, tal como a data e a informação protegida pelo direito de autor. Além disso e porque os ficheiros bitmap tendem a ser métodos grandes, foram desenvolvidos vários métodos de compressão, ou seja, métodos que reduzem o tamanho do ficheiro. Assim, para designar a informação extra e os métodos de compressão, foram desenvolvidos diferentes tipos de ficheiros. Os tipos de ficheiro designam uma particular variedade de bitmap ou de vector. Tanto o Windows como os sistemas operacionais de Unix identificam o tipo de ficheiro adicionando um conjunto de três letras no fim do nome do ficheiro, como por exemplo, circulo.gif ou circulo.jpg. Este conjunto de três letras é chamado de extensão de ficheiro. No Macintosh, as extensões de ficheiro não são usadas para designarem o tipo de ficheiro, mas sim, para designarem o ficheiro de imagem, isto é, o ficheiro de imagem tem anexado a si a informação relativa ao tipo de ficheiro e à aplicação em que foi criado. Mas, devido aos servidores de Web e browsers usarem extensões do tipo de ficheiro, é aconselhável que os utilizadores do Macintosh façam o mesmo para as imagens e ficheiros de Flash gerados para a web. Os browsers de Web actualmente suportam três tipos de ficheiros de imagem, sendo estes, o.gif ou Graphics Interchange Format (GIF), o.jpg ou Joint Photographic Experts Group (JPEG) e o.png ou Portable Network Graphics (PNG). Cada um destes formatos é um ficheiro bitmap. Actualmente, os browsers não suportam a exibição de imagens baseadas em vector. O Flash, por sua vez, pode importar uma variedade de formatos bitmap e vector. A importação de ficheiros de imagem externas será referida num capítulo posterior. 4. PLUG-INS: EXTENSÃO DA CAPACIDADE DOS BROWSERS Se os browsers não exibem imagens vector, como são exibidos os filmes de Flash num browser? Devido à Internet estar num estado de evolução ininterrupta e rápida, os browsers têm a capacidade de estender características para o uso de Plug-ins. Os plug-ins são extensões para browsers, permitindo a estes exibir vários tipos de media, que normalmente os browsers não suportam. Tanto a Media como o Flash, o Shockwave (Director e Authorware), o QuickTime, o RealPlayer e muitos outros não são, originalmente, suportados. Assim, é necessário que os utilizadores tenham o Plug-in apropriado para visualizar estes tipos de media. Para adquirir um Plug-in, os utilizadores têm fazer o seu download e instala-lo no seu computador. Devido aos principais browsers usarem um sistema de Plug-in diferente, os utilizadores devem fazer o download do Plug-in apropriado para o browser em Licenciatura de Engenharia Informática 32

57 utilização. Além disso, cada actualização ou novo lançamento de Flash e de outra tecnologia de Internet, faz com que os utilizadores precisem da versão mais recente do Plug-in. Para usar o Flash efectivamente, com todos os seus benefícios, de tamanho do ficheiro compacto, animação avançada e interactividade, os utilizadores têm que ter o Plug-in apropriado. Os filmes de Flash podem ser convertidos para o QuickTime, GIFs animados, mapas de imagem e assim por diante, onde alguns dos quais não requerem Plug-in. Porém, a conversão do Flash em outras grandezas de media limitam a sua funcionalidade. Assim sendo, não é recomendado confiar-se ou usar qualquer uma das opções de playback worry-free disponível no Flash. Como nem toda a gente está disposta a fazer o download e a instalar o Plug-in, e se usa o Flash para a web, é recomendável, que para além, de um site de Flash, desenvolva-se também um site web standard, para que todos o possam ver. Se o site web for exclusivamente desenvolvido em Flash, não poderá ser visualizado sem um Plug-in. Ao criar um site web convencional alternativo, assegura-se que todos o possam ver. O uso do Flash fora da web já não é uma preocupação, porque pode-se criar um projector separado para exibir os filmes de Flash. 5. PROBLEMAS DE PRODUÇÃO Existe uma série de parâmetros comuns da produção de Internet que um programador têm que ter em mente. Tipicamente, são desenvolvidos sites web ao mais baixo denominador comum, em termos de especificações técnicas. Sendo a resolução de vídeo assumida de 640x480 pixels, com um máximo de 256 cores. As imagens e os conteúdos são mantidos pequenos porque assume-se que a maioria dos utilizadores não têm uma velocidade de conexão superior a 28.8kbs. O Flash consegue evitar muitos dos parâmetros típicos de produção de Internet, porque usa vectores, os gráficos são redimensionáveis e pode ser ajustado a qualquer resolução que o utilizador use. A palette de cores do Flash equipara-se às 216 cores da palette da web que os browsers utilizam, assegurando, assim, que as cores são exibidas correctamente. Se o utilizador tem o Plug-in apropriado, então os componentes do HTML suportam a colocação de ficheiros de Flash em páginas web, o tamanho compacto dos filmes de Flash reduz as preocupações de largura da banda. Porém, como os vectores baseados em gráficos requerem que o computador desenhe as imagens em tempo real e porque estas imagens, normalmente, estão em movimento, a velocidade do processador torna-se um problema. As animações complexas, com numerosos objectos em movimento, podem tornar o processador intensivo e podem exigir processadores mais rápidos para trabalhar correctamente. Assim sendo, é importante testar os filmes de Flash em processadores mais lentos, de maneira a medir o seu desempenho. 6. REVISÃO 1. Qual a diferença entre as imagens de vector e as imagens de bitmap? 2. Por que necessita o Flash de um Plug-in para correr num browser? Licenciatura de Engenharia Informática 33

58 3. Qual a razão existente para a velocidade do processador ser um factor importante na exibição de filmes de Flash? 7. RESUMO Depois de completar este capítulo, deve ser capaz de: Definir o Flash; Entender os padrões de Imagem Digital; Entender a natureza dos Plug-ins; Entender as limitações comuns da Internet. Licenciatura de Engenharia Informática 34

59 C APÍTULO 2 - O AMBIENTE DO FLASH Neste capítulo será apresentada a área de trabalho do Flash. Serão resumidas as ferramentas, os menus, os painéis, a timeline, o palco e as preferências. Todos os aspectos da interface do Flash serão examinados a fundo, nos capítulos posteriores, de modo a aprender a usar a aplicação. É necessário que se familiarize com a área de trabalho para, assim, poder aprender Flash. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Entender os componentes principais da interface do Flash; 2. Redimensionar e personalizar a área de trabalho do Flash; 3. Restabelecer planos de painéis. 1. A ÁREA DE TRABALHO DO FLASH A área de trabalho do Flash consiste em cinco componentes principais: a Barra de Menu, a Barra de Ferramentas, a Timeline, o Palco e os Painéis. Figura 3.9 Ambiente de Trabalho Licenciatura de Engenharia Informática 35

60 O MENU O menu é constituído por controles para funções comuns como é o caso de abrir e gravar ficheiros, para funções específicas como copiar e colar, para chamar janelas específicas ou painéis e para controlar o ambiente do Flash. Figura 3.10 Menu A BARRA DE FERRAMENTAS A barra de ferramentas contém uma colecção de ferramentas para criar, seleccionar e manipular o conteúdo no Palco e na Timeline. A barra de ferramentas é dividida em quatro partes: Ferramentas, Visão, Cores e Opções. Figura 3.11 Barra de Ferramentas Através da barra de ferramentas pode-se seleccionar uma Ferramenta, usar as ferramentas de Visão para manipular o Palco, sempre que apropriado, e usar as ferramentas de Cores para seleccionar as cores que serão usadas na(s) forma(s) que irá desenhar. Algumas destas ferramentas têm opções adicionais que aparecem na secção de Opções. Por exemplo, quando a Ferramenta Seta (Arrow) é seleccionada, aparecem conjuntos de opções na secção Opções (Snanp, Smooth, Straighten). Licenciatura de Engenharia Informática 36

61 Figura 3.12 Ferramenta Seta Figura 3.13 Opções da Ferramenta Seta Existem outras opções para as ferramentas que estão disponíveis nos Painéis. Por exemplo, se seleccionar a Ferramenta Lápis (Pencil) que se usa para desenhar esboços (traços), pode-se seleccionar a densidade e o estilo do traço através do Painel Properties. Figura 3.14 Ferramenta Lápis Figura 3.15 Painel Propriedades A TIMELINE A Timeline organiza e controla o conteúdo de um filme em Layers e Frames ao longo do tempo. Como nos filmes de cinema, os filmes do Flash dividem os intervalos de tempo em frames. As Layers são como várias fitas de filmes empilhadas umas sobre as outras, onde cada uma contém uma imagem diferente, que aparece no Palco. Pense na Timeline como um filme e o Palco como uma tela que exibe sequencialmente todas as partes do filme, como um projector. Deverá organizar uma sucessão de eventos com o passar do tempo, da mesma maneira que um director organiza uma sucessão de eventos com o passar do tempo, num filme. Além disso, pode-se construir filmes de Flash interactivos, ou seja, o utilizador tem a liberdade de seleccionar a parte do filme que deseja ver. A Timeline funciona como um processo tradicional de edição de filmes, onde o editor junta os vários pedaços do filme, usando um código de tempo, para os reunir no tempo e na altura certa. Licenciatura de Engenharia Informática 37

62 Figura 3.16 Timeline A Timeline será mais à frente examinada a fundo. O PALCO O Palco é a área onde se coloca o conteúdo do filme e onde se cria as interfaces interactivas e a animação. Na área cinza à volta do Palco, chamada Área de Trabalho, também se pode colocar e animar partes do filme. Porém, quem visualiza o filme só pode ver o que se encontra no Palco. A Área de Trabalho é, normalmente usada, quando há a necessidade do conteúdo surgir da parte exterior do Palco. Podemos pensar numa produção de teatro, onde os actores, tradicionalmente, entram e saem pela parte esquerda ou direita do palco. No entanto, num filme de Flash os elementos podem entrar no Palco por qualquer dos quatro lados. Figura 3.17 Palco OS PAINÉIS Os Painéis do Flash ajudam a exibir, a organizar e a alterar os elementos num documento. As opções disponíveis nos painéis controlam as características dos símbolos, instâncias, cores, tipo, frames e outros elementos. Pode usar os Painéis para personalizar a interface do Flash, exibindo os painéis necessários para uma tarefa específica e ocultando outros. Os Painéis permitem trabalhar com objectos, cores, texto, instâncias, frames, cenas e documentos inteiros. Por exemplo, utilize o Painel Color Mixer para criar cores, e o Painel Align para alinhar objectos entre si, no Palco. Para exibir a lista completa de painéis disponíveis no Flash, seleccione o menu Window. A maioria dos painéis contêm duas opções, um menu pop-up que mostra as principais opções do painel e opção de minimizar o painel em questão. O menu de opções é Licenciatura de Engenharia Informática 38

63 indicado por um ícone na barra de título do painel. Se nenhum ícone de menu de opções for mostrado, é porque não há menu de opções para esse painel. O ícone destinado para minimizar o painel também se encontra na barra de título do painel. Figura 3.18 Exemplo de um Painel 2. CONFIGURAÇÃO DA ÁREA DE TRABALHO DO FLASH A necessidade de personalizar o ambiente de trabalho do Flash surge com a familiarização deste. O ambiente de trabalho do Flash caracteriza-se pela adição e subtracção de elementos de interface, o que significa que pode-se colocar elementos de interface como o Palco, a Timeline, a Barra de Ferramentas, e os Painéis onde e com se deseja. Por exemplo, por defeito, a Timeline e o Palco estão juntamente ancorados numa única janela. Figura 3.19 Ambiente de Trabalho Licenciatura de Engenharia Informática 39

64 No entanto, ambos os componentes podem ser desencaixados, o Palco e a Timeline podem-se apresentar em janelas separadas, individuais. Para desencaixar a Timeline do Palco, {Clique} no topo da Timeline, pressione o botão do rato, arraste a Timeline para longe do Palco, e liberte o botão do rato. Figura 3.20 {Clique}, segure, arraste para fora, e liberte a Timeline para desencaixar esta do Palco. Para ancorar componentes de interface, basta que {Clique}, segure, arraste, e liberte um componente em cima do topo de outro. Por exemplo, por defeito, a Timeline é ancorada ao topo do Palco, mas se desejar pode ancorar esta ao fundo do Palco. Figura 3.21 A Timeline ancorada ao fundo do Palco Os Painéis situam-se em conjuntos de painéis onde são ancorados múltiplos Painéis. Para desencaixar um Painel de um conjunto de painéis, basta que {Clique} no topo do Painel, como foi explicado para a Timeline, segure, e arraste o Painel longe do conjunto de painéis. Por exemplo, poderia arrastar o Painel Transform do primeiro conjunto de painéis. Licenciatura de Engenharia Informática 40

65 Figura 3.22 Demonstração de desencaixar Painel Transform O contrário também é possível, pode-se ancorar um Painel a um conjunto de painéis arrastando este para o conjunto. Por exemplo, se desejar, pode criar um único conjunto de painéis fixo com todos os painéis existentes dentro deste. Para restabelecer o plano de Painéis por defeito, basta que {Clique} em Window/Panel Sets/Default Layout e o plano de quatro Painéis, por defeito, será restabelecido. Figura 3.23 Menu Principal Window/Panel Sets/Default Layout Para salvar um plano de Painéis como usual, {Clique} em Window/Save Panel Layout... Licenciatura de Engenharia Informática 41

66 Ao salvar um plano de Painéis aparece a seguinte caixa de diálogo. Figura 3.24 Caixa de diálogo Save Panel Layout Introduza um nome para o plano de Painéis e {Clique} em OK. O plano de Painéis usual é restabelecido automaticamente da próxima vez que abrir o Flash. Além disso, se voltar ao plano de Painéis por defeito, o plano de Painéis actualmente criado aparecerá agora no menu Window/Panel Sets. Seleccione o nome do Painel que criou para restabelece-lo. Também pode redimensionar a Timeline, o Palco e os Painéis. Por exemplo, o Painel Color Swatches pode ser usado no tamanho por defeito, ou, pode arrastar qualquer um dos cantos ou dos lados da janela do Painel, para aumentar ou diminuir o seu tamanho. Figura 3.25 À esquerda o Painel no tamanho original, e à direita num tamanho maior. O tamanho dos Painéis também pode ser guardado tal como os planos de Painéis. 3. PREFERÊNCIAS O Flash permite que se defina preferências para as operações gerais da aplicação, operações de edição e da área de transferência. Para aceder às preferências {Clique} em Edit/Preferences... A seguir aparecerá a caixa de diálogo Preferences. As preferências estão divididas em cinco categorias: General, Editing, Clipboard, Warnings e ActionScript Editor. Licenciatura de Engenharia Informática 42

67 Neste momento, algumas das preferências podem não estar claras, pois estas estão relacionadas conceitos que ainda não foram falados. Figura 3.26 A caixa de diálogo Preferences 4. REVISÃO 1. Quais são as áreas principais do ambiente de trabalho do Flash? 2. Como estão relacionados o Palco e a Timeline? 3. Como se pode desencaixa e/ou ancorar a Timeline e os Painéis? 4. Como estão relacionados os Painéis e as Ferramentas? 5. Se opções para as Ferramentas não aparecem num qualquer Painel onde aparecem? 5. RESUMO Depois de completar este capítulo, deve ser capaz de: Entender os componentes principais da interface do Flash; Redimensionar e personalizar a área de trabalho do Flash; Restabelecer planos de painéis. Licenciatura de Engenharia Informática 43

68 C APÍTULO 3 - FUNDAMENTOS DO FLASH: AS FERRAMENTAS DE DESENHO As Ferramentas de Desenho do Flash são usadas para criar o conteúdo de imagem dos filmes. Neste capítulo, serão detalhadas todas as ferramentas de desenho, e como poderá criar o conteúdo de imagem ou os objectos no Palco. É recomendável que veja com atenção cada uma das ferramentas, para melhor entender o funcionamento destas. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Entender o conceito de Formas (Shapes) no Flash; 2. Entender o conceito do Estado de Forma (Shape State); 3. Entender a diferença entre Traço ou Linhas Exteriores (Outlines) e Preenchimento (Fill); 4. Usar cada uma das Ferramentas de Desenho do Flash. 1. FORMAS EM FLASH No Flash, as imagens são designadas por formas. As formas que irá criar ou importar podem estar em vários estados. Cada estado afecta o comportamento da forma, ou seja, o modo como esta pode ser alterada. As formas que forem criadas no Flash têm associadas a si o Estado de Forma (Shape State). Note que, as Ferramentas de Desenho só trabalham com formas que estão no Estado de Forma, permitindo que mais tarde se mude o estado das imagens para o Estado Agrupado (Grouped State) ou para o Estado de Símbolo (Symbol State). A transformação das imagens em imagens agrupadas e convertidas em símbolos será abordada num capítulo posterior. 2. FUNDAMENTOS DAS FORMAS Antes de se começar a explorar as Ferramentas de Desenho, é importante entender a lógica fundamental que existe por detrás das formas no Flash. O Flash aproxima as forma de dois elementos primários: o Traço (Stroke) e o Preenchimento (Fill). Cada imagem pode consistir num traço (linha exterior) e/ou num preenchimento. As Ferramentas de Desenho do Flash estão divididas em ferramentas que criam ou modificam os traços e em ferramentas que criam ou modificam o preenchimento. Licenciatura de Engenharia Informática 44

69 Figura 3.27 Forma circular composta por um traço e um preenchimento Figura 3.28 O traço e o preenchimento da forma separados. Agora há duas formas. NOTA: AO LADO DE CADA FERRAMENTA ENCONTRA-SE ENTRE PARÊNTESES O ATALHO PELO TECLADO. USE OS ATALHOS PELO TECLADO PARA ACTIVAR AS FERRAMENTAS MAIS DEPRESSA. 3. FERRAMENTA LINHA (N) Use a Ferramenta Linha (Line) para criar linhas rectas (também designadas por traços). {Clique} na Ferramenta Linha da Barra de Ferramentas para activar esta. Para desenhar linhas, {Clique}, segure, e arraste o ponteiro do rato no Palco. Ao arrastar o rato, estende-se uma linha desde o ponto em que {Clicou}. A linha só é desenhada de facto no Palco quando {Liberta} o botão do rato. Para constranger um ângulo das linhas, extraindo incrementos de 45 graus, pressione e segure a tecla [SHIFT] enquanto desenha a linha. A Ferramenta Linha permite definir os seguintes atributos: a Cor de Traço, o Estilo de Traço e a Espessura de Traço. COLOR DE TRAÇO Há a possibilidade de seleccionar a Cor de Traço em dois lugares distintos, na secção de Cores da Barra de Ferramentas ou no Painel Color Mixer. Licenciatura de Engenharia Informática 45

70 Figura 3.29 Secção de Cores (Traço e Preenchimento) na Barra de Ferramentas Figura 3.30 Cores (Traço e Preenchimento) no Painel Color Mixer Quando {Clica} na cor do Traço aparece uma palette de cores standard. {Clique}em qualquer cor da palette de cores para seleccionar a Cor de Traço. Figura 3.31 Palette de Cores Standard A palette de cores consiste em 228 cores diferentes. A palette de cores contêm a palette standard de 216 cores suportadas pela web. A existência de 228 cores diferentes na palette de cores do Flash deve-se à duplicação de 12 cores, para uma selecção rápida. {Clique} na cor que desejar. Note que o valor hexadecimal da cor aparece no topo da palette de cores, quando se passa com o cursor por cima de cada cor. A palette de cores será abordada a fundo num capítulo posterior. Licenciatura de Engenharia Informática 46

71 ESTILO DE TRAÇO O Estilo de Traço por defeito é sólido, o que significa que, será desenhada uma linha sólida. Para seleccionar diferentes Estilos de Traço, Seleccione Windows/Properties do menu e escolha um dos sete estilos pré-definidos. Figura 3.32 Painel Properties (Estilos de Traço) Para criar o seu próprio estilo, {Clique} no botão Custom.. do Painel Properties. Aparecerá a caixa de diálogo Stroke Style, onde poderá personalizar o estilo do traço. Figura 3.33 A caixa de diálogo Stroke Style {Clique} na seta ao lado do menu pop-up Type para poder seleccionar um estilo, que funcionará como ponto de partida para o estilo de traço que deseja criar. Licenciatura de Engenharia Informática 47

72 Figura 3.34 A caixa de diálogo Stroke Style (Tipo de Estilo do Traço) Cada tipo do estilo apresentado permite-nos um leque de opções para personalizarmos o estilo. Experimente mudar a opção Dash (Traço) para obter o estilo do traço desejado. Por exemplo, se escolher o estilo Dashed ( Tracejado ), este permite-lhe ajustar o tamanho dos hífenes (traços) e o espaço entre estes através da opção Dash. Por defeito, o estilo do traço Dashed tem hífenes de 6 pontos, espaçados entre si, também, por 6 pontos. (Existe ainda a opção Thickness (Espessura), que permite mudar a espessura de qualquer estilo. Esta opção é retractada, imediatamente, depois do Estilo de Traço). Figura 3.35 A caixa de diálogo Stroke Style (Tipo do Estilo Tracejado) Se mudarmos a opção Dash para 3 e 1, resultará uma linha tracejada diferente. Licenciatura de Engenharia Informática 48

73 Figura 3.36 Caixa de diálogo Estilo do Traço (Tipo do Estilo Tracejado com traços de 3 pontos espaçados entre si por 1 ponto) ESPESSURA DE TRAÇO Para fixar a Espessura de Traço, introduza a espessura no campo Stroke Thickness (Espessura de Traço) ou {Clique} na seta ao lado da caixa de texto da espessura e defina, através do controle deslizante, a espessura desejada. Figura 3.37 Painel Properties (Espessura do Traço) Figura 3.38 A gama da Espessura do Traço é 0.1 a 10 Faça diversas experiências com a Ferramenta Linha, usando uma cor do traço, um estilo e uma espessura sempre diferentes. Quando terminar as experiências, seleccione Edit/Select All do menu e pressione a tecla [DELETE] para limpar o Palco. 4. FERRAMENTA CANETA (P) Use a Ferramenta Caneta (Pen) para criar linhas curvas precisas ou rectas. A Ferramenta Caneta desenha linhas que incluem pontos de edição. Os pontos de edição Licenciatura de Engenharia Informática 49

74 permitem mudar as propriedades da linha, depois de ter desenhado esta. Se nunca usou uma aplicação de desenho vector como a Macromedia Freehand ou o Adobe s Illustrator, o uso da Ferramenta Caneta e do ponto de edição podem parecer um pouco difíceis. Mas não se preocupe, pode demorar algum tempo a acostumar-se a esta ferramenta, mas uma vez que a domine, achará a Ferramenta Caneta muito útil. DESENHAR LINHAS RECTAS Para desenhar uma linha recta, seleccione a cor desejada, o estilo e a espessura do traço. No Palco, {Clique} e {Liberte} o botão do rato para criar um ponto. Logo depois, mova o rato para o lugar onde deseja criar o segundo ponto e {Clique} e {Liberte} o botão do rato. Uma linha recta, chamada de segmento, é traçada de um ponto para outro. Pode continuar a {Clicar} e a {Libertar} o rato, de modo a criar mais pontos na linha que deseja criar. Quando completar o desenho da linha, faça {Duplo-Clique} no último ponto que desenhou, depois disto, já pode desenhar outra linha com a Ferramenta Caneta. Para poder visualizar a linha que desenhou, seleccione qualquer uma das outras ferramentas na Barra de Ferramentas. Figura 3.39 Linha seleccionada Os pontos só aparecem na linha que criou com a Ferramenta Caneta quando esta é seleccionada. Por defeito, quando cria uma linha com a Ferramenta Caneta, esta fica automaticamente seleccionada. Ao seleccionar uma outra ferramenta a linha deixa de estar seleccionada. Figura 3.40 Linha não seleccionada A linha desenhada parece-se com uma linha regular quando não está seleccionada. Não se vêm os pontos. Lembre-se de que não está limitado a desenhar um único segmento num linha que cria com a Ferramenta Caneta; pode também fazer linhas com múltiplos segmentos. Figura 3.41 Linha com múltiplos segmentos Licenciatura de Engenharia Informática 50

75 A grande vantagem dos pontos estarem visíveis é poder-se executar algumas modificações rapidamente. Para seleccionar um ponto, é necessário utilizar a Ferramenta Subseleccionar (Subselect). Pode {Clicar}, segurar e arrastar um ponto com a Ferramenta Subseleccionar para mover os pontos ao redor e estender os segmentos. Figura 3.42 A linha modificada através da Ferramenta Subseleccionar DESENHAR LINHAS CURVAS Além de desenhar linhas rectas, a Ferramenta Caneta também pode desenhar linhas curvas precisas. Os pontos ao longo das linhas curvas têm ferramentas de controle adicionais, chamadas tangentes. Acostumar-se às tangentes e usar estas, leva alguma prática e tempo. Comece, por seleccionar a cor, o estilo e a espessura na linha que deseja criar. Depois, seleccione a Ferramenta Caneta e no Palco {Clique}, segure e arraste o botão do rato para criar um ponto curvo. Notará duas tangentes, que se estendem do ponto que criou. Figura 3.43 Ponto criado com tangentes Figura 3.44 Definição das partes constituintes de um ponto com tangentes {Liberte} o botão do rato e mova-o para o próximo lugar onde deseja estabelecer um novo ponto. Novamente, {Clique}, segure e arraste para estabelecer o próximo ponto e as suas tangentes. Ao arrastar, notará que a curva do segmento irá aumentar relativamente ao comprimento das tangentes. Por fim, {Liberte} o botão do rato para criar o ponto. É possível editar o ponto e suas tangentes com a Ferramenta Subseleccionar, depois de o desenhar. Licenciatura de Engenharia Informática 51

76 Figura 3.45 Linha curva criada pela Ferramenta Subseleccionar Para modificar a linha, use a Ferramenta Subseleccionar para seleccionar um ponto. Quando o ponto estiver seleccionado, use a Ferramenta Subseleccionar para {Clicar}, segurar e arrastar as tangentes, de modo a modificar a curva. Quando executar estas operações, verá a curva original e a modificação da curva que está a executar. A modificação só é de facto executada quando {Liberta} o botão do rato. Figura 3.46 Modificação de uma linha curva Porque só há dois pontos para esta linha, só existe uma tangente por ponto. Se tivéssemos criado um terceiro ponto, o ponto do meio da linha curva teria duas tangentes. Figura 3.47 Uma linha curva com três pontos. Note que o ponto do centro tem duas tangentes A modificação de um ponto com duas tangentes faz-se da mesma maneira que de um ponto com uma única tangente, movendo-se o próprio ponto, ou arrastando-se qualquer uma das tangentes. Licenciatura de Engenharia Informática 52

77 Figura 3.48 Ambas as tangentes giram ao redor do ponto do meio Para manipular uma só tangente de um ponto com duas tangentes, seleccione a tecla [ALT] enquanto usa a Ferramenta Subseleccionar. Com a prática, verá que pode fazer linhas muito interessantes. Figura 3.49 Manipulação de uma só tangente As tangentes do ponto do meio são modificadas separadamente quando se pressiona a tecla [ALT] ao usar a Ferramenta Subseleccionar. Figura 3.50 O resultado final PREFERÊNCIAS DA FERRAMENTA CANETA Existe a possibilidade de modificar o modo como a Ferramenta Caneta se comporta, sendo necessário, para tal efeito, mudar as preferências da ferramenta, que estão por defeito. Bastando para isso, seleccionar do menu o Edit/Preferences, {Clique} na aba Editing. Ao topo da secção da Ferramenta Caneta ( Pen Tool ) existe três tipos de opções: Show Pen Preview, Show Solid Points e Show Precise rs. Licenciatura de Engenharia Informática 53

78 Figura 3.51 A caixa de diálogo Preferences (Edição) SHOW PEN PREVIEW Seleccione a opção Show Pen Preview (Mostrar Visualização da Caneta) para proporcionar a visualização da linha que está a criar, antes de criar o próximo ponto. SHOW SOLID POINTS A opção Show Solid Points (Mostrar Pontos Sólidos), normalmente, já está seleccionada por defeito. Quando seleccionada, esta causa uma aparência sólida do ponto, quando o ponto não está seleccionado e um aparência oca quando está seleccionado. Se esta opção não estiver seleccionada, o contrário é visualizado, ou seja, os pontos não seleccionados têm uma aparência oca e pontos seleccionados uma aparência sólida. SHOW PRECISE CURSORS Seleccione a opção Show Precise rs (Mostrar res Precisos) para mudar o ícone da Ferramenta Caneta exibido em cima do Palco. Esta opção muda a visualização do cursor caneta para o de duas linhas cruzadas (cruz). Faça experiências com a Ferramenta Caneta. Por exemplo escolha uma cor, um estilo e uma espessura do traço diferentes e crie ambas as linhas, rectas e curvas. Use a Ferramenta Subseleccionar para manipular os pontos e as tangentes. Quando acabar de realizar todas experiências com a Ferramenta Caneta, seleccione Edit/Select All do menu e pressione a tecla [DELETE] para limpar o Palco. 5. FERRAMENTA OVAL (O) Use a Ferramenta Oval para criar formas circulares. {Clique} na Ferramenta Oval da Barra de Ferramentas para activar esta. Para criar uma forma oval (ou circular), {Clique}, segure e arraste o ponteiro do rato no Palco. Enquanto arrasta o ponteiro de rato, a forma circular vai sendo criada. Na verdade, a forma circular só é desenhada de facto no Palco quando {Liberta} o botão do rato. Para constranger uma forma circular a um círculo perfeito, pressione e segure a tecla [SHIFT] enquanto desenha. As formas ovais podem consistir em linhas exteriores (traços) e preenchimentos. Antes de criar a forma, deverá primeiro, especificar as propriedades do traço e do Licenciatura de Engenharia Informática 54

79 preenchimento. Não é necessário que a sua forma tenha um traço e um preenchimento, esta pode ter ambos ou simplesmente um destes. Para poder especificar as propriedades do traço use o Painel Properties da mesma maneira que usa quando cria linhas com a Ferramenta Linha ou com a Ferramenta Caneta. É possível especificar a cor, o estilo e a espessura do traço. SEM COR (DE TRAÇO) Se não desejar que a sua forma tenha uma linha exterior (um traço), deve {Clicar} na opção Sem Cor ( No Color ), que se localiza no fundo da Barra de Ferramentas ou na palette de cores do Traço. Na Barra de Ferramentas, verifique se a secção da Cor do Traço está seleccionada e {Clique} na opção Sem Cor. Neste momento, a cor do traço corrente é substituída pela opção Sem Cor. Figura 3.52 Passagem da Cor do Traço Corrente para Sem Cor Figura 3.53 Forma oval com uma linha exterior (traço) Figura 3.54 Forma oval sem linha exterior (traço) No Painel Color Mixer, {Clique} na selecção da cor do traço e depois {Clique} na opção Sem Cor. Figura 3.55 Painel Color Mixer (Cor do Traço) SEM COR (DE PREENCHIMENTO) Se quiser uma forma circular só com o traço (linha exterior), terá que criar uma forma circular sem preenchimento. Para isso, {Clique} na opção Sem Cor, que se localiza no fundo da Barra de Ferramentas ou na palette de cores do Preenchimento. Na Barra de Ferramentas, verifique se a secção da Cor do Preenchimento está Licenciatura de Engenharia Informática 55

80 seleccionada e {Clique} na opção Sem Cor. Neste momento, a cor do preenchimento corrente é substituída pela opção Sem Cor. Figura 3.56 Passagem da Cor do Preenchimento para Sem Cor Figura 3.57 Forma oval com um traço (linha exterior) Figura 3.58 Forma oval sem Preenchimento No Painel Properties, {Clique} na selecção da cor do Preenchimento e depois {Clique} na opção Sem Cor ou então {Clique} no menu pop-up do Preenchimento e escolha a opção None. Figura 3.59 Painel Color Mixer Além da opção Nome e Solid, também existem as opções Linear, Radial e Bitmap para a cor do preenchimento. As opções Linear e Radial são mudanças graduais, de pelo menos uma cor para outra, ou de uma cor para uma transparência. O efeito é em tudo semelhante à paisagem de um horizonte, em que o céu sofre a mudança de azul escuro para um azul claro. A diferença entre estas duas, é que a Linear faz a mudança de uma cor para, pelo menos, outra num movimento linear, isto é, em linha recta, e a Radial muda uma cor para, pelo menos, outra através de um padrão circular. Licenciatura de Engenharia Informática 56

81 Figura 3.60 Preenchimento Linear Figura 3.61 Preenchimento Radial O uso e a criação de cores lineares e radiais serão abordados num capítulo posterior. Se quiser aceder a um destes tipos de cores pré-definidas, seleccione o Painel Color Swatches e {Clique} em qualquer das cores, que aparecem ao fundo do painel. As cores lineares e radiais também aparecem na palette de cores do preenchimento, que se encontra na secção de Cores da Barra de Ferramentas. Figura 3.62 Painel Color Swatches A utilização do tipo de cor de preenchimento Bitmap será depois abordada num capítulo posterior. Faça várias experiências com a Ferramenta Oval. Experimente uma cor, um estilo e uma espessura do traço diferentes, como também um tipo de cor de preenchimento Licenciatura de Engenharia Informática 57

82 sólido, linear e radial. Após ter experimentando todas as hipóteses, seleccione Edit/Select All do menu e pressione a tecla [DELETE] para limpar o Palco. 6. FERRAMENTA RECTÂNGULO (R) Use a Ferramenta Rectângulo (Rectangle) para criar formas rectangulares. {Clique} na Ferramenta Rectângulo da Barra de Ferramentas para activar esta. Para criar um rectângulo, {Clique}, segure e arraste o ponteiro do rato no Palco. Enquanto arrasta o ponteiro do rato, a forma rectangular é criada. A forma rectangular só é de facto desenhada no Palco quando {Liberta} o botão do rato. Para constranger uma forma rectangular, de modo, a obter um quadrado perfeito, pressione e segure a tecla [SHIFT] enquanto desenha a forma rectangular. Tal como as formas ovais, as rectangulares também consistem num traço (linha exterior) e num preenchimento. Antes de começar a criar a forma, deve especificar as propriedades do traço e do preenchimento. Lembre-se de que a forma não tem que ter obrigatoriamente um traço e um preenchimento, tanto pode ter ambos, como um único. Seleccione as cores do traço e do preenchimento da mesma maneira que faz com a Ferramenta Oval. RAIO DO RECTÂNGULO ARREDONDADO A Ferramenta Rectângulo tem a opção, Raio do Rectângulo Arredondado (Round Rectangle Radius). Para arredondar os cantos de uma forma rectangular, {Clique} na opção Raio do Rectângulo Arredondado, que se localiza na secção de Opções da Barra de Ferramentas. Aparecerá a caixa de diálogo Rectangle Settings, onde pode mudar o valor do Corner Radius (Raio do Canto). Figura 3.63 Opção Raio do Rectângulo Arredondado Introduza um valor no campo Comer Radius. Quanto maior for o valor, maior a curvatura aplicada aos cantos do rectângulo. Figura 3.64 Exemplo de uma forma rectangular com um raio de canto de 20 pontos O valor do Raio do Canto irá permanece até que mude o valor deste. Logo, se quiser criar uma forma rectangular com cantos rectos, depois de ter criado uma com extremidades arredondadas, terá que {Clicar} na opção Raio do Rectângulo Arredondado e introduzir o valor zero no campo Raio do Canto. Licenciatura de Engenharia Informática 58

83 Experimente as várias opções que a Ferramenta Rectângulo proporciona. Experimente uma cor, um estilo e uma espessura de traço diferentes, tal como o tipo de cores para o preenchimento sólido, linear e radial. Experimente, também a opção Raio do Rectângulo Arredondado, introduzindo diferentes valores e visualizando o efeito que estes provocam. Depois de ter acabado todas as experiências, limpe o Palco seleccionando Edit/Select All do menu e depois pressionando a tecla [DELETE]. 7. FERRAMENTA LÁPIS (Y) Use a Ferramenta Lápis (Pencil) para desenhar esboços (traços) livremente (linhas que não são necessariamente rectas). {Clique} na Ferramenta Lápis da Barra de Ferramentas para activar esta. Para desenhar uma linha, {Clique}, segure e arraste o ponteiro do rato no Palco. Enquanto arrasta o ponteiro do rato, a linha é formada. Quando quiser terminar o desenho da linha, basta {Libertar} o botão do rato. A Ferramenta Lápis é fundamentalmente uma ferramenta de traços. Podendo escolher a cor, o estilo e a espessura do traço do mesmo modo com faz com a Ferramenta Linha. FORMATO DO LÁPIS A Ferramenta Lápis inclui a opção, Formato de Lápis que o ajuda a desenhar a sua linha, acertando ou suavizando a linha de modo automático. Existe três formatos: Straighten, Smooth e Ink. Figura 3.65 As Opções de Formato de Lápis STRAIGHTEN Seleccione a opção Straighten (Acertar) para que o Flash acerte as linhas que desenha. Dependendo de como desenha a linha, o Flash fará o seu melhor, para acertar (endireitar) cada parte referente à linha. Esta ferramenta, não cria linhas rectas como acontecia com a Ferramenta Linha. Figura 3.66 A linha à esquerda foi desenhada com o formato Ink (sem ajudas). A linha da direita foi desenhada com o formato Licenciatura de Engenharia Informática 59

84 Straighten, em que o Flash endireita automaticamente cada parte da linha SMOOTH Seleccione a opção Smooth (Suavizar) para que o Flash suavize as linhas que desenha. Dependendo de como desenha a linha, o Flash fará o seu melhor, para suavizar cada parte referente à linha. Figura 3.67 A linha à esquerda foi desenhada com o formato Ink (sem ajudas). A linha à direita foi desenhada com o formato Smooth, em que o Flash suavizou automaticamente a linha INK Seleccione a opção Ink (Tinta) para retirar a ajuda de desenho do Flash. A linha que desenhar não será afectada pelo Flash. Porém, é de notar que quando desenha uma linha, esta pode parecer-lhe muito desigual, isto é, mal-acabada, mas quando {Liberta} o botão do rato é que a linha é verdadeiramente desenhada, parecendo que o Flash alisou a linha, mas esse não é o caso. Figura 3.68 Linha desenhada pelo formato Tinta antes de {Libertar} o botão do rato Figura 3.69 Linha desenhada pelo formato Tinta depois de {Libertar} o botão do rato 8. FERRAMENTA PINCEL (B) Use a Ferramenta Pincel (Brush) para desenhar ou pintar preenchimentos. {Clique} na Ferramenta Pincel da Barra de Ferramentas para activar esta. Para pintar um traço com o pincel, {Clique}, segure e arraste o ponteiro do rato no Palco. Ao arrastar o ponteiro do rato o traço é criado, {Liberte} o botão do rato para terminar pintura. A Ferramenta Pincel é fundamentalmente uma ferramenta de preenchimento, assim sendo, deve seleccionar uma cor de preenchimento antes de a usar. A Ferramenta Pincel possui várias opções como Tipo de Pincel, Tamanho do Pincel e Formato do Pincel. Licenciatura de Engenharia Informática 60

85 TIPO DE PINCEL Seleccione um dos cinco Tipos de Pincel para analisar de que maneira estes afectam o comportamento dos traços do pincel no Flash. Os Tipos de Pincel incluem as opções Paint Normal, Paint Fills, Paint Behind, Paint Selection e Paint Inside. Figura 3.70 Tipos de Pincel PAINT NORMAL Seleccione a opção Paint Normal (Pintar Normal) para fazer com que o pincel pinte em cima de tudo, sem constrangimento. Com esta opção, pode pintar em cima de qualquer outra forma no Palco, quer esta seja um traço, um preenchimento, ou ambos. Figura 3.71 Forma de uma face Figura 3.72 Forma pintada por cima utilizando o tipo de pincel Paint Normal PAINT FILLS Seleccione a opção Paint Fills (Pintar Preenchimentos) para o Pincel só pintar os preenchimentos. Ou seja, esta opção não permite que o Pincel pinte por cima dos traços, podendo assim, ignorar os traços quando estiver a pintar. Licenciatura de Engenharia Informática 61

86 Figura 3.73 Definição de Traços e preenchimento na forma Figura 3.74 Forma pintada por cima utilizando a opção do pincel Paint Fills PAINT BEHIND Seleccione a opção Paint Behind (Pintar Atrás) para limitar a pintura do Pincel, ou seja, para o Pincel só pintar atrás das formas existentes no Palco. Logo, é livre para pintar em cima das formas, pois quando {Liberta} o botão do rato, só a área atrás das formas é que fica pintada. Figura 3.75 Neste caso, os lábios foram pintados por cima, mas só a área atrás dos lábios foi pintada. PAINT SELECTION Seleccione a opção Paint Selection (Pintar Selecção) para limitar o Pincel, de modo a este pintar só as áreas seleccionadas. As selecções ainda não foram abordadas, mas basicamente, estas são áreas de uma forma, que se isolam do resto da forma, usando para isso as ferramentas de selecção do Flash. As ferramentas de selecção serão abordadas num capítulo posterior. Normalmente, usam-se as selecções para se poder alterar uma determinada área, a área seleccionada. Se uma área de uma forma está seleccionada e está-se a utilizar a opção Pintar Selecção da Ferramenta Pincel, só essa selecção é que será pintada. Licenciatura de Engenharia Informática 62

87 Figura Parte do cabelo está isolada por uma selecção Figura Com a opção Pintar Selecção só é pintada a área seleccionada PAINT INSIDE Seleccione a opção Paint Inside (Pintar Dentro) para limitar o Pincel, de modo a este pintar só as áreas dentro dos traços. É necessário que comece a pintar dentro dos traços, para que se pintar fora dos traços, depois de ter começado dentro da forma, só a parte interior da forma seja pintada. Os traços e as áreas fora dos traços não são afectados. Figura Com a opção Pintar Dentro só pinta o interior de uma forma, mesmo que pinte por fora das linhas TAMANHO DO PINCEL Para mudar o Tamanho do Pincel, seleccione um tamanho do pincel diferente no menu pop-up Tamanho do Pincel. Licenciatura de Engenharia Informática 63

88 Figura 3.79 Menu pop-up do Tamanho do Pincel FORMATO DO PINCEL Para mudar o Formato do Pincel, seleccione um formato do pincel diferente no menu pop-up Formato do Pincel. Figura 3.80 Menu pop-up do Formato do Pincel BLOQUEAR PREENCHIMENTO Bloquear Preenchimento (Lock Fill) aplica-se para bloquear preenchimentos de gradient e de bitmap. Com a opção Bloquear Preenchimento seleccionada, o preenchimento de gradient (ou de bitmap) preenche efectivamente o Palco inteiro. Porém, o próprio preenchimento é invisível até que se use a Ferramenta Pincel para pintar as formas do Palco. As formas estão coloridas de acordo com o local destas no Palco. Por exemplo, as formas são pintadas do lado esquerdo do Palco com uma cor mais clara, enquanto as formas do lado direito do Palco são pintadas com uma cor mais escura, se seleccionar a cor branca standard para ilustrar o preenchimento de gradient linear. Licenciatura de Engenharia Informática 64

89 Figura 3.81 Exemplo de uma cor linear bloqueada Duas formas rectangulares inicialmente preenchidas com uma cor sólida. Com a opção Bloquear Preenchimento, os traços de pintura revelam uma luz gradient escura que efectivamente preenche o Palco inteiro. O gradient é revelado quando pinta as formas com a opção Bloquear Preenchimento seleccionada. Experimente as várias opções que a Ferramenta Pincel oferece. Experimente com cores de preenchimento, tamanhos do pincel, formatos de pincel e tipos de pincel diferentes. Quando acabar de experimentar a Ferramenta Pincel, seleccione Edit/Select All do menu e pressione a tecla [DELETE] para limpar o Palco. 9. FERRAMENTA TINTEIRO (S) A Ferramenta Tinteiro (Ink Bottle) modifica as linhas existentes ou acrescenta linhas às formas que não contêm linhas. Para modificar uma linha existente, seleccione uma cor de traço, uma espessura e um estilo, depois {Clique} numa linha existente ou num preenchimento da forma que tenha uma linha. O aspecto da linha mudará para as actuais designações que seleccionou. Para acrescentar uma linha a uma forma existente que não contém linha, seleccione uma cor de traço, uma espessura e um estilo, e depois {Clique} na forma. Figura 3.82 Esta face é composta por preenchimentos e traços Figura O preenchimento é determinado um traço sólido e grosso, enquanto o estilo de linha é mudado para sólido e traçada Licenciatura de Engenharia Informática 65

90 Faça várias experiências com a Ferramenta Tinteiro. Experimente diversas cores, espessuras e estilos de traço. Acrescente linhas a formas sem linhas e modifique linhas já existentes. Quando acabar, seleccione Edit/Select All do menu e pressione a tecla [DELETE] para limpar o Palco. 10. FERRAMENTA BALDE DE TINTA (K) A Ferramenta Balde de Tinta (Paint Bucket) modifica os preenchimentos existentes ou acrescenta preenchimentos a formas sem preenchimentos. Para modificar um preenchimento existente, basta seleccionar uma cor de preenchimento (sólida ou gradient) e {Clicar} no preenchimento que deseja modificar. Para acrescentar um preenchimento a uma forma existente composta somente por um traço, seleccione uma cor de preenchimento (sólida ou gradient) e {Clique} no interior da forma. Licenciatura de Engenharia Informática 66

91 Figura 3.84 A cor do cabelo é preta e dos lábios vermelha Figura 3.85 Com um único {Clique} da Ferramenta Balde de Tinta, a cor de cabelo é mudada para amarelo (loiro), e os lábios para azul Figura 3.86 Não há nenhuma cor na parte da face Figura 3.87 Com um único {Clique} da Ferramenta Balde de Tinta, a área dentro dos traços, que define a face, fica preenchida com uma cor gradient linear As opções da Ferramenta Balde de Tinta incluem as opções Tamanho da Lacuna e Bloquear Preenchimento. TAMANHO DA LACUNA Quando uma forma sem preenchimento tem um traço que não está totalmente fechado (como uma linha circular com fins que não se encontram), a Ferramenta Balde de Tinta pode ter dificuldades em criar um preenchimento. Se o traço tem uma abertura, este não provê de bastante informação para a Ferramenta Balde de Tinta criar um preenchimento dentro dos limites do traço. Para preencher formas com lacunas no traço, use a opção Tamanho da Lacuna (Gap Size). Cujas as opções são: Don t Close Gaps (Não Fechar Lacunas), Close Small Gaps (Fechar Lacunas Pequenas), Close Medium Gaps (Fechar Lacunas Médias) e Close Large Gaps (Fechar Lacunas Grandes). Licenciatura de Engenharia Informática 67

92 Figura 3.88 Opção do Tamanho da Lacuna A gama de Tamanhos de Lacunas, da pequena para grande, é muito pequena. Por exemplo, o seguinte traço circular faz com que o Flash considere que seja uma lacuna grande. Quando contrastar o tamanho da lacuna do traço com o tamanho da lacuna indicado pelo ícone Fechar Lacunas Grandes (Close Large Gaps), pode verificar que apesar do que o ícone indica, os tamanhos de lacuna actuais, em termos de gama de pequena para grande, não difere significativamente. Figura 3.89 Esta é considerada, pelo Flash, uma lacuna grande. A opção Fechar Lacunas Pequenas não funcionaria Figura 3.90 A forma com uma lacuna grande foi preenchida com a Ferramenta Balde de Tinta BLOQUEAR PREENCHIMENTO Quando selecciona um gradient para cor de preenchimento, o ponto central do gradient é colocado exactamente onde {Clicou} com a Ferramenta Balde de Tinta na forma. Pense no ponto central do gradient como um indicador de uma fonte de luz. O resultado conseguido é a ilusão de profundidade, ou de três dimensões. Licenciatura de Engenharia Informática 68

93 Figura 3.91 O ponto central do gradient radial é o centro desta forma circular Figura 3.92 O ponto central do gradient radial é o topo direito desta forma circular Figura 3.93 O ponto central do gradient radial é o fundo esquerdo da forma circular Uma vez que criou um preenchimento gradient, se {Clicar} na opção Bloquear Preenchimento (Lock Fill), o ponto central (ou se gostar mais, a fonte de luz) do gradient é bloqueada no seu local actual. Relembre-se que o uso do bloqueio do preenchimento cria a ilusão que o Palco inteiro é composto por um preenchimento gradient ou bitmap e que a forma no Palco será colorida dependentemente do seu local no Palco. Se a cor do preenchimento actual é um gradient ou um bitmap e a opção Bloquear Preenchimento está seleccionada, os objectos no Palco serão coloridos de acordo com o seu local no Palco. Experimente a Ferramenta Balde de Tinta, criando formas com e sem traços. Crie preenchimentos nestas. Experimente também as opções Bloquear Preenchimento. Quando acabar de experimentar a Ferramenta Balde de Tinta e as suas opções, seleccione Edit/Select All do menu e pressione a tecla [DELETE] para limpar o Palco. 11. FERRAMENTA TRANSFORMAR PREENCHIMENTO A Ferramenta Transformar Preenchimento (Transform Fill) permite modificar os preenchimentos gradients. {Clique} na Ferramenta Transformar Preenchimento da Barra de Ferramentas e {Clique} na forma (que tem que ter um preenchimento gradient) que deseja transformar. Esta ferramenta rodeará a forma. A Ferramenta Transformar Preenchimento inclui as opções Ponto do Centro, Dimensão Não Uniforme, Dimensão Uniforme e Rotação. Figura 3.94 {Clique} na opção escolhida, segure e arraste esta para transformar o preenchimento gradient. {Liberte} para realizar a mudança Licenciatura de Engenharia Informática 69

94 PONTO DO CENTRO Use a opção Ponto do Centro para poder mover o ponto central do preenchimento gradient. Figura 3.95 O preenchimento radial é colocado precisamente no centro da forma Figura 3.96 Com a Ferramenta Transformar Preenchimento, o ponto central do preenchimento radial é deslocado para a esquerda da forma DIMENSÃO NÃO UNIFORME Para comprimir ou ampliar o gradient, use a opção Dimensão Não Uniforme. Figura 3.97 O preenchimento radial está dimensionado uniformemente, de branco no centro para preto na extremidade da forma circular Figura 3.98 Com a Ferramenta Transformar Preenchimento, o preenchimento radial é comprimido, produzindo uma forma oval DIMENSÃO UNIFORME Use a opção Dimensão Uniforme para aumentar ou diminuir a dimensão do preenchimento gradient. Licenciatura de Engenharia Informática 70

95 Figura 3.99 O preenchimento radial está dimensionado uniformemente, de branco no centro para preto na extremidade da forma circular Figura Com a Ferramenta Transformar Preenchimento, a dimensão do preenchimento radial é reduzido. O resultado é um maior grau de preto na extremidade da forma circular Figura Com a Ferramenta Transformar Preenchimento, a dimensão do preenchimento radial é aumentada. O resultado é um menor grau de preto na extremidade da forma circular ROTAÇÃO Use a opção Rotação para poder rodar o preenchimento gradient. Figura O preenchimento radial está dimensionado uniformemente, de branco no centro para preto na extremidade da forma circular Figura Com a Ferramenta Transformar Preenchimento, o preenchimento radial é comprimido, produzindo uma forma oval Figura Aplicando a Ferramenta Transformar Preenchimento Rotação, o preenchimento radial é rodado 12. FERRAMENTA CONTA-GOTAS (I) Use a Ferramenta Conta-gotas (Dropper) para tirar uma amostra das cores das formas existentes, {Clique} simplesmente num preenchimento ou num traço. Poderia ter a necessidade de tirar uma amostra de uma cor para reproduzir exactamente a mesma cor numa outra forma. Quando se tira uma amostra da cor de um traço, a cor do traço na Barra de Ferramentas muda para a cor dessa amostra, podendo ser usada em qualquer ferramenta de traço. O mesmo acontece quando se tira uma amostra da cor de um preenchimento, a cor do preenchimento na Barra de Ferramentas muda para a cor dessa amostra, podendo ser usada em todas as ferramentas de preenchimento. Licenciatura de Engenharia Informática 71

96 A Ferramenta Conta-gotas não tem qualquer opção. Faça várias experiências com a Ferramenta Conta-gotas, criando em formas com traços e preenchimentos diferentes. Use a Ferramenta Conta-gotas para tirar amostras das cores. Verifique a mudança da cor dos traços e dos preenchimentos na Barra de Ferramentas quando tira uma amostra de uma cor. Quando acabar, seleccione Edit/Select All do menu e pressione a tecla [DELETE] para limpar o Palco. 13. FERRAMENTA BORRACHA (E) Use a Ferramenta Borracha (Eraser) para apagar formas ou partes de formas no Palco. Para apagar uma forma (ou parte de uma forma), {Clique}, segure e arraste o ponteiro do rato em cima da forma. As opções da Ferramenta Borracha incluem as opções: Tipo de Borracha, Torneira e Formato de Borracha. TIPO DE BORRACHA Seleccione uma das cinco opções do Tipo de Borracha, de modo a afectar o seu comportamento no Flash. Os Tipos de Borracha incluem Erase Normal (Apagar Normal), Erase Fills (Apagar Preenchimentos), Erase Lines (Apagar Linhas), Erase Selected Fills (Apagar Preenchimentos Seleccionados) e Erase Inside (Apagar Dentro). As opções do Tipo de Borracha funcionam precisamente como as opções do Tipo de Pincel. Figura Opções do Tipo Borracha ERASE NORMAL Seleccione a opção Erase Normal (Apagar Normal) para que a Ferramenta Borracha apague tudo, sem constrangimento. Pode apagar qualquer forma no Palco, quer seja um traço, um preenchimento, ou ambos. ERASE FILLS Seleccione a opção Erase Fills (Apagar Preenchimentos) para apagar só os preenchimentos. Os traços não serão apagados, até mesmo se ignorar traços com a Ferramenta Borracha. Licenciatura de Engenharia Informática 72

97 ERASE LINES Seleccione a opção Erase Lines ( Apagar Linhas) para só apagar as linhas (traços). Os preenchimentos não serão apagados, até mesmo se ignorar os preenchimentos com a Ferramenta Borracha. ERASE SELECTED FILLS Seleccione a opção Erase Selected Fills (Apagar Preenchimentos Seleccionados) para apagar as selecções que fez. Tanto os preenchimentos como os traços não serão apagados, até mesmo se passar por cima destes. ERASE INSIDE Seleccione a opção Erase Inside (Apagar Dentro) para apagar só áreas dentro de um traço. Deve começar a apagar dentro do traço. Mesmo que apague fora do traço, depois de ter começado dentro da forma, só a parte interior da forma é apagada. O traço e qualquer outra forma fora da área do traço não serão afectadas. TORNEIRA A Torneira age como uma borracha rápida. Com um único {Clique}, um preenchimento inteiro ou traço é apagado imediatamente. FORMATO DE BORRACHA {Clique} na seta do Formato Borracha e seleccione formatos diferentes para a Ferramenta Borracha. Os formatos da borracha consistem em tamanhos diferentes de círculos e quadrados. Figura Formatos da Borracha Licenciatura de Engenharia Informática 73

98 Experimente as várias hipóteses da Ferramenta Borracha. Crie formas com esboços e preenchimentos. Use a Ferramenta Borracha para apagar as formas. Experimente os Tipos de Borracha, a Torneira e os Formatos de Borracha diferentes. Quando acabar, seleccione Edit/Select All do menu o e pressione a tecla [DELETE] para limpar o Placo. 14. FERRAMENTA ZOOM (M, Z) Use a Ferramenta Zoom para aumentar ou diminuir dentro e fora das áreas no Palco. Existe dois métodos que pode usar. Por defeito, a Ferramenta Zoom tem um sinal positivo na lente. Isto indica que o método de ampliação está seleccionado, bastando simplesmente {Clicar} no Palco e a Ferramenta Zoom aumentará a área em passos de 200%, 400%, 800%, 1600% e 2000%. Para diminuir, basta simplesmente pressionar e segurar a tecla [ALT] quando {Clica} no Palco. A Ferramenta Zoom pode ter um sinal negativo na lente, aí se {Clicar} no Placo com a Ferramenta Zoom esta diminuirá a área. Alternativamente, para aumentar uma área, pode {Clicar}, segurar e arrastar no Placo com a Ferramenta Zoom. Quando arrasta, aparece uma caixa que indica a área do Palco que está a ser aumentada, esta área só é verdadeiramente ampliada quando {Liberta} o botão do rato. Figura Arraste para criar a área de ampliação e {Liberte} o botão do rato Figura A área do Zoom da forma no Palco Porque a relação do aspecto do Palco e a relação do aspecto da caixa que indica a área a ampliar pode diferir, podem ser exibidas áreas fora da área de caixa quando aumentou. SELECCIONADOR DE ZOOM Também pode usar o menu pop-up Seleccionador de Zoom (Zoom Selector) ao lado direito no topo do Palco para aumentar ou reduzir a sua visualização através dos níveis pré-definidos. {Clique} no menu pop-up e seleccione o nível de ampliação desejado. Licenciatura de Engenharia Informática 74

99 Figura O Seleccionador de Zoom Figura O Seleccionador de Zoom tem vários níveis de ampliação prédefinidos Figura O Seleccionador de Zoom é o menu pop-up do lado esquerdo no fundo do Palco A Ferramenta Zoom contém as seguintes opções: Aumentar e Reduzir Figura Opções da Ferramenta Zoom Por defeito a opção para Aumentar está seleccionada. {Clique} na opção Reduzir para reduzir a visualização quando {Clicar} com a Ferramenta Zoom no Palco. 15. FERRAMENTA MÃO (H, SPACEBAR) Use a Ferramenta Mão (Hand) para mover o Palco ao redor, dentro do ambiente de trabalho do Flash. Em alguma ocasião, durante a produção de um filme Flash, pode ter aumentado uma área particular do Palco para modificar uma forma. Pode usar a Ferramenta Mão para mover o Palco ao redor da visão aumentada em vez de utilizar as scroll bars (barras de rolagem ao fundo do Palco). Seleccione simplesmente a Ferramenta Mão (ou pressione a tecla [SPACEBAR]) e {Clique}, segure e arraste o Palco. {Liberte} o botão do rato quando mover a área do Palco para o local desejado. A Ferramenta Mão não move formas, só move o Palco. Licenciatura de Engenharia Informática 75

100 Figura A este nível de ampliação podemos ver somente o lado esquerdo do Palco. Se precisarmos de editar o lado direito, podemos utilizar a Ferramenta Mão para mover o Palco para aquela parte do Palco Figura Ao usar a ferramenta Mão a área visível do Palco é trocada pelo lado direito. Agora já é possível editar o lado direito do Palco A Ferramenta Mão não tem nenhuma opção. Licenciatura de Engenharia Informática 76

101 16. REVISÃO 1. Quais são os dois elementos fundamentais que podem constituir as formas no Flash? 2. Muitas das ferramentas de desenho podem ser constrangidas quando usadas. Qual a tecla utilizada em todos os casos para constranger uma ferramenta? 3. Há dois métodos para se seleccionar a cor de um traço ou preenchimento no Flash. Quais são esses métodos? 4. Como pode criar um estilo de traço? 5. A Ferramenta Caneta cria linhas com pontos. Como é chamada a linha entre os dois pontos? 6. Como faz para criar uma forma com a Ferramenta Oval ou Rectângulo sem um traço (linha exterior)? 7. Que tipos de gradients o Flash suporta? 8. Como arredonda as extremidades das formas rectangulares? 9. A opção Tipo de Pincel inclui seis opções. O que faz a opção de Pintar Preenchimentos? 10. O que faz a opção de Torneira quando se usa a Ferramenta Borracha? 17. RESUMO Depois de completar este capítulo, deve ser capaz de: Entender o conceito de Formas (Shapes) no Flash; Entender o conceito do Estado de Forma (Shape State); Entender a diferença entre Traço ou Linhas Exteriores e Preenchimento; Usar cada uma das Ferramentas de Desenho do Flash. Licenciatura de Engenharia Informática 77

102 C APÍTULO 4 - FUNDAMENTOS DO FLASH: COR Neste capítulo será abordado o sistema de cor no Flash, incluindo como criar as suas próprias cores e gradients. Objectivos Após completar este capítulo, deverá ser capaz de: 1. Entender o Sistema de Cor do Flash; 2. Usar e Criar Cores e Gradients Personalizados; 3. Gerir Cores. 1. COR EM FLASH Existem dois tipos de cores no Flash, sólidas e gradients. No Flash, a palette de cores por defeito contém 216 cores, que se equiparam às 216 cores standards da web que tanto o Netscape s Navigator como a Microsoft s Internet Explorer suportam. Figura A Palette de Cores para a Cor do Traço no Flash SELECCIONAR A COR DO TRAÇO Os Traços (também chamados por linhas exteriores) só podem ter cores sólidas. Para seleccionar uma cor de traço, {Clique} na Cor de Traço de um de dois lugares, da secção de Cores da Barra de Ferramentas ou do Painel Properties. Figura Cores (Traço e Preenchimento) da Barra de Ferramentas Licenciatura de Engenharia Informática 78

103 Figura A Cor do Traço no Painel Properties {Clique} em qualquer uma das cores da palette para seleccionar uma cor. Ao {Clicar} na Cor do Traço da Barra de Ferramentas aparece a palette de cores standard. Seleccione uma cor ou, se desejar, seleccione a opção Sem Cor para prevenir que um traço seja incluído no desenho da forma quando usa a Ferramenta Oval ou Rectângulo. A opção Sem Cor aparece na palette de cores do traço quando se acede a esta pela secção de Cores da Barra de Ferramentas, ou então, pode {Clicar} na opção Sem Cor ao fundo da secção de Cores da Barra de Ferramentas. SELECCIONAR A COR DO PREENCHIMENTO Os Preenchimentos podem ter uma cor sólida ou gradient. Para seleccionar uma cor de preenchimento, {Clique} na Cor de Preenchimento de um de dois lugares, da secção de Cores da Barra de Ferramentas ou do Painel Properties. Figura A Palette de Cores para a Cor do Preenchimento no Flash A palette de cores do Preenchimento assemelha à palette de cores do Traço, a não ser que além do conjunto de cores sólidas, há também um conjunto de 7 cores gradients. Além disso, a opção Sem Cor também está disponível. Para se designar que não há nenhuma cor de preenchimento, quando se usa a Ferramenta Oval ou Rectângulo, {Clique} na opção Sem Cor da palette de cores do Preenchimento, ou então, da secção de Cores da Barra de Ferramentas, estando a Cor do Preenchimento seleccionada. Figura Cores (Traço e Preenchimento) da Barra de Ferramentas Licenciatura de Engenharia Informática 79

104 Para seleccionar uma cor gradient através do Painel Color Mixer, tem que seleccionar o tipo de gradient do menu pop-up Tipo de Preenchimento. Figura Painel Color Mixer (Cor do Preenchimento) 2. GRADIENT LINEAR Ao seleccionar uma cor gradient Linear como Tipo de Preenchimento do menu popup, é apresentado uma barra de identificação de gradient. A barra de identificação de gredient é composta por ponteiros de cor. O padrão do gradient é exibido na barra de identificação de gradient. Figura Painel Color Mixer (Gadient Linear) Neste caso, o gradient linear começa com a cor branca e termina com a cor preta. Para seleccionar um gradient linear diferente, pode {Clicar} em uma das três (3) cores lineares pré-definidas no Painel Color Swatches. Figura Painel Color Swatches (Cores Lineares pré-definidas) Licenciatura de Engenharia Informática 80

105 Quando {Clica} em qualquer uma das cores lineares pré-definidas, o gradient do Painel Color Mixer muda adequadamente. Figura Este gradient linear consiste em dois (2) Ponteiros de cor Figura Este gradient linear consiste em seis (6) Ponteiros de cor Licenciatura de Engenharia Informática 81

106 Figura Este gradient linear consiste em sete (7) Ponteiros de cor O Painel Color Swatches contém um conjunto standard de cores sólidas como também um conjunto standard de cores gradients. Pode usar este em qualquer altura, para a cor do traço ou do preenchimento. 3. GRADIENT RADIAL Ao seleccionar uma cor gradient Radial como Tipo de Preenchimento do menu popup, é apresentado uma barra de identificação de gradient. A barra de identificação de gredient é composta por ponteiros de cor. O padrão do gradient é exibido na barra de identificação de gradient. Note que com os gradients radiais, o primeiro ponteiro de cor indica a cor do centro do gradient radial. Figura Painel Color Mixer (Gadient Radial) Há quatro cores gradients radiais pré-definidas que pode utilizar através do Painel Color Swatches. Licenciatura de Engenharia Informática 82

107 Figura Painel Color Swatches (Cores Radial pré-definidas) Quando {Clica} em qualquer cor radial pré-definida, o gradient muda adequadamente no Painel Color Mixer, da mesma forma que acontece com os gradients lineares. Também pode seleccionar um gradient da palette de cores do Preenchimento que se situa na secção de Cores da Barra de Ferramentas. Porém, o Painel Color Swatches é o método mais rápido. Uma vez seleccionada uma cor, de traço ou preenchimento, ou ambas, use as ferramentas de desenho apropriadas, de modo a usar a cor seleccionada na criação de formas. 4. CRIAR CORES PERSONALIZADAS Existe a possibilidade de criar as suas próprias cores, sólidas e gradients. Se assim desejar, lembre-se de que os utilizadores que navegam pela web usam uma exibição de 8-bit, podendo não ter uma visão correcta dos seus filmes de Flash. Há duas possibilidades para criar cores personalizadas, através do Painel Color Mixer ou através das palettes do Traço ou do Preenchimento que se situam na secção de Cores da Barra de Ferramentas. CRIAR CORES SÓLIDAS PERSONALIZADAS COM O PAINEL COLOR MIXER Para criar uma cor sólida personalizada com o Painel Color Mixer, {Clique} na cor de Traço ou de Preenchimento da secção de Cores para seleccionar uma cor. De seguida, com o ponteiro do rato, {Clique} na Gama de Cores para escolher uma cor, ou como alternativa, introduza o valor de uma cor nos campos Valores da Cor. Licenciatura de Engenharia Informática 83

108 Figura Painel Color Mixer (Funcionalidades) A cor que escolher irá aparecer na cor de traço ou de preenchimento, conforme a selecção actual. Por exemplo, na imagem acima a cor do traço actual é branca, se escolhermos outra cor através das Gama de Cores, a cor visualizada na cor de traço mudará. Figura A Cor de Traço é mudada através de {Clique} de uma cor na Gama de Cores Para acrescentar uma cor ao Painel Color Mixer para uso futuro, seleccione Add Swatch do menu do próprio Painel. Figura Menu do painel Color Mixer A nova cor é acrescentada ao Painel Color Swatches. Esta aparecerá debaixo do conjunto das 12 cores duplicadas. Por defeito, o Painel Color Swatches não exibe todo o conjunto de cores. Para poder visualizar todo o conjunto terá que usar a scroll bar (barra deslizante) para revelar as cores escondidas. Licenciatura de Engenharia Informática 84

109 Figura O Painel Amostra de Cores no seu tamanho habitual Figura Usando a scroll bar, para visualizar as restantes cores Os Painéis no Flash também podem ser maximizados. É possível maximizar o Painel Color Swatches de forma a poder visualizar todas as cores disponíveis no painel. Para isso, {Clique} no menu do Painel e seleccione Maximize Panel. Figura Painel Color Swatches Maximizado Licenciatura de Engenharia Informática 85

110 Pode usar a sua cor sólida personalizada como desejar. INTRODUZIR VALORES DE COR Para além de poder usar o ponteiro do rato para seleccionar uma cor na Gama de Cores, também pode introduzir os valores da cor manualmente nos campos Valores de Cor. Três sistemas de cor são suportados, RGB (por defeito), HSB e Hexadecimal. Para seleccionar o sistema de cor, basta seleccionar o sistema desejado no menu do próprio Painel, ou inserir um valor hexadecimal na caixa de texto para edição hexadecimal. Figura Seleccione RGB ou HSB do menu Introduzir valores directamente nos campos é a melhor forma de gerir cores de outras aplicações, como o valor hexadecimal da cor de fundo de uma página HTML, ou como o valor RGB de uma parte particular de um bitmap. ALFA (TRANSPARÊNCIA) Também tem a possibilidade de mudar o valor de Alfa, ou seja, o valor da transparência de uma cor. Se o Alfa tiver como valor 100%, a cor é totalmente opaca. Se pelo contrario, o valor de Alfa for de 0%, a cor é completamente transparente. A gama de valores de Alfa varia entre o nível de transparência que a cor tem. Quanto mais baixa a percentagem, mais transparente é a cor. A visualização de uma grade por trás da cor na cor do Traço ou Preenchimento dá-lhe a indicação do nível de Alfa. Figura Painel Color Mixer (Alfa) Licenciatura de Engenharia Informática 86

111 CRIAR CORES SÓLIDAS PERSONALIZADAS COM A PALETTE DE COR DO TRAÇO OU DO PREENCHIMENTO Quando acede à palette de cor do Traço ou do Preenchimento na secção de Cores da Barra de Ferramentas pode, também, criar cores sólidas personalizadas, {Clicando} no botão Color Picker (Selector de Cor). Figura A palette de cor do Traço A caixa de diálogo de Cor aparece. Figura A caixa de diálogo Color Seleccione uma cor existente da secção Basic colors e depois use o ponteiro do rato para seleccionar uma nova cor na Matriz de Cores ou introduza um valor manualmente nos campos HSB ou RGB. Também pode usar o r de Luminosidade para mudar o brilho da cor. {Clique} em Add to Custom Colors para acrescentar a nova cor à secção Custom Colors. Licenciatura de Engenharia Informática 87

112 Figura O uso da caixa de diálogo Color torna o método mais flexível 5. CRIAR GRADIENTS PERSONALIZADOS São criados gradients personalizados usando o Painel Color Mixer. Seleccione a opção Linear ou Radial do menu pop-up do Tipo de Preenchimento. Figura Painel Color Mixer (Cores Gradients) Pode seleccionar um dos gradients pré-definidos como ponto de partida. Seleccione o gradient Linear standard, cor branca para preta, do Painel Color Swatchs, com a opção Linear seleccionada. Licenciatura de Engenharia Informática 88

113 Figura Painel Color Mixer (Cor Linear) A cor, o número e o local dos Ponteiros de Cor relativamente um ao outro cria o gradient. Neste caso há dois (2) Ponteiros de Cor, um branco, no começo da Barra de Identificação do Gradient, e um preto, na terminação da Barra de Identificação do Gradient. O resultado é uma transição plana do branco para preto. A criação de gradients personalizados envolve a mudança da cor dos Ponteiros de Cor, como também a adição ou a remoção de Ponteiros de Cor e o posicionamento destes ao longo da Barra de Identificação do Gradient. Para criar um gradient personalizado seleccione Add Swatch do menu do Painel. Figura Menu do Painel Color Mixer O gradient é duplicado, por defeito só pode afixar sete (7) gradients. Figura O primeiro gradient é duplicado ao fundo da barra de gradientes pré-definidos Licenciatura de Engenharia Informática 89

114 MUDAR A COR DOS PONTEIROS DE COR {Clique} num Ponteiro de Cor para mudar sua cor. A cor da área triangular sobre o Ponteiro de Cor muda de cinza para preto, indicando qual é o Ponteiro de Cor actualmente seleccionado. Figura Antes de {Clicar} no Ponteiro de Cor branco Figura Depois de {Clicar} no Ponteiro de Cor branco, a cor da área triangular sobre o Ponteiro de Cor muda de cinza para preto De seguida, seleccione uma cor da palette de cores, {Clicando} na cor desejada. Figura A cor amarela está seleccionada O gradient muda da passagem do branco para preto para a passagem do amarelo para preto no Painel Color Mixer. Figura A cor Gradient Linear mudou de branco para preto para a passagem de amarelo para preto Licenciatura de Engenharia Informática 90

115 ADICIONAR, REMOVER E POSICIONAR PONTEIROS DE COR Para além de poder mudar a cor dos Ponteiros de Cor existentes, pode também adicionar novos Ponteiros de Cor, remover e mudar a posição destes ao longo da Barra de Identificação do Gradient. Para adicionar um Ponteiro de Cor, {Clique} em qualquer lugar, desde que ligeiramente abaixo da Barra de Identificação do Gradient. O novo Ponteiro de Cor herda a cor actual existente naquele ponto particular na Barra de Identificação do Gradient. Figura Adição de um novo Ponteiro de Cor Um novo Ponteiro de Cor foi colocado no centro da Barra de Identificação do Gradient. Pode nomear este com uma cor diferente. Figura A cor do novo Ponteiro de Cor foi mudada para branco Neste caso, seleccionou-se a cor branca par o novo Ponteiro de Cor. Também existe a possibilidade de mudar a posição do Ponteiro de Cor, movendo este, na Barra de Identificação do Gradient, de um lado para outro. A posição de cada Ponteiro, de um relativamente a outro, afecta o padrão do gradient. Para mover o Ponteiro de Cor, {Clique}, segure e arraste. Quando posicionar o Ponteiro de Cor no lugar desejado, {Liberte} o botão do rato para completar a operação. Figura O novo Ponteiro de Cor foi mudado de posição Licenciatura de Engenharia Informática 91

116 O Ponteiro de Cor branco é posicionado mais próximo do Ponteiro de Cor preto. Note que o gradient é dominado pela cor amarela, com uma pequena transição desta para o branco e depois para o preto. Para remover um Ponteiro de Cor, arraste este para além da extremidade da Barra de Identificação do Gradient. Figura Arraste o Ponteiro de Cor para fora da extremidade da Barra de Identificação do Gradient para remover este Figura O Ponteiro de Cor foi removido ADICIONAR TRANSPARÊNCIA A UM PONTEIRO DE COR Pode querer criar um gradient com transparência, como por exemplo, da cor preta para a transparente, ou as extremidades do gradient transparentes, mas o centro sólido. Figura Gradient Linear: Branco para Preto Figura Gradient Linear: Preto para Transparente Para fixar um nível de Alfa a um Ponteiro de Cor, seleccione o Ponteiro de Cor e use o campo Alfa, de modo a mudar o nível de Alfa da cor actual do Ponteiro de Cor. Figura O Ponteiro de Cor é fixado a branco com Alfa a 0%, fazendo que a cor seja completamente transparente Licenciatura de Engenharia Informática 92

117 Os mesmos métodos que usa para criar gradients lineares personalizados aplicam-se na criação de gradients radiais personalizados. Lembre-se que o começo da Barra de Identificação do Gradient (lado esquerdo) é o centro do padrão do gradient radial. A combinação de múltiplos Ponteiros de Cor, com vários níveis de transparência, pode criar alguns efeitos muito interessantes. O seguinte gradient radial é composto por cinco (5) Ponteiros de Cor. Ponteiro Cor Nível de Alfa 1 Branco 0 2 Preto Branco 0 4 Preto 50 5 Branco 0 Figura Exemplo de um gradient radial com 5 Ponteiros de Cor e com o uso de Alfa Este gradient personalizado, colocado numa forma circular no centro e a outro ponto, produz os seguintes efeitos. Note que a transparência acrescenta uma suavidade às imagens vector. Figura Estas são formas circulares gémeas preenchidas com o mesmo gradient, mas a Ferramenta Balde de Tinta foi {Clicada} em diferentes pontos dentro da forma, produzindo assim, efeitos muito diferentes 6. USAR OS CONTROLOS DE COR POR DEFEITO, SEM COR E DE TROCA DE COR Tanto como a secção de Cores na Barra de Ferramentas e o Painel Color Mixer têm um conjunto de controles, de Cor por Defeito, Sem Cor e de Troca de Cor. Licenciatura de Engenharia Informática 93

118 Figura Barra de Ferramentas e Painel Color Mixer COR POR DEFEITO Para restabelecer a cor por defeito do Traço e do Preenchimento, {Clique} na opção Cor por Defeito. A cor do Traço será preta e a cor do Preenchimento será branca. Figura A Cor de Traço é amarela e do Preenchimento é preta Figura Ao {Clicar} na opção Cor por Defeito a Cor do Traço fica preta e do Preenchimento branca SEM COR Para seleccionar a opção Sem Cor para um traço ou preenchimento, primeiro {Clique} no ícone da cor do Traço ou do Preenchimento (lápis para o traço, balde de tinta para o preenchimento) e depois {Clique} na opção Sem Cor. Figura A Cor do Traço é preta e do Preenchimento é branca Figura Ao {Clicar} na opção Sem Cor com a Cor do Preenchimento seleccionada, esta fica Sem Cor TROCA DE COR {Clique} na opção Troca de Cor para trocar a cor actual do Traço com a cor actual do Preenchimento e vice-versa. Licenciatura de Engenharia Informática 94

119 7. GERIR CORES Se criou cores e gradients personalizados, estes serão guardados como um ficheiro de Flash. Porém, pode desejar aceder a estes noutras produções de filmes de Flash. Para guardar um conjunto de cores, seleccione Save Colors do menu do Painel Color Swatchs. Guarde as cores num local à sua escolha. A extensão do ficheiro de cores é.clr. Seleccione Save as Default do menu do Painel, para fixar este como o seu conjunto de cores por defeito, sempre que usa o Flash. Figura Menu do Painel Color Swatch (Guardar conjunto de Cores) Para acrescentar as cores à palette actual, seleccione Add Colors e escolha um ficheiro de cores (.clr,.act e.gif ). Para substituir o conjunto actual de cores, seleccione Replace Colors e escolha um ficheiro de cores (.clr,.act e.gif ). Para limpar todas as cores, excepto o preto e o branco, seleccione Clear Colors. Para restaurar a palette de cores por defeito, seleccione Load Default Colors ou Web 216. Finalmente, para ordenar as cores por classificação de cor, pode seleccionar a opção Sort by Color. 8. REVISÃO 1. Há dois tipos de cores no Flash. Quais são elas? 2. Os Traços podem ter uma cor como gradient? 3. Como designa que um traço ou um preenchimento não tem nenhuma cor? 4. Que Painéis utiliza para criar gradients personalizados? Licenciatura de Engenharia Informática 95

120 5. Como acrescenta a transparência a um Ponteiro de Cor? 6. Que sistemas de cor são suportados pelo Flash? 7. Como restaura as palettes de cor no Flash? 9. RESUMO Depois de completar este capítulo, deve ser capaz de: Entender o Sistema de Cor do Flash; Usar e Criar Cores e Gradients Personalizados; Gerir Cores. Licenciatura de Engenharia Informática 96

121 C APÍTULO 5 - FUNDAMENTOS DO FLASH: TEXTO Neste capítulo será abordada a Ferramenta Texto e será introduzido de Estado Agrupado. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Usar a Ferramenta de Texto para criar texto; 2. Usar a Ferramenta de Texto para criar campos de texto; 3. Seleccionar e modificar o tipo de letra, a cor e o tamanho; 4. Especificar o espaçamento, o kerning e a linha base; 5. Entender o Estado Agrupado. 1. TERMINOLOGIA TIPOGRÁFICA Antes de começar a criar e manipular texto em Flash, deveria saber algumas das terminologias tipográfica básicas que são usadas em algumas opções do Flash. Analise o seguinte exemplo. Figura Exemplo de uma terminologia tipográfica básica TIPO DE LETRA Um tipo de letra é um conjunto cheio de caracteres (maiúsculas, minúsculas, numérico, caracteres especiais, etc.) projectado num estilo específico. Por exemplo, a mesma palavra, apresentada em tipos de letra diferentes, pode parecer bastante diferente: Figura Exemplo de uma palavra escrita em tipos de letra diferentes Licenciatura de Engenharia Informática 97

122 Os tipos de letra também são frequentemente chamados por fontes. A visualização do texto é um factor importante no desígnio dos filmes de Flash. LINHA BASE A linha base do texto não é mais do que uma linha imaginária, na qual os caracteres se assentam efectivamente. O texto em minúscula, como por exemplo o p, descende, ou seja, existe uma parte do caractere que fica abaixo da linha base. KERNING Kerning é o espaço entre um par particular de caracteres. Cada tipo de letra pode ter um valor kerning particular, de forma que alguns caracteres estão mais próximos uns dos outros, dependendo essa distância da forma destes. Por exemplo, as letras maiúsculas A e N, quando colocadas juntas (AN), têm formas salientes fazendo que as suas posições sejam mais próximas do que as letras A e V (AV). ESPAÇAMENTO Espaçamento, como o próprio nome diz, é o espaço entre um caractere em uma linha de texto. Ou seja, é o espaço entre os caracteres, embora nos caracteres particulares, seja constante o uso do kerning, podendo assim, este ser confundido facilmente com o kerning. Lembre-se que o kerning é uma medida muito específica do espaço entre pares de caracteres particulares, considerando que o espaçamento é a medida do espaço entre todos os caracteres. 2. FERRAMENTA TEXTO Use a Ferramenta Texto (Text) para criar texto no Flash. Existe dois métodos para criar texto no Palco. Pode seleccionar a Ferramenta Texto e {Clicar} no Palco. Aparecerá um bloco de texto extensível, indicado por um círculo oco (a alça do bloco de texto) à direita do topo. Ao introduzir o texto, o bloco de texto expande-se com cada caractere que introduz. Figura Bloco de texto extensível Licenciatura de Engenharia Informática 98

123 Figura O bloco expande-se quando introduz o texto Figura O bloco vai-se expandindo com a introdução de caracteres Como segunda hipótese, pode seleccionar a Ferramenta Texto e {Clicar}, segurar e arrastar o cursor do rato. Ao arrastar o rato, é criado um bloco de texto fixo. Quando {Liberta} o botão do rato, o bloco de texto fixo fica identificado por um quadrado oco à direita do topo. Na introdução do texto, este passa para à próxima linha quanto alcança a extremidade do bloco de texto. Figura Bloco de texto fixo Figura Na introdução do texto, o texto passa para a próxima linha quando alcança a extremidade do bloco de texto Quando acabar de introduzir o texto, {Clique} fora do bloco de texto ou seleccione outra ferramenta para o bloco de texto desaparecer. MODIFICAR O TEXTO Pode modificar o texto de duas maneiras diferentes. Na primeira, pode seleccionar o bloco de texto com a Ferramenta Seta e depois pode usar o Painel Properties para mudar as propriedades do texto. Licenciatura de Engenharia Informática 99

124 Figura Bloco de texto seleccionado com a ferramenta Seta Figura O tipo de letra foi mudado de Garamond para Times New Roman através do Painel Propriedades Também pode seleccionar a Ferramenta Texto e seleccionar o texto dentro da caixa de texto, {Clicando} e arrastando o cursor do rato por cima do texto. Depois pode introduzir um texto diferente e/ou modificar as propriedades do texto usando o Painel Properties. Figura O texto dentro do bloco de texto foi seleccionado com a ferramenta Texto Figura O conteúdo do texto foi alterado de abc para 123 PAINEL PROPERTIES Use o Painel Properties para definir uma fonte (tipo de letra), classificar o tamanho, mudar o estilo (negrito e/ou itálico), a cor, o espaçamento, o kerning, a linha base (linha base normal, sobrescrito ou subscrito) e URL. Também pode usar o Painel Properties para definir o alinhamento, a margem esquerda e a direita, o recuo e o espaçamento entre linhas. Estas opções actuam em ambos os tipos de blocos de texto, mas habitualmente são mais usadas nos blocos de texto fixos. Existe ainda a possibilidade de criar blocos de texto dinâmicos ou de entrada. Os blocos de texto dinâmicos contêm texto que pode ser actualizado dinamicamente com a utilização de ActionScript. Os blocos de texto de entrada servem para receber valores de entrada de um utilizador, estes assemelham-se a uma caixa de texto de uma form de HTML. O processamento dos blocos de texto de entrada será abordado num capítulo posterior. Licenciatura de Engenharia Informática 100

125 Figura Painel Properties (Ferramenta Texto) FONTE Seleccione a fonte que deseja, {Clicando} no menu pop-up Fonte. No menu pop-up é exibida a lista das fontes que estão instaladas no seu sistema. É exibida uma prévisualização da fonte quando passa com o cursor do rato por estas. Figura Painel Properties (Uso da fonte) TAMANHO Para mudar o tamanho da fonte, use o controle deslizante para aumentar ou diminuir o tamanho do texto, {Clicando} na seta ao lado do campo Tamanho, ou se preferir, introduza um valor na caixa de texto. Quando usa o controle deslizante, o texto que se encontra no bloco de texto é dimensionado em tempo real. Licenciatura de Engenharia Informática 101

126 Figura Os caracteres são fixados a um tamanho de "40" com o controlo deslizante Figura Os caracteres são fixados a um tamanho de "20" com o controlo deslizante ESPAÇAMENTO Para mudar o espaçamento, use o controle deslizante do campo Espaçamento, ou introduza um valor neste. Quando usa o controle deslizante, o espaçamento entre caracteres é exibido em tempo real. Figura O espaçamento é fixado por defeito a 0 Figura O espaçamento é fixado a 8. Os caracteres estão sobrepostos Licenciatura de Engenharia Informática 102

127 Figura O espaçamento é fixado a 4. Os caracteres estão separados espaçosamente LINHA BASE Para mudar o alinhamento do texto relativamente à linha base, seleccione Normal (selecção por defeito), Superscrit ou Subscript. Figura A linha base fixada a Normal, significa que o texto é pousado na linha base actual Figura A linha base fixada a Sobrescrito, significa que o texto é alinhado sobre a linha base Figura A linha base fixada a Subscrito, significa que o texto é alinhado abaixo da linha base URL Pode atribuir um link a um bloco de texto para uma página de Internet. Se assim o desejar, introduza o endereço da página no campo URL. Uma linha tracejada aparecerá ao fundo do bloco de texto. Licenciatura de Engenharia Informática 103

128 Figura Texto com link ESTILO Para atribuir a um texto o estilo negrito, itálico ou ambos, {Clique} nos botões Negrito (B) ou Itálico (I). Para remover as colocações de estilo; {Clique} novamente nos botões. Figura O botão de itálico foi {Clicado}. O texto está em itálico COR Seleccione a cor do texto na palette de cores. Figura A cor amarela (de valor hexadecimal #FFFF00) foi seleccionada KERN Os conjuntos de fontes normalmente introduzem o kerning para especificar o espaçamento entre pares de caracteres particulares. Para atribuir o valor do kerning a um conjunto de fontes, {Clique} na checkbox do kern, para assim o seleccionar. Licenciatura de Engenharia Informática 104

129 Figura Kern é seleccionado para atribuir os valores do kerning a um conjunto de fontes ALINHAMENTO {Clique} no botão de alinhamento Esquerda, Centro, Direita ou Justificado, para alinhar um texto dentro de um bloco de texto. Figura Alinhamento fixado à Esquerda (por defeito) Figura Alinhamento fixado ao Centro Figura Alinhamento fixado à direita Figura Alinhamento fixado como justificado Licenciatura de Engenharia Informática 105

130 MARGEM ESQUERDA Para definir a margem esquerda do bloco de texto {Clique} no botão Format... e use o controle deslizante ou introduza um valor no campo Left Margin. Figura A margem esquerda está fixada a 13 pixels MARGEM DIREITA Para definir a margem direita do bloco de texto {Clique} no botão Format... e use o controle deslizante ou introduza um valor no campo Right Margin. Figura A margem direita está fixada a 32 pixels RECUO Para definir o valor de recuo para o começo de cada parágrafo num bloco de texto, {Clique} no botão Format... e use o controle deslizante ou introduza um valor no campo Indent. Figura O recuo está fixado a 13 pixels. Ambos os parágrafos são recuados Licenciatura de Engenharia Informática 106

131 ESPAÇAMENTO ENTRE LINHAS Para definir o valor de espaço entre cada linha num bloco de texto, {Clique} no botão Format... e use o controle deslizante ou introduza um valor no campo Line Spacing. Por defeito, o espaçamento entre linhas está afixado a 2 pontos. Figura O espaçamento entre linha está fixado a -2 pontos. As linhas estão mais juntas e mais próximas TIPOS DE BLOCOS DE TEXTO Pode seleccionar três tipos de blocos de texto: Estático, Dinâmico e de Entrada. Por defeito, quando cria um bloco de texto, é criado o de Texto Estático. Static Text O Static Text (Texto Estático) consiste em duas opções: Fontes de Dispositivo e Seleccionável. Figura Painel Properties (Texto Estático) Fontes de Dispositivo Quando publica um filme para a web as fontes que usa são incorporadas no filme, de forma que o filme seja exibo exactamente como o criou. Isto irá aumentar o tamanho de ficheiro. Se especificar as Fontes de Dispositivo, o Flash não incorporará a fonte. Ao invés disso, o Flash Player usará a fonte mais próxima à fonte que seleccionou, existente no sistema do utilizador. Se o utilizador não tiver a mesma fonte ou uma fonte parecida, o uso das fontes de dispositivo pode resultar em mudanças significativas do filme. Em geral, não é recomendável o uso das fontes de dispositivo. Licenciatura de Engenharia Informática 107

132 Seleccionável Se seleccionar a opção Seleccionável, os utilizadores poderão seleccionar qualquer bloco de texto que designou como seleccionável, copiar e colar esse texto. Dynamic Text O Dynamic Text (Texto Dinâmico) é o texto que se actualiza. Por exemplo, pode incluir um contador num filme para exibir o tempo actual. Teria de usar ActionScript para actualizar a variável colocada no bloco de texto dinâmico. As opções do texto dinâmico são: Tipo de Linha, Variável, Opções de Caracteres, HTML, Mostrar borda e Seleccionável. Figura Painel Properties (Texto Dinâmico) Tipo de Linha Seleccione Single Line, Multiline ou Multiline no wrap para designar a forma como o texto é exibido, numa única linha, em linhas múltiplas ou em várias linhas que só são quebradas quando o último caractere é um caractere de quebra, como Enter (Windows) ou Return (Macintosh). (dependente do tamanho do texto que será colocado no bloco). Figura Texto Dinâmico (Tipo de Linha) Variável Introduza o nome da variável que é dinamicamente actualizada por ActionScript. Neste caso, a variável é correntescore. Licenciatura de Engenharia Informática 108

133 Figura Texto Dinâmico (Variável) Opções de Caracteres Quando designa ou cria um bloco de texto como Dinâmico, a fonte que seleccionar é a fonte exibida no bloco de texto. O sistema do utilizador tem que ter a mesma fonte instalada para que o filme seja correctamente exibido. Se o utilizador não tiver a mesma fonte, a exibição do texto poderá ser significativamente afectada, porque os conjuntos de fontes diferentes têm tamanhos diferentes e assim sucessivamente, danificando a visualização do filme. Há duas soluções para o problema. A primeira, é usar a fonte Arial, pois a maioria, se não todos os sistemas têm esta fonte instalada. A segunda, é incorporar a fonte que seleccionou no filme de Flash, o que resulta num tamanho de ficheiro maior. Figura {Clique} na opção apropriada All Characters: Esta opção inclui a fonte inteira como fonte utilizada no filme de Flash. Uppercase Letters (A-Z): Esta opção só inclui os caracteres maiúsculos da fonte. Lowercase Letters (a-z): Esta opção só inclui os caracteres minúsculos da fonte. Numerals (0-9): Esta opção só inclui os caracteres numéricos da fonte. Punctuation (!@#$%...): esta opção só inclui os caracteres de pontuação da fonte. And these characters: Atribuição de caracteres específicos, de modo a assegurar que estes são incorporados no filme de Flash. Licenciatura de Engenharia Informática 109

134 HTML Seleccione a checkbox HTML para facilitar a formatação de texto com elementos de HTML standards. Mostrar Borda Seleccione a opção Mostrar Borda para colocar uma borda preta e um preenchimento branco automaticamente no bloco de texto. Seleccionável Se seleccionar a opção Seleccionável, os utilizadores poderão seleccionar qualquer bloco de texto que designou como seleccionável, copiar e colar esse texto. Input Text Seleccione a opção Input Text (Texto de Entrada) para criar blocos de texto que aceitem a atribuição de valores por parte dos utilizadores, semelhante a um texto numa form HTML standard. A maioria das opções do texto de Entrada são idênticas as opções do texto Dinâmico, menos Tipo de Linha e Máximo de Caracteres. Figura Painel Properties (Texto Dinâmico) Tipo de Linha Seleccione a opção Single Line, Multiline, Multiline no wrap ou Password para designar a forma como texto é exibido numa única linha, em linhas múltiplas, em várias linhas que só são quebradas quando o último caractere é um caractere de quebra (dependente do tamanho do texto que será colocado no bloco) ou em asteriscos (* * * * *) para esconder o que o utilizador está a introduzir. Máximo de Caracteres Introduza um valor para limitar o número máximo de caracteres que um utilizador pode introduzir no bloco de texto. Por exemplo, se o bloco de texto for uma caixa de texto para a introdução do número de cartão de crédito, poderia limitar esta a um máximo de 16 caracteres (xxxx-xxxx-xxxx-xxxx). REDIMENSIONAR O BLOCO DE TEXTO Pode converter um bloco de texto existente um bloco de texto de Texto Dinâmico seleccionando este do menu pop-up ou pode primeiro seleccionar a opção de Texto Dinâmico e depois usar a Ferramenta Texto para criar o bloco de texto. Se seleccionar Licenciatura de Engenharia Informática 110

135 primeiro a opção de Texto Dinâmico e depois criar o bloco de texto, notará que aparece uma alça à direita do fundo do bloco de texto, em vez da direita do topo do bloco de texto. Figura Exemplo de um bloco de texto A alça do bloco de texto aparece à direita do fundo dos blocos de texto Dinâmico e dos blocos de texto de Entrada. Em todo o caso, embora o tipo de caixa, pode redimensionar o bloco de texto usando a Ferramenta Texto, para isso, {Clique}, segure e arraste a alça para mudar a largura e altura do bloco de texto. 3. ESTADO AGRUPADO Deve ter notado que a selecção dos blocos de texto não tem o mesmo aspecto da selecção das formas. Os blocos de texto seleccionados têm uma caixa de selecção ao redor deles, enquanto as formas seleccionadas exibem um padrão quadriculado. Figura Texto e Forma seleccionados Recordará que num capítulo anterior falou-se no Estado de Forma. As Ferramentas de Desenho criam e modificam o Estado de Forma nas formas existem. O texto é automaticamente criado com o Estado Agrupado. Os Gráficos existentes que têm o Estado Agrupado são facilmente reconhecidos pelo padrão de selecção, ou seja, por uma caixa azul que rodeia a imagem no Estado Agrupado. Um padrão quadriculado já indica que uma imagem está no Estado de Forma. As Ferramentas de Desenho não funcionam em imagens no Estado Agrupado. Por exemplo, não pode mudar a cor de um caractere específico com a Ferramenta Balde de Tinta ou acrescentar uma linha exterior (traço) ao texto com a Ferramenta Tinteiro. Os blocos de texto são criados no Estado Agrupado de forma a que possa editar o seu conteúdo. Se estes fossem criados no Estado de Forma, não poderia editar o texto posteriormente. Porém, tem a possibilidade de mudar o estado de um bloco de texto, seleccionando o bloco de texto com a Ferramenta Seta e seleccionar Modify/Ungroup do menu (ou pressionando as telas [CTRL]+[B]). Quando um bloco de texto, ou qualquer imagem no Estado Agrupado for desagrupada esta fica no Estado de Forma. Como resultado, pode usar as Ferramentas de Desenho nas formas. Porém, perderá a facilidade de editar o texto. Licenciatura de Engenharia Informática 111

136 4. REVISÃO 1. O que é kerning? 2. Que tipo de blocos de texto existem no Flash? 3. Qual a designação Texto Dinâmico? 4. Qual a designação Texto de Entrada? 5. Em que estado é que o texto é criado? 5. RESUMO Depois de completar este capítulo, deve ser capaz de: Usar a Ferramenta de Texto para criar texto; Usar a Ferramenta de Texto para criar campos de texto; Seleccionar e modificar o tipo de letra, a cor e o tamanho; Especificar o espaçamento, o kerning e a linha base; Entender o Estado Agrupado. Licenciatura de Engenharia Informática 112

137 C APÍTULO 6 - FUNDAMENTOS DO FLASH: SELECÇÃO O entendimento e uso das Ferramentas de Selecção do Flash é essencial para se poder criar formas e editar animações. Neste capítulo serão apresentadas as várias ferramentas e métodos de selecção no Flash. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Usar a Ferramenta Laço; 2. Usar a Ferramenta Seta para fazer Selecções; 3. Usar a Ferramenta Seta para modificar Formas; 4. Criar Formas através de outras Formas. 1. FERRAMENTAS DE SELECÇÃO Uma parte integrante da criação de formas no Flash é a utilização das Ferramentas de Selecção. As selecções são formas completas ou áreas de uma forma isoladas do resto da forma, de modo a efectuar mudanças nestas. O Flash possui duas ferramentas de selecção, a Ferramenta Laço e a Ferramenta Seta. 2. FERRAMENTA LAÇO Use a Ferramenta Laço (Lasso) para criar selecções. {Clique}, segure e arraste o rato para fazer uma selecção. Simplesmente desenhe, à mão livre, em redor da área que deseja seleccionar, a técnica de desenho é semelhante à que utiliza com a Ferramenta Lápis no modo de Ink. Quando {Libertar} o botão do rato, a selecção é efectuada. Um padrão de selecção quadriculado indica a área que está seleccionada. Figura Uma parte do preenchimento que compõe o cabelo foi seleccionada com a Ferramenta Laço Licenciatura de Engenharia Informática 113

138 Neste momento aquela parte particular do preenchimento está isolada do resto do preenchimento. Assim, poderá usar a Ferramenta Balde de Tinta para colorir a selecção ou até mesmo a Ferramenta Pincel no modo de Pintar Selecção para colorir a selecção com outra cor. Para retirar a selecção de algo, pressione a tecla [ESC] ou {Clique} noutro local do Palco. Figura A selecção foi colorida com uma cor diferente através da Ferramenta Balde de Tinta Figura Foi retirada a selecção da área pelo acto de pressionar a tecla [ESC] A Ferramenta Laço tem três opções: Varinha Mágica, Propriedades da Varinha Mágica e Tipo de Polígono. Figura Opções da Ferramenta Laço As opções de Varinha Mágica e Propriedades da Varinha Mágica só são aplicáveis a bitmaps, estas serão abordadas num capítulo posterior. TIPO DE POLÍGONO A selecção da opção Tipo de Polígono força a Ferramenta Laço a desenhar linhas rectas. {Clique} e {Liberte} o botão do rato para criar o ponto de começo da linha. Ao arrastar o rato, a primeira linha é desenhada. {Clique} com o rato para apontar o fim da primeira linha e o começo da nova linha. Continue a {Clicar} e a arrastar o rato até completar a selecção desejada, normalmente na forma de um polígono (daí o nome da opção). Para completar a selecção, deve {Clicar} novamente no ponto de partida ou então fazer {Duplo-Clique} em qualquer lugar no Palco, uma linha recta é desenhada do ultimo ponto para o primeiro ponto da selecção. Licenciatura de Engenharia Informática 114

139 Figura As formas que compõem o cabelo estão rodeadas por uma selecção poligonal Figura Uma vez completa a selecção poligonal, qualquer forma que esteja dentro das linhas é seleccionada Depois da selecção, pode modificar as formas seleccionadas como o desejar. 3. FERRAMENTA SETA A Ferramenta Seta (Arrow) é uma ferramenta poderosa, usada para efectuar selecções e modificações de formas. Para efectuar uma selecção com a Ferramenta Seta, {Clique}, uma única vez, na forma que deseja seleccionar. A selecção baseia-se em dois factores, se a forma em que {Clicou} é um traço ou um preenchimento. Por exemplo, se uma forma consiste num traço e num preenchimento, só um destes é que será seleccionado, dependendo em qual {Clicou}. Figura Forma circular com um traço e um preenchimento Figura Ao {Clicar} no traço com a Ferramenta Seta só este é seleccionado Licenciatura de Engenharia Informática 115

140 Figura Forma circular com um traço e um preenchimento Figura Ao {Clicar} no preenchimento com a Ferramenta Seta só este é seleccionado Se fizer um {Duplo-Clique } num preenchimento que tem um traço em seu redor, tanto o preenchimento como o traço são seleccionados. Figura Forma circular com um traço e um preenchimento Figura Ao fazer {Duplo-Clique} no preenchimento, tanto o preenchimento como o traço ficam seleccionados A Ferramenta Seta também pode seleccionar através do arraste. Para isso, no Palco, {Clique}, segure e arraste o rato e envolva as formas que deseja seleccionar com a caixa de selecção. Para completar a selecção {Liberte} o botão do rato. Figura Com a Ferramenta Seta é criada caixa de selecção Figura A parte do topo da forma circular está seleccionada OPÇÕES DA FERRAMENTA SETA Uma vez, que uma forma, ou várias formas, estejam seleccionadas pode usar a Ferramenta Seta para mover a selecção no Palco, apagar (pressionando a tecla [DELETE]) ou modificar a selecção. Também pode usar as teclas setas do teclado para mover as formas seleccionadas no Palco. Licenciatura de Engenharia Informática 116

141 Figura A parte do topo da forma circular foi movida para um diferente local no Palco Além disso, a Ferramenta Seta possui três opções: Encaixar, Suavizar e Acertar. Figura Opções da Ferramenta Seta ENCAIXAR OBJECTOS A opção Encaixar normalmente já se encontra seleccionada (por defeito). Esta opção permite-lhe arrastar um objecto (forma) para outro objecto e encaixar este à forma do objecto. Por exemplo, pode arrastar o topo de um círculo para o cabelo da face feminina. Note que, se {Clicar}, segurar e arrastar uma forma do seu centro, aparece um ponto indicador do centro que encaixará no objecto destino. Figura O ponto do centro do objecto encaixa na extremidade do próximo objecto (o cabelo) Licenciatura de Engenharia Informática 117

142 Figura Ao {Libertar} o botão do rato insere o objecto no seu novo local Encaixar Objectos à Grade Existe também uma grade no Palco (invisível por defeito), na qual o ponto do centro dos preenchimentos e o ponto do fim dos traços também podem encaixar, o que significa que estes são atraídos para a linha da grade mais próxima, como se esta fosse um íman. Para visualizar a grade, seleccione do menu View/Grid/Show Grid. Figura O Palco com a Grade visível Para encaixar os objectos na grade, seleccione do menu View/Grid/Snap. Para personalizar os valores da grade, seleccione do menu View/Grid/Edit. A caixa de diálogo Grid aparece. Licenciatura de Engenharia Informática 118

143 Figura A caixa de diálogo Grid Para definir uma cor para a grade, seleccione a cor da palette de cores. Seleccione Show Grid para exibir a grade e seleccione Snap to Grid para que os objectos encaixem na grade. Introduza as dimensões horizontais e verticais de cada bloco da grade em pixels. Os valores variam de 7.2 a 288, e por defeito têm o valor 18 x 18. Seleccione de Snap Accuracy a opção Must be (Deve estar Perto), Normal, Can be Distant (Pode estar Distante) e Always Snap (Sempre Encaixar) para controlar o comportamento da função de encaixe. SUAVIZAR Se desenhar um traço e não estiver satisfeito com o aspecto deste, se não é suficientemente liso, pode seleccionar este com a Ferramenta Seta e {Clique} na opção Suavizar para alisar (suavizar) a linha. Se {Clicar} repetidamente a opção Suavizar, a linha fica cada vez mais lisa. Figura Uma linha curva antes de se aplicar a opção Suavizar Figura Depois de aplicar a opção Suavizar (4 vezes), a linha trona-se mais lisa ACERTAR Se desenhou um traço com curvaturas e quer endireitar este, seleccione o traço com a Ferramenta Seta e {Clique} na opção Acertar. Se {Clicar} repetidamente nesta opção fará com que o traço fique completamente direito. Figura Uma linha curva antes de se aplicar a opção Acertar Figura Depois de aplicar a opção Acertar a linha é endireitada Licenciatura de Engenharia Informática 119

144 4. MODIFICAR AS FORMAS COM A FERRAMENTA SETA Além de seleccionar as formas (traços, preenchimentos ou ambos), também pode usar a Ferramenta Seta para modificar formas. MODIFICAR TRAÇOS Os traços consistem em pontos e segmentos. Uma linha recta tem dois pontos (do inicio e do fim) entre quais está situado o segmento. Uma linha curva pode ter vários pontos com segmentos curvos entre eles. Usando a Ferramenta Caneta (Pen), pode criar os pontos, dando um maior controle. Quando usa a Ferramenta Lápis (Pencil), não cria os pontos, mas o Flash cria pontos por você. Assim pode usar a Ferramenta Seta (Arrow) para manipular os pontos e os segmentos. Se {Clicar}, segurar e arrastar num traço com a Ferramenta Seta, pode modificar a forma desse traço. O traço encurvará se um pequeno arco aparecer debaixo do cursor da Ferramenta Seta no Palco. {Clique} no segmento. Figura Linha recta Figura Ao {Clicar}, segurar e arrastar o segmento cria uma curva neste Figura O resultado final. Uma linha recta é transformada numa linha curva Também pode {Clicar}, segurar e arrastar no fim de uma linha. Se assim, o fizer está manipular um ponto, porque uma linha com um ângulo recto aparece debaixo do cursor da Ferramenta Seta. Figura Linha recta Figura Ao {Clicar}, segurar e arrastar o ponto final cria uma curva na linha Figura O resultado final. Uma linha recta é transformada numa linha curva Licenciatura de Engenharia Informática 120

145 MODIFICAR PREENCHIMENTOS Também é possível modificar os preenchimentos com a Ferramenta Seta da mesma forma que modifica os traços. Quando passa a Ferramenta Seta perto da extremidade de um preenchimento, uma curva ou, dependendo do preenchimento (por exemplo, uma extremidade de forma rectangular), uma linha com um ângulo recto aparece debaixo do cursor da Ferramenta Seta. {Clique}, segure e arraste o cursor para poder modificar o preenchimento. Para completar a modificação {Liberte} o botão do rato Figura Usando a Ferramenta Seta, a forma (1), é redesenhada, {Clicando}, segurando e arrastando, depois libertando o rato para criar uma nova forma (2-3). O processo é novamente repetido (4-6) até alcançar o resultado particular (7). Estes foram os passos para criar o cabelo para a face feminina (8). 5. CRIAR FORMAS ATRAVÉS DE OUTRAS FORMAS As formas no Estado de Forma são informações de imagem efectivamente em bruto, onde dois preenchimentos ou traços da mesma cor, quando colocados juntos e não seleccionados se tornam numa forma. Licenciatura de Engenharia Informática 121

146 Figura Há duas formas feitas de preenchimentos (1-2). Uma forma (2) é seleccionada com a Ferramenta Seta e é colocada sobre a outra forma (3). A selecção é retirada (4). Quando tornar a seleccionar a forma, só há uma forma, porque os preenchimentos têm uma cor idêntica Quando os preenchimentos ou os traços têm cores diferentes, pode usar uma forma para cortar uma outra forma. Para isso, simplesmente seleccione uma forma, coloque essa sobre outra, retire a selecção da primeira, seleccione novamente e mova para fora da segunda forma. Figura Uma forma da letra c (faz de um preenchimento) Figura Uma forma circular, uma cor de preenchimento diferente de preto Figura A forma c é seleccionada com a Ferramenta Seta e posicionada em cima da forma circular Licenciatura de Engenharia Informática 122

147 Figura A forma c não seleccionada Figura A forma c é seleccionada e removida da forma circular. Como as formas tinham preenchimentos de cor diferentes, uma forma faz um corte na outra Pode usar uma combinação de todas estas técnicas para desenvolver arte no Flash. 6. AGRUPANDO FORMAS Para agrupar formas e prevenir que afecte cada uma com outra, seleccione a forma com a Ferramenta Seta e seleccione do menu Modify/Group ou pressione as teclas [CTRL] + [G]. Uma caixa de selecção aparece em redor da forma, indicando que a forma está agora no Estado Agrupado. Figura A forma no Estado de Forma. A selecção desta tem um padrão quadriculado Figura A forma no Estado Agrupado. A indicação da selecção agora é uma caixa As formas no Estado Agrupado não podem ser afectadas pelas Ferramentas de Desenho, no entanto podem se rodadas e dimensionadas. Além disso, uma forma agrupada nunca cortará outra forma. Para atribuir a uma forma o Estado de Forma seleccione do menu (Modify/Break Apart) ou pressione as teclas [CTRL] + [B]. 7. USAR A FERRAMENTA SUBSELECCIONAR Não está limitado a usar a Ferramenta Subseleccionar (Subdelect) com os traços que criou com a Ferramenta Caneta (Pen). Pode usar a Ferramenta Subseleccionar com qualquer forma, traço ou preenchimento. Para usar a Ferramenta Subseleccionar, seleccione da Barra de Ferramentas esta e {Clique} na forma que deseja editar. Use a Ferramenta Subseleccionar para editar os pontos e as tangentes (veja no Capítulo 3 - A Ferramenta Caneta). Licenciatura de Engenharia Informática 123

148 Figura A forma c foi seleccionada com a Ferramenta Subseleccionar Figura Modifica muito precisa podem ser agora feitas Figura A forma c é transformada numa forma significativamente diferente 8. VARIAÇÕES DE CORES COM SELECÇÕES Quando selecciona uma forma no Estado de Forma (traço ou preenchimento), enquanto a forma está simplesmente seleccionada seleccione uma outra cor. A forma assume a cor recentemente seleccionada. 9. EXERCÍCIOS Exercício 1 Abra o ficheiro face.fla. Veja a colecção das seguintes formas que compõem a imagem de uma face: Use a Ferramenta Seta para fazer os cabelos mais curtos, como nesta imagem: Licenciatura de Engenharia Informática 124

149 Mude como desejar a forma do nariz, das sobrancelhas e dos lábios. Exercício 2 Abra o ficheiro name.fla. Veja a colecção das seguinte formas que compõem o nome: Use uma combinação de Preenchimentos e a Ferramenta Seta (como também a Ferramenta Subseleccionar) para criar uma versão modificada do seu próprio nome. Exercício 3 Examine a seguinte imagem: Abra o ficheiro boolean.fla. Use as formas incluídas no ficheiro para divertir a imagem acima. Exercício 4 Abra o ficheiro subselect.fla. Use a Ferramenta Subseleccionar para modificar a forma existente. Tente criar uma forma semelhante a esta imagem: Licenciatura de Engenharia Informática 125

150 Abra o ficheiro bird.fla para ver a forma modificada. 10. RESUMO Depois de completar este capítulo, deve ser capaz de: Usar a Ferramenta Laço; Usar a Ferramenta Seta para fazer Selecções; Usar a Ferramenta Seta para modificar Formas; Criar Formas através de outras Formas. Licenciatura de Engenharia Informática 126

151 C APÍTULO 7 - FUNDAMENTOS DO FLASH: SÍMBOLOS A conversão das formas em Símbolos ajuda a gerir e a criar filmes de Flash eficazmente. Além disso, a utilização de Símbolos permite manipular e animar formas de maneiras únicas. Neste capítulo será detalha a forma como os Símbolos são criados, como estes funcionam, como são organizados e como são editados. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Converter Formas em Símbolos; 2. Usar e entender a Biblioteca; 3. Entender os Símbolos e as Instâncias; 4. Modificar Símbolos; 5. Modificar as Instâncias dos Símbolos. 1. SÍMBOLOS Os Símbolos são componentes fundamentais no Flash e um aspecto essencial na criação de animações e de elementos interactivos. Anteriormente, criamos Formas e as manipulamos no Estado de Forma. Depois, estudamos as Formas e, mais particularmente, o texto no Estado Agrupado. No Estado de Forma, cada uma das Ferramentas de Desenho pode ser utilizada e cada forma pode ser afectada por outra. No Estado Agrupado, as Ferramentas de Desenho não funcionam, mas as imagens podem ser redimensionadas, rodadas e movidas no Palco. As Formas no Estado de Forma e no Estado Agrupado podem ser transformadas em Símbolos. Mas afinal, o que é um Símbolo? Quando se converte uma forma num Símbolo, o Símbolo é colocado na Biblioteca do Flash. Um Símbolo actua como a referência mestre para cada Instância do mesmo. Assim sendo, o que é uma Instância? Uma Instância é uma cópia do Símbolo mestre. Ou seja, em vez de se usar o Símbolo no Palco, usa-se e modifica-se a Instância do Símbolo. As Instâncias podem ser redimensionadas e rodadas, mas para além disso, também podem ser aplicadas várias Propriedades de Instância, como por exemplo, o Brilho, a Tonalidade, o Alfa (transparência) e o Avançado (manipulação da cor e transparência). Nenhum destes efeitos podem ser aplicados a formas que existem no Estado de Forma ou no Estado Agrupado. Neste capítulo vai-se estudar brevemente cada um destes efeitos. Qualquer mudança que faça numa Instância de um Símbolo não afecta o próprio Símbolo, mas se mudar o Símbolo, serão afectadas todas as Instâncias baseadas nesse Símbolo. CRIAÇÃO DE SÍMBOLOS Para criar um Símbolo seleccione uma forma (ou texto). A forma pode estar no Estado de Forma ou no Estado Agrupado, isso não importa, porém o estado desta afectará o Licenciatura de Engenharia Informática 127

152 modo como pode editar, mais tarde, o Símbolo. Seleccione do menu Insert/Convert to Symbol ou pressione a tecla [F8]. A caixa de diálogo Convert to Symbol aparece. Figura Forma circular no Estado de Forma Figura Seleccione do menu (Insert/Convert to Symbol) ou pressione a tecla [F8] para converter em Símbolo Figura A caixa de diálogo Converter em Símbolo Deve criar Símbolos adequadamente, de forma a que possa trabalhar produtivamente na construção do filme em Flash. Alguns filmes de Flash, dependentemente da sua natureza, podem consistir em numerosos Símbolos. O COMPORTAMENTO DO SÍMBOLO Além de criar o Símbolo, deve designar o seu Comportamento. O Comportamento de um Símbolo afecta o modo como este se comporta no filme de Flash. O Comportamento por defeito é Movie Clip, pois frequentemente, querem-se Símbolos para serem Movie Clips. Neste momento, deixe o Comportamento do Símbolo de Movie Clip. Os diferentes Comportamentos dos Símbolos serão abordados num capítulo posterior. 2. INSTÂNCIAS Uma vez que converteu uma forma num Símbolo, a forma no Palco torna-se numa Instância do Símbolo. Por outras palavras, uma Instância é uma cópia do Símbolo e não o próprio Símbolo. As Instâncias podem ser distinguidas pelo padrão de selecção. Relembre-se que uma forma seleccionada tem um padrão de selecção quadriculado e uma forma agrupada uma caixa de selecção em volta desta. Uma Instância seleccionada tem uma caixa de selecção em seu redor com uma cruz no centro. Licenciatura de Engenharia Informática 128

153 Figura Diferencias na selecção de Instância, Forma, e Agrupada A familiarização com os padrões de selecção no Flash ajudará a evitar a confusão na produção dos filmes de Flash. 3. BIBLIOTECA Os Símbolos são colocados na Biblioteca. A Biblioteca é usada para armazenar e organizar os Símbolos. Para abrir a Biblioteca, seleccione Window/Library ou pressione as teclas [CTRL] + [L] e a Janela Biblioteca aparece. Figura Janela Biblioteca Uma lista de todos os Símbolos do filme actual é exibida debaixo da Janela de Prévisualização. O ícone ao lado do nome do Símbolo designa o tipo de Símbolo (o Comportamento). O Comportamento também é listado debaixo do Kind. O próprio Símbolo é exibido na Janela de Pré-visualização e deve estar seleccionado, através do {Clique} no Símbolo, para se poder visualizar. Ícone do Comportamento Graphic Ícone do Comportamento Movie Clip Ícone do Comportamento Button Para ordenar os Símbolos, {Clique} na barra Kind para ordenar através do tipo de Símbolo, na barra Use Count para ordenar através do uso ou na barra Date Licenciatura de Engenharia Informática 129

154 Modified para ordenar através da data. Também pode seleccionar um Símbolo e {Clicar} na seta, que se encontra no lado direito da Janela, para mover o Símbolo no interior da lista. {Clique} nos botões Visualização ampla ou Restringir a exibição para modificar a largura da Janela Biblioteca. O número de Símbolos, depende do filme, pode colidir com as centenas. Felizmente, a Biblioteca permite-lhe criar pastas, de modo a organizar os seus Símbolos. Para criar pastas, {Clique} no ícone Nova Pasta. Ao fazer os exercícios, criará Pastas na Biblioteca. {Clique} no ícone Propriedades para mudar o nome do Símbolo, o Comportamento e editar o Símbolo. A edição de um Símbolo será depois retractada no capítulo. Para apagar um Símbolo, seleccione o Símbolo e {Clique}no ícone Excluir. Muitas destas funções providas pelos vários ícones na Biblioteca também estão disponíveis no menu da Janela. {Clique} no menu e seleccione a opção desejada. Figura Menu da Janela Biblioteca Licenciatura de Engenharia Informática 130

155 Se {Clicar}com o botão direito do rato num Símbolo é exibido um menu de contexto sensível, no qual pode executar tarefas comuns, como duplicar, renomear, apagar e editar. Na construção dos filmes dos exercícios, irá usar muitas destas tarefas (opções). Figura Menu de contexto sensível 4. USO DE INSTÂNCIAS Para usar uma Instância de um Símbolo, seleccione o Símbolo na Biblioteca e arraste-o sobre o Palco. Lembre-se de que o Símbolo actual permanece na Biblioteca. A forma no Palco é uma Instância (uma cópia) do Símbolo. Não possível usar as Ferramentas de Desenho na Instância; porém, pode Redimensionar e Rodar a Instância. O Redimensionar e/ou o Rodar uma Instância não afecto o Símbolo. Esta é a principal vantagem dos Símbolos e das Instâncias. Assim pode modificar a Instância do Símbolo mantendo o Símbolo sempre inalterado, para uso futuro. Além disso, pode usar múltiplas Instâncias baseadas num Símbolo. Por exemplo, se precisarmos de três círculos no Palco, podemos arrastar três Instancias do Símbolo bola sobre o Palco. E podemos Redimensionar e Rodar cada Instância como nos apetecer. O Flash usa o Símbolo como uma base para a Instância e para os registros das mudanças que faz à Instância no Palco. Este é um uso eficiente das formas, ambos em produção e em tamanho do ficheiro actual. Se tivéssemos que criar três formas circulares separadas, ocuparia muito mais tempo e aumentaria o tamanho do ficheiro do filme. Pode pensar em cada Símbolo como um objecto único com um conjunto particular de propriedades. Cada Instância herda as propriedades do Símbolo, fazendo que cada Instância seja um filho do Símbolo. As propriedades, herdadas do Símbolo, de cada Instância podem ser modificadas sem afectarem as propriedades do Símbolo. Conjunto de Propriedades associadas a um símbolo: Licenciatura de Engenharia Informática 131

156 Propriedades: Dimensão Rotação Inclinação Brilho Tonalidade Alfa Figura O símbolo bola Avançado Quando arrasta uma Instância do Símbolo sobre o Palco, esta herda as propriedades do Símbolo pai. As propriedades da Instância podem ser modificadas como desejar. Figura Três Instâncias do Símbolo de bola. A primeira não foi modificada. A segunda foi reduzida em tamanho. A terceira foi inclinada e rodada. Com a possibilidade de modificar as Propriedades da Instância, pode criar formas diferentes baseadas num único objecto, o Símbolo pai. Por exemplo, se houver a necessidade de ter botões de forma circular e botões de forma oval, na interface do filme de Flash. Enquanto no desenvolvimento tradicional de web, ao trabalhar com bitmaps, teríamos que produzir duas imagens separadas, uma da forma circular e outra de forma oval, e no aparecimento de texto no botão de forma oval, teríamos que reproduzir vários ficheiros de imagem para cada rótulo. No Flash, o desenvolvimento da interface é muito mais eficiente, pois só precisaríamos de um Símbolo, como uma forma circular de preenchimento gradient, e depois usar simplesmente as Instâncias dessa forma ao longo do filme de Flash. Licenciatura de Engenharia Informática 132

157 Figura Um Símbolo que se torna na forma base de todos os botões do filme de Flash Figura O Símbolo bola é usado para os botões. Uma Instância com a palavra contact é colocada em cada Instância da bola. Note-se que só há um Símbolo contact e que a dimensão e a tonalidade (uma Instância é preta e a outra é branca) da Instância contact foram modificadas 5. PROPRIEDADES DAS INSTÂNCIAS Além de redimensionar, rodar e inclinar as Instância, também pode modificar as Propriedades das Instâncias. Para modificar as Propriedades de uma Instância, seleccione a respectiva Instância no Palco e no Painel Properties seleccione do menu pop-up Color uma das seguintes opções: Brightness, Tint, Alpha e Advanced. Figura Painel Properties (Propriedades da Instância) Licenciatura de Engenharia Informática 133

158 BRIGHTNESS Modifique o Brilho de uma Instância, aumentando ou diminuindo este em termos de percentagem. Introduza um valor no campo Brilho ou use o controle deslizante deste. Os valores positivos do brilho aumentam de 1 a100% e os valores de negativo do brilho diminuem de -1 a -100%. Quando ajusta o nível de Brilho, a Instância sofre a mudança em tempo real. Figura O Brilho está afixado a 78% Figura O Brilho está afixado a -68% TINT Para atribuir Tonalidade (modifica a cor existente acrescentando uma outra cor à existente) a uma Instância use os controles da Tonalidade. Seleccione uma cor para acrescentar à cor existente. Para ajustar a quantidade de cor que é acrescentada à Instância ajuste o valor da percentagem. O valor 100% substitui a cor existente pela cor da tonalidade seleccionada. Figura A Tonalidade está afixada a 100% para preto, substituindo completamente a cor existente ALPHA Use a opção Alpha para ajustar o nível de transparência da Instância seleccionada. Quanto mais baixa for a percentagem, maior será a transparência da Instância. Licenciatura de Engenharia Informática 134

159 Figura A Instância contact está com o Alfa a 100% Figura A Instância contact está com o Alfa a 20% ADVANCED Pode modificar a cor de um modo mais preciso e alterar o nível de Alfa usando as propriedades Avançadas, para tal {Clique} no botão Settings. Pode controlar a cor através de cada cor primária (Vermelho, Verde, Azul), a cor pode ser modificada em termos de percentagem global (lado esquerdo do painel) ou por valores exactos (lado direito do painel). Figura A Instância bola está inalterada Figura A Instância bola é modificada por subtracção, -107 na cor Azul Um único Símbolo, como o Símbolo bola, em combinação com as Propriedades da Instância e os efeitos de dimensão/rotação/inclinação, pode ser a base de múltiplas imagens no seu filme de Flash. Licenciatura de Engenharia Informática 135

160 6. EDIÇÃO DE SÍMBOLOS Outra grande vantagem dos Símbolos e das Instâncias é a capacidade de alterar as Instâncias ao longo do filme através da edição dos Símbolos, em que estas são baseadas. Para editar um Símbolo, faça {Duplo-Clique} no Símbolo. Sairá do Placo principal e irá para o Palco do Símbolo. Na verdade quando faz {Duplo-Clique} num Símbolo é colocado automaticamente no Palco do Símbolo, pode reconhecer se está ou não no Placo do Símbolo através da visualização ou não do nome do Símbolo no topo do Palco e de uma cruz no centro do Símbolo. Figura Palco principal Figura Biblioteca Há três (3) Instâncias do Símbolo de bola e duas (2) Instâncias do Símbolo contact no Palco principal. Sabe-se que se está no Palco principal porque no topo do Palco visualiza-se o número da cena, neste caso Scene 1, e não o nome de nenhum Símbolo. Se fizer {Duplo-Clique} no Símbolo bola, pode editar o Símbolo e será transportado do Palco principal para o Palco do Símbolo. Onde poderá visualizar no topo do Palco o nome do Símbolo e uma cruz no centro do Símbolo. Licenciatura de Engenharia Informática 136

161 Figura Palco do Símbolo bola Figura Biblioteca Neste caso, criamos a bola no Palco principal e depois convertemos esta num Símbolo. Neste momento, a bola no Palco principal tornou-se numa Instância do Símbolo, e o padrão de selecção mudou de quadriculado (indicando o Estado de Forma) para uma caixa de selecção com uma cruz no centro (indicando uma Instância). Quando edita o Símbolo bola, a bola no Palco do Símbolo encontra-se no Estado de Forma, podendo ser manipulada pelas Ferramentas de Desenho. Ao editar um Símbolo, modifica todas as Instâncias baseadas nesse Símbolo. Esta é uma característica excelente, pois permite-lhe mudar todas as Instâncias rapidamente, mas ao mesmo tempo trona-se perigosa, se não planear bem a sua produção. Figura O Símbolo é editado e modificado. Foi adicionada outra esfera no topo esquerdo Para voltar ao Palco principal depois de ter editado o Símbolo, {Clique} no Indicador no topo da janela do Palco, neste caso, Scene 1. Licenciatura de Engenharia Informática 137

162 Figura Todas as Instância do Símbolo bola mudaram com a edição do Símbolo Qualquer mudança que faça no Símbolo aparecerá em cada Instância do Símbolo. É muito importante que entenda que o Flash tem um Palco principal ou mestre e que cada Símbolo também tem seu próprio Palco. Entender os Símbolos e a relação destes com as suas Instâncias é essencial para o bom uso do Flash. 7. EXERCÍCIOS Exercício 1 Abra o ficheiro instances.fla. O Palco está vazio. Abra a Biblioteca, nela estão dois Símbolos: Use as Instancias destes Símbolos para criar diferentes versões de botões. Tente criar as seguintes imagens: Licenciatura de Engenharia Informática 138

163 Abra instanceexamples.fla para ver o exemplo acima. Exercício 2 Use o ficheiro instances.fla do exercício anterior ou abra o ficheiro instanceexamples.fla. Use as Instâncias dos Símbolos para construir vários botões, tal como fez no exercício anterior ou use a variação existente em instanceexamples.fla. Edite os Símbolos, de modo a alterar o Símbolo bola para uma forma quadrada e o Símbolo contact para um texto diferente, como por exemplo, Flash. Visualize a adequada modificação das Instâncias. Tente aproximar-se das Instâncias da seguinte imagem: Abra o ficheiro changesymbol.fla para ver o exemplo acima. 8. RESUMO Depois de completar este capítulo, deve ser capaz de: Converter Formas em Símbolos; Usar e entender a Biblioteca; Entender os Símbolos e as Instâncias; Modificar Símbolos; Modificar as Instâncias dos Símbolos. Licenciatura de Engenharia Informática 139

164 C APÍTULO 8 - IMAGENS EXTERNAS Existe a possibilidade de criar imagens no Flash, ou, se necessita de usar bitmaps, ou prefere usar outros programas de desenho como o Macromedia Freehand ou o Adobe Ilustrator para criar as imagens pode importar essas imagens. Neste capítulo será abordada a importação de imagens externas e a integração destas no Flash. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Preparar bitmaps para o Flash; 2. Importar bitmaps no Flash; 3. Aperfeiçoar bitmaps; 4. Editar bitmaps; 5. Converter bitmaps em vectores; 6. Importar imagens de vector. 1. BITMAPS NO FLASH Pode necessitar de usar bitmaps nos seus filmes de Flash já que as imagens de vectores não são a melhor opção para reproduzir fotografias ou texturas com trocas suaves de cores e padrões. Mas o uso de bitmaps pode aumentar significativamente o tamanho dos filmes de Flash, como alterar o efeito de velocidade da animação, para travar esta tendência é essencial que se manipule os bitmaps antes de serem importados para o Flash. MANIPULAÇÃO DE BITMAPS Há três considerações primárias que deverá ter quando manipula os bitmaps para os importar para o Flash. 1. As Dimensões e a Resolução da Imagem; 2. A Profundidade da Cor; 3. A Compressão. DIMENSÕES E A RESOLUÇÃO DA IMAGEM É essencial que as imagens importadas não sejam maiores do que o necessário, em termos de largura e altura. No Flash, existe a possibilidade de fixar as dimensões do Palco, {Clique} no botão Size no Painel Properties. Aparecerá a caixa de diálogo Document Properties. Licenciatura de Engenharia Informática 140

165 Figura A caixa de diálogo Document Properties Por defeito os filmes de Flash estão afixados a uma resolução de 550 pixels em largura por 400 pixels em altura. Estas dimensões servem perfeitamente para uma resolução de 640x480 dentro de um browser. Porém, é livre para criar os seus filmes de Flash com qualquer dimensão que seja satisfatória para o seu projecto. Para manter o seu ficheiro a um tamanho mínimo, deve modificar os bitmaps, de forma a que as dimensões destes não sejam maiores do que as dimensões do filme. Além de que, deveria certificar-se que reduz a resolução de pixel das imagens criadas a resoluções mais altas quando manipula os bitmaps para o Flash. A PROFUNDIDADE DA COR Quando produz os filmes de Flash, já terá tomado uma decisão sobre a profundidade da cor, seja esta de 8-bits, 16-bits, ou 24-bits. Se produzir uma exibição de 8-bits, deve aplicar a palette de cor apropriada aos bitmaps. COMPRESSÃO Uma vez que o bitmap é importado para o Flash, existe a possibilidade de aplicar compressão a este para aperfeiçoar o tamanho de ficheiro. Além disso, se exportar uma imagem como um JPEG, pode fixar as opções de compressão para o JPEG antes de importar esta para o Flash. Uma vez importado para o Flash, pode designar que aquele Flash usa as colocações de compressão da imagem. 2. IMPORTAÇÃO DE BITMAPS PARA O FLASH Para importar um bitmap para o Flash, seleccione File/Import. Aparecerá uma caixa de diálogo de Importação. Procure o ficheiro que deseja importar e faça {Duplo-Clique} neste para importar o ficheiro para o Flash. Licenciatura de Engenharia Informática 141

166 Figura Seleccione o arquivo que você quer importar em Flash. O bitmap é colocado no Palco no Estado Agrupado e na Biblioteca. Note que na Biblioteca, o nome do ficheiro aparece ao lado do ícone árvore, indicando que é um bitmap. Figura Os bitmaps são colocados no Palco quando importados Figura O carro também é inserido na Biblioteca A primeira coisa que deveria fazer era afixar o nível de compressão. 3. AFIXAR A COMPRESSÃO Para afixar o nível de compressão de um bitmap, {Clique-Direito} com o rato no bitmap na Biblioteca e seleccione Properties... Licenciatura de Engenharia Informática 142

167 Figura menu de contexto sensível Aparecerá a caixa de diálogo de Bitmap Properties. Figura A caixa de diálogo Bitmap Properties PHOTO(JPEG) Por defeito, o método de compressão é o Photo (JPEG). Tem a opção para usar compressão embutida no ficheiro JPEG, seleccionando a combobox Use imported JPEG data, ou fixar os seus próprios valores de compressão, retira a selecção da combobox Use imported JPEG data. Quando não seleccionada a combobox aparece o Licenciatura de Engenharia Informática 143

168 controle da qualidade. Introduza um valor de 1 a 100. Um baixo valor aumenta a compressão e degrada a qualidade de imagem; um valor alto diminui o nível de compressão e retém a qualidade de imagem. Figura Uma qualidade afixada a 50 Para testar as suas definições de compressão {Clique} o botão Test. Um relatório aparecerá no fundo da caixa de diálogo, comparando o tamanho original da imagem (em termos de kilobytes) com o tamanho da imagem com as definições de compressão actuais. Figura Relatório da compressão Pode mover a imagem na Janela de Pré-visualização para visualizar o nível de compressão actual. LOSSLESS (PNG/GIF) O segundo método de compressão é o Lossless (PNG/GIF). Use este método para bitmaps que contêm cores contínuas e formas definidas. Este método de compressão não é tão eficiente quanto o método Foto (JPEG), mas nunca há uma perda de qualidade de imagem. ACTUALIZANDO IMAGENS {Clique} no botão Import... para importar outra imagem, de modo a substituir a existente. Depois {Clique} em Update para efectuar a mudança. O bitmap será actualizado ao longo do filme de Flash. Licenciatura de Engenharia Informática 144

169 4. EDIÇÃO DE BITMAPS Os bitmaps são importados directamente para o Estado Agrupado. No Estado Agrupado, os bitmaps podem ser redimensionados e rodados. Pode ainda, converter as imagens em Símbolo e usar as Propriedades de Instâncias, da mesma forma como usa com as imagens regulares do Flash. Também pode separar as imagens em partes e usar a opção Varinha Mágica da Ferramenta Laço para seleccionar tonalidades particulares do bitmap. Figura Opções da Ferramenta Laço {Clique} na opção Propriedades da Varinha Mágica para afixar a gama de cor que a Varinha Mágica seleccionará ao {Clicar} numa secção do bitmap (lembre-se que o bitmap deve ser separado) e para designar o grau de suavização das extremidades da selecção. Figura A caixa de diálogo Migic Wand Settings O Threshold fixa a gama da selecção. Por exemplo, um valor 10, quando usamos a Varinha Mágica nas rodas do carro (couro preto), a cor preta em que se {Clica} tornase a base da selecção. O Threshold fixa a possível gama de cores semelhantes adjacente para a cor seleccionada que também serão seleccionadas. Valores baixos de Threshold só seleccionarão a cor idêntica à escolhida em redor da cor escolhida. Um valor mais alto incluirá cores que são semelhantes, mas numa maior gama, de puro preto para outras cores escuras, como marrom ou azul escuro. Seleccione Pixels, Roudh, Normal, e Smooth para controlar a suavização da extremidade da selecção. 5. USAR BITMAPS COMO PREENCHIMENTOS Para usar um bitmap como um preenchimento (para usar com a Ferramenta Balde de Tinta ou Pincel), separe o bitmap em partes e {Clique} neste com a Ferramenta Contagotas. Quando usa a Ferramenta Pincel ou Balde de Tinta nas formas de preenchimento, a cor de preenchimento é o próprio bitmap. Licenciatura de Engenharia Informática 145

170 Figura Forma pitada coma Ferramenta Pincel com um preenchimento bitmap. Figura Forma circular com um preenchimento bitmap 6. CONVERSÃO DE BITMAPS PARA FORMAS (VECTORES) Também existe a possibilidade de converter um bitmap numa forma no Flash. O bitmap deve estar no estado original da importação. Seleccione Modify/Trace Bitmap. Aparecerá a caixa de diálogo Trace Bitmap. Figura Há várias opções, inclusive Color, Área Mínima, Ajuste de Curva, e Limiar de Canto. COLOR THRESHOLD A Color Threshold (numa gama de 1 a 500) afixa a quantidade possível de cores que serão produzidas na conversão. Quanto mais baixo for o valor mais cores serão produzidas. MINIMUM AREA A Minimum Area (numa gama de 1 a 1000) afixa o número de pixels circunvizinhos que considerou ao nomear uma cor a um pixel. Quanto mais baixo for o número, maior a quantidade de cores. CURVE FIT O Curve Fit determina a suavidade dos esboços desenhados durante a conversão. Seleccione Pixels, Very Tight, Tight, Normal, Smooth, ou Very Smooth. Licenciatura de Engenharia Informática 146

171 CORNER THRESHOLD O Corner Threshold determina se extremidades afiadas no bitmap são retidas ou suavizadas. Seleccione Many Corners, Normal, ou Few Corners. Para adquirir uma visão real de como estes valores de trace trabalham, o melhor é experimentar diversos valores e ver os resultados. Figura Estas configurações produzem o seguinte resultado Figura o resultado das configurações 7. IMPORTAÇÃO DE IMAGENS VECTORES O Flash pode importar uma variedade de formatos de vector. Quando importa ficheiros de vector, os ficheiros agrupam os traços e os preenchimentos. Pode dividi-los separadamente e manipula-los como o desejar, pode também converte-los em Símbolos e usar as suas Instâncias no filme. Para importar uma imagem de vector, seleccione File/Import. Aparecerá uma caixa de diálogo de Importação. Faça {Duplo-Clique} no ficheiro que deseja importar para o Flash. O ficheiro será agrupado, e, dependendo do ficheiro de origem, cada parte da imagem pode ser separada em camadas. Licenciatura de Engenharia Informática 147

172 Figura Uma imagem vector Figura A imagem consiste em quatro camadas, representadas na Timeline Cada grupo é essencialmente uma colecção de formas que estão agrupadas. Se deslocarmos cada grupo para longe de outro, verificamos que a imagem é composta por quatro grupos distintos. Figura Composição da imagem Pode separar cada grupo se assim o desejar, ou criar um Símbolo de cada forma agrupada, ou ainda, criar um Símbolo que consiste em todas as formas agrupadas. A escolha é sua. Pois pode pensar que manter as imagens em Símbolos separados aumenta a sua flexibilidade. Além disso, pode separar cada grupo e modificar a forma, se assim desejar. Licenciatura de Engenharia Informática 148

173 8. EXERCÍCIOS Exercício 1 Crie um novo ficheiro de Flash. Importe o ficheiro car.jpg e experimente as várias opções de compressão, pré-visualize o ficheiro.swf para ver a qualidade de compressão. Converta num Símbolo e tente alterar algumas das Propriedades da Instância no bitmap para ver as diferencias de aplicação nas mesmas Propriedades da Instância em imagens baseadas em vector. Exercício 2 Crie um novo ficheiro de Flash. Importe o ficheiro fish.jpg e tente converter este bitmap numa imagem de vector, que use a função Trace Bitmap. Experimente diferentes valores para o Trace Bitmap até produzir uma versão de imagem satisfatória. Exercício 3 Crie um novo ficheiro de Flash. Faça experiências com as restantes imagens, warning.jpg e flowers.jpg. Se usar um bitmap edite este num programa como Adobe Photoshop, Macromedia Fireworks, ou outros, tente usar alguns dos seus próprios bitmaps no Flash. Exercício 4 Crie um novo ficheiro de Flash. Importe o ficheiro crest.ai. Note como cada elemento da imagem está no Estado Agrupado. Examine cada elemento para adquirir a ideia de como as imagens digitais estão geralmente compostas. Desmembre cada elemento separadamente e manipule estes com as Ferramentas de Desenho. 9. RESUMO Depois de completar este capítulo, deve ser capaz de: Preparar bitmaps para o Flash; Importar bitmaps no Flash; Aperfeiçoar bitmaps; Editar bitmaps; Converter bitmaps em vectores; Importar imagens de vector. Licenciatura de Engenharia Informática 149

174 C APÍTULO 9 - FUNDAMENTOS DO FLASH: INTRODUÇÃO À ANIMAÇÃO A animação é uma das funções principais do Flash. Porém, a animação não é um movimento simplesmente de um ponto A para um ponto B. Há vários factores a considerar na criação de animações. Neste capítulo será revisado o básico da animação e apresentada a Timeline do Flash, de modo a se poder criar as animações mais tradicionais. Objectivos: Após a conclusão deste capítulo, deverá ser capaz de: 1. Entender o Básico da Animação; 2. Entender os Conceitos Narrativos. 1. O BÁSICO DA ANIMAÇÃO A animação tradicional envolve uma série de imagens, normalmente pintadas ou traçadas, exibidas numa sequência rápida. Devido aos receptores da nossa retina requerem tempo de recuperação, não se consegue distinguir individualmente cada imagem da sequência de imagens, o que cria uma ilusão de movimento. No filme, cada imagem é chamada de frame. Como resultado, a taxa à qual cada frame é exibida está medida em frames por segundo (fps). Os filmes têm uma exibição de 24 frames por segundo. os videoteipes e a televisão uma exibição de 30 frames por segundo. Tanto os filmes como os vídeos afixaram velocidades de projecção. Com o Flash, também se pode afixar a velocidade de projecção. As velocidades de projecção mais altas resultam em animações mais suaves, mas também requerem mais poder de processamento. KEY FRAMES E IN-BETWEENING FRAMES A animação é uma tarefa elaborada. Um filme animado, representado por 24 fps, com uma duração total de 90 minutos, exige frames individuais desenhadas e pintadas. Para facilitar a produção, existe o animador Key Frame e In-betweening Frame. KEY FRAMES As Key Frames são frames que actuam como pontos de referência, ilustrando normalmente um evento principal no tempo. Por exemplo, na criação da animação de um corredor que pratica uma prova de 100 metros, poderia ter as seguintes Key Frames: Key Farme 1: Alongamento do corredor; Key Farme 2: Corredor em posição de partida; Key Farme 3: Corredor a correr em passo largo; Licenciatura de Engenharia Informática 150

175 Key Farme 4: Corredor a cruzar a linha de meta. Se a sequência inteira dura 15 segundos (a uma velocidade de projecção de 24fps), precisaremos obviamente mais do que quatro frames para a animação (360 frames no total). É aqui que entra os In-betweening Frames. Figura Key Frame 1: O corredor faz alongamentos antes de posicionar-se para a partida Figura Key Frame 2: O corredor posicionou-se para a partida Figura Key Frame 3: O corredor sai da posição de partida Figura Key Frame: O corredor cruza a linha da meta IN-BETWEENING FRAMES Os In-betweening Frames são as frames de imagens entre as Key Frames. Por exemplo, tem que existir uma transição da posição do corredor da Key Frame 2 para a posição do corredor da Key Frame 3. Este processo é chamado de In-betweening, no Flash é chamado por Tweening. Felizmente, na maioria dos casos, pode somente desenhar as Key Frames, pois o Flash tem a capacidade de completar o desenho com os In-betweening. MOVIMENTO Se pensar no mundo real, cada objecto, seja ele inanimado (objectos sem vida) ou animado (objectos com vida), está sujeito à física do movimento. A energia, a Licenciatura de Engenharia Informática 151

176 gravidade, o impulso e a resistência são os principais factores do movimento. Quando o corredor acelera, a energia que ele gera determina a velocidade dos seus movimentos. Uma corrida pode gerar muita energia, pois a gravidade puxa as pernas do corredor para o chão e o ar que ele traspassa corta seu o impulso. Os objectos no Flash não estão sujeito às leis da físicas, mas porque as pessoas vêem movimentos que estão sujeitos à física, a criação efectiva de animação envolve a simulação ou a imitação das leis da física. Com animação por computador, é fácil ter símbolos a moverem-se de um ponto A para um ponto B em movimento constante, o que significa que o objecto em movimento produz uma velocidade desde o momento em que se move até ao momento em que pára. Porque as pessoas estão habituadas a movimentos naturais (movimentos sujeito à físicas), reagem bem às animações que também seguem as leis da físicas, ou que pelo menos dão uma impressão do uso do factor da física. O grau da simulação das leis da física na animação é variável, dependendo do tipo de animação a desenvolver, mas até mesmo as coisas mais simples, como os botões animados, beneficiam de uma animação realista. Além disso, através da visualização de como as pessoas se movimentam pelas ruas pode-se tirar algumas conclusões, como por exemplo, sobre o seu humor e até sobre a sua personalidade, dependendo da forma como estas caminham. Uma pessoa que caminha muito lentamente, com uma postura pobre, arrastando os pés pode ser um exemplo de uma pessoa muito cansada, ou talvez desmotivada. Por contraste, uma pessoa que caminha rapidamente com uma postura recta pode ser enérgica, apressada ou entusiástica. Indiferentemente, o movimento é um idioma que você pode usar para comunicar com seus espectadores. Se pensar mais uma vez no nosso corredor, pode-se dizer que ele estará a correr contra outros corredores. Cada corredor move-se de um modo particular, do mais rápido para o mais lento. Quando o vencedor cruzar a linha da meta e quebra a fita, a fita também se move. Primeiro estica, quebra e por fim cai ao chão. Ao dar passos variáveis aos diferentes Símbolos nas animações de Flash irá aumentar o efeito. Veja os ficheiros constant.swf, easein.swf e easeout.swf e repare na diferença dos movimentos de cada exemplo. 2. CONCEITOS NARRATIVOS O movimento é só uma parte da animação. Além de poder simular movimentos naturais, também pode empregar várias técnicas narrativas que os animadores e os directores desenvolveram a contar uma história ou a comunicar com a audiência. Até mesmo se não criar uma animação narrativa tradicional (caricaturas), mas só as interfaces, ainda assim terá que comunicar com seus espectadores. Lembre-se de alguns dos conceitos narrativos mais comuns que podem aumentar o seu trabalho e o efeito que está usar nos seus espectadores. COMPOSIÇÃO A narração dentro do Flash é feita no Palco, é neste que se organiza o conteúdo; ou melhor a sua arte. A composição do seu conteúdo pode afectar a percepção da sua animação e a maneira como comunica com a sua audiência. Licenciatura de Engenharia Informática 152

177 O nosso primeiro instinto é colocar o foco de atenção no centro da frame; pensando inconsciente que quando vemos algo, olhamos directamente para o centro. Porém, se isso acontece, trocaríamos simplesmente os olhos, na verdade vemos o que está directamente na nossa linha de visão. Assim, quando coloca o conteúdo no centro da frame, torna o seu filme um pouco artificial e consequentemente, os espectadores não respondem da melhor forma. O mundo real não é centrado. É verdade que não estamos a criar um mundo real quando criamos animações, é realmente uma construção completamente artificial, no entanto, quando o conteúdo está centrado numa composição, os resultados são mecânicos. Ao criar um pedaço narrativo, ou um plano para uma interface, deverá evitar colocar os conteúdos directamente no centro do Palco. O conteúdo ou o foco da composição deverá estar fora do centro, normalmente distribuído pelas partes, compostas por um terço de distância, que completam a frame. Figura O Palco contém linhas imaginárias aproximadamente um terço do espaço. Deverá colocar os objectos que deseja que os espectadores foquem nestas partes da frame. Figura A antena no centro do Palco. A composição não é como efectiva A divisão clássica do Palco é horizontal, mas também pode ser dividido verticalmente. Licenciatura de Engenharia Informática 153

178 Figura Divisão Clássica horizontal do Palco em três partes Note a disposição do texto. O texto encontra-se distribuído pelas três áreas horizontais. Note, ainda o centro do relógio está disposto verticalmente. Figura Utilização das 2 divisões, vertical e horizontal 3. PERSPECTIVA O Flash é uma aplicação de animação bidimensional, o que significa que temos o eixo dos xx e o eixo dos yy, mas não temos o eixo dos zz. O Palco é uma superfície plana. Qualquer impressão de uma 3ª dimensão deve ser criada usando técnicas de perspectiva quando cria os objectos e os anima. Licenciatura de Engenharia Informática 154

179 Figura O Palco é dividido em dois eixos, o eixo dos xx (horizontal) e o eixo dos yy (vertical) Nenhum objecto tem uma profundidade real, como no mundo real, ou como em aplicações que simulam ambientes de 3D. No mundo real, temos o eixo dos zz que dá a profundidade dos objectos. Figura No mundo real e em programas de animação de 3D, há um eixo do z que nos dá a profundidade dos objectos O ambiente de trabalho das aplicações de 3D provê visões múltiplas de cada forma, ao longo dos eixos dos xx, yy e zz. Além disso, estas aplicações simulam uma iluminação com precisão. Licenciatura de Engenharia Informática 155

180 Figura Numa aplicação de 3D, o modelo de uma molécula pode ser visto ao longo dos três eixos Quando um modelo é feito (traduzido de um ambiente que simula 3D para uma tela bidimensional) podemos ver a sua profundidade. A combinação da iluminação e da distância das partes dos objectos ilustram a profundidade na imagem. Figura Note o sombreado, produzido pelos efeitos de luz, que dão a noção de profundidade do modelo O Flash apesar de não ter modelos com profundidade, tem diversas formas sem profundidade. Além disso, o Flash não simula os efeitos de iluminação. A profundidade é normalmente indicada por sombreamento e dimensão. Para dar profundidade aos filmes de Flash, é necessário que simule o efeito. Para isso, é importante que esteja familiarizado com os fundamentos de desenho em perspectiva. Licenciatura de Engenharia Informática 156

181 A GRADE DE PERSPECTIVA Quando tentar simular uma perspectiva, lembre-se da Grade de Perspectiva. A grade consiste em vários componentes, linha do horizonte, ponto de desaparecimento, ortogonais, verticais, e horizontais. Figura Grade de Perspectiva LINHA DO HORIZONTE A Linha do Horizonte é onde o céu parece-se conectar com o chão. A Linha do Horizonte está nivelada com a linha de visão do espectador. Esta corre horizontalmente pela Grade de Perspectiva. Os topos dos objectos inferiores à Linha do Horizonte são visíveis para o espectador, enquanto os topos dos objectos sobre a Linha do Horizonte não são visíveis. PONTO DE DESAPARECIMENTO O Ponto de Desaparecimento está sempre na Linha do Horizonte e está directamente na linha de visão do espectador. Tal como olha para o Ponto de Desaparecimento, qualquer objecto que esteja visível antes da Linha do Horizonte e que se estenda por esta dá a sensação que vai desaparecer. O exemplo mais famoso é as linhas de um comboio ou uma estrada. Se estiver numa estrada e olhar para o seu comprimento, as extremidades da estrada parecem unir-se ao longe, onde estas convergem e desaparecem. ORTOGONAIS As Ortogonais são as linhas paralelas que retrocedem na distância, convergindo para o Ponto de Desaparecimento na Linha do Horizonte. Se pensar numa estrada, as extremidades da estrada correm paralelamente uma a outra e parecem unir-se ao longe, onde estas convergem e desaparecem. As Ortogonais representam efectivamente o eixo dos zz. Licenciatura de Engenharia Informática 157

182 HORIZONTAIS As Horizontais são linhas que correm horizontalmente (o eixo dos xx) pela Grade de Perspectiva, tal como a Linha do Horizonte. A linha Horizontal mais próxima do Ponto de Desaparecimento é a que tem menor comprimento. VERTICAIS As Verticais são linhas que correm verticalmente (o eixo dos yy) pela Grade de Perspectiva. A linha Vertical mais próxima do Ponto de Desaparecimento é a tem menor comprimento. Uma linha vertical também corre pelo Palco inteiro, convergindo para o Ponto de Desaparecimento. O lado esquerdo de qualquer objecto que esteja à esquerda desta linha é visível. Reciprocamente, o lado direito de qualquer objecto que esteja à direita desta linha é visível. Figura Quatro caixas à mesma distância. Note como os topos das caixas debaixo da Linha do Horizonte estão visíveis e que os fundos das caixas sobre a Linha do Horizonte também estão visíveis Figura Quatro caixas a diferentes distâncias. Note que a dimensão de duas caixas é menor que as outras (que são iguais). A diferença das dimensões e das colocações das caixas cria a ilusão de profundidade No Flash, a simulação da perspectiva faz-se com alterações nas dimensões e sombreamento. Por exemplo, a colocação de três Instâncias de uma imagem no Palco e redimensionando cada uma numa escala de grande dimensão para pequena dimensão, cria a ilusão de profundidade num Palco bidimensional. Licenciatura de Engenharia Informática 158

183 Figura Exemplo de profundidade em Flash O Sombreamento, principalmente com gradientes, pode produzir a ilusão de profundidade. Por exemplo, compare uma forma de cor sólida sombreada, com uma forma de cor gradient sombreada. Figura Combinação de duas formas (círculos e rectângulos). As diferentes dimensões dos círculos e dos comprimentos dos rectângulos conseguem criar uma pequena noção de profundidade Figura A mesma combinação das formas. Só que as formas estão pintadas a gradiente, de modo a produzir o efeito de luz. O que produz uma maior noção de uma forte profundidade Abra o ficheiro perspective.fla para experimentar a Grade de Perspectiva. 4. MOVIMENTO DE CÂMARA Além do movimento dos objectos dentro da frame, pode também mover a própria frame, ou melhor a câmara. No Flash, para se simular o movimento da câmara, move as Instâncias no Palco. Licenciatura de Engenharia Informática 159

184 PANNING O Panning é a rotação da câmara de esquerda para a direita ou vice-versa. A câmara move-se ou roda em torno de um ponto fixo. A lente da câmara torna-se o conteúdo do Palco. Por exemplo, os limites de uma montanha poderiam ser deslocados da esquerda para a direita e novamente para trás. No Palco, visualizaria os limites da montanha a passar. Este tipo de efeito estabelece uma percepção de investigação e exploração da audiência, e é frequentemente usado para estabelecer um ambiente dentro do qual ocorrem eventos particulares. Figura Como a movimentação da câmara da esquerda para a direita, o conteúdo (os limites de uma montanha) entra no plano de visão e depois sai fora do plano de visão. Veja o ficheiro panning.swf. TRACKING O Traking é o movimento horizontal da câmara. A câmara move-se de um ponto para outro, frequentemente num arrasto. Porque o Flash é um programa bidimensional, o panning não é realmente possível (teria que simular a mudança em perspectiva), o que pode fazer é utilizar a técnica do Tracking. Licenciatura de Engenharia Informática 160

185 Figura Como os movimentos da câmara (arrasto) da esquerda para a direita, o conteúdo (os limites de uma montanha) entra no plano de visão e depois sai fora do plano de visão Veja o ficheiro tracking.swf. TILTING O Tilting é o movimento da câmara para cima e para baixo (plano vertical). Novamente, porque o Flash não é um programa tridimensional, seria necessário simular o efeito de toldo, onde o topo e o fundo do conteúdo seriam em perspectiva menores do que o centro, devido à mudança. Porém, pode mover a câmara para cima e para baixo. Figura A câmara sofre uma inclinação do fundo para o topo do conteúdo Licenciatura de Engenharia Informática 161

186 Veja o ficheiro tilt.swf. ZOOM A diminuição da visualização é semelhante à movimentação da câmara para longe do conteúdo. Porém, o que de facto acontece é a modificação do comprimento focal da lente, de modo a aumentar ou diminuir o conteúdo. Esta técnica tem vários usos, incluindo para realçar um elemento particular numa composição visual, ilustrando o estado da mente de uma pessoa (um zoom rápido para um determinado conteúdo) e muitos outros, numerosos efeitos. Além disso, no Flash, o efeito é normalmente usado para simular a perspectiva. Figura O comprimento focal das mudanças da câmara. A diminuição do Zoom, revela a face da pessoa Veja o ficheiro zoom.swf. 5. EDIÇÃO O processo edição é um de contraste, transição, passagem e composição. Um filme ou uma animação, é uma colecção de cenas. Um cena é uma sucessão contínua, não interrompida de frames. O processo de edição é o processo de juntar múltiplas cenas para criar uma série de sequências relacionadas (ou sem conexão). Quando uma cena substitui outra, ocorre uma transição. A transição mais comum é o corte onde uma cena é seguida imediatamente por outra, como uma cena de uma pessoa que está a falar ao telefone, seguida por uma cena de outra pessoa do outro lado da linha. Esta sequência vai colocar a imagem de ambas as pessoas na mente do espectador. Há uma variedade de transições, como a técnica de dissolver (uma cena enfraquece gradualmente perante outra), o deslize (uma cena é apagada pela próxima) e outras técnicas. Além disso, a combinação das passagens das transições, junto com a composição de cada cena e a narrativa implícita das cenas produz um efeito particular. Por exemplo, uma série de Licenciatura de Engenharia Informática 162

187 cortes rápidos pode criar a impressão de urgência e tensão. As cenas que se prolongam em termos de duração e as transições suaves das cenas (a técnica de dissolver) pode dar a impressão de relaxamento e pensamento. Há numerosas possibilidades que estão para além da extensão deste curso. Com a continuação do uso do Flash, ficará sensível ao movimento em geral e ao movimento, em particular, da animação, como também à composição, ao movimento da câmara e às técnicas de edição. 6. REVISÃO 1. O que é a Persistência da Visão? 2. O que são as Key Frames e as In-betweening Frames? 3. Quais são os factores que efectuam um movimento natural? 4. Na composição, é melhor centrar o seu conteúdo (o que deseja focar) ou colocar este noutro lugar da frame? 5. Na Grade de Perspectiva, o que é as ortogonais? 6. Quais são os movimentos comuns de câmara? 7. O que é uma cena? 7. RESUMO Depois de completar este capítulo, deve ser capaz de: Entender o Básico da Animação; Entender os Conceitos Narrativos. Licenciatura de Engenharia Informática 163

188 C APÍTULO 10 - FUNDAMENTOS DO FLASH: TIMELINE A Timeline é a ferramenta usada para reunir as animações no Flash. Para isso, pode-se usar uma variedade de métodos. Em cada método, usa-se as key frames e frequentemente, também as in-between frames. Neste capítulo será detalhada a Timeline, como também os métodos usados para criar as tradicionais animações, frame por frame. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Usar a Timeline; 2. Criar Key Frames; 3. Criar In-between Frames; 4. Usar os Controles de Transparência. 1. TIMELINE As animações são reunidas ou criadas com a Timeline. A Timeline consiste em Layers. Cada Layer contém várias frames, a quantidade de frames é determinada pelo filme que pretende criar. Cada Layer pode ser descrita como uma tira de filme transparente (como um acetato colocado no retroprojector). Em cada tira de filme são animadas individualmente as Instâncias. Logo, são criadas múltiplas Layers, onde cada Layer contém uma só Instância. Devido a cada Layer ser efectivamente transparente, o conteúdo desta, quando visto no Placo cria uma imagem composta e em movimento, ou seja, uma animação composta. Uma imagem composta é simplesmente uma imagem criada por uma única imagem ou por uma imagem composta por vários objectos de imagens diferentes. Por exemplo, o logotipo fictício flash, abaixo apresentado, é composto por sete elementos, cada um numa Layer diferente. Figura Logotipo fictício Mantendo cada aspecto da imagem numa Layer diferente aumenta ao máximo a sua flexibilidade. Permitindo mudar o conteúdo da Layer, e assim, mudar a natureza da imagem. Além disso, pode mudar a cor e posicionar separadamente dos restantes elementos da imagem, como também mudar a dimensão, a colocação e a orientação. Licenciatura de Engenharia Informática 164

189 Assim, ao animar a imagem, tem a possibilidade de isolar e controlar por completo cada elemento da animação. Necessitará de quebrar os elementos de uma colecção de unidades separadas que formam um todo. Com a continuação do uso do Flash ou de qualquer outro programa de animação, começará a pensar primeiro nas coisas como um todo e só depois nos diversos elementos, que formam o todo. A criação de uma animação requer planeamento e um trabalho organizado, ganhando tempo na produção. Se examinarmos cada Layer do logotipo individualmente, poderemos visualizar todas as partes que o formam. Figura Destaque do rabo do tubarão Figura Destaque da barbatana do rabo do tubarão Figura Olho do tubarão Figura Corpo do tubarão Figura Texto flash Figura Pequeno charco Figura Grande charco Figura Imagem final Neste caso, as imagens de charco foram criadas através da mesma Instância. Para este logotipo foi necessário seis Instâncias. Examinemos a própria Timeline. Abra o ficheiro composite.fla para ver o exemplo acima. ELEMENTOS DA TIMELINE A Timeline consiste em vários controles, usados para criar e animar arte. Licenciatura de Engenharia Informática 165

190 Figura A Timeline (Elementos) GESTÃO DE LAYERS Por defeito, o Flash exibe uma Layer chamada Layer 1. É boa política dar um nome a cada Layer de acordo com o seu conteúdo. Para nomear as Layers, basta fazer {Duplo- Clique} no rótulo da Layer e introduzir um novo nome. NOVA LAYER Ao usar as Instâncias para construir animações, é necessário adicionar uma Layer para cada Instância animada. Para adicionar uma nova Layer; {Clique} no ícone Adicionar Layer e uma nova Layer é adiciona. Deve nomear a Layer adequadamente. GUIA DE MOVIMENTO Há dois tipos de animações especializadas, o Guia de Movimento e a Mascara. Estas são usadas, normalmente para criar efeitos especializados de animação, estes efeitos estão descritos mais à frente. Para usar as Guias, {Clique} no ícone Adicionar Guia de Movimento para adicionar uma Layer, cujo o seu conteúdo age como uma guia de animação. PASTA DE LAYER Usa-se as Pastas para organizar e gerir as Layers. Para criar Pastas de Layer, {Clique} no ícone Inserir Pasta de Layer APAGAR LAYER Para remover uma Layer da Timeline, seleccione a respectiva Layer e {Clique}no ícone Apagar Layer. MOSTRAR/OCULTAR LAYER Ao construir as animações, pode querer ocultar os conteúdos de uma Layer ou de múltiplas Layers, para o ajudar a editar as animações. Seleccione a Layer que deseja Licenciatura de Engenharia Informática 166

191 ocultar e {Clique} no ponto da coluna Mostrar/Ocultar da Layer. Um x vermelho aparecerá, indicando que a Layer está oculta. O conteúdo da Layer é ocultado no Palco. Para tornar a Layer novamente visível {Clique} no x vermelho. Figura Mostrar/Ocultar Layer Alternadamente, pode ocultar ou mostrar todas as Layers, {Clicando} no ícone Mostrar/Ocultar. BLOQUEAR/DESBLOQUEAR AS LAYERS Na construção de animações, pode necessitar de bloquear o conteúdo de uma ou mais Layers, para prevenir que o conteúdo seja acidentalmente seleccionando e/ou movido. Seleccione a Layer que deseja bloquear e {Clique} no ponto da coluna Bloquear/Desbloquear da Layer. Aparecerá um aloquete, indicando que a Layer está bloqueada. Não poderá mover ou editar o conteúdo de uma Layer bloqueada. Para desbloquear uma Layer {Clique} no aloquete. Figura Bloquear/Desbloquear Layer MOSTRAR LAYERS COMO CONTORNOS Na construção de animações, pode definir Instâncias com um Alfa de 0%, tornando estas invisíveis. Quando o conteúdo não é visível torna-se difícil editar as animações. Ao {Clicar} no quadrado da coluna Mostrar as Layers como Contornos faz com que o conteúdo da Layer seja exibido como um esboço visível, mesmo quando as Instâncias estão definidas com um Alfa de 0%. O esboço é da mesma cor do quadrado da Layer. Figura Esta Instância com o valor de alfa a 100% é invisível quando o valor de Alfa é de 0% Figura Mostrar Layers como Contornos Licenciatura de Engenharia Informática 167

192 2. CRIAÇÃO DE ANIMAÇÕES COM A TIMELINE Uma vez criados os Símbolos para o seu filme de Flash, deverá remove-los do Palco (não os perderá, já que estes estão armazenados na Biblioteca). Use a Timeline para animar as Instâncias de cada Símbolo. Na animação de Instâncias deve limitar uma Instância por Layer (mas há excepções a esta regra que será depois abrangida). A primeira coisa que deve fazer é criar uma nova Layer para a Instância que deseja animar. Por defeito, é colocada uma key frame em branco na primeira frame da Layer. As key frames brancas parecem-se com caixas com um circulo sem preenchimento. Figura Timeline com uma key frame em branco Se desejar começar a sua animação logo na primeira frame, arraste simplesmente uma Instância sobre o Palco. As key frames mudam de uma caixa com um circulo sem preenchimento para uma caixa com um círculo com preenchimento, indicando que neste momento existe uma Instância no Palco dentro desta Layer. Figura Timeline com uma key frame com conteúdo É uma excelente política dar um nome adequado às Layers, de modo a ser possível saber qual o conteúdo que a Layer contém. Neste caso, arrastamos sobre o Palco uma Instância do Símbolo bola e nomeamos a Layer de bola, fazendo {Duplo-Clique} no nome existente da Layer e introduzindo um novo nome. Licenciatura de Engenharia Informática 168

193 Figura Timeline com Layer de nome bola KEY FRAMES NO FLASH Quando criar uma key frame no Flash, esta mantém vestígios das várias propriedades da Instância, que incluem: A Instância e o Símbolo em que a Instância é baseada; A localização da Instância no Palco (as coordenadas x e y, o ponto do centro da Instância relativamente ao topo, canto esquerdo do Palco); A dimensão da Instância relativamente à dimensão original do Símbolo; As dimensões da Instância em termos de Largura e Altura; O valor de Rotação da Instância; Qualquer Propriedade da Instância que foi aplicada à Instância como o Brilho, Tonalidade, Alfa e Avançado. O Flash usa a informação das key frames para instruir o computador que está a desenhar, como também para calcular a informação relativa às in-between frames. Neste momento, dependendo do tipo de animação que está a criar, pode animar a Instância de diferentes modos. A nossa animação consiste numa bola que salta de fora do Palco (lado esquerdo) para o fora do Palco (lado direito). A primeira coisa que devemos fazer, antes de começar a construir uma animação, é definir os parâmetros do filme de Flash, particularmente a velocidade de projecção (fps), as dimensões e a cor do Palco. Se desejar seguir o exemplo, seleccione File/New do menu para começar um novo filme de Flash. 3. PROPRIEDADES DO FILME Seleccione Modify/Document do menu principal. A caixa de diálogo Document Properties aparecerá. É essencial definir os parâmetros do filme de Flash antes de criar as animações. Por defeito, o Palco está definido com um fundo branco, 550 pixels de largura e 400 pixels de altura, e uma projecção de12 frames por segundo. Licenciatura de Engenharia Informática 169

194 Figura A caixa de diálogo Document Properties VELOCIDADE DE PROJECÇÃO Fixe a velocidade de projecção a um mínimo de 12 (fps). Lembre-se de que quanto maior a velocidade de projecção, o maior o poder de processamento requer. Se achar que 12 fps é muito lento (a animação não é suave), tente uma gama entre 15 a 24 fps. Ao criar as animações, encontrará a velocidade de projecção adequada ao seu estilo de animações. DIMENSÕES As dimensões do Palco, por defeito, são de 550 pixels de largura por 400 pixels de altura, normalmente usado para uma exibição de 640 x 480. Porém, muitos sites web são uma mistura de Flash com o tradicional HTML, assim sendo, nem sempre desenvolverá filmes que pretendem encher a janela inteira do browser. Dependendo do tipo de filme que está a criar, deve introduzir as dimensões apropriadas. COR DE FUNDO Seleccione uma cor de fundo para seu filme. Mais à frente será abordada a criação de uma cor de fundo transparente para a web. TORNAR PADRÃO {Clique} no botão Save Default para guardar as definições como definições por defeito, sempre que usa o Flash. UNIDADES DA RÉGUA Seleccione na opção Ruler Units Inches, Inches (decimal), Points, Centimeters, Milimeters ou Pixels para designar as unidades da régua do Flash. É recomendável usar a unidade pixel, porque o pixel é a unidade nativa do seu monitor. Para activar a Régua do Flash, seleccione View/Rulers do menu principal. Licenciatura de Engenharia Informática 170

195 Figura Régua Activada Uma vez definidas as Propriedades do Filme, o próximo passo é criar os Símbolos, que usará na construção da animação. Neste caso foram criados dois Símbolos, bola (uma forma circular com preenchimento gradient), e chão (uma forma rectangular de preenchimento gradient). Iremos começar com a mais tradicional forma de animação, frame por frame. Figura Duas Instâncias, da bola e do chão. Abra o ficheiro framebyframe0001.fla para seguir o exemplo. 4. ANIMAÇÃO FRAME POR FRAME A animação de frame por frame envolve a criação individual de key frame manualmente. Por outras palavras, tem-se que criar uma key frame em cada frame, posicionar e modificar a Instância em cada frame. Ppara inserir uma nova key frame, seleccione a frame em que deseja colocar a key frame,{clique} dentro da frame. Seleccione Insert/Keyframe do menu ou pressione a tecla [F6]. O Flash duplica a key frame anterior. Na animação de frame por frame, cria-se uma sequância de key frames, uma depois da outra. Licenciatura de Engenharia Informática 171

196 Vamos começar com o Chão. Porque o Chão não se move, só precisamos de criar uma key frame e estender a gama desta por um número particular de frames, o que significa que a informação que está designada numa única key frame repete-se por um número particular de frames. O primeiro passo é arrastar uma Instância do Símbolo chão sobre o Palco e posicionar esta ao fundo do Placo. Além disso, também deve reduzir a dimensão ao longo do eixo dos yy. Figura A Instância colocada ao fundo do Palco Também deve fazer {Duplo-Clique} na Layer e dar-lhe o nome de chão. Devido a termos arrastado uma Instância para o Palco, a key frame da Layer fica preenchida. Figura Neste momento, a animação consiste numa frame Para estender a duração da animação, é necessário designar quantas frames é que a informação da primeira key frame ocupará. A nossa animação terá 30 frames em comprimento (criando uma animação que dura 1.4 segundos a 20 fps). Como o chão não se move, não precisamos de outra key frame para descrever o estado deste outro ponto do tempo, o chão é estático ao longo da animação. Para estender a gama de uma key frame, {Clique} na frame que deseja estender, neste caso concreto na frame 30, e seleccione Insert/Frame do menu ou pressione a tecla [F5]. A Timeline muda, a área depois da key frame fica cinzenta e o marcador aparece na frame 30. É preciso que aprenda ler a Timeline. Neste caso, pode-se ver que se tem uma Layer de nome chão, com uma key frame na frame 1. A informação nesta key frame repete-se pelas 30 frames. Licenciatura de Engenharia Informática 172

197 Figura A Layer chão contém uma Instância que não se move por 30 frames Frequentemente, os elementos do fundo e outros objectos permanecem estáticos numa composição, enquanto os outros elementos se movem. Pode arrastar o marcador da frame de um lado para outro, ao longo da gama de frames e visualizará no Palco o efeito provocado. O chão aparece sempre do mesmo modo ao longo do tempo. Também é boa ideia bloquear a Layer, uma vez que já se terminou de manipular o conteúdo. Isto impede-o de seleccionar e modificar por engano os conteúdos da Layer. Figura A Layer chão está bloqueada Quando arrasta o marcador de um lado para outro, pode pré-visualizar a sua animação. Neste momento, ainda nada está animado. Note que também bloqueamos a Layer. O próximo passo é criar uma nova Layer para a bola. Usaremos esta Layer para animar a bola. {Clique} no ícone Adicionar Layer. Quando cria uma nova Layer, esta é criada sobre a actual Layer seleccionada e duplica a gama de frames da Layer anterior. É boa política, dar um novo nome imediatamente à sua Layer. Neste caso, demos o nome de bola à Layer. Figura Uma nova Layer é criada. Ainda não há nada colocado no Palco nesta nova Layer, mas já tem uma gama de 30 frames, que foi copiada da Layer anterior Licenciatura de Engenharia Informática 173

198 Arraste uma Instância do Símbolo bola sobre o Palco e coloque-a perto do topo esquerdo, do lado de fora do Palco. Esta é a posição da bola no primeiro momento. Figura A posição da Instância bola Na Timeline, na Layer bola, a key frame aparece na frame 1, e a sua gama é estendida automaticamente até à frame 30. Figura A Timeline neste momento Agora, precisamos de inserir key frames nas frames 5, 10, 15, 20, 25 e 30. Para assim o fazer, {Clique} na frame 5 e seleccione depois Insert/Keyframe no menu ou pressione a tecla [F6]. Faça exactamente o mesmo para as restantes frames (10, 15, 20, 25 e 30). Quando insere uma nova key frame, o Flash reproduz a key frame anterior a esta. Neste caso, quando insere uma key frame na frame 5, a informação da key frame da frame 1 é copiada. A Instância da bola permanece, neste momento, na mesma posição em que está na frame 1. Assim, em cada uma das 7 key frames da Layer bola, a Instância bola permanece na mesma posição, com a mesma dimensão, o mesmo valor de Alfa, etc. O próximo passo é alterar a posição da Instância em cada key frame. Licenciatura de Engenharia Informática 174

199 Figura A Timeline actual É importante que perceba que não está a arrastar outra Instância do Símbolo bola da Biblioteca para o Palco. Cada key frame contém a mesma Instância, mas representa o estado da mesma Instância num tempo diferente. É um engano comum, os novatos de Flash, arrastarem múltiplas Instâncias sobre a mesma Layer. A qualquer altura, quando {Clica} numa key frame, deverá somente visualizar uma única Instância seleccionada no Palco. Presentemente, a Instância aparece na mesma posição em diferentes espaços de tempo. Agora, é necessário posicionar a Instância nos lugares apropriados em cada key frame. Para isso, {Clique} na key frame da frame 5 e desloque a Instância para o primeiro ponto de impacto no chão. Parece existir duas Instâncias da bola no Palco. Porém, recorde que em cada uma das outras key frames a Instância está posicionada no primeiro ponto. Sendo necessário {Clicar} em cada key frame sucessivamente e posicione a bola de forma adequada. Figura A posição da Instância na segunda key frame Este processo pode-se tornar difícil, já que ao {Clicar} na key frame da frame 10, não visualiza a posição da Instância na frame 5. Seria benéfico se pudesse ver simultaneamente todos os tempos da Instância. Felizmente, pode, usar os controles de Papel de Transparência do Flash. Licenciatura de Engenharia Informática 175

200 5. CONTROLES DE TRANSPARÊNCIA O Papel de Transparência é um papel extremamente fino, pelo qual se pode ver o papel de baixo. Este não é completamente transparente, mas é translúcido. Os animadores clássicos usam o Papel de Transparência para verem a frame anterior e usar esta como referência na criação da nova frame. No Flash, podemos fazer exactamente a mesma coisa, visualizando os conteúdos das frames anteriores e até mesmo das frames posteriores à frame actualmente seleccionada. Para seleccionar o Controle de Transparência, {Clique} no ícone Papel de Transparência ao fundo da Timeline. Figura Controles de Transparência Ao topo da Timeline, aparecem os Marcadores de Transparência. Figura Timeline (Marcadores de Transparência) Os Marcadores de Transparência designam a gama de frames que serão exibidas ao mesmo tempo. Para estender a gama, arraste o último dos marcadores, para assim estender às frames em que está a animar ou para estender às frames que deseja visualizar ao mesmo tempo. Quando selecciona as key frames ou frames, os marcadores tendem a moverem-se. Para prevenir isto, {Clique} no ícone Modificar Marcadores de Transparência e seleccione a opção Anchor Onion. Licenciatura de Engenharia Informática 176

201 Figura A gama dos Marcadores de Transferência estende-se até à frame30 (toda a gama desta animação). Além disso, os marcadores foram ancorados para não se moverem quando edita a animação. Depois de toda a gama de frames ter sido marcada com Marcadores de Transparência, o próximo passo será seleccionar cada key frame e colocar a Instância no lugar apropriado. Quando seleccionar uma key frame, irá arrastar a Instância de fora do Palco para o local apropriado. Assim, arraste a Instância em cada key frame para cada um dos seguintes locais. Os números sobre as Instâncias indicam a key frame, não aparecendo no próprio Palco. Figura Com o local da Instância ajustado em cada key frames e com os Marcadores de Transparência activos, pode ver simultaneamente os sete estados no tempo. Neste momento, estabelecemos os principais momentos de tempo, o impacto, o salto para cima e assim sucessivamente, terminando por rolar para fora do Palco. Por nenhum momento consideramos o padrão real de uma bola a saltar, contudo estabelecemos em cima os eventos chaves no tempo, de um modo grosseiro. Está na hora de começarmos a explorar a animação. O processo de animação envolve frequentemente a fixação do suporte básico e a exploração deste até que este adquire o aspecto correcto. Existe vários problemas com as key frames, que configuramos em cima, em termos de como Licenciatura de Engenharia Informática 177

202 uma bola salta no mudo real. Primeiro, na quinta key frame (5), a bola deveria estar a meio da altura da bola da key frame três (3), da mesma maneira que a bola da key frame três (3) deveria estar a meio da altura da bola da key frame um (1). Para explorar o local da bola da key frame cinco (5), seleccione a key frame na Timeline. A Instância aparecerá seleccionada no Palco. Mude a sua posição e faça outra mudança, bem como estabelecer o caminho básico do movimento. Use o marcador, movendo-o de um lado para o outro, para visualizar o esboço da sua animação. Pressionando a tecla [ENTER] visualizará a animação à velocidade de projecção que especificou. Para ver repetidamente toda a animação, seleccione Control/Loop Playback e o filme será reproduzido repetidamente. Pressione a tecla [ENTER] para parar e para começar a reprodução do filme. Figura A Instância é ajustada em cada uma das key frames Agora que as key frames estão feitas, é preciso criar os in-between frames. No Flash, este processo envolve a colocação de uma key farme em cada frame da animação. Assim sendo, seleccione a key frame da farme um (1) e pressione a tecla [F6] repetidamente até que as frames 2, 3 e 4 contenham key frames. As frames 2, 3 e 4 duplicarão os conteúdos da key frame na frame 1. Infelizmente, quando cria animação de frame por frame no Flash (onde todas as frames são key frames), não pode colorir as key frames particulares como se estas fossem as verdadeiras key frames na Timeline, de modo a distingui-las das outras. Porém, se seleccionar uma key frame e introduzir um Rótulo no Painel Properties, aparecerá uma espécie de bandeira antes do rótulo na própria key frame, ou simplesmente terá que se lembrar quais são (ou pode seleccionar uma key frame e olhar aonde ou em que estado está colocada a Instância para as poder distinguir). Depois de criar as key frames da frame 2 à 4 (entre na segunda key frame verdadeira), utilize o mesmo método para criar key frames entre as restantes key frames verdadeiras (da 5 à 9, da 11 à 14, da 16 à 19, da 21 à 24 e da 26 à 29). A Layer bola consistirá em 30 key frames. Licenciatura de Engenharia Informática 178

203 Figura A Layer bola consiste em 30 key frames Neste momento, tem que seleccionar cada key frame criada e trocar adequadamente a posição da Instância. É boa ideia ajustar os Marcadores de Transparência de forma a poder visualizar somente a gama de frames que necessita ajustar. Logicamente, começaríamos com as frames de 1 a 5. Figura As frames de 1 a 5 estão abrangidas pela opção Papel de Transparência Seleccione sequencialmente cada key frame, da 2 à 4, e posicione adequadamente a Instância. Ao posicionar a Instância em cada frame, deveria considerar não só a localização da bola em qualquer momento particular no tempo, como também a velocidade da bola. Por exemplo, no inicio do salto, quando a energia do salto cede à força de gravidade, a velocidade da bola irá aumentar. Lembre-se que o movimento raramente é constante. No Flash, com os Marcadores de Transparência activados pode olhar para a Instância em cada frame e para o padrão de movimento, particularmente para a proximidade da Instância a si própria no próximo e no anterior ponto de tempo. Se houver uma considerável sobreposição, a velocidade será reduzida, se houver um maior espaçamento entre as Instâncias das frames, a velocidade será alargada, porque a distância é maior. Por exemplo, em movimento constante, a Instância sobreposta em cada frame é idêntica. Figura Uma bola move-se pelo Palco, dum movimento constante Licenciatura de Engenharia Informática 179

204 Para ver melhor os padrões, pode querer {Clicar} no ícone Papel Transparente como Contornos para ver as Instâncias anteriores e posteriores como esboços (contornos). Figura A mesma bola move-se pelo Palco, dum movimento constante. A sobreposição entre as Instâncias de cada frame é exactamente do mesmo tamanho Quando a velocidade muda de um passo consistente ou rápido para um passo mais lento, as Instâncias sobrepostas em cada frame ficarão mais próximas, porque a Instância não se move para longe dentro de uma determinada quantia de tempo. Figura Instâncias num movimento inconstante (reduzindo a velocidade) A bola move-se pelo Palco. Note que do lado direito da animação, a Instância ao longo de cada frame esta cada vez fica mais próxima da Instância anterior e posterior, até que a Instância fica extremamente próxima de si mesmo ao longo do tempo. A bola reduz a velocidade para parar, tal como acontece com o corredor que reduz a velocidade depois de cruzar a linha da meta. O contrário também é verdade, se no principio a sobreposição é mais próxima e esta expande-se para o fim, a bola mover-se-á lentamente no princípio (construindo energia e impulso), aumentando a velocidade para o fim. Licenciatura de Engenharia Informática 180

205 Figura Instâncias num movimento inconstante (aumentando a velocidade) Com a velocidade da bola em queda em mente, deverá criar um padrão de movimento assemelhante ao seguinte. Figura Padrão de Movimento Agora, já estabelecemos o local da bola ao longo do tempo, tal como também a sua velocidade. Porém, ainda há alguns passos adicionais que é preciso executar para melhorar esta animação. Primeiro, temos que considerar o que acontece quando a bola bate o chão. A bola deformar-se-á, em abóbora. Logo, necessitará de mudar a dimensão ao longo do eixo dos yy, o comprimento, e ao longo do eixo dso xx, a altura, criando assim, uma forma oval deformada. Novamente, deve-se isolar a animação em partes com os Marcadores de Transparência e ajustar de forma adequada. Use a opção Dimensionar da Ferramenta Transformação Livre para espremer a bola. Abra o ficheiro framebyframe0002.fla para ver o exemplo acima. Figura Os Marcadores de Transparência abrangem as frames de 1 a 5 Licenciatura de Engenharia Informática 181

206 Figura Cada frame é ajustada, particularmente, a key frame verdadeira (a frame 5) é espremida De seguida, passe para as frames 5 à 10 e faça os ajustes necessários. Figura As frames 5 à 10 são ajustadas A última mudança que podemos efectuar é adicionar antecipação ou dilatação à bola, como se a bola fosse uma entidade consciente impetuosa para o chão. Isto adiciona vida e carácter para um evento divertido e de matéria subjectiva. É claro que isto não é realístico, mas trabalha bem e é uma técnica usada em animação em todo o mundo. Dê uma olhada na animação com a adição da dilatação. Deverá parecer muito melhor. Abra o ficheiro squash.fla para ver o exemplo acima. 6. EXERCÍCIOS Veja o ficheiro scale.swf. A bola parece que vem de longe, saltando para o espectador. Tente reproduzir esta animação. Se desejar pode usar o ficheiro framebyframe0001.fla como um ponto de partida. Se desejar, abra o ficheiro scale.fla para analisar o ficheiro de produção. Licenciatura de Engenharia Informática 182

207 7. RESUMO Depois de completar este capítulo, deve ser capaz de: Usar a Timeline; Criar Key Frames; Criar In-between Frames; Usar os Controles de Transparência. Licenciatura de Engenharia Informática 183

208 C APÍTULO 11 - FUNDAMENTOS DO FLASH: MOTION TWEENING Além da tradicional animação de frame por frame, onde se cria as key frames e as inbetween frames, o Flash suporta o tweening ou o in-betweening, onde se organiza key frames e o Flash cria automaticamente as in-between frames. Neste capítulo aprenderá a criar o Motion Tweening e a usar as Guias nas suas animações. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Usar o Motion Tweening; 2. Entender os Potenciais Problemas do Motion Tweening; 3. Usar as Opções de Atenuação; 4. Usar as Opções de Rotação; 5. Usar as Guias numa Animação Motion Tweening. 1. MOTION TWEENING O Motion Tweening é o método primário de animação no Flash. O processo de Motion tweening envolve a criação de pelo menos duas key frames numa Layer, por exemplo, uma key frame na Frame 1 e uma key frame na Frame 30, tendo o Flash de calcular e criar automaticamente as in-between frames. Se desejar, abra o ficheiro motiontween.fla e siga-o ao longo deste capítulo. Pode-se reproduzir a animação da bola a saltar usando o Motion Tweening. Tal como no capítulo anterior, cria-se uma Layer para o chão, chamada chão, e coloca-se o chão na Frame 1 numa key frame, reduz-se a dimensão ao longo do eixo dos yy, para que este assente no fundo do Palco. De seguida estende-se a key frame existente para um determinado número de frames, neste caso até à Frame 30. Parra isso, seleccione a Frame 30 na Timeline e seleccione Insert/Frame do menu ou pressione a tecla [F5]. Para o próximo passo, precisamos de adicionar uma nova Layer, para a nossa bola. Lembre-se, que é uma excelente ideia dar nomes às Layers de acordo com o seu conteúdo, assim sendo, neste caso dá-se o nome de bola à Layer. E tal como no capítulo anterior, coloca-se a Instância do Símbolo bola do lado esquerdo junto ao topo, na parte de fora do Palco. Esta é a posição da bola na primeira key frame. De seguida, precisamos de criar mais seis key frames com um intervalo de 5 frames (5, 10, 15, 20, 25 e 30). Claro que, cada uma destas key frames será uma duplicação da key frame anterior, o que significa que a Instância encontra-se no mesmo local e no mesmo estado (dimensão, alfa, etc.) em todos os pontos de tempo. É necessário seleccionar cada key frame sequencialmente e adequadamente posicionar a Instância. Licenciatura de Engenharia Informática 184

209 Figura Instâncias posicionadas adequadamente no Palco Porque é necessário dilatar a Instância nos pontos de impacto, deve editar a Instância nas key frames 2, 4 e 6. CRIAR UM MOTION TWEENING Uma vez criadas todas as key frames, e as Instancias adequadamente posicionadas, a Layer bola deveria parecer-se com: Figura Layer bola Temos uma série de 7 key frames. No Flash, quando se faz um Motion Tweening, este é construído de uma key frame para a próxima. Neste caso, será feito o Motion Tweening da key frame 1 para a key frame 5. O Flash faz uma comparação do estado da Instância na key frame da Frame 1 com o estado da Instância na key frame da Frame 5. Neste caso, mudamos a posição (as coordenadas x e y) e a dimensão (dimensão não uniforme ao longo do eixo dos yy e dos xx). O Flash compara os dois estados da Instância e cria automaticamente as in-between frames, nas quais são feitas as mudanças ou as transições de um estado para outro. Para criar o Motion Tweening, seleccione a key frame da Frame 1 na Timeline. Active o Painel Properties. Do menu pop-up Tween, seleccione a opção Motion. Figura A key frame da Frame 1 está seleccionada Licenciatura de Engenharia Informática 185

210 Figura Painel Properties. A opção Motion do menu Tween está seleccionada A Timeline mudará. A área entre as key frames da Frame 1 e 5 mudará para uma cor de malva e aparecerá uma seta que aponta de uma key frame para a próxima. Isto indica que um Motion Tweening foi anexado à key frame da Frame 1 e estende-se até à Frame 5. Figura O Motion Tweening existe entre as key frames da Frame 1 e 5 Pode usar o marcador para visualizar o efeito do Motion Tweening. Pode também utilizar os Marcadores de Transparência para visualizar simultaneamente os conteúdos da Frame 1 à Frame 5. Figura Note que a bola começa a deformar-se antes do embate no chão. E porquê? Porque o Flash compara simplesmente um estado da Instância com o estado da outra e automaticamente desenha ou melhor, faz a transição mais lógica. Neste caso, a posição e a dimensão da Instância sofreram as modificações da transição. Para prevenir uma transição na dimensão, retire a selecção da checkbox da dimensão (Scale) no Painel Properties. Por defeito, a checkbox da dimensão está seleccionada, pois na maioria dos casos, deseja-se que a dimensão da Instância seja afectada pelo tweening, tal como a posição desta. Em casos onde não pretende que haja transições na dimensão, basta retirar a selecção da checkbox da dimensão (Scale). Licenciatura de Engenharia Informática 186

211 Figura Painel Properties (Opção Scale) Figura Animação da frame 1 à 5 Com a dimensão não seleccionada, a dimensão da Instância não é alterada pelo Motion Tweening. É necessário adicionar o Motion Tweening às restantes key frames, as Frames 5, 10, 15, 20 e 25. Neste caso tem duas opções, pode retirar a selecção da dimensão (Scale) em todo o Motion Tweening para enfatizar a abóbora ou pode deixar a dimensão seleccionada de modo a permitir que a bola recupere a sua forma quando se levanta. Se arrastar o marcador por cima da animação, e examinar uma gama particular de frames com os Marcadores de Transparência, notará que o movimento é constante. Se examinar a imagem acima (frame 1 à 5), notará que o espaçamento entre cada Instância é o mesmo. Já adicionamos a abóbora, mas também precisamos de controlar o movimento, tendo a certeza que a bola reduz a velocidade na subida depois de bater no chão. Para isso, usa-se o controle de Atenuação. ATENUAÇÃO DE ENTRADA/SAÍDA Para controlar a velocidade do movimento quando utiliza o Motion Tweening use o controle de Atenuação. Existe duas hipóteses, pode Atenuar a Entrada (valores negativos) ou Atenuar a Saída (valores positivos). A Atenuação de Entrada cria uma velocidade mais lenta na primeira key frame e uma velocidade mais rápida para o fim. A Atenuação de Saída tem o efeito oposto, é rápida no princípio e reduz a velocidade para o fim. Neste caso concreto, precisamos de Atenuar a Entrada nas key frames do Licenciatura de Engenharia Informática 187

212 inicio do salto e Atenuar a Saída nas key frames do ponto de impacto. Pode jogar com vários valores de uma gama de 0 a 100. Quanto mais alto for o número, mais forte é o efeito. Figura Painel Properties (Opção Ease) Figura Atenuação de Entrada a um valor de -15 na key frame da Frame 1 Figura Atenuação de Entrada a um valor de -100 na key frame da Frame 1 Note, nas imagens acima, como difere um valor mais baixo de um valor mais alto. Este exemplo tem com função ajuda-lo a decidir qual o valor da Atenuação de Entrada ou de Saída. Mas permanece um problema com Motion Tweening. Note que o caminho de um ponto A para um ponto B (de uma key frame para a próxima) é uma linha recta. Novamente, o Flash dá os passos mais lógicos na transição de uma key frame para a próxima. O Flash mover-se-á sempre de um local x para um local y numa linha recta. Licenciatura de Engenharia Informática 188

213 Figura Movimento em linha recta A animação está quase completa. As abóboras estão a funcionar e a velocidade da animação está correcta. Mas infelizmente, a bola sobe e desde numa linha recta. Abra o ficheiro motionteasing.fla para ver o exemplo acima. Para corrigir o caminho do movimento, é necessário usar uma Guia. 2. USO DE GUIAS DE MOVIMENTO Depois de criarmos uma animação que usa o Motion Tweening, podemos aplicar uma Guia de Movimento (também chamadas de caminhos) na animação, forçando a Instância a percorrer o caminho ou a forma da Guia. As Guias de Movimento são linhas que devem estar no nível de Forma. Para criar uma Guia de Movimento, pode-se usar a Ferramenta Lápis, tendo a certeza que o modo Suavizar (Smooth) está seleccionado. Actualmente temos duas Layers. Temos que criar uma terceira Layer temporária para desenhar a Guia, pois não desejamos adicionar qualquer imagem à nossa Layer bola ou chão. Depois de desenhar a Guia de Movimento e de converter esta num Símbolo, pode-se apagar a própria Guia de Movimento e a Layer. Figura É criada uma Layer temporária para desenhar a Guia de Movimento Licenciatura de Engenharia Informática 189

214 De seguida, usa-se a Ferramenta Lápis para desenhar a Guia de Movimento e depois usa-se a Ferramenta Seta e a opção Suavizar (Smooth) para suavizar a linha. É boa ideia converter a Guia de Movimento num Símbolo, de forma a que possa usar esta mais tarde no seu filme. Também é boa ideia activar os Marcadores de Transparência, para assim, poder ter uma referência para desenhar a Guia de Movimento. Figura A Guia de Movimento é desenhada, suavizada e convertida num Símbolo Neste momento, já pode apagar a Instância do Palco e também pode apagar a Layer temporária (com a Layer seleccionada, {Clique} no ícone Apagar Layer (a lata do lixo). ADICIONAR GUIA DE MOVIMENTO Para adicionar uma Guia de Movimento à animação, {Clique-Direito} com o rato na Layer que deseja adicionar a Guia de Movimento e seleccione Add Motion Guide. Figura Menu de contexto sensível (Adicionar Guia) Licenciatura de Engenharia Informática 190

215 A Timeline muda. Uma nova Layer é adicionada. A Layer é uma Layer Guia. Há um pequeno caminho ao lado do rótulo da Layer. A própria Layer chama-se Guide (Guia) com o nome da Layer particular a que se adicionou a guia, neste caso bola. A Layer a que se adicionou a guia é sempre colocada directamente abaixo da própria Layer Guia. Figura Uma Layer Guia é adicionada à Timeline O próximo passo é colocar a própria Guia de Movimento no Palco. Quando criamos a Guia de Movimento, convertemos esta num Símbolo para uso posterior. Simplesmente arraste uma Instância da Guia de Movimento para a Layer Guia. A regra dourada para as Guias de Movimento é que estas têm de estar no Estado de Forma. É necessário desmembrar a Instância para colocar esta no Estado de Forma. Tenha a certeza que primeiro posiciona apropriadamente a Guia de Movimento e que só depois a desmembra (seleccione Modify/Break Apart ou pressione as teclas [CTRL] + [B]). Neste caso, colocamos a Guia de Movimento na seguinte posição. Note o padrão de selecção da Guia de Movimento, a Instância está desmembrada, de forma a que a Guia de Movimento ou caminho esteja no Estado de Forma. Figura Animação produzida com uma Guia ANEXAR KEY FRAMES ÀS GUIAS DE MOVIMENTO O processo de anexar a animação à Guia de Movimento envolve a selecção de cada key frame na animação, para depois anexar a Instância da key frame seleccionada à Guia Licenciatura de Engenharia Informática 191

216 de Movimento, usando para isso a Ferramenta Seta. Assegure-se que a checkbox Encaixar (Snap) está seleccionada no Painel Properties. Anexe cada key frame aos pontos aplicáveis ao longo da Guia de Movimento. Figura Ao arrastar a Instância em cada key frame para a Guia de Movimento, a Instância encaixará na Guia Depois de anexar cada key frame à Guia de Movimento pode reproduzir a sua animação ou usar o marcador para visualizar esta. Notará que a bola segue a Guia de Movimento, criando um ciclo de salto realístico. Para esconder a visualização da Guia, oculte simplesmente a visibilidade da Layer Guia. Figura Com os Marcadores de Transparência pode visualizar o novo caminho da animação Mas continua a permanecer um problema. As key frames das Frames 5, 15 e 25 são os pontos de impacto. Depois destes terem sido encaixados na Guia de Movimento, estes passam agora o nível do chão. Em vez de ajustar a Guia de Movimento e cada uma das key frames, podemos ajustar tudo simultaneamente. Licenciatura de Engenharia Informática 192

217 3. EDIÇÃO DE MÚLTIPLAS FRAMES Às vezes, achará que precisa mudar a posição e/ou a dimensão de uma sequência inteira de key frames. Para seleccionar e modificar múltiplas key frames simultaneamente, {Clique} no ícone Editar Múltiplas Frames ao lado dos ícones Papel de Transparências. Aparece um conjunto de Marcadores de Transparências sobre a Timeline. Arraste os marcadores à gama inteira de animação. Tenha a certeza que bloqueia as Layers com os conteúdos que não deseja modificar, neste caso seria a Layer chão. Use a Ferramenta Seta para seleccionar tudo no Palco (pode ser necessário mudar o nível de ampliação do Palco). Verá cada uma das key frames ao mesmo tempo, mas não as in-between frames (pode ver estas com os marcadores de transparência). Figura A Guia de Movimento e cada key frame da animação estão seleccionadas Com todo o conteúdo, que deseja modificar, seleccionado, pode usar a Ferramenta Seta para mudar esse conteúdo com bem entender. Neste caso, iremos mover tudo para cima (eixo dos yy) de forma a que o ponto de impacto alinhe correctamente com o chão. Figura A sequência inteira de key frames é editada Licenciatura de Engenharia Informática 193

218 Abra o ficheiro guide.fla para ver o exemplo acima. Assegure-se que retira a selecção do ícone Editar Múltiplas Frames quando termina a edição. Na adição das Guias de Movimento é fundamental que se lembre que tem que criar o Motion Tweening primeiro e só depois anexar cada key frame à Guia de Movimento. Se modificar os pontos na Guia, terá de tornar a anexar a Instância em cada key frame. 4. A ROTAÇÃO NO MOTION TWEENING O Motion Tweening provê uma característica de rotação automatizada, onde não é preciso rodar a Instância de uma key frame para outra, se quiser que esta rode uns 360 graus. Simplesmente organize as key frames, como normalmente o faz. Por exemplo, coloque a letra A no Palco e crie duas key frames, uma na Frame 1 e a próxima na Frame 30. As key frames são idênticas. Para rodar esta Instância automaticamente, adicione o Motion Tweening à primeira key frame e seleccione CW ou CCW para definir a direcção de rotação (sentido dos ponteiros do relógio ou ao contrario do sentido dos ponteiros do relógio). A opção Auto é usada quando roda a Instância numa key frame a menos de 360 graus, neste caso é você que a roda. Se não quiser que ocorra qualquer rotação, seleccione a opção None. Insira o número de vezes que deseja que o objecto rode 360 graus durante o tempo de animação. Figura Painel Properties (Opção de Rotação) Pré-visualize a animação. A Instância rodará automaticamente. Abra o ficheiro rotation.fla para ver a rotação automatizada. Licenciatura de Engenharia Informática 194

219 5. EXERCÍCIOS Exercício 1 Veja o ficheiro marblecomplete.swf. Abra o ficheiro marble.fla e use este como o seu ponto de partida. Tente reproduzir a animação do ficheiro marblecomplete.swf. Note que há uma Guia de Movimento designada de guide na Biblioteca. Estude cuidadosamente a animação. Note a velocidade da bola quando esta rola de um lado para outro no buraco. Note ainda que o movimento nunca é constante e que a velocidade aumenta quando a distância das viagens da bola diminui. Abra o ficheiro marblekeyframes.fla para ver como organizamos as key frames da animação. Abra o ficheiro marblecomplete.fla para ver a animação tal como a executamos. 6. RESUMO Depois de completar este capítulo, deve ser capaz de: Usar o Motion Tweening; Entender os Potenciais Problemas do Motion Tweening; Usar as Opções de Atenuação; Usar as Opções de Rotação; Usar as Guias numa Animação Motion Tweening. Licenciatura de Engenharia Informática 195

220 C APÍTULO 12 - FUNDAMENTOS DO FLASH: SHAPE TWEENING A Shape Tweening é bastante parecida com o Motion Tweening, onde tem que criar key frames e o Flash as in-between frames. Porém, tal como insinua o nome Shape (Forma), a Shape Tweening envolve a transformação de um objecto no Estado de Forma para outro no Estado de Forma, criando uma metamorfose como efeito. Neste capítulo, será examinado como criar uma Shape Tweening. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Criar Shape Tweening; 2. Usar Shape Hints para controlar a Shape Tweening. 1. SHAPE TWEENING A Shape Tweening cria um efeito de metamorfose, onde uma forma transforma-se noutra. No Flash, a Shape Tweening só é feita a imagens que estejam no Estado de Forma. No geral, as formas devem ser um pouco semelhantes e muito simples, de uma cor sólida ou com um preenchimento gradient simples. Iremos mudar a forma de um cão para a forma de um gato. Neste caso, criamos o cão e gato e convertemo-los em Símbolos separados. Demos o nome de shapetween à Layer e colocou-se uma Instância do Símbolo cão no Palco. Uma key frame é criada automaticamente na Frame 1. Figura A Instância do cão colocada no Palco A seguir crie uma segunda key frame que terá a transformação da forma do cão, neste caso, num gato. Claro que, ao criar a próxima key frame duplica a key frame anterior. È preciso que apague a Instância e coloque a outra Instância na segunda key frame. Neste caso, irá colocar uma Instância do gato na próxima key frame (a Frame 30). Licenciatura de Engenharia Informática 196

221 Figura A Instância do gato colocada no Palco É necessário desmembrar ambas as Instâncias, alterando o estado para o Estado de Forma, de modo a que a Shape Tweening possa trabalhar. Para criar a Shape Tweening, seleccione a primeira key frame e seleccione a opção Shape do Tween no Painel Properties. Figura Seleccione a opção Shape para a Shape Tweening Se não desmembrar as Instâncias separadamente, aparecerá um indicador de advertência no Painel Properties e aparecerá também uma linha tracejada na Timeline, que aponta de uma key frame para a próxima. Ambos os eventos indicam que a Shape Tweening não funcionará, porque ambas as key frames tem Instâncias. Figura A Shape Tweening não funcionará, tal como indica o símbolo triangular Licenciatura de Engenharia Informática 197

222 Figura Aparece uma linha tracejada na Timeline. A cor verde indica uma Shape Tweening, mas a linha tracejada indica que a Shape Tweening não funcionará É muito fácil esquecer de desmembrar as Instâncias quando está a criar uma Shape Tweening. Simplesmente seleccione cada Instância em cada key frame e as desmembre (seleccionando Modify/Break Apart ou pressionando as teclas [CTRL] + [B]). A Timeline exibirá uma cor verde e uma seta que aponta de uma key frame para a próxima, o que indica que a Shape Tweening está a funcionar. Figura A Shape Tweening já funciona, pois a forma está no Estado de Forma A forma do cão está desmembrada, tal como a do gato. A Shape Tweening funcionará correctamente. 2. TIPO DE TRANSFORMAÇÃO Além da Atenuação também pode controlar o modo de como as formas se transformam ou se misturam, seleccionando a opção Distributive ou Angular. Distributive é uma boa opção para formas sem extremidades afiadas e linhas rectas. Angular é uma óptima Licenciatura de Engenharia Informática 198

223 opção para formas afiadas com linhas rectas. Neste caso, vamos usar a opção Distributive. Figura Painel Properties (Shape Tweening Opção Distributive) Quando visualizar a animação, repare que uma forma transforma-se na outra. Note que pode colocar várias formas na mesma Layer, fazendo a metamorfose de uma forma para outra. Veja o ficheiro shape.swf para visualizar o exemplo. 3. USAR SHAPE HINTS No exemplo apresentado a transformação é aceitável, mas com uma pequena raridade, onde a perna traseira do cão torna-se o rabo do gato e uma das pernas traseiras do gato emerge da área do estômago do cão. Para controlar ou guiar a transformação de uma forma em outra forma, utiliza-se as Shape Hints. As Shape Hints são pontos que se colocam na primeira forma e que vão ajudar esta a se ajustar melhor à segunda forma. Quando se dá a transformação, a forma indica o acto como se fosse uma guia de gestão de transformação. Para adicionar Shape Hints, seleccione a primeira key frame e seleccione Modify/Shape/Add Shape Hints ou pressione as teclas [CTRL] + [SHIFT] + [H]. As Shape Hints aparecem como pequenos círculos com letras minúsculas. A primeira letra será um a minúsculo. A Shape Hint aparecerá no centro do Palco. Figura A Shape Hint é adicionada à primeira key frame Licenciatura de Engenharia Informática 199

224 É necessário adicionar as Shape Hints que forem aplicáveis à animação que está a criar. Neste caso, iremos adicionar as Shape hints ao pescoço, ao rabo e às patas do cão. Para posicionar uma Shape Hint, {Clique}, segure e arraste a Shape Hint para o local desejado. Continue a adicionar as Shape Hints conforme for precisando. Figura São colocadas seis Shape Hints na forma do cão Depois de posicionar as Shape Hints na forma da primeira key frame, seleccione a segunda key frame e coloque as mesmas Shape Hints nos pontos aplicáveis (nos mesmos pontos). Figura São colocadas as Shape Hints na forma do gato Agora quando reproduzir a animação, a transformação de uma forma para a outra está melhorada e segue a forma geral dos animais. Licenciatura de Engenharia Informática 200

225 REMOVER SHAPE HINTS Para remover uma Shape Hint, {Clique-Direito} com o rato numa Shape Hint e seleccione Remove Hint para remover a Shape Hint seleccionada ou seleccione Remove All Hints para remover todas as Shape Hints. Figura Menu de contexto sensível para eliminar as Shape Tweening 4. EXERCÍCIOS Exercício 1 Abra o ficheiro shapeexercise.fla e transforme a forma do cão num gato e a do gato num cão. Tente usar as Shape Hints. Abra o ficheiro shapehint.fla para ver como colocamos as Shape Hints. Tente colocar Shape Hints adicionais em redor do focinho e das orelhas das formas. 5. RESUMO Depois de completar este capítulo, deve ser capaz de: Criar Shape Tweening; Usar Shape Hints para controlar a Shape Tweening. Licenciatura de Engenharia Informática 201

226 C APÍTULO 13 - FUNDAMENTOS DO FLASH: USO DE MÁSCARAS EM ANIMAÇÃO Uma Máscara no Flash é uma Instância (ou qualquer imagem) que age como um buraco pelo qual podemos vemos os conteúdos de uma Layer ou Layers por baixo desta imagem. A Máscara pode ser animada, tal como o conteúdo que a Máscara revela. Neste capítulo será detalhado o processo de criação e uso das Máscaras no Flash. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Entender o Conceito de Máscara; 2. Criar uma Animação que use uma Máscara. 1. MÁSCARAS EM ANIMAÇÃO Uma Máscara é algo que esconde outra coisa, cobrindo-a. As famosas Máscaras conhecidas mundialmente são as faces de drama (comédia e tragédia), as máscaras do teatro de Japonês Noh, as máscaras do Mardi Gras e as várias máscaras das diferentes tradições culturais e dramáticas. Figura Tragédia e Comédia Quando uma pessoa usa uma máscara na face, normalmente só os olhos e boca estão visíveis (dependendo da máscara), enquanto o resto da face está completamente coberta. No Flash, uma Layer é designada por Máscara. As imagens colocadas numa Layer Máscara funcionam como buracos na máscara, pelos quais o conteúdo abaixo desta é visualizado. A forma da imagem torna-se a forma do buraco. Licenciatura de Engenharia Informática 202

227 Figura Duas Layers, uma com a imagem do planeta Terra e a outra com a de uma estrela Figura O conteúdo das Layers que aparece no Palco. A Máscara ainda não foi activada Figura Duas Layers, a Layer estrela designada como Máscara foi activada, estendendo a máscara às Layer abaixo Figura O conteúdo das Layers que aparece no Palco. Note que a estrela é o buraco da máscara, revelando o que está por baixo desta 2. USO DE MÁSCARAS NO FLASH Para usar uma Máscara no Flash, planifique e construa a animação como normalmente o faz. Como exemplo, vamos animar créditos. O objectivo é que os créditos enfraqueçam durante a visão, solidificando e diminuindo de visão conforme estes vão passando do fundo para o topo do Palco. O elemento fundamental é o enfraquecimento, a solidificação e a diminuição sequencialmente da visão. Como é que a realização desta animação usa uma Máscara? É fácil, o texto dos créditos será o buraco na Layer Máscara. O texto será animado e passará por cima de um padrão gradient, que é transparente no topo e no fundo, e no centro de cor preta e sólida. O primeiro passo é criar as imagens para a animação, começando por criar o padrão gradient. Como nenhum dos padrões gradient standards é satisfatório precisamos de criar o nosso próprio padrão gradient linear. O padrão gradient, neste caso, será composto por sete Ponteiros de Cores. Os dois primeiros do lado esquerdo e os dois últimos do lado direito são afixados de transparentes (Alfa a 0%). Os restantes três são coloridos a preto. Licenciatura de Engenharia Informática 203

228 Figura O padrão gradiente Agora, é preciso preencher uma forma rectangular com este gradient. Para isso, use a Ferramenta Balde de Tinta, {Clique}, segure e arraste horizontalmente esta pela forma rectangular, de modo a preencher a forma desde o topo até ao fundo com o nosso padrão gradient linear. Figura Forma rectangular preenchida com cor uma cor sólida Figura Arrastando a Ferramenta Balde de Tinta, de modo a preencher esta com o gradient O resultado é a seguinte forma na primeira Layer, com o nome gradient. Como sempre, é boa ideia converter a forma num Símbolo. Estendemos a informação desde a key frame 1 até à frame 30. Figura A forma quadrada com o padrão gradient De seguida é necessário criar o texto que irá compor os créditos e que actuará como um buraco na Máscara. Converte-se o texto num Símbolo e utiliza-se uma Instância numa Licenciatura de Engenharia Informática 204

229 nova Layer, chamada credits. Neste caso, iremos animar o texto por 30 frames, começando este por baixo do Palco e terminando em cima do topo do Palco. Figura O texto da key frame 1. Este passará por cima do gradient durante a animação de 30 frames, terminando a cima do topo do Palco Se reproduzir a animação neste momento, o texto simplesmente passaria por cima da Instância gradient, tal como se era de esperar. Além disso, o texto é imediatamente visível no momento que passa sobre o Palco. O passo final é transformar a Layer do texto numa Layer Máscara. Para isso, {Clique-Direito} com o rato na respectiva Layer e seleccione a opção Mask do menu. Figura Menu de contexto sensível para criar a Layer Mascara Licenciatura de Engenharia Informática 205

230 A Timeline muda, o indicador de Máscara aparece na Layer designada por Máscara e na Layer que está a ser afectada pela máscara também aparece um indicador de Máscara diferente. Além disso, ambas as Layers são automaticamente bloqueadas, o que permite ver a Máscara no Flash. Desbloqueie as Layers para editar os seus conteúdos. Figura Ambas as Layer contêm um indicador de Mascara, apesar de diferentes Agora, quando o texto passa por cima do gradient, este é revelado pelo texto. Para acrescentar Layers adicionais por baixo da Layer Máscara, simplesmente arraste estas directamente para baixo da Layer Máscara. Veja o ficheiro mask.swf para poder ver o exemplo. 3. EXERCÍCIOS Exercício 1 Abra o ficheiro mask.fla e use este como ponto de partida para recriar a animação que detalhamos neste capítulo. Abra o ficheiro maskcomplete.fla para visualizar a versão completa. Exercício 2 Veja o ficheiro starmaskcomplete.swf. Abra o ficheiro starmask.fla e usa este como ponto de partida para recriar a animação do ficheiro starmaskcomplete.swf. Abra o ficheiro starmaskcomplete.fla para visualizar a versão completa. 4. RESUMO Depois de completar este capítulo, deve ser capaz de: Entender o Conceito de Máscara; Criar uma Animação que use uma Máscara. Licenciatura de Engenharia Informática 206

231 C APÍTULO 14 - FUNDAMENTOS DO FLASH: SÍMBOLOS ANIMADOS Os Símbolos têm as suas próprias Timelines que, tal como a Timeline principal, podem ser usadas para animar o conteúdo. Neste capítulo será abordado o processo de criação de Símbolos Animados. A maioria da animação pode ser feita dentro dos próprios Símbolos em vez de utilizar a Timeline principal. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Entender o Procedimento de Produção da criação de Símbolos Animados; 2. Criar Símbolos Animados; 3. Entender como usar as Instâncias Animadas na Timeline Principal; 4. Editar os Símbolos no Palco Principal; 5. Entender o Comportamento Graphic e Movie Clip. 1. SÍMBOLOS ANIMADOS A grande vantagem dos Símbolos Animados é a capacidade que uma Instância de um Símbolo Animado tem para animar o seu próprio conteúdo independente da Timeline principal. Isto significa que pode colocar uma Instância no Palco, numa única key frame, que esta animará o filme sem ter que estender a duração da key frame. Por exemplo, se dermos uma olhadela na Timeline principal da animação da bola aos saltos. Figura Timeline principal da animação da bola aos saltos Existem três Layers, cada uma com 30 frames. Se tivéssemos criado esta animação dentro de um Símbolo, na Timeline de um Símbolo particular em vez de utilizar a Timeline principal, a Timeline do Símbolo seria idêntica à exibida em cima. Porém, quando se coloca uma Instância do Símbolo Animado na Timeline principal, esta pode consistir numa só Layer e numa só key frame, criando uma Timeline principal muito eficiente. Quando o filme de Flash é reproduzido, ainda vemos a animação da bola a saltar na sua totalidade, pois a Timeline da Instância é exibida independentemente da cronometragem da Timeline principal. Por outras palavras, numa única key frame da Licenciatura de Engenharia Informática 207

232 Timeline principal pode ter uma animação inteira usando Instâncias de Símbolos Animados. Figura A Timeline principal que caracteriza uma Instância composta pela animação da bola a saltar Porque estamos a usar uma Instância, embora animada, também se pode aplicar a esta as Propriedades de uma Instância, como redimensionar, inclinar e rodar, e até mesmo animar. Isto proporciona-lhe uma grande flexibilidade e poder. Pode-se redimensionar rapidamente a animação da bola a saltar, reposicionar esta, rodar, e assim por diante. Embora as Timelines de um Símbolo possam ser grandes (numerosas frames, múltiplas Layers), a Timeline principal pode estar limpa e bem organizada, criando assim uma produção eficiente. Num capítulo mais à frente, será abordada a interactividade, onde se combina a Timeline principal com as Instâncias animadas para organizar sequências de animações e eventos. 2. CRIAR SÍMBOLOS ANIMADOS O procedimento usado para criar Símbolos Animados envolve animação, ou seja, são usadas Instâncias de outros Símbolos no Símbolo Animado. Em vez de se usar Instâncias na Timeline principal, usa-se Instâncias estáticas (não animadas) na Timeline de um Símbolo. Assim sendo, as formas são criadas no Palco principal e convertidas em Símbolos. Este é um bom procedimento para criar Símbolos estáticos. A principal vantagem é que consegue criar uma forma de acordo com o tamanho do Palco (apesar, que pode redimensionar uma Instância a qual momento). Os Símbolos Animados são compostos por Instâncias estáticas que são animadas dentro do Símbolo. A vantagem de usar Instâncias dentro de um outro Símbolo é igual à de usar Instâncias no Palco principal, podendo manipular as Propriedades da Instância. Como exemplo, vamos criar uma letra giratória a A. Para criar esta, precisamos de um Símbolo com a letra A e de um segundo Símbolo no qual a Instância do Símbolo A é animada. Primeiro, cria-se a letra A através da Ferramenta Texto. Uma vez criada no Palco principal, convertemos esta num Símbolo e depois apagamo-la do Palco. É claro que, esta é colocada automaticamente na Biblioteca. O próximo passo é criar a animação dentro de um novo Símbolo, em vez de a criar na Timeline principal. Para criar um novo Símbolo, {Clique} no ícone Novo Símbolo ao fundo da Biblioteca. Aparecerá a caixa de diálogo Create New Symbol. Deve dar um nome ao Símbolo e {Clicar} no OK. Deixe a opção Movie Clip seleccionada no Behavior (Comportamento). Licenciatura de Engenharia Informática 208

233 Figura A caixa de diálogo Create New Symbol Será apresentado o Palco do Símbolo que acabou de criar, tal como a sua Timeline. A Timeline do Símbolo é em tudo idêntica à Timeline principal. Porém, saberá que está num Símbolo, porque o nome do Símbolo aparece ao topo do Palco e uma linha cruzada (cruz) aparece no centro do Palco. Figura O Palco do Símbolo O próximo passo a dar é arrastar uma Instância do Símbolo A que criamos sobre este Palco. Centre a Instância, usando o Painel Align. Figura A Instância do Símbolo A colocada no Palco do Símbolo animarletra Licenciatura de Engenharia Informática 209

234 O PAINEL ALIGN Para visualizar o Painel Align, seleccione Window/Align ou pressione as teclas [CTRL] + [K] e o Painel Align aparecerá. Figura Painel Align È necessário alinhar a Instância seleccionada no centro do Palco. Para tal, {Clique} no botão To Stage. Este alinha qualquer Instância seleccionada relativamente à área do Palco. Mas se {Clicar} em ambos os botões, Align Vertical Center e Align Horizontal Center, a Instância é posicionada no centro do Palco. Também pode seleccionar múltiplas Instâncias e alinha-las ou distribui-las adequadamente. Por exemplo, poderia seleccionar múltiplas Instâncias de texto e alinha-las à Esquerda (Left) e distribui-las pelo Centro Verticalmente (Vertical Center), {Clicando} no botão adequado. Figura Três (3) Instâncias seleccionadas Figura Três Instâncias alinhadas à esquerda e distribuídas pelo centro Verticalmente Agora, podemos animar a Instância da mesma maneira como se faz na Timeline principal. O objectivo é rodar a Instância. Pode-se usar o controle Rotação, para rodar a Instância à direita uma única vez. Neste caso, a animação é de 30 frames. Licenciatura de Engenharia Informática 210

235 Figura Opções do controle Rotação Pode visualizar a animação do mesmo modo que faz com a Timeline principal, ou seja, pressionando a tecla [ENTER]. Quando estiver satisfeito com a animação realizada, {Clique} em Scene 1, no topo do Palco, para voltar à Timeline principal. O Palco principal ainda não contém conteúdo. A Biblioteca consiste em dois Símbolos, A e animarletra. Arraste uma Instância do animarletra sobre o Palco. A Layer na Timeline contém uma key frame. Figura A Instância animada posiciona-se numa única key frame na Timeline 3. VISUALIZAR INSTÂNCIAS ANIMADAS Se pressionar na tecla [ENTER] não visualizará a animação. Dentro do Flash, não se pode visualizar uma sequência animada de qualquer Instância animada que esteja no Palco. Só pode ver a animação na Timeline do próprio Símbolo. Porém, no ficheiro de Flash que exporta para a Internet ou para outra media, a animação já é visualizada. Para ver o ficheiro.swf (pequeno ficheiro de web), pressiona as teclas [CTRL] + [ENTER]. O Flash irá gerar o ficheiro.swf do ficheiro.fla (o formato genuíno do ficheiro de Flash) e apresentará este na sua própria janela. O ficheiro.swf só exibe o conteúdo da Timeline principal. A Instância animada rodará, e continuará a faze-lo novamente e novamente, até que feche a janela, {Clicando} no ícone de fecho ou pressionando as teclas [CTRL] + [W]. Quando gera um ficheiro.swf desta maneira, este é guardado como xxxx.swf onde xxxx é o nome do ficheiro de produção. Um ficheiro de produção guardado como logo.fla gerará um ficheiro chamado logo.swf, ao gerar um ficheiro.swf. O ficheiro.swf é guardado na mesma pasta (no mesmo local do seu computador) onde se encontra guardado o ficheiro.fla. Abra o ficheiro movieclipa.fla e tente reproduzir o filme pressionando a tecla [ENTER]. Note que nada acontece, pois tem que gerar o ficheiro.swf para poder ver a Instância animada. 4. REPETIÇÃO POR DEFEITO O Flash, por defeito, repete indefinidamente toda a animação, isto é, o filme. Por exemplo, a letra que animamos roda 360 graus em 30 frames. Porém, quando geramos o Licenciatura de Engenharia Informática 211

236 ficheiro.swf, este repete a animação, significando que quando o marcador bate na última frame da animação (neste caso, na key frame na Frame 30), este volta para trás e começa desde o início. Irá, mais à frente, aprender a controlar este tipo de comportamento. Por agora, este comportamento de repetição da animação apresenta-nos um problema interessante. Se examinar a animação gerando o ficheiro.swf ou olhando para esta na sua própria Timeline (para ter a certeza que a animação é recomeçada selecciona Control/Loop Playback) notará que há uma leve pausa entre o momento em que a sequência da animação é completada e o momento em que esta recomeça. Se a última e a primeira key frame de uma animação forem idênticas, e se a animação for repetida indefinidamente então as duas frames idênticas serão colocadas juntas, criando uma pausa na volta. Isto acontece sempre quando se usa o controle de Rotação no Motion Tweening, porque as primeiras e as últimas key frames são normalmente idênticas. AFIXAR ROTAÇÃO AUTOMATIZADA Para fazer com que a animação seja repetida correctamente (de forma a que cada frame individual seja única), crie um Motion Tweening como regularmente o faz. Neste caso, vamos ter uma animação de 30 frames que consiste em duas key frames e em 28 inbetween frames. Se colocar o marcador na frame 29, verá que esta frame deve ser a última key frame. Se esta fosse a última key frame, em vez da letra A na orientação rectilínea, então o recomeço funcionaria de forma impecável, já que logicamente a próxima frame é o A na primeira orientação. Figura A orientação da Instância na Frame 29 Para corrigir esta situação seleccione a Frame 29 e insira uma key frame. Quando cria uma key frame dentro de um Motion Tweening o estado actual da Instância é transformado numa key frame, não copiando a informação da key frame anterior da Layer. Licenciatura de Engenharia Informática 212

237 Figura Uma key frame é inserida na Frame 29 da Timeline animatedletter Para remover a última key frame, {Clique} com o botão direito do rato na key frame e seleccione a opção Clear Keyframe do menu. Figura Menu de contexto sensível (Limpar KeyFrame) Neste momento, ainda existe um problema. Embora a nova key frame não seja uma duplicação da primeira key frame, herdou o Motion Tweening da key farme anterior. Para eliminar este problema, seleccione a key frame e escolha a opção None do menu pop-up do Tween no Painel Properties, para incapacitar o Motion Tweening. Porém, ainda temos uma gama de 30 frames, mas a animação termina na Frame 29. {Clique}, segure e arraste a key frame da Frame 29 para a Frame 30. Reveja a animação e note que o problema da repetição foi eliminado. Figura O Motion Tweening na nova key frame deve ser incapacitado e esta deve ser movida para a Frame 30 O verdadeiro poder das Instâncias animadas está no facto de a animação consistir numa única key frame. Se desejar, pode continuar a colocar múltiplas Instâncias na mesma Layer ou em múltiplas Layers organizadas numa única key frame. Quando gerar o ficheiro.swf, as Instâncias animarão. Além disso, também pode modificar cada Instância. Licenciatura de Engenharia Informática 213

238 Figura Quatro Instâncias do mesmo Símbolo animado em orientações diferentes e com diferentes Propriedades da Instância aplicadas. Abra o ficheiro multipleinstances.fla. 5. ANIMAÇÃO AVANÇADA: O MÉTODO PAI/FILHO O sistema de Flash dos Símbolos e Instâncias pode ser usado de várias maneiras interessantes, de modo a alcançar metas particulares. Como meta temos o exemplo, de animar a órbita de uma forma circular em redor de um ponto central invisível. A animação visualizada com os Marcadores de Transparência, parece-se com a seguinte imagem. Figura A animação orbita Veja o ficheiro orbit.swf. A segunda meta é criar uma bola que distancia-se de nós em espiral. Esta animação, vista com os Marcadores de Transparência, parece-se com a seguinte imagem. Figura A animação espiral Licenciatura de Engenharia Informática 214

239 Visualize o ficheiro spiral.swf. O primeiro passo é pensar como se pode alcançar os objectivos da animação. O primeiro pensamento a surgir poderia levar ao uso de uma Guia de Movimento em ambos os exemplos. Mas existe um problema imediato com as animações circulares. As guias de movimento requerem um ponto individual para cada key frame. E um caminho circular só tem um ponto. Sendo necessário criar uma abertura no caminho circular. Além disso, a abertura teria que ser exactamente do tamanho certo para manter uma rotação perfeita de 360 graus, de forma que quando a animação fosse recomeçada, o espaço entre os pontos do início e do fim fosse igual ao espaço entre cada ponto em cada frame, provocando um movimento circular sem defeito. Se a abertura for hermeticamente espaçada, a bola parecerá reduzir a velocidade ou efectuar um pausa ligeira no início do seu caminho. Se a abertura for muito grande, a bola parecerá saltar ou acelerar no início do caminho. Encontrar a abertura precisa, levará um trabalho considerável, ou alguma sorte. Figura Tamanho preciso da abertura Figura Abertura pequena Figura Abertura grande O uso de uma guia para este tipo de movimento pode tornar-se difícil. Porém, esta é uma solução válida. Para criar a animação espiral, poderíamos criar um caminho espiral. Seria difícil criar um caminho espiral usando as Ferramentas de Desenho do Flash. Sendo necessário criar este caminho num programa de desenho vector, como a Macromedia s Freehand, e depois importa-lo para o Flash. Uma vez que se tem o caminho espiral, iríamos anexar uma Instância da bola a cada extremidade, reduzindo a dimensão da Instância na primeira key frame e aumentando a dimensão da Instância na última key frame. Conforme a bola vá seguindo o caminho, aumentará a dimensão, criando a ilusão de que está-se a mover de um ponto distante para um ponto mais próximo do espectador. Licenciatura de Engenharia Informática 215

240 Figura A Instância move-se ao longo do caminho espiral USO DE OBJECTOS PAI E FILHO Existe outro método que leva menos tempo a construir, e não envolve o uso de Guias de Movimento. Muitas animações efectuam o uso de uma técnica especializada, que envolve a anexação de um objecto filho a um objecto pai. Primeiro anima-se o objecto pai, sendo depois o objecto filho anexado ao pai seguindo este. Uma vez mais, o segredo está no uso de elementos particulares e fundamentais do Flash, e na combinação destes para alcançar os resultados. O primeiro passo é criar os Símbolos estáticos que vamos precisar para realizar as animações. Precisamos de uma forma de bola que será utilizada em ambas as animações. Porque não estamos a usar caminhos, precisamos de uma outra forma, um rectângulo, que será nosso objecto pai. Animaremos o objecto pai, e anexamos a Instância da bola ao objecto pai. Os objectos pais são transformados em invisíveis para o espectador, agindo como guias para os objectos visíveis, como a bola. Figura A bola e as formas pais são criadas e convertidas em Símbolos Neste caso, chamamos os Símbolos de bola e de masterparent. Neste momento, precisamos de criar outro Símbolo, que consiste numa Instância do masterparent. Isto é necessário por duas razões, que serão apresentadas na continuação da construção desta animação. Crie um novo Símbolo (chame-o de pai ), faça como se estivesse a criar um Símbolo Animado e arraste uma Instância do masterparent para o novo Símbolo, centrando-o no Palco. Volte à Timeline principal. Neste momento temos três Símbolos, a bola, o masterparent e o pai. Se examinarmos as Timelines de cada Símbolo, veríamos que a forma circular e a forma rectangular, a bola e o rectângulo existem no Estado de Forma. No pai temos uma Instância do masterparent. Licenciatura de Engenharia Informática 216

241 Símbolo Forma Estado bola Circulo, Preenchimento Gradient Forma masterparent Rectângulo, Preenchimento Sólido Forma pai Instância do masterparent Instância De seguida, é preciso construir a animação órbita. ANIMAR O OBJECTO PAI Para construir a órbita da bola em redor de um ponto invisível, animamos o objecto pai. A bola será o filho que segue o pai. Neste caso, cria-se um novo Símbolo (chamado 360 ) e arrasta-se uma Instância do pai para este, usando o Painel Align para o posicionar no centro do Palco. Neste caso, estamos a criar uma animação de 30 frames, usando as opções da Rotação com o Motion Tweening, rodando a Instância do pai na direcção dos ponteiros do relógio uma única vez, na animação. Recorde-se de que quando usa as opções da Rotação, as primeiras e as últimas key frames da sequência são idênticas. Recorde-se também que por defeito a animação de Flash é repetida indefinidamente. Assim, depois de criar o Motion Tweening, terá de criar uma key frame na Frame 29, apague a key frame na Frame 30, e depois mova a key frame na Frame 29 para a Frame 30, do mesmo modo que fez na animação da rotação da letra A. Figura A Instância do pai é animada no Símbolo 360 Licenciatura de Engenharia Informática 217

242 Agora, animamos o objecto que agirá como Pai. O próximo passo é editar o Símbolo do pai e arrastar a Instância do Símbolo bola sobre a extremidade da Instância do masterparent. Figura Dentro do Símbolo pai, a Instância do Símbolo bola é anexada à extremidade da Instância rectangular do Símbolo masterparent Agora, as razões de precisamos de uma Instância do Símbolo masterparent dentro do Símbolo pai ficam claras. Neste momento, tudo o que precisamos fazer é seleccionar a Instância ( masterparent ) e fixar o Alfa a 0%. Após termos animado a Instância do Símbolo pai, quando examinarmos o Símbolo 360, a bola aparecerá a rodar como a órbita de um planeta invisível. Rodamos a Instância do pai dentro da qual alteramos a Instância do masterparent para um Alfa a 0% e acrescentamos uma Instância do Símbolo bola na extremidade desta. A bola é o filho que segue o pai. Figura Dentro do Símbolo pai, o valor de Alfa da Instância do masterparent é fixado a 0%. O pai fica invisível. O passo que potencialmente pode estar a confundi-lo é a necessidade de criar o Símbolo pai, que consiste simplesmente, numa Instância do Símbolo masterparent. Por que não simplesmente animar uma Instância do masterparent num novo Símbolo e fixar o Alfa a 0% em ambas as key frames? A verdade, é que esta aproximação teria criado com sucesso o aspecto de rotação da animação. Porém, lembre-se que quando usa o Motion Tweening, está limitado a uma Instância por Layer, não podendo assim, anexar uma Instância da bola na extremidade da Instância do masterparent. Além disso, ainda que pudesse colocar uma Instância da bola no Símbolo do masterparent, não poderia reduzir o valor de Alfa da forma rectangular dentro do masterparent, porque este não é uma Instância, mas antes uma forma no Estado de Forma. O êxito está no facto de o pai conter uma Instância do masterparent que permite alterar o valor de Alfa. Devido à forma rectangular no Símbolo masterparent não ser uma Instância, mas assim uma forma no Estado de Forma, a única maneira de podermos transformar a forma em transparente é preencher esta com uma cor padrão com o valor de Alfa a 0%. Usar uma Instância é mais eficiente, porque não temos o trabalho de criar uma cor padrão e porque só modificamos a Instância de um Símbolo, podendo assim usar este noutras animações. O mais importante é lembrar-se em que estado está cada objecto em cada Timeline. Pois, há certas coisas que podem ou não ser feitas dependendo da natureza destes. Por exemplo, dentro do Símbolo bola, na Timeline, a forma da bola está no Estado de Forma. Mas quando uma Instância do Símbolo bola é arrastada sobre outra Licenciatura de Engenharia Informática 218

243 Timeline, esta já age como uma Instância. Lembrar-se destas relações, para poder criar animações avançadas com sucesso no Flash. 6. CRIAÇÃO DA ANIMAÇÃO EM ESPIRAL A criação da segunda animação, em espiral, envolve a animação de uma Instância do Símbolo 360. Cria-se um novo Símbolo (chamado espiral ) e centra-se uma Instância do Símbolo 360 no Palco. Esta animação vai ter 30 frames de duração, consistindo em duas key frames, uma no início e a outra no fim. Assim, cria-se as key frames, reduz-se a dimensão da Instância na primeira key frame e adiciona-se o Motion Tweening a esta. A dimensão da Instância é animada, porque a própria Instância está baseada num Símbolo Animado ( 360 ) o resultado final é uma animação que caracteriza uma bola que se aproxima do espectador num movimento espiral. Figura a animação pretendida A Instância do Símbolo 360 aumenta em dimensão pelas 30 frames. Note que pode ver o pai transparente, utilizando o Papel de Transparência como Contornos. Novamente, se pressionar a tecla [ENTER] para ver a animação só verá a Instância a mudar de dimensão, não verá o caminho da órbita. Volte à Timeline principal e coloque uma Instância do Símbolo espiral no Palco. Gere o ficheiro.swf ([CTRL] + [ENTER]) para visualizar a animação. 7. EDIÇÃO DE SÍMBOLOS NA PALCO PRINCIPAL Quando arrasta uma Instância animada sobre o Palco principal pode ser difícil de colocar o conteúdo relativamente ao próprio Palco ou a outro conteúdo no Palco, porque em qualquer caso, só a primeira frame da animação é visível. Por exemplo, se desejar redimensionar a Instância do Símbolo 360 a meio do Palco, pode fazer o seguinte, visualizar esta através do ficheiro.swf, ir ao Palco do Símbolo e mudar a dimensão, e assim repetidamente até estar satisfeito com o resultado. O melhor método é usar a Edição no Lugar (Edit in Place), {Clique-Direito} com o rato na Instância em qualquer Palco e seleccione a opção Edit in Place do menu. Licenciatura de Engenharia Informática 219

244 Figura Menu de contexto sensível (Editar no Lugar) Quando Edita no Lugar, é transformado no Símbolo da Instância que está a editar, em vez de ser transportado ao Palco do Símbolo, permanecendo assim, no Palco principal. Aparecerá sobre o Palco o nome do Símbolo e a Timeline principal muda para a Timeline do Símbolo. Pode editar o Símbolo exactamente do mesmo modo como está habituado. Além disso, pode usar este para arrastar o marcador pela Timeline e ver como o Símbolo Animado actua no Palco principal. Figura O Símbolo 360 editado no lugar Embora estejamos no Palco principal, usamos a Timeline do Símbolo. Quando está no modo de Edição no Lugar, só pode editar o Símbolo que actualmente seleccionou (embora possa Editar no Lugar Instâncias animadas dentro do Símbolo). O resto do conteúdo no Palco é fantasmagórico. Licenciatura de Engenharia Informática 220

245 8. COMPORTAMENTO DOS SÍMBOLOS: GRAPHIC OU MOVIE CLIP O Comportamento de um Símbolo afecta como este se comporta dentro do filme de Flash. O Comportamento por defeito é Movie Clip. Existem outros dois tipos de Comportamento: Graphic e Button. O Comportamento Button será abordado num capítulo posterior. Neste momento, iremos examinar a diferença entre o Comportamento Graphic e Movie Clip. DESIGNAR COMPORTAMENTO Existe três métodos para designar o Comportamento de um Símbolo. Quando cria um novo Símbolo, seleccionando o Comportamento deste na caixa de diálogo Create New Symbol. Figura Caixa de dialogo Create New Symbol Também pode mudar o Comportamento de um Símbolo já existente na Biblioteca. {Clique-Direito} com o rato no Símbolo e seleccione um Comportamento diferente. Figura Mudar o tipo de Comportamento de um Símbolo Finalmente, também pode mudar o Comportamento de uma Instância que foi colocada no Palco através do menu pop-up Behavior no Painel Porperties. Este método não muda o Comportamento do próprio Símbolo, só o Comportamento da Instância. Licenciatura de Engenharia Informática 221

246 Figura Painel Properties (Mudar Comportamento de um Instância) COMPORTAMENTO GRAPHIC Quando designa o Comportamento Graphic para um Símbolo, este comporta-se de modo diferente do Movie Clip em duas key frames. Se tiver um Símbolo Animado como Graphic, tem que estender a gama da Instância na Timeline, de modo a igualar a gama da animação dentro do Símbolo. Por exemplo, se o Símbolo animatedletter fosse um Graphic em vez de um Movie Clip, colocado numa Timeline numa única key frame iria resultar somente na exibição (através do ficheiro.swf ) da primeira key frame da Instância. Para ver a animação completa, teria que estender a gama da key frame, de modo a igualar esta à gama da animação dentro do Símbolo. Figura O Símbolo animatedletter como um Movie Clip, basta uma única key frame para a animação ser reproduzida Figura O mesmo Símbolo animatedletter como um Graphic, para a animação ser reproduzida a gama da key frame precisa de ser estendida, de modo a igual a gama de frames no Símbolo Assim sendo, a diferença fundamental é que com o Graphic a Timeline do Símbolo é amarrada à Timeline da Instância, logo as duas têm que ter o mesmo número de frames para a animação funcionar correctamente. Com o Movie Clip, a Instância actua independentemente da Timeline em que é colocada. O uso do método de Comportamento Graphic é particularmente útil numa animação onde a sincronização é muito importante. Pode usar o marcador para mover de trás ou para a frente como normalmente faz e colocar outras Instâncias e sons adequadamente na Timeline. Além disso, pode designar em que Frame começa uma Instância Graphic animada, se a animação vai ser repetida e se a animação só vai ser reproduzida uma única vez. Use as opções do Painel Properties. Licenciatura de Engenharia Informática 222

247 Figura Painel Properties (Comportamento Graphic) Use a opção Loop para repetir a animação, Play Once para reproduzir uma só vez a animação, Single Frame para exibir um só a frame (introduzida no campo First). 9. EXERCÍCIOS Exercício 1 Abra o ficheiro orbit.fla, use este ficheiro como ponto de partida para construir a animação da órbita e da espiral, detalhadas neste capítulo. Se tiver dificuldade, abra o ficheiro orbitcomplete.fla e examine cuidadosamente os Símbolos e como estes estão construídos. Releia o capítulo novamente e tente novamente usando o ficheiro orbit.fla como um ponto de partida. Exercício 2 Abra o ficheiro graphicbehavior.fla e note que o Comportamento da Instância do Símbolo 360 foi mudada de Movie Clip para Graphic. Experimente com este Comportamento, estenda a gama de Frames e use o Painel Properties para designar em que Frame começa a Instância. 10. RESUMO Depois de completar este capítulo, deve ser capaz de: Entender o Procedimento de Produção da criação de Símbolos Animados; Criar Símbolos Animados; Entender como usar as Instâncias Animadas na Timeline Principal; Editar os Símbolos no Palco Principal; Entender o Comportamento Graphic e Movie Clip. Licenciatura de Engenharia Informática 223

248 C APÍTULO 15 - FUNDAMENTOS DO FLASH: BOTÕES Os botões permitem que os utilizadores interagem com o seu filme de Flash. Com os botões, concede aos utilizadores a opção de escolha. Cada utilizador pode navegar de modo diferente pelo seu filme de Flash, para diferentes tipos de ficheiros de HTML, e até mesmo controlar as animações do Flash. Antes de adicionar a interactividade ao filme, tem de construir os botões. Os botões são um tipo único de Símbolo. Tal como os Símbolos Graphic e Movie Clip, os Símbolos Button têm a sua própria Timeline e o seu próprio Palco, mas a Timeline do Botão é diferente. Neste capítulo, será examinado o processo de criação de botões. Objectivos Após a conclusão deste capítulo, deverá ser capaz de: 1. Desenhar um Botão; 2. Entender a Timeline do Botão; 3. Entender os Estados do Botão; 4. Usar Instâncias de Movie Clip nos Botões. 1. DESENHO DE BOTÕES: ESTADOS DO BOTÃO Os botões acrescentam interactividade aos filmes de Flash. O desenho de botões envolve o planeamento do aspecto do botão, quando o ponteiro do rato não está em cima do botão, quando o ponteiro do rato está em cima do botão e quando o utilizador {Clica} no botão. A cada uma destas condições chama-se Estado ou Evento. No Flash o Botão tem quatro Estados: Up, Over, Down e Hit. O ESTADO UP Este Estado refere-se ao aspecto do botão quando o ponteiro do rato não está em cima do botão e quando o botão não é {Clicado}, ou ao aspecto do botão quando este aparece inicialmente. O ESTADO OVER Este Estado refere-se ao aspecto do botão quando o ponteiro de rato está sobre ou em cima do botão. O Estado Over (Sobre) é igual ao rollover numa página web standard onde um botão pode mudar de cor quando passa com o ponteiro do rato em cima deste. Pode pensar neste Estado como o Estado roll(over). O ESTADO DOWN Este Estado refere-se ao aspecto do botão quando o utilizador {Clica} no respectivo botão. Licenciatura de Engenharia Informática 224

249 O ESTADO HIT Este Estado é invisível ao utilizador. Este Estado determina a área na qual o ponteiro do rato fica activo, activando assim os Estados Over (Sobre) e Down (Para baixo). Iremos examinar precisamente como o Estado Hit (Área) trabalha mais à frente no capítulo. 2. PLANEAR O BOTÃO Tem de se lembrar de cada um dos Estados ao planear o aspecto do botão. Como quer que o botão apareça quando o utilizador não o está a usar, como quer que o botão apareça quando o utilizador passa o ponteiro do rato em cima deste, como quer o botão apareça quando o utilizador {Clica} neste e finalmente, quando é que o ponteiro do rato fica activo no botão particular? Como exemplo, queremos um botão que tenha o seguinte aspecto: Figura Estado Up (Para cima). Círculo Gradient Figura Estado Over (Sobre). Círculo Gradient, Anéis que pulsam Figura Estado Drow (Para baixo). Círculo Gradient, tamanho reduzido Para criar o botão do exemplo é necessário três Símbolos, um círculo gradient, um anel e a animação dos anéis que pulsam externamente. Para criar o círculo gradiente e o anel, crie simplesmente uma forma circular com um Traço e um Preenchimento. Use a Ferramenta Balde de Tinta para posicionar o gradient radial. Depois, seleccione o Preenchimento e converta este num Símbolo e apague-o do Palco, de seguida seleccione o Traço, converta este num Símbolo e apague-o também do Palco. Este método ajuda-o de dois maneiras. Primeiro, não precisa de criar um Preenchimento e um Traço separadamente, segundo, o Traço é do tamanho certo para o que necessitamos, já que cerca o Preenchimento circular. A animação dos anéis é muito simples. Contém três Layer, nas quais a animação é realizada. Porém, o início da sequência de frames é deslocado. Figura Timeline da animação Licenciatura de Engenharia Informática 225