Como fazer um site completo em Flash

Como fazer um site completo em Flash

(Parte 1 de 6)

Desenvolvendo um site completo em Flash - Parte 1O 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.

Desenvolvendo um site completo em Flash - Parte 2O 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".

(Parte 1 de 6)

Comentários