Apostila

Nvel Bsico

Apostila Flash 5.0 Bsico

-2-

ndice
1 Introduo * Apresentao * Conceitos Iniciais * Interface 2 - Desenho Vetorial * Ferramentas * Caractersticas do Desenho * Imagens Importadas * Organizando 3 Smbolos * Conceito * Tipos * Bibliotecas 4 Animaes (3) (3) (4) (7) (9) (9) (10) (14) (16) (17) (17) (18) (19) (21)

* Conceitos (21) * Frame-by-frame (Quadro-a-Quadro) (23) * Tweening (Interpolao) (24) - Motion (24) - Shape (Forma) (25) 5 Botes * Conceitos 6 - Aes Bsicas * Conceitos 7 Publicao (26) (26) (29)

(29)

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

-3-

Introduo
Apresentao
O curso tem como objetivo apresentar as funcionalidades e caractersticas da ferramenta, principalmente os conceitos de utilizao 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 didtico ao curso Flash 5.0 Bsico, os tpicos foram agrupados por rea de assunto e ordenados, pensandose em uma seqncia que ajude a formar desde o aprendizado, conceitos fundamentais para uma utilizao profissional e otimizada do Flash 5.0, nesta apostila o aluno encontra material de apoio, material de referncia e propostas de exerccios prticos. Ao concluir o curso, voc estar familiarizado com os principais processos de criao/produo de uma aplicao em Flash 5.0.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

-4-

Conceitos Iniciais
Flash um software desenvolvido pela Macromedia que possibilita a criao de contedos multimdia de alta qualidade, interativos e animados, otimizados para a publicao na internet. Contedo produzido em Flash pode ser: Botes; Banners; Jogos; Formulrios; Descanso de Tela; Interfaces de Navegao; Sites.

Um dos primeiros passos no inicio de um projeto a definio da tecnologia utilizada nas partes ou processos do projeto, a correta aplicao da ferramenta est intimamente ligada com o conhecimento de suas funcionalidades e aplicaes, e a escolha da ferramenta certa para seu objetivo trar resultados mais proveitosos e profissionais.

Caractersticas:
Os arquivos criados no Flash guardam e apresentam as informaes grficas vetorialmente. Isto significa que as imagens so entendidas como formas e preenchimentos e o que armazenado so seus parmetros, diferente dos formatos bitmap (mapa de bits - .jpg, .gif, .bmp), normalmente utilizado para armazenamento de fotos e imagens. A imagem de um crculo, por exemplo, armazenaria vetorialmente apenas os valores referentes posio e ao raio deste crculo. Uma imagem bitmap armazena a informao da cor de cada pixel que forma o desenho, o que geralmente ocupa muito mais espao.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

-5-

Bitmap (mapa de bits):

Comparao:

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

-6-

Exemplo Grfico Vetorial:

Os desenhos vetoriais podem ser redimensionados sem perda da qualidade de definio e sem diferena no tamanho do arquivo. O seu arquivo de trabalho no Flash, ou arquivo-projeto, salvo com a extenso .FLA, como o cdigo fonte de um programa, e nele que voc vai desenvolver todo o contedo. Para a visualizao e publicao deste contedo, ele precisa ser exportado para o formato .SWF.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

-7-

Interface
Conhecendo a Interface do Flash e seus elementos:

Barra de Menus Barra de Ferramentas (desenho)

Barra de Ferramentas (padro) Timelines / Linhas do Tempo Library / Biblioteca

ZOOM Layers/Camadas

Panels / Painis de Configuraes

Atalhos para Panels Stage / Palco

Explore sua rea de trabalho!

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

-8-

Comeando um Projeto:
Vamos comear nosso primeiro projeto utilizando o Flash e aproveitar para saber como se configura as principais caractersticas de seu Filme. Comece um novo Filme. Atravs 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 possvel conseguir filmes mais detalhados (e demorados) ou filmes mais rpidos. Dimenses (Dimensions): A dimenso de seu Palco, o tamanho final visualizvel de seu filme. Corresponder (Match): Impressora/Contedo (Printer/Contents) Atribui as dimenses de seu filme para se ajustar ao tamanho do papel configurado pela sua impressora, ou a menor rea possvel com relao ao contedo 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 cmoda costuma ser pixels. Explore as configuraes disponveis, so as definies de como seu filme ser publicado e apresentado.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

-9-

Desenho Vetorial
Ferramentas
O Flash 5.0 dispe das principais ferramentas para desenho vetorial. Esta a barra de Ferramentas de Desenho:

Seta / Arrow (V) Linha / Line (N) Caneta / Pen (P) Oval (O) Lpis / Pencil (Y) Tinteiro / Ink Botle (S) Conta Gotas / Dropper (i)

Subseleo / Subselect (A) Lao / Lasso (L) Texto / Text (T) Retngulo / Rectangle (R) Pincel / Brush (B) Balde de Tinta/ Paint Bucket (K) Borracha / Eraser (E)

Ferramentas de Visualizao

Seleo de cores:

Linha Preenchimento

Opes Especficas da Ferramenta Selecionada

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 10 -

Caractersticas do Desenho
A tcnica de desenho vetorial possui algumas caractersticas que com sua utilizao se tornam familiar. Um desenho vetorial constitudo 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 subtrada. Com a resoluo dos exerccios propostos, estas e outras caractersticas se tornaro mais claras.

Exerccios:

01) - Desenhe linhas, utilizando e explorando as configuraes das ferramentas: o Linha o Caneta o Lpis (observe as opes de modo!)

Opes do Lpis (modo da linha)

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 11 -

Faa modificaes agora, utilizando as ferramentas: o Seta o Subseleo o Lao o Smooth (suavizar, alisar) o Straighten (regular) o Rotacionar o Redimensionar

Opes da Seta: snap smooth straighten rotate scale

Dicas: Clicando em Window >Panel >Stroke (Janela > Painis > Linha), voc abre o painel especfico de configurao de traos:

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 12 -

02) - Desenhe formas conhecidas (estrela, sol, etc..) explorando as ferramentas : o Oval o Retngulo o Pincel o Balde de Tinta o Borracha o Contagotas Assim como no exerccio anterior, procure utilizar as opes e os recursos de cada ferramenta:
Opes da Borracha:

D ateno s configuraes do Preenchimento!

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 13 -

Voc j sabe onde encontrar mais opes de configurao para esta ferramenta:

03) Para que servem estas ferramentas?

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 14 -

Imagens Importadas
Voc pode tambm importar imagens de outros arquivos e em outros formatos atravs do menu File>Import (Arquivo>Importar). Dentre os formatos disponveis, possvel escolher entre importar o contedo de um outro arquivo flash, imagens vetoriais em outros formatos (freehand, ilustrator, wmf) e imagens bitmaps (.jpg, .gif, .bmp).

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 15 -

Organizando
Desenhando no Flash voc deve ter reparado que muitas vezes impossvel fazer um desenho sem alterar ou confundir-se com outro j pronto. Uma das maneira de comear a organizar seu contedo agrupando as formas assim como nos softwares comuns de edio 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 grficos, o Flash tambm trabalha com layers (camadas), controle e operaes com as camadas, que podem ser acessados pelos atalhos:

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 16 -

fundamental que se esteja familiarizado a trabalhar com camadas, sua utilizao facilita a criao e manuteno de seu projeto.

Exerccios: 04) - Comece um novo filme e desenhe uma casa, aplicando os conceitos desenvolvidos nos exerccios anteriores. - Desenhe um cenrio de fundo para sua casa. - Salve seu exerccio.

Dicas: - Procure identificar quais so os elementos de seu desenho e trabalhar cada um em uma camada diferente. - D nomes sugestivos s camadas - possvel ocultar ou travar as camadas que desejar, experimente!

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 17 -

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 18 -

Smbolos
Para comearmos a utilizar os recursos de animao do Flash, preciso antes aprender a trabalhar com Smbolos. Para o Flash interagir com um elemento, preciso que este elemento seja definido como um objeto, um Smbolo. Como objeto, os smbolos possuem propriedades, aes e comportamentos, que poder ser definidos e/ou alterados no decorrer da animao. Ao inserir um smbolo em uma animao, voc est inserindo uma instncia do objeto definido. como se fosse uma cpia, porm com caractersticas diferentes. Instncias de um mesmo smbolo possuem mesmo contedo, porm podem possuir propriedades e caractersticas diferentes.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 19 -

Tipos
Existem trs tipos possveis de smbolos: Graphic, Movie Clip e Button (Grfico, Clipe de Filme e Boto), que se diferenciam pelo comportamento e pelas propriedades que conheceremos mais adiante. Para transformar uma forma em um smbolo, selecione alguma forma em seu palco e clique em Insert>Convert to Symbol (Inserir>Converter para Smbolo), escolha o nome do objeto e o tipo do smbolo: Graphic.

Descrio dos tipos de Smbolos: Graphic(grfico): Ideal para elementos que no interagem com o filme, a linha de tempo dos smbolos do tipo grfico correm junto com a linha de tempo principal. No realizam ao, nem recebem interao. Movie Clip(clipe de filme): Semelhante ao grfico, porm possui linha de tempo independente, um clipe de filme se comporta como um arquivo flash a parte, pode executar aes e receber controle e interao externa. Button(boto): Um smbolo do tipo boto, responde a eventos do mouse(up, over, down, e hit) e executa aes.

Conheceremos melhor as caractersticas de cada tipo de smbolo quando precisarmos aplicar os conceitos.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 20 -

Biblioteca
Quando criamos um smbolo, este arquivado na biblioteca do filme, a partir dela possvel gerenciar os objetos de seu filme, organizando, alterando referncias e visualizando o contedo existente. Voc acessa a biblioteca de seu filme atravs do menu Window>Library (Janela>Biblioteca), ou atravs do atalho Ctrl+L.

exemplo de biblioteca

Observe que as imagens importadas tambm aparecem na biblioteca.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico Exerccios: 05) -

- 21 -

Abra o arquivo biblioteca.fla e copie o smbolo Mouse para um novo filme. Crie instncias do Mouse, diferenciando uma de outra, aplique efeitos, redimensione. Edite agora o contedo do smbolo e veja o que acontece!

Smbolo Mouse do tipo Grfico

- Salve seu exerccio.

Dicas: possvel arrastar smbolos de outras bibliotecas para seu filme. possvel abrir um arquivo Flash, como uma biblioteca, experimente. Procure o painel de Instncias e o de efeitos.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 22 -

Animaes
Finalmente o que interessa, Animar! Dizemos que o Flash cria contedo 3D, isso porque como j deve ter observado, temos o plano de desenho (2D) e tudo o que acontece neste plano acontece em funo de um Tempo (a terceira dimenso), que representado pela timeline ou linha-do-tempo, conhea:

Quadro n:

Escala da timeline

Posicionador

Tempo decorrido

Taxa de reproduo Onion skins Quadro atual

Cada caixinha na timeline representa um frame (quadro) de sua animao, que roda por default a 12fps (frames-por-segundo). Quando iniciamos uma animao, esta contm apenas um frame, ou seja, ainda esttica.

Exerccios: 06) - Comece uma nova animao; - Insira o smbolo Biplane disponvel em biblioteca.fla - Insira 30 quadros em seu filme.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico Observe a alterao na timeline:

- 23 -

O Quadrado com a bolinha preta representa um Key Frame e indica os quadros-chave da animao, ou seja, onde existe mudana no contedo da mesma, o restante dos quadros cinzas so Frames(quadros), e indicam que o contedo do KeyFrame imediatamente anterior continua presente. O quadradinho no fim da animao indica o ltimo quadro em que o contedo do KeyFrame aparece. possvel desenvolver basicamente dois tipos de animaes no Flash, elas so explicadas a seguir:

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 24 -

Frame by frame (Quadro-a-quadro)

a mais simples, porm a mais trabalhosa. Para criar animaes quadro-a-quadro (como o prprio nome sugere), necessrio que se defina todos os quadros da animao, ou seja, todo quadro um quadrochave (keyframe).

Exerccios: 07) - Faa uma animao quadro-a-quadro utilizando um smbolo ou uma forma livre.(sugesto: utilize o smbolo boneco do arquivo biblioteca.fla) Dicas: Utilize Modify>Break Apart (Ctrl+B) para quebrar um smbolo em formas novamente. Depois de pronto, explore as opes de Onion Skin

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 25 -

Tweening (Animao Linear)

O Tweening a principal forma de animao no Flash, uma maneira mais fcil 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 mudana e tenta adivinhar qual era o movimento desejado. Existem duas formas de Tweening:

Tweening Motion:
Utilizado para animar smbolos. Para a correta utilizao do Tweening motion preciso alguns cuidados: Somente Smbolos podem ser animados. Somente um Smbolo por Keyframe/Layer deve ser utilizado. O mesmo Smbolo deve estar presente no keyframe inicial e final.

Exerccios: 08) - Importe o smbolo guia de biblioteca.fla e faa uma animao dela sobrevoando o seu palco. - Explore as configuraes do Tweening (procure o painel Frame) o Scale o Rotate o Easing - Adicione efeitos na instncia animada e confira o resultado na animao. - possvel fazer a guia percorrer um caminho sinuoso? Salve seu exerccio.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 26 -

Tweening Shape:
Transforma uma forma livre em outra, criando um efeito de morph. O procedimento de criao semelhante ao do Tweening Motion, porm os quadros chaves s devem conter formas livres.

Exerccios: 09) - Importe os smbolos da pasta ex9 de biblioteca.fla e faa animaes de forma, fazendo uma figura virar outra consecutivamente. (Primeiro transforme os smbolos em formas!) Salve seu exerccio.

Dica: Uma dica de forma: possvel adicionar Shape Hints ao tweening shape atravs do menu Modify>Transform>Add Shape Hint ou pelo atalho Ctrl+H.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 27 -

Botes
Os botes no Flash, assim como os grficos, so smbolos que possuem caractersticas especiais. Um smbolo do tipo boto possui 3 estgios, Up (levantado), Over (em cima) e Down (abaixado), que representam os comportamentos possveis de um boto com relao ao cursor do Mouse: - UP : boto solto - Over: cursor sobre o boto - Down: boto clicando; e um quarto frame, Hit, que representa a rea clicavel do boto. Observe:

Exerccios: 09) - Crie trs botes distintos que sugiram a idia de Play, Pause, e Volta, com todos os estados definidos. - Salve seu exerccio.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 28 -

Aes Bsicas (controle de reproduo)

Para comearmos a controlar nossa animao e at mesmo para que o uso de botes faa sentido, hora de aprendermos como inserir Aes no Flash. Atravs de Aes possvel controlar a reproduo de um filme, planejar navegao de uma aplicao, configurar o modo de visualizao, criar interaes das mais diversas com o usurio, programar eventos e menus, definir variveis, interagir com aplicativos externos e at mesmo gerar uma animao. possvel definir aes em Frames, em smbolos do tipo Movie Clip e em botes. Para visualizar as aes disponveis, clique em Window>Actions (Janela>Aes ), ou clique no atalho no canto inferior direito da tela do Flash:

Janela de Aes :

Para Inserir uma ao, basta selecionar um objeto vlido e a ao que deseja atribuir.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico Exerccios:

- 29 -

09) - Escolha uma das animaes feitas - Insira os Botes criados no ltimo exerccio - Adicione as respectivas aes aos botes, de modo a criar um controle da animao.

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer

Apostila Flash 5.0 Bsico

- 30 -

Publicao
Agora que temos uma animao pronta e com controles no Flash, nos resta exportar, publicar e visualizar o resultado. Sua animao pode ser exportada em diversos formatos. O padro para animaes Flash a exportao para o Flash Player e Flash Plug-in, nos quais a animao compilada e recebe a extenso .SWF e est pronta para ser distribuda ou inserida em uma pgina HTML . Clique em File>Export (Arquivo>exportar) para verificar os formatos de exportao do Flash. Para publicar seu filme, clique em File>Publish Setings (Arquivo, Configurar Publicao) e escolha o formato desejado:

Em seguida clique em Publish (Publicar). Os arquivos selecionados sero gerados no diretrio em que a animao est salva.

Abra e veja o resultado!

Desenvolvimento: Cludio Martinez Apoio: Roander Scherer