Fireworks: como criar um banner animado

Olá nesse tutorial vou estar ensinando com criar no Fireworks um banner animado, fácil de fazer e bem interessante.
Nível: Básico
Softwares: Fireworks

Bom é possível criar um banner no Fireworks por causa dos Frames ou States que existe no software.
Vamos começar:
1° passo- abra seu Fireworks e crie um novo documento com as seguinte medidas 468px, 60px (medidas padrão de um Full banner)crie um retângulo com o tamanho exato do documento que você criou é interessante você adicionar uma borda preta ou de qualquer outra cor, para destacar as marcações.

2° passo- Escolha um tema em especial para começar a desenvolver o banner, no meu exemplo de um banner que é utilizado no meu site vou usar imagens e textos relacionados a avanço tecnológico, faça com sua necessidade. Bom será preciso agora criar os Frames(states) e em cada um deles será colocado uma imagem ou texto diferente dos demais. No meu exemplo vou criar 8 frames e cada um deles com uma imagem, texto e cor diferentes para que o visitante consiga visualizar a animação.
Então defina qual será o 1° frame a primeira imagem que vai aparecer no banner.

3°passo- após definir o 1° frame, qual será a imagem de abertura da animação, clique em Frames(states) no Fireworks e quando abrir, basta clicar com o botão direito do mouse sobre o frame 1 e depois na opção Duplicate frame, em seguida vai abrir uma caixa de dialogo onde você pode escolher quantos frames deseja criar, no exemplo vou criar 7, lembrando que ja foi criado um, então o numero que você escolher será os novos frames, por exemplo quero um banner com 8 frames, vou criar apenas 7. Selecione a opção “After current “.

4° passo- depois de criar os frames da animação, em cada frame criado você coloca uma imagem, texto diferente para aparecer uma animação, faça isso em todos, mude cores de fundo, tamanho e cor da fonte, utilize imagem atrativas e com cores de destaque, mais isso fica a gosto de cada, use a criatividade.

5° passo- Bom agora que os frames já estão pronto, cada um com informação e imagem diferente dos demais , será necessário configurar o tempo de transição, ou seja o tempo que ira trocar as imagens, essas alterações são feitas no painel frame(states) observe:

vai aparecer dessa forma seu painel frame, bom agora vamos editar o tempo de cada frame, sobre seu frame 1 clique 2 vezes no numero 7 que vai aparecer automaticamente no frame e coloque o tempo que deseja. Vale a pena frisar que quanto menor o valor dos numero, mais rápido será a apresentação dos frames . Eu utilizo o tempo entre 200 a 500 , é bom saber que 100 corresponde a 1 segundo, então vou colocar aqui no exemplo 500 em cada frame, ou seja será de 5 segundos a transição das imagens que compõem o banner animado. Visualize a animação no seu navegador para ter idéia de como esta ficando seu banner, de um F12.

6°passo- Agora vamos exportar o banner do Fireworks, use o atalho(ctrl+shift+X) “Export preview” , vai abrir uma nova tela, na caixa format, selecione a opção “Animated Gif” , que são as imagens gifs animados.

já na guia animation você poderá visualizar todos os frames e os tempos. Na hora de salvar coloque um nome ao banner e na opção Export , coloque HTML and imagens e depois só salvar. Esta pronto seu banner feito todo no Fireworks e exportado com as imagens e o código HTML, agora é só escolher o melhor lugar no seu site e adicionar ou as imagens somente ou inserir o HTML do Fireworks.
Bom é isso até mais amigos do MXstudio, qualquer duvida basta deixar um comentário, obrigado e até a próxima. Não deixe de acessar meu site e conferir novidades na área de TI www.brunohenris.com abraços.

Escrito por Bruno Henris on abril 14, 2011. Arquivado em Fireworks. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

6 respostas a Fireworks: como criar um banner animado

  1. Cadê o resultado do banner que tava servindo como tutorial? :}
    É tão legal pra ver como vai ficar o que você procura fazer igual.
    Mas de boa. Eu não consegui porque o meu pc ta lotado de coisa, memória cheia ta ligado? Mas qualquer resposta seria bom.
    Beijo

  2. Olá Júlia, obrigado pelo comentário, bom eu usei esse banner nesse site http://www.brunohenris.com , la você pode ver melhor o resultado final do banner. Não tem segredo para fazer esse banner é bem simples, basta seguir o tutorial, garanto que seguindo o passo a passo você vai conseguir obter bom resultado, bom no seu caso pode ser sim algo relacionado a memória cheia,mais enfim tente refazer ele seguindo os passos e se não conseguir me envie suas duvidas por e-mail artedesign@brunohenris.com ficarei feliz em ajudar.
    Obs: talvez o problema esteja acontecendo na hora de exportar do Fireworks, lembre-se de escolher o formato ANIMATED GIF , só assim o banner vai funcionar.
    beijos e qualquer duvida me envie um e-mail.

  3. Guilherme Heiderichi

    Aew Bruno valeu pelo tutorial!!

    Gostaria de deixar minha opinião sobre seu trabalho, eu vi seu portfolio e tals, e percebi que você usa muitas cores, e além disso usa cores muito fortes. Não sou um nenhum grande entendedor de equilíbrio de cores, mas acho que seria melhor você usar cores mais encaixadas, principalmente nos banners, pois as vezes ficam até ilegíveis.

    As cores preto e vermelho são a base do seu site, e vc usa também as cores: cinza, branca (textos), e verde (links, que foge totalmente do equilíbrio).

    Espero poder te ajudar com essas dicas, também estou estudando para conseguir manusear essas ferramentas de criação web.

    Saiba que mais tutoriais são bem-vindos!!

    abraçosss

  4. Bom dia,

    Olá Guilherme, obrigado pelo comentário e pelas dicas também,
    sempre encontrei dificuldade nessa armonização de cores, estou estudando muito sobre isso;
    e em breve vou lançar um novo portfólio, agora com as cores mais equilibradas;
    É muito bom cara receber essas criticas, vamos dizer assim criticas construtivas, onde a gente pode estar
    sempre melhorando nosso trabalho.
    Obrigado mesmo parceiro, se precisar de alguma coisa só me enviar um -email.
    abraços e boa semana ai.

  5. Bruno, bom dia.

    Quando a gente faz os banners com imagens como paisagens, fotos, e também com degradê, ao escolher a opão GIF ANIMADO para o banner funcionar, as imagens ficam com péssima qualidade, todas manchadas.
    Tem como corrigir isso?

    Um abraço!

    Obrigada.

    Maria Luiza.

  6. Bom dia, Maria.

    olha infelizmente a opção GIF ANIMADO deixa mesmo algumas imagens, degradê com uma péssima qualidade;
    não são todas. Por isso para fazer um banner animado no Fireworks é necessário escolher bem suas imagens; Para fazer um banner onde as imagens
    tenha uma melhor qualidade eu sugiro fazer um banner no Flash, onde a qualidade das imagens vão ser mantidas sem problema algum, aqui mesmo no MXStudio tem tutoriais que ensina a criar banners animados em Flash. Sobre como melhorar as imagens no Fireworks confesso desconhecer como, mais uma dica é importante ter alguns cuidados da hora de criar o banner e ficar atenta as opções na hora de exportar o banner do Fireworks, eu fiz um banner no meu site em GIF ANIMADO e as imagens tiveram uma boa qualidade, tome cuidado então na hora de exportar o banner e também ao escolher as imagens que iram fazer parte dele.
    Obrigado pelo comentário, mais alguma duvida me envie um e-mail :artedesign@brunohenris.com ficarei feliz em ajudar. Um abraço.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>