2

UI

- C

on

ceit

os

Bási

cos

do

Fla

sh M

X

3

Conteúdo da Unidade

Unidade I - Conceitos Básicos do Flash MX

A1. Introdução

u O que é o Macromedia Flash MX

u Novidades do Flash MX

u Imagens bitmap versus imagens vetoriaisImagens bitmap versus imagens vetoriais

u Arquivos .SWF e .FLA

u Sites em Flash

u Atividades

A2. Interface do Flash MX

u InterfaceInterface

u MenusMenus

u PalcoPalco

u PainéisPainéis

u Criando um novo fi lmeCriando um novo fi lme

u AtividadesAtividades

A3. Desenhando no Flash

u Ferramentas de desenhoFerramentas de desenhoFerramentas de desenho

u Ferramentas de seleção e encaixeFerramentas de seleção e encaixeFerramentas de seleção e encaixe

u Seleção de ObjetosSeleção de ObjetosSeleção de Objetos

u Modifi cando desenhosModifi cando desenhosModifi cando desenhos

u Edição de textoEdição de texto

u Réguas e gradeRéguas e grade

A4. Atividades - Projeto

4

A1

- I

ntr

od

uçã

o

5

4

A1

- I

ntr

od

uçã

o

5

A1 - Introdução

O que é o Macromedia Flash MX

O Macromedia Flash é um software para desenvolvimento de animações e aplicações multimídia, tanto para World Wide Web como para Cd-rom, utilizando tecnologia vetorial. É considerado atualmente um padrão mundial Wide Web como para Cd-rom, utilizando tecnologia vetorial. É considerado atualmente um padrão mundial Wide Web como para Cd-rom, utilizando tecnologia

para desenvolvimento multimídia e multiplataforma, uma vez que fi lmes feitos no Flash podem ser executados nas mais diversas plataformas (Computadores Desktop, HandHelds, entre outros).

Apesar de necessitar que o navegador tenha um plug-in instalado para visualizar conteúdo Flash, atualmente cerca de 90% dos computadores pessoais já vêm com tal plug-in embutido no sistema operacional.

A primeira versão do software de animação padrão do mercado chamava-se Future Splash e como oferecia bastantes recursos para criação de sites, interfaces animadas, arquivos interativos e pequenos, a Macromedia comprou o software e relançou-o com o nome de Flash, nas versões 2, 3, 4, 5 e em 2002 a versão MX.

Novidades do Flash MX

A macromedia vem se empenhando desde as primeiras A macromedia vem se empenhando desde as primeiras A macromedia vem se empenhando desde as primeiras versões do Flash para torná-lo um produto cada vez versões do Flash para torná-lo um produto cada vez versões do Flash para torná-lo um produto cada vez mais poderoso, oferecendo possibilidades crescentes mais poderoso, oferecendo possibilidades crescentes mais poderoso, oferecendo possibilidades crescentes para os designers e programadores que o utilizam.para os designers e programadores que o utilizam.para os designers e programadores que o utilizam.

A atual versão MX, que sucedeu o Flash 5, trouxe não A atual versão MX, que sucedeu o Flash 5, trouxe não apenas mudanças visuais na interface como também apenas mudanças visuais na interface como também novos processos e ferramentas de trabalho, como por novos processos e ferramentas de trabalho, como por exemplo:

Suporte a vídeo

Crie apresentações multimídia sofi sticadas Crie apresentações multimídia sofi sticadas incorporando vídeo. O Flash MX possibilita a incorporando vídeo. O Flash MX possibilita a importação de arquivos padrão de vídeo, incluindo importação de arquivos padrão de vídeo, incluindo MPEG, DV (Digital Video), MOV (QuickTime) e AVI.

Redimensione, gire, incline, mascare e anime objetos de vídeo, tornando-os interativos através de scripts. O Macromedia Flash Player 6 oferece suporte nativo a vídeo.

Inspetor de propriedades

O ágil e poderoso inspetor de propriedades, antes elemento do Macromedia Dreamweaver, agora está presente em todos os produtos da linha MX da Macromedia.

Pastas para as Camadas

Visto que em projetos complexos o número de camadas tende a ser enorme, a nova versão do Flash permite criar pastas para organizar e agrupar camadas.

Ferramenta Transformação Livre

Simplifi ca o processo de criação permitindo dimensionar, girar e distorcer elementos gráfi cos a partir de uma única ferramenta.

Acessibilidade

Todo o conteúdo produzido em Flash pode ser preparado para ser acessado por pessoas portadoras de defi ciência.

Imagens bitmap versus Imagens vetoriais

O grande sucesso das animações feitas em Flash se deve ao fato de ele utilizar a tecnologia vetorial para construir os objetos e as animações, proporcionando arquivos extremamente pequenos e rápidos de serem carregados através da Internet.

O Flash também pode importar arquivos bitmap, porém recomenda-se o uso limitado destes tipos de arquivo para não aumentar demasiadamente o tamanho do fi lme e, conseqüentemente, seu tempo de download.

Mas afi nal, o que são arquivos bitmap e arquivos vetoriais?

O computador trabalha utilizando uma linguagem binária. Assim, para armazenar uma imagem qualquer o computador precisa converter a informação em o computador precisa converter a informação em zeros e uns. As maneiras mais comuns de se fazer isso zeros e uns. As maneiras mais comuns de se fazer isso é através de um “é através de um “mapa de bits” ou de um arquivo com instruções vetoriais.com instruções vetoriais.

Experimente aumentar o tamanho de uma imagem Experimente aumentar o tamanho de uma imagem bitmap e você verá uma série de pontos. Cada um dos pontos, ou pixels, são gravados seqüencialmente como uma série de zeros e uns representando sua cor e posição.

Arquivos bitmap, como fotos, por exemplo, costumam ser grandes em tamanho de arquivo. Exemplos de imagens do tipo bitmap são .GIF, .JPG, .BMP, .TIF...

Imagens vetoriais tendem a ser mais reduzidas, pois não armazenam a imagem em si, mas dados referentes a posição, ao tamanho, cor de preenchimento, entre outras variáveis. Quando o arquivo é aberto, estas informações são lidas e o arquivo é remontado rapidamente na tela do computador. As grandes vantagens de um arquivo de imagem vetorial são o tamanho reduzido do arquivo e o fato de ele poder ser redimensionado sem perda de qualidade.

5Exemplo de imagem Bitmap com aproximação de 1000%

6

A1

- Intro

du

ção

ATIV

IDA

DES

7

Arquivos .SWF e .FLA

Os arquivos gerados pelo Flash são salvos no formato FLA. São arquivos sem compactação que podem ser abertos novamente para alterar seu conteúdo.

Para utilizar os fi lmes em um site é preciso exportar para o formato Shockwave Flash, que usa a extensão SWF. Este formato é compactado, o que permite um tempo menor de download, e não permite mais alterações. Através de arquivos SWF podemos também criar arquivos para CD´s.

Sites em Flash

Para ter uma idéia mais ampla sobre as potencialidades do Macromedia Flash MX, procure visitar sites produzidos utilizando esta tecnologia. Alguns exemplos são:

www.macromedia.com.br Página em Português da Macromediawww.madonna.com Site ofi cial da Madonnawww.hiddenclue.co.uk/ Resolva crimes on-linewww.questacon.edu.au/vt/ Visita realmente virtual ao museuwww.pixelpharmacy.com/ Site do designer Aléxis Trepanierwww.emotioncard.com.br Cartões virtuais em portuguêswww.motherscustomcycles.com/ Motos e designwww.memphiszoo.org/ Zoológico interativowww.zoozoom.com/ Premiado site de moda e estilowww.zeramalho.com.br Zé Ramalho em versão digitalwww.charges.com.br Site de animações atualizado constantementewww.fl ashkit.com Tutoriais e exemplos de Flashwww.kirupa.com Tutorias e exemplos de fl ash

6

A1

- Intro

du

ção

ATIV

IDA

DES

7

1. Qual o tipo de imagem usado pelo Flash? Por que?

2. Uma das novidades do Flash MX é suporte a acessibilidade. Por que é importante implementarmos esta característica em nossos projetos?

3. Cite exemplos de sites em Flash que você conhece e que não façam parte da listagem que foi apresentada nesta aula.3. Cite exemplos de sites em Flash que você conhece e que não façam parte da listagem que foi apresentada nesta aula.

8

A2

- I

nte

rface

do

Fla

sh M

X

9

8

A2

- I

nte

rface

do

Fla

sh M

X

9

A2 - Interface do Flash MX

Interface

A interface do Flash MX pode parecer estranha ou mesmo assustadora à primeira vista, porém, ao se familiarizar com seu uso você poderá perceber que foi concebida para ser ágil e fl exível.

Os recursos personalizáveis incluem layout de painéis, teclas de atalho e confi gurações para publicação. A interface de usuário é a mesma utilizada em outras ferramentas da Macromedia, o que aumenta a produtividade dos usuários que utilizam outros produtos.

5 Interface do Macromedia Flash MX

Menus

Uma boa parte dos menus possui ferramentas correspondentes na barra de ferramentas padrão. São apresentados os principais:

Menu Arquivo

Possui opções comuns em muitos programas como Novo, Abrir, Salvar e Fechar um arquivo. Permite:

u importar e exportar fi lmes;

u alterar as confi gurações de publicação e publicar o fi lme atual;

u imprimir um fi lme e confi gurar a folha de impressão;

u enviar arquivos .FLA anexados por e-mail;

u exibir arquivos recentes;

u fi nalizar o Flash.

Menu Editar

Comuns no Menu Editar são as ações Recortar, Copiar e Colar. Permitem:

u desfazer e refazer uma ação;

u selecionar todos os objetos, duplicar objetos selecionados ou cancelar seleção;

u editar símbolos (geralmente o último trabalhado), editar objetos selecionados ou editar tudo, que edita todo um grupo.

u Preferências: Geral,Edição e Área de trabalho.

u Modifi car Atalhos do Teclado.

u Mapear fontes não encontradas.

Menu Exibir

Permite:

u ir para, recurso ligado ao trabalho com cenas;

u controlar o zoom;

u visualização dos objetos dispostos no palco (Contorno, Modo Rápido, Sem Serrilhado ou Texto Sem Serrilhado);

u linha do tempo e área de trabalho;

10

A2

- Inte

rface

do

Fla

sh M

X

A2

- I

nte

rface

do

Fla

sh M

X

11

u ativar e desativar réguas e grades;

u encaixar objetos e ajustar aos pixels;

u ocultar bordas e painéis.

Menu Inserir

Permite:

u criar um símbolo ou converter um objeto em símbolo;

u inserir camada, pastas de camadas, quadros e quadros-chave;

u interpolação de movimento e guia de movimento;

u inserir e remover cena.

Menu Modifi car

Permite:

u modifi car propriedades da Camada, cena e documentos;

u modifi car formas;

u duplicar e trocar símbolo;

u duplicar e traçar (vetorizar) bitmaps importados.duplicar e traçar (vetorizar) bitmaps importados.

Menu Texto

Para textos existem os recursos padrão para a Para textos existem os recursos padrão para a formatação, como: Fonte, Tamanho, Estilo, Alinhar, formatação, como: Fonte, Tamanho, Estilo, Alinhar, Controle (Aumentar ou Diminuir), Caráter, Parágrafo Controle (Aumentar ou Diminuir), Caráter, Parágrafo e Opções.

Menu Controlar

Permite:

u reproduzir, retroceder, avançar e recuar quadros;reproduzir, retroceder, avançar e recuar quadros;reproduzir, retroceder, avançar e recuar quadros;

u testar fi lme, depurar fi lme e testar cena (atual);testar fi lme, depurar fi lme e testar cena (atual);testar fi lme, depurar fi lme e testar cena (atual);

u ativar ações quadro simples, ativar botões ativar ações quadro simples, ativar botões ativar ações quadro simples, ativar botões simples e sem sons.

u Visualizar componentes em tempo de edição.Visualizar componentes em tempo de edição.

Menu Janela

Possui:

u barra de ferramentas, ferramentas (comuns);barra de ferramentas, ferramentas (comuns);

u todos os painéis

u conjuntos de painéis e salvamento do layout de painel;

u fechamento de todos os painéis;

u ações, movie explorer, saída, depurador;

u biblioteca, biblioteca comuns, objetos do generator;

u organização das janelas: em cascata ou lado a lado.

u Acesso ao Sitespring – Ferramenta de gerenciamento de projetos da Macromedia.

Menu Ajuda

Possui as opções:

u arquivos muito completos de ajuda no uso do Flash e Actionscript;

u Centro de Suporte Flash: Suporte On-Line.

Palco

A área branca no meio da interface do Flash MX é chamada de Palco. O nome é claro e quer dizer “o lugar onde as coisas acontecem”. É uma área vital chamada de Palco. O nome é claro e quer dizer “

”. É uma área vital chamada de Palco. O nome é claro e quer dizer “

para o Flash, pois é lá que criamos todos os elementos gráfi cos e animações que comporão nossos sites e apresentações.

Somente os elementos que estiverem posicionados no palco estarão visíveis no fi lme, porém repare que existe uma área acinzentada circundando o palco. Podemos utilizar este espaço como ponto de partida para um objeto que cruza a tela, como um letreiro, por exemplo.

Painéis

Painéis são janelas acopláveis ou cortinas onde podemos visualizar as propriedades dos elementos existentes no palco. Os painéis facilitam o trabalho, disponibilizando acesso rápido às diversas funções disponíveis no programa. Um painel pode ser personalizado de acordo com as necessidades do usuário; eles são carregados a qualquer instante, fechados e reposicionados da melhor maneira para facilitar o trabalho.

1. Para carregar os painéis

u Acesse o menu Janela.

u Selecione o painel desejado.Selecione o painel desejado.

Ou para carregar todos os painéisOu para carregar todos os painéis:

u Acesse o menu Acesse o menu Janela.

u Aponte para o Conjunto de Painéis, e selecione algum Lay-Out previamente preparado.

Para melhorar a funcionalidade da interface do Flash MX, os painéis podem ser posicionados nas laterais da janela do programa de modo a não interferir com os outros elementos.

5 Painéis laterais fechados

Ao lado do nome de cada painel há um pequeno triângulo cuja funcionalidade é recolher ou expandir o painel quando clicado.

10

A2

- Inte

rface

do

Fla

sh M

X

A2

- I

nte

rface

do

Fla

sh M

X

11

5 Ao clicar no triângulo, o painel se expande ou recolhe

Na extrema esquerda, ao lado do nome do painel e do Na extrema esquerda, ao lado do nome do painel e do triângulo, existe ainda uma área pontilhada. Sua função triângulo, existe ainda uma área pontilhada. Sua função é destacar o painel da área lateral, tornando-o uma é destacar o painel da área lateral, tornando-o uma janela independente ou o contrário, acoplar uma janela janela independente ou o contrário, acoplar uma janela de painel à área lateral.

5 O painel Cena sendo acoplado na área lateral

Um dos painéis mais utilizados devido sua fl exibilidade é o Inspetor de propriedades. Sua fl exibilidade deve-se ao fato do conteúdo do painel mudar dinamicamente mostrando sempre as propriedades do objeto selecionado em tela.

5 Neste exemplo, o inspetor de propriedades está exibindo as propriedades do documento

Criando um documento

Cada vez que o Flash é aberto, o programa cria um novo arquivo com a extensão FLA. Podemos alterar o tamanho, número de quadros por segundo (fps), cor de fundo e outras propriedades do novo documento que foi carregado.

1. Alterar as propriedades de um documento

u Acesse ao menu “Modifi car”.

u Aponte para o comando “documento...”.

5 Janela Propriedade do documento

Estas confi gurações são importantes, pois defi nem Estas confi gurações são importantes, pois defi nem a área do fi lme (Palco) e como o fi lme aparecerá a área do fi lme (Palco) e como o fi lme aparecerá no Navegador (Browser). As possíveis confi gurações no Navegador (Browser). As possíveis confi gurações desta janela:desta janela:

u Taxa de QuadrosTaxa de Quadros – Defi ne quantos quadros serão apresentados por segundo, ou seja, quanto maior a freqüência, mais rápida será a animação e vice-versa. O valor padrão é 12, podendo variar de 0.01 a 120.

u Dimensões – Defi ne a área do palco propriamente dita. Os valores das dimensões são preenchidos de acordo com a unidade de régua.

u Corresponder – Podemos reescalar o fi lme para corresponder com a área do papel da impressora ou ajustar ao tamanho dos objetos existentes no palco. O botão Padrão, retorna as opções aos valores padrão.

u Cor de Fundo – Defi ne a cor de fundo do Filme.

u Unidades de Régua – Defi ne a unidade de régua a ser utilizada. Recomenda-se pixels para unidade de medida.

Depois de escolher as propriedades que julgar adequadas, você pode clicar no botão OK para iniciar o trabalho ou clicar no botão Tornar Padrão, que faz com que suas propriedades sejam sempre utilizadas como valores padrão.

12

ATIV

IDA

DES

A3

- D

ese

nh

an

do

no

Fla

sh

13

1. Para que utilizamos o palco? E para que serve a área cinza que o circunda?

2. O que são e para que utilizamos os painéis?

3. Marque a alternativa incorreta:

o É possível inserir um novo símbolo no menu inserir/Novo símboloÉ possível inserir um novo símbolo no menu inserir/Novo símbolo

o O inspetor de propriedades tem seu conteúdo alterado dependendo do objeto selecionadoO inspetor de propriedades tem seu conteúdo alterado dependendo do objeto selecionado

o É possível modifi car a cor de fundo do palco através das propriedades do documento.É possível modifi car a cor de fundo do palco através das propriedades do documento.

12

ATIV

IDA

DES

A3

- D

ese

nh

an

do

no

Fla

sh

13

O Flash contém uma série de ferramentas que serão de muita utilidade para o desenvolvimento do design. Com estas ferramentas podem-se fazer linhas livres e precisas, desenhar formas e preencher objetos.

Enquanto você desenha, você pode aproximar o desenho com a ferramenta de lupa, alterar algumas propriedades do tipo cor de linha e cor de preenchimento.

Todos os objetos que você precisa para criar no Flash encontram-se na barra de ferramentas:

5 Barra de ferramentas

Ferramentas de Desenho

Inclui-se neste conjunto todas as ferramentas da barra Inclui-se neste conjunto todas as ferramentas da barra de ferramentas responsáveis pela criação de elementos de ferramentas responsáveis pela criação de elementos na tela:

Linha – Utilizada para fazer linhas. Sempre que pressionada a tecla <SHIFT> é possível fazer linhas múltiplas de 45º.

5 Desenhando com a ferramenta Linha

Caneta – Utilizada para desenvolver caminhos, linhas, curvas com grande precisão. Ao clicar em dois pontos distintos, a ferramenta gera uma reta, e ao clicar e arrastar o mouse, a caneta gera uma curva.

5 Desenhando com a ferramenta Caneta

Oval –Utilizada para fazer formas “ovais” ou “círculos perfeitos”, caso tenha sido pressionada a tecla <SHIFT>.

5 Utilizando o Oval com a tecla <Shift> pressionada

Retângulo – Tendo as mesmas características de funcionamento da ferramenta Oval, está ferramenta permite fazer “retângulos” ou “quadrados”, se a tecla <SHIFT> tiver sido pressionada durante o processo de edição. Através do modifi cador defi nimos, através de pontos, a curva nos cantos da forma retângulo.

Modifi cador do retângulo

5 Retângulo com bordas arredondadas

A3 - Desenhando no Flash

O Flash tem um conjunto de ferramentas para criação rápida. Assim, ao sobrepor dois elementos na mesma camada de cores idênticas, os elementos se fundem. Ao sobrepor elementos de cores diferentes, o elemento de cima

perfura o de baixo.

14

A3

- Dese

nh

an

do

no

Fla

sh

A3

- D

ese

nh

an

do

no

Fla

sh

15

Lápis –Desenha formas livres sobre o palco, com uma característica interessante, as linhas podem ser mais ou menos suavizadas.

5 Modifi cadores da ferramenta lápis

Modifi cadores:

u Acertar: Formas mais angulares.

u Suavizar: Curvas mais suaves.

u Tinta: Linha livre, semelhante ao suavizar: Linha livre, semelhante ao suavizar

Borracha – Esta borracha possui alguns – Esta borracha possui alguns recursos que auxiliam bastante o desenvolvimento recursos que auxiliam bastante o desenvolvimento de desenhos em Flash. Com ela podemos apagar de desenhos em Flash. Com ela podemos apagar somente segmentos de linha (ou preenchimentos), somente segmentos de linha (ou preenchimentos), podemos selecionar o que será apagado, defi nir podemos selecionar o que será apagado, defi nir que tipo e tamanho de cursor será utilizado e, com que tipo e tamanho de cursor será utilizado e, com o modifi cador torneira, podemos apagar somente o modifi cador torneira, podemos apagar somente preenchimentos ou contornos clicando neles.preenchimentos ou contornos clicando neles.

Modifi cadores da ferramenta Borracha

Pincel – Semelhante ao lápis, esta ferramenta – Semelhante ao lápis, esta ferramenta – Semelhante ao lápis, esta ferramenta permite alterar a espessura da linha, cor da linha, permite alterar a espessura da linha, cor da linha, formato do cursor e o mais importante, pode defi nir formato do cursor e o mais importante, pode defi nir que área estará pintada.

5 Modifi cador do Pincel

5 Tipos de Pincel (Da esquerda para direita: Original, Pintar Normal, Pintar Atrás, Pintar Seleção, Pintar Preenchimentos e Pintar Dentro)

Ferramentas de seleção e encaixe

Para possibilitar a alteração da posição (ou mesmo forma) de um objeto utilizamos as ferramentas deste grupo.

Seta – Permite selecionar linhas, preenchimentos ou ambos e objetos em geral.

Subselecionar – Esta ferramenta permite modifi car os pontos de uma curva, ajustando-a da melhor maneira possível.

5 Modifi cações de uma curva com a ferramenta Subselecionar

Laço – Permite selecionar formas irregulares com grande facilidade.

Encaixar – Esta ferramenta ajuda na criação e movimentação de objetos, permitindo que os mesmos movimentação de objetos, permitindo que os mesmos “grudem” nas bordas dos outros.“grudem” nas bordas dos outros.

Seleção de objetos

Quando se trabalha com formas pode-se selecionar só o contorno, só o conteúdo ou, com duplo clique, selecionar toda a forma (contorno e preenchimento). Para unir o contorno e o preenchimento é necessário agrupá-los.

1. Agrupamento de objetos

Clique duas vezes no objeto para selecionar o contorno e o preenchimento.

u No menu Modifi car, escolha o comando Agrupar.

Dessa maneira estaremos tornando todo o conjunto, um único objeto.

14

A3

- Dese

nh

an

do

no

Fla

sh

A3

- D

ese

nh

an

do

no

Fla

sh

15

5 Elementos agrupados

2. Desagrupando objetos

u Clique no objeto a ser desagrupado.

u Clique no menu Modifi car e escolha a opção Desagrupar.

3. Desagrupando textos

O objeto texto é como um grupo especial, com todas O objeto texto é como um grupo especial, com todas as letras agrupadas em um único objeto e com a as letras agrupadas em um único objeto e com a propriedade de edição do texto. A desvantagem do propriedade de edição do texto. A desvantagem do objeto texto é não permitir a metamorfose de um para objeto texto é não permitir a metamorfose de um para outro. Para isto ser possível é necessário desmembrar o outro. Para isto ser possível é necessário desmembrar o texto, transformando-o em forma (shape).texto, transformando-o em forma (shape).

Para transformar um texto em forma:

u Selecione o objeto texto.

u No menu Modifi car, escolha o comando , escolha o comando Desmembrar.

4. Ajuste de contorno

Algumas vezes precisamos ajustar as formas para que Algumas vezes precisamos ajustar as formas para que Algumas vezes precisamos ajustar as formas para que possam obter formatos mais consistentes. Muitas vezes possam obter formatos mais consistentes. Muitas vezes possam obter formatos mais consistentes. Muitas vezes precisamos suavizar ou deixar as bordas mais “retas”. precisamos suavizar ou deixar as bordas mais “retas”. precisamos suavizar ou deixar as bordas mais “retas”. Estas ferramentas são ativadas quando a ferramenta Estas ferramentas são ativadas quando a ferramenta Seta está ativada.

5 Tipos de Suavização

Para suavizar:

u Selecione a forma.

u Clique na ferramenta Suavizar.

Para acertar:

u Selecione a forma.

u Clique na ferramenta Acertar.

Ferramentas Suavizar e Acertar

5. Organização dos objetos (Ordem)

Os objetos do Flash são colocados em uma ordem de sobreposição conforme são criados. Os objetos mais recentes são colocados sobre os mais antigos.

Para alterar a ordem de sobreposição dos objetos:

u Selecione o objeto a ser ordenado.

u No menu Modifi car, escolha Organizar (se o objeto selecionado for uma forma, as opções de organização estarão desabilitadas).

u Escolha a maneira que deseja organizar o objeto: Trazer para Frente, Trazer um Nível para Frente, Enviar um Nível para Trás, Enviar para Trás

5 Ordem de objetos

6. Alinhamento de objeto

Além de alinhar os objetos em relação a outros ou Além de alinhar os objetos em relação a outros ou em relação ao palco, pode-se também distribuir os em relação ao palco, pode-se também distribuir os espaços entre os objetos e ajustar o tamanho deles.

5 Painel Alinhar

Para alinhar objetos:

u Selecione os objetos que deseja alinhar.

u No menu Janela, selecione a opção Alinhar.

u Na caixa de diálogo escolha o tipo de alinhamento que deseja para os objetos.

Modifi cando desenhos

Este conjunto de ferramentas tem como fi nalidade alterar desenhos e objetos que estiverem no palco.

Transformação Livre – Esta ferramenta agrupa em si uma séria de funcionalidades para distorcer objetos: redimensionar, inclinar, rotacionar e moldar.

16

A3

- Dese

nh

an

do

no

Fla

sh

A3

- D

ese

nh

an

do

no

Fla

sh

17

5 Na seqüência: Redimensionar, girar, inclinar, distorcer e envelopar.

Balde de Tinta – Esta ferramenta permite preencher áreas fechadas com cores sólidas, gradientes ou bitmaps. Pode-se preencher áreas fechadas e também confi gurar o Flash para que “ignore” pequenas falhas na imagem utilizando o modifi cador a seguir.

5 Modifi cadores da ferramenta “Balde de tinta”.

Para preenchimentos especiais com degrades e cores Para preenchimentos especiais com degrades e cores fora da palheta padrão, utilize o painel fora da palheta padrão, utilize o painel Misturador Misturador de Cores:

u Escolha o tipo de preenchimento que deseja Escolha o tipo de preenchimento que deseja Escolha o tipo de preenchimento que deseja utilizar: Sólido, Gradiente ou Bitmap.utilizar: Sólido, Gradiente ou Bitmap.utilizar: Sólido, Gradiente ou Bitmap.

u No caso do gradiente (degradê), utilize as No caso do gradiente (degradê), utilize as No caso do gradiente (degradê), utilize as ferramentas de seleção de cor para personalizar ferramentas de seleção de cor para personalizar ferramentas de seleção de cor para personalizar o efeito que deseja.

Transformar Preenchimento – Esta ferramenta é complementar ao preenchimento degradê, pois permite alterar seu ponto de início e raio de ação, como mostra a imagem.

5 Alterando um degrade radial

Tinteiro (Nanquim) – Trata-se de uma ferramenta muito peculiar. Seu uso se restringe a modifi car as propriedades do contorno de formas, ou seja, as cores, tamanhos e formas das bordas dos desenhos.

O inspetor de propriedades complementa a função do tinteiro, uma vez que quando a borda de algum do tinteiro, uma vez que quando a borda de algum elemento é selecionada, o conteúdo do inspetor se elemento é selecionada, o conteúdo do inspetor se altera para mostrar as opções possíveis de confi guração altera para mostrar as opções possíveis de confi guração de contornos.

5 Inspetor de Propriedades exibindo confi gurações de contorno

Conta-Gotas – Utilize o conta-gotas para capturar cores de linhas e preenchimentos (cores sólidas, gradientes ou bitmaps) e imediatamente aplicar a outro objeto ou forma.

1. Painéis Info e Transformar

Para alterar imagens e elementos no palco temos à disposição diversas ferramentas e temos ainda os painéis Info e Transformar.

No painel Info encontramos:

logo abaixo e à direita, informações sobre a posição Xe Y do cursor;

u à esquerda, temos informações sobre a intensidade das cores RGB (Vermelho, Verde, Azul) e A (grau de Alpha – transparência), que são exibidas assim que o cursor é passado sobre os objetos.

u acima e à esquerda temos informações sobre o tamanho do objeto;

16

A3

- Dese

nh

an

do

no

Fla

sh

A3

- D

ese

nh

an

do

no

Fla

sh

17

u e fi nalmente à direita, a posição do objeto, que pode ser em relação ao seu centro ou ao canto superior esquerdo.

5 Painel Info

O painel Transformar serve para alterarmos propriedades como tamanho, inclinação e rotação, entrando com valores numéricos de forma mais precisa do que a utilização manual da ferramenta Transformação livre.

5 Painel Transformar

Edição de texto

Textos são elementos básicos na criação de sites Textos são elementos básicos na criação de sites e apresentações em Flash. Para criar um texto, clique e apresentações em Flash. Para criar um texto, clique na ferramenta caráter na barra de ferramentas e, em na barra de ferramentas e, em seguida no palco.

Antes de editarmos um texto podemos fazer as Antes de editarmos um texto podemos fazer as devidas confi gurações de fonte, tamanho, cor, estilo, devidas confi gurações de fonte, tamanho, cor, estilo, espaçamentos e outros recursos, usando o inspetor de propriedades – que assim que a ferramenta texto é acionada muda seu conteúdo para opções de texto.

5 Inspetor de propriedades exibindo confi gurações de caracteres

Durante a digitação você trabalha dentro de um retângulo que se expande à medida que forem acrescentados mais caracteres. Quando clicamos é criada uma pequena caixa para que possamos iniciar o trabalho. À medida que vamos digitando, esta caixa criada uma pequena caixa para que possamos iniciar o trabalho. À medida que vamos digitando, esta caixa criada uma pequena caixa para que possamos iniciar

vai se expandindo; se defi nirmos o tamanho da caixa antes de digitar, a largura será fi xa.

5 Tipos de blocos de texto.

Réguas e grade

Quase todos os programas gráfi cos disponíveis no mercado permitem ao criador utilizar-se de ferramentas de apoio como réguas e grades. No Flash não poderia ser diferente.

1. Réguas

As réguas facilitam a criação do design pois orientam quanto a posição dos objetos. Elas podem ser confi guradas nas propriedades do documento para exibir valores em diversas escalas, incluindo valores métricos, como centímetros ou valores técnicos, como pixels.

Para exibir as réguas:Para exibir as réguas:

u Clique no menu ExibirClique no menu Exibir

u Selecione a opção réguas.Selecione a opção réguas.

Depois de ter exibido as réguas, é possível puxar delas referências guias, que servem para orientar o designer mas não aparecem para o usuário fi nal:

u Clique em cima da régua horizontal ou lateral.

5 Cursor sobre a régua horizontal

u Arraste o cursor até o ponto onde deseja que a guia seja criada.

18

A3

- Dese

nh

an

do

no

Fla

sh

ATIV

IDA

DES

19

5 Guia na posição escolhida

2. Grades

Grades (também conhecidas como grids) são como papéis quadriculados que designers gráfi cos e engenheiros utilizam para desenhar. A grade facilita a organização visual e o alinhamento interno dos elementos.

Para exibir a grade:

u Clique no menu exibir

u Escolha a opção Grade

u Finalmente clique em mostrar grade.Finalmente clique em mostrar grade.

18

A3

- Dese

nh

an

do

no

Fla

sh

ATIV

IDA

DES

19

Vamos iniciar o projeto deste curso. Este projeto se estenderá por todo o material e criará um site multimídia para uma empresa fi ctícia de turismo espacial, a Space Tour.

1. Crie um novo arquivo no Flash MX e confi gure o documento da seguinte maneira:

Dimensões – 760 pixels de largura x 420 pixels de altura.

Cor de fundo - #3366cc (Azul Claro)

Taxa de quadros – 16 qps

Unidade da régua – pixels

Não se esqueça de exibir as réguas

2. Crie guias horizontais nas posições (aprox.) 50, 100, 350 e 400 pixels.2. Crie guias horizontais nas posições (aprox.) 50, 100, 350 e 400 pixels.

3. Crie guias verticais nas posições (aprox.) 140, 180, 500 e 540 pixels.3. Crie guias verticais nas posições (aprox.) 140, 180, 500 e 540 pixels.

Neste ponto o seu documento deve se parecer com a imagem a seguir:Neste ponto o seu documento deve se parecer com a imagem a seguir:

4. Utilizando retas ou a ferramenta caneta, trace uma forma geométrica utilizando as guias como referência.4. Utilizando retas ou a ferramenta caneta, trace uma forma geométrica utilizando as guias como referência.

5. Preencha as formas geométricas que você criou utilizando a cor #000066 (Azul escuro).5. Preencha as formas geométricas que você criou utilizando a cor #000066 (Azul escuro).

Neste ponto, seu projeto deve estar semelhante ao exemplo a seguir:

A4 - Atividades - Projeto

20

ATIV

IDA

DES

UII

- S

ímb

olo

s e a

nim

açã

o n

o F

lash

21

Conteúdo da Unidade

6. Está na hora de criarmos o logotipo da empresa de turismo espacial. Apesar de parecer complexo à primeira vista, o arco do logo pode ser criado sobrepondo parcialmente dois ovais de cores diferentes, aproveitando a característica do Flash de perfurar o elemento de baixo quando duas formas na mesma camada são sobrepostas. Utilize a cor #FF9900

7. Para fi nalizar o logotipo, instale a fonte “Nasal.ttf” em seu computador. Ela será fornecida pelo professor e será de grande importância para a criação do logo.

8. Escreva SpaceTour abaixo do arco que criamos utilizando a cor #FF9900 e posicione tudo no projeto como mostra a imagem.

9. Salve o projeto como projeto_fase1.fl a9. Salve o projeto como projeto_fase1.fl a