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.