CRIAÇÃODEANIMAÇÕES PARAINTERNET. MayconSadala

Transcrição

1 CRIAÇÃODEANIMAÇÕES PARAINTERNET MayconSadala INFORMAÇÃOECOMUNICAÇÃO

2

3 Autor Maycon Sadala Graduado em Desenho Industrial pela Universidade de Brasília. Com mais de 15 anos desenvolvendo cursos e conteúdos para Educação a Distância, atua como Designer Gráfico, ilustrador e animador, já tendo participado de diversos festivais de animação, como o Anima Mundi e o Baixada Animada. Revisão NT Editora e Figuramundo Projeto Gráfico NT Editora Editoração Eletrônica NT Editora e Figuramundo Capa NT Editora e Figuramundo NT Educação, uma empresa do Grupo NT SCS Q2 - Bl. D - Salas 307 e Ed. Oscar Niemeyer CEP Brasília - DF Fone: (61) sac@grupont.com.br e Criação de Animações para Internet. / NT Editora. -- Brasília: p. : il. ; 21,0 X 29,7 cm. ISBN Criação de Animações para a Internet com Flash CS4. Copyright 2014 por NT Editora. Nenhuma parte desta publicação poderá ser reproduzida por qualquer modo ou meio, seja eletrônico, fotográfico, mecânico ou outros, sem autorização prévia e escrita da NT Editora.

4 LEGENDA ÍCONES Prezado(a) aluno(a), Ao longo dos seus estudos, você encontrará alguns ícones na coluna lateral do material didático. A presença desses ícones o(a) ajudará a compreender melhor o conteúdo abordado e também como fazer os exercícios propostos. Conheça os ícones logo abaixo: Saiba Mais Esse ícone apontará para informações complementares sobre o assunto que você está estudando. Serão curiosidades, temas afins ou exemplos do cotidiano que o ajudarão a fixar o conteúdo estudado. Importante O conteúdo indicado com esse ícone tem bastante importância para seus estudos. Leia com atenção e, tendo dúvida, pergunte ao seu tutor. Dicas Esse ícone apresenta dicas de estudo. Exercícios Toda vez que você vir o ícone de exercícios, responda às questões propostas. Exercícios Ao final das lições, você deverá responder aos exercícios no seu livro. Bons estudos!

5 Sumário 1. APRESENTANDO O FLASH CS Conceitos básicos sobre imagens A interface do Flash CS O palco Os painéis A biblioteca O painel Ferramentas A janela de ações APRESENTANDO AS FERRAMENTAS Introdução Definindo figuras geométricas GRUPOS, SÍMBOLOS E TEXTOS Convertendo bitmaps em vetores gráficos Agrupando formas Criando símbolos Editando símbolos Trabalhando com textos FERRAMENTAS ESPECIAIS A Ferramenta pincel de borrifar A Ferramenta deco Trabalhando com bones A Ferramenta rotação 3D NT Editora

6 5. CRIANDO ANIMAÇÕES SIMPLES A linha de tempo Animações com interpolação Predefinições de movimento ELEMENTOS ESPECIAIS Criando botões Inserindo e editando sons Aplicando filtros Modos de mesclagem Vídeos e componentes EXPORTANDO IMAGENS E FILMES Exportando imagens e filmes Criando um projetor Publicando o arquivo em HTML Ajustando os atributos de um filme CRIANDO UM PORTFÓLIO Preparando o palco Criando o layout Inserindo os elementos Definindo a navegação básica Finalizando o projeto Criação de Animações para Internet 5

7

8 1. APRESENTANDO O FLASH CS4 Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. 1.1 Conceitos básicos sobre imagens O objeto principal deste estudo é a imagem, mais precisamente a imagem gráfica. Imagem gráfica é a imagem trabalhada num formato adequado aos computadores e, por extensão, ao universo da Internet. A rigor, existem dois formatos para construção de imagens gráficas: bitmaps e vetoriais. Vamos nos deter um pouco em cada um deles, pois é fundamental conhecer as diferenças entre ambos. Imagine a tela do computador como um gigantesco mosaico formado por minúsculos pontos. Cada ponto é conhecido como pixel. Os pixels são quadrados coloridos que se combinam para criar uma imagem. O número de bits de informação armazenado em cada pixel determina a quantidade de combinações de cores que uma imagem possui. Existem imagens indexadas (até 256 cores), também conhecidas como imagens de 8 bits, bem como imagens com resoluções que chegam a 24 bits que permitem uma combinação de milhões de cores. Bitmaps (mapas de bits) são imagens gráficas formadas por pixels. Esse formato é indicado para fotos e imagens geradas em programas de pintura. Existem diversos tipos de imagens bitmaps que suportam diferentes profundidades de cores, abaixo serão apresentadas suas características: - tiff (Tagged-Image File Format) milhões de cores. - jpeg (Join Photographic Experts Group) acima de 16 bits. - gif (Graphics Interchange Format) até 8 bits (256 cores). - bmp (Bitmap) padrão Windows de imagem, permite até milhões de cores. - Pict padrão Macintosh de imagem. - Tga (Targa) padrão de imagem para saída em vídeo. Imagens vetoriais são formadas por linhas e arcos gerados matematicamente, que informam ao computador qual a fórmula matemática da figura, suas cores e as coordenadas que definem a sua posição. As imagens vetoriais têm uma série de vantagens sobre os bitmaps, entre elas a de poderem ser escalonadas sem perda de qualidade. São muito mais leves e compactas de serem carregadas. Para a Internet, os dois padrões de imagens mais usados são o jpeg e o gif. Os arquivos gif possuem ainda a vantagem de serem animados e são os mais usados na construção de banners, mas atualmente os banners vetoriais feitos em flash são muito mais populares. 1.2 A interface do Flash CS4 As ferramentas do Flash CS4 ajudam a criar, organizar e sincronizar animações compostas de imagens e sons aliadas à interatividade. Imagens de bitmaps também podem ser importadas para fazerem parte do projeto, podendo ser vetorizadas e, posteriormente, alteradas. Além disso, permitem a publicação de seus arquivos na Internet, gerando automaticamente o código fonte de HTML. indexadas: definição para profundidades de cores de uma imagem de até 8 bits. Uma imagem indexada possui sua paleta de cores limitada até 256 cores, sendo que cada cor possui um endereço específico dentro dessa paleta. SUMÁRIO Criação de Animações para Internet 7

9 Atualmente, na versão CS4, sua linguagem de programação (actionscript) é uma poderosa aliada para a criação de aplicativos web, como formulários, navegabilidade e interatividade dos sites. O Flash se tornou padrão para o desenvolvimento de arte vetorial para a Internet. As versões mais recentes dos navegadores mais famosos já possuem o plugin Flash player disponível em suas instalações. Plugin: Extensões de códigos desenvolvidos por terceiros, e que são adicionados a programas instalados, que acrescentam comandos ou funções, geralmente possibilitando o carregamento de certos tipos de arquivos (sons, animações, etc.). 1.3 O palco Na prática deve funcionar da seguinte forma: Na coluna Criar novo, deve-se clicar em Arquivo Flash (AS 3.0). Esta é a interface padrão. Ela é denominada Essenciais e pode ser mudada a qualquer momento, bastando escolher outra configuração no botão Alternador da área de trabalho ou criando sua própria configuração. Veremos mais sobre a área de trabalho logo à frente Em seguida, é necessário definir a opção Essenciais para se ter uma melhor visualização do conjunto de ferramentas e painéis. Essa área é conhecida como palco. Todos os arquivos de imagens vetoriais ou bitmaps são visualizadas aqui. É no palco que temos toda a visualização de como o trabalho está. Imagine-o como uma tela de pintura ou prancheta esperando pra ser usada. O tamanho padrão que o Flash assume para o palco é de 550 X 400 pixels. Evidentemente, esse tamanho pode ser alterado, e veremos como nas próximas lições. Réguas e guias podem ser inseridas para auxiliarem na criação dos conteúdos. Porém, esses elementos não são visíveis ao se gerar o arquivo final, pois são somente ferramentas de ajuda. 1.4 Os painéis O Flash CS4 possui painéis que auxiliam o gerenciamento de propriedades dos elementos, tais como visualização, organização e mudanças. Esses painéis podem ser fechados ou abertos a qualquer momento, bastando para isso acessar o menu Janela ou as teclas de atalho predefinidas. A maioria é ajustável e pode ser anexada a outro painel ou grupo de painéis. Também é possível deixá-los flutuando na interface do programa, arrastando-os de sua posição original pela sua barra de título. Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. 8 NT Editora SUMÁRIO

10 1.5 A biblioteca Os arquivos criados ou importados no Flash, que são transformados em símbolos, ficam organizados no painel Biblioteca. Imagens, vídeos e sons também trazidos para o palco ficam organizados nesse painel. Símbolos podem ser arquivos gráficos, sons e clipes de filme. Pode-se reutilizar um símbolo guardado no painel Biblioteca quantas vezes se queira, bastando arrastá-lo para a área de trabalho (Palco). Os elementos que estão presentes na biblioteca podem ser separados por pastas. Isso ajuda bastante na organização de grandes projetos. 1.6 O painel Ferramentas Todas as ferramentas necessárias para a criação e edição de gráficos encontram-se no painel Ferramentas. Dependendo da ferramenta selecionada, são mostrados modificadores que alteram o comportamento de cada uma delas. As ferramentas estão distribuídas em áreas ao longo do painel: Área de ferramentas de desenho, pintura e seleção. Área de exibição. Área de cores. Área de opções. Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. Observação: a maioria das ferramentas também pode ser acessada por teclas de atalho, o que torna o trabalho mais ágil para usuários experientes. 1.7 A janela de ações O Flash desenvolveu uma linguagem de programação própria, conhecida como ActionScript. A versão mais recente dessa linguagem é a 3.0. A versão anterior, o ActionScript 2.0, ainda está presente nessa versão do Flash, mas algumas novas funcionalidades incorporadas à ferramenta só estarão habilitadas se um novo arquivo for criado baseado na versão AS 3.0. O ActionScript 3.0 é uma linguagem mais poderosa que suas versões anteriores e está mais direcionado para a programação orientada a objetos. Como já estamos em um arquivo configurado para o padrão ActionScript 3.0, é necessário acessar o menu Janela e selecionar a opção Ações (ou tecle F9). Na janela aberta devem ser inseridos os comandos e códigos de ActionScript. SUMÁRIO Criação de Animações para Internet 9

11 A linguagem é habilitada para interpretar o ActionScript 3.0. Logo ao lado estão os comandos referentes à linguagem selecionada. Para fechar a janela Ações, clique em <F9>. Como já se tem conhecimento, o Flash CS4 é uma poderosa ferramenta para a criação de conteúdo para diversas mídias digitais. A princípio, a ferramenta foi criada para se desenvolver pequenas animações e alguma interatividade para as páginas na Internet. Com o aumento de usuários e a facilidade de uso que a ferramenta oferecia para os desenvolvedores, rapidamente se tornou uma referência para a criação de conteúdo interativo, animação e vídeo. Muitos desenhos animados que são veiculados na TV hoje em dia são criados com o Flash. Por esse motivo seus desenvolvedores criaram padrões de espaços de trabalho diferentes para cada tipo de usuário. Parabéns, você finalizou esta lição! Agora responda às questões ao lado. Exercícios Questão 01 Sobre as imagens conhecidas como bitmap, julgue as afirmativas abaixo: a) ( ) são formados por pixels; b) ( ) são escalonáveis; c) ( ) as imagens com paletas indexadas possuem 256 cores; d) ( ) algumas imagens bitmaps possuem resoluções de até 24 bits que permitem uma combinação de milhões de cores. Questão 02 Como se chama a configuração padrão dos painéis no espaço de trabalho do Flash? a) Animator. b) Configurado. c) Essenciais. d) Layout. Questão 03 Sobre os vetores, é correto afirmar que: a) não são escalonáveis; b) são formados por linhas e arcos gerados matematicamente; c) são maiores que as imagens bitmap, em relação à quantidade de Kbytes; d) não são indicados na construção de banners, por serem muito complexos. Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. 10 NT Editora SUMÁRIO

12 Questão 04 Como são chamadas as janelas da interface do Flash? a) Painéis. b) Cortinas. c) Menus. d) Abas. Questão 05 Entre as opções abaixo, qual não é considerada um tipo de imagem bitmap: a) pict; b) jpeg; c) tga; d) html; e) tiff; f) gif. Questão 06 As imagens são geradas no monitor a partir de pequenos pontos conhecidos por: a) arcos; b) bmp; c) pixels; d) polegadas. Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. Questão 07 Sobre o Flash CS4, qual das afirmações abaixo está correta? a) Apesar de suas ferramentas, não permite a publicação de seus arquivos na Internet. b) É uma ferramenta direcionada para a Internet, feita para criação de imagens vetoriais, animações e interatividade. c) É uma ferramenta de animação exclusiva para a Internet, mas permite criar sites gerando os códigos HTML automaticamente. d) Se tornou padrão para o desenvolvimento de imagens bitmap para a Internet. Questão 08 Atualmente, o Flash vem sendo muito utilizado para a criação de: a) mídia impressa; b) cartões de visita; c) programas; d) desenhos animados. SUMÁRIO Criação de Animações para Internet 11

13 Questão 09 Analise as afirmações sobre os painéis do Flash CS4 e marque a INCORRETA: a) possui painéis que auxiliam o gerenciamento de propriedades dos elementos, tais como visualização, organização e mudanças; b) todas as ferramentas necessárias para a criação e edição de gráficos encontram-se no painel Ferramentas; c) os painéis podem ser fechados ou abertos a qualquer momento; d) os painéis não são ajustáveis, mas podem ser anexados a outros painéis ou grupo de painéis. Questão 10 Qual o nome da linguagem de programação utilizada no Flash CS4? a) Javascript. b) ActionScript. c) ScriptMaster. d) Basic. Reprodução proibida. Copyright NT Editora. Todos os direitos reservados. 12 NT Editora SUMÁRIO