AutorMaycon SadalaGraduado 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.

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.

Design InstrucionalNT Editora

RevisãoNT Editora

Editoração EletrônicaNT Editora

Projeto GráficoNT Editora

CapaNT Editora

IlustraçãoNT Editora

NT Editora, uma empresa do Grupo NT SCS Quadra 2 – Bl. C – 4º andar – Ed. Cedro IICEP 70.302-914 – Brasília – DFFone: (61) 3421-9200sac@grupont.com.brwww.nteditora.com.br e www.grupont.com.br

Sadala, Maycon.

Criação de Animações para Internet / Maycon Sadala – 1. ed. – Brasília: NT Editora, 2014.

64 p. il. ; 21,0 X 29,7 cm.

ISBN 978-85-68004-36-4

1. Animações. 2. Internet. 3. Flash.

I. Título

LEGENDA

ÍCONES

Prezado(a) aluno(a),Ao longo dos seus estudos, você encontrará alguns ícones na coluna lateral do mate-rial didático. A presença desses ícones o(a) ajudará a compreender melhor o conteúdo abordado e a fazer os exercícios propostos. Conheça os ícones logo abaixo:

Saiba maisEsse ícone apontará para informações complementares sobre o assunto que você está estudando. Serão curiosidades, temas afins ou exemplos do cotidi-ano que o ajudarão a fixar o conteúdo estudado.

ImportanteO conteúdo indicado com esse ícone tem bastante importância para seus es-tudos. Leia com atenção e, tendo dúvida, pergunte ao seu tutor.

DicasEsse í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!

4 NT Editora

Sumário

1. APRESENTANDO O FLASH CS4 ...................................................................... 71.1 Conceitos básicos sobre imagens ......................................................................................71.2 A interface do Flash CS4 ........................................................................................................71.3 O palco .........................................................................................................................................81.4 Os painéis ....................................................................................................................................81.5 A biblioteca .................................................................................................................................91.6 O painel Ferramentas ..............................................................................................................91.7 A janela de ações ......................................................................................................................9

2. APRESENTANDO AS FERRAMENTAS ........................................................... 132.1 Introdução ............................................................................................................................... 132.2 Definindo figuras geométricas ......................................................................................... 13

3. GRUPOS, SÍMBOLOS E TEXTOS .................................................................... 173.1 Convertendo bitmaps em vetores gráficos ................................................................. 173.2 Agrupando formas ................................................................................................................ 183.3 Criando símbolos .................................................................................................................. 193.4 Editando símbolos ................................................................................................................ 203.5 Trabalhando com textos ..................................................................................................... 20

4. FERRAMENTAS ESPECIAIS ........................................................................... 244.1 A Ferramenta pincel de borrifar ....................................................................................... 244.2 A Ferramenta deco ............................................................................................................... 244.3 Trabalhando com bones ...................................................................................................... 254.4 A Ferramenta rotação 3D ................................................................................................... 26

5. CRIANDO ANIMAÇÕES SIMPLES ................................................................. 295.1 A linha de tempo ................................................................................................................... 295.2 Animações com interpolação ........................................................................................... 305.3 Predefinições de movimento ............................................................................................ 33

6. ELEMENTOS ESPECIAIS ................................................................................ 366.1 Criando botões ....................................................................................................................... 366.2 Inserindo e editando sons .................................................................................................. 386.3 Aplicando filtros ..................................................................................................................... 39

5Criação de Animações para Internet

6.4 Modos de mesclagem ......................................................................................................... 406.5 Vídeos e componentes ........................................................................................................ 40

7. EXPORTANDO IMAGENS E FILMES .............................................................. 457.1 Exportando imagens e filmes .......................................................................................... 457.2 Criando um projetor ............................................................................................................. 467.3 Publicando o arquivo em HTML ....................................................................................... 477.4 Ajustando os atributos de um filme ............................................................................... 48

8. CRIANDO UM PORTFÓLIO ............................................................................ 528.1 Preparando o palco .............................................................................................................. 528.2 Criando o layout ..................................................................................................................... 528.3 Inserindo os elementos ....................................................................................................... 558.4 Definindo a navegação básica .......................................................................................... 618.5 Finalizando o projeto ........................................................................................................... 62

7Criação de Animações para Internet

1. APRESENTANDO O FLASH CS4

1.1 Conceitos básicos sobre imagensO 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. Va-mos 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 com-binaçõ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 matemati-camente, 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 CS4As 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 fa-zerem 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 pro-fundidades de cores de uma ima-gem 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 des-sa paleta.

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

8 NT Editora

Atualmente, na versão CS4, sua linguagem de programação (actionscript) é uma poderosa alia-da 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.

1.3 O palcoNa 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 configu-raçã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éisO 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 flutuan-do na interface do programa, arrastando-os de sua posição original pela sua barra de título.

Plugin: Extensões de códigos desenvol-vidos por terceiros, e que são adicio-nados a programas instalados, que acres-centam comandos ou funções, geralmente possibi-litando o carrega-mento de certos tipos de arquivos (sons, animações, etc.).

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

9Criação de Animações para Internet

1.5 A bibliotecaOs arquivos criados ou importados no Flash, que são transformados em símbolos, ficam organiza-

dos 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 guar-dado 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 FerramentasTodas 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:

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çõesO 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 aces-sar 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.

• Área de ferramentas de desenho, pintura e seleção.

• Área de exibição.

• Área de cores.

• Área de opções.

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

10 NT Editora

Parabéns, você fina-lizou esta lição!

Agora responda às questões ao lado.

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 ferra-menta para a criação de conteúdo para diversas mídias digitais.

A princípio, a ferramenta foi criada para se desenvolver peque-nas 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 tra-balho diferentes para cada tipo de usuário.

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 traba-lho 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.

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

11Criação de Animações para Internet

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.

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 ge-rando 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.

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.

12 NT Editora

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.

Repr

oduç

ão p

roib

ida.

Cop

yrig

ht ©

NT

Edito

ra. T

odos

os

dire

itos

rese

rvad

os.