Fireworks

Dicas, links e sites úteis sobre / em / para / de Fireworks

Galeria de fotos no FWInserindo Flash no FireWorks

Precisa de aulas de FireWorks ou serviços em webdesign, no Rio de Janeiro (RJ)? Entre em contato com Wallace Vianna, designer.

Outros tutoriais na internet sobre o Fireworks:

Pesquisa Google • WMonline

Criando galeria de fotos no Fireworks CS4

Objetivos:

criar uma galeria de fotos em HTML e imagens, no Fireworks cs4, a partir de imagens

Pré-requisitos:

Curso de Fireworks básico e informática básica

1. Crie uma pasta com as imagens que utlizará em sua galeria (p.ex.: Documentos/galeria1-fotos)

Neste exemplo as fotos serão:

800px-Track_cycling_20055.jpg,

197160232_7ccfa88c9c.jpg,

3190974467_c3eff7517f.jpg,

3639164770_2468154735.jpg,

3639175258_32ff4d9e49.jpg

2. Crie uma pasta em seu computador (ou mídia removível)  onde a galeria ficará armazenada (p.ex.: Documentos/galeria-rodas-radicais)

Obs.: Você pode criar mais de uma galeria ao mesmo tempo; basta criar mais de uma pasta com fotos (p.ex.:

Documentos/galeria2-fotos

Documentos/galeria3-fotos)

3. Abra o Fireworks, va ao menu Commands/Comandos > Create slideshow/Criar galeria de fotos

4.  No quadro Files to process/Arquivos para processar clique no botão “+”/add an album/adicionar um álbum para adicionar fotos a um álbum

Obs.: você pode adicionar fotos de mais de uma pasta, sendo que cada pasta será um álbum.

5. No quadro Files to process/Arquivos a processar escolha o botão “…” ou a opção Custom/Personalizar

7. Ao selecionar o álbum (neste exemplo, Galeria1-fotos) a relação de imagens surge abaixo.

Obs.: se adicionar mais de um álbum/pasta de fotos, mais de uma relação será apresentada em Albuns/Álbuns e Images/Imagens.

8. No painel Album book properties/propriedades do livro de álbum você define

– um title/título para seu conjunto de fotos (neste exemplo, Rodas Radicais),

– uma descrição (neste exemplo, “Dias 1 e 2“)

– o formato na lista “Player” (neste exemplo, Sliver silver, formato Flash).


9. Nos painéis seguintes você pode configurar as características de cada álbum (caso crie mais de um):

– Album properties/Propriedades do álbum: uma descrição para cada álbum de fotos

– Captions/Legendas: legendas para as fotos do(s) álbum(ns)

– Filters/Filtros, efeitos (brilho, contraste) para as imagens

– Slideshow Properties/Propriedades de exibição de fotos: intervalo de tempo e transição de fotos

10. No último painel, Expórt options/Opções de exportação estão definidas as configurações da galeria (tamanho da fotos, miniaturas, etc).

Vá na opção Export Path/Pasta de exportação e escolha a pasta onde a galeria será exportada (neste exemplo,  Documentos/Galeria-rodas-radicais).

Clique no botão Create para criar a galeria.

Ao final, marque a opção Launch slideshow in browser/Abrir galeria no navegador e clique em Done/Concluído para ver a galeria.

Inserindo Flash no Fireworks

Pré-requisitos:

Curso de Fireworks

ou saber:

– criar fatias

– editar propriedades de fatias

– exportar layouts do Fireworks para HTML e imagens

– exportar layouts do Fireworks coo gif animada

Inserindo Flash no Fireworks com iframe

Vamos inserir Flash em layout do Fireworks usando Iframe pois é a maneira mais simples de realizar essa tarefa, além de permitir que você aprenda uma segunda técnica para inserir mídia em um HTML do Fireworks.

Criando a animação Flash

Abra um filme (arquivo) do Flash com uma animação já existente (neste exemplo com o nome banner1.swf, p.ex), ou crie uma animação nova, com 300 x 250 pixels. Salve como banner1.fla.

baixe um exemplo da animação (gif) daqui.

Publique a animação, para gerar os arquivos banner1.html e banner1.swf.

Removendo as margens do HTML de sua animação

Para que a sua animação não apareça com as margens “padrão” do HTML, vamos removê-las do código HTML.

  • Abra o HTML de sua animação (banner1.html) no Dreamweaver (ou no Bloco de notas)
  • Remova as bordas da página HTML:

– No Dreamweaver: indo no painel Properties/Propriedades > Page properties/Propriedades da página e digitando o valor 0 (zero) em todas as margens (Left/Top/Right/Bottom Margin)

ou

  • – No bloco de notas: vá a tag/marcação <head> </head> e acrescente código de modo que fique assim:

<head>

<title>nome da página</title>

<style>

<!–

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

–>

</style>

</head>

Definindo página para exibir a animação Flash

Desenhe um retângulo no mesmo tamanho da sua animação (300 x 250 pixels) ou aproveite o retângulo existente (de 320×240 px), redefinindo seu tamanho.

  1. Crie uma fatia neste banner retangular, clicando com o botão direito do mouse e escolhendo a opção Insert Retangular slice/Inserir fatia retangular.
  2. Com a fatia quadrada selecionada, vá ao painel Properties/Propriedades e escolha na opção Type/Tipo, HTML
  3. Clique no botão Edit
  4. Você está visualizando as propriedades da fatia que você criou

Criando o iframe (página html dentro do layout)

Vamos criar o código para exibir o Flash em nosso layout do Fireworks: pode usar o Dreamweaver ou o Bloco de Notas de seu sistema operacional.

  • crie uma página HTML nova
  • No Dreamweaver vá ao painel Code/Código;  ou no Bloco de notas de seu computador, comece a digitar o código do Iframe (sem quebra de linha)

Obs.:

Width = largura do iframe, em pixels

Height = altura do iframe, em pixels

frameborder = borda do iframe (0 = sem borda; 1 = com borda)

Scrolling = barras de rolagem do iframe (no = sem barras; yes = com barras)

Aplicando código Iframe em layout do Fireworks

  • Copie esse código e volte ao Fireworks
  • Cole o código na tela Edit HTML Slice/Editar fatia HTML, sem espaços nem quebras de linha entre as tags/marcações

  • Ok e salve a página
  • Para ver a animação, exporte seu layout novamente, como HTML e imagens.

….

2 Comentários (+adicionar seu?)

  1. Cesar
    nov 23, 2010 @ 04:31:06

    Valeu !!!!!!!! estava procurando essa interação de fireworks flash ! logo estará aplicado !!

    Responder

  2. Trackback: Tutoriais Web 3.0 » Criando galeria de fotos no Fireworks CS4

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: