Desenvolvendo um site completo em Flash - Parte 1

O primeiro Layout - Rguas, Grade e Guias. Inauguramos esta sesso de Tutorial com o Primeiro Captulo 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 publicao do projeto, e seguiremos passo-apasso, esmiuando, em cada captulo, o que podemos aproveitar e aprender da ferramenta. Contudo, nossa inteno, aqui, no ser apenas demonstrar os mecanismos do programa, mas potencializar idias, motivando novos conceitos e estruturando de forma profissional e apropriada o desenvolvimento de um projeto para a web. Este nosso projeto ser para uma Associao de Arquitetos. A primeira pgina do site deve apresentar informaes principais como notcias e novidades, alm de conter um texto de apresentao, o logotipo e os intens do menu. O primeiro momento de um projeto no se refere nenhuma linguagem de programao nem to pouco alguma ferramenta de edio de imagem ou animao. O momento inicial aquele onde sero definidos as cores, as fontes, o contedo do seu trabalho e seu layout. Todas estas informaes selecionadas atravs de pesquisa de pblico-alvo e referncias imagem da empresa ou produto que deseja apresentar. Voc pode estar se perguntando... Pera..., mas o layout precisa de alguma ferramenta para ser desenvolvido. No necessariamente ! Voc pode desenhar um projeto de layout com uma folha de papel e uma caneta, e s depois transpor sua idia para um trabalho no computador. Este primeirssimo layout pode ser criado, inclusive, numa reunio preliminar com seu cliente, em que, coforme ele lhe passa as idais, voc j as organiza num papel. Mas, e depois ? Voc precisa de algo realmente substancial para apresentar ele e, tambm, para voc prprio 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 transposio da sua idia do papel para a tela, e que, posteriormente, organizaro seus elementos visuais de maneira adequada e precisa. Antes de mais nada necessrio fixar as dimenses do seu projeto, ressaltando que somente na publicao que definiremos como ele se apresentar nas diversas configuraes de tela existentes no mercado. Abra um arquivo novo do Flash e na barra Properties, clique em Size, defina as dimenses 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 rguas, e neste caso, sero em pixels. O Flash MX oferece auxlio no que diz respeito a organizao espacial dos elementos no palco, de maneira que eles fiquem dispostos com harmonia entre si; so as chamadas Guides (guias), Grids (grades) e Rulers (rguas). Vamos aprender a trabalhar com elas. Primeiro, vamos visualizar as Rulers (rguas). V em View Rulers. Voc deve ter percebido que surgiram rguas horizontal e vertical no seu arquivo.

A rgua mostrada em pixels - como voc definiu nas propriedades do documento - mas pode ser mostrada com outros parmetros de medida se voc clicar em Size na Barra Properties e mudar a Rulers Unit. . Para voc observar as rguas com mais preciso, basta ampliar a porcentagem da sua tela. View Magnification 800% Voc perceber que as rguas passam agora a ser contadas de 5 em 5 pixels, o que facilita muito um trabalho que necessite de ajuste rigoroso.

Agora verificaremos outro artifcio que o Flash MX oferece para a disposio ordenada dos elementos: A grade. V em View Grid Show Grid. Agora, o seu arquivo apresenta uma tela quadriculada e atravs destas linhas, voc j poder trabalhar o espao de seu layout. Mas, o Flash ainda vai mais alm 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 prximo 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: Preciso 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 opes 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 organizao espacial, as guias Guides. Estas so, ao meu ver, a que nos d maior flexibilidade no ajuste de nossa programao visual. V em View Guide Show Guide. Nada apareceu na sua tela ?... No se preocupe... No foi um bug ! que as guias ainda precisam ser criadas por voc. Para criar guias, as rguas precisam estar aparentes. Para uma guia horizontal, clique sobre a rgua 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 no queira. Para criar uma guia vertical, clique sobre a rgua lateral e arraste o mouse para o palco. O mesmo acontecer em relao as grades. Voc tambm poder personalizar as suas Guias, da mesma forma que fez com as Grades. V em View Guide Edit Guide. Algumas opes so semelhantes edio das Grades. Voc tambm pode ajustar elementos com preciso, 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 opes novas em Guides: Lock guide, que prender a guia no palco, para que voc ao deslocar outro objeto, no 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 organizao j foi estruturada). Por enquanto no mexeremos em nenhuma das duas. Crie duas Guias horizontais situadas em 50 e 150 px na rgua lateral e crie uma Guia vertical situada em 150 px na rgua superior.

Agora, criaremos os elementos que concluiro a primeira etapa do desenvolvimento do nosso layout. Utilizaremos a ferramenta Rectangle para aprofundar esta organizao.

Clique nesta ferramenta e depois, em Fill color, selecione a cor referente ao retngulo 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 espaos de forma que sua figura final fique assim:

Para finalizar, volte em View Grid e desmarque a opo Show Gride e faa o mesmo em Guide desmarque a opo Show Guide. Outra dica importante transformar a Layer - onde tudo isso foi desenhado - em uma camada guia. Clique com o boto direito do mouse sobre Layer 1 e escolha Properties.

Na telinha que ir abrir, em Type selecione Guide. D OK. Esta camada guia no aparecer no seu trabalho final de formato swf. Ela serve somente para organizar as informaes e os elementos do seu projeto. O arremate fica por conta dos textos, com efeito apenas ilustrativo, para voc basear suas idias junto com a sua equipe e apresentar ao cliente o primeiro conceito de organizao do contedo de seu projeto. Selecione a Ferramenta de Type e escreva sobre os espaos de forma que o layout final seja esse:

No prximo Captulo, baseados neste layout, comearemos a desenvolver o design de nosso projeto, trabalhando com mixer de cores e ferramentas de desenho.

Desenvolvendo um site completo em Flash - Parte 2

O primeiro Layout Continuamos nosso projeto de site, hoje desenvolvendo a estrutura de layout aprofundada com cores, informaes visuais e caractersticas personalizadas para nosso cliente. Alm de trabalhar alguns detalhes da Ferramenta Rectangle e finalizar, criando nosso primeiro Movie Clip. Em relao as cores, alm da conexo com a imagem da empresa, existe tambm o fator psicolgico, onde cada cor tem um efeito especfico sobre o ser humano. No caso da web, isso ainda mais profundo; porque temos que trabalhar com uma tabela padro 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 so 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 retngulo e crculo. Quando acionado, a tabela padro 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 servio oferecido, alm de ligao visual com o logotipo (j existente) da empresa. Aps uma reunio praticamente interminvel, a Associao de Arquitetos de Madagascar e sua equipe decidiram que as cores principais do projeto sero vermelho (#990000), cinza (#CCCCCC) e laranja (#FFCC00). Vermelho e laranja sero as cores base para trazer ao visitante comunicao e ao e o cinza servir de base para a legibilidade dos textos e trar neutralidade em relao as outras cores. A rea de notcias apesar de textual receber destaque na cor laranja. Ficou definido tambm que o site ter um ar de "decorao moderna" fazendo analogia arquitetura de interior de casas e escritrios. Abra o arquivo "aam.fla" que j foi criado na primeira etapa deste nosso tutorial. Nele esto aparentes as guias e as rguas e o layout inicial de nosso projeto. Poderemos agora, comear a delinear as imagens e as cores que devero compor a estrutura visual da pgina inicial. Se voc escreveu sobre os espaos para mostrar para o seu cliente e conduzir a sua equipe, v apagando as palavras conforme for inserindo o contedo 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 edio 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 espao destinado ao logotipo. Se voc escreveu "logotipo" neste espao, o momento de apagar esta palavra.

No se preocupe com a falta de legibilidade. Lembre-se que esta camada guia (Layer 1) no 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 boto direito do mouse sobre ocone 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 retngulo ter bordas arrendondadas e por isso clique na opo "Round Rectangle Radius" na parte inferior da Barra de Ferramentas e fixe o valor de 11 points.

Na rea destinada a "Novidades", desenhe um retngulo. 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 "Notcias". Crie outra camada e renomeie-a "Notcias". 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 padro preto e branco. Para modificar estas cores e desenvolver seu mixer personalizado, voc dever clicar em cada uma das opes de cores e depois selecionar a cor desejada na opo de cima. Clique no cone de cor do gradiente e com ele selecionado modifique a cor na opo 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 "Notcias", desenhe um retngulo. 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 retngulo para que o linear fique na horizontal. Selecione a Fill Transform na Barra de Ferramentas e clique sobre seu ratngulo.

A imagem agora estar apresentando um linha, dois pequenos crculos e um quadradinho. O pequeno crculo lateral rotaciona o preenchimento. O quadradinho dimensiona o seu preenchimento e o crculo central, muda-o de posio.

Ateno ! Esta ferramenta transforma apenas o preenchimento... no transforma a imagem. Clique no crculo 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 seleo 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 pgina principal. Esta rea a que recebe maior destaque. Seu contedo alm de dinmico ser tambm carregado externamente. Cabe, neste momento, ressaltar que a organizao principal de um projeto em flash deve ser estudada sobre segmentaes. Se o projeto inteiro baseado num nico arquivo ns teremos vrios 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 informao, voc ter que editar dentro um arquivo monstruoso, cheio de camadas, movie clips e grficos. Terceiro, o tempo gasto para fazer o upload de seu arquivo para o servidor ser demorado. J se... voc dividir o seu projeto em vrios arquivos pequenos. A edio ser mais fcil, a transferncia para o servidor mais rpida e visualizao 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 etapa ainda no trabalheremos Action Script, mas j deixaremos o componente preparado para receber um arquivo externo. A configurao exata ser feita no prximo captulo. 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 retngulo no ter bordas arrendondadas. Clique na opo "Round Rectangle Radius" na parte inferior da Barra de Ferramentas e defina o valor para 0 points. Na rea "Pgina Principal" desenhe um retngulo. 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 retngulo apenas para definir melhor o espao onde as informaes do contedo externo sero 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 ala Parameters - ao lado de Properties. Vamos estudar as suas configuraes. autoload - Se "true", seu arquivo externo ser carregado automaticamente quando a reproduo atingir o quadro em que o componente est. Se "false", para o arquivo externo ser carregado ser necessrio um programao Action Script prpria. 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 ento sofrer dimunio de suas dimenses para caber na janela do componente. Se for o contrrio, a janela do componente for maior que o arquivo externo, o arquivo externo no ter sua dimenso ampliada. J deixamos nosso trabalho preparado para o prximo captulo, onde colocaremos em prtica as configuraes do componente Loader.

Desenvolvendo um site completo em Flash - Parte 3

Componente Loader, Publicao e Movie Clip Durante esta quinzena, alguns leitores me escreveram encontrando dificuldade com o componente Loader. Isso porque algumas dessas pessoas, esto lidando com o Flash MX em sua verso 2003, e tal componente s passou a existir a partir da verso 2004. Se voc no me escreveu por timidez ou falta de tempo, mas

encontrou o mesmo problema, no se preocupe, porque no captulo de hoje, eu farei um adendo, explicando como utilizar um artifcio para driblar a falta do Componente Loader na verso 2003. Abra um novo arquivo do Flash e na barra Properties, clique em Size, defina as dimenses para 582 (width) X 222 (height) px. D um duplo clique sobre o nome Layer 1 e ao entrar na edio 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 retngulo 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 opo To Stage e em ento 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 edio 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: "Pgina Principal". Utilize o Painel Align para alinhar o texto centralizadamente no palco. Com o texto selecionado , no Painel Align selecione a opo To Stage e em ento 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 diferena do arquivo FLA para o SWF ? Numa rpida explicao, podemos dizer que o arquivo FLA o editvel, aquele em que voc far as modificaes futuras necessrias 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, tambm poder ser visualizado por browsers como Internet Explorer e Netscape 4.0 ou superior. O SWF no editvel. 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 editvel "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 opo HTML e deixe marcada somente a opo Flash.

Depois clique sobre a paleta Flash e vamos observar algumas de suas configuraes.

Em Version, selecione Player 6. A maioria das pessoas ainda est trabalhando com o Flash Player 6, e desta forma voc consegue alcanar um nmero ainda maior de pessoas, j que seu filme vai tocar num Player 6 ou superior. Quanto mais baixa a verso do Player, maior a chance de seu filme ser visualizado por mais pessoas sem que elas tem que fazer update da sua verso. Ateno apenas para o caso de ter desenvolvido um projeto com Scripts e Componentes que s a verso 7 poderia reproduzir.

No mercado a verso 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: Verso do Action Script, que pode ser a 2.0 ou a 1.0. S mexa nesta configurao se tem a certeza de trabalhou com Action Script 1.0 em toda a sua programao. Quanto as outras configuraes 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 ala 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 faro parte deste setor do site. PARA A VERSO ANTIGA DO FLASH MX - Verso 2003 Para quem no tem a verso 2004, aqui vai um artifcio 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 retngulo. 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 retngulo num Movie Clip. Como o retngulo 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 instncia 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 Ttulo "Actions - Frame" para abr-lo.

Na janela lateral direita voc dever inserir este cdigo: loadMovie("pagprinc.swf", this.pagprinc);

O que ele significa ? o mesmo que estar dizendo: "Carregue o filme pagprinc.swf dentro da instncia do Movie Clip de nome pagprinc " "this" (para quem no conhece muito ingls) singnifica "esse". Nesta programao, significa que a instncia "pagprinc" deste Movie Clip est nessa cena. Futuramente trabalharemos com caminhos internos e, ento, entenderemos isso mais facilmente. Voc pode inserir este cdigo manualmente ou inser-lo atravs 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 vrgula, 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 ttulo "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 prximo captulo, trabalharemos introduzindo os botes do nosso projeto e aprenderemos a trabalhar com nveis. At l !

Desenvolvendo um site completo em Flash - Parte 4

Componente Loader, Publicao e Movie Clip Continuando nosso trabalho para a Associao, hoje vamos inserir os botes que faro parte do Menu do nosso projeto. Abra o arquivo "aam.fla". Vamos criar uma nova camada para abrigar os botes. 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 edio renomeie-a "Botes". Aperte Enter para concluir.

Certifique-se de que todas as outras camadas esto bloqueadas. Selecione com o boto direito do mouse o cadeado da camada "Botes" 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 boto ter bordas arrendondadas e por isso clique na opo "Round Rectangle Radius" na parte inferior da Barra de Ferramentas e fixe o valor de 3 points.

No Palco, desenhe um pequeno retngulo. 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 retngulo num smbolo de Boto. Como o retngulo 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 esttica destes botes. Para mudarmos a aparncia do boto, devemos edit-lo. Para entrar sem seu modo de edio, d um duplo clique sobre ele. Voc vai perceber que a Timeline(Linha de tempo) de um smbolo de Boto diferente da Timeline dos Movie Clips e da Cena Principal. Ele tem apenas 4 quadros. Up Esta ser a primeira aparncia do seu boto. Assim que ele for carregado, ele se apresentar da forma que estiver "desenhado" aqui. Over Corresponde ao evento do toque do mouse. Quando o usurio passa o mouse sobre o boto, o que estiver desenhado neste quadro ser apresentado. Down Corresponde ao click do mouse Quando o usurio clicar sobre o boto, o que estiver desenhado neste quadro ser apresentado. Hit Est a rea de toque do boto. Ser onde o boto ficar sensvel ao toque. O que estiver desenhado neste quadro ser a rea onde o boto ser clicvel. Se nos outros quadros (Up, Over ou Down) voc tiver uma imagem, este quadro Hit pode ficar em branco. A rea clicvel 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 boto tenha uma animao 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 boto direito do mouse sobre o Quadro Over, e selecione Insert a Keyframe ou selecione-o e aperte F6. Faa o mesmo no Quadro Down.

Agora, vamos criar um Movie Clip no Quadro Over. Assim, sempre que o visitante passar o mouse sobre o boto, este Movie Clip animado ser apresentado. Selecione o Quadro Over, e ento selecione o retngulo 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 animao deste Movie Clip. Clique duas vezes sobre ele para entrar em seu Modo de Edio. Renomeie a primeira camada. D um duplo clique sobre o nome Layer 1 e ao entrar na edio renomeie-a "Background". Aperte Enter para concluir. Nesta camada crie um Quadro comum no Quadro 25. Clique com o boto 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 animao. E ficar aparente durante todo tempo da reproduo. 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 edio renomeie-a "Animao". 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 crculo ovalado sobre o retgulo.

Para que ambas as figuras fiquem sobrepostas com preciso, 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 opo To Stage e em ento clique sobre Align Horizontal Center e Align Vertical Center.

Bloqueie a camada "Background". No primeiro Quadro da camada "Animao", crie uma Interpolao de Movimento. Clique com o boto direito do mouse sobre o Quadro 1 e escolha Create a Motion Tween.

Para que possamos criar a animao precisamos inserir outro Quadro-chave no Quadro 25 desta mesma camada. Clique com o boto 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 esto lils com uma seta do incio ao fim. Isso significa que nesta camada existe uma Interpolao de Movimento (Motion Tween). Com uma Interpolao de Movimento, voc pode criar diversas animaes. Como funciona ? Voc cria um Quadro-chave no incio da animao e cria outro Quadro-chave no final da animao. Atravs da Interpolao, o Flash criar todos os quadros intermedirios para voc. Ou seja, voc pode ter uma bolinha branca no Quadro 1 e uma bolinha azul no Quadro 25. Os quadros intermedirios que transformam a bolinha branca numa bolinha azul sero criados pelo Flash. Este o conceito de Interpolao. Importante ! Todas as modificaes de seus smbolos para a Interpolao de Movimento devero ser feitas na Barra Properties. No apague um smbolo em um Quadro-chave para inserir outro no lugar, pois sua Interpolao de Movimento no funcionar. Se voc deseja que obter uma bolinha azul, mude sua cor na Barra Properties. Vamos praticar isso. No Quadro 25, selecione o crculo ovalado. Selecione a Ferramenta Free Transform.

Com a tecla Shift apertada, selecione uma das suas hastes e aumente ligeiramente o crculo de forma que suas bordas atinjam o limite do retngulo.

Ainda com o crculo selecionado, na Barra Properties, em Color configure Alpha em 0%.

Finalizamos nosso primeiro Movie Clip animado, e ele est dentro de um boto. Agora precisamos criar cpias destes botes na cena principal. Estamos dentro do Movie Clip que est dentro do boto. Vamos voltar para a Scene 1. Na parte superior da sua rea de trabalho, clique no Ttulo Scene 1. Ele o primeiro, ao lado de esquerdo de Bot_Principal. Estes ttulos mostram a ordem de onde voc est, neste caso, voc est dentro do Movie Clip Anima_bot, que est dentro do boto Bot_principal, que est dentro da Cena Principal Scene 1.

Voc pode selecion-lo e ento utilizar Copy e Paste. Eu costumo utilizar a tecla Alt do teclado. Selecione o boto com o mouse, aperte a tecla Alt e sem soltar o mouse, arraste-o para o lado. Crie mais 5 cpias deste boto, totalizando 6 botes no final. Localize-os de forma que o primeiro boto esteja no limite do incio do retngulo de Novidades e o ltimo esteja no final do mesmo retngulo. No se importe com os botes do meio, ns os organizaremos com preciso atravs 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 opo To Stage est desmarcada e em ento 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 botes para verificar a animao. No esquea de salvar seu projeto "aam.fla". File - Save ou Ctrl + S. No prximo Captulo nomearemos os botes e comearemos a inserir a primeira interatividade do nosso projeto. Qualquer dvida no sejam tmidos ! Escrevam-me ! At l !

Desenvolvendo um site completo em Flash - Parte 5

Interatividade dos botes Em primeiro lugar gostaria de pedir desculpas para todos aqueles que me escreveram durante este perodo e que ficaram sem resposta. Ocorre que fui internada e operada de emergncia, 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 prxima quinzena, tentarei respond-los um a um. Vamos continuar a construo do nosso site para a Associao de Arquitetos, nomeando os botes e incluindo sua interatividade. Primeiro, vamos fazer a parte mais fcil. Nomear os botes. 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 edio renomeie-a Identificao. Aperte Enter para concluir. Veja se esta camada est acima de todas as outras. Certifique-se de que todas as outras camadas esto bloqueadas. Selecione com o boto direito do mouse o cadeado da camada Identificao 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: Pgina Principal Associados Projetos Estgios Jornal Contato. Voc pode escrev-las sobre cada um dos botes, sem se preocupar com a centralizao. Isso ser feito com o Painel Align. Desbloqueie a camada Botes. Selecione o texto e boto que se encontra abaixo dele.

Dica ! Para selecionar ambos, voc pode clicar com o mouse sobre o texto e depois sobre o boto, mantendo pressionada a tecla shift do teclado. Abra o Painel Align, Window Design Panels Align ou Ctrl+K. Neste Painel, deixe desmarcada a opo To Stage e em ento clique sobre Align Horizontal Center e Align Vertical Center. Faa isso em todos textos e botes, selecionando-os e posicionando-os centralizadamente, de forma que fique como a figura a seguir.

Criar os botes desta forma menos trabalhoso, porque na realidade, voc est criando um boto matriz que servir de base para todo o seu projeto e sobre a qual voc ter repetidas instncias. Caso precise mudar o texto, rpido e prtico. Voc no vai precisar editar um determinado boto. Agora vamos inserir interatividade em um desses botes, que chamar uma pgina externa, previamente criada por voc. Vamos criar a pgina externa, ttulo 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 dimenses para 582 (width) X 222 (height) px. D um duplo clique sobre o nome Layer 1 e ao entrar na edio 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 retngulo 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 opo To Stage e em ento 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 edio 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 opo To Stage e em ento 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 opo HTML e deixe marcada somente a opo 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 instncia 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 Botes desbloqueada. Vamos inserir interatividade em um de nossos botes. Selecione o boto referente ao link Associados. Vamos abrir o Painel Actions. Este Painel fica na parte inferior da sua rea de trabalho.

Sempre preste ateno no ttulo deste Painel, ele lhe dir aonde estar sendo inserida a Ao. No caso deste nosso exemplo, ele dever estar mostrando o Ttulo Actions Button, porque estaremos inserindo a ao dentro do boto. Clique sobre o ttulo para abrir este Painel. Vamos estud-lo. Do lado esquerdo, voc tem os comandos j prmontados pelo Flash para apoiar voc no desenvolvimento de seu cdigo. Do lado direito, voc tem um espao em branco, onde estes cdigos sero 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 espao em branco voc dever inserir o cdigo 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 atravs 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 opo on.

A ao on foi inserida e uma nova caixa com outras opes ir abrir do lado direito do painel.

D um suplo clique na opo 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 parntese, digite "associados.swf", com o cursor piscando ao lado da vrgula, clique no cone de Insert a Target Path.

No quadro que ir abrir, selecione a instncia pag_ext e marque a opo absolute, e d Ok.

Seu primeiro boto est funcionando ! Traduzindo o comando. on (press) {

Ao clicar neste boto loadMovie("associados.swf", _root.pag_ext ); } ...carregue o filme associados.swf dentro do loader pag_ext. Crie pginas externas para todos os seus botes 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 botes para verificar a animao. No esquea de salvar seu projeto aam.fla. File Save ou Ctrl + S. Na prxima etapa, trabalharemos com carregamento de texto externo. Se voc quiser se adiantar sobre este tema, a Revista Webdesign deste ms vem com um tutorial a respeito de Carregamento de texto externo no Flash 2004. Para quem em escreveu, aguarde minhas respostas. Elas chegaro ! Um abrao !

Desenvolvendo um site completo em Flash - Parte 6

Novamente gostaria de pedir desculpas a todos que me escreveram neste perodo e no foram respondidos. Tive uma recada muito feia e precisei ser internada mais duas vezes e sofri uma nova cirurgia. Aos poucos estou melhorando, s custas de muito antibitico e perseverana. Ento, peo todos compreenso. Alguns mails esto sendo respondidos com quase dois meses de atraso (!) e se eu ainda no respondi o seu, porque realmente ainda no tive tempo. Estou me organizando e colocando a vida em ordem. Mails de leitores, com certeza, so prioridade. Aguarde que, ainda que demore mais um pouquinho... as respostas chegaro. Vamos continuar com nosso projeto da Associao de Arquitetos. Nesta etapa, vamos aprender a trabalhar com texto externo. Se voc comprou a edio de novembro/2004 da revista Webdesign, j deve ter compreendido como funciona o componente Text Area. Bom momento para revisar. Se voc no 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 posio certa, precisamos apenas trabalhar com as informaes que sero inseridas ali. Porque trabalhar com o componente Text Area e no simplesmente escrever manualmente o contedo dentro do Flash ? ... Pense o seguinte: esta uma rea que estar em constante atualizao. Podem ser novidades dirias, semanais ou mensais; mas elas sempre sero modificadas. Imagine voc precisar editar o seu .fla e publicar o SWF toda vez que precisar fazer uma pequena modificao nas informaes de novidades ! No seria mais fcil, voc editar um simples TXT e envi-lo pro servidor rapidamente ? O Text Area funciona desta forma. Vamos prtica: 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 Associao ganha um novo Clube. Tem piscina, quadra de tnis 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 vrias tags HTML dentro deste arquivo de texto, mas o contedo no precisa estar dentro das tags <html></html> ou <body><body>, basta voc iniciar com &nome_da_varivel. 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 so: <b>, <i>, <u>, <br>, <p>, <a href>, <img src>, entre outros e se voc est trabalhando com a verso 2004 do Flash MX poder trabalhar com Folha de Estilo tambm (CSS). Agora, vamos abrir o arquivo "aam.fla". Ns j inserimos a diagramao da rea Novidades. Vamos, ento, criar numa nova camada que abrigar o componente Text Area que ficar sobre esta diagramao. 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 edio renomeie-a "Identificao". 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 diagramao criada para a rea Novidades. Selecione a Free Transform Tool na Barra de Ferramentas, e ento clique sobre o componente Text Area que voc colocou no Palco. Dimensione-o para que ele ocupe, equilibradamente, o espao da diagramao.

Agora vamos conhecer um pouco os parmetros deste Componente. Contudo, no se preocupe com eles; tudo ser configurado atravs de Action Script. Estas oes so geralmente usadas para textos internos e digitados no campo Text. Se o Text Area no estiver selecionado. Selecione-o no palco. . A Barra Properties agora estar apresentando os Parmetros (Paramenters) referentes a este Componente, como nos mostra a figura a seguir.

Editable Se o texto ser editvel (true) ou no (false) quando incorporado ao SWF. O padro do Flash True. HTML Se o compontente Text Area interpretar os comandos de HTML inseridos no arquivo externo. Se sim (True) . Se no (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 espao definido pelo Compontente. Se sim (True) . Se no (False). Precisamos agora nomear esta instncia 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 Aes que sero 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 edio renomeie-a "Aes_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 varivel (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 tambm menciona o contedo do arquivo externo. Ele ordena que se carregue o arquivo "novidades.txt" e que se pegue o contedo denominado "novi" dentro deste arquivo. Se voc testar seu projeto agora - Control Test Movie ou Ctrl + Enter, ver que os acentos no esto sendo interpretados pelo Flash Player. Para que seu texto seja interpretado pelo Flash Player com acentos, insira este comando na primeira linha do seu cdigo: System.useCodepage = true;

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

Na prxima etapada, ensinarei um artifcio para aqueles que esto trabalhando com as verses mais antigas do Flash, e no possuem o componente Text Area. Aproveito para convid-los para conhecer o ArquivoFLA: Um projeto pessoal meu que pretende divulgar bastante informao sobre o universo web com foco nesta ferramenta que tem tornado a internet to rica: O Flash ! ArquivoFLA: www.arquivofla.com Bem vindos ! Continuem me escrevendo !! A resposta pode demorar, mas ela chega ! At a prxima !

Desenvolvendo um site completo em Flash - Parte 7

Carregando texto externo nas verses antigas do Flash Mais uma vez gostaria de pedir desculpas para todos aqueles que me escreveram durante este perodo e que ficaram sem resposta. Estou numa daquelas fases em que tudo resolve acontecer ao mesmo tempo. Muitos projetos, livro sendo lanado, mudanas na equipe, etc. Todos os mails recebidos esto guardados em minha caixa postal com imenso carinho e como no gosto de responder nada com pressa ou responder por responder, mesmo com atrasos de quase meio ano, todos tero suas respostas e a minha ateno personalizada, t bom ? Esta estapa ser apenas para aqueles que me escreveram com dvidas sobre como carregar um texto externo na verso Flash MX antiga, no a 2004. Na realidade, no nada complicado, e vocs concordaro comigo, logo que terminarem de ler esta etapa do tutorial. Reitero, que estes ensinamentos so para aqueles que possuem a verso 2003 do Programa Flash MX. No entanto, nada impede que aqueles que j tem a verso 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 atravs do Bloco de Notas (Notepad). Abra seu Bloco de Notas e digite o texto abaixo: MeuTexto=<FONT SIZE="10" COLOR="#000000">A Associao ganha um novo Clube. Tem piscina, quadra de tnis 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 programao funcione corretamente. Agora, abra o arquivo "aam.fla" que j foi criado na primeira etapa deste nosso tutorial. Nele esto expostos as imagens desenvolvidas at agora para a interface desta pgina principal. Ns trabalharemos apenas a parte "Novidades", carregando um texto externo, que poder ser modificado de forma bem simples a cada atualizao das novidades do site e da Associao. Na parte "Novidades" da pgina principal do site, ns iremos colocar um Caixa de Texto Dinmica. Na Barra de Ferramentas, clique na Ferramenta Texto, a seguir, v at a Barra de Propriedades, e escolha Texto Dinmico.

Depois arraste o mouse sobre a rea cinza que foi determinada para receber as informaes de "Novidades", e faa um retngulo sobre esta rea, como na figura abaixo.

Esta Caixa de Texto Dinmica receber a varivel que denominaremos MeuTexto. Para isso, precisamos incorpor-la na programao atravs da Barra de Propriedades. Procure o campo Var e nele insira MeuTexto, como demonstrado na imagem abaixo.

Desta forma, a sua Caixa de Texto Dinmica j est apta para receber a varivel do texto externo; a varivel que denominamos l no incio dessa explicao em nosso arquivo txt criado no Bloco de Notas, que denominamos "novi.txt". Vamos criar uma camada especfica que abrigar a programao que chamar esta varivel inserida no txt para dentro de Caixa de Texto. Selecione a camada Novidades_Texto e ento, no canto superior esquerdo da Linha de Tempo (Timeline), clique sobre a primeira opo.

Uma nova camada foi inserida sobre a camada Novidades Texto. Clique duas vezes sobre o nome desta nova camada e a nomeie Aes_Texto.

Nesta camada vamos inserir as aes referentes ao texto externo que queremos trazer para dentro do Flash. Selecione o primeiro Quadro (frame) e ento clique na Barra de Aes.

Certifique-se que na Barra de Aes esteja escrito Aes - Quadro (Actions - Frame)

Ao abrir o Quadro Aes, 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 varivel de nome "novi.txt" (que criamos no Bloco de Notas), dentro da Caixa de Texto Dinmica criada por voc. Porque quando ele carregar o arquivo "novi.txt", ele vai procurar a varivel MeuTexto que est dentro dele e ento, apresentar dentro da Caixa de Texto Dinmica que colocamos no Palco. Se voc testar seu projeto agora - Control Test Movie ou Ctrl + Enter, ver que os acentos no esto sendo interpretados pelo Flash Player. Para que seu texto seja interpretado pelo Flash Player com acentos, insira este comando na primeira linha do seu cdigo: System.useCodepage = true;

Desta forma, aqueles que no possuem a verso 2004 do programa tambm podem trabalhar com arquivos de texto externos e aproveitarem as vantagens deste tipo de procedimento. Na prxima etapa de nosso tutorial, vamos trabalhar a nossa lateral esquerda onde sero inseridas imagens de diretores e de imprensa, e podero ser carregadas externamente tambm. Aproveito para anunciar com grande alegria mais um livro publicado pela Editora Cincia 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 didtica acaba por facilitar o aprendizado da ferramenta. O livro, ento, passa a ter dois objetivos: O desenvolvimento de banners eficientes e interativos, e o aprendizado do programa Flash MX 2004 de forma agradvel e simples. http://www.arquivofla.com/livro_banners Se voc mora no Rio e deseja participar do lanamento que ser em setembro, escreva para mim que enviarei o convite oficial. Um beijinho e at a prxima !

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 pgina sero exibidos. Mais. Permitem controle total, ou seja, definir atributos de formatao antes impossveis atravs do HTML como cor e tipo de borda, estilos diferentes de links, controle sobre a aparncia de barras de rolagem e campos de formulrio. Pode at definir atributos de impresso, como quebra de pgina, espao entre caracteres (tracking) e espaamento entre linhas (leading). O CSS, assim como HTML, um cdigo de formatao definido pela W3C ou World Wide Web Consortium (http://w3c.org/Style/CSS/) compatvel com a maioria dos browsers atuais. Embora os recursos mais avanados sejam suportados somente pelos navegadores mais rescentes, o CSS vem se tornando componente obrigatrio em um projeto web. Principalmente grandes projetos, devido a sua principal vantagem: simplificar as alteraes e manuteno das pginas.

Voc pode utilizar um estilo interno, onde o cdigo 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 extenso .css e podem ser compartilhados entre todos os documentos do website. Utilizando folhas de estilo externas, voc obtm as principais vantagem do CSS:

Manter o contedo das pginas separado da apresentao Manter a aparncia dos elementos consistente por todo o site Simplificar a manuteno, j que alterando somente o arquivo CSS compartilhado, voc modifica a forma como todos os elementos e portanto os documentos sero visualizados.

O Macromedia Dreamweaver MX2004, a ltima verso da ferramenta mais utilizada por desenvolvedores para criao de pginas web em todo o mundo, extendeu o suporte ao CSS, simplificando sua utilizao. Vamos nesta primeira parte do tutorial, mostrar como criar uma folha de estilo externa e redefinir os atributos padres de determinadas tags HTML (elementos visuais em forma de cdigo). 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 animao passo-a-passo do tutorial, clique aqui. 1. No Dreamweaver, abra o arquivo documento_01.htm 2. Vamos criar um novo documento tipo CSS. No menu File, selecione a opo New... Na janela New Document, selecione a guia General. Na opo Category, selecione Basic Page. Na opo Basic Page, selecione CSS. Clique no boto 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 opo CSS Styles para abrir o painel Design na lateral. Na barra de status do painel, clique no primeiro boto, Attach Style Sheet (vincular folha de estilo)

Mantenha a opo Add as como Link, clique no boto Browse... e selecione o arquivo estilos.css que acabamos de criar. Clique no boto OK.

Pronto! Acabamos de vincular uma folha de estilo a um documento HTML Quem trabalha com cdigo HTML, pode conferir no modo de visualizao Code que a seguinte linha foi inserida no incio do cdigo HTML, estabelecendo o vnculo entre a folha de estilo e o documento principal. <link href="estilos.css" rel="stylesheet" type="text/css"> Observe que este cdigo est na parte inicial do HTML (tag HEAD), antes da tag BODY, ou seja, os estilos so carregados antes de exibir os elementos do corpo da pgina. Existem dois tipos de estilo:

Os estilos de redefinio, que alteram os atributos padres das tags do HTML Por exemplo: alterar a fonte padro da pgina (tag BODY) para Verdana, cor cinza. Quando criamos um estilo de redefinio, ele passa a valer sem a necessidade de aplicarmos o estilo no documento. Ele redefine a visualizao padro daquele elemento (tag) automaticamente. Os estilos de classe. Diferente dos estilos de redefinio, aos estilos tipo classe, atribuimos um nome (nome da classe) e precisamos aplic-los nas tags ou elementos da pgina para que passem a ter efeito.

Nesta primeira parte do tutorial iremos criar somente estilos de redefinio. Para criar um novo estilo: 1. No painel Design, clique no segundo boto da barra de status do painel, New CSS Style.

2. Na janela New CSS Style, vamos comear definindo as opes de baixo para cima (?!?) Na opo Define in, selecione no menu dropdown o estilo.css Esta opo que define no Dreamweaver se a folha de estilo ser interna ou externa. Na opo Selector type, selecione a opo Tag Esta opo define o tipo do estilo (redefinio ou classe + selector)

Na opo Tag, selecione ou digite td A tag TD a tag que representa a clula da tabela (table data) Com isso estamos criando um estilo de redefinio para todo o contedo que ser inserido dentro das tabelas deste e de todos os documentos que ficaro vinculados a esta folha de estilo.

3. Na janela CSS Style Definition, selecione na opo 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 boto OK Pronto! Acabamos de redefinir os atributos de texto do contedo das tabelas (clula = 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 aparnca do texto que est dentro das clulas da tabela 2. No painel Design, guia CSS Styles, clique no primeiro boto, Attach Style Sheet (vincular folha de estilo). Mantenha a opo Add as como Link, clique no boto Browse... e selecione o arquivo estilos.css como fizemos anteriormente. Clique no boto OK. Observe a alterao na aparncia do texto. Salve todos os arquivos. Na verso 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 configurao: 1. No menu Edit, selecione a opo Preferences 2. Na categoria CSS Styles, desmarque a opo Open CSS files when modified. Clique no boto OK.

Para editar um estilo: 1. No painel Design, guia CSS Styles, expanda o conjunto de estilos e selecione td

2. Clique no boto na barra de status do painel, Edit Style... Altere os valores: Size: 12 pixels Color: #6699CC Clique no boto OK. Automaticamente TODOS os documentos vinculados a esta folha de estilo (estilos.css) sofrero esta modificao. E para que esta alterao se reflita em todo o site interessante que o vinculo a uma folha de estilo externa seja definido no comeo do projeto. Quem utiliza o recurso de Templates (modelos de pgina) 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 prximo tutorial, aprenderemos a criar estilos internos e aplicar estilos tipo classe. Dvidas, sugestes, s escrever para mim roberto@classroom.com.br At a prxima!

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 redefinio. Para acess-lo, clique aqui. Nesta segunda parte, vamos mostrar como criar estilos tipo classe e aplic-los a objetos dentro da pgina. Os estilos tipo classe, diferentemente dos estilos de redefinio, possuem um nome (classe) e devem ser aplicados as tags html (objetos da pgina) 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 pgina (tag body), a uma tabela (tag table), a uma clula (tag td) e a um pargrafo (tag p). No Dreamweaver MX2004 foi implementado no painel Properties para todos os objetos a opo Style, que permite aplicar e remover estilos, alm de permitir uma pr-visualizao das definies do estilo. Clique aqui para download dos arquivos utilizados nesta parte do tutorial. Assista a animao 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 opo 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 pgina. Na barra de status do painel, clique no boto New CSS Style

4. Na janela New CSS Style, na opo Define in, selecione o master.css Esta opo que define no Dreamweaver se a folha de estilo ser interna ou externa. Na opo Selector Type, selecione a opo Class Na opo Name, digite .titulo1 MUITO IMPORTANTE: o nome de um estilo tipo classe deve comear com ponto (.)

5. Defina as propriedades do estilo conforme figura abaixo e clique no boto OK:

6. Para aplicar o estilo no texto Titulo1, coloque o cursor no texto e selecione a tag p atravs do tag selector

7. No painel Properties, selecione na opo 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 prximo tutorial, aprenderemos a criar estilos avanados para controlar bordas e campos de formulrio. Dvidas, sugestes, escreva para mim roberto@classroom.com.br At a prxima!

Utilizando CSS no Dreamweaver MX2004 - Parte 3

Nesta terceira parte do tutorial vamos detalhar a utilizao do CSS em formulrios HTML. Vamos aprender:

Formatar cor de fundo, fonte e espaamento em campos de formulrio Definir estilos para botes de formulrio

Vamos comecar formatando os campo do formulrio. Podemos criar classes de estilos e aplicar e/ou redefinir o estilo default das tags de formulrio. A segunda opo parece mais apropriada na maioria das vezes. Clique aqui para download dos arquivos utilizados nesta parte do tutorial. Assista a animao 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 opo CSS Styles para abrir o painel Design na lateral Observe que a folha de estilo estilo_form.css j est vinculada ao documento. 3. Vamos criar um estilo tipo redefinio para as tags de formulrio: input => campo de texto, boto textarea => caixa de texto select => menu dropdown Na barra de status do painel, clique no boto New CSS Style

4. Na janela New CSS Style, na opo Define in, selecione o estilo_form.css Esta opo que define no Dreamweaver se o estilo ser definido somente para o documento ou se estar disponvel em um arquivo externo (estilo_form.css) para que possa ser compartilhado pelos documentos do site. Na opo Selector Type, selecione a opo Advanced Na opo Selector, digite input, textarea, select

5. Na categoria Type, configure o estilo de texto para os campos de formulrio: Font => Verdana, Arial,.. Size => 10 Color => #000099

6. Na categoria Background, configure a cor de fundo dos campos de formulrio: Background color => #F0F0FF

7. Clique no boto OK e verifique as alteraes imediatas j que redefinimos o estilo dos campos de entrada (input, textarea e select). Faa um preview no navegador (F12). O Dreamweaver no exibe todos os estilos dentro do ambiente de autoria

Vamos criar agora um estilo para controlarmos a aparncia do boto do formulrio. Como a tag que define o boto a tag input, a mesma que define um campo texto, precisaremos criar um estilo tipo classe e aplic-lo ao boto. 1. Na barra de status do painel Design CSS, clique no boto 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 (no esqueca do ponto na frente - sintaxe obrigatria para estilos tipo classe)

3. Na categoria Type configure somente as diferenas 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 boto (padding) que controla a distncia entre a borda e o contedo interno (texto) Padding Right => 20 pixels Padding Left => 20 pixels

6. Na categoria Border, defina o estilo, espessura e cor da borda do boto Style => groove (experimente os outros "sabores" ...) Width => 2 pixels Color => #FFCC00

7. Clique no boto OK. Agora vamos aplicar o estilo tipo classe no boto. Selecione o boto e no painel de propriedades, na opo Class, selecione o estilo bt_form

8. Faa 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 prximo tutorial, aprenderemos a criar estilos avanados para controlar espaamento, bordas e fundo em tabelas. Dvidas, sugestes, escreva para mim roberto@classroom.com.br At o prximo!