Zoom com Mascara no Flash

[Guiu]

Bom Dia Pessoal !

Gostaria de saber como e que faco para fazer um zoom em uma imagem. Ao passar o mouse pela imagem ela aparece ampliada ao lado.

esse e o exemplo que preciso.

http://www.christianaudigier.com/Women-s-F...caw103c_blk.htm

Muito Obrigado

Guilherme

[Pooh]

Olá Guilherme ^_^

acabei de olhar o exemplo que mostras-te e é bem simples de reproduzir.

não refinei muito porém o básico do que precisa para fazer algo igual está nesse fla que estou por enviar.

Mas antes algumas explicações.

Como na maioria dos meus trabalhos eu utilizarei a classe "mc_tween2.as" para fazer os fades (aparecer e desaparecer);

stop();
#include "mc_tween2.as"
var Status:Boolean = false;

Começamos parando nosso filme, chamando a classe mc_tween2 e declarando nossa variável de Status;

attachMovie("img","Img",_root.getNextHighestDepth());
Img._x=20;
Img._y=20;

attachMovie("mask","Mask",_root.getNextHighestDepth());
Mask._x = Img._width+40;
Mask._y = 20;
Mask._alpha=0;

attachMovie("lupa","Lupa",_root.getNextHighestDepth());
Lupa._x = Img._x;
Lupa._y = Img._y;
Lupa._alpha=0;

Em seguida, vamos adicionar os movieclips em nosso Stage, estou definindo como default a Lupa e a Mask(local aonde a imagem vai aparecer ampliada) como invisiveis.

var maskObj:MovieClip = _root.Mask.maskObj;

Declarando novamente como Movieclip apra encurtar o Path (não ter de escrever toda santa hora _root.Mask.MaskObj); Agora vamos à Mágica :lol:

_root.onMouseMove = function() {
if(Status==true){
    
    Lupa._x = _xmouse-40;
    Lupa._y = _ymouse-50;
    maskObj._x=40-(Lupa._x*2);
    maskObj._y=35-(Lupa._y*2);
    
    //LIMITAÇÃO LADO ESQUERDO
    if(Lupa._x <= Img._x){
        Lupa._x = Img._x;
        maskObj._x = 40-(Lupa._x*2);
    }
    //LIMITAÇÃO LADO DIREITO
    if(Lupa._x >= (Img._width+Img._x-Lupa._width) )
    {
        Lupa._x = (Img._width+Img._x)-Lupa._width;
        maskObj._x=40-(Lupa._x*2);
    }
    //LIMITAÇÃO EM CIMA
    if(Lupa._y <= Img._y )
    {
        Lupa._y = Img._y;
        maskObj._y=35-(Lupa._y*2);
        
    }
    //LIMITAÇÃO EM BAIXO
    if(Lupa._y >= (Img._height+Img._y-Lupa._height) )
    {
        Lupa._y = (Img._height+Img._y-Lupa._height);
        maskObj._y=35-(Lupa._y*2);
    }
    
}
}

Sempre que o mouse se movimentar essa função vai ser executada porém só ira funcionar se Status estiver setada como verdadeiro; definimos que Lupa vai seguir o mouse, porém esses valores -40 e -50 são para que centremos a Lupa (utilizo registro em TopLeft o que me faz ter de subtrair metade dos eixos X e Y para ter a metade como resultado) podemos trocá-los por:

Lupa._x = _xmouse-(Lupa._width/2);
    Lupa._y = _ymouse-(Lupa._height/2);

O que nos permitiria mudar o tamanho da lupa sem ter de mudar o código. Porém teria de fazer isso em várias partes do código, já que fiz 1 exemplo bem rápido não me preocupei com o resize se for necessário eu posto outro source para você mas seria preferível que você aproveitasse o caminho e fizesse você mesmo ^_^ Continuando. A Lupa irá seguir o mouse porém com posição inversa e multiplicada por 2. Porquê 2 ? porque foi definido nesse exemplo uma ampliação duplicada. Ow seja a imagem a qual se encontra dentro da mascara é 2 vezes maior que a situada no stage. já a posição inversa é devido a já que a mascara fica parada e quem deve se movimentar é a nossa Imagem Mascarada. Portanto para que desçamos a imagem, na verdade estamos subindo com ela. Como comentado defini 4 limites: 2 para cada eixo, Esquerda, Direita, Cima, Baixo.

//LIMITAÇÃO LADO ESQUERDO
    if(Lupa._x <= Img._x){
        Lupa._x = Img._x;
        maskObj._x = 40-(Lupa._x*2);
    }

Caso nossa lupa ultrapasse o valor X de nossa imagem, ela será travada;

//LIMITAÇÃO LADO DIREITO
    if(Lupa._x >= (Img._width+Img._x-Lupa._width) )
    {
        Lupa._x = (Img._width+Img._x)-Lupa._width;
        maskObj._x=40-(Lupa._x*2);
    }

Caso ultrapassa o lado direito o mesmo acontecerá, repare que existe uma relação para se ter o limite direito deve-se subtrair o valor da propria lupa(width) já que se trata do registro TopLeft, caso você utilize qualquer registro "Right" não é necessário esse parâmetro;

//LIMITAÇÃO EM CIMA
    if(Lupa._y <= Img._y )
    {
        Lupa._y = Img._y;
        maskObj._y=35-(Lupa._y*2);
        
    }

Limitamos bem simples o valor Y de nossa lupacaso ela ultrapasse a linha da imagem

//LIMITAÇÃO EM BAIXO
    if(Lupa._y >= (Img._height+Img._y-Lupa._height) )
    {
        Lupa._y = (Img._height+Img._y-Lupa._height);
        maskObj._y=35-(Lupa._y*2);
    }

Limitamos em baixo, lembrando novamente da necessidade de subtrair a altura da Lupa.

Img.onRollOver = function() {
    Img.alphaTo(50,2);
    Lupa.alphaTo(100,2);
    Mask.alphaTo(100,2);
    Status=true;
    }
Img.onRollOut = function() {
    Img.alphaTo(100,2);
    Lupa.alphaTo(0,2);
    Mask.alphaTo(0,2);
    Status=false;
    }

Para que tudo funcione somente quandoo mouse passar por cima da imagem.

alphaTo é uma função da classe mc_tween, para mais informações:alphaTo | Documentação

Source: Zoom.fla

Obs* É necessário ter o plugin mc_tween2.as instalado, caso não tenha, pegue aqui: Mc_Tween Version 2.28.29

Bom, acho que é isso

Qualquer dúvida é só postar

Abraços

Pooh

Editado Abril 19, 2009 por Pooh