[Resolvido] flash AS3.0

[junior.c.e 1]

Ola pessoal do fórum estou mais uma vez aqui pedindo a ajuda de vcs.

É o seguinte, eu estava criando um sisteminha em flash e AS2.0 e este sistema foi evoluindo de tal forma que comecei a ter limitações c/ AS2.0 foi então que resolvi migrar para AS3.0 que atende melhor as necessidades que tenho. Porem estou tendo alguns problemas nesta migração por não entender de AS3.0. Alguns amigos do fórum como Roney estão me dando uma ajuda nesta conversão, mas um problema surgiu e não sei resolver.

É o seguinte no meu sisteminha tem uma opção de zoom que fiz seguindo este tutorial Clique aqui (na pag2 próximo aos comentários tem o .fla p/baixar), que era o que eu precisava. Porem ao fazer tudo certinho me deparei com um problemão, pois quando o usuário usa o zoom ele aproxima somente o centro escondendo as laterais e impedindo de ver alguns detalhes.

A ajuda que preciso seria o seguinte quando o usuário aproximar com o zoom ele possa visualizar as partes que ficaram escondidas, isso através da miniatura ou com uma espécie de stardrag na imagem principal onde se arrasta a imagem e visualiza o restante que esta escondido por trás de uma mascara, semelhante a este exemplo que esta em as2.0 Clique aqui.

Galera se alguém souber como faz isso em as3.0 e puder me ajudar fico muito grato.

At. Junior

[junior.c.e 1]

Bom galera resolvi postar o fla dos dois exemplos para ficar mais facil de ver os exemplos se o link.

Arquivos para baixar

 

At. Junior

[DesenvolvedorRoger 50]

No seu caso é só acrescentar o starDrag:

mc.addEventListener( MouseEvent.MOUSE_DOWN, moverMC );

function moverMC( e:Event ){

e.target.startDrag();

};

mc.addEventListener( MouseEvent.MOUSE_UP, pararMC );

function pararMC( e:Event ){

e.target.stopDrag();

};

 

Abs,

[junior.c.e 1]

Roger tentei usar seu exemplo mais nada aconteceu, acima postei o fla para download se puder me ajudar agradeço.

Att Junior

[DesenvolvedorRoger 50]

Roger tentei usar seu exemplo mais nada aconteceu, acima postei o fla para download se puder me ajudar agradeço.

Att Junior

 

Ops, estava vendo umas coisas aqui e só vi agora que você respondeu...

 

Sobre não ter dado é porque provavelmente você está fazendo algo de errado pois o código está certinho...

 

Crie um MC no palco com o 'instance name' "mc" e teste pra ver...

 

Tentei baixar mas o link está incorreto...

 

'O Firefox não conseguiu localizar estreladamanhafm.com.br'.

 

 

Abs,

[junior.c.e 1]

Roger eu corrigi o download veja se pode dar uma olhadinha www.estreladamanhafm.com/download/zoom_arquivos.rar

[DesenvolvedorRoger 50]

Qual é a dificuldade?

 

É como eu te falei, basta definir qual o MC que você quer tornar arrastável...

 

seu_mc.addEventListener( MouseEvent.MOUSE_DOWN, mover );

 

Viu? Não tem mistério...

[junior.c.e 1]

Bom Roger esta parte eu fiz e realmente não tem mistério, peguei seu cod e substitui onde esta mcpor imagem(que é a instancia do movieclip que preciso que tenha stardrag, porem surgiu um problemão que é o seguinte.

Quando a imagem não esta em zoom este stardrag não deve estar ativo, pois a imagem tem tamanho real, mas quando uso o zoom ai sim ela deve ativar o stardrag porque algumas partes destas imagem devido o uso do zoom.

Outro problema é que esta imagem ou MC vai estar atras de uma mascara entao o stardrag deve respeitar quele tamanha e nao permitir que o usuario arraste alem do permitido, é por isso que coloque o exeplo que esta em as2.0 pois ele é perfeito so nao uso porque estou migrando para as3.0 que disponibiliza muito mais funções.

A verdade é para se entender melhor o que estou precisando é necessario baixar o fla do exemplo em as2.0.

Att. Junior

[DesenvolvedorRoger 50]

Vou te dar uma mão, mas, daqui pra frente, implementar é com você...

 

Vamor lá:

 

1º - Atribua o evento startDrag() a sua imagem

 

var larguraOriginal_num:int = 648;
var alturaOriginal_num:int = 550;

image.addEventListener( MouseEvent.MOUSE_DOWN, moverMC );

function moverMC( e:Event ){

e.target.startDrag();

e.target.addEventListener( "enterFrame", movendo );

};

 

Através do evento "enterFrame" e da função mover é que nós podemos limitar a área em que a imagem pode ser arrastada:

 

function movendo( e:Event ){

if( e.target.y > alturaOriginal_num / 2 + Math.round( e.target.height / 2 ) - alturaOriginal_num / 2 ){

e.target.y = alturaOriginal_num / 2 + Math.round( e.target.height / 2 ) - alturaOriginal_num / 2; 

}

if( e.target.y < alturaOriginal_num / 2 - ( Math.round( e.target.height / 2 ) - alturaOriginal_num / 2 ) ){

e.target.y = alturaOriginal_num / 2 - ( Math.round( e.target.height / 2 ) - alturaOriginal_num / 2 ); 

}


if( e.target.x > larguraOriginal_num / 2 + Math.round( e.target.width / 2 ) - larguraOriginal_num / 2 ){

e.target.x = larguraOriginal_num / 2 + Math.round( e.target.width / 2 ) - larguraOriginal_num/2;

}

if( e.target.x < larguraOriginal_num / 2 - ( Math.round( e.target.width / 2 ) - larguraOriginal_num / 2 ) ){

e.target.x = larguraOriginal_num / 2 - ( Math.round( e.target.width/2 ) - larguraOriginal_num / 2 );

}

}

 

E aqui pra fechar:

 

//Para quando o usuário "soltar" a imagem

image.addEventListener( MouseEvent.MOUSE_UP, pararMC );

function pararMC( e:Event ){

       e.target.stopDrag();

e.target.removeEventListener( "enterFrame", movendo );

if( e.target.y > alturaOriginal_num / 2 + Math.round( e.target.height / 2 ) - alturaOriginal_num / 2 ){

e.target.y = alturaOriginal_num / 2 + Math.round( e.target.height / 2 ) - alturaOriginal_num / 2;

}

if( e.target.y < alturaOriginal_num / 2 - ( Math.round( e.target.height / 2 ) - alturaOriginal_num / 2 ) ){

   e.target.y = alturaOriginal_num / 2 - ( Math.round( e.target.height / 2 ) - alturaOriginal_num / 2 ); 

}

if( e.target.x > larguraOriginal_num / 2 + Math.round( e.target.width / 2 ) - larguraOriginal_num / 2 ){

e.target.x = larguraOriginal_num / 2 + Math.round( e.target.width / 2 ) - larguraOriginal_num/2;

}

if( e.target.x < larguraOriginal_num / 2 - ( Math.round( e.target.width / 2 ) - larguraOriginal_num / 2 ) ){

e.target.x = larguraOriginal_num / 2 - ( Math.round( e.target.width / 2 ) - larguraOriginal_num / 2 );

}

};

 

Boa sorte, agora é com você...

[junior.c.e 1]

Fala Roger beleza?

Cara muito obrigado pela ajuda, pois era isso msm que eu precisava, só tive um problema que foi ao voltar voltar o zoom porque ele não faz no eixo central depois que o usuário move a imagem deixando espaços, mas agradeço muito pela ajuda agora fica mais tranqüilo em tentar achar uma solução para este problema.

Pode ter certeza que quando alguém precisar de meus conhecimentos estarei ajudando assim como você me ajudou.

Grande abraço Junior

Bom aproveitando se alguem souber resolver este problema da ésta força, pois de as3.o não entendo ainda.

[DesenvolvedorRoger 50]

Nesse caso procure a função em que você está usado para aumentar o zoom e acrescente as funções para startDrag/stopDrag do código que eu te passei:

 

image.addEventListener( "enterFrame", movendo );
image.addEventListener( MouseEvent.MOUSE_UP, pararMC );

 

BS,

[junior.c.e 1]

Tentei fazer isso Roger mais não deu muito certo continua sem voltar no eixo central.

Ele so fica no eixo central quando apos voltar o zoom a imagem para no local onde ela foi movida deixando um espaço em as margens devido o deslocamento, quando eu clico na imagens apos voltar o zoom ela centraliza, no entanto se não dar este click ela nao volta como acontece no exemplo que postei en as2.0.

 

Att. Junior

[DesenvolvedorRoger 50]

Quando for assim, poste a forma como você está fazendo, porque se não, não tenho ajudar...

 

Se postar por agora posso te ajudar, caso contrário, só mais tarde...

[junior.c.e 1]

Segue a forma que estou fazendo, não sei se esta correto, pois como eu disse as3.0 ainda estou nos primeiros passos de aprender, já as2.0 sei +-.

 

var sliderDrag:Boolean=false;
function slide(event) { 
var sliderLimits:Rectangle = new Rectangle(zTool.sliderLine.x,
zTool.slider.y,zTool.sliderLine.width,0);
zTool.slider.startDrag(false, sliderLimits); 
sliderDrag=true;}zTool.slider.addEventListener(MouseEvent.MOUSE_DOWN, slide);
function endDrag(event) {
zTool.slider.stopDrag(); 
sliderDrag=false;}zTool.slider.addEventListener(MouseEvent.CLICK, endDrag);
zTool.slider.addEventListener(MouseEvent.ROLL_OUT, endDrag);
function zoom(event) { 
if (sliderDrag==true) {  
var redBoxScale = (zTool.slider.x-zTool.sliderLine.x);  
if (redBoxScale>95) {   redBoxScale=95;  }  
if (redBoxScale<1) {   redBoxScale=1;  
}  
this.zTool.targetArea.scaleX=(redBoxScale-100)/100;  
this.zTool.targetArea.scaleY=(redBoxScale-100)/100; 
var scaleFactor = zTool.image.width/zTool.targetArea.width;  
image.width = viewArea.width* scaleFactor;
image.height = viewArea.height* scaleFactor; 
image.addEventListener( "enterFrame", movendo );//aqui adicionei o cod que você me passou//
image.addEventListener( MouseEvent.MOUSE_UP, pararMC );//aqui adicionei o cod que você me passou
}
}
zTool.slider.addEventListener(MouseEvent.MOUSE_MOVE, zoom);
var tamanhoOriginal_num:int = 550;
image.addEventListener( MouseEvent.MOUSE_DOWN, moverMC );
function moverMC( e:Event ){
e.target.startDrag(); 
e.target.addEventListener( "enterFrame", movendo ); 
};
function movendo( e:Event ){         
if( e.target.y > tamanhoOriginal_num / 2 + Math.round( e.target.height / 2 ) - tamanhoOriginal_num / 2 ){        
e.target.y = tamanhoOriginal_num / 2 + Math.round( e.target.height / 2 ) - tamanhoOriginal_num / 2; 
} 
if( e.target.y < tamanhoOriginal_num / 2 - ( Math.round( e.target.height / 2 ) - tamanhoOriginal_num / 2 ) ){
       e.target.y = tamanhoOriginal_num / 2 - ( Math.round( e.target.height / 2 ) - tamanhoOriginal_num / 2 ); 
}
if( e.target.x > 648 / 2 + Math.round( e.target.width / 2 ) - 648 / 2 ){
       e.target.x = 648 / 2 + Math.round( e.target.width / 2 ) - 648/2;
} 
if( e.target.x < 648 / 2 - ( Math.round( e.target.width / 2 ) - 648 / 2 ) ){
       e.target.x = 648 / 2 - ( Math.round( e.target.width/2 ) - 648 / 2 );
}  
}	
//Para quando o usuário "soltar" a imagem
image.addEventListener( MouseEvent.MOUSE_UP, pararMC );
function pararMC( e:Event ){   
       e.target.stopDrag();
       e.target.removeEventListener( "enterFrame", movendo );                
if( e.target.y > tamanhoOriginal_num / 2 + Math.round( e.target.height / 2 ) - tamanhoOriginal_num / 2 ){
       e.target.y = tamanhoOriginal_num / 2 + Math.round( e.target.height / 2 ) - tamanhoOriginal_num / 2;
	} 
if( e.target.y < tamanhoOriginal_num / 2 - ( Math.round( e.target.height / 2 ) - tamanhoOriginal_num / 2 ) ){        
   e.target.y = tamanhoOriginal_num / 2 - ( Math.round( e.target.height / 2 ) - tamanhoOriginal_num / 2 ); 
} 
if( e.target.x > 648 / 2 + Math.round( e.target.width / 2 ) - 648 / 2 ){
       e.target.x = 648 / 2 + Math.round( e.target.width / 2 ) - 648/2;
	} 
if( e.target.x < 648 / 2 - ( Math.round( e.target.width / 2 ) - 648 / 2 ) ){
       e.target.x = 648 / 2 - ( Math.round( e.target.width / 2 ) - 648 / 2 );
}        
};

Abraço

[DesenvolvedorRoger 50]

Você estava fazendo errado...

 

É aqui que você tem que colocar o código que eu te falei:

 

function slide(event) { 

var sliderLimits:Rectangle = new Rectangle(zTool.sliderLine.x,
zTool.slider.y,zTool.sliderLine.width,0);
zTool.slider.startDrag(false, sliderLimits); 
sliderDrag=true;

[b]image.addEventListener( "enterFrame", movendo );
image.addEventListener( MouseEvent.MOUSE_UP, pararMC );[/b]

}

 

Bom, agora estou de saída...

 

Boa sorte,

[junior.c.e 1]

Roger testei aqui e deu certinho agora era isso mesmo que eu precisava.

Parceiro estou sem palavras para lhe agradecer, valeu mesmo.

Galera apesar de ter disponibilizado o .fla para download dentro de alguns dias serei obrigado a desativar o link, porem se alguem precisar de algo senhelhante me manda uma mensagem com um e-mail ativo que estarei enviando, pois assim como fui ajudado tambem irei ajudar. Caso alguem queira no começo do tópico tem o link do tutorial de onde comecei a fazer este efeito de zoom, basta baixar e seguir as instruções que o parceiro Roger me passou que vai dar certinho.

 

Grande abraço a todos.

 

Att. Junior