Deve ajudar...

[Thiago Goulart dos Santos]

Apostila

Nível Básico

Apostila Flash 5.0 Básico - 2 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Índice

1 – Introdução (3)

* Apresentação (3)

* Conceitos Iniciais (4)

* Interface (7)

2 - Desenho Vetorial (9)

* Ferramentas (9)

* Características do Desenho (10)

* Imagens Importadas (14)

* Organizando (16)

3 – Símbolos (17)

* Conceito (17)

* Tipos (18)

* Bibliotecas (19)

4 – Animações (21)

* Conceitos (21)

* Frame-by-frame (Quadro-a-Quadro) (23)

* Tweening (Interpolação) (24)

- Motion (24)

- Shape (Forma) (25)

5 – Botões (26)

* Conceitos (26)

6 - Ações Básicas (29)

* Conceitos

7 – Publicação (29)

Apostila Flash 5.0 Básico - 3 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Introdução

Apresentação

O curso tem como objetivo apresentar as funcionalidades e

características da ferramenta, principalmente os conceitos de utilização

desta ferramenta, de maneira que o aluno aprenda a planejar e visualizar

o desenvolvimento de seu projeto em Flash,

Esta apostila vem servir de apoio didático ao curso Flash 5.0 Básico,

os tópicos foram agrupados por área de assunto e ordenados, pensandose

em uma seqüência que ajude a formar desde o aprendizado, conceitos

fundamentais para uma utilização profissional e otimizada do Flash 5.0,

nesta apostila o aluno encontra material de apoio, material de referência

e propostas de exercícios práticos. Ao concluir o curso, você estará

familiarizado com os principais processos de criação/produção de uma

aplicação em Flash 5.0.

Apostila Flash 5.0 Básico - 4 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Conceitos Iniciais

Flash é um software desenvolvido pela Macromedia que possibilita a

criação de conteúdos multimídia de alta qualidade, interativos e

animados, otimizados para a publicação na internet.

Conteúdo produzido em Flash pode ser:

- Botões;

- Banners;

- Jogos;

- Formulários;

- Descanso de Tela;

- Interfaces de Navegação;

- Sites.

Um dos primeiros passos no inicio de um projeto é a definição da

tecnologia utilizada nas partes ou processos do projeto, a correta

aplicação da ferramenta está intimamente ligada com o conhecimento

de suas funcionalidades e aplicações, e a escolha da ferramenta certa

para seu objetivo trará resultados mais proveitosos e profissionais.

Características:

Os arquivos criados no Flash guardam e apresentam as informações

gráficas vetorialmente. Isto significa que as imagens são entendidas como

formas e preenchimentos e o que é armazenado são seus parâmetros,

diferente dos formatos bitmap (mapa de bits - .jpg, .gif, .bmp),

normalmente utilizado para armazenamento de fotos e imagens. A

imagem de um círculo, por exemplo, armazenaria vetorialmente apenas os

valores referentes à posição e ao raio deste círculo. Uma imagem bitmap

armazena a informação da cor de cada pixel que forma o desenho, o que

geralmente ocupa muito mais espaço.

Apostila Flash 5.0 Básico - 5 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Bitmap (mapa de bits):

Comparação:

Apostila Flash 5.0 Básico - 6 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Exemplo Gráfico Vetorial:

Os desenhos vetoriais podem ser redimensionados sem perda da

qualidade de definição e sem diferença no tamanho do arquivo.

O seu arquivo de trabalho no Flash, ou arquivo-projeto, é salvo com

a extensão .FLA, como o código fonte de um programa, e é nele que você

vai desenvolver todo o conteúdo. Para a visualização e publicação deste

conteúdo, ele precisa ser exportado para o formato .SWF.

Apostila Flash 5.0 Básico - 7 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Interface

Conhecendo a Interface do Flash e seus elementos:

Explore sua área de trabalho!

Barra de Menus

Barra de Ferramentas

(desenho)

Barra de Ferramentas (padrão)

Timelines / Linhas do Tempo

Library / Biblioteca

Atalhos para Panels

Layers/Camadas

Stage / Palco

Panels / Painéis de Configurações

ZOOM

Apostila Flash 5.0 Básico - 8 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Começando um Projeto:

Vamos começar nosso primeiro projeto utilizando o Flash e aproveitar

para saber como se configura as principais características de seu Filme.

Comece um novo Filme.

Através do menu Modify>Movie (Modificar > Filme)(Ctrl+M) acesse as

propriedades de seu Filme :

Taxa de Quadros (Frame Rate):

Define em quantos quadros por segundo seu filme será apresentado,

alterando este valor é possível conseguir filmes mais detalhados (e

demorados) ou filmes mais rápidos.

Dimensões (Dimensions):

A dimensão de seu Palco, o tamanho final visualizável de seu filme.

Corresponder (Match): Impressora/Conteúdo (Printer/Contents)

Atribui as dimensões de seu filme para se ajustar ao tamanho do

papel configurado pela sua impressora, ou a menor área possível

com relação ao conteúdo já disposto.

Cor do fundo(Background Color):

Define a cor de fundo do Filme.

Unidade de medida:

Define a unidade de medida de trabalho, a mais cômoda costuma

ser pixels.

Explore as configurações disponíveis, são as definições de como seu filme

será publicado e apresentado.

Apostila Flash 5.0 Básico - 9 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Desenho Vetorial

Ferramentas

O Flash 5.0 dispõe das principais ferramentas para desenho vetorial.

Esta é a barra de Ferramentas de Desenho:

Seta / Arrow (V)

Linha / Line (N)

Caneta / Pen (P)

Lápis / Pencil (Y)

Conta Gotas / Dropper (i)

Oval (O)

Tinteiro / Ink Botle (S)

Subseleção / Subselect (A)

Texto / Text (T)

Pincel / Brush (

Borracha / Eraser (E)

Laço / Lasso (L)

Retângulo / Rectangle ®

Balde de Tinta/ Paint Bucket (K)

Ferramentas de Visualização

Opções Específicas da

Ferramenta Selecionada

Seleção de cores: Linha

Preenchimento

Apostila Flash 5.0 Básico - 10 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Características do Desenho

A técnica de desenho vetorial possui algumas características que

com sua utilização se tornam familiar.

Um desenho vetorial é constituído apenas de Linhas e

Preenchimento (que podem ser nulos). As linhas quando sobrepostas se

associam, já os preenchimentos possuem dois comportamentos diferentes,

quando da mesma cor se associam, quando de cores distintas a área de

baixo é subtraída.

Com a resolução dos exercícios propostos, estas e outras

características se tornarão mais claras.

Exercícios:

01)

- Desenhe linhas, utilizando e explorando as configurações das

ferramentas:

o Linha

o Caneta

o Lápis (observe as opções de modo!)

Opções do Lápis

(modo da linha)

Apostila Flash 5.0 Básico - 11 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Faça modificações agora, utilizando as ferramentas:

o Seta

o Subseleção

o Laço

o Smooth (suavizar, alisar)

o Straighten (regular)

o Rotacionar

o Redimensionar

Dicas:

Clicando em Window >Panel >Stroke (Janela > Painéis > Linha),

você abre o painel específico de configuração de traços:

Opções da Seta:

snap

smooth

straighten

rotate

scale

Apostila Flash 5.0 Básico - 12 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

02)

- Desenhe formas conhecidas (estrela, sol, etc..) explorando as

ferramentas :

o Oval

o Retângulo

o Pincel

o Balde de Tinta

o Borracha

o Contagotas

Assim como no exercício anterior, procure utilizar as opções e os

recursos de cada ferramenta:

Opções da Borracha:

Dê atenção às configurações do Preenchimento!

Apostila Flash 5.0 Básico - 13 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Você já sabe onde encontrar mais opções de configuração para

esta ferramenta:

03)

- Para que servem estas ferramentas?

Apostila Flash 5.0 Básico - 14 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Imagens Importadas

Você pode também importar imagens de outros arquivos e em

outros formatos através do menu File>Import (Arquivo>Importar). Dentre os

formatos disponíveis, é possível escolher entre importar o conteúdo de um

outro arquivo flash, imagens vetoriais em outros formatos (freehand,

ilustrator, wmf) e imagens bitmaps (.jpg, .gif, .bmp).

Apostila Flash 5.0 Básico - 15 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Organizando

Desenhando no Flash você deve ter reparado que muitas vezes é

impossível fazer um desenho sem alterar ou confundir-se com outro já

pronto. Uma das maneira de começar a organizar seu conteúdo é

agrupando as formas assim como nos programas comuns de edição de

imagens. Para tal, selecione as formas que pretende agrupar e clique em

Modify > Group (Modificar > Agrupar) ou pressione Ctrl+G. Para editar

figuras agrupadas, basta dar um duplo-clique sobre a imagem.

Assim como os principais programas de gráficos, o Flash também

trabalha com layers (camadas), controle e operações com as camadas,

que podem ser acessados pelos atalhos:

Apostila Flash 5.0 Básico - 16 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

É fundamental que se esteja familiarizado a trabalhar com camadas,

sua utilização facilita a criação e manutenção de seu projeto.

Exercícios:

04)

- Comece um novo filme e desenhe uma casa, aplicando os

conceitos desenvolvidos nos exercícios anteriores.

- Desenhe um cenário de fundo para sua casa.

- Salve seu exercício.

Dicas:

- Procure identificar quais são os elementos de seu desenho e

trabalhar cada um em uma camada diferente.

- Dê nomes sugestivos às camadas

- É possível ocultar ou travar as camadas que desejar, experimente!

Apostila Flash 5.0 Básico - 17 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Apostila Flash 5.0 Básico - 18 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Símbolos

Para começarmos a utilizar os recursos de animação do Flash, é

preciso antes aprender a trabalhar com Símbolos.

Para o Flash interagir com um elemento, é preciso que este elemento

seja definido como um objeto, um Símbolo. Como objeto, os símbolos

possuem propriedades, ações e comportamentos, que poder ser definidos

e/ou alterados no decorrer da animação.

Ao inserir um símbolo em uma animação, você está inserindo uma

instância do objeto definido. É como se fosse uma cópia, porém com

características diferentes. Instâncias de um mesmo símbolo possuem

mesmo conteúdo, porém podem possuir propriedades e características

diferentes.

Apostila Flash 5.0 Básico - 19 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Tipos

Existem três tipos possíveis de símbolos: Graphic, Movie Clip e Button

(Gráfico, Clipe de Filme e Botão), que se diferenciam pelo comportamento

e pelas propriedades que conheceremos mais adiante.

Para transformar uma forma em um símbolo, selecione alguma forma

em seu palco e clique em Insert>Convert to Symbol (Inserir>Converter para

Símbolo), escolha o nome do objeto e o tipo do símbolo: Graphic.

Descrição dos tipos de Símbolos:

· Graphic(gráfico): Ideal para elementos que não interagem com o

filme, a linha de tempo dos símbolos do tipo gráfico correm junto

com a linha de tempo principal. Não realizam ação, nem recebem

interação.

· Movie Clip(clipe de filme): Semelhante ao gráfico, porém possui linha

de tempo independente, um clipe de filme se comporta como um

arquivo flash a parte, pode executar ações e receber controle e

interação externa.

· Button(botão): Um símbolo do tipo botão, responde a eventos do

mouse(up, over, down, e hit) e executa ações.

Conheceremos melhor as características de cada tipo de símbolo quando

precisarmos aplicar os conceitos.

Apostila Flash 5.0 Básico - 20 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Biblioteca

Quando criamos um símbolo, este é arquivado na biblioteca do

filme, a partir dela é possível gerenciar os objetos de seu filme,

organizando, alterando referências e visualizando o conteúdo existente.

Você acessa a biblioteca de seu filme através do menu

Window>Library (Janela>Biblioteca), ou através do atalho Ctrl+L.

exemplo de biblioteca

Observe que as imagens importadas também aparecem na

biblioteca.

Apostila Flash 5.0 Básico - 21 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Exercícios:

05)

- Abra o arquivo biblioteca.fla e copie o símbolo Mouse para um

novo filme.

- Crie instâncias do Mouse, diferenciando uma de outra, aplique

efeitos, redimensione.

- Edite agora o conteúdo do símbolo e veja o que acontece!

Símbolo “Mouse” do tipo Gráfico

- Salve seu exercício.

Dicas:

- É possível arrastar símbolos de outras bibliotecas para seu filme.

- É possível abrir um arquivo Flash, como uma biblioteca,

experimente.

- Procure o painel de Instâncias e o de efeitos.

Apostila Flash 5.0 Básico - 22 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Animações

Finalmente o que interessa, Animar!

Dizemos que o Flash cria conteúdo 3D, isso porque como já deve ter

observado, temos o plano de desenho (2D) e tudo o que acontece neste

plano acontece em função de um Tempo (a terceira dimensão), que é

representado pela timeline ou linha-do-tempo, conheça:

Cada caixinha na timeline representa um frame (quadro) de sua

animação, que roda por default a 12fps (frames-por-segundo). Quando

iniciamos uma animação, esta contém apenas um frame, ou seja, ainda é

estática.

Exercícios:

06)

- Comece uma nova animação;

- Insira o símbolo “Biplane” disponível em biblioteca.fla

- Insira 30 quadros em seu filme.

Quadro nº:

Posicionador

Escala da timeline

Quadro atual

Taxa de reprodução

Tempo decorrido

Onion skins

Apostila Flash 5.0 Básico - 23 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Observe a alteração na timeline:

O Quadrado com a bolinha preta representa um Key Frame e indica

os quadros-chave da animação, ou seja, onde existe mudança no

conteúdo da mesma, o restante dos quadros cinzas são Frames(quadros),

e indicam que o conteúdo do KeyFrame imediatamente anterior continua

presente. O quadradinho no fim da animação indica o último quadro em

que o conteúdo do KeyFrame aparece.

É possível desenvolver basicamente dois tipos de animações no

Flash, elas são explicadas a seguir:

Apostila Flash 5.0 Básico - 24 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Frame by frame (Quadro-a-quadro)

É a mais simples, porém a mais trabalhosa. Para criar animações

quadro-a-quadro (como o próprio nome sugere), é necessário que se

defina todos os quadros da animação, ou seja, todo quadro é um quadrochave

(keyframe).

Exercícios:

07)

- Faça uma animação quadro-a-quadro utilizando um símbolo ou

uma forma livre.(sugestão: utilize o símbolo “boneco” do arquivo

biblioteca.fla)

Dicas:

- Utilize Modify>Break Apart (Ctrl+ para quebrar um símbolo em

formas novamente.

- Depois de pronto, explore as opções de “Onion Skin”

Apostila Flash 5.0 Básico - 25 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Tweening (Animação Linear)

O Tweening é a principal forma de animação no Flash, é uma

maneira mais fácil de se animar, basta definir o quadro chave inicial e o

quadro chave final e comandar ao Flash que realize o tweening. O Flash

detecta a mudança e “tenta adivinhar” qual era o movimento desejado.

Existem duas formas de Tweening:

Tweening Motion:

Utilizado para animar símbolos. Para a correta utilização do Tweening

motion é preciso alguns cuidados:

- Somente Símbolos podem ser animados.

- Somente um Símbolo por Keyframe/Layer deve ser utilizado.

- O mesmo Símbolo deve estar presente no keyframe inicial e final.

Exercícios:

08)

- Importe o símbolo “águia” de biblioteca.fla e faça uma

animação dela sobrevoando o seu palco.

- Explore as configurações do Tweening (procure o painel Frame)

o Scale

o Rotate

o Easing

- Adicione efeitos na instância animada e confira o resultado na

animação.

- É possível fazer a águia percorrer um caminho sinuoso?

- Salve seu exercício.

Apostila Flash 5.0 Básico - 26 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Tweening Shape:

Transforma uma forma livre em outra, criando um efeito de “morph”.

O procedimento de criação é semelhante ao do Tweening Motion, porém

os quadros chaves só devem conter formas livres.

Exercícios:

09)

- Importe os símbolos da pasta ex9 de biblioteca.fla e faça

animações de forma, fazendo uma figura virar outra

consecutivamente. (Primeiro transforme os símbolos em formas!)

- Salve seu exercício.

Dica:

- Uma dica de forma: É possível adicionar Shape Hints ao tweening

shape através do menu Modify>Transform>Add Shape Hint ou

pelo atalho Ctrl+H.

Apostila Flash 5.0 Básico - 27 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Botões

Os botões no Flash, assim como os gráficos, são símbolos que

possuem características especiais. Um símbolo do tipo botão possui 3

estágios, Up (levantado), Over (em cima) e Down (abaixado), que

representam os comportamentos possíveis de um botão com relação ao

cursor do Mouse:

- UP : botão solto

- Over: cursor sobre o botão

- Down: botão clicando;

e um quarto frame, Hit, que representa a área clicavel do botão.

Observe:

Exercícios:

09)

- Crie três botões distintos que sugiram a ideia de Play, Pause, e

Volta, com todos os estados definidos.

- Salve seu exercício.

Apostila Flash 5.0 Básico - 28 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Ações Básicas (controle de reprodução)

Para começarmos a controlar nossa animação e até mesmo para

que o uso de botões faça sentido, é hora de aprendermos como inserir

Ações no Flash. Através de Ações é possível controlar a reprodução de um

filme, planejar navegação de uma aplicação, configurar o modo de

visualização, criar interações das mais diversas com o usuário, programar

eventos e menus, definir variáveis, interagir com aplicativos externos e até

mesmo gerar uma animação. É possível definir ações em Frames, em

símbolos do tipo Movie Clip e em botões.

Para visualizar as ações disponíveis, clique em Window>Actions

(Janela>Ações ), ou clique no atalho no canto inferior direito da tela do

Flash:

Janela de Ações :

Para Inserir uma ação, basta selecionar um objeto válido e a ação

que deseja atribuir.

Apostila Flash 5.0 Básico - 29 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Exercícios:

09)

- Escolha uma das animações feitas

- Insira os Botões criados no último exercício

- Adicione as respectivas ações aos botões, de modo a criar um

controle da animação.

Apostila Flash 5.0 Básico - 30 -

Desenvolvimento: Cláudio Martinez

Apoio: Roander Scherer

Publicação

Agora que temos uma animação pronta e com controles no Flash,

nos resta exportar, publicar e visualizar o resultado.

Sua animação pode ser exportada em diversos formatos. O padrão

para animações Flash é a exportação para o Flash Player e Flash Plug-in,

nos quais a animação é compilada e recebe a extensão .SWF e está

pronta para ser distribuída ou inserida em uma página HTML . Clique em

File>Export (Arquivo>exportar) para verificar os formatos de exportação do

Flash.

Para publicar seu filme, clique em File>Publish Setings (Arquivo,

Configurar Publicação) e escolha o formato desejado:

Em seguida clique em Publish (Publicar). Os arquivos selecionados

serão gerados no diretório em que a animação está salva.

Abra e veja o resultado!