Buscar

Desenvolvendo um site completo em Flash

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 38 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 38 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 38 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

Desenvolvendo um site completo em Flash - Parte 1
O primeiro Layout - Réguas, Grade e Guias.
Inauguramos esta sessão de “Tutorial” com o Primeiro Capítulo para o Desenvolvimento Completo de um Site, tomando como base o programa Flash MX da Macromedia.
Vamos explicar desde o layout inicial até o seu arremate com a publicação do projeto, e seguiremos passo-a-passo, esmiuçando, em cada capítulo, o que podemos aproveitar e aprender da ferramenta. Contudo, nossa intenção, aqui, não será apenas demonstrar os mecanismos do programa, mas potencializar idéias, motivando novos conceitos e estruturando 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 informações principais como notícias e novidades, além de conter um texto de apresentação, o logotipo e os intens 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 definidos 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 desenvolvido.” Não necessariamente ! Você pode desenhar um projeto de layout com uma folha de papel e uma caneta, e só depois transpor sua idéia para um trabalho no computador. Este primeiríssimo layout pode ser criado, inclusive, numa reunião preliminar com seu cliente, em que, coforme ele lhe passa as idéais, 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 idéia do papel para a tela, e que, posteriormente, organizarão seus elementos visuais de maneira adequada e precisa.
Antes de mais nada é necessário fixar as dimensões do seu projeto, ressaltando que é somente na publicaçã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 Rulers Unit é a unidade de medida das réguas, e neste caso, serão em pixels.
O Flash MX oferece auxílio no que diz respeito a 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 trabalhar 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 MX 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 abriu, você poderá modificar:
- 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 à ela.
* Imagine o “snap” como sendo um imã para o 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 uma terceiro apoio sobre a organização espacial, as guias – Guides. Estas são, ao meu ver, a que nos dá maior flexibilidade no ajuste de nossa programação visual. Vá em View à Guide à Show Guide. 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 mouse 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 à Guide à Edit Guide. Algumas opções são semelhantes à edição das Grades. Você também pode ajustar elementos com precisão, fixando-os na Guia, se em Snap accuracy, selecionar Snap always.
Selecione Show guide e Snap to guide. Mantenha 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 (geralmente usada quando a organização já foi estruturada). Por enquanto 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 desenhá-la. Vá preenchendo todos espaços de forma que sua figura final fique assim:
Para finalizar, volte em View à Grid e desmarque a opção Show Gride e faça o mesmo em Guide à desmarque a opção Show Guide.
Outra dica importante é transformar a Layer - onde tudo isso foi desenhado - em uma camada guia. Clique com o botão direito 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 idéias 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:
No próximo Capítulo, baseados neste layout, começaremos a desenvolver o design de nosso projeto, trabalhando com mixer de cores e ferramentas de desenho.
Desenvolvendoum site completo em Flash - Parte 2
O primeiro Layout
Continuamos nosso projeto de site, hoje desenvolvendo a estrutura de layout aprofundada com cores, informações visuais e características personalizadas para nosso cliente. Além de trabalhar alguns detalhes da Ferramenta Rectangle e finalizar, criando nosso primeiro Movie Clip.
Em relação as 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 suficientes para um design profissional adequado e interessante)
O Flash MX 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 padrã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 coerentes 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 decidiram 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 moderna" fazendo analogia à arquitetura de interior de casas e escritórios.
Abra o arquivo "aam.fla" que já foi criado na primeira etapa deste nosso tutorial. Nele estão aparentes as guias e as réguas e o layout inicial de nosso projeto. Poderemos agora, começar a delinear as imagens e as cores que deverão compor a estrutura 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-a "Logo". Aperte Enter para concluir.
Precisamos agora importar o logotipo da empresa.
* Para pegar a imagem do logotipo, vá em: http://www.tonanet.com/bd/logotipo_aam.png.
Salve-o numa pasta "imagens" dentro da pasta em que você salvou seu arquivo "aam.fla".
Vá em File - Import - Import to stage, procure a pasta "imagens", selecione o arquivo "logotipo_aam.png" e abra-o. Ele irá aparecer colado ao canto esquerdo superior do seu trabalho. Baseando-se no layout definido na primeira 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 - Timeline - Layer. Renomeie-a para "Back_menu". 
* A imagem do background está em: http://www.tonanet.com/bd/back_menu.png. Salve-a na mesma pasta "imagens" onde você salvou o "logotipo_aam.png". 
Tenha certeza de que a camada "Back_menu" está selecionada, vá em File - Import - Import to stage, procure a pasta "imagens", selecione o arquivo "back_menu.png" 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 deixando 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 ferramenta 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 "Novidades", 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 renomeie-a "Notícias". Bloqueie todas as outras camadas deixando apenas esta, desbloqueada. 
Abra o Painel Color Mixer e selecione Linear.
Existem dois ícones de cores que formam o mixer. O padrão é preto e branco. Para modificar 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 ícone 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 selecionado, 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 um linha, dois pequenos círculos e um quadradinho. O pequeno círculo lateral rotaciona o preenchimento. O quadradinho 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 carregado externamente. 
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 do nosso tutorial, vamos trabalhar com o componente que acolherá este arquivo externo. Nesta etapaainda não trabalheremos Action Script, mas já deixaremos o componente preparado para receber um arquivo externo. A configuração exata será feita no próximo capítulo. 
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 Ferramentas 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 externo serão apresentadas. 
Abra o Painel Componentes. Window - Development Panels - Components. No painel aberto selecione o componente Loader 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 na alça Parameters - ao lado de Properties. 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 externo ser carregado será necessário um 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á dimuniçã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. 
Já deixamos nosso trabalho preparado para o próximo capítulo, onde colocaremos em prática as configurações do componente Loader. 
Desenvolvendo um site completo em Flash - Parte 3
Componente Loader, Publicação e Movie Clip
Durante esta quinzena, alguns leitores me escreveram encontrando dificuldade com o componente Loader. Isso porque algumas dessas pessoas, estão lidando com o Flash MX em sua versão 2003, e tal componente só passou a existir a partir da versão 2004. Se você não me escreveu por timidez ou falta de tempo, mas encontrou o mesmo problema, não se preocupe, porque no capítulo de hoje, eu farei um adendo, explicando como utilizar um artifício para driblar a falta do Componente Loader na versão 2003. 
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 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 - 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 - Layer. 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 com o nome "pagprinc.fla" na mesma pasta onde salvou seu arquivo anterior "aam.fla". 
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 elementos 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 Netscape 4.0 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 "pagprinc.fla". Mas precisaremos publicá-lo como "pagprinc.swf" para trabalharmos com ele no componente Loader que inserimos em nosso arquivo "aam.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 6. A maioria das pessoas ainda está trabalhando com o Flash Player 6, e desta forma você consegue alcançar um número ainda maior de pessoas, já que seu filme vai tocar num Player 6 ou superior. Quanto mais baixa a versão do Player, maior a chance de seu filme ser visualizado por mais pessoas sem que elas tem que fazer update da sua versão. Atenção apenas para o caso de ter desenvolvido um projeto com Scripts e Componentes que só a versão 7 poderia reproduzir. 
No mercado a versão 6 já está bastante disseminada. Eu costumo trabalhar com ela. 
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 certeza de trabalhou com Action Script 1.0 em toda a sua programação. Quanto as outras configurações veremos mais adiante. Clique em Publish e depois clique em Ok. 
Você acaba de criar o seu arquivo "pagprinc.swf". Feche o "pagprinc.fla" . Precisamos agora trabalhá-lo dentro do nosso arquivo principal. Abra o "aam.fla". 
No Palco selecione o componente Loader que está na camada denominada "Pag.Principal". Na Barra Properties, clique na alça Parameters. 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 - pagprinc.swf 
scaleContent - True (O filme manterá seu tamanho original) 
Se você testar seu filme agora, verá que que o filme "pagprinc.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 "pagprinc.swf" adequadamente, inserindo nele os componentes, imagens e textos que farão parte deste setor do site. 
PARA A VERSÃO ANTIGA DO FLASH MX - Versão 2003 
Para quem não tem a versão 2004, aqui vai um artifício para adicionarmos um filme externo, exatamente da mesma forma que fizemos com o componente Loader. 
Clique na ferramenta Rectangle e depois, em Fill color, selecione a cor Branca (#FFFFFF) e em Stroke color escolha sem cor. Na palco 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. 
Agora vamos transformar este retângulo num Movie Clip. Como o retângulo selecionado, vá em Modify - Convert to Symbol ou aperte F8. Na janela que irá abrir selecione MovieClip em Behavior e nomei-o "pagprinc_MC". Em Registration, clique no quadradinho superior à esquerda. 
Com este Movie Clip selecionado vá na barra Properties e nomeie a instância como"pagprinc". 
Selecione o quadro da camada onde se encontre o Movie Clip, e abra o painel Actions que se encontra na parte inferior da sua área de trabalho. Clique sobre o Título "Actions - Frame" para abrí-lo. 
Na janela lateral direita você deverá inserir este código: 
loadMovie("pagprinc.swf", this.pagprinc); 
O que ele significa ? 
É o mesmo que estar dizendo: "Carregue o filme ´pagprinc.swf´ dentro da instância do Movie Clip de nome ´pagprinc´ " 
"this" (para quem não conhece muito inglês) singnifica "esse". Nesta programação, significa que a instância "pagprinc" deste Movie Clip está nessa cena. Futuramente trabalharemos com caminhos internos e, então, entenderemos isso mais facilmente. 
Você pode inserir este código manualmente ou inserí-lo através da programa pré-formatada do Flash, do lado direito desta mesma janela. 
Clique duas vezes em LoadMovie dentro de Browser/Network. Dentro das chaves escreva "pagprinc.swf", com o cursor piscando depois da vírgula, selecione o ícone de alvo. 
Na janela que irá abrir selecione o nome "pagprinc" e clique em Ok. 
Feche o Painel Actions, clicando uma vez sobre seu título "Actions - Frame" . 
Agora teste seu filme. Control - Test Movie ou aperte Ctrl+Enter. O Movie Clip, neste caso, funciona como o Componente Loader. Servindo apenas para carregar um filme externo. 
O Loader é menos trabalhoso, mas ambos funcionam da mesma forma. 
No próximo capítulo, trabalharemos introduzindo os botões do nosso projeto e aprenderemos a trabalhar com níveis. 
Até lá ! 
Desenvolvendo um site completo em Flash - Parte 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 "aam.fla". Vamos criar uma nova camada para abrigar os botões. Clique no primeiro ícone no canto inferior esquerdo 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.
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 selecionado, vá em Modify - Convert to Symbol ou aperte F8. Na janela que irá abrir selecione Button em Behavior e nomei-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 estiver "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 selecione 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. Tranforme-o num Movie Clip. Vá em Modify - Convert to Symbol ou aperte F8. Na janela que irá abrir selecione MovieClip em Behavior e nomei-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 sobre o nome Layer 1 e ao entrar na edição renomeie-a "Background". Aperte Enter para concluir.
Nesta camada crie um Quadro 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 - Layer. 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âgulo.
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 - Design Panels - 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 Motion Tween.
Para que possamos criar a animação precisamos inserir outro Quadro-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ê. 
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 Properties. 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 em0%.
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. Vamos 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 - Design Panels - 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 a figura abaixo:
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 "aam.fla". File - Save ou Ctrl + S.
No próximo Capítulo nomearemos os botões e começaremos a inserir a primeira interatividade do nosso projeto.
Qualquer dúvida não sejam tímidos ! Escrevam-me !
Até lá !
Desenvolvendo um site completo em Flash - Parte 5
Interatividade dos botões
Em primeiro lugar gostaria de pedir desculpas para todos aqueles que me escreveram durante este período e que ficaram sem resposta. Ocorre que fui internada e operada de emergência, e precisei ficar em repouso absoluto por mais de 15 dias. Tive que me afastar de todas as minhas atividades profissionais, e inclusive responder os mails que recebo de meus leitores. Durante a próxima quinzena, tentarei respondê-los um a um. 
Vamos continuar a construção do nosso site para a Associação de Arquitetos, nomeando os botões e incluindo sua interatividade.
Primeiro, vamos fazer a parte mais fácil. Nomear os botões. 
Abra o arquivo “aam.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.
Selecione a Ferramenta de Text Tool. Na Barra Properties, selecione Arial Black, size: 12, cor Amrelo (#FFFF00) e escreva no Palco, uma a uma as palavras: “Página Principal” – “Associados” – “Projetos” – “Estágios” – “Jornal” – “Contato”. Você pode escrevê-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 – Design Panels – 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 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, à título de exemplo, como já fizemos na terceira parte deste tutorial.
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 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 – 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 – Layer. 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: “Associados”. 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 com o nome “associados.fla” na mesma pasta onde salvou seus dois arquivos anteriores “aam.fla” e “pagprinc.fla”. 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 6. Clique em Publish e depois clique em Ok. Você acaba de criar o seu arquivo “associados.swf”. Feche o “associados.fla” .
Voltemos a trabalhar com nosso “aam.fla”.
Primeiro vamos nomear a instância do componente Loader que estamos utilizando neste projeto. Desbloqueie a camada “Pag.Principal” e no palco, selecione o componente 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. Este Painel fica na parte inferior da sua área de trabalho.
Sempre preste atenção no título deste Painel, ele lhe dirá aonde 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.
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ódigos serão inseridos. Você pode inserí-los manualmente, digitando-os (se você for programador), ou utilizar o painel à direita para inserí-los com o apoio do Flash.
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. Vamos 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 suplo clique na opção Press.
Posicione o cursor do lado direito dachave 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 “aam.fla”. File – Save ou Ctrl + S.
Na próxima etapa, trabalharemos com carregamento de texto externo. Se você quiser se adiantar sobre este tema, a Revista Webdesign deste mês vem com um tutorial a respeito de “Carregamento de texto externo no Flash 2004”.
Para quem em escreveu, aguarde minhas respostas. Elas chegarão !
Um abraço !
Desenvolvendo um site completo em Flash - Parte 6
Novamente gostaria de pedir desculpas a todos que me escreveram neste período e não foram respondidos. Tive uma recaída muito feia e precisei ser internada mais duas vezes e sofri uma nova cirurgia. Aos poucos estou melhorando, às custas de muito antibiótico e perseverança. 
Então, peço à todos compreensão. Alguns mails estão sendo respondidos com quase dois meses de atraso (!) e se eu ainda não respondi o seu, é porque realmente ainda não tive tempo. Estou me organizando e colocando a vida em ordem. Mails de leitores, com certeza, são prioridade. Aguarde que, ainda que demore mais um pouquinho... as respostas chegarão.
Vamos continuar com nosso projeto da Associação de Arquitetos. Nesta etapa, vamos aprender a trabalhar com texto externo. Se você comprou a edição de novembro/2004 da revista Webdesign, já deve ter compreendido como funciona o componente Text Area. Bom momento para revisar. Se você não teve acesso ao tutorial da revista, bom momento para aprender. Vamos lá...
É 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, semanais 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: 
&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 "aam.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 2004 do Flash MX poderá trabalhar com Folha de Estilo também (CSS).
Agora, vamos abrir o arquivo "aam.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 à Development Panels à 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 diagramaçã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 (Paramenters) 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.
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 à Development Panels à 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" (nova_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 "novidades.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 funcionando sendo trazido corretamente para dentro de seu projeto.
Na próxima etapada, ensinarei um artifício para aqueles que estão trabalhando com as versões mais antigas do Flash, e não possuem o componente Text Area.
Aproveito para convidá-los para conhecer o ArquivoFLA: Um projeto pessoal meu que pretendedivulgar bastante informação sobre o universo web com foco nesta ferramenta que tem tornado a internet tão rica: O Flash !
ArquivoFLA: www.arquivofla.com
Bem vindos !
Continuem me escrevendo !! A resposta pode demorar, mas ela chega !
Até a próxima !
Desenvolvendo um site completo em Flash - Parte 7
Carregando texto externo nas versões antigas do Flash
Mais uma vez gostaria de pedir desculpas para todos aqueles que me escreveram durante este período e que ficaram sem resposta. Estou numa daquelas fases em que tudo resolve acontecer ao mesmo tempo. Muitos projetos, livro sendo lançado, mudanças na equipe, etc.
Todos os mails recebidos estão guardados em minha caixa postal com imenso carinho e como não gosto de responder nada com pressa ou responder por responder, mesmo com atrasos de quase meio ano, todos terão suas respostas e a minha atenção personalizada, tá bom ? 
Esta estapa será apenas para aqueles que me escreveram com dúvidas sobre como carregar um texto externo na versão Flash MX antiga, não a 2004.
Na realidade, não é nada complicado, e vocês concordarão comigo, logo que terminarem de ler esta etapa do tutorial.
Reitero, que estes ensinamentos são para aqueles que possuem a versão 2003 do Programa Flash MX. No entanto, nada impede que aqueles que já tem a versão mais nova, possam fazer da mesma maneira.
Antes de tudo vamos criar o arquivo de texto que será importado para dentro do Flash. Este arquivo será criado através do Bloco de Notas (Notepad).
Abra seu Bloco de Notas e digite o texto abaixo:
MeuTexto=<FONT SIZE="10" COLOR="#000000">A Associação ganha um novo Clube. Tem piscina, quadra de tênis e sauna à vapor. <BR>Entenda como irá funcionar o tributo bimensal.
<a href="http://www.aam.com.br"><u>Clique aqui</u></a> para saber as novidades</FONT>
Salve-o com o nome "novi.txt", na mesma pasta onde você gravou anteriormente o projeto em Flash que estamos trabalhando. É muito importante que você grave com este nome e na mesma pasta, para que nossa programação funcione corretamente.
Agora, abra o arquivo "aam.fla" que já foi criado na primeira etapa deste nosso tutorial. Nele estão expostos as imagens desenvolvidas até agora para a interface desta página principal. Nós trabalharemos apenas a parte "Novidades", carregando um texto externo, que poderá ser modificado de forma bem simples a cada atualização das novidades do site e da Associação.
Na parte "Novidades" da página principal do site, nós iremos colocar um Caixa de Texto Dinâmica.
Na Barra de Ferramentas, clique na Ferramenta Texto, a seguir, vá até a Barra de Propriedades, e escolha Texto Dinâmico.
Depois arraste o mouse sobre a área cinza que foi determinada para receber as informações de "Novidades", e faça um retângulo sobre esta área, como na figura abaixo.
Esta Caixa de Texto Dinâmica receberá a variável que denominaremos MeuTexto. Para isso, precisamos incorporá-la na programação através da Barra de Propriedades. Procure o campo Var e nele insira MeuTexto, como demonstrado na imagem abaixo.
Desta forma, a sua Caixa de Texto Dinâmica já está apta para receber a variável do texto externo; a variável que denominamos lá no início dessa explicação em nosso arquivo txt criado no Bloco de Notas, que denominamos "novi.txt".
Vamos criar uma camada específica que abrigará a programação que chamará esta variável inserida no txt para dentro de Caixa de Texto. Selecione a camada Novidades_Texto e então, no canto superior esquerdo da Linha de Tempo (Timeline), clique sobre a primeira opção.
Uma nova camada foi inserida sobre a camada Novidades Texto. Clique duas vezes sobre o nome desta nova camada e a nomeie Ações_Texto.
Nesta camada vamos inserir as ações referentes ao texto externo que queremos trazer para dentro do Flash. Selecione o primeiro Quadro (frame) e então clique na Barra de Ações.
Certifique-se que na Barra de Ações esteja escrito Ações - Quadro (Actions - Frame)
Ao abrir o Quadro Ações, você encontrará um quadro em branco onde você irá inserir manualmente o seguinte comando:
loadVariablesNum("novi.txt", 0);
Isso singniffica que vc está carregando a variável de nome "novi.txt" (que criamos no Bloco de Notas), dentro da Caixa de Texto Dinâmica criada por você. Porque quando ele carregar o arquivo "novi.txt", ele vai procurar a variável MeuTexto que está dentro dele e então, apresentará dentro da Caixa de Texto Dinâmica que colocamos no Palco.
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;
Desta forma, aqueles que não possuem a versão 2004 do programa também podem trabalhar com arquivos de texto externos e aproveitarem as vantagens deste tipo de procedimento.
Na próxima etapa de nosso tutorial, vamos trabalhar a nossa lateral esquerda onde serão inseridas imagens de diretores e de imprensa, e poderão ser carregadas externamente também.
Aproveito para anunciar com grande alegria mais um livro publicado pela Editora Ciência Moderna.
"Publicidade com Flash MX 2004 - Banners"
Ainda que este livro tenha sido desenvolvido com o intuito de
aprofundar o conhecimento dos leitores sobre o vasto (e novo) universo da publicidade na web; sua didática acaba por facilitar o aprendizado da ferramenta.
O livro, então, passa a ter dois objetivos: O desenvolvimento de banners eficientes e interativos, e o aprendizado do programa Flash MX 2004 de forma agradável e simples.
http://www.arquivofla.com/livro_banners
Se você mora no Rio e deseja participar do lançamento que será em setembro, escreva para mim que enviarei o convite oficial.
Um beijinho e até a próxima !
Utilizando CSS no Dreamweaver MX2004 - Parte 1
O CSS (Cascading Style Sheet) ou as folhas de estilo em cascata permitem definir a maneira como os elementos de uma página serão exibidos. Mais. Permitem controle total, ou seja, definir atributos de formatação antes impossíveis através do HTML como cor e tipo de borda, estilos diferentes de links, controle sobre a aparência de barras de rolagem e campos de formulário. Pode até definir atributos de impressão, como quebra de página, espaço entre caracteres (tracking) e espaçamento entre linhas (leading). 
O CSS, assim como HTML, é um código de formatação definido pela W3C ou World Wide Web Consortium (http://w3c.org/Style/CSS/) compatível com a maioria dos browsers atuais. Embora os recursos mais avançados sejam suportados somente pelos navegadores mais rescentes, o CSS vem se tornando componente obrigatório em um projeto web. Principalmente grandes projetos, devido a sua principal vantagem: simplificar as alterações e manutenção das páginas.
Você pode utilizar um estilo interno, onde o código CSS fica dentro do documento HTML, ou pode utilizar uma folha de estilo externa vinculada ao documento, onde os estilos ficam separados em um arquivo com extensão .css e podem ser compartilhados entre todos os documentos do website. 
Utilizando folhas de estilo externas, você obtém as principais vantagem do CSS:
Manter o conteúdo das páginas separado da apresentação 
Manter a aparência dos elementos consistente por todo o site 
Simplificar a manutenção, já que alterando somente o arquivo CSS compartilhado, você modifica a forma como todos os elementos e portanto os documentos serão visualizados. 
O Macromedia Dreamweaver MX2004, a última versão da ferramenta mais utilizada por desenvolvedores para criação de páginas web em todo o mundo, extendeu o suporte ao CSS, simplificando sua utilização. 
Vamos nesta primeira parte do tutorial, mostrar como criar uma folha de estilo externa e redefinir os atributos padrões de determinadas tags HTML (elementos visuais em forma de código). Clique aqui para download dos arquivos utilizados nesta parte do tutorial. 
Copie os arquivos para a raiz do site configurado no Dreamweaver.
Para ver a animação passo-a-passo do tutorial, clique aqui. 
1. No Dreamweaver, abra o arquivodocumento_01.htm
2. Vamos criar um novo documento tipo CSS. 
No menu File, selecione a opção New... 
Na janela New Document, selecione a guia General.
Na opção Category, selecione Basic Page.
Na opção Basic Page, selecione CSS. 
Clique no botão Create. 
Salve este documento da raiz do site com o nome estilos.css
Menu File > Save. 
Feche o arquivo CSS.
3. Agora vamos vincular o documento principal com a folha de estilo externa.
No menu Window, selecione a opção CSS Styles para abrir o painel Design na lateral.
Na barra de status do painel, clique no primeiro botão, Attach Style Sheet (vincular folha de estilo)
Mantenha a opção Add as como Link, clique no botão Browse... e selecione o arquivo estilos.css que acabamos de criar.
Clique no botão OK. 
Pronto! Acabamos de vincular uma folha de estilo a um documento HTML
Quem trabalha com código HTML, pode conferir no modo de visualização Code que a seguinte linha foi inserida no início do código HTML, estabelecendo o vínculo entre a folha de estilo e o documento principal.
<link href="estilos.css" rel="stylesheet" type="text/css">
Observe que este código está na parte inicial do HTML (tag HEAD), antes da tag BODY, ou seja, os estilos são carregados antes de exibir os elementos do corpo da página. 
Existem dois tipos de estilo:
Os estilos de redefinição, que alteram os atributos padrões das tags do HTML 
Por exemplo: alterar a fonte padrão da página (tag BODY) para Verdana, cor cinza. 
Quando criamos um estilo de redefinição, ele passa a valer sem a necessidade de aplicarmos o estilo no documento. Ele redefine a visualização padrão daquele elemento (tag) automaticamente. 
Os estilos de classe. Diferente dos estilos de redefinição, aos estilos tipo classe, atribuimos um nome (nome da classe) e precisamos aplicá-los nas tags ou elementos da página para que passem a ter efeito. 
Nesta primeira parte do tutorial iremos criar somente estilos de redefinição. 
Para criar um novo estilo:
1. No painel Design, clique no segundo botão da barra de status do painel, New CSS Style. 
2. Na janela New CSS Style, vamos começar definindo as opções de baixo para cima (?!?)
Na opção Define in, selecione no menu dropdown o estilo.css
Esta opção é que define no Dreamweaver se a folha de estilo será interna ou externa. 
Na opção Selector type, selecione a opção Tag
Esta opção define o tipo do estilo (redefinição ou classe + selector) 
Na opção Tag, selecione ou digite td
A tag TD é a tag que representa a célula da tabela (table data)
Com isso estamos criando um estilo de redefinição para todo o conteúdo que será inserido dentro das tabelas deste e de todos os documentos que ficarão vinculados a esta folha de estilo.
3. Na janela CSS Style Definition, selecione na opção Category: Type
Por enquanto vamos alterar somente os atributos de texto da tag TD 
4. Selecione:
Type: Verdana, Arial, Helvetica, sans-serif
Size: 11 pixels
Color: #666600
Clique no botão OK
Pronto! Acabamos de redefinir os atributos de texto do conteúdo das tabelas (célula = tag TD)
Agora vamos vincular a mesma folha de estilo a outro documento existente. 
1. No Dreamweaver, abra o arquivo documento_02.htm
Visualize a aparênca do texto que está dentro das células da tabela 
2. No painel Design, guia CSS Styles, clique no primeiro botão, Attach Style Sheet (vincular folha de estilo). Mantenha a opção Add as como Link, clique no botão Browse... e selecione o arquivo estilos.css como fizemos anteriormente. Clique no botão OK.
Observe a alteração na aparência do texto.
Salve todos os arquivos. 
Na versão MX2004 do Dreamweaver, sempre que criamos ou editamos um estilo em um CSS externo, o programa abre a arquivo .css para que lembremos de atualizá-lo no servidor (upload).
Para alterar esta configuração:
1. No menu Edit, selecione a opção Preferences
2. Na categoria CSS Styles, desmarque a opção Open CSS files when modified. Clique no botão OK. 
Para editar um estilo:
1. No painel Design, guia CSS Styles, expanda o conjunto de estilos e selecione td 
2. Clique no botão na barra de status do painel, Edit Style...
Altere os valores:
Size: 12 pixels
Color: #6699CC
Clique no botão OK.
Automaticamente TODOS os documentos vinculados a esta folha de estilo (estilos.css) sofrerão esta modificação. E para que esta alteração se reflita em todo o site é interessante que o vinculo a uma folha de estilo externa seja definido no começo do projeto.
Quem utiliza o recurso de Templates (modelos de página) do Dreamweaver deve definir o vinculo a um CSS externo já no Template para garantir que todos os documentos do projeto sejam controlados pela mesma folha de estilo. 
No próximo tutorial, aprenderemos a criar estilos internos e aplicar estilos tipo classe.
Dúvidas, sugestões, é só escrever para mim roberto@classroom.com.br
Até a próxima! 
Utilizando CSS no Dreamweaver MX2004 - Parte 2
No tutorial anterior abordamos as vantagens em se utilizar CSS, como criar folhas de estilo no Dreamweaver MX2004 e como criar estilos de redefinição. Para acessá-lo, clique aqui.
Nesta segunda parte, vamos mostrar como criar estilos tipo classe e aplicá-los a objetos dentro da página.
Os estilos tipo classe, diferentemente dos estilos de redefinição, possuem um nome (classe) e devem ser aplicados as tags html (objetos da página) para que tenham efeito. Podemos aplicar um estilo tipo classe em mais de um objeto. Por exemplo: um estilo que defina cor de fundo (background color) pode ser aplicado ao corpo da página (tag body), a uma tabela (tag table), a uma célula (tag td) e a um parágrafo (tag p).
No Dreamweaver MX2004 foi implementado no painel Properties para todos os objetos a opção Style, que permite aplicar e remover estilos, além de permitir uma pré-visualização das definições do estilo. 
Clique aqui para download dos arquivos utilizados nesta parte do tutorial. 
Assista a animação passo-a-passo do tutorial com áudio para um melhor entendimento. Clique aqui. 
1. No Dreamweaver, abra o documento_03.htm
2. No menu Window, selecione a opção CSS Styles para abrir o painel Design na lateral
Observe que a folha de estilo master.css já está vinculada ao documento.
3. Vamos criar um estilo tipo classe e aplicá-lo aos objetos da página.
Na barra de status do painel, clique no botão New CSS Style 
4. Na janela New CSS Style, na opção Define in, selecione o master.css
Esta opção é que define no Dreamweaver se a folha de estilo será interna ou externa. 
Na opção Selector Type, selecione a opção Class 
Na opção Name, digite .titulo1
MUITO IMPORTANTE: o nome de um estilo tipo classe deve começar com ponto (.) 
 
5. Defina as propriedades do estilo conforme figura abaixo e clique no botão OK:
 
6. Para aplicar o estilo no texto Titulo1, coloque o cursor no texto e selecione a tag p através do tag selector
 
7. No painel Properties, selecione na opção Style, o estilo que acabamos de criar (.titulo1)
 
8. Siga os mesmos passos e aplique no texto Titulo 2 o estilo .titulo2 e na tabela o estilo .tabdados 
9. Assista ao tutorial passo-a-passo (com áudio) para ver os procedimentos em detalhes.
No próximo tutorial, aprenderemos a criar estilos avançados para controlar bordas e campos de formulário.
Dúvidas, sugestões, escreva para mim roberto@classroom.com.br
Até a próxima!
Utilizando CSS no Dreamweaver MX2004 - Parte 3
Nesta terceira parte do tutorial vamos detalhar a utilização do CSS em formulários HTML. 
Vamos aprender:
Formatar cor de fundo, fonte e espaçamento em campos de formulário 
Definir estilos para botões de formulário 
Vamos comecar formatando os campo do formulário. Podemos criar classes de estilos e aplicar e/ou redefinir o estilo default das tags de formulário. A segunda opção parece mais apropriada na maioria das vezes.
Clique aqui para download dos arquivos utilizados nesta parte do tutorial. 
Assista a animação passo-a-passo do tutorial com áudio para um melhor entendimento. Clique aqui. 
1. No Dreamweaver, abra o documento_04.htm
2. No menu Window, selecione a opção CSS Styles para abrir o painel Design na lateral
Observe que a folhade estilo estilo_form.css já está vinculada ao documento.
3. Vamos criar um estilo tipo redefinição para as tags de formulário:
input => campo de texto, botão
textarea => caixa de texto
select => menu dropdown
Na barra de status do painel, clique no botão New CSS Style 
4. Na janela New CSS Style, na opção Define in, selecione o estilo_form.css
Esta opção é que define no Dreamweaver se o estilo será definido somente para o documento ou se estará disponível em um arquivo externo (estilo_form.css) para que possa ser compartilhado pelos documentos do site.
Na opção Selector Type, selecione a opção Advanced 
Na opção Selector, digite input, textarea, select 
 
5. Na categoria Type, configure o estilo de texto para os campos de formulário:
Font => Verdana, Arial,..
Size => 10
Color => #000099 
6. Na categoria Background, configure a cor de fundo dos campos de formulário:
Background color => #F0F0FF
7. Clique no botão OK e verifique as alterações imediatas já que redefinimos o estilo dos campos de entrada (input, textarea e select). Faça um preview no navegador (F12). O Dreamweaver não exibe todos os estilos dentro do ambiente de autoria
 
Vamos criar agora um estilo para controlarmos a aparência do botão do formulário. Como a tag que define o botão é a tag input, a mesma que define um campo texto, precisaremos criar um estilo tipo classe e aplicá-lo ao botão. 
1. Na barra de status do painel Design CSS, clique no botão New CSS Style.
2. Na janela New CSS Style, defina:
Define in => estilo_form.css (estilo externo)
Selector Type => Class (classe de estilo a ser aplicada a tag) 
Name => .bt_form (não esqueca do ponto na frente - sintaxe obrigatória para estilos tipo classe) 
3. Na categoria Type configure somente as diferenças já definidas na tag input:
Weight => bold
Color => #FFCC00 
4. Na categoria Background configure uma cor de fundo diferente da cor definida para a tag input:
Background color => #9900CC 
5. Na categoria Box defina as margens internas do botão (padding) que controla a distância entre a borda e o conteúdo interno (texto)
Padding Right => 20 pixels 
Padding Left => 20 pixels
6. Na categoria Border, defina o estilo, espessura e cor da borda do botão 
Style => groove (experimente os outros "sabores" ...)
Width => 2 pixels
Color => #FFCC00 
7. Clique no botão OK. 
Agora vamos aplicar o estilo tipo classe no botão. Selecione o botão e no painel de propriedades, na opção Class, selecione o estilo bt_form 
8. Faça um preview no navegador (F12) para visualizar o resultado final
<< Clique aqui para assistir o tutorial passo-a-passo (com áudio) para ver os procedimentos em detalhes >>
No próximo tutorial, aprenderemos a criar estilos avançados para controlar espaçamento, bordas e fundo em tabelas.
Dúvidas, sugestões, escreva para mim roberto@classroom.com.br
Até o próximo!

Outros materiais