BÁRBARA TOSTES (64 pts)

GUILHERME SCHEIBE (49 pts)

DANIELA PIRES (86 pts)

DAAFY (55 pts)

JOTA LAGO (40 pts)

SASHA GUDEY (235 pts)

RICARDO FIGUEIRA (33 pts)

AMAURY BENTES (123 pts)

ZECA BALA (45 pts)

RODRIGO AMARAL (56 pts)

NETO LEAL (116 pts)

DENIS CARAVALHO (85 pts)
Treinamento PontoFlash de Flash e ActionScript

Quero fazer uma função que duplique movieclips e defina suas propiedades.

Como acessar o valor de um campo de texto input via teclado?

Como faço para ler o conteúdo de uma variável do Flash com JS?

Como fazer um objeto isqueiro acender quando arrasto sobre outro (fogão)?

Função chamada createFunctionCall, que permite criar uma função para executar uma outra função com certos parâmetros.

Como fazer um menu que se move na horizontal e diminui no mouse over?

Como desabilitar um botão quando eu carrego o swf e habilitar quando descarregar o swf.

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

Quero saber mais sobre interação Flash X banco de dados (sql mysql etc).

Como importar um texto no Flash com as tags de negrito do HTML?

Queria mandar um aviso no caso do mouse não ser movido por cinco segundos.

Como faço para validar data de nascimento num formulário?

Alguém sabe um modo de converter um número com várias casas após a vírgula para um com apenas 3?

Posso alterar qualquer formatação de um campo de texto através de ActionScript?
Busca em Textos no Flash MX

Looping.

Controlando um swf que está em outro frame

Detecção do FlashPlayer.

Entendendo como funciona um preloader. Primeira parte.

Novas propriedade de botões no FireworksMX

Formulário de e-mail com ASP.

Integração Flash X ColdFusion.

Menu deslizante.

Logo com aparência 3D - Fireworks

Efeito lente (máscara e zoom)

Gerando XLS a partir de ASP
Motionguidemask2

Imageviewer

Tocha

Fogos rastro

Drag MC 1

Ondas

Preloader marquee

Foto com balão

Customcursor

Texto html

Folha dobrada

Textos animados
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