Colégio Técnico de Paraisópolis – Cotep@r WebDesign

Desenvolvendo um site completo em Adobe Flash CS4

1) O primeiro Layout - Réguas, Grade e Guias.

Vamos explicar desde o layout inicial até o seu arremate com a publicação do projeto, e seguiremos passo-a-
passo o que podemos aproveitar e aprender da ferramenta. Contudo, nossa intenção, aqui, não será apenas
demonstrar os mecanismos do programa, mas potencializar ideias, motivando novos conceitos e estruturan-
do de forma profissional e apropriada o desenvolvimento de um projeto para a web.
Este nosso projeto será para uma Associação de Arquitetos. A primeira página do site deve apresentar in-
formações principais como notícias e novidades, além de conter um texto de apresentação, o logotipo e os
itens do menu.
O primeiro momento de um projeto não se refere à nenhuma linguagem de programação nem tão pouco à
alguma ferramenta de edição de imagem ou animação. O momento inicial é aquele onde serão definidas as
cores, as fontes, o conteúdo do seu trabalho e seu layout. Todas estas informações selecionadas através de
pesquisa de público-alvo e referências à imagem da empresa ou produto que deseja apresentar.
Você pode estar se perguntando... “Peraí..., mas o layout precisa de alguma ferramenta para ser desenvolvi-
do.” Não necessariamente! Você pode desenhar um projeto de layout com uma folha de papel e uma cane-
ta, e só depois transpor sua ideia para um trabalho no computador. Este primeiríssimo layout pode ser cria-
do, inclusive, numa reunião preliminar com seu cliente, em que, conforme ele lhe passa as ideias, você já as
organiza num papel.
Mas, e depois? Você precisa de algo realmente substancial para apresentar à ele e, também, para você pró-
prio e sua equipe se basearem durante o desenvolvimento do projeto. É aí que entra o layout desenvolvido
pela ferramenta na qual você irá trabalhar. Para isso ser feito de forma conveniente, você precisará de guias
visuais que lhe ajudem na transposição da sua ideia do papel para a tela, e que, posteriormente, organizarão
seus elementos visuais de maneira adequada e precisa.
Antes de qualquer coisa é necessário fixar as dimensões do seu projeto, ressaltando que é somente na publi-
cação que definiremos como ele se apresentará nas diversas configurações de tela existentes no mercado.

Abra um arquivo novo do Flash e na barra Properties, clique em Size, defina as dimensões para 760 X 410 px. Trabalharemos
com estes valores para este projeto. Defina Background Color para vermelho (#990000) e mantenha o Frame Rate em 12 fps
e Rulers Unit em Pixels. Frame Rate é a velocidade dos frames, e neste caso, definimos como 12 Frames Por Segundo, e Ru-
lers Unit é a unidade de medida das réguas, e neste caso, serão em pixels.
O Flash CS4 oferece auxílio no que diz respeito à organização espacial dos elementos no palco, de maneira que eles fiquem
dispostos com harmonia entre si; são as chamadas Guides (guias), Grids (grades) e Rulers (réguas). Vamos aprender a traba-
lhar com elas.
Primeiro, vamos visualizar as Rulers (réguas). Vá em View  Rulers. Você deve ter
percebido que surgiram réguas horizontal e vertical no seu arquivo.
A régua é mostrada em pixels - como você definiu nas propriedades do documento
- mas pode ser mostrada com outros parâmetros de medida se você clicar em Size
na Barra Properties e mudar a Rulers Unit. Para você observar as réguas com mais
precisão, basta ampliar a porcentagem da sua tela. View  Magnification  800%
Você perceberá que as réguas passam agora a ser contadas de 5 em 5 pixels, o que
facilita muito um trabalho que necessite de ajuste rigoroso.
Agora verificaremos outro artifício que o Flash CS4 oferece para a disposição ordenada dos elementos: A grade. Vá em View
 Grid  Show Grid. Agora, o seu arquivo apresenta uma tela quadriculada e através destas linhas, você já poderá trabalhar
o espaço de seu layout. Mas, o Flash ainda vai mais além e você poderá personalizar esta grade. Vá em View  Grid  Edit
Grid. Nesta telinha que se abriu, você poderá modificar:

WebDesign 1 Prof. Ricardo

 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
- Color: A cor da sua grade;
- Show grid: Apresentá-la, se marcada e escondê-la, se desmarcada.
- Snap to grid: Fazer com que as guias e os objetos no palco se anexem a
grade se você passá-los próximo a ela. Imagine o “snap” como sendo um
imã para os elementos. Ele atrai para a grade, o que passar perto dela.
-Tamanho horizontal e vertical
- Snap accuracy: Precisão do Snap:
. Must be close: O elemento precisa estar perto da grade para se
fixar à ela.
. Normal
. Can be distant: O elemento pode estar longe da grade para se fixar à ela.
. Always snap: Sempre se fixar na grade
Vamos definir as opções para o nosso projeto: Marque Show Grid e Snap to grid, fixe os valores horizontais e verticais em 50
px e em Snap accuracy, como Always snap.
Por fim, ainda temos um terceiro apoio sobre a organização espacial, as guias – Guides. Estas são a que nos dá maior flexibili-
dade no ajuste de nossa programação visual. Vá em View  Guides  Show Guides. Nada apareceu na sua tela?... Não se
preocupe... Não foi um bug! É que as guias ainda precisam ser criadas por você.
Para criar guias, as réguas precisam estar aparentes. Para uma guia horizontal, clique sobre a régua superior e arraste o mou-
se para o palco. Como marcamos “Always snap” em Grids, você perceberá que a guia se moverá sobre as linhas das grades
mesmo que você não queira. Para criar uma guia vertical, clique sobre a régua lateral e arraste o mouse para o palco. O
mesmo acontecerá em relação as grades.
Você também poderá personalizar as suas Guias, da mesma forma que
fez com as Grades. Vá em View  Guides  Edit Guides. Algumas
opções são semelhantes à edição das Grades. Você também pode ajus-
tar elementos com precisão, fixando-os na Guia, se em Snap accuracy,
selecionar Snap always. Selecione Show guide e Snap to guide. Mante-
nha Snap accuracy como Normal.
Você deve ter notado duas opções novas em Guides: Lock guide, que
prenderá a guia no palco, para que você ao deslocar outro objeto,
não a mova por engano; e Clear all, que retirará do palco todas as
guias criadas por você durante o processo de desenvolvimento (ge-
ralmente usada quando a organização já foi estruturada). Por en-
quanto não mexeremos em nenhuma das duas.
Crie duas Guias horizontais situadas em 50 e 150 px na régua lateral
e crie uma Guia vertical situada em 150 px na régua superior.
Agora, criaremos os elementos que concluirão a primeira etapa do
desenvolvimento do nosso layout. Utilizaremos a ferramenta Rectangle para aprofundar esta organização.
Clique nesta ferramenta e depois, em Fill color, selecione a cor referente ao retângulo ou quadrado
que irá desenhar. Em Stroke color escolha sem cor.
Fill color é a cor do preenchimento e Stroke

color a cor do contorno de seu objeto.

Toda vez que precisar desenhar uma nova figura
de cor diferente, escolha a cor, antes de dese-
nhá-la. Vá preenchendo todos os espaços de
forma que sua figura final fique assim:

Para finalizar, volte em View  Grid e desmarque a opção Show Grid e

faça o mesmo em Guide à desmarque a opção Show Guide.

WebDesign 2 Prof. Ricardo

 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
Outra dica importante é transformar a Layer - onde tudo isso foi desenhado - em uma camada guia. Clique com o botão direi-
to do mouse sobre Layer 1 e escolha Properties. Na telinha que irá abrir, em Type selecione Guide. Dê OK.
Esta camada guia não aparecerá no seu trabalho final de formato swf.
Ela serve somente para organizar as informações e os elementos do seu
projeto.
O arremate fica por conta dos textos, com efeito apenas ilustrativo,
para você basear suas ideias junto com a sua equipe e apresentar ao
cliente o primeiro conceito de organização do conteúdo de seu projeto.
Selecione a Ferramenta de Type e escreva sobre os espaços de forma
que o layout final seja esse:

2) O primeiro Layout
Em relação às cores, além da conexão com a imagem da empresa, existe também o fator psicológico, onde
cada cor tem um efeito específico sobre o ser humano. No caso da web, isso é ainda mais profundo; porque
temos que trabalhar com uma tabela padrão pré-definida que engloba 216 cores apenas - A Web Safe Color
ou Tabela de Cores Seguras. (Com o tempo você vai perceber que - se bem utilizadas - 216 cores são suficien-
tes para um design profissional adequado e interessante)
O Flash CS4 apresenta esta Tabela de Cores Seguras tanto para o fundo de tela do seu filme, como para os
desenhos que você desejar criar com as ferramentas de retângulo e círculo. Quando acionado, a tabela pa-
drão que será apresentada pelo Flash será sempre esta.
O mais importante é que ao desenvolver um projeto visual, sempre se tenha cuidado para adequar cores co-
erentes com o tipo de serviço oferecido, além de ligação visual com o logotipo (já existente) da empresa.
Após uma reunião praticamente interminável, a Associação de Arquitetos de Madagascar e sua equipe deci-
diram que as cores principais do projeto serão vermelho (#990000), cinza (#CCCCCC) e laranja (#FFCC00).
Vermelho e laranja serão as cores base para trazer ao visitante comunicação e ação e o cinza servirá de base
para a legibilidade dos textos e trará neutralidade em relação as outras cores. A área de notícias apesar de
textual receberá destaque na cor laranja. Ficou definido também que o site terá um ar de "decoração mo-
derna" fazendo analogia à arquitetura de interior de casas e escritórios.
Abra o arquivo que já foi criado na primeira etapa. Nele estão aparentes as guias e as réguas e o layout ini-
cial de nosso projeto. Poderemos agora, começar a delinear as imagens e as cores que deverão compor a es-
trutura visual da página inicial.
Se você escreveu sobre os espaços para mostrar para o seu cliente e conduzir a sua equipe, vá apagando as
palavras conforme for inserindo o conteúdo referente.
Primeiro, vamos criar uma nova camada que acolherá o logotipo da empresa. Clique no primeiro ícone no canto inferior
esquerdo da Timeline ou vá em Insert  Timeline  Layer. Uma camada de nome Layer 2 aparecerá logo acima de Layer 1.
Vamos mudar seu nome. Nomear corretamente as camadas nos ajuda a ter um trabalho organizado. Dê um duplo clique
sobre o nome Layer 2 e ao entrar na edição renomeie "Logo". Aperte Enter para concluir.
Precisamos agora importar o logotipo da empresa.
Vá em File  Import  Import to stage, procure a pasta "imagens",
selecione o arquivo e abra-o. Ele irá aparecer colado ao canto esquer-
do superior do seu trabalho. Baseando-se no layout definido na pri-
meira etapa deste tutorial, coloque a imagem importada sobre o espa-
ço destinado ao logotipo. Se você escreveu "logotipo" neste espaço, é
o momento de apagar esta palavra.
Não se preocupe com a falta de legibilidade. Lembre-se que esta camada guia (Layer 1) não
aparece no seu projeto final e o logotipo ficará sobre a cor de fundo vermelha (#990000).
Para verificar a legibilidade do logotipo sobre a cor certa, basta ocultar a Layer 1, clicando
sobre o ícone de olho nesta camada.
Agora vamos importar o background do Menu. Primeiro devemos criar uma nova camada.
Clique no primeiro ícone no canto inferior esquerdo da Timeline ou vá em Insert  Timeli-

WebDesign 3 Prof. Ricardo

 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
ne  Layer. Renomeie-a para "Back_menu". Tenha certeza de que a camada "Back_menu" está selecionada, vá em File -
Import - Import to stage, procure a pasta "imagens", selecione o arquivo e abra-o. Ele irá aparecer colado ao canto esquerdo
superior do seu trabalho. Pelo layout inicial, é exatamente aí que ele deve permanecer. Para visualizar como está ficando,
oculte a camada Layer 1.
Vamos definir o design da área "Novidades". Ficou determinado que a cor
cinza seria a cor de base para os textos. Vamos desenvolvê-la. Crie uma nova
camada e renomeie-a "Novidades". Bloqueie todas as outras camadas dei-
xando apenas esta, desbloqueada. Para isso clique com o botão direito do
mouse sobre o ícone de cadeado desta camada e escolha "Lock others"
Utilizaremos a ferramenta Rectangle desenhar este setor. Clique nesta fer-
ramenta e depois, em Fill color, selecione a cor cinza (#CCCCCC) e em Stroke
color escolha laranja (#FFCC00). Nosso retângulo terá bordas arrendondadas
e por isso clique na opção "Round Rectangle Radius" na parte inferior da
Barra de Ferramentas e fixe o valor de 11 points. Na área destinada a "Novi-
dades", desenhe um retângulo. Com ele selecionado, vá na Barra de Propriedades e determine os valores de Width: 580,
Heigth: 80, X:185 e Y:60.
Precisamos agora delinear o design do setor de "Notícias". Crie outra camada e reno-
meie-a "Notícias". Bloqueie todas as outras camadas deixando apenas esta, desbloquea-
da. Abra o Painel Color Mixer e selecione Linear.
Existem dois ícones de cores que formam o mixer. O padrão é preto e branco. Para modi-
ficar estas cores e desenvolver seu mixer personalizado, você deverá clicar em cada uma
das opções de cores e depois selecionar a cor desejada na opção de cima. Clique no íco-
ne de cor do gradiente e com ele selecionado modifique a cor na opção Fill Color logo
acima nesta mesma janela.
Para o nosso projeto, a cor à esquerda será laranja
(#FF9900) e a cor à direita será vermelho
(#990000). Na área destinada a "Notícias", desenhe um retângulo. Com ele seleciona-
do, vá na Barra de Propriedades e determine os valores de Width: 130, Heigth: 225,
X:10 e Y:165. Precisamos apenas modificar o preenchimento deste retângulo para que
o linear fique na horizontal. Selecione a Fill Transform na Barra de Ferramentas e clique
sobre seu ratângulo.
A imagem agora estará apresentando uma linha, dois
pequenos círculos e um quadradinho. O pequeno
círculo lateral rotaciona o preenchimento. O quadra-
dinho dimensiona o seu preenchimento e o círculo
central, muda-o de posição.
Atenção! Esta ferramenta transforma apenas o preenchimento... Não transforma
a imagem.
Clique no círculo lateral e rotacione o preenchimento de forma que ele fique na
horizontal. Amplie-o ligeiramente. Se você ocultar sua camada guia Layer 1 e as
guias (View  Guide  tire a seleção de Show Guide ou Ctrl + ç), seu layout
agora deverá está parecido com a figura a seguir.
Sempre que quiser ver as
Guias novamente basta ir
em View  Guide  Show
Guide ou Ctrl + ç.
Falta a página principal.
Esta área é a que recebe
maior destaque. Seu conteúdo além de dinâmico será também carre-
gado externamente.

WebDesign 4 Prof. Ricardo

 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
Cabe, neste momento, ressaltar que a organização principal de um projeto em flash deve ser estudada sobre segmentações.
Se o projeto inteiro é baseado num único arquivo nós teremos vários problemas. Primeiro, o arquivo final será enorme e seu
carregamento demorado para o visitante do site. Segundo, se você necessita mudar uma única e pequena informação, você
terá que editar dentro um arquivo monstruoso, cheio de camadas, movie clips e gráficos. Terceiro, o tempo gasto para fazer
o upload de seu arquivo para o servidor será demorado. Já se você dividir o seu projeto em vários arquivos pequenos, a edi-
ção será mais fácil, a transferência para o servidor mais rápida e visualização pelo visitante será ágil. Tudo o que um bom
projeto em Flash deve ser. Nesta segunda etapa, vamos trabalhar com o componente que acolherá este arquivo externo.
Nesta etapa ainda não trabalharemos Action Script, mas já deixaremos o componente preparado para receber um arquivo
externo.
Crie outra camada e renomeie-a "Pag. Principal". Bloqueie todas as outras camadas deixando apenas esta, desbloqueada.
Clique na ferramenta Rectangle e depois, em Fill color, selecione a cor Branca (#FFFFFF) e em Stroke color escolha sem cor.
Este retângulo não terá bordas arrendondadas. Clique na opção "Round Rectangle Radius" na parte inferior da Barra de Fer-
ramentas e defina o valor para 0 points. Na área "Página Principal" desenhe um retângulo. Com ele selecionado, vá na Barra
de Propriedades e determine os valores de Width: 582, Heigth: 222, X:164 e Y:166. O desenho
deste retângulo é apenas para definir melhor o espaço onde as informações do conteúdo exter-
no serão apresentadas.
Abra o Painel Componentes. Window  Components. No painel aberto selecione o componente
User Interface  UILoader e arraste para o palco. Com o componente selecionado, vá na Barra
de Propriedades e determine os valores de Width: 582, Heigth: 222, X:164 e Y:166. Agora clique
no botão Component Inspector ao lado do botão Swap. Vamos estudar as suas configurações.
 autoload - Se "true", seu arquivo externo será carregado automaticamente quando a
reprodução atingir o quadro em que o componente está. Se "false", para o arquivo ex-
terno ser carregado será necessário uma programação Action Script própria.
 contentPath - o nome do arquivo SWF que será carregado.
 scaleContent - Se "true" o arquivo externo manterá seu tamanho original. Se "false", o
arquivo externo se adequará ao tamanho da janela do componente. Isso funciona no
caso da janela do componente ser menor do que o arquivo externo. Ele então sofrerá diminuição de suas dimensões
para caber na janela do componente. Se for o contrário, a janela do componente for maior que o arquivo externo, o
arquivo externo não terá sua dimensão ampliada.

3) Componente Loader, Publicação e Movie Clip

Abra um novo arquivo do Flash e na barra Properties, clique em Size, defina as dimensões para 582 (width) X 222 (height) px.
Dê um duplo clique sobre o nome Layer 1 e ao entrar na edição renomeie-a "Background". Aperte Enter para concluir. Clique
na ferramenta Rectangle e depois, em Fill color, selecione a cor Cinza (#999999) e
em Stroke color escolha sem cor.
No palco desenhe um retângulo de qualquer tamanho. Com a ferramenta Selec-
tion, selecione-o, vá na Barra Properties e determine os valores de Width: 582,
Heigth: 222.
Vamos utilizar o painel Align, para que a figura fique precisamente alinhada no
palco. Abra este painel em Window  Align ou Ctrl+K. Observe se a figura está
selecionada, no Painel Align selecione a opção To Stage e em então clique sobre
Align Horizontal Center e Align Vertical Center.
Crie uma nova camada. Clique no primeiro ícone no canto inferior esquerdo da Timeline ou vá em Insert  Timeline  La-
yer. Dê um duplo clique sobre o nome Layer 2 e ao entrar na edição renomeie-a "Texto". Aperte Enter para concluir.
Selecione a Ferramenta de Type. Na Barra Properties, selecione Arial Black, size: 58, cor Branca (#FFFFFF) e escreva no Palco:
"Página Principal". Utilize o Painel Align para alinhar o texto centralizadamente no palco. Com o texto selecionado, no Painel
Align selecione a opção To Stage e em então clique sobre Align Horizontal Center e Align Vertical Center. Salve o arquivo na
mesma pasta onde salvou seu arquivo anterior.

WebDesign 5 Prof. Ricardo

 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
Agora para que o Componente Loader funcione corretamente, precisamos publicar este arquivo que criamos
como um SWF.
Qual a diferença do arquivo FLA para o SWF? Numa rápida explicação, podemos dizer que o arquivo FLA é o
editável, aquele em que você fará as modificações futuras necessárias e no qual poderá inserir novos ele-
mentos e apagar outros. O SWF é o arquivo que pode ser visualizado pelo Flash Player, e se inserido dentro
do HTML, também poderá ser visualizado por browsers como Internet Explorer e Firefox ou superior. O SWF
não é editável.
Da mesma forma, para trabalharmos com filmes dentro de filmes, trabalhamos com o SWF. E é exatamente
isso que faremos agora. Por enquanto só temos o arquivo editável "*.fla". Mas precisaremos publicá-lo co-
mo "*.swf" para trabalharmos com ele no componente Loader que inserimos em nosso arquivo "*.fla".
Para publicar seu arquivo no formato SWF, vá em File  Publish Settings e na janela que irá abrir desmarque a opção HTML e
deixe marcada somente a opção Flash.
Depois clique sobre a paleta Flash e vamos observar algumas de suas
configurações.
 Em Version, selecione Player 8. A maioria das pessoas ainda está
trabalhando com o Flash Player 8, e desta forma você consegue
alcançar um número ainda maior de pessoas, já que seu filme
vai tocar num Player 8 ou superior. Quanto mais baixa a versão
do Player, maior a chance de seu filme ser visualizado por mais
pessoas sem que elas tenham que fazer update da sua versão.
 Load Order: Ordem de carregamento das camadas. Se Botton
Up - de cima para baixo. Se Top Down - debaixo para cima.
 Action Script Version: Versão do Action Script, que pode ser a 2.0 ou a 1.0. Só mexa nesta configuração se tem a cer-
teza de trabalhou com Action Script 1.0 em toda a sua programação. Quanto às outras configurações veremos mais
adiante. Clique em Publish e depois clique em Ok.

Você acaba de criar o seu arquivo "*.swf". Feche o "*.fla" . Precisamos agora trabalhá-lo dentro do nosso arquivo principal.
Abra o "*.fla".
No Palco selecione o componente Loader que está na camada denominada "Pag.Principal". Na Barra Properties, clique no
botão Component Inspector. Já sabemos o que cada um deles significa, vamos configurá-los:
 autoload - True (O filme será carregado automaticamente, sem precisar de Action Script para isso.
 contentPath - *.swf (nome do seu arquivo)
 scaleContent - True (O filme manterá seu tamanho original).
Se você testar seu filme agora, verá que o filme "*.swf" está sendo
chamado para dentro do componente Loader. Para testar seu filme vá
em Control  Test Movie ou aperte Ctrl+Enter.
Posteriormente você poderá trabalhar seu filme "*.swf" adequadamen-
te, inserindo nele os componentes, imagens e textos que farão parte
deste setor do site.

4) Componente Loader, Publicação e Movie Clip

Continuando nosso trabalho para a Associação, hoje vamos inserir os botões que farão parte do Menu do nosso projeto.
Abra o arquivo "*.fla". Vamos criar uma nova camada para abrigar os botões. Clique no primeiro ícone no canto inferior es-
querdo da Timeline ou vá em Insert  Timeline  Layer. Dê um duplo clique sobre o nome Layer 9 e ao entrar na edição
renomeie-a "Botões". Aperte Enter para concluir. Certifique-se de que todas as outras camadas estão bloqueadas. Selecione
com o botão direito do mouse o cadeado da camada "Botões" e selecione Lock others.
Clique na ferramenta Rectangle e depois, em Fill color, selecione a cor Vermelho (#990000) e em Stroke color escolha sem
cor. Nosso botão terá bordas arrendondadas e por isso clique na opção "Round Rectangle Radius" na parte inferior da Barra
de Ferramentas e fixe o valor de 3 points.

WebDesign 6 Prof. Ricardo

 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
No Palco, desenhe um pequeno retângulo. Com ele selecionado, vá na Barra de Propriedades e determine os valores de
Width: 88, Heigth: 15, X: 168 e Y: 32. Vamos transformar este retângulo num símbolo de Botão. Como o retângulo seleciona-
do, vá em Modify  Convert to Symbol ou aperte F8. Na janela que irá abrir selecione Button em Behavior e nomeie-o
"Bot_principal". Em Registration, verifique se o quadradinho está centralizado. Dê Ok.
Agora, vamos trabalhar a estética destes botões. Para mudarmos a aparência do botão, devemos editá-lo. Para entrar sem
seu modo de edição, dê um duplo clique sobre ele. Você vai perceber que a Timeline (Linha de tempo) de um símbolo de
Botão é diferente da Timeline dos Movie Clips e da Cena Principal. Ele tem apenas 4 quadros.
 Up  Esta será a primeira aparência do seu botão. Assim que ele for carregado, ele se apresentará da forma que es-
tiver "desenhado" aqui.
 Over  Corresponde ao evento do toque do mouse. Quando o usuário passa o mouse sobre o botão, o que estiver
desenhado neste quadro será apresentado.
 Down  Corresponde ao click do mouse Quando o usuário clicar sobre o botão, o que estiver desenhado neste
quadro será apresentado.
 Hit  Está é a área de toque do botão. Será onde o botão ficará sensível ao toque. O que estiver desenhado neste
quadro será a área onde o botão será clicável. Se nos outros quadros (Up, Over ou Down) você tiver uma imagem,
este quadro Hit pode ficar em branco. A área clicável será do tamanho da imagem contida nos outros quadros.
No nosso projeto, já temos o primeiro quadro (Up) preenchido. Precisamos agora preencher os outros Quadros, para que o
botão tenha uma animação interativa. Ao passar o mouse sobre ele, o visitante reproduzirá algum tipo de movimento.
Vamos criar Quadros-chaves nos Quadros Over e Down. Clique com o botão direito do mouse sobre o Quadro Over, e seleci-
one Insert a Keyframe ou selecione-o e aperte F6. Faça o mesmo no Quadro Down.
Agora, vamos criar um Movie Clip no Quadro Over. Assim, sempre que o visitante passar o mouse sobre o botão, este Movie
Clip animado será apresentado. Selecione o Quadro Over, e então selecione o retângulo no Palco. Transforme-o num Movie
Clip. Vá em Modify  Convert to Symbol ou aperte F8. Na janela que irá abrir selecione MovieClip em Behavior e nomeie-o
"Anima_Bot". Em Registration, verifique se o quadradinho está centralizado. Dê Ok. Vamos criar a animação deste Movie
Clip. Clique duas vezes sobre ele para entrar em seu Modo de Edição. Renomeie a primeira camada. Dê um duplo clique so-
bre o nome Layer 1 e ao entrar na edição renomeie-a "Background". Aperte Enter para concluir. Nesta camada crie um Qua-
dro comum no Quadro 25. Clique com o botão direito do mouse sobre o Quadro 25, e selecione Insert a Frame ou selecione-
o e aperte F5. Esta camada servirá de background para a nossa animação. E ficará aparente durante todo tempo da reprodu-
ção.
Crie uma nova camada. Clique no primeiro ícone no canto inferior esquerdo da Timeline ou vá em Insert  Timeline  La-
yer. Dê um duplo clique sobre o nome Layer 2 e ao entrar na edição renomeie-a "Animação". Aperte Enter para concluir.
Clique na ferramenta Oval e depois, em Fill color, selecione a cor Branco (#FFFFFF) e em
Stroke color escolha sem cor. No primeiro Quadro desta camada, desenhe um círculo
ovalado sobre o retângulo.
Para que ambas as figuras fiquem sobrepostas com precisão, você pode selecioná-las e utilizar o Painel Align. Selecione-os,
com a Selection Tool. Você pode clicar e sem soltar, arrastar o mouse sobre as figuras ou selecioná-las uma a uma com a
tecla Shift apertada. Depois abra o Painel Align. Window  Align ou Ctrl+K. Desmarque a opção To Stage e em então clique
sobre Align Horizontal Center e Align Vertical Center.
Bloqueie a camada "Background". No primeiro Quadro da camada "Animação", crie uma Interpolação de Movimento. Clique
com o botão direito do mouse sobre o Quadro 1 e escolha Create a Classic
Tween. Para que possamos criar a animação precisamos inserir outro Qua-
dro-chave no Quadro 25 desta mesma camada. Clique com o botão direito
do mouse sobre o Quadro 25, e selecione Insert a Keyframe ou selecione-o e
aperte F6.
Você deve ter percebido que os quadros desta camada agora ficaram com uma cor diferente da camada debaixo. Eles estão
lilás com uma seta do início ao fim. Isso significa que nesta camada existe uma Interpolação de Movimento (Motion Tween).
Com uma Interpolação de Movimento, você pode criar diversas animações.
Como funciona? Você cria um Quadro-chave no início da animação e cria outro Quadro-chave no final da animação. Através
da Interpolação, o Flash criará todos os quadros intermediários para você.

WebDesign 7 Prof. Ricardo

 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
Ou seja, você pode ter uma bolinha branca no Quadro 1 e uma bolinha azul no Quadro 25. Os quadros intermediários que
transformam a bolinha branca numa bolinha azul serão criados pelo Flash. Este é o conceito de Interpolação.
Importante! Todas as modificações de seus símbolos para a Interpolação de Movimento deverão ser feitas na Barra Proper-
ties. Não apague um símbolo em um Quadro-chave para inserir outro no lugar, pois sua Interpolação de Movimento não
funcionará. Se você deseja que obter uma bolinha azul, mude sua cor na Barra Properties.
Vamos praticar isso.
No Quadro 25, selecione o círculo ovalado. Selecione a Ferramenta Free Transform.
Com a tecla Shift apertada, selecione uma das suas hastes e aumente ligeiramente o círculo
de forma que suas bordas atinjam o limite do retângulo.

Ainda com o círculo selecionado, na

Barra Properties, em Color configure
Alpha em 0%.
Finalizamos nosso primeiro Movie Clip animado, e ele está dentro de um botão.

Agora precisamos criar cópias destes botões na cena principal. Estamos dentro do Movie Clip que está dentro do botão. Va-
mos voltar para a Scene 1. Na parte superior da sua área de trabalho, clique no título Scene 1. Ele é o primeiro, ao lado de
esquerdo de Bot_Principal. Estes títulos mostram a ordem de onde você está,
neste caso, você está dentro do Movie Clip Anima_bot, que está dentro do
botão Bot_principal, que está dentro da Cena Principal Scene 1.
Você pode selecioná-lo e então utilizar Copy e Paste. Eu costumo utilizar a tecla Alt do teclado. Selecione o botão com o
mouse, aperte a tecla Alt e sem soltar o mouse, arraste-o para o lado. Crie mais 5 cópias deste botão, totalizando 6 botões no
final.
Localize-os de forma que o primeiro botão esteja no limite do
início do retângulo de Novidades e o último esteja no final do
mesmo retângulo. Não se importe com os botões do meio, nós
os organizaremos com precisão através do Painel Align.
Selecione-os todos, com a Selection Tool. Você pode clicar e sem soltar, arrastar o
mouse sobre todos eles ou selecioná-los um a um com a tecla Shift apertada. Abra
o Painel Align em Window  Align ou Ctrl+K. Verifique se a opção To Stage está
desmarcada e em então clique sobre Align Vertical Center e Distribute Horizontal
Center.
Agora seu layout deve estar semelhante à figura abaixo:

Se quiser, testá-lo - Ctrl+Enter, passe o mouse sobre os botões para verificar

a animação.
Não se esqueça de salvar seu projeto "*.fla". File  Save ou Ctrl + S.

5) Interatividade dos botões

Vamos continuar a construção do nosso site para a Associação de Arquitetos, nomeando os botões e incluindo sua interativi-
dade. Primeiro, vamos fazer a parte mais fácil. Nomear os botões.
Abra o arquivo “*.fla”. Crie uma nova camada. Clique no primeiro ícone no canto inferior esquerdo da Timeline ou vá em
Insert  Timeline  Layer. Dê um duplo clique sobre o nome Layer 11 e ao entrar na edição renomeie-a “Identificação”.
Aperte Enter para concluir. Veja se esta camada está acima de todas as outras. Certifique-se de que todas as outras camadas
estão bloqueadas. Selecione com o botão direito do mouse o cadeado da camada “Identificação” e selecione Lock others.

WebDesign 8 Prof. Ricardo

 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
Selecione a Ferramenta de Text Tool. Na Barra Properties, selecione Arial Black, size:
12, cor Amarelo (#FFFF00) e escreva no Palco, uma a uma as palavras: “Página Princi-
pal” – “Associados” – “Projetos” – “Estágios” – “Jornal” – “Contato”. Você pode escre-
vê-las sobre cada um dos botões, sem se preocupar com a centralização. Isso será
feito com o Painel Align.
Desbloqueie a camada “Botões”. Selecione o texto e botão que se encontra abaixo
dele.
Dica! Para selecionar ambos, você pode clicar com o mouse sobre o texto e depois
sobre o botão, mantendo pressionada a tecla shift do teclado. Abra o Painel Align,
Window  Align ou Ctrl+K. Neste Painel, deixe desmarcada a opção To Stage e em
então clique sobre Align Horizontal Center e Align Vertical Center. Faça isso em todos os textos e botões, selecionando-os e
posicionando-os centralizadamente, de forma que fique como a figura a seguir.
Criar os botões desta forma é menos trabalhoso, porque na realidade, você está criando um botão matriz que servirá de base
para todo o seu projeto e sobre a qual você terá repetidas instâncias. Caso precise mudar o texto, é rápido e prático. Você
não vai precisar editar um determinado botão.
Agora vamos inserir interatividade em um desses botões, que chamará uma página externa, previamente criada por você.
Vamos criar a página externa, a título de exemplo, como já fizemos na terceira parte.
Abra um novo arquivo do Flash e na barra Properties, clique em Size, defina as dimensões para 582 (width) X 222 (height) px.
Dê um duplo clique sobre o nome Layer 1 e ao entrar na edição renomeie-a “Background”. Aperte Enter para concluir.
Clique na ferramenta Rectangle e depois, em Fill color, selecione a cor Cinza (#999999) e em Stroke color escolha sem cor. No
palco desenhe um retângulo de qualquer tamanho. Com a ferramenta Selection, selecione-o, vá na Barra Properties e de-
termine os valores de Width: 582, Heigth: 222. Vamos utilizar o painel Align, para que a figura fique precisamente alinhada
no palco. Abra este painel em Window – Design Panels – Align ou Ctrl+K. Observe se a figura está selecionada , no Painel
Align selecione a opção To Stage e em então clique sobre Align Horizontal Center e Align Vertical Center.
Crie uma nova camada. Clique no primeiro ícone no canto inferior esquerdo da Timeline ou vá em Insert  Timeline  La-
yer. Dê um duplo clique sobre o nome Layer 2 e ao entrar na edição renomeie-a “Texto”. Aperte Enter para concluir. Selecio-
ne a Ferramenta de Type. Na Barra Properties, selecione Arial Black, size: 58, cor Branca (#FFFFFF) e escreva no Palco: “Asso-
ciados”. Utilize o Painel Align para alinhar o texto centralizadamente no palco. Com o texto selecionado , no Painel Align
selecione a opção To Stage e em então clique sobre Align Horizontal Center e Align Vertical Center.
Salve o arquivo na mesma pasta onde salvou seus dois arquivos anteriores. Mais uma vez, precisamos publicar este arquivo
que criamos como um SWF. Vá em File – Publish Settings e na janela que irá abrir desmarque a opção HTML e deixe marcada
somente a opção Flash. Em Version, selecione Player 8. Clique em Publish e depois clique em Ok.
Voltemos a trabalhar com nosso arquivo principal.
Primeiro vamos nomear a instância do componente Loader que estamos utilizando
neste projeto. Desbloqueie a camada “Pag.Principal” e no palco, selecione o compo-
nente Loader. Vá até a Barra Properties e em Instance Name digite pag_ext. Aperte
Enter para adicionar o nome corretamente.
Agora, deixe somente a camada “Botões” desbloqueada. Vamos inserir interatividade
em um de nossos botões. Selecione o botão referente ao link “Associados”. Vamos
abrir o Painel Actions.
Sempre preste atenção no título deste Painel, ele lhe dirá onde estará sendo inserida
a Ação. No caso deste nosso exemplo, ele deverá estar mostrando o Título Actions –
Button, porque estaremos inserindo a ação dentro do botão. Altere o ActionScript
para ActionScript 1.0 & 2.0.
Clique sobre o título para abrir este Painel. Vamos estudá-lo. Do lado esquerdo, você tem os comandos já pré-montados pelo
Flash para apoiar você no desenvolvimento de seu código. Do lado direito, você tem um espaço em branco, onde estes códi-
gos serão inseridos. Você pode inseri-los manualmente, digitando-os (se você for programador), ou utilizar o painel à direita
para inseri-los com o apoio do Flash.

WebDesign 9 Prof. Ricardo

 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
No espaço em branco você deverá inserir o código abaixo:
on (press) {
loadMovie("associados.swf", _root.pag_ext );
}
Você pode digitar textualmente ou utilizar os comandos já prontos do Flash para ajudá-lo. Va-
mos inserir estes comandos através do Painel esquerdo para que você se familiarize um pouco
mais com estes comandos. Nos comandos, clique Movie Clip Control e dentro dele dê um suplo
clique na opção on.
A ação on foi inserida e uma nova caixa com outras opções irá
abrir do lado direito do painel.
Dê um duplo clique na opção Press.
Posicione o cursor do lado direito da chave e pule uma linha.

Com o cursor na linha debaixo, volte aos comandos da direita e clique em Browser/Network e
dentro dele escolha loadMovie.
dentro do parêntese, digite "associados.swf",
com o cursor piscando ao lado da vírgula, clique no ícone
de Insert a Target Path.
No quadro que irá abrir, selecione a instância pag_ext e marque a opção absolute, e dê
Ok.
Seu primeiro botão está funcionando !
Traduzindo o comando.
on (press) {
Ao clicar neste botão…
loadMovie("associados.swf", _root.pag_ext );
}
...carregue o filme associados.swf dentro do loader pag_ext.
Crie páginas externas para todos os seus botões e insira este comando em todos eles, lembrando-se de modificar apenas os
nomes dos SWFs.
Se quiser, testá-lo – Ctrl+Enter, passe o mouse sobre os botões para verificar a animação.
Não esqueça de salvar seu projeto “*.fla”. File – Save ou Ctrl + S.

6) Desenvolvendo um site completo em Flash

Vamos continuar com nosso projeto da Associação de Arquitetos. Nesta etapa, vamos aprender a trabalhar
com texto externo. É o momento de trabalharmos sobre a área "Novidades". Já temos o layout diagramado
na posição certa, precisamos apenas trabalhar com as informações que serão inseridas ali. Porque trabalhar
com o componente Text Area e não simplesmente escrever manualmente o conteúdo dentro do Flash? ...
Pense o seguinte: esta é uma área que estará em constante atualização. Podem ser novidades diárias, se-
manais ou mensais; mas elas sempre serão modificadas. Imagine você precisar editar o seu .fla e publicar o
SWF toda vez que precisar fazer uma pequena modificação nas informações de novidades ! Não seria mais
fácil, você editar um simples TXT e enviá-lo pro servidor rapidamente? O Text Area funciona desta forma.
Vamos à prática: Antes de abrir o Flash, vamos criar o arquivo TXT que será carregado pelo Text Area, externamente. Abra
um arquivo novo no Notepad (Bloco de Notas), e digite texto abaixo:

WebDesign 10 Prof. Ricardo

 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
&novi=Novidades
A Associação ganha um novo Clube. Tem piscina, quadra de tênis e sauna à vapor.
Entenda como irá funcionar o tributo bimensal.
<a href="http://www.aam.com.br"><u>Clique aqui</u></a> para saber as novidades

Salve este texto como "novidades.txt" na mesma pasta onde se encontra, atualmente, o arquivo "*.fla".
Você pode trabalhar com várias tags HTML dentro deste arquivo de texto, mas o conteúdo não precisa estar dentro das tags
<html></html> ou <body><body>, basta você iniciar com &nome_da_variável. No caso eu iniciei com &novi, mas poderia ser
&flavia ou &banana. Você escolhe nome e este mesmo nome (com a mesma grafia) deverá ser inserido posteriormente no
arquivo .fla.
As tags que você poderá utilizar são: <b>, <i>, <u>, <br>, <p>, <a href>, <img src>, entre outros e se você está trabalhando
com a versão do Flash CS4 poderá trabalhar com Folha de Estilo também (CSS).
Agora, vamos abrir o arquivo "*.fla". Nós já inserimos a diagramação da área Novidades. Vamos, então, criar numa nova
camada que abrigará o componente Text Area que ficará sobre esta diagramação.
Procure a camada que nomeamos "Novidades". Selecione-a. Depois, crie uma nova
camada. Clique no primeiro ícone no canto inferior esquerdo da Timeline ou vá em
Insert - Timeline - Layer. Dê um duplo clique sobre o nome Layer 11 e ao entrar na
edição renomeie-a "Identificação". Aperte Enter para concluir.
Abra o Painel Components. Window  Components ou Ctrl+F7.
Com o Painel Components aberto, selecione o Component Text Area e sem soltar o
mouse, arraste-o até o palco.
No Palco o Componente Text Area se apresenta branco e, se selecionado, terá um
contorno azul. Você pode modificá-lo para que ele fique do tamanho exato da dia-
gramação criada para a área Novidades.
Selecione a Free Transform Tool na Barra de Ferramentas, e então clique sobre o
componente Text Area que você colocou no Palco. Dimensione-o para que ele ocupe,
equilibradamente, o espaço da diagramação.

Agora vamos conhecer um pouco os parâmetros deste Componente. Contudo, não se

preocupe com eles; tudo será configurado através de Action Script. Estas oções são
geralmente usadas para textos internos e digitados no campo Text.
Se o Text Area não estiver selecionado. Selecione-o no palco. A Barra Properties agora
estará apresentando os Parâmetros (Parameters) referentes a este Componente,
como nos mostra a figura a seguir.

 Editable  Se o texto será editável (true) ou não (false) quando incorporado ao SWF. O padrão do Flash é True.
 HTML  Se o compontente Text Area interpretará os comandos de HTML inseridos no arquivo externo. Se sim
(True). Se não (False).
 Text  Local onde você poderá digitar um texto que será carregado internamente pelo Flash.
WebDesign 11 Prof. Ricardo
 Colégio Técnico de Paraisópolis – Cotep@r WebDesign
 WordWrap  Se o texto será divido em linhas para caber dentro do espaço definido pelo Compontente. Se sim
(True) . Se não (False).
Precisamos agora nomear esta instância do componente
Text Area. Ainda na Barra Properties, onde está escrito
<instance name>, digite "texto_novi" e aperte Enter.
Vamos criar uma nova camada para as Ações que serão
aplicadas neste componente Text Area. Procure a camada
que nomeamos "Novidades_texto". Selecione-a. Depois,
crie uma nova camada. Clique no primeiro ícone no canto
inferior esquerdo da Timeline ou vá em Insert  Timeline
 Layer. Dê um duplo clique sobre o nome Layer 13 e ao entrar na edição renomeie-a "Ações_TextArea". Aperte Enter para
concluir.
Selecione o primeiro Quadro desta camada, abra a o Painel Actions. Window  Actions ou F9 e insira os comandos a seguir:
var nova_lv:LoadVars = new LoadVars();
nova_lv.load("novidades.txt");
nova_lv.onLoad = function(success:Boolean) {
if (success) {
texto_novi.text = this.novi;
} else {
trace("unable to load text file.");
}
};
texto.html = true;
texto.editable = false;
Este comando cria e nomeia uma nova variável (nova_lv) e ordena ao Flash que carregue o arquivo "novidades.txt" (no-
va_lv.load ("novidades.txt") ) dentro do componente Text Area que denominamos "texto_novi" (texto_novi.text = this.novi;).
Este último comando também menciona o conteúdo do arquivo externo. Ele ordena que se carregue o arquivo "novida-
des.txt" e que se pegue o conteúdo denominado "novi" dentro
deste arquivo.
Se você testar seu projeto agora - Control  Test Movie ou Ctrl
+ Enter, verá que os acentos não estão sendo interpretados pelo
Flash Player.
Para que seu texto seja interpretado pelo Flash Player com
acentos, insira este comando na primeira linha do seu código:
System.useCodepage = true;

Agora sim, teste seu filme e veja seu arquivo de texto funcio-
nando sendo trazido corretamente para dentro de seu projeto.

WebDesign 12 Prof. Ricardo