LUIZ HERRERA (117 pts)

PEDRO CLAUDIO (50 pts)

DAAFY (55 pts)

MUZAK (45 pts)

NILTON BICALHO (61 pts)

GABRIEL SPORCH (53 pts)

JOTA LAGO (40 pts)

PANDOGO (82 pts)

NETO LEAL (116 pts)

MAURO ROCHA TAVARES (40 pts)

RICARDO FIGUEIRA (33 pts)

HELEN TRIOLO (444 pts)
Treinamento PontoFlash de Flash e ActionScript

Como eu uso o setInterval?

Como faço para concatenar o nome da variável, dependendo do valor de outra?

Existe algum modo de definir quais variáveis vão ser enviadas pelo POST do flash?

Importei um .MOV pro flash, só que quando testo, o vídeo não começa.

Preciso pegar no Flash variáveis do ASP.

Como posso arrastar um movieclip de forma que ele mude a sua instância conforme a área de target em que cair?

Pra que serve o comando MovieClip.prototype?

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

Preciso do comando javascript, que com o botão direito do mouse surge um window.alert.

Problemas com variáveis importadas de um txt.

Como fazer um preloader móvel, que corre atrás do mouse?

Como pular um frame que tem uma ação Stop?

Detector de FlashPlayer.

Preciso de um timer que faça variar o valor de um campo dinâmico.
Dicas para otimizar seu SWF (revisado e atualizado).

Utilização da class XMLConnector

Scanline no PhotoShop.

Conversão de Datas e Horas em Servers Estrangeiros (Flash+Asp).

Formulário interagindo Flash e PHP.

Linha que segue o mouse.

O desenho animado abrindo sites.

Jogo dos 7 erros.

Máscara

Janelas tipo Windows com Swap Depth

Animação no Flash.

Colisão
Double cube

Tocha 2

Folha dobrada

Bolhas

Nudemask2

Centrifuge

Blur

Dynamic menu

Giro de duende

Menu interativo

Texto matrix

Giratoria
HOME | TUTORIAIS
Efeito lente (máscara e zoom)
por Luís Alberto

Olá galera da Ponto Flash...

Aqui vai um tutorial que acredito ser bastante útil pra galera, visto que na lista tem vários pedidos de explicação de como se faz o efeito de lente do site O Boticario (http://www.oboticario.com.br).

O nosso exemplo ficará parecido com o exibido abaixo:

A diferença do efeito do site é que eles só deslocam a imagem, e o nosso é um efeito que passa a impressão de AUMENTO da foto.

Bom chega de papo e vamos ao trabalho:

  Neste exemplo estou trabalhando com o arquivo nas seguintes medidas: WIDTH '250' | HEIGHT '200'.

  Vamos precisar de duas imagens, a mesma imagem mas em tamanhos diferentes. Na verdade vocês irão reparar que este efeito é simplesmente um jogo de máscaras, nada mais, se você quiser usar uma imagem qualquer, tudo bem.

  Nomeie a primeira Camada para graphFotoMenor (se quiser usar outro nome, tudo bem) | nesta Camada estaremos colocando a foto menor. Importe a foto menor e coloque-a nesta Camada de forma que ela fique alinhada no Meio Vertical e no Inicio do Filme na Horizontal (imagem01).


imagem01

  Transforme esta imagem importada em um Gráfico, e nomeie-o como graphMcFotoMenor. Crie uma nova camada e nomeie-a como lenteS | nesta Camada colocaremos uma cor qualquer com Alpha pra servir como lente de cor.
  Nesta camada crie um quadrado ou retângulo, seguindo a medida HEIGHT com 200, visto que é o tamanho do Filme, a largura você mesmo pode escolher. Eu usei 100. Escolha uma cor qualquer e jogue alpha nesta cor de 45%, coloque ela no mesmo alinhamento da imagem importada (imagem01).

  Acima da Camada graphFotoMenor crie uma nova Camada e nomeie-a como mask | esta Camada será a máscara da imagem menor. Nesta Camada (mask) crie um objeto, de qualquer cor, do tamanho do filme, WIDHT '250' e HEIGHT '200' a alinhe ele no meio do filme. Estamos definindo agora que a imagem menor deve aparecer no filme todo.

  Para confirmarmos como está indo, confiram na imagem abaixo:


imagem02

  Agora vamos começar a parte interessante

  Crie uma nova Camada e nomeie-a como graphFotoMaior | nesta Camada iremos colocar a imagem maior. Importe para esta Camada a imagem maior, e desloque-a de forma que ela fique quase na mesma posição da imagem menor, levando em consideração o efeito que estamos tentando fazer. Transforme esta imagem em um Gráfico e nomeie-o como graphFotoMaior.

  Para confirmarmos como está indo, confiram na imagem abaixo:


imagem03

  Agora olhem a relação de posição das imagens:


imagem04

  Continuando...
  Na Camada lenteS crie um outro retângulo, espaçado do outro, novamente a largura dele não importa muito, o interessante é fazer ele mais fino, bem mais fino, eu estou utilizando 30, e um espaçamento pequeno também entre este e o primeiro retângulo. Neste novo retângulo, coloque Alpha de 25% + ou -. É nesta nova lente que vai dar o efeito de aumento.

  Crie mais um retângulo com o tamanho restante do filme de largura, com a mesma cor dos outros, só que com Alpha maior, agora de 65% + ou -. Este vai servir só pra completar o efeito.

  Nosso arquivo deve parecer-se com a imagem abaixo:


imagem05

  Conluindo o efeito com as máscaras

  Crie uma nova Camada, acima da Camada graphFotoMaior e nomeie-a como mask | esta Camada será a máscara da foto maior. Nesta Camada crie um objeto, com qualquer cor, do tamanho da nossa lente do meio, e posicione-o exatamente no mesmo local.

  Confirmem (a cor escura é o objeto da máscara):


imagem06

  Se você pressionar o CTRL + ENTER, verá que já vai aparecer com o efeito, sem movimento.


imagem07

  Agora é só movimentar os objetos, lembrando que só movimentaremos os objetos das camadas graphFotoMenor e graphFotoMaior.

  Pronto! mistério desvendado, espero ter ajudado! qualquer problema na execução deste TUTOR, favor entrar em contato em PVT! Baixe aqui o exemplo do tutorial.



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
1 comentário


Comentário de Natiele Freire
| 23/6/2010 - 13:01 |


Eu adorei esse efeito.Nao possuo nenhum conhecimento em flash,apenas em html da pra eu fazer isso em flash e jogar para o site que estou desenvolvendo em html????e qual program a eu uso para fazer o efeito das fotos???