MAURO ROCHA TAVARES (40 pts)

JOÃO NETO (78 pts)

DEMIS BUCCI (50 pts)

GUILHERME G.G. (137 pts)

GUILHERME SCHEIBE (49 pts)

IRAPUAN MARTINEZ (45 pts)

JOTA LAGO (40 pts)

EDUARDO PERROUD (52 pts)

LUIZ HERRERA (117 pts)

ALEXANDRE PORTO (1281 pts)

MARCELO SIQUEIRA (96 pts)

PEDRO CLAUDIO (50 pts)
Treinamento PontoFlash de Flash e ActionScript

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

Posso alterar qualquer formatação de um campo de texto através de ActionScript?

Estou precisando de um preloader (carregando) para o meu site.

Código para fazer uma pausa (delay) de um movieclip por um determinado tempo em segundos.

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

Como validar campos de um formulário com javascript?

Quero fechar um film (_level1) com uma action de frame, à partir de outro filme (_level0).

Como fazer um objeto ter um movimento elástico?

Alguém tem um modelo de contrato para websites?

Como eu faço para criar um arrays de variáveis com um índice?

Classe preloader para carregar mais de um SWF?

Tem como fazer um loading do loadVariables?

Não consigo mudar o foco do HTML para o objeto flash.

Como esconder o menu do Flash Player MX?
Shake - navegador tremendo.

Simulando 3D.

Formulário interagindo Flash e PHP.

Includes.

RIA, Macromedia Flex e Laszlo Presentation Server

GetMySQLData para Flash5 (primeira parte)

Objeto XML - xml viewer

Login e senha

Integrando o Flash com Arquivos de Vídeos I

RIA está vindo com tudo

Enviando variáveis do Flash para ASP.

Avaliação do site de O Boticário
Menu cortina

Barco no hit

ComboBox com load movie

Pintar

Digitalclock

Mouseline

Fogos rastro

Condições

Hexadecimal

Dropzoom

Tween motion

Satélite
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???