Cur So Flash 5

Curso de Flash 5
Curso de Flash 5
Autora: Silvana T. Ynemine
Cursos Virtuais
O Site de Cursos do Brasil http://www.cursosvirtuais.com.br
Proibida qualquer reproduo dessa apostila. Para entrar em contato com a autora, use o email: professora@cursosvirtuais.com.br
Cursos Virtuais
http://www.cursosvirtuais.com.br
Curso de Flash 5
Notas:
Sobre a apostila:
Apostila criada exclusivamente para a Revista WWW.COM.BR - Fev/2001 O contedo da apostila uma verso compacta do Curso de Flash promovido pelo site Cursos Virtuais.
Sobre a autora:
Silvana Tauhata Ynemine instrutora do site Cursos Virtuais e ministra diversos cursos, entre eles, de WAP, JavaScript, ASP, Dreamweaver, Java, Flash, DHTML.
autora dos livros:Flash 5, Aprenda Rpido Flash 5, Dreamweaver 3 e Dreamweaver 3 - software em Portugus. Todos os ttulos lanados pela editora Visual Books.
Todas as marcas citadas na apostila so exclusivamente de uso didtico. Todas as marcas so registradas e de propriedade de seus fabricantes.
Cursos Virtuais
Curso de Flash 5
ndice:
Tpicos Pgina
04 05 06 10 10 13 15 16 20 22 23 24 24 25 28 29 31 31 32 33 34 36 36 36 36 44 44 45 47 47 48 50 51 52 54 58 59 62 62 65 78
- Introduo ................................................................................................................. - Requisitos do Sistema .............................................................................................. - Instalao do software .............................................................................................. - Interface do programa ............................................................................................... - Barra de Menu ................................................................................................... - Barra de Ferramentas ....................................................................................... - Laucher Bar ....................................................................................................... - Painis ............................................................................................................... - Bibliotecas ......................................................................................................... - Timeline ............................................................................................................. - Movie Explorer .................................................................................................. - Iniciando o trabalho com o Flash 5 ............................................................................ - Novo arquivo e Movie Properties ...................................................................... - Frames, keyframes, layers, cenas e label ......................................................... - Salvando, testando e exportando o filme ........................................................... - Desenhando no Flash ................................................................................................ - Animaes .................................................................................................................. - Tweening motion ................................................................................................ - Tweening shape ................................................................................................. - Mask .................................................................................................................. - Motion guide ...................................................................................................... - Trabalhando com smbolos ....................................................................................... - Botes ................................................................................................................. - Grficos ............................................................................................................. - Movie-clips ........................................................................................................ - Imagens ....................................................................................................................... - Importando imagens .......................................................................................... - Transformando imagens em vetores (trace bitmap) .......................................... - Sons ........................................................................................................................... - Inserindo sons em botes ................................................................................. - Inserindo sons em movie-clips ........................................................................... - Inserindo sons na timeline principal .................................................................. - Trabalhando e criando gifs animados ....................................................................... - Importando um gif animado para o Flash .......................................................... - Publicando o filme ..................................................................................................... - Criando executveis .................................................................................................. - FSCommands .................................................................................................... - Dicas Finais ............................................................................................................... - Trabalhando com bibliotecas compartilhadas .................................................... - Projeto: Criando um site no Flash ............................................................................. - Sites ............................................................................................................................
Cursos Virtuais
Curso de Flash 5
Introduo
O software Flash produzido pela Macromedia. Atualmente encontra-se na verso 5.0 e, sem dvida, uma das melhores ferramentas para se trabalhar com animaes na Internet. Com ele possvel criar no apenas animaes, como tambm pequenos CD-Roms, aplicativos, jogos, entre outros. Com dedicao e criatividade, os desenvolvedores passaram a ter a possibilidade de criar, atravs do Flash, animaes de alto nvel para serem usadas em pginas na Internet. Dessa maneira, desde as suas primeiras verses, o programa vem tendo destaque na comunidade dos desenvolvedores de sites. A sua capacidade em elaborar animaes complexas em arquivos com baixo tamanho, sem dvida, tem sido um dos principais motivos para a difuso desse programa, alm da sua facilidade em ser manipulado e a sua interatividade. O nico seno que o usurio dever possuir um plug-in para poder visualizar as animaes na Internet. Felizmente os navegadores em suas verses mais atuais j vm com o plug-in Flash Player embutido em seus programas, o que demonstra o atual crescimento do uso dessa tecnologia na Web. O Flash pode ser adquirido no site da Macromedia ( http:// www.macromedia.com/ ). A fabricante tambm disponibiliza nesse site a verso demonstrao do programa com todas as opes habilitadas, porm com tempo limitado de uso (30 dias), a chamada verso Trial. Nesse curso iremos aprender como manipular o software e dominar seus comandos bsicos. Dessa maneira poderemos construir sites totalmente interativos e animados seguindo a atual tendncia da grande rede.
Cursos Virtuais
Curso de Flash 5
Requisitos do Sistema
Para a correta instalao do programa, seu computador dever ter no mnimo as seguintes configuraes:
Windows: . Processador Pentium 133 Mhz ou Equivalente (Recomendado: 200 Mhz) . Plataforma Windows 95 ou superior (inclusive Windows 2000), NT 4.0 ou Superior . Memria de 32 MB RAM (Recomendado: 64 MB) . 40 MB disponvel no HD . Monitor com resoluo de vdeo de 800 x 600 . Drive de CD-ROM (somente para instalao via cd-rom).
Macintosh: . Processador Power Macintosh (G3 ou superior) . Plataforma Mac OS 8.5 ou Superior . Memria 32 MB RAM . 40 MB disponvel no HD . Monitor com resoluo de vdeo de 800 x 600 . Drive de CD-ROM (somente para instalao via cd-rom).
Cursos Virtuais
Curso de Flash 5
Instalao do Software
Aps obter o programa Flash 5, clique 2X no arquivo executvel para iniciar a instalao.
Fig. 01 - Tela de Incio da instalao do programa Flash 5.
O programa de instalao ser executado extraindo os arquivos necessrios para a correta instalao.
Fig. 02 - Mensagem do programa antes da instalao.
Em seguida, o programa de instalao recomenda a voc fechar todos os programas extras que estiverem abertos para que no haja nenhum problema durante o processo. Em seguida clique no boto Next.
Cursos Virtuais
Curso de Flash 5
Fig. 03 - Contrato de licena do software.
A prxima etapa ler o Contrato de Licena do software. Caso esteja de acordo, clique em Yes. Esse procedimento continua a instalao. Caso voc no concorde, clique em No.
Fig. 04 - Escolhendo o diretrio de instalao
Em seguida, voc deve selecionar o diretrio de instalao. O programa est configurado para ser instalado no diretrio Flash 5 dentro de Arquivos de Programas ou Program Files (no caso do sistema operacional ser em ingls). Caso voc queira instalar em outro diretrio, basta clicar no boto Browse e indicar o novo diretrio em seu HD. Uma vez escolhido o diretrio, clique no boto Next.
Cursos Virtuais
Curso de Flash 5
Fig. 05 - Escolhendo o tipo de instalao
O prximo passo definir o tipo de instalao. Existem trs tipos disponveis: . Typical - instalao padro. o tipo de instalao recomendada a ser feita. . Compact - instalao compacta. Instala o mnimo de componentes requeridos pelo programa, por isso ocupa menor espao no HD. . Custom - instalao customizada. O prprio usurio escolhe os componentes que quer instalar. Esse tipo de instalao recomendado apenas para usurios avanados. Vamos escolher a instalao Typical. Em seguida, clique em Next. Na prxima tela voc deve indicar o nome do programa que aparecer no menu Programas do Windows. Nessa etapa, basta clicar no boto Next.
Fig. 06 - Instalao do Plug-in. Cursos Virtuais

Curso de Flash 5
Agora vem um passo importante: a instalao do Plug-in. Marque o navegador que voc quer instalar o plug-in Flash Player. Caso voc tenha os dois navegadores principais do mercado (Internet Explorer e Netscape) instalados em seu computador, marque as duas caixas de seleo como pode ser visto na Figura 06. Caso contrrio, marque apenas o navegador que voc possui. Aps selecionar, clique no boto Next.
Fig. 07 - Instalao sendo efetuada.
Nessa etapa, processo de instalao ser iniciado como mostrado na figura 07. Aps terminar, uma tela informando se voc quer visualizar o arquivo Read Me exibido. Se quiser ver, marque a caixa de seleo. Caso contrrio, deixe a caixa desmarcada e clique no boto Finish para concluir a instalao. Pronto. O programa Flash 5 est instalado no seu computador e pronto para o uso!
Cursos Virtuais
Curso de Flash 5
10
Interface do Programa
Quando abrimos o programa Flash 5 temos vrios menus, barras e painis disponveis ao longo da tela.
Menu principal Barra de Atalho de Menu Linha do Tempo - Timeline
Barra de visualizao Ferramentas
rea de trabalho Stage ou Palco
painis
Laucher Bar
Fig. 08 - Viso geral do programa Flash 5.
Vamos, a seguir, analisar cada um separadamente:
Menu Principal
Fig. 09 - Menu Principal
Esse menu contm todos os comandos do software. E est dividido em: - File: neste menu voc pode criar um novo arquivo (New), abrir um arquivo j existente (Open), abrir um arquivo como biblioteca (Open as Library), abrir um arquivo como biblioteca compartilhada (Open as Shared Library), fechar um arquivo (Close), salvar (Save), exportar o filme (Export Movie), publicar o
Cursos Virtuais
Curso de Flash 5
11
filme (Publish), imprimir (Print), entre outros. - Edit: neste menu voc pode utilizar recursos de edio como copiar (copy), colar (paste), cortar (cut), desfazer (undo) ou refazer (redo) uma ao, selecionar todo o contedo do stage (select all), entre outros. - View: contm recursos relacionados visualizao do programa Flash. Nesse menu voc pode inserir um zoom para visualizar melhor a rea de trabalho, inserir rgua (rulers), grade (gride), ocultar ou mostrar a timeline (timeline), entre outros. - Insert: esse menu contm os elementos a serem inseridos em seu filme, como layers, frames, keyframes, smbolos, entre outros. - Modify: esse menu contm comandos de modificao dos elementos inseridos no seu filme, como frames, scenes, layers, entre outros. - Text: contm recursos de definio de atributos de texto, como tipo de fonte, alinhamento, tamanho, estilos, etc. - Control: contm comandos de controle do filme. Nesse menu voc pode rebobinar (Rewind), executar o filme (play), testar seu filme (test movie), entre outros. - Window: esse menu permite a manipulao das janelas na sua rea de trabalho, ou seja, atravs dele, possvel ocultar ou mostrar determinados painis, janelas e paletas. - Help: esse menu apresenta os tpicos de ajuda, amostras (samples), lies extras (lessons) e informaes adicionais sobre o programa.
Barra de menu de atalho
Fig. 10 - Barra de menu de atalho.
Esta barra tambm chamada de Barra de Ferramentas Padro por conter alguns comandos fundamentais do software. Esto disponveis nessa barra, os seguintes comandos: - New : Esse cone cria um novo arquivo.
Cursos Virtuais
Curso de Flash 5
12
- Open - Save - Print
: abre um arquivo j existente. : salva o arquivo atual. : imprime o arquivo. : visualizao prvia da impresso.
- Print Preview - Cut - Copy - Paste - Undo - Redo - Snap - Smooth - Straighten - Rotate - Scale - Align - Stop - Rewind - Step Back - Play
: corta um contedo. : copia um contedo. : cola um contedo. : desfaz uma ao. : refaz uma ao. : ajusta grade (encaixe). : suaviza a linha. : torna a linha mais reta.
: rotaciona um elemento. : altera a dimenso de um elemento. : alinha os elementos na vertical e na horizontal. : para a execuo de um filme. : rebobina o filme, retornando ao primeiro frame. : volta um frame por vez.
: executa um filme. : avana um frame por vez.
- Step Forward - Go to End
: vai para o ltimo frame do filme.

Cursos Virtuais
Curso de Flash 5
13
Barra de Ferramentas
A barra de ferramentas apresenta os recursos para efetuar desenhos e insero de textos no stage. Tambm permite fazer correes com o uso de borracha e troca de cores. Na parte inferior da barra, conforme o tipo de ferramenta selecionado, podem-se abrir algumas opes para aquela ferramenta, aumentando os recursos do software.
Fig. 11 - Barra de ferramenta.
Vamos estudar cada ferramenta: : esta ferramenta usada para selecionar, - Arrow Tool (Atalho: tecla V) arrastar e transformar elementos. - SubSelect Tool (A) : a ferramenta usada para selecionar, arrastar e redimensionar elementos. A diferena entre SubSelect Tool e a Arrow Tool que a primeira seleciona o elemento subdividindo em partes, onde a alterao ocorre em pontos especficos (os ns), enquanto que a segunda, permite a alterao em qualquer ponto do elemento. - Line Tool (N) : utilizada para desenhar uma linha reta.
: chamada de lao. Essa ferramenta permite selecionar - Lasso Tool (L) uma rea. Para isso, clique na posio inicial da rea que quer marcar dentro do stage e mantenha o boto esquerdo do mouse pressionado, em seguida, trace toda a rea. - Pen Tool (P) : ferramenta caneta. Usada para desenhar linhas e curvas.
: utilizada para insero de textos. A fonte padro Times - Text Tool (T) Roman tamanho 12. Pode-se alterar essas propriedades atravs do painel Character ou do menu principal -> Text. - Oval Tool (O) : utilizado para desenhar um crculo ou oval.
- Retangle Tool (R) : usado para desenhar um retngulo ou quadrado. Um recurso interessante o arredondamento das bordas. Para isso, basta clicar no cone Round Rectangle Radius em Options. Abrir uma janela onde voc deve digitar o valor da curvatura.
Cursos Virtuais
Curso de Flash 5
14
- Pencil Tool (Y) no stage. - Brush Tool (B)
: ferramenta lpis. Utilizada para efetuar qualquer desenho
: ferramenta pincel. Usada para pintar reas. : efetua a pintura das bordas. : ferramenta lata de tinta. Pinta o interior de
- Ink Bottle Tool (S)
- Paint Brucket Tool (K) desenhos fechados. - Dropper Tool (I) aplicado em outro.
: capta a tonalidade de cor de um elemento para ser
: ferramenta borracha. Utilizada para apagar um contedo - Eraser Tool (E) desenhado no stage.
Ferramenta de Visualizao
Fig 12 - Ferramenta de Visualizao
Essa barra apresenta apenas dois recursos: Hand Tool (H), para movimentar a rea de trabalho e Zoom Tool (M ou Z) para dar um zoom no stage. Alm da ferramenta de visualizao, prximo barra de status, na parte inferior esquerda, h uma caixa de seleo como mostrada na figura 13.
Fig. 13 - Visualizao da rea de trabalho.
Voc pode redimensionar o stage para facilitar a visualizao e edio de alguns elementos. Quando quiser escolher um tamanho maior ou menor, basta escolher outro valor na caixa de seleo.
Cursos Virtuais
Curso de Flash 5
15
Ferramenta de Cores
Esta ferramenta permite inserir cores nos elementos no stage. - Stroke Color - Fill Color mento. - Default Colors Fill Color. : define uma cor para uma linha ou borda. : define a cor do preenchiFig. 14 - Ferramenta de Cores
: define a cor preta para Stroke Color e a cor branca para
- No Color : retira a cor de preenchimento ou da borda, ficando vazio. Basta selecionar o tem Stroke Color ou Fill Color e pressionar este cone para que no seja inserido o elemento (preenchimento ou borda). - Swap Colors : inverte as cores de Stroke Color com Fill Color.
Laucher Bar
O Laucher Bar ou Barra Iniciadora uma novidade presente na verso 5 do Flash. Ela se localiza na parte inferior do lado direito do programa, prximo barra de status e contm cones (atalhos) que acessam os seguintes painis:
Fig. 15 - Laucher Bar
- Show Info - Show Mixer
: Esse cone o painel Info. : Esse cone abre o painel Mixer : Esse cone abre o painel Character. : Esse cone abre o painel Instance. : Esse cone abre o painel Movie Explorer.
- Show Character - Show Instance
- Show Movie Explorer - Show Actions - Show Library
: Esse cone abre a janela (Frame ou Object) Actions. : Essse cone abre a biblioteca do filme.
Cursos Virtuais
Curso de Flash 5
16
Painis
Uma novidade presente no Flash 5 foi a insero de painis, permitindo uma maior organizao do software. Comandos a fins foram distribudos no mesmo painel, facilitando a aplicao do mesmo pelo desenvolvedor. Os painis disponveis no Flash so: Info:
Neste painel ficam as informaes sobre o elemento inserido no stage, como por exemplo, a altura (H), largura (W), posio nos eixos X e Y, entre outros.
Fig. 16 - Painel Info
Mixer Este painel permite a alterao de cores no elemento. As opes so as mesmas da barra de ferramenta de cores. Alm disso, voc pode escolher diretamente a tonalidade RBG digitando o valor correspondente cor e configurar o grau de transparncia (alpha - valores prximos a 100% o elemento fica opaco).
Fig. 17 - Painel Mixer
Swatches
Este painel apresenta as cores disponveis pelo programa. Na parte inferior do painel, h cores personalizadas com efeitos distintos, com degrad, entre outros.
Fig. 18 - Painel Swatches Cursos Virtuais

Curso de Flash 5
17
Character Neste painel so configuradas as caractersticas da fonte, como o tipo de fonte, o tamanho, efeito (negrito - itlico), cor, espaamento entre as letras, subscrito, entre outros. No campo URL voc pode digitar um endereo e aquele texto passa a ser um link! Exemplo: http://www.cursosvirtuais.com.br
Fig. 19 - Painel Character
Paragraph
Este painel permite definir o tipo de alinhamento do texto, alm de valores de recuo do texto, margens, entre outros.
Fig. 20 - Painel Paragraph
Text Options Este painel apresenta as opes de texto presentes no Flash 5. So 3 opes: . Static Text: usado para insero de texto no stage. . Dynamic Text: usado para textos dinmicos. . Input Text: usado para entradas de texto por parte do usurio, inclusive senhas.
Fig. 21 - Painel Text Options
Cursos Virtuais
Curso de Flash 5
18
Instance Neste painel definido o nome da instncia de um objeto. O painel ser bastante usado para definir nome de instncias de movie-clips, o que fundamental para o correto funcionamento do filme.
Fig. 22 - Painel Instance
Effect
Este painel permite definir o tipo de efeito a ser aplicado em smbolos. Pode-se aplicar graus de transparncias (alpha), alterar o brilho (brightness), cor, entre outros.
Fig. 23 - Painel Effect
Frame Este painel permite inserir dois parmetros no frame: o label (rtulo) que servir de identificao para aquele(s) frame(s) e o tweening que fundamental para se criar animaes.
Fig. 24 - Painel Frame
Sound
Este painel define as caractersticas do som inserido no Flash.
Fig. 25 - Painel Sound Cursos Virtuais

Curso de Flash 5
19
Transform
Este painel permite a aplicao de transformaes nos elementos, como rotaes e alteraes de perspectiva.
Fig. 26 - Painel Transform
Stroke Este painel permite definir o tipo de linha utilizada pelo elemento. Voc pode escolher usar linhas slidas, linhas tracejadas, pontilhadas, entre outros. Pode-se escolher a cor e a espessura da linha.
Fig. 27 - Painel Stroke
Fill
Este painel permite definir o tipo e a cor do preeenchimento. Voc pode criar preenchimentos slidos e em degrad.
Fig. 28 - Painel Fill
Align Este painel permite definir o alinhamento entre objetos diferentes no Stage. Pode-se alinhar na horizontal, na vertical, espao entre os elementos, entre outros.
Fig. 29 - Painel Align Cursos Virtuais
Curso de Flash 5
20
Bibliotecas
As bibliotecas so colees de elementos que esto disponveis para serem usados no filme. O Flash 5 apresenta basicamente 3 tipos de bibliotecas. So eles: . biblioteca do filme . bibliotecas comuns . bibliotecas compartilhadas
Biblioteca do Filme
A biblioteca do filme contm todos os elementos inseridos no filme. Ela pode ser aberta atravs do menu principal Window -> Library ou atravs dos atalhos CRTL+L. A biblioteca do filme permite a organizao dos elementos do seu filme, separando-os por pastas. Atravs dessa biblioteca voc pode criar novos elementos. Veja na barra inferior da biblioteca os comandos: - New Symbol : cria um novo smbolo (movie-clip, boto ou grfico). - New Folder : cria uma nova pasta para organizar o contedo da biblioteca. Dessa maneira, voc pode inserir todos os botes em uma pasta, todos os movieclips em outra, etc. Basta clicar no cone New Folder e nomear a pasta. Em seguida, arraste os elementos que quiser para dentro da pasta.
Fig. 30 - Biblioteca do filme.
- Properties
: exibe as propriedades de um elemento.
- Delete : exclui um tem na biblioteca. Para usar, s clicar 1X no elemento dentro da biblioteca e em seguida clicar no cone. Para usar um elemento que est nessa biblioteca, basta arrast-lo para o stage.
Cursos Virtuais
Curso de Flash 5
21
Bibliotecas Comuns
As bibliotecas comuns ou Common Libraries so bibliotecas do prprio programa Flash contendo alguns elementos que voc pode usar vrias vezes nos diversos filmes. Para acionar esse tipo de biblioteca v ao menu Window -> Common Libraries e clique na biblioteca a sua escolha. As principais bibliotecas so: Button Contm botes pr-definidos. Graphics Contm imagens e pequenas animaes prontas. Movie-clips Contm movie-clips prontos. Sounds Contm sons prontos para uso.
Fig. 31 - Bibliotecas Comuns: Botes, Grficos, Movie-clips e Sons, respectivamente.
Alm dessas quatro bibliotecas, o Flash 5 ainda contm a Biblioteca de Smart Clips que so elementos de formulrios j pr-configurados e a Biblioteca Learning Interactions, com explicaes de criao de algumas interaes. Para usar um elemento que est em qualquer uma das bibliotecas, basta arrast-lo para o stage.
Cursos Virtuais
Curso de Flash 5
22
Shared Libraries
As Shared Libraries ou bibliotecas compartilhadas esto presentes apenas a partir da verso 5 do Flash. Elas permitem que um mesmo elemento possa ser compartilhado por diversos filmes em um site. No curso, na seo Dicas Finais, h um exerccio de uso das bibliotecas compartilhadas.
Timeline
A timeline ou linha do tempo o local onde controlamos e coordenamos a animao.
Cena (Scene) Camada (Layer) Frames Nmero do frame
Fig. 32 - Timeline
Os elementos que compes a timeline so: - Scene: representa a cena atual na qual estamos trabalhando. - Layer: representa a camada que estamos trabalhando. Um filme pode ter vrias camadas, sendo que a animao de uma camada no interfere na outra (exceto em casos onde h interaes). - Frames: so chamados de quadros. Os quadros tero o contedo da animao. A sequncia de quadros forma a animao final. - Keyframes: so chamados de quadros-chaves. Eles so inseridos dentro de um frame somente quando houver modificao no contedo do frame em algum elemento ou insero de alguma ao.
Cursos Virtuais
Curso de Flash 5
23
Movie Explorer
O Movie Explorer foi mais um comando incorporado na verso 5 do Flash. Esse recurso permite que o desenvolvedor tenha uma visualizao da estrutura do seu filme, alm de poder gerenciar seu filme atravs dele. Para acion-lo v ao menu principal Window -> Movie Explorer ou aperte simultaneamente as teclas CRTL + ALT + M. Na parte inferior mostrada a estrutura do filme: as cenas, layers, frames. Observe a manuteno da estrutura do filme, ou seja, Symbol 1, por exemplo, est presente dentro do frame 1 que por sua vez est no layer 1 da Scene 1.
Fig. 33 - Movie Explorer
Voc pode especificar o que quer visualizar no Movie Explorer. Para isso basta clicar nos cones do tem Show, no alto da janela. So eles: - Show Text : Mosta os textos inseridos no stage. : Mostra os smbolos inseridos
- Show Buttons, Movie-clips and Graphics no stage. - Show Action Scripts
: mostra os action scripts inseridos no filme. : mostra os vdeos, sons e figuras
- Show Vdeos, Sounds and Bitmap inseridos no stage. - Show Frames and layers
: mostra os frames e layers do filme.
: configura os tens que o Movie Explorer - Customize which items to show deve mostrar. Ao clicar no cone abrir uma janela para voc marcar as opes. O Movie Explorer ainda apresenta um campo de pesquisa chamado Find. Basta digitar o contedo que quer encontrar para ele mostrar. Portanto, o Movie Explorer um recurso interessante de visualizao do filme como um todo, facilitando o seu desenvolvimento.
Cursos Virtuais
Curso de Flash 5
24
Iniciando o Trabalho com o Flash 5

Novo Arquivo Quando abrimos o programa Flash, ele abre com um novo arquivo em branco. Iremos trabalhar nesse arquivo. Caso, por algum motivo, no abra um novo arquivo, voc pode iniciar o trabalho de trs maneiras: . menu File -> New . clicando no cone New da barra de atalhos. . apertando simultaneamente as teclas CRTL+N. Utilizando qualquer um dos mtodos acima, um novo arquivo ser criado no Flash. Aps criar o novo arquivo, basta inserir um contedo no stage (rea de trabalho) e comear a trabalhar no seu filme.
Movie Properties A seguir, voc deve configurar as propriedades do seu filme. Isso feito atravs do Movie Properties, presente no menu Modify -> Movie. Se preferir, use o atalho do teclado CRTL+M.
Fig. 34 - Movie Properties.
- Frame Rate: a taxa mxima de execuo da quantidade de frames por segundo. O padro 12 fps, ou seja, no mximo, 12 frames por segundo. - Dimensions: determina o tamanho do stage (rea de trabalho). O tamanho padro 550 pixels de largura (W) e 400 pixels de altura (H). Se quiser outro tamanho de filme, basta digitar os novos valores nos respectivos campos.
Cursos Virtuais
Curso de Flash 5
25
- Match: determina o tamanho do stage alterando o valor digitado no tem dimensions. Se voc clicar em Printer, o stage ficar do tamanho mximo para ser impresso de acordo com o papel definido para a impresso. Se clicar em Contents, o tamanho do stage ficar de acordo com o contedo inserido na rea de trabalho. - Background Color: determina a cor de fundo do filme. - Ruler Units: determina a unidade da rgua. O valor padro em pixels. Para ativar a rgua no Flash 5, acione o menu View -> Rulers. A rgua ficar na lateral (vertical e horizontal) ao redor da rea de trabalho.
Frames, Keyframes, Layers e Cenas

Frames A quantidade de frames de uma animao, como j foi dito anteriormente, determinar o tamanho da animao. Em outras palavras, isso significa que se um filme tiver 10 frames e um segundo filme tiver 90 frames, o primeiro filme ser executado mais rapidamente do que o segundo. Voc provavelmente j deve ter brincado de fazer cinema com um bloco de papel. A idia era desenhar em cada folha do bloco uma sequncia de movimento. No final, as folhas eram passadas rapidamente dando a sensao do filme. Voltando ao Flash, o que estaremos fazendo seria exatamente isso: cada folha do bloco de papel seria equivalente a um Frame. O conjunto de Frames (o bloco), seria uma cena ou o prprio filme. Inserindo Frames Para inserir frames na timeline, clique 1X no frame 1 (ou se o layer tiver mais frames, clique a partir do frame que voc quer inserir) e pressione F5 quantas vezes forem necessrias. Outra maneira atravs do menu principal Insert -> Frame. A terceira opo clicar com o boto direito do mouse sobre o frame 1 e clicar, em seguida, na opo Insert Frame. Apagando Frames Para apagar um frame, clique com o boto direito do mouse sobre o frame que quer apagar e em seguida na opo Remove Frame. Alm dessa opo, voc pode ir ao menu principal Insert -> Remove Frame ou ainda apertar as teclas SHIFT + F5.
Cursos Virtuais
Curso de Flash 5
26
Keyframes Voc deve inserir um keyframe quando quiser alterar o contedo de um frame ou quando quiser inserir uma ao (Action) no frame. Inserindo Keyframes Para inserir um keyframe, clique 1X no frame onde for fazer a insero e em seguida v ao menu principal Insert -> Keyframe. Se preferir utilizar uma tecla de atalho, basta apertar F6. Uma outra maneira de fazer a insero clicar com o boto direito do mouse no frame e em seguida em Insert Keyframe. Limpando Keyframes Para apagar o contedo de um keyframe, v ao menu Insert -> Clear Keyframe. Se quiser, clique com o boto direito do mouse no keyframe que quer apagar e em seguida em Clear Keyframe. O atalho para essa funo SHIFT+F6.
Layers Os layers ou camadas so usados no desenvolvimento do seu filme para que uma animao no interfira em outra. Dessa maneira possvel haver animaes ocorrendo simultaneamente.
Fig. 35 - Layer
Inserindo layers Para inserir um layer, clique no cone Insert Layer inferior esquerda da timeline. Se preferir, va ao menu principal Insert -> Layer.
presente na parte
Apagando um layer Para apagar um layer, clique 1X sobre o layer que voc quer apagar e em seguida clique no cone de lixeira , presente na parte inferior da timeline.
Cursos Virtuais
Curso de Flash 5
27
Cenas As cenas tm a finalidade de organizar o seu filme. Voc pode colocar uma seo do seu site em uma cena diferente. Isso vai de acordo com o desenvolvedor, uma vez que voc pode criar todo o seu filme em uma nica cena perfeitamente. Inserindo Cenas Existem vrias maneiras de se inserir uma cena. A mais fcil ser usando o painel Scene.
Fig. 36 - Painel Scene
Para inserir, clique no cone Insert Scene painel.
na parte inferior direita do
Apagando Cenas Para apagar uma cena e consequentemente todo o seu contedo, clique 1X na cena que quer apagar dentro do painel Scene e em seguida clique no cone da lixeira. Abrir uma janela de confirmao se voc realmente deseja apagar a cena, j que o processo irreversvel.
Label O Label ou etiqueta uma espcie de identificador de um frame. Voc pode especificar visualmente na timeline onde uma determinada ao, animao ou efeito ocorre. Repare na Fig. 37 os 3 layers. O Layer1 contm uma animao que se inicia no frame 1 e termina no frame 10. O Layer2 contem uma outra animao que se inicia no Fig. 37 - Labels no layer 3. frame 11 e termina no frame 20. O Layer 3 contm apenas labels, determinando o incio da animacao1 e da animacao2.
Cursos Virtuais
Curso de Flash 5
28
Inserindo um label A insero de uma etiqueta deve ser feita no painel Frame. Voc deve clicar no frame que quer inserir o label e escrever o nome dele no campo Label do painel Frame. Caso o frame que voc quiser inserir um label esteja aps o frame 1, voc deve criar um keyframe antes.
Fig. 38 - Inserindo um label.
Salvando um filme Para salvar um filme, v ao menu principal File -> Save. Se preferir utilize o menu de atalho Save ou acione as teclas CRTL+S.
Testando o filme Para testar o filme acione o comando Control -> Test Movie ou utilize o atalho CRTL+ Enter. O seu filme ser testado dentro do prprio Flash.
Exportando o filme Uma observao importante a ser feita que os arquivos salvos no Flash contero a extenso .fla. Para que seu filme seja visualizado na Internet, ele dever ser exportado para o formato .swf. Isso feito atravs do comando File -> Export Movie ou acionando as seguintes teclas simultaneamente: CRTL+ALT+SHIFT+S. Uma vez exportado, voc pode visualizar em qualquer computador que tenha o plug-in Flash Player instalado.
Cursos Virtuais
Curso de Flash 5
29
Desenhando no Flash
O Flash um programa muito interessante para se fazer desenhos. As ferramentas utilizadas esto presentes na barra de ferramentas no lado esquerdo da tela e todas elas so semelhantes s ferramentas de desenhos de programas grficos do mercado. A combinao ferramenta + painel pode gerar efeitos interessantes, como a alterao do tipo de traado de linhas (painel Stroke), utilizao de degrads (painis Swatches e Fill) em cores internas de desenhos, entre outros. Vamos fazer dois exerccios para exemplificar: Exerccio 1: - Abra o programa Flash e crie um novo arquivo. Caso tenha alguma dificuldade, consulte o tem Iniciando o trabalho com o Flash 5. - Selecione a ferramenta Rectangle Tool e desenhe um quadrado no stage. - Selecione, em seguida, a ferramenta Arrow Tool . V ao menu Edit -> Select All. Se preferir aperte CRTL+A para selecionar tudo.
Fig. 39 - Quadrado desenhado e selecionado no stage.
- Abra o painel Stroke (menu Window -> Panels -> Stroke). Escolha um tipo de linha e a espessura dela.
Fig. 40 - Painel Stroke com a linha pontinhada escolhida e a espessura 5. No lado esquerdo, o quadrado onde o efeito foi aplicado.
- Salve o seu arquivo apertando CRTL+S. Abrir uma janela para que voc indique o nome do arquivo (exercicio1) e o diretrio onde ir querer salvar. Aps fazer isso, clique no boto Save.
Cursos Virtuais
Curso de Flash 5
30
Exerccio 2: - Abra o programa Flash e crie um novo arquivo. - Selecione a ferramenta Oval Tool . Nas ferramentas de cores, clique em Stroke Color e em seguida no cone No Color para que o contedo desenhado seja apenas de preenchimento e no tenha contorno. - No tem Fill color, escolha o tipo degrade .
Fig. 41 - Escolha da cor de preenchimento na ferramenta Fill Color.
- Em seguida, desenhe um crculo no stage. O resultado poder ser visto na figura abaixo:
Fig. 42 - Crculo com degrad.
- Agora vamos melhorar esse efeito, simulando uma bola em 3D. Para isso, selecione agora a ferramenta Paint Bucket Tool . Em seguida, clique em qualquer ponto na extremidade do desenho no stage. - Se deu tudo certo, voc ter uma bola com sombreado simulando um efeito 3D. - Salve como exercicio2.fla.
Fig. 43 - Bola em 3D.
Esses dois exerccios so exemplos simples de desenhos feitos no Flash. Com um pouco de criatividade e facilidade na manipulao das demais ferramentas possvel fazer desenhos bem interessantes dentro do software. S para ilustrar, voc j encontra na Web, sites de desenhos animados em Flash.
Cursos Virtuais
Curso de Flash 5
31
Animaes
A seguir, vamos estudar algumas tcnicas de animaes presentes no Flash. So elas: . Tweening Motion . Tweening Shape . Mask . Motion Guide
Tweening Motion
O Tweening tambm chamado de interpolao. Este tipo de animao linear e o desenvolvedor precisa apenas criar o frame inicial e o ltimo frame da animao com o contedo modificado, que o programa cria automaticamente o contedo dos frames intermedirios. O Tweening Motion usado para animar letras e smbolos (grficos) no Flash. Exerccio 3: - Crie um novo arquivo no Flash. - Clique no frame 30 e aperte F5 para criar 30 frames no layer 1. - Selecione a ferramenta Text Tool e digite no stage uma frase.
Fig. 44 - Texto digitado no stage.
- Se quiser alterar as caractersticas da fonte (tipo, cor, tamanho), selecione todo o texto com o ponteiro do mouse e em seguida v ao menu Text e escolha a opo que quiser. Se preferir, pode efetuar a alterao diretamente no painel Character. - Observe a ala do texto (Fig. 44) na parte superior direita. Essa ala significa que voc est criando um texto do tipo Static Text. Caso a ala esteja na parte inferior direita, altere o tipo de texto no painel Text Options para Static Text. - Em seguida, clique no frame 30 e crie um keyframe, apertando F6. Com a ferramenta Arrow Tool selecionada, arraste a frase digitada para outro local no stage.
Fig. 45 - Aspecto da timeline com um keyframe no frame 30. Repare que o frame 30 passa a ter uma bolinha preenchida, indicando que ali tem um keyframe.
- Clique no frame 1. Abra o painel Frame (Window -> Panels -> Frame). No campo Tweening selecione o tipo Motion. - Salve seu arquivo como exercicio 3. Teste seu filme apertando CRTL+ Enter.
Cursos Virtuais
Curso de Flash 5
32
Fig. 46 - Aspecto da timeline aps a aplicao do tweening motion.
Nota: voc pode inserir uma rotao com o tweening motion. No painel frame, basta selecionar o tem rotate como CW ou CWW e digitar um nmero maior que 1 no campo times.
Tweening Shape
O Tweening shape usado para criar movimentos em desenhos feitos no Flash. Exerccio 4: - Crie um novo arquivo. Clique no frame 20 e aperte F5 para criar os frames. - Selecione a ferramenta Rectangle Tool e desenhe um quadrado no stage. Se quiser, altere as caractersticas da borda no painel Stroke como fizemos no exerccio 1. - Clique no frame 20 e crie um keyframe (F6). Se tiver dificuldades, consulte o tem Iniciando o trabalho com o Flash 5. A partir desse momento vamos partir do princpio que voc ja sabe criar frames, keyframes, entre outros. - Em seguida, com a ferramenta Arrow Tool selecionada, arraste o quadrado para uma outra posio no stage. - Clique no frame 1 e abra o painel Frame. Selecione o tipo tweening shape, como pode ser visto na Fig. 47.
Fig. 47 - Painel frame com o tweening shape aplicado.
- Salve seu exerccio como exercicio4 e teste (CRT+ENTER).
Fig. 48 - Aspecto da timeline aps a aplicao do tweening shape. Cursos Virtuais

Curso de Flash 5
33
Mask
O mask ou mscara permite a substituio de um contedo sobreposto de uma camada por outro. Para esse efeito utilizaremos dois layers. Exerccio 5: - Crie um novo arquivo. - Deixe o Layer 1 com apenas um frame. Em seguida, crie um novo layer clicando no icone Insert Layer na parte inferior esquerda da timeline.
Fig. 49 - Layer 2 em cima do Layer 1.
- Clique no frame 1 do layer de cima (Layer 2), selecione a ferramenta Text Tool e digite uma frase no stage. - Clique no frame 1 do layer de baixo (Layer 1), selecione a ferramenta Rectangle Tool. Em seguida, escolha uma cor diferente da fonte na ferramenta Fill Color. Nesse caso, escolhemos a cor em degrad azul . - Desenhe um retngulo no stage, maior do que a frase escrita.
Fig. 50 - Frase escrita em amarelo (layer 2), contendo um retngulo (Layer 1) maior que a frase.
- Clique sobre o nome Layer 2 com o boto direito do mouse e em seguida na opo Mask. - Se deu tudo certo, o mask foi aplicado. Veja o resultado na Fig. 51b. - Salve seu arquivo como exercicio5.fla. Nota: repare que a frase passa a ficar na cor do fundo.
Fig. 51a - Aplicao do efeito Mask no Layer 2.
Fig. 51b - Aspecto final do stage aps a aplicao do Mask. Cursos Virtuais
Curso de Flash 5
34
Motion Guide
O motion guide ou guia de movimento permite a criao de trajetrias no lineares. Exerccio 6: - Crie um novo arquivo. - Deixe o layer 1 com 20 frames. - No stage selecione a ferramenta Text Tool e digite seu nome. - Clique em cima do nome Layer 1 com o boto direito do mouse e em seguida no tem Add Motion Guide.
Fig. 52 - Motion guide aplicado no Layer 1.
- Um novo layer automaticamente criado. Nesse layer, agora, chamado de Guide: Layer 1, deve ser especificado a trajetria do elemento presente no Layer 1. Faremos isso a seguir. - Clique no frame 1 do Guide: Layer 1. Selecione a ferramenta Pencil Tool e desenhe a trajetria, como mostrada na Figura 53.
Fig. 53 - Trajetria do texto.
- Em seguida, clique no frame 1 do Layer 1. Arraste o texto digitado para o comeo da trajetria. Observe que h uma posio de encaixe do texto com a linha. Essa posio mostrada atravs de uma ala no meio do texto.
rea cinza fora do stage stage rea branca Fig. 54 - Encaixe do texto na trajetria Cursos Virtuais
texto ala de encaixe trajetria
Curso de Flash 5
35
Fig. 55 - Aps o encaixe do elemento na trajetria, o ponto central mostrado com um sinal de +.
- Clique no frame 20 do Layer 1. Crie um keyframe (F6). Em seguida, selecione a ferramenta Arrow Tool e arraste a frase para o final da trajetria. Faa o encaixe corretamente. - Clique no frame 1 do Layer 1 e aplique um tweening motion (painel Frames)
Fig. 56 - Painel Frames com o Tweening Motion aplicado no frame 1 do Layer 1.
Fig. 57 - Aspecto final da timeline.
- Salve como exercicio6.fla. - Teste o arquivo. Nota: a trajetria ficar desenhada no stage. Porm, ao exportar o filme, ela no aparece.
Cursos Virtuais
Curso de Flash 5
36
Trabalhando com os Smbolos

Os smbolo que voc pode usar no Flash so: . Botes . Grficos e . Movie-clips O processo de criao dos trs tipos de smbolos sempre o mesmo. Voc deve selecionar com o ponteiro do mouse o contedo que quer transformar em smbolo e em seguida ir ao menu Insert -> Convert to Symbol. Se preferir acione a tecla F8. Abrir a tela Symbol Properties, onde deve-se marcar, no campo Behavior, o tipo de smbolo a ser criado.
Fig. 58 - Janela Symbol Properties.
Botes Os botes servem para determinar uma ao em seu filme. Essas aes podem ser disparadas atravs de eventos do mouse ou de teclado.
Grficos So imagens estticas.
Movie-clips So pequenos trechos de animaes que so independentes da timeline principal. A interao feita atravs do comando Tell Target.
A seguir, vamos fazer trs exerccios. Em cada um, criaremos um tipo de smbolo e usaremos alguns conceitos j vistos no curso.
Cursos Virtuais
Curso de Flash 5
37
Exerccio 7: - Crie um novo arquivo no Flash. - Clique no frame 30 e aperte F5 para criar 30 frames. - Selecione a ferramenta Rectangle Tool e desenhe um retngulo no stage. Se quiser altere a cor e o tipo de borda. - Em seguida, selecione a ferramenta Text Tool e digite a palavra Links. - Aperte CRTL+A para selecionar todo o contedo e aperte F8. - Na janela Symbol Properties, marque o Behavior Button. Aperte Ok.
Fig. 59 - Janela Symbol Properties. No lado esquerdo o contedo selecionado para ser transformado em boto.
- Pronto. O boto j foi criado. O segundo passo editar o boto. - Clique 2X sobre o boto. Abrir a timeline do Symbol 1, que o boto que estamos trabalhando. - Observe os campos Up, Over, down e Hit. Eles definem os estados do boto: . Up: estado do o boto ao ser carregado. . Over: estado quando o ponteiro do mouse passa sobre o boto. . Down: estado do boto quando clicado. . Hit: rea clicvel do boto. Portanto, ser necessrio definir os quatro campos. Para isso, crie um keyframe em cada um dos campos.
Fig. 60 - Timeline do boto com um keyframe em cada campo.
- Clique no campo Over, aperte ESC para desmarcar todo o contedo. Em seguida clique 1X no texto do boto e altere a cor da fonte. - Clique no campo Hit e desenhe um retngulo cobrindo toda a rea do boto. Fazemos isso para informar a rea que poder ser clicada no boto. - Clique na palavra Scene 1 no alto da timeline do boto para retornar timeline principal.
Cursos Virtuais
Curso de Flash 5
38
- Agora s falta inserir uma ao nele. - Para criar uma ao, clique 1X no boto para marc-lo. Em seguida, abra o painel Object Actions (CRTL+ALT+A). Na coluna esquerda do painel ficam os actions (aes) que voc pode aplicar. Os actions aplicados ficam na coluna da direita. - Clique 2X no action Get URL presente no tem Basic Actions. Alguns parmetros se abrem no final do painel. Basta preencher o campo URL com seu site (Fig. 62). Exemplo: http://www.cursosvirtuais.com.br
Fig. 61 - Painel Object Actions
Fig. 62 - Parmetro de configurao do comando Get URL.
- Salve o exerccio como exercicio7.fla e teste o boto quando estiver conectado Internet. Se deu tudo certo, ele acessar o site que voc especificou.
Nota: tenha sempre o hbito de marcar a rea de clique no campo Hit do boto. Caso voc crie um boto contendo apenas letras e o campo Hit sem contedo, o boto poder ser difcil de ser clicado!
Exerccio 8: - Crie um novo arquivo no Flash. - Deixe o Layer 1 com 20 frames no total. - Escreva seu nome no stage. Se preferir, abra o painel Character e troque o tipo de fonte, tamanho e cor. - Clique uma vez sobre o texto inserido e aperte F8 para criar o smbolo.
Cursos Virtuais
Curso de Flash 5
39
Fig. 63 - Janela Symbol Properties aberta ao criar um smbolo do tipo Grfico.
- Marque a opo Graphic no tem Behavior, como mostrada na fig. 63. Em seguida, aperte o boto Ok. Um smbolo grfico foi criado. Utilizaremos esse smbolo para animaes com efeitos, que faremos a seguir: - Clique no frame 20 e crie um keyframe. - Clique no frame 1 e abra o painel Effect (menu Window -> Panels -> Effect) e escolha a opo Alpha. Essa opo define a transparncia.
Fig. 64 - Selecionando o efeito alpha.
- Aps selecionar esse efeito, deve-se definir o grau de transparncia. Digite o valor 0%. Ou se preferir clique no cone de tringulo no lado direito do campo de digitao para especificar o novo valor (Fig. 65).
Fig. 65 - Aplicao do efeito alpha a 0%. Repare no lado esquerdo, o grfico com transparncia total (alpha 0%).
- Abra o painel Frame e aplique o tweening motion no frame 1.

Cursos Virtuais
Curso de Flash 5
40
Fig. 66 - Painel Frame com Tweening motion aplicado no frame 1.
Fig. 67 - Aspecto da timeline.
- Salve o exerccio como exercicio8.fla
Nota: Este um exemplo de efeito Fade. Voc pode criar vrias animaes simultneas em seu filme, basta inserir cada animao em um layer diferente. Dessa maneira, uma no interfere na outra. Se quiser testar, crie um novo layer e faa uma outra animao nela com outros elementos (botes, grficos, etc).
Exerccio 9: - Crie um novo arquivo com um frame. - Com a ferramenta Oval Tool desenhe um crculo pequeno no stage. - Em seguida, selecione o crculo e aperte F8. Iremos criar um movie-clip. Ento, marque a opo Movie-clip no tem Behavior da janela Symbol Properties. A seguir, aperte o boto ok.
Fig. 68 - Criando um movie-clip. Cursos Virtuais

Curso de Flash 5
41
- Uma vez criado o movie-clip, clique 2X sobre ele para edit-lo. Nesse momento voc entra na timeline do movie-clip (Symbol 1). - Clique no frame 10 e aperte F5, para criar 10 frames na timeline do smbolo. - Neste frame 10, crie um keyframe. V ao menu Modify -> Transform -> Scale and Rotate ou pressione simultaneamente CRTL+ ALT+S. Abrir uma tela para voc determinar o quanto quer redimensionar ou rotacionar a figura.
Fig. 69 - Redimensionando o desenho no stage.
- Digite o valor 150 no campo Scale. Em seguida clique em Ok. O desenho aumentou de tamanho. - Clique no frame 1 e aplique um Tweening shape no painel Frame.
Fig. 70 - Tweening shape aplicado no frame 1 da timeline do smbolo.
- Clique no frame 1. Abra o painel Frame Actions (menu Window -> Actions) Clique 2X no action Stop presente no tem Basic Actions. Estamos inserindo uma ao para parar quando o frame 1 for executado. Isso faz com que a animao no seja executada inicialmente e sim quando quisermos.
Fig. 71 - Parte da janela Frame Actions. No frame 1 foi inserido o action Stop. Cursos Virtuais
Curso de Flash 5
42
Fig. 72 - Aspecto da timeline do movie-clip.
- Clique na Scene 1 no alto da timeline para retornar cena 1 do filme. Voltamos timeline principal. - Selecione a ferramenta Text Tool e digite a frase Clique Aqui. Escolha a fonte, tamanho e cor que desejar. - A seguir, selecione apenas o contedo do texto e aperte F8, marque a opo Button no tem Behavior, para criarmos o boto. - Clique 2X no boto para editarmos. - Crie um keyframe nos 4 campos do boto: up, over, down e hit. - No campo Hit desenhe um retngulo cobrindo todo o texto. - No campo over, troque a cor da frase. - Retorne Scene 1. A seguir, criaremos uma interao via Tell Target para interagir o boto com o movie-clip. - Clique 1X no movie-clip e abra o painel Instance. No campo Name digite: mc. Estamos colocando o nome do movie-clip como sendo mc.
Fig. 73 - Nome da instncia do movie-clip no painel Instance. No lado esquerdo, no alto, o movie-clip, na parte inferior, o boto Clique aqui.
- Agora, iremos inserir uma ao para o boto relacionando com o movie-clip. - Clique 1X sobre o boto e abra o painel Object Actions. No tem Basic Actions h um tem chamado Tell target. Clique 2X nele. - O prximo passo ser configurar o parmetro do comando. Na parte inferior da janela Object Actions (Fig. 74) aparece o campo Target.
Cursos Virtuais
Curso de Flash 5
43
Fig. 74 - Parte da janela Object Actions, aplicando a ao Tell Target.
- Em target digite mc.
Fig. 75 - Action Tell Target inserido.
- Em seguida, aplique o action Go to presente em Basic Actions.
Fig. 76 - Aplicao do action Go To.
- No campo Type escolha o tipo Next Frame. Com isso, cada vez que o boto for acionado, ele ir para o prximo frame do movie clip mc. - Salve o exerccio como exercicio9.fla. Teste o filme apertando o boto vrias vezes.
Cursos Virtuais
Curso de Flash 5
44
Imagens
Alm de desenhos no Flash, o programa suporta imagens nos formatos .gif, .jpg, .png, entre outros. Para utilizar imagens no Flash necessrio fazer a importao.
Importando Imagens
Para importar imagens, v ao menu File -> Import. Aparecer uma tela onde voc deve selecionar a imagem que quer utilizar. Essa imagem inserida no stage. Em seguida voc pode trabalhar como quiser com ela.
Exerccio 10: - Crie um novo arquivo. - Deixe o Layer 1 com 20 frames. - Importe uma imagem para o seu filme. - Crie um keyframe no frame 20. Arraste a figura para uma outra posio no stage. - Clique no frame 1 e aplique um Tweening motion com as seguintes configuraes: Rotate: CW 2 times Em seguida aperte Enter.
Fig. 77 - Aplicao do Tweening Motion no frame 1.
- Salve o exerccio como exercicio10.fla. Teste a animao. Nota: se voc quiser aplicar efeitos presente no painel Effects, dever transformar a figura em um smbolo do tipo Graphics.
Cursos Virtuais
Curso de Flash 5
45
Transformando imagens em vetores (trace bitmap)

O Flash possui um recurso no software de transformar uma imagem bitmap em vetor. Isso interessante de se fazer caso queira alterar alguma propriedade da imagem dentro do Flash. Para transformar imagens em vetores usaremos o comando Trace Bitmap. Vale lembrar que ao fazer a converso, normalmente o filme fica mais pesado e o resultado final da converso pode no ser ideal. Quanto mais simples a figura, melhor o resultado gerado.
Exerccio 11: - Crie um novo arquivo no Flash. - Deixe o layer 1 com 15 frames. - Importe uma figura no Flash. Procure importar uma figura mais simples. - Clique 1X na figura para selecion-la e em seguida v ao menu Modify -> Trace Bitmap.
Fig. 78 - Transformando uma imagem jpg em vetor.
- Na janela Trace Bitmap coloque as seguintes configuraes: Color threshold: 10 (ou valor 1) Minimum Area: 1 Curve Fit: Pixels Em seguida, aperte ok para iniciar o processo. Quanto mais complexa a imagem usada, maior o tempo de converso. Aps a converso, o comportamento da figura de vetor, ou seja, voc pode manipular a figura utilizando a barra de ferramentas, mudar a cor, recortar pedaos, entre outros.
Cursos Virtuais
Curso de Flash 5
46
- Clique no frame 15 e crie um keyframe. - V ao menu Modify -> Transform -> Scale and Rotate. Na janela que se abrir, digite o valor 200 para aumentar a imagem. - Na figura aumentada, se quiser, altere alguma caracterstica da figura. No nosso caso, alteramos a cor do texto.
Fig. 79 - Figura redimensionada, com a cor do texto alterada no frame 15.
- Clique no frame 1 e aplique no painel Frame o Tweening shape.
Fig. 80 - Aplicao do Tweening shape no frame 1.
- Salve o exerccio como exercicio11.fla. Teste seu filme.
Nota: Caso voc no queira que a animao fique sendo executada continuamente, insira um action Stop no frame 15. Essa aplicao feita no painel Frame Actions.
Cursos Virtuais
Curso de Flash 5
47
Sons
Alm das animaes, voc pode inserir sons nos seus filmes. Esses sons podem estar associados a: . um boto . uma timeline (principal ou dentro de um movie-clip). Com isso, voc pode criar trilhas ou efeitos sonoros nos filmes.
Inserindo sons em um boto

Um recurso interessante para inserir em um boto um som. Voc pode inserir o som no momento em que o usurio passar o mouse sobre o boto. Isso definido no campo OVER quando estiver editando o boto. Vamos fazer o exerccio a seguir para entender processo. Exerccio 12: - Crie um novo arquivo com um frame apenas. - Crie um boto (F8) com a inscrio Boto. - Aps criar o boto, clique 2X nele para edit-lo. - Nos quatro campos de edio, crie um keyframe e faa as edies no boto como de costume. - Abra a biblioteca de som (menu Window -> Common Libraries -> Sounds). - Clique no campo Over. Escolha um som e arraste-o para cima do boto no stage.
Fig. 81 - Som inserido no campo over do boto. Repare no desenho de onda dentro do campo.
- Retorne Scene 1. Abra o painel Object actions e insira um action para esse boto, como exemplo, um Get URL, como fizemos no exerccio 7. Caso tenha dificuldades, recorde o exerccio 7. - Salve como exercicio12.fla. Teste seu boto passando o mouse sobre ele.
Cursos Virtuais
Curso de Flash 5
48
Inserindo sons em movie-clips

Voc pode inserir sons em movie-clips para fazer os famosos botes liga/desliga som. A interao boto/movie-clip feita atravs de Tell Target. Vamos fazer o exerccio a seguir para entendermos melhor. Exerccio 13: - Crie um novo arquivo no Flash. - Deixe o layer 1 com um frame apenas. - Crie dois botes com as incries: Ligar Som e Desligar som, respectivamente. No se esquea de editar os botes alterando os campos Over (se quiser) e o Hit. - O prximo passo criar o movie-clip. Para isso, desenhe um contedo qualquer no stage, por exemplo, um quadrado. Transforme este quadrado em movie clip (F8). - Clique 2X no movie-clip. Apague o quadrado desenhado no stage (o quadrado apenas teve a finalidade de criarmos o movie-clip). Crie mais um frame, de modo que o layer fique com 2 frames. Insira um keyframe no frame 2. - Clique no frame 2. Agora vamos inserir um som no movie-clip na timeline do smbolo (Symbol 3).
Fig. 82 - Timeline do movie-clip (Symbol 3).
- V ao menu File -> Import. Escolha um arquivo de som para importar. Voc pode escolher um arquivo nos seguintes formatos: wave, mp3, au, aiff. Caso no encontre nenhum arquivo de som, procure no drive c na pasta Windows. Dentro dela h um diretrio chamado media, contendo arquivos de sons do sistema. - Aps o arquivo ser importado, ele fica localizado na biblioteca do filme. Portanto, abra esta biblioteca (atalho: CRTL+L).
Fig. 83 - biblioteca do filme contendo os elementos do filme. Cursos Virtuais
Curso de Flash 5
49
- Arraste o som da biblioteca do filme para o stage. - Clique no frame 1, abra o painel Frame Actions e insira um action Stop.
Fig. 84 - Aspecto da timeline do movie-clip. O Frame 1 contm um action Stop e o Frame 2 contm o som.
- Retorne Scene 1. - Clique 1X sobre o movie-clip. No stage, ele estar invisvel, porm aparecer um crculo ou uma cruz mostrando onde ele est localizado. - Abra o painel Instance e coloque no campo Name de som.
Fig. 85 - Definindo o nome da instncia do movie-clip.
O prximo passo ser inserir uma ao nos dois botes. - Clique 1X no boto Ligar som. Abra o painel Object Actions. - Clique 2X no action Tell Target. No campo target digite: som.
Fig. 86 - aplicando o action tell Target.
- Em seguida, clique no action Go To. Configure os parmetros assim: Type: Frame Number Frame: 2 (deixe desmarcada a opo go to and play).
Cursos Virtuais
Curso de Flash 5
50
Fig. 87 - Actions inseridos no boto Ligar Som.
- O boto Ligar som est pronto. - Agora clique no boto Desligar Som e insira o action Tell Target, colocando no parmetro Target o nome som. - Em seguida, aplique o action Go To. Configure da seguinte maneira: Type: Frame Number Frame: 1 (deixe desmarcada a caixa go to and play). - A seguir, aplique o action Stop All sounds.
Fig. 88 - Actions inseridos no boto Desligar Som.
- Salve o exerccio como exercicio13.fla. Teste o arquivo.
Inserindo sons na timeline principal

O procedimento semelhante ao de insero de sons em movie-clips, ou seja, ser necessrio fazer a importao do som. Siga os passos:
Exerccio 14: - Crie um novo arquivo. - V ao menu File -> Import e faa a importao de um arquivo de som. - Abra a biblioteca do filme (CRTL+L) e arraste o som para o stage. - Salve o exercicio como exercicio14.fla e teste.
Cursos Virtuais
Curso de Flash 5
51
Trabalhando e criando gifs animados

Como o Flash trabalha com animaes, voc pode criar um gif animado a partir do software. Para isso, basta criar a animao, em seguida ir ao menu Export Movie e selecionar a opo Animated gif. Alm do gif animado, voc pode ainda salvar no formato de vdeo como .avi ou .mov (quick time), entre outros. Exerccio 15: - Crie um novo arquivo no Flash. - Deixe o Layer 1 com 10 frames. - Escreva uma frase no stage, por exemplo Flash 5. - Transforme este texto em smbolo do tipo Graphics (F8). - Clique no frame 10 e crie um keyframe. - Clique no frame 1. Abra o painel Effects e aplique o efeito alpha a 0%. Em seguida, abra o painel Frames e aplique o tweening motion. - Crie um novo layer, o Layer 2. - Deixe o Layer 2 com 20 frames. - Clique no frame 10 do Layer 2 e crie um keyframe. Em seguida, escreva no stage outra frase, como por exemplo Clique Aqui. - Transforme este texto em smbolo do tipo Graphics tambm. - Clique no frame 20 e crie um keyframe. - Clique no frame 10 do layer 2, aplique um efeito do tipo alpha 0% no grfico e aplique um tweening motion. - Salve o arquivo como exercicio15.fla - V ao menu File -> Export e escolha a opo Animated Gif. Salve como exercicio15.gif. Abrir a janela de configuraes:
Fig. 89 - Janela Export Gif. Cursos Virtuais

Curso de Flash 5
52
- Dimensions: especifica as dimenses do gif animado. Width determina a largura e height a altura. O ideal determinar esses valores em Movie Properties, uma vez que voc construiria o gif com um tamanho especfico. - Resoluo: determina a resoluo da imagem. Para uso na Internet o valor padro 72 dpi. - Colors: determina o nmero de cores da imagem. Voc pode especificar gifs em tom de branco e preto ou contendo de 4 cores at 256 cores. Se preferir, opte pelo tem Standart Colors, que usar as cores padres do arquivo. As quatro caixas de seleo seguintes especificam se voc quer criar um gif animado interlaado, transparente, entre outros. Marque as opes que achar necessrio. - Animations: especifica o nmero de vezes que a animao do gif ser repetido. Se deixar 0, ele ficar em loop. Se quiser determinar o nmero de vezes, basta digitar um valor, como 4.
- Aps escolher as opes, clique em Ok e o gif ser criado! - Abra o Windows Explorer, localize o arquivo exercicio15.gif e abra-o para visualiz-lo!
Fig. 90 - Aspecto da timeline do exercicio15.
Importando um gif animado para o Flash

O processo inverso tambm pode ser feito, ou seja, voc pode abrir um gif animado dentro do Flash. Cada quadro do gif corresponder a um frame de um layer. Para abrir, voc precisa importar o gif da mesma maneira que fizemos para importar uma imagem esttica.
Cursos Virtuais
Curso de Flash 5
53
Exerccio 16: - Crie um novo arquivo no Flash. - V ao menu File -> Import. Selecione a figura exercicio15.gif que acabamos de criar no exerccio anterior. Em seguida clique em Open ou Abrir.
Fig. 91 - Janela para importar a figura.
- Todo o gif animado ser importado diretamente para a timeline principal.
Fig. 92 - Aspecto da timeline aps a importao do gif.
- Salve como exercicio16.fla. Exporte para .swf para ver o resultado. Repare que a sequncia da animao mantida. Porm, perdem-se as camadas (layers), os efeitos e em alguns casos, pode-se perder qualidade. Claro que o resultado final sempre depender de gif para gif.
Essa importao interessante caso voc tenha um gif animado e queira aproveitar a sequncia no Flash.
Cursos Virtuais
Curso de Flash 5
54
Publicando o Filme
Como j foi mencionado, o filme em Flash exportado contm a extenso .swf. Essa extenso a que ser incorporada em um arquivo html para que possa ser visualizada pelos navegadores dos usurios que contenham o plugin Flash Player. O Flash contm um comando que publica o filme em uma pgina HTML, ou seja, ele mesmo cria a pgina automaticamente! Para acion-lo v ao menu principal File -> Publish. O HTML ser criado no diretrio onde o arquivo .fla e o .swf foram salvos e exportados. Alm do HTML voc pode especificar se quer gerar o .swf e outros arquivos automaticamente com o mesmo comando. Para definir, v no meu File -> Publish Settings. A janela chamada Publish Settings aberta contendo:
Fig. 93 - Janela Publish Settings.
- Formats: determina os formatos da publicao. A configurao padro j vem com os tens Flash (swf) e HTML marcados. Se voc quiser gerar um arquivo com outros formatos, basta marcar a caixa de seleo correspondente.
Cursos Virtuais
Curso de Flash 5
55
Fig. 94 - configurao do tem Flash.
- Flash: Neste tem ficam as configuraes do filme Flash (.swf) a ser gerado. - Load Order: especifica a ordem que as camadas sero carregadas na Internet. Claro que esta opo funcionar se o seu filme tiver mais do que 2 camadas. As opes so: Bottom up (de baixo para cima) e Top Down (De cima para baixo). - Generate Size Report: especifica se voc quer que um arquivo texto seja gerado ou no. Este arquivo contm informaes do tamanho dos elementos usados em seu filme. Com isso, pode-se tentar reduzir o tamanho de alguns elementos e, consequentemente, o tamanho final do filme. - Omit Trace Actions: especifica se quer omitir o Trace. Esse Trace uma ferramenta para auxiliar o programador na hora de depurar o cdigo em busca de falhas. - Protect From Import: protege o arquivo exportado de ser aberto no Flash. Voc pode especificar uma senha para que o arquivo exportado possa ser aberto apenas com a senha. - Debugging Permited: determina se voc quer ativar o depurador em busca de erros em scripts.
Cursos Virtuais
Curso de Flash 5
56
- Password: define a senha para proteger o arquivo swf. - Jpeg Quality: todas as imagens usadas no Flash sero gravadas no formato jpeg. Nessa opo, voc define a qualidade das imagens. - Audio Stream e Audio Event: define a taxa de compresso do formato de udio. - Override Sound Setting: permite que as configuraes feitas no tem Audio Stream e Audio Event substituam as definidas dentro do filme, em Properties (tem aberto com o boto direito do mouse sobre o arquivo de som, na biblioteca do filme). - Version: define a verso do filme exportado.
Fig. 95 - Configuraes do tem HTML
- HTML: neste tem ficam as definies em relao pgina HTML gerada. - Template: define um tipo de html que ser gerado. Os principais so: Flash Only (default) que cria um HTML compatvel com o Internet Explorer e Netscape e User Choice, onde um script de deteco do plug-in Flash Player inserido automaticamente verificando se o usurio tem ou no o plug-in.
Cursos Virtuais
Curso de Flash 5
57
- Dimensions: determina o tamanho do filme dentro do HTML. Se voc selecionar Match Movie, o tamanho ser aquele definido em Movie Properties. Se selecionar Pixels, possvel determinar um outro tamanho para o filme, digitando os novos valores em Width (largura) e Height (altura). E, por fim, se selecionar Percent, pode-se determinar um valor relativo em porcentagem. - Playback: define a execuo do filme, se quer executar em loop, se quer que aparea o menu (Display Menu), entre outros. - Quality: define a qualidade do filme. Quanto mais baixa a qualidade, a execuo do filme ocorrer sem problemas, porm a qualidade pode ficar comprometida. O padro do Flash High. - Window Mode: esse tem funciona apenas no Internet Explorer e pode definir a transparncia de um filme, entre outros. - Alignment: especifica o tipo de alinhamento do filme em relao pgina HTML. - Scale: essa opo s funciona se voc definir um tamanho diferente do tamanho do filme. Ela especifica como ser a disposio do filme no espao disponvel. O padro default, onde todo o filme ser visvel no espao especificado. - Flash Alignment: define o alinahmento do filme. - Show Warning Messages: especifica se quer exibir mensagens de erros e conflitos que possam surgir na hora da publicao.
Cursos Virtuais
Curso de Flash 5
58
Criando Executveis
Voc j aprendeu que uma animao exportada no Flash com o formato .swf precisa de um plug-in para ser executado. Se o computador do usurio no possuir o plug-in Flash Player, a animao no poder ser exibida. Um recurso interessante no software a possibilidade de transformar um arquivo .swf em um aplicativo. Isso significa que ele poder rodar em qualquer computador (Windows e Macintosh) sem a necessidade do plug-in. O uso de um executvel, portanto, amplo. Com os recursos do Flash 5, pode-se criar cd-roms, jogos, cartes virtuais, entre outros e fazer a distribuio via disquete ou cd-rom, sem a preocupao de quem estiver recebendo o material, se poder ou no executar por falta de algum programa auxiliar. O procedimento de criao de um executvel bem simples. V ao menu File -> Publish Settings. No guia Formats marque a opo Windows Projector e Macintosh Projector para criar executveis para Windows e Macintosh, respectivamente. Em seguida, pressione o boto Publish para gerar os executveis.
Fig. 96 - Criando Projetor.
Cursos Virtuais
Curso de Flash 5
59
FS Commands
Os FSCommands so comandos de Action Script que podem ser inseridos em executveis. Normalmente so aplicados no primeiro frame do filme e, em alguns casos no ltimo tambm, dependendo do tipo de comando. Par usar, clique no frame 1 do seu filme que ser transformado em executvel e abra o painel Frame Actions. FSCommands esto presentes no tem Basic Actions. Basta clicar na seleo Commands for standalone player e clicar na opo desejada.
Fig. 97 - FSCommands.
Os comandos so: - Fullscreen: permite que o executvel rode em tela cheia (full screen). Em Arguments deixe true para ativar. - Allowscale: permite que o filme seja redimensionado em 100%, inclusive as imagens. Deixe true em Arguments para ativar. - Showmenu: permite mostrar ou ocultar o menu que acionado atravs do boto direito do mouse em qualquer rea do filme. Para desativar, em Arguments deixe false.
Cursos Virtuais
Curso de Flash 5
60
- Trapallkeys: permite anular a tecla ESC para que o filme saia da tela cheia. Para ativar, deixe true no tem Arguments. - Exec: permite executar um aplicativo ou outros arquivos dentro do projetor. - Quit: esse comando fecha o projetor. No h a necessidade de inserir contedo em Arguments. Normalmente o quit est associado a um boto Sair.
Exerccio 17: Nesse exerccio vamos criar um executvel. Para isso vamos utilizar um exerccio que fizemos no curso. - Abra o Flash, v ao menu File -> Open. - Selecione o arquivo exercicio6.fla. Trata-se do exerccio sobre motion guide. - V ao menu file -> Save as. Salve como exercicio17.fla. Iremos salvar como pois ambos so exerccios distintos. - Em seguida, clique no layer Guide: Layer 1. Adicione mais um layer. Ser o Layer 3 que ficar acima do Guide: layer 1.
Fig. 98 - Layer 3 inserido.
- Clique no frame 1 do layer 3. Abra o painel Frame Actions e clique 2X no action FSCommand. Selecione o comando Fullscreen. Em Arguments deixe true.
Fig. 99 - Inserindo o FSCommand Fullscreen
- Em qualquer lugar do stage, escreva o texto Sair. Transforme o texto em um boto. Faa a edio dos campos hit, down, over.
Cursos Virtuais
Curso de Flash 5
61
- Retorne Scene 1 e clique 1x no boto. - Abra o painel Object Actions e aplique o action Quit de FSCommand.
Fig. 100 - FScommand Quit inserido no boto Sair.
- Salve o arquivo. - V ao menu File -> Publish Settings. - No tem Formats, marque a opo Windows Projector. Se voc estiver usando um Macintosh marque a opo de projetor para Mac. Em seguida, aperte o boto Publish.
Fig. 101 - Arquivos no Windows Explorer. O primeiro (Flash movie) o arquivo .fla. O segundo o executvel (.exe) e o terceiro (Flash Player) o arquivo no formato .swf.
- Pronto. O executvel foi criado. Abra o Windows Explorer. Localize o diretrio que voc salvou o exerccio. Observe os cones mostrados na Fig. 101. Clique no cone exercicio17.exe (Application) . - Teste seu aplicativo!
Cursos Virtuais
Curso de Flash 5
62
Dicas Finais
Trabalhando com Bibliotecas Compartilhadas
O Flash 5 apresenta as Bibliotecas compartilhadas, as chamadas Shared Library. Elas permitem compartilhar alguns tens entre os diversos filmes de um site. Isso significa que se voc usar um elemento em um filme e quiser usar o mesmo elemento em outro filme, basta compartilh-lo. A vantagem desse mtodo no aumentar o tamanho final do filme com novos elementos. A desvantagem que recomenda-se compartilhar elementos pequenos (de poucos kb), pois, se o elemento no for carregado poder comprometer todo o filme.
Para criar um tem a ser compartilhado, basta criar o elemento (um movie-clip, por exemplo) da mesma maneira que tm feito at agora no curso. Em seguida, voc deve abrir a biblioteca do filme (CRTL+L), clicar com o boto direito do mouse sobre o tem e selecionar a opo Linkage. Aps clicar nesse tem, abrir a janela Symbol Linkage Properties, como pode ser vista na Fig. 103.
Fig. 102 - Opo Linkage.
Fig. 103 - Janela symbol Linkage Properties. Cursos Virtuais

Curso de Flash 5
63
A janela Symbol Linkage Properties apresenta alguns tens: - Identifier: digite o nome para identificar o smbolo. - Linkage: marque a opo Export This symbol. Com isso, o smbolo ficar disponvel para ser compartilhado. Em seguida, deve-se pressionar o boto Ok. Para que ele fique disponvel, no se esquea de export-lo com o formato .swf. Para usar um tem de uma Shared Library, voc precisar abrir o arquivo .fla. Para isso, v ao menu File -> Open as Shared Library e escolha o arquivo .fla que contm a biblioteca compartilhada. Esse arquivo se abrir em uma nova biblioteca. Em seguida, arraste o tem que quer usar para o stage. O prximo passo ser informar ao Flash que aquele tem dever ser importado. Dessa maneira, abra a biblioteca do filme, e clique com o boto direito do mouse sobre o smbolo importado. Em seguida, escolha a opo Linkage.
Fig. 104 - Utilizando um tem de biblioteca compartilhada.
Marque a opo Import this symbol from URL. E digite o URL da biblioteca compartilhada. Voc pode usar o endereo relativo, como mostrado na figura acima, como pode usar o endereo completo, incluindo o protocolo http. Para finalizar, pressione o boto Ok. Pronto. No se esquea de transferir para o servidor os arquivos .swf do filme e da biblioteca compartilhada que devem estar no mesmo diretrio (a no ser que voc especifique outro caminho no URL).
Cursos Virtuais
Curso de Flash 5
64
Exerccio 18: - Crie um novo filme. - Crie um movie-clip com algum contedo, por exemplo, um logotipo. - Abra a biblioteca do filme (CRTL+L), clique com o boto direito do mouse sobre o smbolo e em seguida em Linkage. De um nome para o smbolo no campo Identifier e marque a opo Export this Symbol. Pressione Ok. - Salve o filme como exercicio18 e exporte para o formato .swf.
Exerccio 18-1: - Crie um novo filme. - V ao menu File -> Open as Shared Library. Selecione o arquivo exercicio18.fla. - Arraste o Symbol1 para o stage. Em seguida, abra a biblioteca do filme (CRTL+L). Clique com o boto direito do mouse sobre o Symbol 1 da biblioteca do filme e clique em Linkage. Na janela que se abrir marque o tem Import this symbol from URL e digite no campo de texto: exercicio18.swf, se eles no tiverem preenchidos. Pressione Ok. - Salve o exercicio como exercicio18-1.fla e exporte o filme. Teste em seguida.
Cursos Virtuais
Curso de Flash 5
65
Projeto: Criando um site no Flash

Hora de juntar alguns conhecimentos obtidos at aqui. A seguir, iremos fazer um projeto passo-a-passo construindo um site totalmente feito no Flash. Salve o arquivo como projeto.fla. Se quiser olhar o projeto pronto, acesse o arquivo projeto.swf no CD-Rom. Este projeto ser um site que ter: - Uma animao de entrada - Um menu contendo 4 sees, sendo cada uma das sees um movie-clip. Vamos construo!
Passo 1: Construo da animao: O tema do site ser o Flash 5. - Crie um novo arquivo no Flash. Salve como sendo projeto.fla. - Deixe o Layer 1 com 150 frames. - Clique no frame 1 e digite a letra F com tamanho de fonte 96 (altere no painel Character). Transforme essa letra F em smbolo do tipo Graphics (F8).
Fig. 105 - Letra F no stage transformada em smbolo grfico.
- Clique no frame 20 e crie um keyframe. - Clique no frame 1 e v ao menu Modify -> Transform -> Scale and Rotate. Na janela que se abrir, digite o valor 600% em scale.
Fig. 106 - Redimensionando o smbolo.
- Clique no frame 1 e, no painel Frame, aplique o Tweening Motion.

Cursos Virtuais
Curso de Flash 5
66
Faremos esse procedimento para cada letra da palavra Flash 5. Cada palavra ficar em um layer diferente. - Crie um novo layer, o Layer 2. - Clique no frame 20 e crie um keyframe. Comearemos a trabalhar nesse frame, aps a animao do layer 1 terminar. Digite no stage a letra L. Transforme essa letra em smbolo grfico. - Clique no frame 40 do layer 2 e crie um keyframe. - Clique no frame 20 novamente e altere a escala da imagem (Modify -> Transform -> Scale em rotate) para 600% como fez para a letra F. - Aplique no frame 20 do Layer 2 o tweening motion.
Fig. 107 - Aspecto da timeline aps a animao das letras F e L.
- Crie um novo Layer (Layer 3). Clique no frame 40 e crie um keyframe. - Digite no stage a letra A. Transforme-a em smbolo do tipo Graphics. - Clique no frame 60 do Layer 3 e crie um keyframe. - Clique no frame 40 do Layer 3 e altere a escala da letra para 600%. - Aplique o tweening motion no frame 40.
Fig. 108 - Aspecto da timeline aps a animao das letras F, L e A.
- Crie um novo layer, o Layer 4. Clique no frame 60 e crie um keyframe. - Digite no stage a letra S. Transforme-a em smbolo do tipo Graphics. - Clique no frame 80 do Layer 4 e crie um keyframe. - Clique no frame 60 do Layer 4 e altere a escala da letra para 600%. - Aplique o tweening motion no frame 60.
Fig. 109 - Aspecto da timeline aps a animao das letras F, L, A e S. Cursos Virtuais
Curso de Flash 5
67
- Crie um novo layer, o Layer 5. Clique no frame 80 e crie um keyframe. - Digite no stage a letra H. Transforme-a em smbolo do tipo Graphics. - Clique no frame 100 do Layer 5 e crie um keyframe. - Clique no frame 80 do Layer 5 e altere a escala da letra para 600%. - Aplique o tweening motion no frame 80.
Fig. 110 - Aspecto da timeline aps a animao das letras F, L, A, S e H.
- Agora, vamos acertar o alinhamento das letras no stage. Para isso, aperte simultaneamente as teclas CRTL+A, para selecionar tudo. - Abra o painel Align (Window -> Panels -> Align) e clique no cone Align Bottom Edge, para alinhar todos na mesma linha embaixo.
Fig. 111 - Smbolos grficos selecionados no stage. No lado direito, o painel Align aberto com o alinhamento Align Bottom Edge sendo aplicado.
- A seguir, aplique a distribuio Distribute Horizontal Center.
Fig. 112 - Aplicao de Distribute Horizontal Center no painel Align. Cursos Virtuais
Curso de Flash 5
68
Pronto, a frase j est alinhada. Agora vamos terminar a animao. - Clique no frame 120 e crie um keyframe neste frame em cada um dos layers.
Fig. 113 - Aspecto da timeline. Aplicao de um keyframe no frame 120 de cada um dos layers.
- Clique no frame 150 e crie novamente um keyframe em cada um dos layers. Nesse frame aplicaremos o seguinte efeito: - Abra o painel Effects (Window -> Panels -> Effects). - Clique no smbolo F do stage e no painel Effects, aplique um alpha 0%.
Fig. 114 - Aplicao do efeito Alpha 0% no smbolo F.
- Clique no smbolo L e aplique o efeito alpha 0%. - Clique no smbolo A e aplique o efeito alpha 0%. - Clique no smbolo S e aplique o efeito alpha 0%. - Clique no smbolo H e aplique o efeito alpha 0%.
Fig. 115 - Stage aps aplicar o efeito alpha 0% nos smbolos no frame 150.
- Aplique um tweening motion no frame 120 de cada um dos layers.

Cursos Virtuais
Curso de Flash 5
69
Fig. 116 - Efeito Tweening motion aplicado em todos os layers no frame 120.
A nossa animao est pronta. Esse s um exemplo simples de uma animao de entrada. Claro que com criatividade e imaginao possvel fazer trabalos mais elaborados e interessantes. Vamos para o prximo passo.
Passo 2: construo do esqueleto do site e do menu. O site em si, ser inserido aps a animao de entrada. Com a finalidade de organizao, construiremos a estrutura do site em uma outra cena, a Scene 2. - Crie uma nova Scene. Para isso, abra o painel Scene e clique no cone Add Scene (+) no lado inferior direito do painel. A Scene 2 ser criada.
Fig. 117 - Criao de uma nova cena no painel Scene.
- Aps a criao da cena, a timeline exibida passa a ser da Scene 2. Para alterar a timeline, basta clicar na cena que voc quer no painel Scene. - A Scene 2 tem o Layer 1 com um nico frame. Deixe com 15 frames. - Selecione a ferramenta Rectangle Tool. Na parte inferior da barra de ferramentas, abre-se um tem chamado Options. Clique ali e abrir uma janela para voc determinar o tamanho da curva, para que as bordas do retngulo sejam arredondadas. Digite o valor 30. Aperte Ok.
Fig. 118 - Rectangle Settings. Cursos Virtuais
Curso de Flash 5
70
Nota: para voltar ao retngulo com bordas retas, digite o valor 0 points. - Desenhe no stage um retngulo fino, como mostrado na figura ao lado. Se quiser, altere o tamanho da bordas no painel Stroke, para o tamanho 5.
Fig. 119 - Retngulo inserido no stage.
- A seguir, clique no frame 15 e crie um keyframe. Nesse frame 15, selecione a ferramenta Arrow Tool. Na parte inferior da barra de ferramentas, clique no e redimensione o retngulo de modo que cubra grande parte cone Scale do stage. - Clique no frame 1 e aplique um Tweening Shape no painel Frames. - Clique no frame 15 e abra o painel Frame Actions. Aplique o action Stop para que o filme fique parado no frame 15. Este ser o fundo do filme. O menu comearemos a trabalhar em outro layer, sempre no frame 15.
Fig. 120 - retngulo redimensionado.
Fig. 121 - Timeline. Repare no frame 15. H um keyframe e um action stop inserido.
- Crie um novo layer (Layer 2). Clique no frame 15 e crie um keyframe. - Selecione a ferramenta Text Tool e digite no Stage, dentro do retngulo: Flash 5. No painel Character, altere o tamanho da fonte para 14. Se quiser, altere a cor e a fonte como quiser. (Veja a Fig. 122).
Cursos Virtuais
Curso de Flash 5
71
Fig. 122 - Parte do stage. Insero do texto Flash 5 dentro do retngulo.
- Transforme o texto em um boto (F8). Faa a edio dos campos hit, down e over. - Retorne Scene 2. Clique no frame 15 do layer 2. - Digite no stage as outras sees. Cada uma ser um boto diferente. Digite: Empresa E transforme o contedo em boto. Edite os campos Hit, Over e Down. Retorne Scene 2. Clique no frame 15 do layer 2. - Digite: Contatos E transforme o texto em um boto. Edite os campos Hit, Over e Down. Retorne Scene 2. Clique no frame 15 do layer 2. - Digite: Site E transforme o texto em um boto. Edite os campos Hit, Over e Down. Retorne Scene 2. Veja o menu pronto. S falta inserir os actions que ser o passo 4.
Fig. 123 - Os tens do menu dentro do retngulo no stage. Cada tem um boto.
Passo 3: Construindo as sees do site. Cada boto levar a uma seo no site. Os botes Flash 5 e Empresa acionaro movie-clips. Os botes Contatos e Site acionaro links. Ento, vamos construo dos movie-clips.
Cursos Virtuais
Curso de Flash 5
72
- Crie um novo layer, o Layer 3. Crie um keyframe no frame 15. - Neste frame, selecione a ferramenta Text Tool e escreva o texto no stage Flash 5 Trata-se de um programa de criao de animaes para a Internet. - Tranque os layers 1 e 2. Para trancar, clique na coluna de cadeado na timeline, como visto na Fig. 124. Isso far com que voc possa trabalhar no layer 3 sem que o contedo dos outros layers interfiram na edio.
Fig. 124 - Layers 1 e 2 trancados.
Fig. 125 - Texto inserido no stage.
- Clique 1X no texto inserido e transforme-o em smbolo do tipo movie-clip. - Clique 2X no movie-clip recm-criado e abrir a timeline do movie-clip. - Crie um outro frame, de modo que o movie-clip fique com 2 frames. Crie um keyframe no frame 2. - Apague o contedo do frame 1. Em seguida, aplique no frame 1 o action Stop, no painel Frame Actions. - Clique no frame 2 e aplique o action Stop.
Fig. 126 - Timeline do movie-clip (Symbol 10) com 2 frames (o frame 1 vazio). Em cada frame um action Stop.
- Retorne Scene 2.
Cursos Virtuais
Curso de Flash 5
73
- Crie mais um layer, o Layer 4. - Crie um keyframe no frame 15. - Tranque o layer 3 para podermos trabalhar tranquilamente com o layer 4. - Digite no stage: O programa Flash 5 produzido pela Macromedia. Essa empresa tambm produz outros softwares como o Dreamweaver, Fireworks, Director, entre outros. - Transforme o texto em um movie-clip. - Clique 2X no movie-clip recm criado para edit-lo. - Deixe o movie-clip (Symbol 11) com 2 frames. Crie um keyframe no frame 2. - Apague o contedo do frame 1 e aplique um action stop nos frames 1 e 2.
Fig. 127 - timeline do movie-clip (Symbol 11) contendo 2 frames (o frame 1 vazio) com o action Stop.
- Retorne Scene 2.
Passo 4: Criao das aes dos botes. Nesse ltimo passo, iremos fazer os botes funcionarem. - Clique no frame 15 do layer 4. - Clique no movie-clip inserido no stage. Como o movie-clip est vazio no primeiro frame dele, a posio no stage fica marcada com p sinal . - Abra o painel Instance e digite o nome da instncia do movie-clip de mcempresa.
Fig. 128 - Nome da instncia do movie-clip (symbol 11) presente no layer 4.
Cursos Virtuais
Curso de Flash 5
74
- Agora, tranque o layer 4 e destranque o layer 3. Para trancar e destrancar s clicar no cone de cadeado de cada layer. - Clique no movie-clip no stage. Estamos selecionando o movie-clip do layer 3. Abra o painel instance e d o nome da instncia de mcflash5.
Fig. 129 - Nome da instncia do movie-clip (Symbol 10) presente no layer 3.
- Em seguida, destranque todos os layers. - Clique 1X no boto Flash5. Abra o painel Object Actions. Clique 2X no action Tell Target (em Basic Actions). No campo Target digite mcflash5. - A seguir aplique o action Go to. Nas configuraes que se abrirem, deixe como: Scene: <current scene> Type: Frame number Frame: 2
Fig. 130 - Action inserido no boto Flash 5.
- Agora, clique no boto Empresa. No painel Object action aplique o Action Tell Target. Em target digite: mcempresa. - Aplique o action Go to passando como parmetros: Scene: <current scene> Type: Frame number Frame: 2
Cursos Virtuais
Curso de Flash 5
75
Fig. 131 - Action inserido no boto Empresa.
- A seguir, salve e teste os botes Flash 5 e Empresa. Voc pode perceber que um contedo fica acima do outro. Para resolver isso, quando acionarmos um boto, ao mesmo tempo que um movie-clip for mostrado (frame 2), devemos inserir um outro tell target apontando para o outro movie clip sumir (ir para o frame 1). Acompanhe: - Clique no boto Flash 5. No painel Object Actions mostrado o action inserido. Clique na linha 4 que corresponde ao primeiro caracter }. Aplique um outro comando tell target e digite em target a instncia mcempresa. - Em seguida, aplique um Go to contendo: Scene: <current scene> Type: Frame number Frame: 1 (Desmarque a opo Go to and play).
Fig. 132 - Action completo do boto Flash 5. Repare no posicionamento dos comandos.
- Clique no boto Empresa. No painel Object Actions clique na linha 4. Aplique outro comando Tell target, digitando em Target: mcflash5. - A seguir, aplique um action go to com: Scene: <current scene> Type: Frame number Frame: 1 (Desmarque a opo Go to and play).
Cursos Virtuais
Curso de Flash 5
76
Fig. 133 - Action final inserido no boto Empresa.
- Agora, s faltam os dois ltimos botes. - Clique no boto Contatos. No painel Object Actions insira o action GetURL. No campo URL digite: mailto:seu_email, onde seu_email o endereo de email que voc quer. Por exemplo: mailto:professora@cursosvirtuais.com.br
Fig. 134 - Action inserido no boto Contatos.
- Clique no boto Site. No painel Object Actions aplique o action Get URL. No campo URL digite: http://www.macromedia.com.br Em Window coloque _blank.
Cursos Virtuais
Curso de Flash 5
77
Fig. 135 - Action inserido no boto Site.
- Pronto. Salve seu arquivo, exporte, publique e teste. O projeto termina aqui!
Este apenas um exemplo simples do que voc pode criar com o Flash. Esperamos que voc possa ter aprendido um pouco mais sobre o software e que esta apostila tenha lhe ajudado nesse processo. A partir desse momento, visite sites na Internet, faa pesquisas e busque tutoriais, arquivo .fla, livros para estudar e se aprofundar. E, sobretudo, use a sua criatividade!
Cursos Virtuais
Curso de Flash 5
78
Sites
A seguir alguns sites onde voc pode obter maiores informaes sobre o Flash 5 e recursos para usar nos seus projetos:
Empresa:
- Macromedia: site do fabricante: http://www.macromedia.com.br
Sites para desenvolvedores:

Contm tutoriais, artigos, arquivos .fla, entre outros recursos. - Flash Planet: http://www.flashplanet.com/ - Flash Zone: http://www.flashzone.com/ - Flash Kit: http://www.flashkit.com/ - Extreme Flash: http://www.extremeflash.com/
Sons:
Arquivos de sons para download. - WavCentral: http://www.wavcentral.com - Sound America: http://soundamerica.com/ - WavList: http://www.wavlist.com/index.html
Imagens:
Arquivos de imagens, figuras e desenhos para downloads. - Free Graphics: http://www.free-graphics.com/ - ClipArt Warehouse: http://www.clipart.co.uk/ - Animation Factory: http://www.animfactory.com/
Cursos Virtuais
Curso de Flash 5
79
Cursos Virtuais
Curso de Flash 5
80
Curso de Flash 5
Autora: Silvana T. Ynemine
Cursos Virtuais
O Site de Cursos do Brasil http://www.cursosvirtuais.com.br
Proibida qualquer reproduo dessa apostila. Para entrar em contato com a autora, use o email: professora@cursosvirtuais.com.br
Cursos Virtuais

Cur So Flash 5

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Cur So Flash 5

Enviado por

Direitos autorais:

Formatos disponíveis

Curso de Flash 5

Autora: Silvana T. Ynemine

Fig. 01 - Tela de Incio da instalao do programa Flash 5.

Fig. 02 - Mensagem do programa antes da instalao.

Fig. 03 - Contrato de licena do software.

Fig. 04 - Escolhendo o diretrio de instalao

Fig. 05 - Escolhendo o tipo de instalao

Fig. 06 - Instalao do Plug-in. Cursos Virtuais

Fig. 07 - Instalao sendo efetuada.

Barra de visualizao Ferramentas

rea de trabalho Stage ou Palco

Fig. 08 - Viso geral do programa Flash 5.

Vamos, a seguir, analisar cada um separadamente:

Barra de menu de atalho

Fig. 10 - Barra de menu de atalho.

- Open - Save - Print

: executa um filme. : avana um frame por vez.

- Step Forward - Go to End

: vai para o ltimo frame do filme.

- Pencil Tool (Y) no stage. - Brush Tool (B)

: ferramenta lpis. Utilizada para efetuar qualquer desenho

- Ink Bottle Tool (S)

: capta a tonalidade de cor de um elemento para ser

Fig 12 - Ferramenta de Visualizao

Fig. 13 - Visualizao da rea de trabalho.

: define a cor preta para Stroke Color e a cor branca para

Fig. 15 - Laucher Bar

- Show Info - Show Mixer

- Show Character - Show Instance

- Show Movie Explorer - Show Actions - Show Library

Fig. 16 - Painel Info

Fig. 18 - Painel Swatches Cursos Virtuais

Fig. 20 - Painel Paragraph

Fig. 22 - Painel Instance

Fig. 23 - Painel Effect

Fig. 24 - Painel Frame

Este painel define as caractersticas do som inserido no Flash.

Fig. 25 - Painel Sound Cursos Virtuais

Fig. 26 - Painel Transform

Fig. 27 - Painel Stroke

Fig. 28 - Painel Fill

: exibe as propriedades de um elemento.

Fig. 31 - Bibliotecas Comuns: Botes, Grficos, Movie-clips e Sons, respectivamente.

- Show Buttons, Movie-clips and Graphics no stage. - Show Action Scripts

: mostra os action scripts inseridos no filme. : mostra os vdeos, sons e figuras

: mostra os frames e layers do filme.

Iniciando o Trabalho com o Flash 5

Fig. 34 - Movie Properties.

Frames, Keyframes, Layers e Cenas

Fig. 36 - Painel Scene

Para inserir, clique no cone Insert Scene painel.

na parte inferior direita do

Fig. 38 - Inserindo um label.

Fig. 41 - Escolha da cor de preenchimento na ferramenta Fill Color.

Fig. 43 - Bola em 3D.

Fig. 46 - Aspecto da timeline aps a aplicao do tweening motion.

Fig. 47 - Painel frame com o tweening shape aplicado.

- Salve seu exerccio como exercicio4 e teste (CRT+ENTER).

Fig. 48 - Aspecto da timeline aps a aplicao do tweening shape. Cursos Virtuais

Fig. 49 - Layer 2 em cima do Layer 1.

Fig. 52 - Motion guide aplicado no Layer 1.

Fig. 53 - Trajetria do texto.

texto ala de encaixe trajetria

Fig. 56 - Painel Frames com o Tweening Motion aplicado no frame 1 do Layer 1.