AUTOR DESCONHECIDO (100 pts)

RODRIGO AMARAL (56 pts)

ILVA RUDEV (90 pts)

NETO LEAL (116 pts)

EDUARDO CARREGA (150 pts)

AMAURY BENTES (123 pts)

NILTON BICALHO (61 pts)

FLASHGURU (155 pts)

DAAFY (55 pts)

LUI FERNANDO (151 pts)

STICKMAN (155 pts)

JOTA LAGO (40 pts)
Treinamento PontoFlash de Flash e ActionScript

É necessário criar um objeto para usar o prototype?

Preciso criar um sistema que busque no banco de dados e retorne ao Flash.

Como fazer uma linha criada via métodos de desenho ir crescendo da direita para a esquerda?

Cmo coloco um arquivo flash 800 x 600 em fullscreen no browser?

Quero fazer um texto com scroll (barra de rolagem) contínua.

Como gerar uma seqüência randômica sem repetir os valores?

Entrada diferente numa segunda visita ao site.

Tem como criar um cookie para limitar a entrada do usuário a apenas uma vez por dia?

Como fazer uma impressão (print) somente em um determinado frame no Flash?

FlashDecompiler

Como faço para detectar a passagem de 1 minuto no meu filme?

Como inserir um flash numa pagina html de sem background ou transparente?

Tenho tido problemas em puxar dados de XML para dentro do Flash 5.

Como defino uma pausa (delay) em meu filme?
Detecção do FlashPlayer.

Janelas com abas.

Carregando SWFs em diferentes níveis.

Macromedia Flash - Tendências

Como criar um site totalmente dinâmico em Flash MX

XMLSockets

Abrir PopUp no Flash com JS e ASP.

Integração Dreamweaver + Fireworks.

Cursor customizado no Flash5.

Efeito de Fogo no Photoshop

Flash e Banco de Dados.

Número randômicos sem repetições no Flash 4.
Random blocks

Rolagem dinâmica

Desenho dinâmico

Botão comutador

Magnetismo

Lineas 2

Menu Notredem

Blur

Catavento

Menu dinâmico

Airos 2

Placar
HOME | TUTORIAIS
Integração Dreamweaver + Fireworks.
por Eduardo Carrega

Qual Web designer que nunca se deparou com aquela situação contundente, com um site praticamente pronto, desenvolvido em html, com as imagens todas recortadas em tabelas, muito bem divididas e nomeadas. Derrepente seu cliente faz aquela declaração:- "eu gostei do azul... mas não dava pra ser um pouco mais clarinho?...e se fosse verde?!.", e dá-lhe web designer passando 2 dias alterando todos os blocos de imagens criados, caçando nome de imagens em tabelas, aquele trabalhão já conhecido por muitos. 

   Neste novo artigo da série Fireworking, exemplifico a utilização lógica da ferramenta de multidesenvolvimento Fireworks com o Dreamweaver ou Ultradev, com destaque à criação de imagens e inserção delas em tabelas diretamente dentro do Fireworks. Também exemplifico a exportação do arquivo para html, pós-editado no dreamweaver e implementado com behaviors e componentes java script não existentes no Fireworks.

   Logo será feita a alteração de todo conteúdo bitmap do site, mantendo as tabelas e html já alterados intactos após a troca de todas as imagens de uma forma muito simples e rápida, mãos à obra!


Vamos seguir os passos:

1) Slices:
clique aqui e baixe o arquivo para fazer simultaneamente os passos.

   Com a arte já construída no Fireworks, o procedimento agora é a criação das tabelas, que são representadas por "slices", e que vão automaticamente "repicando e otimizando" a criação das tabelas. Cada slice (fatia) tem um nome próprio. Nas próximas matérias acompanhe como ele pode ser configurado para exportar determinada fração do arquivo em jpg, outra parte em gif, outra em png, isso, num só procedimento de exportação.

 
 

2) Exportar ou publicar:
Com os slices configurados, a exportação é feita pelo comando "File/Export preview". Nessa tela agora demonstrada, o principal comando é o formato de saída do arquivo (jpg, gif...). Configure o documento de acordo com a necessidade de cores, dê sempre preferência ao formato GIF com a média de 64 cores para não sobrecarregar o arquivo, em seguida clique no botão "Export".

   Nessa última tela, temos as referências de salvamento, escolha um local de fácil acesso para o salvamento e selecione os seguintes parâmetros:

1) nome do arquivo: teste.html
2) salvar como: html and images
3) html: export html files
4) slices: export slices
5) ::Include areas without slices
6) ::Put images in subfolder

   O diretório padrão de salvamento das imagens é "images".

IMPORTANTE!: Caso nunca tenha clicado no botão "options" ao lado direito dessa janela e configurado as opções avançadas, deve fazê-lo agora para gravar algumas configurações avançadas permanetemente e EXTREMAMENTE NECESSÁRIAS, são elas:

GENERAL
   extension = .html
TABLE
   Space with = Nested Tables - no spacers
   Cell color = nada
   Contents = Non-breaking spacer
DOCUMENT ESPECIFIC
   Botão "SET DEFAULTS" (para gravar permanetemente as configurações)

   Essas configurações, modificam completamente a forma com que o documento será exportado e gerado em html. No modo original do Fireworks, ele cria pequenas imagens de 1px de espaçamento, utilizadas para controlar o tamanho das tabelas geradas, mas que tem um resultado terrível na reedição do html no Dreamweaver.

   Com as novas configurações, o problema é eliminado, são geradas tabelas puras, sem impecílios para reedição e manipulação de objetos no html.

   Clique no botão "salvar" para finalizar a exportação e NÃO FECHE O FIREWORKS.

3) No Dreamweaver:
Abra o arquivo "teste.html" gerado anteriormente...

...atribua, na imagem "fireworking", um behavior (comportamento) de "open browser window". Configure-o para abrir "teste2.html, 200px de largura e altura, nome da janela "teste2".

o evento do behavior deve ser no "onMouseUp"(quando o mouse subir).

   Salve o documento e teste o arquivo no navegador pressionando F12.

4) Trocar a cor:
Mantenha seu Browser de internet aberto, e feche o Dreamweaver. Retorne ao Fireworks, e troque a cor do fundo do trabalho à seu gosto ("Modify/canvas color").

5) Exportar novamente:
Novamente vamos Exportar o arquivo, "File/Export Preview", configure o tipo de saída de imagens. Clique no botão "Export" novamente e, na última tela, onde configura-se o local da exportação, altere os seguintes itens:

1) Salvar: selecione a pasta "images" desta vez
2) nome do arquivo: teste
3) salvar como: images
4) slices: export slices
5) ::Include areas without slices

   O que foi feito acima, é dizer ao Fireworks exportar somente as imagens recortadas nos slices diretamente dentro da pasta "images", substituindo com absoluta exatidão de nomes um número ilimitado de imagens simultaneamente.

6) O Navegador:
Na tela de seu navegador ainda aberto:

simplesmente atualize a tela (Ctrl+R) e veja o resultado.

   Uma ação que demoraria horas, não foi suficiente nem para ocupar mais do que 5 minutos de seu dia, isso foi possível graças aos recursos disponíveis no Fireworks.

   Caso queira tirar a prova, abra o arquivo novamente no Dreamweaver e constate, o botão "fireworking" ainda contém o behavior intácto.

*Hot-dicas:

a) Você pode facilmente inserir um slice sobre uma figura ou um bloco de texto qualquer, basta clicar com o botão direito sobre o item, e ir até a opção "insert slice", pronto. Rapidinho e sem sofrimento.

b) Você pode fazer o procedimento acima (inset slices) em várias imagens ao mesmo tempo, o fireworks irá lhe dar uma caixa de diálogo com a questão: "Multiples slices or single slice?", responda que é MULTIPLE que o fireworks dá conta do recado.

c) Um slice pode ser perfeitamente duplicado, basta arrastá-lo apertando o ALT.

d) O slice possui uma camada ou layer especial, é chamada de "Web Layer" e pode ser visualizada no painel Layers (window/layers), é sempre a primeira de todas, e pode também ser travada e ocultada.

e) Uma página toda dividida em layers, permite um melhor carregamento e a simulação mais rápida. Além disso, altera a sequência de carregamento habitual "de cima para baixo" para facções do arquivo, vale a pena testar!



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
0 comentário