sexta-feira, 25 de julho de 2008

0 Como Fazer Um Banner Animado

ABRA O FIREWORKS
CrieUM NOVO DOCUMENTO , através do menu Arquivo(FILE), Novo, um novo arquivo com as seguintes configurações:
TAMANHO PADRÃO PARA BANNER DE PARCERIA
» Largura: 120 pixels.
» Altura: 60 pixels.
» Resolução: 72 dpi.
» Cor da tela: Branco.


WWW.DICASPARABLOGGER.BLOGSPOT.COM

A idéia de se criar um banner pelo Fireworks é o mesmo que a no Flash.

Vamos Trabalhar com quadros "ou frames" para a animação.

Criamos a area d0 primeiro quadro, o qual servirá como um modelo para os demais.

Ao criar o novo documento, terá sua área de trabalho da seguinte forma

WWW.DICASPARABLOGGER.BLOGSPOT.COM

Agora vamos fazer a Animação

Acesse o menu Janela (windows), Molduras (Flame) ou o atalho do teclado Shift+F2.



WWW.DICASPARABLOGGER.BLOGSPOT.COM

Surgirá a janela Molduras (flames)

Photobucket

Nesta janela visualizamos as molduras (ou flames) criadas e logo a direita temos um número, neste caso o 7.

Este número representa a velocidade na qual a animação será executada.

Portanto, mude este valor para 100 à 160 (fica ao seu criterio pois é a velocidade dos flames eu uso 110).

Para mudar tal valor, basta dar dois cliques sobre o numero 7.

Abrirá uma janela onde deve informar o novo valor desejado.



Photobucket

Agora vamos criar os outros quadros( OU FLAMES). A mais fácil é clicar sobre a Moldura 1 e arrastar até o botão Moldura nova / duplicada, aqui representado pelo sinal de MAIS.

CADA FLAME VAI RECEBER UMA IMAGEM DIFERENTE, PARA QUE A CADA MUDANÇA DE FLAME, O BANNER FIQUE ANIMADO,

ENTÃO SE O SEU BANNER TIVER 3 IMAGEM



VOCÊ DEVERA CRIAR 3 FLAMES

CADA FLAME VAI RECEBER UMA IMAGEM

Photobucket



WWW.DICASPARABLOGGER.BLOGSPOT.COM WWW.DICASPARABLOGGER.BLOGSPOT.COM

Para inserir a imagem do Flame, clique no 1 Flame (ou moldura), vai em Arquivo, Importar, então importe a primeira imagem.

DEPOIS DE TER COLOCADO TODAS AS IMAGENS NO SEUS DEVIDO FLAME

Nosso banner está pronto!

Só falta exportá-lo para conferir o resultado.

Acesse o menu Janela (WINDOWS), Otimizar ou o atalho do teclado F6.

WWW.DICASPARABLOGGER.BLOGSPOT.COM

Altera a propriedade Exportação de formato de arquivo para GIF animado.

Acesse o menu Arquivo, Exportar... ou o atalho do teclado Ctrl+Shift+R

WWW.DICASPARABLOGGER.BLOGSPOT.COM

Na janela Exportar será aberta.

Escolha o diretório que deseja salvar seu banner e no campo Nome do coloque banner.

Salve como SOMENTE IMAGEM

WWW.DICASPARABLOGGER.BLOGSPOT.COM

PRONTO O BANNER ESTA FEITO

ESSE MEU BANNER FOI FEITO ASSIM



0 Tabela De Cores

Para usar esses códigos basta colocar o símbolo # na frente do código.

0 Menu Lateral

  • Menu na posição da página, onde estiver o menu irá junto
  • Suporte para carregamento de links em outra moldura ou janela
  • Suporte para várias colunas em cada linha
  • Totalmente personalizável: cores, dimensões, etc.

1º passo:Baixe esse arquivo (menu.zip). Salve em algum site de hospedagem (GooglePages,Geocitie, etc...) os 2 arquivos contidos nele : "ssm.js" e "ssmItems.js".

2º passo:Pegue o codigo abaixo e cole no seu Template(modelo) logo após a tag <HEAD> e salve.
Substitua url pelo endereço que vc espedou .




Todas as configurações são feitas dentro do arquivo "ssmItems.js". Abra o arquivo usando qualquer editor de texto (bloco de notas) para editar o menu de estilo, e as ligações indicadas. Você pode adicionar quantos links quiser, mudar a cor, tamanho, velocidade, o lado da página em que ele aparece, etc... Lembre-se que cada modificação nesse arquivo você precisa salvá-lo novamente onde você o hospedou.
Pronto.


COFIGURE O MENU LATERAL

--menubgcolor="coloque outras cores senão ele não aparece"
--menuWidth=a largura do menu quando abrir(aconselho a colocae 150; // Must be a multiple of
10! no quotes!!
--hdrFontFamily="tipo das letras para aqules que ñ são links";
--hdrFontSize="tamanho das letras para aqueles que ñ são links";
--hdrFontColor="cor das letras para aqueles que ñ são links";
--hdrBGColor="#cor do fundo da aqueles que ñ são links ";
--hdrAlign="é onde aqueles que ñ são links vão ficar posicionado na barra horizontal";
--hdrHeight="é tamanho da aqueles que ñ são links ";
--linkFontFamily="tipo de fonte dos links";
--linkFontSize="tamanho da fonte dos links";
--linkBGColor="cor do fundo dos links";
--linkOverBGColor="#a cor quando passa sobre os links";
--linkAlign="alinhamento dos links na barra horizontal";
--barBGColor="#cor do fundo da barra vertical";
--barFontFamily="tipo de letral da barra vertical";
--barFontSize="tamanho da letra da barra vertical";
--barFontColor="cor das letras da barra vertical";
--barWidth=a largura da barra vertiacal ; // Must be a multiple of
10! no quotes!!; // no quotes!!
--barText="titulo da barra vertical"; // tag supported. Put exact html for an image to show.
--// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["titulo(não tire essa linha senão não aparece o menu lateral"] //create header
ssmItems[1]=["titulo do link", "endereço do link", ""]
ssmItems[2]=["titulo do link", "endereço do link", ""]
ssmItems[3]=["titulo do link", "endereço do link", ""]
ssmItems[4]=["titulo do link", "endereço do link", ""]
ssmItems[5]="endereço do link", "endereço do link"]
ssmItems[6]="endereço do link", "endereço do link"]

ssmItems[7]=["titulo do sem link", "endereço do link", "", 1, ""] //create two column row
ssmItems[8]=["titulo do link", "endereço do link", ""]

ssmItems[9]=["titulo(não tire essa linha senão não aparece o menu lateral", "", ""] //create header
ssmItems[10]=["titulo do link", "endereço do link"]
ssmItems[11]=["titulo do link", "endereço do link"]
ssmItems[12]=["titulo do link", "endereço do link"]

buildMenu();

Dicas:

--se quiser sem link faça assim:["titulo(não tire essa linha senão não aparece o menu lateral"] //create header

--se quiser fazer duas em uma só faça assim:
ssmItems[7]=["titulo do link", "endereço do link", "", 1, "no"] //create two column row
ssmItems[8]=["titulo do link", "endereço do link", "",1]

não coloque a mesma cor no fundo das barra ,na cor dos não links e links.
 

DGP DESIGN Copyright © 2011 - |- Template created by O Pregador - |- Powered by Blogger Templates