68
MACROMEDIA FLASH MX “ Todos direitos reservados. Proibida a reprodução, mesmo parcial, por qualquer processo mecânico, eletrônico, reprográfico, etc., sem a autorização, por escrito, do(s) autor(es) e da editora.”

Apostila - Flash MX

Embed Size (px)

DESCRIPTION

Flash

Citation preview

Page 1: Apostila - Flash MX

MACROMEDIA

FLASH MX

“ Todos direitos reservados.

Proibida a reprodução,

mesmo parcial, por qualquer

processo mecânico,

eletrônico, reprográfico, etc.,

sem a autorização, por

escrito, do(s) autor(es) e da

editora.”

Page 2: Apostila - Flash MX

www.webaula.com.br Copyright© Powered by webAula

FLASH MX

SUMÁRIO

INTRODUÇÃO____________________________________________________________1

O novo Flash MX_________________________________________________________________ 1

Pré- requisitos do sistema _________________________________________________________ 1

O Flash Player___________________________________________________________________ 2

CONHECENDO O PROGRAMA ________________________________________________2

A tela de entrada ________________________________________________________________ 2

Barras de Ferramentas ____________________________________________________________ 3

Os painéis______________________________________________________________________ 3

O Painel Linha de Tempo (Timeline) _________________________________________________ 4

O Painel Ferramentas (Tools)_______________________________________________________ 4

O Painel Propriedades (Properties)___________________________________________________ 5

O Painel Ações (Actions)___________________________________________________________ 5

Os outros painéis ________________________________________________________________ 7

Definindo as configurações_________________________________________________________ 7

EXPLORANDO O PAINEL FERRAMENTAS _______________________________________8

As ferramentas retângulo (Rectangle) e círculo (Oval) ___________________________________ 9

Utilizando as ferramentas retângulo e oval ____________________________________________ 8

A ferramenta seta (Arrow) ________________________________________________________ 11

Utilizando a ferramenta Seta ______________________________________________________ 11

As ferramentas linha (Line), Caneta (Pen), Pincel (Brush) e Lápis (Pencil) ___________________ 12

Utilizando as ferramentas linha, caneta, pincel e lápis __________________________________ 12

As ferramentas balde de tinta (Paint Bucket) e transformação (Fill Transform) _______________ 15

Utilizando as ferramentas balde de tinta e transformação________________________________ 15

A ferramenta Apagador (Eraser) ___________________________________________________ 16

Utilizando a ferramenta Apagador __________________________________________________ 16

As ferramentas subselecionar (Subselection) e laço (Lasso) ______________________________ 17

Utilizando as ferramentas Subselecionar e Laço _______________________________________ 17

A ferramenta texto (Text) ________________________________________________________ 19

Utilizando a ferramenta texto______________________________________________________ 20

As ferramentas mão (Hand) e Zoom (Zoom)__________________________________________ 22

CRIANDO OS PRIMEIROS DESENHOS ________________________________________22

O que o agrupar faz e qual a sua aplicabilidade________________________________________ 22

Como o agrupar funciona _________________________________________________________ 22

Desagrupando objetos ___________________________________________________________ 23

Page 3: Apostila - Flash MX

www.webaula.com.br Copyright© Powered by webAula

FLASH MX

O que o alinhar distribuir faz e qual a sua aplicabilidade_________________________________ 23

Como o alinhar e distribuir funciona ________________________________________________ 24

O que o desmembrar faz e qual a sua aplicabilidade____________________________________ 24

Como o desmembrar funciona _____________________________________________________ 25

Criando desenhos em relevo ______________________________________________________ 25

Desenhando um carro ___________________________________________________________ 26

CAMADAS E LINHA DO TEMPO ______________________________________________27

O que são camadas e qual a sua aplicabilidade ________________________________________ 27

Como as camadas funcionam______________________________________________________ 28

Tipos de Camadas ______________________________________________________________ 29

Criando pastas para as camadas ___________________________________________________ 29

Trabalhando com a linha do tempo_________________________________________________ 29

Criando Quadros (Frames) ________________________________________________________ 29

Criando Quadros - Chave (Key Frames)______________________________________________ 30

Criando Quadros - Chave em Branco (Blank Key Frames)________________________________ 32

Conhecendo as opções da linha do tempo ____________________________________________ 32

ANIMANDO OS PRIMEIROS DESENHOS _______________________________________33

Conceito de animação ___________________________________________________________ 33

Quadros por Segundo (FPS)_______________________________________________________ 33

O que a animação Quadro a Quadro faz e qual a sua aplicabilidade ________________________ 34

Animando o Círculo _____________________________________________________________ 34

O que a interpolação de forma faz e qual a sua aplicabilidade ____________________________ 35

Como a interpolação de forma funciona______________________________________________ 36

O que a interpolação de movimento faz e qual a sua aplicabilidade ________________________ 36

Como a interpolação de movimento funciona _________________________________________ 37

Utilizando a linha Guia ___________________________________________________________ 37

Criando animações com letras _____________________________________________________ 38

MÁSCARAS_____________________________________________________________40

O que são Máscaras e qual a sua aplicabilidade________________________________________ 40

Como as Máscaras funcionam _____________________________________________________ 40

SÍMBOLOS _____________________________________________________________41

Conceito de objetos _____________________________________________________________ 41

O que são gráficos e qual a sua aplicabilidade_________________________________________ 42

Como os gráficos funcionam_______________________________________________________ 42

O que são botões e qual a sua aplicabilidade__________________________________________ 43

Como os botões funcionam _______________________________________________________ 43

Page 4: Apostila - Flash MX

www.webaula.com.br Copyright© Powered by webAula

FLASH MX

O que são clipes de filme e qual a sua aplicabilidade____________________________________ 44

Como os clipes de filme funcionam _________________________________________________ 44

Objetos dentro de objetos ________________________________________________________ 46

INTRODUÇÃO AO CONCEITO DE AÇÕES_______________________________________47

Conhecendo as ações do Flash (ActionScript) _________________________________________ 47

Ações Básicas __________________________________________________________________ 48

O que são ações de botão e qual a sua aplicabilidade ___________________________________ 48

Como as ações de botão funcionam_________________________________________________ 48

O que são ações de quadros e qual a sua aplicabilidade _________________________________ 50

Como as ações de quadros funcionam _______________________________________________ 50

TRABALHANDO COM AÇÕES SIMPLES ________________________________________50

O que o stop All Sounds faz e qual a sua aplicabilidade _________________________________ 51

Como o stop All Sounds funciona___________________________________________________ 51

O que o Get URL faz e qual a sua aplicabilidade _______________________________________ 51

Como o Get URL funciona_________________________________________________________ 52

O que o Go To faz e qual a sua aplicabilidade _________________________________________ 52

Como o Go To funciona __________________________________________________________ 53

IMPORTANDO E EXPORTANDO______________________________________________54

O que o importar faz e qual a sua aplicabilidade _______________________________________ 54

Como o importar funciona ________________________________________________________ 54

Modificando arquivos importados___________________________________________________ 55

Importando arquivos de som ______________________________________________________ 56

O que o exportar faz e qual a sua aplicabilidade _______________________________________ 57

Como o exportar funciona ________________________________________________________ 58

INSTANCIANDO CLIPES DE FILME___________________________________________58

O que o instanciar faz e qual a sua apliabilidade _______________________________________ 58

Como o instanciar funciona _______________________________________________________ 58

O que é a ação With e qual a sua aplicabilidade _______________________________________ 59

Como a aplicação With funciona____________________________________________________ 59

Aplicando ações para Movie Clipes instanciados _______________________________________ 60

Compreendendo a estrutura criada _________________________________________________ 60

PUBLICANDO O FILME ____________________________________________________61

O que o publicar filme faz e qual a sua aplicabilidade ___________________________________ 61

Como o publicar filme funciona ____________________________________________________ 61

Conhecendo as opções da guia Flash ________________________________________________ 62

Conhecendo as opções da guia HTML________________________________________________ 63

Page 5: Apostila - Flash MX

www.webaula.com.br Pág:. 1 Copyright© Powered by webAula

FLASH MX

Introdução

O NOVO FLASH MX

O Flash MX TM é o primeiro programa da nova geração que está sendo lançada pela Macromedia TM. Esta geração de softwares inclui também o DreamWeaver MX TM, FireWorks MX TM, dentre outros.

Uma das principais características do Flash MX é a facilidade de uso. Ele trabalha com o conceito de painéis e possibilita ao usuário iniciante uma fácil adaptação. As principais diferenças do flash MX com relação a versão 5.0 do programa são as seguintes: Ferramentas de desenho mais profissionais Organização do programa com painéis Suporte a vídeos ActionScript mais abrangente e fácil de usar Suporte maior para XML Além dessas diferenças citadas, existem outras que iremos abordar no decorrer do curso.

PRÉ-REQUISITOS DO SISTEMA

A versão MX do flash, exige mais do sistema que as outras anteriormente lançadas. Uma das principais diferenças é com relação ao monitor, que deverá ser ajustado para a resolução 1024X768 trabalhando em 16 bits. Existem profissionais que conseguem trabalhar com a resolução 800X600, mas não é recomendado, tendo em vista que muitos comandos não estarão disponíveis Os outros requisitos mínimos são: Processador Pentium 200 MHz ou equivalente, 64 Mb de memória Ram (recomendado 128 MB) e 85 Mb de espaço livre em disco.

O FLASH PLAYER

Page 6: Apostila - Flash MX

www.webaula.com.br Pág:. 2 Copyright© Powered by webAula

FLASH MX

Para rodar filmes flash em sua máquina, é preciso que você tenha o player instalado. Ele é suportado nos navegadores Netscape 4.0 ou posterior para Windows e 4.5 ou posterior para Mac OS, Internet Explorer 4.0 ou posterior para Windows e 5.0 ou posterior para Mac OS, AOL 7 ou posterior para Windows e 5 ou posterior para Mac OS e Opera 6 para Windows e 5 para Mac OS. O player pode ser baixado diretamente do site da Macromedia http://www.macromedia.com.br.

Conhecendo o Programa

A TELA DE ENTRADA

Ao iniciar o Flash MX, se você estiver utilizando a versão trial, irá ser apresentado a tela informando o número de dias que você ainda tem para experimentar o programa. Clique em “TESTAR”. Com a tela do programa aberta, podemos definir algumas áreas principais.

São elas: Barra de Menu Barra Principal

Page 7: Apostila - Flash MX

www.webaula.com.br Pág:. 3 Copyright© Powered by webAula

FLASH MX

Linha do tempo Barra de Ferramentas Área de Trabalho Painéis Sendo que a Barra Principal, não é mostrada automaticamente, é preciso acioná-la através do comando Window/Toolbars/Main (em português, Janelas/Barras de ferramentas/Principal). Nos próximos tópicos deste módulo estaremos falando detalhadamente sobre cada uma delas.

BARRAS DE FERRAMENTAS

Por padrão, o Flash MX mostra a barra de ferramenta Menus, onde podemos acessar rapidamente os principais comandos do programa. A barra de menu possui 9 itens principais, que são: Arquivo – Responsável pelas operações de arquivos Editar – Edição de símbolos, frames, imagens, etc Exibir – Opções de visualização do arquivo Inserir – Trabalhar com layer, inserir e remover frames e keyframes, além de criar símbolos Modificar – Modificar os objetos, os principais comandos deste menu são transform, align e arrange Texto – Trabalhar com textos Controlar – Controle do filme de maneira geral Janela – Opções de visualização de painéis e barras de ferramentas Ajuda – Tutoriais, leções, guia de referência sobre o software Outra barra importante é a Main, que vem com o atalho dos principias comandos do menu file, edit e modify.

OS PAINÉIS

O conceito de painéis é utilizado no flash deste a versão 5.0, com ele, você pode acessar vários comandos sem ter muita dificuldade para chegar até eles. Os painéis são principalmente úteis quando se trabalha em projetos complexos, que envolvem design e programação, pois, permitem ao profissional desenvolver rapidamente e com qualidade admirável. Essa produtividade está aprimorada na versão MX, onde é possível adaptar os painéis para que o desenvolvedor possa aproveitar melhor a área útil. Para tornar os painéis ocultos, pressione a tecla TAB do seu teclado, para torná-los ativos novamente, basta pressionar a tecla TAB outra vez. Nos painéis da versão MX, existem 2 opções que são freqüentes em quase todos. O botão mostra as principais opções do painel O botão minimiza o painel em questão

Page 8: Apostila - Flash MX

www.webaula.com.br Pág:. 4 Copyright© Powered by webAula

FLASH MX

Nos próximos tópicos, vamos ver detalhadamente os principais painéis.

O PAINEL LINHA DE TEMPO (TIMELINE)

Quanto maior a Linha do Tempo, maior será o tamanho (em segundos) da sua apresentação.

A timeline é composta de vários objetos, dentre eles, podemos citar alguns principais, como por exemplo, os layers (camadas) que servem para auxiliar na organização de nossos projetos. A linha do tempo, que controla o tempo utilizado em nossa animação e os controladores. Veremos mais sobre a timeline em um módulo específico, mais adiante no curso.

O PAINEL FERRAMENTAS (TOOLS)

As ferramentas são utilizadas para criarmos todas as nossas animações. É através das ferramentas que podemos desenhar, colorir, escrever, etc. O Flash MX possui algumas ferramentas novas em relação as versões antigas do programa. As ferramentas são muito parecidas com outros programas gráficos, como o Corel Draw TM e o Adobe Photoshop TM.

Page 9: Apostila - Flash MX

www.webaula.com.br Pág:. 5 Copyright© Powered by webAula

FLASH MX

O PAINEL PROPRIEDADES (PROPERTIES)

O painel propriedades é um dos mais importantes na forma de trabalho adotada pelo flash. Através dele, é possível alterar a propriedade de quadros, objetos, configurações gerais do filme, etc. A medida em que você for trabalhando no flash, repare que as opções do painel propriedades são alteradas automaticamente. Em todo momento você estará trabalhando com este painel, seja para auxiliar nos desenhos ou para modificar as propriedades dos filmes.

O PAINEL AÇÕES (ACTIONS)

O flash MX possui um suporte para programação bem aprimorado e um dos principais recursos é o painel de ações.

Na parte superior do painel, aparecem informações sobre qual objeto (ou frame) a ação será aplicada, Para mudar, basta clicar em outro objeto no stage ou selecionar o botão combo que está a direita. Neste último caso, uma lista de objetos será mostrada. Existem várias alternativas de configuração dentro do botão “opções” deste painel. À medida que você for se tornando um usuário mais avançado, experimente alterar estas opções para que o painel atenda melhor, as suas necessidades. Dentre as opções presentes, pode-se destacar o “Localizar” que procura uma palavra no seu código e o “Configurações” que permite modificar as suas preferências de utilização do painel. À esquerda, está o painel com todas as opções de ações que o flash MX suporta. Para acessá-las, basta dar um clique e as sub-opções aparecem.

Page 10: Apostila - Flash MX

www.webaula.com.br Pág:. 6 Copyright© Powered by webAula

FLASH MX

Para inserir qualquer ação, dê um clique na ação desejada, automaticamente ela será mostrada na caixa à direita. Pode-se também, inserir ações clicando com o botão direito sobre o sinal de “+”, localizado acima da caixa de ações. Para excluir ações, clique sobre a primeira linha da ação desejada e clique sobre o sinal de “-“, que também está posicionado acima da caixa de ações. Existem vários outros objetos neste painel que merecem atenção especial, no entanto, eles serão abordados no decorrer do curso para não seja necessário guardar várias informações em um curto espaço de tempo. Caso seja necessário, mais tarde volte a este tópico, para relembrar o conteúdo do painel Ações.

OS OUTROS PAINÉIS

O Flash MX possui vários outros painéis que servem para aumentar a produtividade do programa, dentre eles se destacam o painel “Misturador de Cores” e o painel “Respostas”, que traz respostas de algumas perguntas sobre o Flash MX. Com o uso do programa, cada desenvolvedor se adapta a um layOut distinto, utilizando alguns painéis específicos. Assim acontecerá com você também, que até o final do curso terá definido quais painéis deseja que estejam presentes em sua área de trabalho.

DEFININDO AS CONFIGURAÇÕES

Podemos configurar o Flash para se adaptar ao tipo de trabalho que estamos desenvolvendo, para fazer isto, dê um clique - duplo na “Taxa de Quadros” (FPS) que está situada logo abaixo da Linha do Tempo.

Page 11: Apostila - Flash MX

www.webaula.com.br Pág:. 7 Copyright© Powered by webAula

FLASH MX

Veja a janela “Propriedade do documento” que foi aberta.

A primeira configuração é referente às dimensões do filme, largura e altura. Para se ter uma idéia, uma janela de Navegador na resolução 800X600 pixels possui 780 pixels de largura utilizável. A altura varia de acordo com as configurações do usuário final, podendo ser de 350 a 500 pixels. Para alterar as configurações, digite dois valores quaisquer nos campos Largura e Altura e clique em OK. Abra novamente a janela de propriedades clicando duas vezes sobre a “Taxa de Quadros”. Logo abaixo dos campos largura e altura existem 3 botões. O botão “Impressora” define a área de trabalho do flash de acordo com a área de impressão da impressora padrão. O botão “Conteúdo” define a área de trabalho do flash de acordo com o conteúdo do arquivo (esta opção só irá funcionar se você já tiver desenhado algo no flash), e o botão “Padrão” volta as medidas para o tamanho padrão do flash, que é 550X400 pixels. A próxima opção permite mudar a cor de fundo do stage do flash. Esta opção não é muito usada. O QPS (quadros por segundo, em inglês denominado FPS) corresponde à quantidade máxima de quadros o flash irá rodar por segundo. Na Internet, uma taxa considerada boa varia entre 08 e 12 QPS. Para se ter uma comparação, vídeos feitos para a Televisão usam a taxa de 36 QPS. Marque esta opção com 10 QPS. As “Unidades de Régua” oferecem algumas opções de medidas como: centímetro, milímetro, polegada, pontos e pixels. Na Internet o padrão de medidas é feito em PIXELS, portanto, tente se acostumar com esta medida que pode ser tomada de base com o monitor (no caso do Flash MX recomenda-se 1024X768 de resolução). Há ainda nesta caixa as opções de: Ajuda, Tornar Padrão (Que transforma em padrão as medidas digitadas por você), Ok e Cancelar. Clique em OK.

Page 12: Apostila - Flash MX

www.webaula.com.br Pág:. 8 Copyright© Powered by webAula

FLASH MX

Explorando o painel Ferramentas

AS FERRAMENTAS RETÂNGULO (RECTANGLE) E OVAL (OVAL)

As formas mais básicas de desenho no flash são as ferramentas retângulo e oval. Elas são utilizadas para criar as formas mais simples de desenhos. É preciso dominar o uso destas ferramentas para começar a criar desenhos no flash. Para as pessoas que já utilizaram algum programa de criação gráfica (como o Corel Draw, Photoshop e o próprio Flash em versões anteriores) a utilização desta ferramenta é comum, mas para aqueles que estão iniciando no uso de programas gráficos, veremos como utilizar estas ferramentas detalhadamente.

UTILIZANDO AS FERRAMENTAS RETÂNGULO E CÍRCULO

Vamos começar pela ferramenta Retângulo. Selecione-a no painel “Ferramentas”. Observe que o ponteiro do mouse se modificou. Por padrão, a cor de preenchimento será a cor simbolizada pelo balde que está na guia “Cores” do painel. A cor da linha será a cor simbolizada pelo lápis também na guia “Cores”.

Clique em qualquer ponto da área de desenho e arraste o mouse para a direita e para baixo. O retângulo foi criado. Mude a cor de preenchimento clicando sobre a cor na guia “Cores” e selecionando uma cor dentre as diversas disponíveis.

Page 13: Apostila - Flash MX

www.webaula.com.br Pág:. 9 Copyright© Powered by webAula

FLASH MX

Faça mais um retângulo e veja o resultado. Agora mude a cor da linha, utilizando o mesmo processo que foi usado para mudar a cor do preenchimento. Crie um novo retângulo para ver o resultado.

Crie um novo arquivo clicando em Arquivo/Novo. Vamos iniciar a utilização da ferramenta Oval. O processo é muito parecido com o utilizado na ferramenta retângulo. Selecione uma cor de preenchimento (balde) e uma cor de borda (lápis) para o círculo. Clique em qualquer parte da área de desenho e arraste o mouse para baixo e para a direita.

Como você percebeu, desenhar retângulos e círculos é uma tarefa muito fácil no Flash MX. Você também poderá usar o botão Shift, se quiser desenhar uma bola perfeita ou um quadrado perfeito. Mas, você aprendeu mesmo a usar as ferramentas retângulo e oval?

Page 14: Apostila - Flash MX

www.webaula.com.br Pág:. 10 Copyright© Powered by webAula

FLASH MX

Para praticar, desenhe a figura abaixo.

No próximo tópico iremos aprender a trabalhar com a ferramenta “Seta”.

A FERRAMENTA SETA (ARROW)

A ferramenta seta é umas das mais usadas no ambiente de desenvolvimento do flash. Ela é utilizada principalmente para selecionar, modificar e mover os desenhos criados com as outras ferramentas. O uso da ferramenta seta é fácil, geralmente os usuários que já tem costume em trabalhar utilizando o Mouse aprendem a dominar com esta ferramenta facilmente.

UTILIZANDO A FERRAMENTA SETA

Para utilizar a ferramenta seta, primeiro desenhe um círculo na área de desenho. Selecione a ferramenta seta e dê dois cliques sobre o círculo desenhado. O círculo foi selecionado. Clique sobre ele e arraste-o para cima. Veja que o objeto foi arrastado até a posição onde você soltou o mouse.

Desenhe um quadrado e faça a mesma experiência. Agora clique acima do quadrado e arraste o mouse até encobrir metade do desenho. Você utilizou a ferramenta seta para selecionar parte do desenho. Clique na parte selecionada e arraste-a para cima. O desenho foi dividido em duas partes.

Page 15: Apostila - Flash MX

www.webaula.com.br Pág:. 11 Copyright© Powered by webAula

FLASH MX

Crie um arquivo novo e desenhe um retângulo. Posicione o ponteiro do mouse sobre a linha lateral direita da figura desenhada. Uma curva será mostrada logo abaixo do mouse. Clique e arraste a linha para a direita. O desenho foi transformado.

Agora posicione o mouse sobre a quina inferior esquerda do desenho. Novamente uma figura foi mostrada logo abaixo do ponteiro do mouse, desta vez, indicando que a quina da figura pode ser alterada. Clique e arraste para baixo e para a esquerda. A figura foi transformada novamente.

Agora desenhe um círculo e transforme as suas laterais. Treine esta atividade modificando a forma de vários retângulos e círculos.

AS FERRAMENTAS LINHA (LINE), CANETA (PEN), PINCEL (BRUSH) E LÁPIS (PENCIL)

As ferramentas linha, caneta pincel e lápis, são muito utilizadas na criação de desenhos no flash. Para desenhar cartoons, personagens e ilustrações, os profissionais geralmente utilizam a ferramenta lápis, desenhos em curva, como logomarcas (lembramos que a criação de desenhos para impressão, usualmente são feitos em programas que aceitem o padrão de cor CMYK), geralmente são utilizados os recursos da ferramenta caneta. A ferramenta linha é utilizada para criação de formas geométricas e a ferramenta pincel em desenhos que não precisem de detalhes. No próximo tópico iremos aprender a usar estas 4 ferramentas.

UTILIZANDO AS FERRAMENTAS LINHA, CANETA, PINCEL E LÁPIS

A utilização das ferramentas linha, caneta, pincel e lápis, é muito fácil de assimilar. Vamos começar entendendo o funcionamento da ferramenta linha.

Page 16: Apostila - Flash MX

www.webaula.com.br Pág:. 12 Copyright© Powered by webAula

FLASH MX

Selecione a ferramenta linha e clique em um ponto qualquer da área de trabalho e arraste na direção em que você deseja que a linha seja criada. A linha foi criada com a cor e a espessura especificada no painel propriedades. Acione o painel propriedades e altere a cor da linha. Desenhe novamente para ver as alterações. A segunda propriedade da ferramenta linha é a espessura, que pode variar de 0,25 até 10 pontos. Crie várias linhas utilizando espessuras diferentes.

Por fim, a ferramenta linha possui a propriedade “tipo de linha”, onde você pode escolher vários tipos de linha diferentes. Teste todos os tipos e veja os resultados obtidos.

Aprenderemos agora a utilizar a ferramenta lápis. Selecione a ferramenta e faça um desenho de uma nuvem, bastando para isso clicar e arrastar até a figura ser formada. O painel propriedades da ferramenta lápis é idêntico ao painel propriedades da ferramenta linha, no entanto, na caixa de ferramentas surgem mais uma opção que modifica o formato do lápis.

O formato acertar, cria desenhos mais geométricos, transformando curvas em linhas, a opção suavizar, torna as linhas do desenho mais suave, e o formato tinta para desenhar de linhas de forma simples sem modificações aplicadas.

A forma de usar a ferramenta pincel é muito parecida com o modo de usar a ferramenta lápis. Selecione a ferramenta pincel e veja o painel propriedades. Repare que só existe uma propriedade disponível, para alterar a cor do pincel.

Page 17: Apostila - Flash MX

www.webaula.com.br Pág:. 13 Copyright© Powered by webAula

FLASH MX

Desenhe um retângulo utilizando a ferramenta retângulo. No painel ferramentas aparecem 4 novas opções. A primeira define o tipo de pincel, que poderá ser: Pintar Normal, Pintar Preenchimentos, Pintar Atrás, Pintar Seleção e Pintar dentro. Teste os 5 tipos de pincel desenhando por sobre o retângulo existente.

A segunda opção é referente ao “tamanho do pincel”, logo abaixo está a opção “tipo de pincel”, onde você pode selecionar o tipo de pincel que deseja usar. Por último também existe a opção “Bloquear preenchimento”, para bloquear o preenchimento quando estiver usando a ferramenta pincel. A ferramenta “Caneta” é uma ferramenta de desenho mais avançada, o seu uso está ligado ao trabalho com nós (que são muito usados no programa Corel Draw). O seu uso requer uma prática grande com outras ferramentas de desenho. Vamos começar a utilizar a ferramenta “Caneta” para desenhar uma gota. Escolha a cor de preenchimento azul e a cor da linha preta. Clique em qualquer ponto da área de desenho e solte o mouse. Mova o mouse na vertical para baixo. Clique novamente e arraste o mouse para o lado direito.

Agora clique novamente sobre o primeiro ponto desenhado. A sua gota foi desenhada.

Page 18: Apostila - Flash MX

www.webaula.com.br Pág:. 14 Copyright© Powered by webAula

FLASH MX

AS FERRAMENTAS BALDE DE TINTA (PAINT BUCKET) E TRANSFORMAÇÃO (FILL TRANSFORM)

A ferramenta “Balde de Tinta” é utilizada para modificar o preenchimento de desenhos já prontos. Ela pode ser usada com cores sólidas e com preenchimentos gradientes. A ferramenta “Transformação” é usada para dimensionar, distorcer, rotacionar, inclinar e envelopar as formas criadas com as outras ferramentas de desenho.

UTILIZANDO AS FERRAMENTAS BALDE DE TINTA E TRANSFORMAÇÃO

Para utilizar a ferramenta “Balde de Tinta”, crie um retângulo com a ferramenta retângulo. Selecione a ferramenta “Balde de Tinta” e selecione uma cor na opção cor de preenchimento. Clique com a ferramenta sobre o desenho do retângulo. A figura teve sua cor alterada. Altere a cor do desenho novamente, desta vez escolhendo uma cor gradiente. Agora desenhe um círculo, selecione a ferramenta balde de tinta e logo após a opção “bloquear preenchimento”. Clique sobre a nova figura desenhada. Desmarque a opção “bloquear preenchimento” e clique novamente sobre o círculo. O preenchimento foi alterado. A opção “bloquear preenchimento” preenche as figuras a partir de um ponto selecionado. A outra opção da ferramenta “balde de tinta” corresponde ao tamanho da lacuna a ser fechada. Desenhe um quadrado, selecione o seu preenchimento e apague (mantendo apenas as linhas do quadrado). Selecione uma pequena parte da linha e apague-a.

Agora selecione a ferramenta “balde de tinta” e experimente os vários tamanhos da lacuna.

Page 19: Apostila - Flash MX

www.webaula.com.br Pág:. 15 Copyright© Powered by webAula

FLASH MX

Repare que dependendo do tamanho da lacuna escolhida, a ferramenta não irá aplicar o preenchimento. Peça um arquivo novo e desenhe um quadrado. Selecione o quadrado e logo após selecione a ferramenta “Transformação”. A seleção do quadrado ganhou novos contornos. Pare com o mouse sobre um dos 8 marcadores que apareceram em volta do quadrado e veja que o ponteiro do mouse assumiu um novo desenho. Utilize o mouse e dê a volta sobre as bordas do quadrado. Repare que o ponteiro do mouse assumiu 4 formas distintas. São elas:

Dimensionar na diagonal e vertical, inclinar e rotacionar. Você também pode acionar as opções da ferramenta clicando sobre elas. Teste todas as 4 opções e repare nos resultados obtidos. Agora tente desenhar as seguintes figuras:

No próximo tópico iremos aprender a utilizar a ferramenta apagador.

A FERRAMENTA APAGADOR (ERASER)

A ferramenta apagador é utilizada para desfazer desenhos criados com outras ferramentas. Ela geralmente é usada quando o desenvolvedor precisa dar retoques em desenhos detalhados. Vamos aprender no próximo tópico como trabalhar com esta poderosa ferramenta.

UTILIZANDO A FERRAMENTA APAGADOR

Desenhe um quadrado e um círculo como na figura abaixo.

Page 20: Apostila - Flash MX

www.webaula.com.br Pág:. 16 Copyright© Powered by webAula

FLASH MX

Selecione a ferramenta borracha e clique e arraste sobre o desenho. A parte do desenho que estava sob o caminho da borracha foi apagada. Agora, selecione os vários tipos de formato de Borracha e teste a diferença entre eles.

Outro recurso da ferramenta Borracha é a “Torneira” que apaga automaticamente (utilizando o método de seleção da ferramenta seta) todo o desenho. Assim como a ferramenta pincel, a ferramenta lápis possui vários tipos de borracha, você pode utilizá-los de acordo com a sua necessidade.

A ferramenta Borracha é uma ferramenta muito simples de se usar, pratique a sua utilização em mais alguns desenhos.

Page 21: Apostila - Flash MX

www.webaula.com.br Pág:. 17 Copyright© Powered by webAula

FLASH MX

AS FERRAMENTAS SUBSELECIONAR (SUBSELECTION) E LAÇO (LASSO)

A ferramenta Subselecionar é utilizada para selecionar os objetos como vetores, com a possibilidade de trabalhar os nós de cada desenho. Com ela é possível fazer ajustes para que a o resultado final seja melhor trabalhado. Assim como a ferramenta Caneta, a utilização correta da ferramenta Subselecionar requer um pouco mais de prática. A ferramenta laço é um recurso avançado de seleção. Com ele é possível obter seleções avançadas que permitem aplicar mais precisão ao projeto. Veremos a utilização destas duas ferramentas no próximo tópico.

UTILIZANDO AS FERRAMENTAS SUBSELECIONAR E LAÇO

Para utilizar a ferramenta Subselecionar, crie um desenho como o mostrado a seguir.

Selecione a ferramenta Subselecionar e clique sobre o desenho. Vários pontos foram destacados e a linha do desenho ganhou uma sobre linha azul. Cada ponto destacado é um ponto de curva, ou nó.

Clique sobre o segundo nó e arraste-o para a direita. A figura foi transformada. Cada nó possui dois modificadores, que irão definir a inclinação da curva. Clique sobre o modificador que está a direita e arraste-o para cima. A curva foi modificada. Os modificadores podem fazer curvas simétricas (os dois modificadores de um nó possuem a mesma inclinação) ou podem fazer curvas em forma cúspide (os dois modificadores de um nó possuem inclinação distinta). Para utilizar a ferramenta laço, primeiro faça um círculo como a seguir:

Page 22: Apostila - Flash MX

www.webaula.com.br Pág:. 18 Copyright© Powered by webAula

FLASH MX

Selecione-a no painel Ferramentas e crie uma área de seleção sobre o desenho, clicando e arrastando o mouse.

Veja que a área criada pela ferramenta ficou selecionada. Aperte a tecla “delete”. A área selecionada foi apagada. Selecione agora a opção “Tipo de Polígono”. O método de selecionar foi alterado, agora você deverá dar cliques para marcar a área que deseja selecionar. Faça isso de maneira que consiga chegar ao resultado abaixo.

A FERRAMENTA TEXTO (TEXT)

A ferramenta de texto do flash MX é muito poderosa. Ela permite recursos avançados de edição, tais como: espaçamento e posição de caracteres, direção e alinhamento do texto, Kern automático, além dos recursos normais de formatação: negrito, itálico, margem, parágrafo e recuo. Embora de fácil assimilação, a ferramenta texto possui a idéia de trabalho diferente daquela concebida por editores de texto comuns (por exemplo o Microsoft Word). No flash, qualquer texto deverá ser colocado em caixas de texto independentes e estas caixas podem ser movidas para qualquer lugar da área de trabalho.

Page 23: Apostila - Flash MX

www.webaula.com.br Pág:. 19 Copyright© Powered by webAula

FLASH MX

UTILIZANDO A FERRAMENTA TEXTO

Selecione a ferramenta texto e clique em qualquer lugar da área de trabalho. Uma caixa de texto é criada automaticamente pelo flash, digite o seu nome dentro dela.

Repare que a figura representando a Caixa de Texto é delimitada por uma borda um círculo no canto superior direito. O círculo na parte superior da caixa representa que ela é estática, ou seja, não poderá ser acessada dinamicamente (iremos conhecer mais sobre textos dinâmicos em um curso de FlashMX ActionScript) e que ela não tem delimitador de tamanho automático, ou seja, a medida que você digitar o seu texto, o tamanho horizontal da caixa de texto será alterado. Selecione novamente a ferramenta de “Texto” e crie um quadro delimitador na área de trabalho. Repare que no lugar do pequeno círculo, a caixa de texto agora possui um quadrado.

Esta caixa de texto possui o tamanho horizontal delimitado, ou seja, a medida que você for digitando, a caixa de texto ganhará novas linhas.

Selecione a caixa de texto com a ferramenta seta e ative o painel propriedades. Várias opções ficarão ativas.

A primeira é o tipo de texto, que pode ser estático, dinâmico ou de entrada. Neste curso, iremos aprender a trabalhar somente com textos estáticos, o estudo de textos dinâmicos e de entrada será reservado para um curso posterior de Flash MX – ActionScript. Logo abaixo, estão as coordenadas que indicam a posição da caixa de texto e seu tamanho. À direita, está a opção para escolha da fonte. Clique nesta opção para escolher uma nova fonte para o seu texto.

Page 24: Apostila - Flash MX

www.webaula.com.br Pág:. 20 Copyright© Powered by webAula

FLASH MX

Você também poderá escolher o tamanho da fonte, a cor, se o texto ficará em negrito ou em itálico.

Coloque o texto digitado com as seguintes especificações: tamanho igual a 12, fonte verdana, cor azul, negrito e itálico, observe o resultado.

As próximas opções são referentes à direção e ao alinhamento do texto, teste os três tipos de direção e os quatro tipos de alinhamento para perceber a diferença entre eles. Agora veja as outras opções disponíveis no painel propriedades. Espaçamento entre caracteres, posição do caractere e o auto Kern, que é um padrão de espaçamento de caracteres automático. A opção de rotacionar o texto só ficará ativa se você deixar marcada a direção do texto na vertical e a opção formatar, permite a você endentar, definir o espaçamento entre as linhas, a margem direita e esquerda do texto.

Para perceber os efeitos de cada opção, teste-as e observe o que acontece. Para completar, existem algumas opções que só são ativas caso você tenha selecionado o tipo de texto como sendo dinâmico ou de entrada, como este não é o caso, vamos ver a opção URL Link. Com esta opção você pode adicionar um link ao texto, da mesma maneira como se adiciona um link em um html. Vamos ver mais sobre este recurso no decorrer do curso.

AS FERRAMENTAS MÃO (HAND) E ZOOM (ZOOM)

Page 25: Apostila - Flash MX

www.webaula.com.br Pág:. 21 Copyright© Powered by webAula

FLASH MX

A ferramenta mão serve para mover a tela de trabalho quando se quer visualizar parte do conteúdo que não está visível. Para utilizá-la, selecione-a no painel ferramentas, clique sobre a área de trabalho e mova-a para a direita. Repare que a tela será movida. Com este recurso, você pode visualizar objetos sem alterar o Zoom. A ferramenta Zoom é muito fácil de ser usada. Ela serve para alterar o zoom de visualização da tela. Selecione a ferramenta no painel propriedades, duas novas opções surgiram neste painel, a opção “aumentar” e a opção “reduzir”.

Deixe marcada a opção “aumentar” e dê um clique na tela. Agora mude para a opção “diminuir” e clique novamente na tela. O controle de Zoom também pode ser feito através da ferramenta Zoom localizada na linha do tempo.

Criando os primeiros Desenhos

O QUE O AGRUPAR FAZ E QUAL A SUA APLICABILIDADE

O agrupar é utilizado para que manipular elementos como um único objeto. Ao criar desenhos como, por exemplo, um carro, você deve agrupá-los para poder movê-los ou redimensioná-los como um todo. O agrupar é muito utilizado no Flash MX e seu uso é extremamente fácil.

COMO O AGRUPAR FUNCIONA

Para trabalhar com o agrupar, primeiro desenhe um quadrado. Utilize a ferramenta seta para selecionar o preenchimento do quadrado. Mova-o para a direita. Observe que as linhas continuaram no mesmo lugar.

Page 26: Apostila - Flash MX

www.webaula.com.br Pág:. 22 Copyright© Powered by webAula

FLASH MX

Faça o mesmo experimento movendo a linha à esquerda. As outras três linhas continuaram estáticas enquanto a primeira teve a sua posição alterada. Agora desenhe novamente um quadrado e selecione-o (lembre-se de selecionar o preenchimento e as linhas). Escolha até a opção Modificar/Agrupar. Agora tente selecionar o objeto. Observe que a seleção agora é delimitada por uma linha azul contornando a figura. Clique e arraste o objeto para a direita. Ele será movido como um todo. Para modificar uma figura agrupada, você pode dar dois cliques sobre o objeto, dessa maneira você irá editar o agrupado. Altere a cor de seu preenchimento. Para voltar ao modo normal, dê dois cliques em qualquer área não desenhada. O Flash MX também permite agrupar vários objetos ao mesmo tempo. Desenhe agora um círculo e uma linha. Selecione ambos e vá em: Modificar/Agrupar. Os dois objetos foram agrupados e agora podem ser manipulados como um todo.

DESAGRUPANDO OBJETOS

Para desagrupar objetos, basta fazer o caminho inverso. Selecione um objeto que foi agrupado, vá em Modificar/Desagrupar. A figura que havia sido agrupada anteriormente agora voltou ao seu estado normal. O “Desagrupar” pode ser usado em objetos agrupados e o seu resultado é idêntico ao uso do “Desmembrar” (Crtl + B).

O QUE O ALINHAR E DISTRIBUIR FAZ E QUAL A SUA APLICABILIDADE

O “Alinhar e distribuir” é utilizado para alterar a posição de um objeto em relação a outro objeto ou à área de trabalho. Com ele é possível alinhar a figura pela suas bordas ou pelo seu centro, assim como distribuí-los pelas bordas ou pelo centro. Ainda é possível modificar o seu tamanho em relação à cena ou a outro desenho.

Page 27: Apostila - Flash MX

www.webaula.com.br Pág:. 23 Copyright© Powered by webAula

FLASH MX

COMO O ALINHAR E DISTRIBUIR FUNCIONA

Para utilizar o “Alinhar e distribuir”, primeiro desenhe um quadrado e agrupe-o. Agora desenhe um círculo e agrupe-o também.

Selecione os dois objetos e vá ao menu Janela/Alinhar para ativar o painel “Alinhar e distribuir”. Neste painel você possui a opção de alinhar os objetos à esquerda, à direita, pelo topo, pela base ou no centro vertical e no centro horizontal. Escolha a opção Topo (Quarto botão das opções de alinhamento).

A opção de distribuir funciona de maneira semelhante. Desenhe mais uma figura, selecione-a e teste as opções de distribuir. Caso você queira alinhar e distribuir os objetos pelo palco, marque a opção “No Palco” e teste os comandos. As figuras agora foram alinhadas e distribuídas pelo palco. Existe ainda a opção ajustar tamanho, que ajusta o tamanho do objeto em relação a outro objeto ou ao palco. Para utilizar esta ferramenta, mantenha selecionado apenas o quadrado, deixe marcada a opção “No Palco” e pressione as teclas para ajustar a altura e a largura. A opção “Espaço” é utilizada para delimitar uma mesma distância entre vários objetos. Selecione novamente as 3 figuras que foram desenhadas e pressione o botão de “Espaço”.

O QUE O DESMEMBRAR FAZ E QUAL A SUA APLICABILIDADE

O desmembrar tem função semelhante ao desagrupar. Ele serve para quebrar objetos em partes menores, no caso de um bloco de texto, por exemplo, ele iria separar a frase em diversas letras independentes. O seu uso é semelhante ao uso pode ser feito com texto, figuras agrupadas, objetos gráficos, botões e clipes de filme (Vamos aprender mais sobre objetos em um capítulo posterior).

Page 28: Apostila - Flash MX

www.webaula.com.br Pág:. 24 Copyright© Powered by webAula

FLASH MX

COMO DESMEMBRAR FUNCIONA

Para utilizar o desmembrar, digite o seu nome utilizando a ferramenta texto, selecione-a com a ferramenta seleção e vá até a opção Modificar/Desmembrar. O texto foi quebrado em diversas letras independentes.

CRIANDO DESENHOS EM RELEVO

Pode-se criar desenhos dando-se a impressão de relevo. Para isso, é preciso utilizar um recurso que possibilite a idéia de profundidade. Siga os seguintes passos.

1. Crie um círculo 2. Aplique um preenchimento gradiente conforme a figura abaixo

3. Agrupe o círculo. 4. Duplique o círculo através do menu Editar/Duplicar 5. Diminua o tamanho do segundo círculo

6. Rotacione o segundo círculo em 180º graus. 7. Selecione os dois círculos e alinhe-os, centralizando na horizontal e na vertical. 8. Veja o resultado obtido.

Page 29: Apostila - Flash MX

www.webaula.com.br Pág:. 25 Copyright© Powered by webAula

FLASH MX

Repare que os círculos apresentam profundidade. Agora tente conseguir os seguintes resultados utilizando este mesmo método.

DESENHANDO UM CARRO

Neste tópico vamos aprender a desenhar um carro simples, sem muitos recursos visuais. Primeiro, desenhe os pneus, para isso, crie um círculo preto. Agrupe-o. Agora desenhe um círculo menor, na cor cinza. Agrupe-o também. Selecione os dois círculos e alinhe-os de maneira centralizada.

A sua roda já está pronta, duplique o outro círculo para fazer a outra roda do carro.

Selecione a ferramenta linha e faça o formato do carro. Não se preocupe em atingir um resultado perfeito, você somente conseguirá fazer desenhos realmente bons no flash após ter praticado o uso das ferramentas.

Page 30: Apostila - Flash MX

www.webaula.com.br Pág:. 26 Copyright© Powered by webAula

FLASH MX

Agora escolha uma cor para o seu veículo e preencha o carro com a cor escolhida. Alguns outros ajustes podem ser feitos para que o seu desenho tenha um resultado final de melhor qualidade. Tente praticar até chegar a um resultado parecido com o apresentado abaixo.

Repare que neste desenho foram usados todos os recursos que aprendemos até aqui, inclusive profundidade. No próximo tópico iremos trabalhar com as camadas e a linha do tempo. Este será o primeiro passo para começarmos a fazer animações.

Camadas e Linha do tempo

O QUE SÃO CAMADAS E QUAL A SUA APLICABILIDADE

Camadas são divisões existentes no flash que servem para auxiliá-lo na construção de animações mais profissionais. O seu uso permite que desenhos complexos sejam feitos com mais facilidade. Além disso, a utilização de camadas é de suma importância quando se trabalha com projetos complexos.

Page 31: Apostila - Flash MX

www.webaula.com.br Pág:. 27 Copyright© Powered by webAula

FLASH MX

Usualmente, usa-se camadas para armazenar desenhos, sons, ações e objetos. Pode-se assimilar o uso de camadas com a criação de desenhos animados para a TV. Nos desenhos animados do tipo “Pantera cor de Rosa”, “Mickey”, “Pato Donald”, e outros mais, são usadas telas pra compor a cena como um todo. Dessa maneira, o fundo fica em uma tela, alguns detalhes da paisagem, ficam em outra, o personagem principal em outra, os personagens secundários em outra, etc.

COMO AS CAMADAS FUNCIONAM

Para se trabalhar com camadas é preciso ter conhecimento da linha de tempo (como visto em tópico anterior). Inicialmente o flash vem com uma camada. Insira outra clicando no botão . Selecione a camada inferior dando um clique sobre ela. Agora desenhe um círculo nesta camada. Selecione agora a segunda camada e desenhe um quadrado nela. Mova-o até que fique sobre o círculo. Se estivéssemos trabalhando em apenas uma camada, o quadrado iria recortar o círculo, mas como os desenhos estão em camadas diferentes, um não irá interferir no outro. É possível utilizar três recursos específicos para as camadas. O primeiro é o ocultar a camada.

Para selecioná-lo dê um clique sobre o círculo que está abaixo do ícone representativo e na frente da camada. Oculte a primeira camada dando um clique sobre o círculo preto que existe na frente do nome da camada (Se a camada estiver selecionada, este círculo estará branco), repare que no lugar do círculo, apareceu um “X” sinalizando que aquela camada não pode ser visto. O desenho da primeira camada ficou oculto. Para vê-lo novamente, dê outro clique sobre a camada. Faça o mesmo processo ocultando agora a segunda camada.

Page 32: Apostila - Flash MX

www.webaula.com.br Pág:. 28 Copyright© Powered by webAula

FLASH MX

Para ocultar todas as camadas, dê um clique sobre o ícone de ocultar e todas as camadas serão automaticamente ocultadas.

Para mostrar o conteúdo das camadas, clique sobre o ícone Mostrar/Ocultar novamente. O próximo recurso específico para as camadas é o Bloquear/Desbloquear. Ele é acionado através do “Cadeado” que fica logo após o Mostrar/Ocultar. O processo para bloquear uma camada é o mesmo utilizado para ocultá-la. Dê um clique sobre o círculo preto que está abaixo do cadeado e na frente da primeira camada. Agora tente selecionar o círculo, como ele está bloqueado, não será possível selecioná-lo. Você poderá bloquear todas as camadas clicando sobre o cadeado, para desbloqueá-las, clique novamente sobre o cadeado. O terceiro recurso para as camadas é o Mostrar camadas como linhas. Ele é acionado da mesma maneira que os outros dois recursos. Selecione o recurso para a primeira camada. A visualização dos objetos da camada será feita pelo contorno dos mesmos.

Para apagar uma camada, basta selecionar a camada e clicar sobre o ícone apagar . Os outros dois botões que ser referem a camadas são o “adicionar linha guia” e “adicionar pasta de camadas” e serão vistos posteriormente neste curso.

TIPOS DE CAMADAS

Existem três tipos de camadas, a camada normal, que é a que utilizamos até agora, a camada guia e a camada máscara. A camada guia é adicionada através do botão “adicionar linha guia” e será estudada no próximo módulo. A camada máscara será estudada no módulo “Máscaras”. Basicamente, ela é usada como uma lente, sobre outra camada.

CRIANDO PASTAS PARA AS CAMADAS

Page 33: Apostila - Flash MX

www.webaula.com.br Pág:. 29 Copyright© Powered by webAula

FLASH MX

As pastas para as camadas são muito úteis na organização dos projetos. Este recurso é muito semelhante ao “Folders” utilizado no Photoshop (o uso do Flash junto ao Photoshop permite a criação de trabalhos excelentes). As pastas de camadas são acessadas através do botão “adicionar pasta de camadas”. Crie uma pasta de camadas dando um clique sobre o botão. Agora selecione a camada da pasta e adicione uma camada normal. A nova camada será inserida dentro da pasta. No penúltimo tópico deste curso iremos usar este recurso.

TRABALHANDO COM A LINHA DO TEMPO

A linha do tempo é utilizada para definirmos a duração da animação. Basicamente, a linha do tempo é formada por Quadros, Quadros Chaves e Quadros Chaves em Branco. Projetos complexos podem chegar a ocupar milhares de quadros. Nos próximos três tópicos veremos a diferença entre quadros, quadros chaves e quadros chaves em branco, bem como a sua utilização.

CRIANDO QUADROS (FRAMES)

Crie um documento novo (Arquivo/Novo) e repare que a linha de tempo vem em branco. Ela inicialmente é composta por um Quadro Chave em Branco. Desenhe um quadrado na tela do programa. Agora clique com o botão direito no décimo quadro (também conhecido como frame) do filme e escolha a opção “inserir quadro”.

Page 34: Apostila - Flash MX

www.webaula.com.br Pág:. 30 Copyright© Powered by webAula

FLASH MX

O desenho que você criou será mostrado por 10 quadros quando a sua animação for publicada.

CRIANDO QUADROS-CHAVE (KEYFRAMES)

Os quadros chaves funcionam como se você estivesse dividindo a tela em várias telas de desenho. Cada quadro chave pode receber um desenho independente. Clique novamente com o botão direito no décimo frame e escolha a opção inserir quadro chave. Agora desenhe um círculo neste quadro. Clique no quadro 1 e repare que apenas o quadrado está desenhado. Clique novamente no quadro 10 e veja que os dois desenhos estão na área de trabalho.

Page 35: Apostila - Flash MX

www.webaula.com.br Pág:. 31 Copyright© Powered by webAula

FLASH MX

Isso quer dizer que os desenhos do quadro um e do quadro dez são independentes, ou seja, se você modificar qualquer um deles, o outro não sofrerá alteração.

CRIANDO QUADROS CHAVES EM BRANCOS (BLANK KEYFRAMES)

Os quadros chaves em branco são necessários quando se quer interromper a apresentação de um desenho por determinado período de tempo. Clique com o botão direito sobre o quadro 5 de nosso arquivo e selecione a opção Inserir quadro chave em branco. Repare que do 5º até o 9º quadro, não existe mais desenho. Isto quer dizer que este período da apresentação será em branco. Clique no primeiro quadro e no quadro dez para verificar que os desenhos continuam presentes naqueles quadros.

CONHECENDO AS OPÇÕES DA LINHA DO TEMPO

A linha do tempo possui algumas opções para facilitar o seu uso. São elas: - Centralizar quadro: Usado para centralizar a linha de tempo no quadro atual, somente é possível usar essa ferramenta se você tiver vários quadros em sua apresentação. - Papel de transparência: Exibe dois ou mais quadros ao mesmo tempo. Este recurso é especialmente útil ao criar animações quadro a quadro.

Page 36: Apostila - Flash MX

www.webaula.com.br Pág:. 32 Copyright© Powered by webAula

FLASH MX

- Estruturas Seqüenciais em papel de transparência: Exibe dois ou mais quadros ao mesmo tempo. O quadro ativo é mostrado normalmente, os outros quadros são mostrados em forma de estrutura. - Editar vários quadros: Permite que você modifique vários quadros ao mesmo tempo. - Modificar marcadores de transparência: Permite modificar os marcadores de transparência, para a função desta ferramenta ser percebida, é preciso que o papel transparência esteja ativo. No próximo tópico aprenderemos a fazer as primeiras animações.

Animando os primeiros desenhos

CONCEITO DE ANIMAÇÃO

A criação de animações para a Internet é a principal finalidade do Flash. As animações podem ser de 3 tipos. O primeiro tipo e o mais simples é a animação quadro a quadro, onde cada quadro é desenhado separadamente, o resultado final é uma animação que pode ser muito detalhada. Este tipo de animação é o utilizado na criação de desenhos animados. Outro tipo de animação é a obtida através de recursos do flash, como por exemplo a interpolação de movimento e de forma. Este tipo de animação é fácil de ser obtido e apresenta resultados muito bons. Existe ainda um tipo de animação que será abordada em um curso de Flash MX – Action Script. Essa animação se chama CodeAnimation.

QUADROS POR SEGUNDO (FPS)

A velocidade com que uma animação é apresentada depende dos quadros por segundo do filme. Geralmente na Internet, uma quantidade usual de quadros por segundo varia entre 8 e 12. Para se ter uma comparação, a televisão trabalha com 36 quadros por segundo. O “quadros por segundo” significa quantos quadros serão mostrados para o usuário a cada segundo de animação. Para definir a quantidade de quadros por segundo de uma animação dê dois cliques sobre a “Taxa de Quadros”.

Page 37: Apostila - Flash MX

www.webaula.com.br Pág:. 33 Copyright© Powered by webAula

FLASH MX

Com a janela “Propriedades do Documento” aberta, vá até a taxa de quadros e mude o valor para 10. Caso deseje que esta taxa seja padrão para todos os seus arquivos, clique no botão “Tornar Padrão”.

O QUE A ANIMAÇÃO QUADRO A QUADRO FAZ E QUAL A SUA APLICABILIDADE

A animação quadro a quadro é o tipo mais simples de animação, ela permite que os objetos sejam movimentados a cada quadro da animação, possibilitando o controle completo da posição dos objetos. Uma das características mais marcantes da animação quadro a quadro, é o fato de ser muito trabalhosa a sua criação, além de exigir um raciocínio abstrato grande.

No próximo tópico iremos criar a primeira animação quadro a quadro, no decorrer do curso, a complexidade das animações será maior e a utilização de recursos do Flash também.

ANIMANDO O CÍRCULO

O primeiro objeto que iremos animar, é um circulo.

Page 38: Apostila - Flash MX

www.webaula.com.br Pág:. 34 Copyright© Powered by webAula

FLASH MX

Crie um círculo e agrupe-o. Selecione o primeiro quadro de seu arquivo e insira um Quadro Chave (a tecla de atalho é F6). Agora clique no segundo quadro e mova o círculo um pouco para a direita. Crie novamente um outro quadro chave e repita o processo, movendo o círculo para a direita. Este processo deverá ser repetido até o 10º quadro. Após ter concluído o processo, teste a sua animação apertando a tecla Enter.

Você pode ver todos os quadros da animação clicando no botão Papel de Transparência.

Mova o primeiro marcador do papel de transparência para o primeiro frame e o segundo marcador para o frame 10.

No próximo tópico, vamos animar um boneco.

O QUE A INTERPOLAÇÃO DE FORMA FAZ E QUAL A SUA APLICABILIDADE

A interpolação é um recurso de animação do flash que permite que uma forma seja alterada gradativamente até se transformar em outra forma, por exemplo, pode-se obter o quadrado de um outro objeto inicial, que no caso pode ser um círculo.

Page 39: Apostila - Flash MX

www.webaula.com.br Pág:. 35 Copyright© Powered by webAula

FLASH MX

COMO A INTERPOLAÇÃO DE FORMA FUNCIONA

Para utilizar a interpolação de forma, crie um quadrado no primeiro quadro, insira um Quadro Chave em Branco no frame 10 e crie um círculo neste quadro. Os dois objetos devem estar desagrupados. Selecione novamente o quadro 1 torne ativo o painel “Propriedades”, e escolha movimento “Forma”.

Veja o resultado obtido pressionando Ctrl + Enter.

O QUE A INTERPOLAÇÃO DE MOVIMENTO FAZ E QUAL A SUA APLICABILIDADE

A interpolação de movimento ou simplesmente Motion, como é conhecida pelos profissionais em flash permite que objetos tenham a sua posição alterada automaticamente. Algo parecido com o que foi feito na animação quadro a quadro, no entanto sem ter todo o trabalho necessário naquele momento. Com o recurso do Motion, é possível criar efeitos geniais, por isso, este recurso será usado diversas vezes durante o curso.

Page 40: Apostila - Flash MX

www.webaula.com.br Pág:. 36 Copyright© Powered by webAula

FLASH MX

COMO A INTERPOLAÇÃO DE MOVIMENTO FUNCIONA

Para trabalhar com o Motion, crie um círculo no primeiro quadro de seu arquivo e agrupe-o. O Motion somente funciona com objetos agrupados ou transformados em símbolos. Selecione o décimo frame de sua animação e insira um Quadro Chave. Clique novamente no primeiro quadro, mas desta vez com o botão direito do mouse. Selecione a opção Criar Interpolação de Movimento. Repare que o processo para criar o Motion foi diferente do processo utilizado para criar a interpolação de Forma. O Motion pode ser usado com qualquer um dos dois processos. Veja o resultado obtido.

UTILIZANDO A LINHA GUIA

A linha guia, como já foi mencionado anteriormente, é utilizada para possibilitar que os objetos animados através do recurso Motion possam seguir um caminho ao efetuarem sua movimentação. Para utilizar a linha guia, primeiramente, crie uma animação assim como foi feito no tópico anterior. Repare que o círculo se movimenta na horizontal sem sofrer qualquer alteração em sua trajetória. Agora adicione uma guia de Movimento clicando no ícone apropriado e selecionando a opção Papel de Transparência. Movimente o marcador do papel de transparência até o quadro 10.

Agora selecione a camada Guia e desenhe uma linha que tenha o seu ponto inicial no centro do círculo que está no primeiro quadro e o seu ponto final no centro do círculo que está no quadro 10.

Page 41: Apostila - Flash MX

www.webaula.com.br Pág:. 37 Copyright© Powered by webAula

FLASH MX

Selecione a ferramenta Seta e modifique a linha guia criando uma curva.

Veja o resultado obtido:

CRIANDO ANIMAÇÕES COM LETRAS

É possível criar animações utilizando letras e palavras. Primeiro, vamos criar uma animação de forma utilizando duas letras. No primeiro quadro, escreva a letra “A” (utilizando a ferramenta Texto) e altera as suas propriedades para Verdana, tamanho 50, negrito e na cor verde. Para utilizarmos a animação de forma no texto, será necessário quebrá-lo. Faça isto acessando o menu Modificar/Desmembrar (esta opção pode ser acessada através do atalho Ctrl + B).

Page 42: Apostila - Flash MX

www.webaula.com.br Pág:. 38 Copyright© Powered by webAula

FLASH MX

Agora insira um quadro chave em Branco no quadro 10 de sua animação e digite a letra “B” com as mesmas propriedades de formatação, apenas diferenciando a cor, que deverá ser azul. Repita o processo de desmembrar a letra através do atalho Ctrl + B. Selecione novamente o quadro 1, ative o painel propriedades e escolha interpolação “Forma”. Teste o filme para verificar o resultado obtido.

A segunda animação com texto que faremos será utilizando o Motion. Digite o seu nome e formate-o com os atributos que desejar, no exemplo utilizamos Verdana, tamanho 50, negrito, na cor Vermelha. Clique no quadro 10 e insira um Quadro Chave. Selecione novamente o primeiro quadro, ative o painel propriedades e escolha interpolação “Movimento”. Alguma opções ficam ativas:

Estas opções ficam ativas sempre que se usa o recurso interpolação de movimento. Selecione a opção Rotação, “Sentido horário” e marque na caixa ao lado 5 vezes. Teste o seu filme para ver o resultado.

Page 43: Apostila - Flash MX

www.webaula.com.br Pág:. 39 Copyright© Powered by webAula

FLASH MX

Máscaras

O QUE SÃO MÁSCARAS E QUAL A SUA APLICABILIDADE

As máscaras são um importante recurso do Flash que permitem que apenas uma parte da animação seja mostrada ao usuário. Com este recurso, é possível montar apresentações primorosas e efeitos especiais. Abaixo, veja um exemplo de máscara.

COMO AS MÁSCARAS FUNCIONAM

Para trabalhar com máscaras, primeiro, crie a animação normalmente, neste caso, escreva o seu nome, obtendo o resultado mostrado a seguir:

Agora adicione uma camada, crie um círculo nesta camada e agrupe-o. Este círculo será usado como a máscara, mas antes disso, será necessário animá-lo. Crie um quadro chave no quadro 10 da camada que contém o círculo. Adicione o efeito de Motion de maneira que o círculo se mova por toda a extensão do nome que está na primeira linha. Adicione um quadro chave no quadro 11 da camada que contém o círculo e mova-o para o começo do nome que está na segunda linha. Agora clique no quadro 20 desta camada e mova o círculo para o fim do nome que está na segunda linha. Aplique o efeito Motion a estes quadros também. Veja o resultado obtido até aqui:

Page 44: Apostila - Flash MX

www.webaula.com.br Pág:. 40 Copyright© Powered by webAula

FLASH MX

Agora clique com o botão direito sobre a camada que cotem o círculo e selecione a opção Máscara. Pronto, você já adicionou o efeito de máscara ao seu arquivo.

Símbolos

CONCEITO DE OBJETOS

Os símbolos, ou objetos como são usualmente chamados, são largamente utilizados nos projetos desenvolvidos em Flash. Além de outras utilidades que iremos perceber com o decorrer do uso, uma das principais características do uso de símbolos é a diminuição do tamanho dos arquivos. Como exemplo, veja os dois arquivos abaixo.

Page 45: Apostila - Flash MX

www.webaula.com.br Pág:. 41 Copyright© Powered by webAula

FLASH MX

Quando este arquivo foi construído sem o uso de símbolos, o primeiro arquivo ficou com 1 KB de tamanho e o segundo, que possui vários objetos, com 3 KB. O mesmo arquivo construído com a utilização de símbolos teria o tamanho de 1KB em qualquer um dos arquivos, isto por que não importa a quantidade de vezes que você usa o símbolo, ele só será construído uma vez pelo flash, nas outras vezes, ele será apenas uma referência para o objeto que já existe. Nos próximos tópicos iremos aprender a criar símbolos e a utilizá-los na construção de animações flash.

O QUE SÃO GRÁFICOS E QUAL A SUA APLICABILIDADE

Os gráficos são os símbolos mais simples capazes de serem construídos no flash. Geralmente os gráficos são utilizados quando se vai trabalhar com formas simples, e que podem estar estáticas durante a montagem de apresentação. Um exemplo de utilização de símbolo do tipo gráfico, pode ser através da utilização de fotos ou figuras geométricas (como no exemplo mostrado no tópico anterior). Geralmente qualquer outro objeto, seja ele botão ou clipe de filme (veremos sobre estes símbolos mais tarde) são criados primeiro com gráficos.

COMO OS GRÁFICOS FUNCIONAM

Neste tópico iremos criar um gráfico com um desenho qualquer, o mesmo processo pode ser usado para criar gráficos com qualquer outro tipo de desenho. Crie um círculo como mostrado na figura abaixo.

Selecione a figura, dando duplo clique nela e vá até o menu Inserir/Converter em Símbolo (atalho F8). A janela “Converter em Símbolo” é aberta.

Page 46: Apostila - Flash MX

www.webaula.com.br Pág:. 42 Copyright© Powered by webAula

FLASH MX

A primeira opção desta janela, é o nome do símbolo. Geralmente são utilizados nomes que irão representar o símbolo. Neste caso, escolha “círculo”. Logo abaixo, escolha o tipo de objeto, em nosso exemplo, Gráfico. A opção registro, é utilizada para informar onde será o centro do símbolo em relação ao desenho. Clique em OK. O símbolo gráfico chamado “Círculo” foi criado. Para acessar este símbolo, vá até o menu Janela/Biblioteca. A biblioteca do arquivo será aberta, e o gráfico que foi criado agora está sendo mostrado na janela. Clique e arraste-o até a área de trabalho. Uma nova referência do objeto foi inserida ao filme.

O QUE SÃO BOTÕES E QUAL A SUA APLICABILIDADE

Os botões são símbolos utilizados para executar ações no Flash (veremos mais sobre ações em um tópico posterior). Os botões podem ser usados por exemplo como links para outras páginas ou para um ponto qualquer da animação. Além disso, eles podem ser usados para ativar ações complexas. Vamos aprender como trabalhar com botões nos próximos tópicos.

COMO OS BOTÕES FUNCIONAM

Os botões funcionam como links para ações. Para criar um botão, faça um desenho como o mostrado abaixo.

Pressione a tecla de atalho F8, dê um nome para o objeto, como por exemplo “botão”, marque o tipo de objeto como Botão e clique em Ok.

Page 47: Apostila - Flash MX

www.webaula.com.br Pág:. 43 Copyright© Powered by webAula

FLASH MX

Os botões possuem uma característica diferente em relação aos outros objetos do Flash, pois possuem 4 estágios pré-definidos.

Acesse o modo de edição do Botão criado dando um clique duplo sobre ele. O botão será aberto no modo de edição conforme figura acima. Repare que dos 4 quadros existentes no botão, apenas o primeiro está preenchido. Cada quadro representa um modo de exibição do botão, veja abaixo a explicação de cada um.

- Para cima: Estado natural do botão. Esta é a imagem que será exibida quando o filme flash for

carregado. - Sobre: Este estado é mostrado quando o ponteiro do mouse está sobre o botão. - Para baixo: Sempre que o botão for clicado, este estado será mostrado. - Área: É a área sensível do botão. O botão pode ter uma área maior ou menor do que o desenho

do estado Em cima. Preencha os estados adicionando um Quadro Chave em cada um dos estados. Abaixo é mostrada uma sugestão para cada um dos estados.

O QUE SÃO CLIPES DE FILME E QUAL A SUA APLICABILIDADE

Os Clipes de Filme (usa-se a sigla MC), ou Movie Clips como são conhecidos na versão em Inglês do programa são os símbolos mais complexos existentes no Flash MX. Eles trabalham como filmes independentes dentro do filme principal. Os MC´s possuem linha de tempo própria, ou seja, não depende da linha de tempo do filme principal, pode receber ações, comandos e nomes próprios. No próximo tópico aprenda como os Clipes de Filme funcionam.

COMO OS CLIPES DE FILME FUNCIONAM

Os clipes de filme são independentes do filme principal, portanto dentro de um clipe de filme é possível obter animações, sem que o filme principal seja trabalhado. Crie um círculo conforme o desenho abaixo e agrupe-o.

Page 48: Apostila - Flash MX

www.webaula.com.br Pág:. 44 Copyright© Powered by webAula

FLASH MX

Selecione-o e aperte a tecla de atalho F8 para transformá-lo em um MC. Na janela Converter para Símbolo, dê um nome para o MC e selecione a opção Clipe de Filme antes de clicar em OK. Agora dê um clique duplo sobre o MC e entre em seu modo de edição.

Repare que a Linha de Tempo do MC é semelhante a linha de tempo do filme principal, no entanto as alterações que forem feitas na área do MC não afetarão o filme principal. Adicione um Quadro Chave no quadro 25 do Clipe de Filme e mova o círculo para a direita. Agora selecione o quadro 1 e adicione a interpolação de movimento (Motion).

Volte ao filme principal e note que a linha de tempo possui apenas um Quadro. Isso ocorre porque adicionamos quadros a linha de tempo do Clipe de Filme e não do filme principal.

Page 49: Apostila - Flash MX

www.webaula.com.br Pág:. 45 Copyright© Powered by webAula

FLASH MX

OBJETOS DENTRO DE OBJETOS

Em um tópico anterior transformamos um gráfico em um botão. Naquele momento, estávamos inserindo um gráfico dentro de um botão. O Flash permite que os símbolos sejam colocados dentro de outros símbolos. Essa interação é essencial para se conseguir resultados atraentes e dinâmicos. É possível colocarmos botões dentro de gráficos ou clipes de filme, gráficos dentro de gráficos, clipes de filme ou botões e clipes de filme dentro de qualquer outro símbolo. Vamos criar um exemplo da utilização de objetos dentro de objetos.

Primeiro crie o gráfico da bola. Faça um pequeno círculo, agrupe-o e transforme-o em Gráfico. Selecione o gráfico criado e transforme-o em um MC. Abra-o em modo de edição e movimente-o para cima e para baixo. Para isso, adicione um Quadro Chave no quadro 5 e no quadro 10. Selecione o quadro 5 e movimente o círculo para baixo. Adicione o efeito de Motion ao quadro 1 e ao quadro 5.

Agora selelcione o quadro 9 e adicione um Quadro Chave a ele. Exclua o quadro 10 do Clipe de Filme. Este procedimento é feito para que a animação não possua um atraso quando for executada.

Vá até o filme principal novamente, selecione o MC criado e transforme-o novamente em um Clipe de Filme, pressionando a tecla F8. Faça exatamente o mesmo procedimento com este Clipe de Filme, mas, em vez de movimentá-lo para baixo, movimente-o para a direita. Aperte a tecla Ctrl + Enter e veja o filme funcionando.

Page 50: Apostila - Flash MX

www.webaula.com.br Pág:. 46 Copyright© Powered by webAula

FLASH MX

Introdução ao conceito de ações

CONHECENDO AS AÇÕES DO FLASH (ACTIONSCRIPT)

O Flash MX trabalha com o ActionScript, que é um script com estrutura muito parecida ao JavaScript. O ActionScript permite que o desenvolvedor flash desenvolva aplicações simples e complexas.

Neste curso de Flash MX iremos aprender a trabalhar com ações simples, usadas para controlar o andamento do filme. Veja abaixo um exemplo de ação no Flash MX.

As ações são ativadas pelo botão “adicionar novo item ao Script” ou pelo navegador de ações. Elas são excluídas pelo botão “Deletar ação selecionada”.

AÇÕES BÁSICAS

As ações que iremos aprender são aquelas existentes desde as primeiras versões do Flash, são elas:

Page 51: Apostila - Flash MX

www.webaula.com.br Pág:. 47 Copyright© Powered by webAula

FLASH MX

Stop () – Usada para parar o filme Play () – Usada para iniciar o filme GotoAndStop () – Envia o filme a um quadro específico e para neste quadro GotoAndPlay () – Envia o filme a um quadro específico e reproduz o filme a partir deste quadro StopAllSounds () – Para a reprodução de todos os sons do filme FsCommand () – Usada para controlar o filme que está sendo executado fora de um navegador (.swf ou .exe) GetUrl () – Usado para abrir uma página na internet (como Link) With () – Usado para chamar um Clipe de Filme específico

O QUE SÃO AS AÇÕES DE BOTÕES E QUAL A SUA APLICABILIDADE

As ações de botões são aquelas aplicadas aos símbolos de botões. Toda ação de botão precisa de um evento para ser acionada e é aplicada para o filme em que o botão está inserido. Se o botão estiver dentro de um Clipe de Filme, por padrão, a ação será aplicada a este Clipe de Filme. As ações de botões também podem atuar em outros filmes, veremos mais sobre isso em um tópico posterior. Os eventos de botões são acionados sempre que o botão é ativado de alguma forma, veja abaixo as ações possíveis.

COMO AS AÇÕES DE BOTÕES FUNCIONAM

Abra a animação 0904.fla que está no disquete do Curso ou crie uma animação simples movimentando um círculo. Insira mais uma camada neste arquivo e crie um botão nesta camada.

Page 52: Apostila - Flash MX

www.webaula.com.br Pág:. 48 Copyright© Powered by webAula

FLASH MX

Selecione o botão, ative o painel ações. Vá até o botão “Adicionar novo item ao Script”, Ações, Controle de Filme e escolha Stop();

A ação é inserida no script:

Selecione a primeira linha de comando dando um clique sobre: “on (release){“. Este é o comando de evento, informando ao flash qual evento do Mouse o botão deve esperar. Veja na janela as outras opções de evento disponíveis.

Agora teste o filme pressionando as teclas Ctrl + Enter ou ativando o menu Controle/Testar Filme. Inicialmente o círculo está se movimentando, para que ele pare, clique uma vez sobre o botão. Pronto, sua primeira ação foi criada. Agora crie outro botão e repita o processo, mas desta vez colocando a ação de Play();

O QUE SÃO AS AÇÕES DE QUADROS E QUAL A SUA APLICABILIDADE

As ações de Quadros são aquelas acionadas sempre o filme chega ao quadro que contém a ação. Elas são muito usadas para iniciar variáveis e controlar Clipes de Filmes (variáveis serão estudadas no curso de Flash MX - ActionScript). As ações de Quadros são semelhantes às ações de botões, a única diferença é que não é possível definir um evento para acioná-la, ela sempre será acionada quando o Quadro estiver ativo.

Page 53: Apostila - Flash MX

www.webaula.com.br Pág:. 49 Copyright© Powered by webAula

FLASH MX

COMO AS AÇÕES DE QUADROS FUNCIONAM

As ações de quadros funcionam quase da mesma forma que as ações de botões, diferindo no fato de não ser preciso definir um evento. No mesmo filme utilizado nas ações com botões, selecione o último Quadro Chave e ative o painel Ações. Novamente clique no botão “Adicionar novo item ao Script” e insira a ação de Stop();

Diferente da ação de botão, a ação de Quadro é mostrada isolada no painel Ações.

Teste o filme para visualizar o funcionamento da ação. Assim que chega no último Quadro, o filme para de reproduzir. Para ativá-lo novamente será preciso criar um botão de Play();.

Trabalhando com ações simples

O QUE O STOP ALL SOUNDS FAZ E QUAL A SUA APLICABILIDADE

Nos tópicos anteriores iniciamos o trabalho com ações. Foram utilizadas as ações Stop(); e Play();. A ação Stop All Sounds é utilizada para parar todos os sons que estão sendo tocados no filme. Neste primeiro momento não será sentido o efeito da ação Stop All Sounds ();, pois somente iremos trabalhar com sons no módulo Importando e Exportando.

COMO O STOP ALL SOUNDS FUNCIONA

Page 54: Apostila - Flash MX

www.webaula.com.br Pág:. 50 Copyright© Powered by webAula

FLASH MX

O stopAllSounds (); funciona da mesma forma que as ações Play() e Stop(). Em ambas, não é necessário definir nenhum parâmetro. Para inserir a ação stopAllSounds (), crie um novo arquivo e insira um botão. Ative o painel ações, clique no botão “Adicionar novo item ao Script”, vá em Ações, Controle de Filme e escolha stopAllSounds().

Quando o botão for ativado, todos os sons que estiverem sendo tocados no momento serão parados. Trabalharemos mais com esta ação no módulo Importando e Exportando.

O QUE O GETURL FAZ E QUAL A SUA APLICABILIDADE

A ação getURL (); é usada como link. Ela abre novas janelas do internet explorer, pode ser usada também para abrir popUps e páginas em frames do Internet Explorer. No curso de Flash MX – ActionScript, a ação getURL será usada para acionar funções JavaScripts. A ação getURL necessita que sejam inseridos até 3 parâmetros, que são: URL, Janelas e Variáveis. Estes parâmetros serão estudados no próximo tópico.

COMO O GETURL FUNCIONA

Para utilizar o getURL, crie novamente um botão, selecione-o e ative o painel Ações. Clique no botão “Adicionar novo item ao Script”, selecione Ações, Navegador/Internet e escolha getURL. O comando getURL necessita que alguns parâmetros sejam marcados. Para isso, selecione a linha que contém o comando no painel Ações.

Page 55: Apostila - Flash MX

www.webaula.com.br Pág:. 51 Copyright© Powered by webAula

FLASH MX

Veja a definição de cada parâmetro. URL – O endereço na internet que você quer acessar. Se você quiser entrar no site da Fifa por exemplo, o endereço será http://www.fifa.com. Neste parâmetro é necessário colocar o endereço completo. Janela – Em qual janela você deseja abrir a página. _self abre na própria janela, _blank, em uma janela em branco, _parent na janela superior e _top, em outro frame do navegador. Deixe marcada a opção _blank Variáveis – Caso seja necessário passar variáveis pelo link da página, será necessário utilizar este recurso. Send using GET, utiliza a função GET (como em um formulário qualquer) e Send using POST, que utiliza a função POST do navegador. Em nosso exemplo não é necessário marcar nenhuma das duas. Veja que a linha do comando getURL se alterou. Teste o seu filme pressionando Ctrl + Enter e clique sobre o botão para ver funcionando. No próximo tópico iremos aprender sobre o comando Goto.

O QUE O GOTO FAZ E QUAL A SUA APLICABILIDADE

O comando Goto é utilizado para mandar o usuário para uma outra parte do filme. Assim como o comando getURL, o comando Goto também necessita que alguns parâmetros sejam definidos pelo desenvolvedor. O comando Goto é amplamente usado em jogos criados em Flash. No próximo tópico iremos visualizar o seu desenvolvimento.

COMO O GOTO FUNCIONA

Crie um filme em branco. No primeiro Quadro Chave, desenhe um círculo. Insira um quadro Chave no quadro 10 e outro no Quadro 20. Agora clique no quadro 30 e adicione mais um Quadro Chave. No quadro 10, desenhe um Quadrado. Selecione o quadro 20 e desenhe novamente um círculo, mas de uma cor diferente do círculo inserido no primeiro quadro.

Page 56: Apostila - Flash MX

www.webaula.com.br Pág:. 52 Copyright© Powered by webAula

FLASH MX

Teste o filme pressionando Ctrl + Enter. Agora volte ao modo de edição do filme. Neste nosso exemplo, vamos fazer com que, ao chegar no quadro 30, o filme seja direcionado para o quadro 10, que contém o quadrado. Selecione o Quadro 30 e ative o painel Ações. Clique sobre o botão “Adicionar novo item ao Script”, selecione Ações, Controle de Filme e escolha a opção goto.

Selecione o comando conforme figura acima e veja a janela de parâmetros. A primeira opção permite escolher se deseja que o filme pare ou não ao chegar no novo quadro. Para fazer ele parar, escolha gotoAndStop, para fazer com que ele chegue ao novo quadro e reproduza, escolha gotoAndPlay. No nosso caso, deixe marcada a opção gotoAndPlay. A segunda opção permite que seja acionada outra cena, caso ela exista. Clique no botão para ver as opções possíveis, mas deixe marcada a opção <current scene>. A opção Tipo permite que sejam indicados o número do quadro, o nome, expressões, o póximo quadro (nextFrame) e o quadro anterior (prevFrame). Deixe marcado como número. Na opção Quadro, escreva o número 10. Veja como ficaram as opções:

Agora teste o filme novamente e veja como o comando alterou andamento da animação. Selecione novamente o Quadro 10 e ative o painel Propriedades. Dê o nome “goto” para o quadro. Agora selecione o Quadro 30 e ative o painel Ações. Mude o tipo “Número de Quadro” para “Rótulo de Quadro” e na opção Quadro, escreva “goto”. Teste o seu filme novamente. O efeito será o mesmo.

Page 57: Apostila - Flash MX

www.webaula.com.br Pág:. 53 Copyright© Powered by webAula

FLASH MX

Importando e Exportando

O QUE É IMPORTAR E QUAL A SUA APLICABILIDADE

O recurso de importação permite que a apresentação em Flash possua elementos de outros programas.

É possível por exemplo, que um filme em Flash mostre fotos criadas no Adobe Photoshop, desenhos vetoriais do Corel Draw, arquivos de sons do GoldWave, imagens em três dimensões do 3Dmax e vídeos RealPlayer.

Graças ao recurso Importar, é possível enriquecer apresentações em Flash para que elas fiquem com aspecto profissional. Veja mais sobre este recurso nos próximos tópicos.

COMO O IMPORTAR FUNCIONA

Para utilizar o recurso de Importar, clique no menu Arquivo/Importar (atalho Ctrl + R). A janela de importação será aberta.

Clique na opção Tipo de Arquivo para ver todas as extensões suportadas. Deixe marcada a opção Todos os arquivos. Abra a pasta c:\cursoflash e importe a figura importar.gif que está lá dentro.

Pronto, a figura foi inserida dentro do seu filme.

Page 58: Apostila - Flash MX

www.webaula.com.br Pág:. 54 Copyright© Powered by webAula

FLASH MX

No próximo tópico iremos aprender a trabalhar um pouco mais com arquivos importados.

MODIFICANDO ARQUIVOS IMPORTADOS

Caso você importe uma figura no Flash e depois altere-a, você pode fazer a atualização pelo próprio flash, sem precisar importá-la novamente.

Ative o painel Biblioteca (atalho F11) e localize a figura importada.

Clique com o botão direito sobre a figura e escolha a opção atualizar. A janela “Atualizar Itens da Biblioteca” será aberta. Os itens que precisam ser atualizados estão marcados e um pequeno relatório é mostrado indicando quantos itens precisam ser atualizados.

Page 59: Apostila - Flash MX

www.webaula.com.br Pág:. 55 Copyright© Powered by webAula

FLASH MX

Neste caso, basta clicar no botão atualizar e pronto, o arquivo será atualizado, mas em nosso exemplo, como a figura não foi alterada, não será preciso atualizá-la.

IMPORTANDO ARQUIVOS DE SOM

Neste tópico iremos trabalhar com arquivos de sons. Para isso, crie um arquivo novo no Flash. Acione o menu Arquivo/Importar (atalho Ctrl + R), acesse novamente a pasta c:\cursoflash e selecione o arquivo som.wav, clique em Abrir.

Diferente do arquivo de imagem, o arquivo de som não é colocado no filme automaticamente. Ele fica na biblioteca e precisa ser inserido no filme.

Ative o painel Biblioteca através do menu Janelas/Biblioteca (atalho F11). Selecione o som na biblioteca e arraste-o para o filme. O som será mostrado simbolizado no Quadro.

Selecione o primeiro quadro da animação e ative o painel propriedades. Veja que a opção de som está marcada com som.wav. É possível atribuir alguns efeitos aos sons.

Canal Esquerdo – Será executado apenas no canal esquerdo de áudio

Canal Direito – Será executado apenas no canal direito de áudio

Fade Esquerda para Direita – Irá mudar gradativamente da esquerda para a direita

Fade Direita para Esquerda – Irá mudar gradativamente da direita para a esquerda

Fade In – O som terá o seu volume aumentado gradativamente

Fade Out – O som terá o seu volume diminuído gradativamente

Personalizado – Através do botão editar é possível alterar os efeitos do som

A sinc. que quer dizer sincronizar possui quatro estados.

Evento – Inicia o som ao chegar ao quadro

Iniciar – Como o de anterior, inicia o som ao chegar ao quadro

Parar – Para o som ao chegar ao quadro

Fluxo – O som é tocado a medida que os quadros que o contem são vistos. Para que a opção de fluxo funcione é necessário que sejam preenchidos com quadros até o fim do som.

A última opção do som, está relacionada a quantas vezes você deseja que o som se repita, marque duas para visualizar o recurso.

Page 60: Apostila - Flash MX

www.webaula.com.br Pág:. 56 Copyright© Powered by webAula

FLASH MX

Teste o seu filme com a tecla de atalho Ctrl + Enter.

O QUE O EXPORTAR FAZ E QUAL A SUA APLICABILIDADE

Assim como é possível importar arquivos de outros programas, o Flash também permite que você exporte arquivos para outros programas ou como imagem.

Com o recurso de exportar, pode-se integrar as animações criadas em Flash com diversas outras tecnologias, possibilitando assim a criação de um trabalho de mais qualidade final.

COMO O EXPORTAR FUNCIONA

Para exportar com o Flash, primeiro crie uma animação qualquer, como por exemplo, um círculo indo de um lado para outro.

Vá em Arquivo/Exportar Filme. A janela Exportar Filme será aberta. Escolha o tipo de formato que você deseja exportar, dê um nome para o arquivo que será criado e clique em Salvar.

Serão apresentadas opções distintas dependendo do formato que você escolher para exportação.

Instanciando Clipes de Filme

O QUE O INSTANCIAR FAZ E QUAL A SUA APLICABILIDADE

O recurso de instanciar Clipes de Filme é muito utilizado na programação em Flash. No entanto, neste primeiro momento estaremos trabalhando apenas com recursos simples.

O instanciar, nada mais é do que dar um nome aos símbolos criados. Até a versão 5.0 do Flash, só eram possíveis instâncias para Clipes de Filme, na versão MX do programa, é possível instanciar gráficos, botões, caixas de texto, além de clipes de Filme.

Page 61: Apostila - Flash MX

www.webaula.com.br Pág:. 57 Copyright© Powered by webAula

FLASH MX

Quando um Clipe de Filme é instanciado, ele passa a ser conhecido pelo nome que foi dado a ele e qualquer ação que for aplicada a este filme, deverá ser chamada através da instância.

No próximo tópico iremos aprender a instanciar um MC.

COMO O INSTANCIAR FUNCIONA

Abra o arquivo 1101.fla deste módulo e selecione o Clipe de Filme existente. Ative o painel Propriedades e na caixa <Nome da Instância> digite o nome “Um”. Agora este filme é conhecido por “Um” pelo programa.

Duplique-o pressionando as teclas Ctrl + D e selecione o novo objeto e renomeie-o para “Dois”.

Neste nosso arquivo temos agora dois Clipes de Filme, mas cada um conhecido por um nome diferente, “Um” e “Dois”. Nos próximos tópico iremos ver na prática a utilidade destes nomes.

O QUE É A AÇÃO WITH E QUAL A SUA APLICABILIDADE

O Comando With é o comando que permite ao Flash identificar qual Clipe de Filme instanciado será acessado.

É como se você estivesse chamando o MC pelo nome, neste caso, mesmo que tenham dois MC´s iguais, apenas o que for chamado atenderá. Veja como o With funciona no próximo tópico.

COMO A AÇÃO WITH FUNCIONA

No mesmo arquivo do tópico anterior, adicione uma nova camada e crie um botão na camada nova. Selecione o botão e ative o painel Ações.

Clique no botão “Adiciona um novo item ao Script”, selecione Ações, Variáveis e escolha With.

Page 62: Apostila - Flash MX

www.webaula.com.br Pág:. 58 Copyright© Powered by webAula

FLASH MX

Pronto, o comando With já foi inserido.

Clique na caixa de texto Objeto e depois clique no botão “Insere um caminho de Destino”. Os dois Nomes que foram dados aos Clipes de Filme serão listados.

Selecione o “Dois” e clique em OK.

O comando With está completo, no próximo tópico, veja como as ações serão inseridas.

APLICANDO AÇÕES PARA MOVIE CLIPS INTANCIADOS

Com o mesmo arquivo do tópico anterior, selecione a linha de comando With como mostra a figura abaixo.

Então clique no botão “Adiciona um novo item ao Script”, Ações, Controle do Filme e escolhe Stop();.

Page 63: Apostila - Flash MX

www.webaula.com.br Pág:. 59 Copyright© Powered by webAula

FLASH MX

Teste o filme criado, pressionando Ctrl + Enter.

Quando o botão for clicado, apenas o Clipe de Filme com o nome “Dois” será afetado pela ação e terá a sua animação interrompida.

COMPREENDENDO A ESTRUTURA CRIADA

O que fizemos neste tópico foi dar nome a Clipes de Filme. Estes nomes ficam dentro do flash e são utilizados como referência para ações e comandos.

O filme principal, é conhecido como _root, sendo assim, a estrutura que criamos foi a seguinte

_root

Um

Dois

Onde os filmes Um e Dois estão dentre do filme _root. Esta estrutura pode se repetir para MC dentro de Clipes de Filmes.

Publicando o Filme

O QUE O PUBLICAR FILME FAZ E QUAL A SUA APLICABILIDADE

Publicar, é disponibilizar o seu curso no formato próprio para que o usuário final veja-o.

No caso da internet, para publicar um filme flash, é necessário gerar um arquivo .swf e um arquivo .html, se a mídia que você está usando é um cd, o formato mais apropriado será o .exe, que é um arquivo executável. Neste módulo, será visto como Publicar o arquivo e disponibilizá-lo na Internet.

COMO O PUBLICAR FILME FUNCIONA Para publicar o seu filme flash, acesse o menu Arquivo/Configurações de Publicação. A janela configurações de publicação será aberta com a guia formatos, selecionada. Nesta guia, você poderá escolher o formato que deseja publicar o seu filme e ainda definir qual nome será dado aos arquivos.

Page 64: Apostila - Flash MX

www.webaula.com.br Pág:. 60 Copyright© Powered by webAula

FLASH MX

Para publicação na Internet, é necessário selecionar os tipos Flash e HTML, que por padrão já vem marcados.

Para publicar o seu filme, clique no botão Publicar.

CONHECENDO AS OPÇÕES DA GUIA FLASH A segunda guia da janela Configurações de Publicação é a guia Flash.

Page 65: Apostila - Flash MX

www.webaula.com.br Pág:. 61 Copyright© Powered by webAula

FLASH MX

As opções existentes nesta guia são: - Versão: O Flash permite publicar a animação em versões antigas, para que um maior número de usuário possa visualizá-lo sem baixar o novo plugin. O inconveniente de usar versões anteriores, é que alguns recursos do Flash MX não irão funcionar. - Ordem de Carregamento: De qual ponto o seu filme será carregado, de cima para baixo ou de baixo para cima. - Opções: São algumas opções de publicação disponíveis. 1. Gerar relatório de tamanho: Gera um relatório completo do filme 2. Proteger contra Importação: Impede que outras pessoas importem o .swf gerado pelo seu arquivo para dentro de outras animações. Esta opção permite que você digite uma senha. 3. Omitir Ações de Trace: Omite as ações disponibilizadas dentro do comando Trace (você verá sobre este comando no curso de Flash MX – ActionScript) 4. Depuração Permitida: Possibilita depurar o filme 5. Compactar filme: Compacta o filme que está sendo publicado. - Qualidade do JPG: Qualidade com que os JPG´s existentes no filme serão exportados, 100 é o máximo de qualidade e 0 o mínimo. - Fluxo de Áudio: Define a compressão e taxa de amostragem de todos os sons do filme, para ativá-lo clique em Definir. - Evento de Áudio: Abre a mesma janela que o botão anterior. - Substituir configurações de Som: Para substituir as configurações de som feitas dentro do filme flash pelas definidas no Fluxo e Evento de Áudio.

CONHECENDO AS OPÇÕES DA GUIA HTML

Page 66: Apostila - Flash MX

www.webaula.com.br Pág:. 62 Copyright© Powered by webAula

FLASH MX

A terceira guia da janela Configurações de Publicação é a guia HTML.

As opções existentes nesta guia são: - Modelo: Como o HTML será gerado - Dimensões: As dimensões que o filme terá, esta opção possui algumas sub-opções. 1. Corresponder ao filme: Mesmo tamanho da área de trabalho do filme. 2. Pixels: Você pode definir outro tamanho para o filme. 3. Porcentagem: Porcentagem que ele ocupará da área da página. - Reproduzir:Algumas opções de publicação disponíveis. 1. Pausado no Início: O filme Flash começa parado, apresenta o mesmo efeito que colocar uma ação de stop(); no primeiro quadro do filme. 2. Exibir Menu: Exibe o menu quando se clica com o botão direito do mouse. 3. Repetir: Permite que o filme fique em loop infinito. 4. Fonte do Dispositivo: O filme flash irá usar as fontes de dispositivo do computador do usuário. - Qualidade: Qualidade de exportação dos vetores Flash. Usualmente é marcada a opção Alta. - Modelo de Janela: Tipo de janela que exibirá o filme Flash. - Alinhamento do HTML: Como o filme Flash estará alinhado dentro do arquivo HTML. - Redimensionar: Redimensiona o filme Flash dentro dos limites específicos caso tenha alterado a altura e largura originais. - Alinhamento: Como o filme será posicionado e como ele será cortado se necessário.

Page 67: Apostila - Flash MX

www.webaula.com.br Pág:. 63 Copyright© Powered by webAula

FLASH MX

- Mostrar Mensagens de Aviso: Exibe mensagens de erro caso haja algum conflito entre as configurações de Marcas. Depois de ter definido as configurações de publicação FLASH e HTML, publique o seu filme novamente clicando no botão Publicar. Os arquivos serão salvos na mesma pasta onde o arquivo .fla está salvo.

Page 68: Apostila - Flash MX

www.webaula.com.br Pág:. 64 Copyright© Powered by webAula

FLASH MX

CONCLUSÃO

Esperamos que o conteúdo desta apostila tenha servido de suporte para seu curso.

A informática sofre mudanças bruscas muito rapidamente, procure no futuro uma biblioteca auxiliar e fique atento ao lançamento de novos aplicativos e versões.

A equipe webAula estará sempre ao seu dispor para solucionar dúvidas quando necessário.

Atenciosamente,

Diretoria de Treinamento

webAula