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???