SÁVIO PONTE (39 pts)

NILTON BICALHO (61 pts)

JOÃO NETO (78 pts)

AMAURY BENTES (123 pts)

DAAFY (55 pts)

PEDRO CLAUDIO (50 pts)

AUTOR DESCONHECIDO (100 pts)

BÁRBARA TOSTES (64 pts)

EDUARDO CARREGA (150 pts)

PANDOGO (82 pts)

ALEXANDRE PORTO (1281 pts)

RICARDO FIGUEIRA (33 pts)
Treinamento PontoFlash de Flash e ActionScript

Por problema de cache, nem sempre o Flash5 pega o último arquivo (.xml) gerado.

Preciso mudar a direção de um movimento via actionscript.

Como mandar um comando de um movieclip para um outra cena?

Visite o www.estudio.com. Como é feita a navegação desse site?

Tenho alguns arquivos em flash que gostaria de imprimir.

Vídeo no Flash - programa que fiz.

Exemplo do uso de um compontente combobox.

Como se faz um menu em cascata?

Como tornar um objeto com alpha zero quando eu clicar em um dos outros itens?

Como publicar um .SWF e fazer com que ele não mostre outra fonte?

Para que serve o ONIO SKIN?

Porque as fotos de meu site ficam horríveis quando abertas em fullscreen?

Quero fazer um preloader para um texto aberto com load variables.

Como se faz para colocar um .gif seguindo o mouse?
Event Handlers (identificadores de eventos).

Colisão

Efeito de Fogo no Photoshop

Tell Target e Linhas do tempo independentes

Logo com aparência 3D - Fireworks

Jogo da Forca (segunda parte)

GetMySQLData para Flash5 (segunda parte)

Turbine seu Fireworks

Efeito de texto esticado (stretched text).

Animate - Fireworks

Bolhas flutuantes.

Criando texto neon.
Giratoria

3d circle menu

Menu vai e vem

Texto com fade

Movimento array

Contador continuo

Menu método desenho

Drag tooltip

Botão ida e volta

Animação frame by frame

Degrade

Preload advanced
HOME | TUTORIAIS
Máscaras no Fireworks MX, o mistério!
por Eduardo Carrega

Pra começar, quem não sabe o que é mascara?

Res
:Máscara é uma forma de moldar objetos simples (como uma foto quadrada) em elementos mais elaborados, como se tivessemos recortado partes da imagem que não fossem interessantes, porém mantendo-a intacta com partes escondidas.

Cada programa mostra a máscara com um nome diferente, como o corel por exemplo que é "Power Clip", vai entender ... prefiro máscara!

No Fireworks as funções de máscara são as mais evoluídas de todos os programas para design e concepção, vou mostrar os procedimentos corretos para se obter o que quiser delas.

Pau na máquina!

Vamos ver como se faz estes exemplos abaixo:

borda e sombra
enevoada
(blur ou feather)
reticulada
(Web Dither)

1 - Borda e sombra

Comece com uma imagem na tela

Desenhe um quadro um pouco menor que o tamanho da figura

Selecione ambas as figuras pelo método de arrasto ou nas Layers se preferir

Vá ao menu Modify / Mask / Group as Mask

Parece errado mas não é

repare que na Layer, já consta os objetos como máscara e alvo, agora vamos para as configurações:

Clique sobre a máscara na Layer (objeto preto do lado direito), e em properties (ou Options no Fireworks 4) opte por Path Outline e Show Fill and Stroke.

Este procedimento foi responsável por fazer o Fireworks entender que a máscara é do tipo Vetorial (padrão Flash) e não Bitmap (padrão Photoshop). Ainda tambem configurou essa máscara vetorial para mostrar seu contorno.

Como nossa figura original não tinha contorno (Stroke no Fire 4), podemos aplicar e editar isso a qualquer momento, basta estar o quadro de máscara selecionado na layer para isso!

Agora a seleção da textura do contorno

e aplicação da sombra

Feito, essa já era.

2 - Enevoada

Como podem analisar este maravilhoso design, vemos que não dá pra ganhar prêmio nenhum com ele, mas dá pra fazer o conteúdo ficar em feather, esmaecendo, acabando, apagando... tem um monte de apelido pra essa qualidade, escolha o seu, tecnicamente é Feather.


Pra fazer é fácil demais, a mesma figura na tela com o elemento circular sobre

Agora selecione a figura e deixe sua propriedade de preenchimento com Feather de 10 (Fill no Fire 4).

Vá ao menu Modify / Mask / Group as Mask

Nesse caso, tanto faz a mascara ser do tipo bitmap ou vetorial, pois nada mais será feito e a figura da mascara estava pintada de branco, o que em máscara quer dizer que deve ser mostrado, no fireworks 4 tem que ficar em preto pra mostrar.

Caso queria, pode alterar para máscara vetorial que o resultado será exatamente o mesmo.

Foi moleza né!.

3 - Reticulada

Nossa, quem vê já imagina, como cheguei a esse recurso? reticulado, em máscara ainda?

Esse dá ate medo de ensinar de tão fácil, será que não vou receber muitos emails reclamando do baixo nível da coluna?.... deixamos de frecura.. vamos ver como faz!

Selecione o objeto que será a máscara, e em properties ou (Fill no Fire 4) e mude o tipo de preenchimento de Solid para Web Dither, e escolha as cores preto e branco para as 2 opções existentes.

Quanto a transparência, explico assim que acabar a última parte, por enquanto deixe-a desmarcada.

Agora é só mascarar!

Fim!

Usando o mesmo recurso de Web Dither, pude criar uma imagem gif transparente que realmente é transparente no html e sobre outros elementos, veja o exemplo da tabela abaixo, dividi em algumas partes e apliquei outra tabela dentro para dar a noção real do recurso, que pode perfeitamente ser aplicado a um layers html arrastável ou outras frescurites.

 
 
 

Baixe os arquivos! (mascaras.zip).


Dicas:

1 - Para selecionar e movimentar mais facilmente o objeto máscara, a seta branca resolve bem (A), não precisa ficar abrindo o layer para isso!

2 - Para selecionar o objeto dentro da máscara e movimentá-lo ou reposicioná-lo, use a seta preta (V) e vá ao centro (registro) , a seta se tornará branca automaticamente, permitindo que faça a alteração que quiser!

3 - Para desagrupar uma máscara, pressione CTRL + SHIFT + G

4 - Existe uma forma alternativa para mascarar um objeto, que é muito usada no programa Freehand, e obtém exatamente o mesmo resultado.
Selecione a figura que irá ser mascarada, recorte-a da tela (Ctrl X), em seguida selecione o objeto que será a máscara e pressione (Ctrl Shit V) ou no menu edit (Paste Inside). A figura é jogada dentro da máscara!



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