Você está aqui: Principal » Lista Completa de Tutoriais

Sobre este Tutorial

Autor:	Fábio Caetano de Almeida
Data:	26-09-2005
Categoria:	Design
Assunto:	FIREWORKS - BÁSICO
Visitas:

BANNER ANIMADO

E aí galera, tudo em cima com vocês?! Animados para o tutorial desta semana?!

Dediquei este tutorial a um assunto muito tratado e discutido na ferramenta Fireworks. Trata-se da criação de banner animado. Isto mesmo, podemos através do Fireworks criar animações para utilizar em nossos projetos voltados para a web.

Estes tipos de documentos são, normalmente, desenvolvidos utilizando o Macromedia Flash. Porém, irei mostrar que é possível se trabalhar com animações utilizando o Fireworks.

Chega de tanto assunto. Vamos à prática!

Então mãos ao mouse!

1) Crie, através do menu Arquivo, Novo, um novo arquivo com as seguintes configurações:

» Largura: 468 pixels.

» Altura: 60 pixels.

» Resolução: 72 dpi.

» Cor da tela: Branco.

Obs: Criamos o banner utilizando esta medida, 468 x 60 pixels, por ser o padrão usado para web atualmente. Mas nada te impede de criar um banner com outras medidas.

2) A idéia de se criar um banner pelo Fireworks é basicamente a mesma do Flash. Trabalhamos com quadros (ou frames) ao desenrolar da animação. Criamos o primeiro quadro, o qual servirá como um modelo para os demais. Do segundo quadro em diante iremos modificar apenas o texto.

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

4) O primeiro passo é a criação do retângulo que será nosso fundo. Selecione a Ferramenta Retângulo e crie um retângulo com as seguintes configurações:

» Largura: 468 pixels.

» Altura: 60 pixels.

» Cor de preenchimento: Cinza escuro (#999999).

» Posicionamento do retângulo: X: 0 e Y: 0.

5) Vamos começar a criar o layout em si de nosso banner. Comece inserindo sua logomarca pessoal ou uma imagem qualquer. Utilize o comando Arquivo, Importar... ou o atalho do teclado Ctrl+R.

6) Veja como ficou após a inserção da logomarca:

7) Selecione a Ferramenta Texto e digite a seguinte frase: DESENVOLVIMENTO WEB. Configure seu texto da seguinte maneira:

» Fonte: Arial.

» Tamanho: 20.

» Cor de preenchimento: Branco.

» Estilo: Negrito.

8) Para dar uma incrementada no texto, vamos inserir o efeito de sombra. Acesse o menu de efeitos, representado pelo sinal de adição (+), e selecione a opção Sombra e brilho, Aplicar sombra.

9) Configure o efeito Aplicar sombra da seguinte maneira:

» Distância: 4.

» Cor da sombra: Preto (#000000).

» Opacidade: 65%.

» Suavidade: 5.

» Ângulo: 315.

Veja o resultado após a aplicação do efeito:

10) Acesse o menu Janela, Molduras ou o atalho do teclado Shift+F2.

11) Surgirá a janela Molduras.

12) Nesta janela visualizamos as molduras (ou quadro) 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. Este valor, que é lançado por default, faz com que a apresentação seja apresentada muito rapidamente. Desta forma o usuário não iria conseguir distinguir os quadros de nossa animação. Portanto, mude este valor para 160. Para mudar tal valor, basta dar dois cliques sobre o mesmo. Abrirá uma janela onde deve informar o novo valor desejado.

13) Agora vamos criar os outros quadros. Temos algumas formas de se fazer isso. A mais fácil é clicar sobre a Moldura 1 e arrastar até o botão Moldura nova / duplicada, aqui representado pelo sinal de adição. Veja:

14) Desta forma, teremos uma nova moldura. Esta por sua vez será idêntica a primeira e terá as mesmas propriedades, pois a duplicamos.

15) Selecione a Moldura 2, na janela Molduras, e modifique apenas o texto. Insira a frase: SITES DINÁMICOS.

Dica: para manter o mesmo efeito aplicado na Moldura 1, selecione a Ferramenta Texto, faça a seleção da frase, aperte a tecla Delete e escreva a nova frase. Assim, seu texto irá admitir as mesmas configurações.

16) Duplique novamente esta camada para criarmos a Moldura 3. Acompanhe o passo 13 para duplicá-la.

17) Selecione a Moldura 3 e digite a seguinte frase: PROFISSIONALISMO E COMPETÊNCIA.

18) Crie mais duas molduras (Moldura 4 e Moldura 5). Insira os seguintes textos: SOLICITE SEU ORÇAMENTO e Acesse: www.fabio.trampos.net, respectivamente.

19) Pronto. Nosso banner está pronto! Só falta exportá-lo para conferir o resultado. Acesse o menu Janela, Otimizar ou o atalho do teclado F6.

20) A janela Otimizar será exibida. Altera a propriedade Exportação de formato de arquivo para GIF animado.

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

22) A janela Exportar será aberta. Escolha o diretório que deseja salvar seu banner e no campo Nome do coloque banner.

23) Para visualizar o banner, você pode executar a partir do próprio Fireworks, através da tecla F12 ou acessar o diretório no qual salvou a animação e acessar por lá (clicando duas vezes sobre o arquivo).

Veja como ficou o exemplo criado neste tutorial. Clique aqui!

É isso aí galera! Chegamos ao final de mais um tutorial da série Fireworks. Espero que tenham gostado e que possam tirar bastante proveito desta técnica no seu dia a dia. Se tiver dúvida(s), entre em contato comigo através do e-mail webdesigner.pro@pop.com.br

Para desenvolvimento de Sites, Layout, Apresentações, Flyes, Banners, Identidade Visual, Diagramação, Vetorização e Serviços Gráficos em geral, acesse: http://www.fabio.trampos.net/ e solicite seu orçamento. Profissionalismo sempre!

Até a próxima!

Um cordial abraço a todos,

Fábio Almeida

LISTA DE TODOS OS TUTORIAIS DISPONÍVEIS

LIVROS CAMPEÕES DE VENDA NO SITE

Cursos Online com Certificado e Suporte à Dúvidas

CURSOS ONLINE COM CERTIFICADO - INDICADOS POR JÚLIO BATTISTI EM PARCERIA COM BRAVA CURSOS
INFORMÁTICA
Curso de Digitação Formatando e Instalando Computador Excel para Iniciantes Curso Compre no Ebay Informática Educativa Curso de Linux	Segurança na Internet Montagem e Manutenção de Computadores Curso Remoção de Vírus Curso Ubuntu Instalação Linux - Ubuntu
AdministraÇÃo
Gestão de Projetos e Empreendedorismo Benefícios da Previdência Curso HP 12C Matemática Financeira Curso Análise Salarial	Processo de Elaboração de Questionário Excelência no Atendimento ao Cliente Logística do Transporte Licitações e Contratos Administrativos
Profissionalizante
Adestramento Canino Como fazer pesquisa Científica e Monografia Curso de Corte e Costura Supervisor de Telemarketing Balconista de Padaria Curso Educação Infantil	Recepcionista e Secretaria Velas Artesanais Relações Interpessoais Curso de Arbitragem Bullying e Cyberbullying Capacitação de Tutores em EAD
EstÉtica
Curso de Massoterapia Curso de Depilação Drenagem Linfática Curso de Maquiagem Limpeza Turbinada de Pele	Alisamento e Relaxamento Capilar Curso de Etiqueta SPA de Vinhoterapia na Estética Facial Curso de Shantala Introdução à Colorimetria Capilar
Pessoal
Curso de Caligrafia Memorização Chefia e Liderança Curso Falar em Público Curso Bases Neurológicas Leitura Dinâmica Planejamento de Projeto Pessoal Reforma Ortográfica	Como Passar em Concursos Públicos Direção Defensiva Administração do Tempo Curso de Redação Curso de Meditação Como Passar no Vestibular Atualização Gramatical
NegÓCIOS
Relações Humanas e Ética Profissional Marketing e Vendas Diretas	Persuasão em Vendas
Entretenimento
Curso de Mágica
SaÚde
Primeiros Socorros Curso de Fitoterapia Curso de Aromaterapia Medicina Alternativa Plantas Medicinais	Técnicas básicas de Enfermagem O Trabalho do Agente Comunitário de Saúde Ergonomia - Postura Correta em Frente ao Computador Ética Profissional - Ênfase em Radiologia Adolescência: Visão Saúde do Assunto
Meio Ambiente
Curso Gestão Ambiental Jardinagem e Paisagismo	Curso de Reciclagem Curso de Bonsai
MÚsica
Curso de Violão
NutriÇÃo
Higiene e Manipulação de Alimentos Congelamento de Alimentos	Culinária Básica Culinária Intermediária
RelaÇÕes Humanas
Curso Gestão de Pessoas Departamento Pessoal Desenvolvimento Pessoal Empresarial Curso de Telemarketing Curso Dinâmica em Grupo Rescisão Contrato de Trabalho Folha de Pagamento na Prática	Atendimento ao Cliente Adm. da Empregada Doméstica Curso de Homolognet Recursos Humanos - Férias Recursos Humanos - 13° Salário Registro de Empregados
Web Master
Curso de HTML Curso de WordPress	Curso de HTML5
Designer GrÁfico
Curso de Corel Draw Efeitos Especiais com InDesign CS5	Efeitos Tipográficos com InDesign CS5

CURSO EM FORMATO DE VÍDEO-AULA

EXEMPLOS PRÁTICOS PASSO A PASSO COM SOM E IMAGEM

Clique no curso para informações detalhadas

Curso

Duração

Informações

ACCESS

Vídeo Aula: Access 2007 - Consultas - Curso Completo e Prático

4:30h

LOJA DE LIVROS

VÍDEO-AULAS

E-BOOKS/CURSOS

CURSOS ONLINE COM CERTIFICADO

CURSOS COMPLETOS EM CD

CD-01

CD-02

CD-03

CD-04

CD-05

CD-06

CD-07

CD-08

CD-09

CD-10

CONTATO

Você está aqui: Principal » Lista Completa de Tutoriais

Sobre este Tutorial

BANNER ANIMADO

:: Tutoriais Relacionados

CURSOS
COMPLETOS EM CD