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 etapa ainda 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 - Developement 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.