Album de fotos

[Luiz Henrique 1]

Olá pessoas,

 

Seguinte preciso fazer um álbum onde terei 3 imagens a central grande e a do lado esquerdo e direito menores, terei também uma seta que fará o movimento para ambos os lados, o que acontecerá será que ao passar da imagem pequena para maior deverá ter a animação da imagem crescendo e ao mesmo tempo a que sai da central deve diminuir isso gradativamente, todas imagens virão do banco mas isso seria o passo 2 meu problema atual é como fazer esta animação, alguém tem algum link com referência desse tipo de animação, ah existem alguns por aí que é de percorrer fica aquele circulo de profundidade com as imagens aparecendo não é isso, para mudar as imagens obrigatóriamente terei que clicar nas setas.

 

fico no aguardo obrigado.

[Eder Fortunato 15]

acredito que a maneira mais facil de fazer isso usando AS seria usar a classe tween

 

dá uma lida nesse artigo

 

 

 

[]´s

[Luiz Henrique 1]

Obrigado Eder muito bom o artigo, vou estudar ele , e retorno quando chegar ao resultado.

abraço.

 

acredito que a maneira mais facil de fazer isso usando AS seria usar a classe tween

 

dá uma lida nesse artigo

 

 

 

[]´s

[Luiz Henrique 1]

Então, consegui montar a animação mas tem um problema na forma que é feita ela, ou seja a classe utilizada transfere o MC de um ponto para outro não de forma contínua, cada vez que eu clicar no próximo por exemplo ele levará sempre o objeto da posição x para y, e fica nisso eu preciso que ele leve de x para y ao clicar novamente no proximo leve de y para z pois é um album de imagens que as mesmas virão do banco, a forma que montei foi essa:

 

MC1 MC2 MC3 MC4 MC5

 

 

O MC 1 e MC5 não aparecem é somente para o efeito de ir e voltar ficar completo

desta forma ao clicar no proximo o MC1 Ocupa o lugar de MC2 e sucessivamente ao clicar no proximo novamente isso se repete nas mesmas posições e não deveria, o que eu pensei seria uma forma do MC carregar uma imagem e soltá-la no próximo quadro assim não teria problema de ficar repetindo o movimento pois ele carregava a imagem dentro levava para o próximo quadro e o solta lá, para entender melhor oque esta acontecendo segue o link

 

http://www.localizzo.com.br/teste.swf

 

Resumindo eu teria que carregar a imagem e solta-la se é que é dessa forma que é feito.

E essas imagens virão do banco como adciono elas ali?

 

Obrigado.

[Eder Fortunato 15]

posta o seu código que fica mais fácil te ajudar a fazer a lógica disso

 

 

 

[]´s

[Luiz Henrique 1]

Opa, então só exlicando antes, tenho 2 botões instanciados btPrev e btNext

e os mc instnciados de img1 à img5 o código:

 

var _pos = new mx.transitions.Tween(img3, "_xscale", mx.transitions.easing.None.easeOut, 200, 200, 1, true);

var _pos = new mx.transitions.Tween(img3, "_yscale", mx.transitions.easing.None.easeOut, 200, 200, 1, true);

Aqui é para iniciar o mc que está no centro no tamanho grande já;

 

function proximo() {

var _pos = new mx.transitions.Tween(img1, "_x", mx.transitions.easing.None.easeOut, -300, 140, 1, true);

 

var _pos = new mx.transitions.Tween(img2, "_x", mx.transitions.easing.None.easeOut, 140, 400, 1, true);

var _pos = new mx.transitions.Tween(img2, "_xscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);

var _pos = new mx.transitions.Tween(img2, "_yscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);

 

var _pos = new mx.transitions.Tween(img3, "_x", mx.transitions.easing.None.easeOut, 400, 660, 1, true);

var _pos = new mx.transitions.Tween(img3, "_xscale", mx.transitions.easing.None.easeOut, 200, 100, 1, true);

var _pos = new mx.transitions.Tween(img3, "_yscale", mx.transitions.easing.None.easeOut, 200, 100, 1, true);

 

var _pos = new mx.transitions.Tween(img4, "_x", mx.transitions.easing.None.easeOut, 660, 900, 1, true);

var _pos = new mx.transitions.Tween(img4, "_xscale", mx.transitions.easing.None.easeOut, 100, 100, 1, true);

var _pos = new mx.transitions.Tween(img4, "_yscale", mx.transitions.easing.None.easeOut, 100, 100, 1, true);

 

var _pos = new mx.transitions.Tween(img5, "_x", mx.transitions.easing.None.easeOut, 900, 1300, 1, true);

}

Aqui faz a transição do click todos os MCs se movendo ao mesmo tempo para frente

 

function anterior() {

var _pos = new mx.transitions.Tween(img1, "_x", mx.transitions.easing.None.easeOut, -700, -400, 1, true);

var _pos = new mx.transitions.Tween(img2, "_x", mx.transitions.easing.None.easeOut, 140, -400, 1, true);

var _pos = new mx.transitions.Tween(img2, "_xscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);

var _pos = new mx.transitions.Tween(img2, "_yscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);

 

var _pos = new mx.transitions.Tween(img3, "_x", mx.transitions.easing.None.easeOut, 400, 140, 1, true);

var _pos = new mx.transitions.Tween(img3, "_xscale", mx.transitions.easing.None.easeOut, 200, 100, 1, true);

var _pos = new mx.transitions.Tween(img3, "_yscale", mx.transitions.easing.None.easeOut, 200, 100, 1, true);

 

var _pos = new mx.transitions.Tween(img4, "_x", mx.transitions.easing.None.easeOut, 660, 400, 1, true);

var _pos = new mx.transitions.Tween(img4, "_xscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);

var _pos = new mx.transitions.Tween(img4, "_yscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);

 

var _pos = new mx.transitions.Tween(img5, "_x", mx.transitions.easing.None.easeOut, 900, 660, 1, true);

}

Idem ao anterior porém para traz o movimento.

 

btPrev.onRelease = function() {

anterior();

};

btNext.onRelease = function() {

proximo();

};

Aqui é a chamada da função no click;

 

deu para entender?

 

 

Obrigado,

[Luiz Henrique 1]

Cara já tentei de tudo aqui não ta rolando , tem alguma outra forma de fazer isso sem ser por esta classe?, pois ela está limitando o movimento de A à B.

 

vlw

[Eder Fortunato 15]

um lógica que pensei foi essa, sempre alterar o movieClip que deve ficar no centro:

 

 

var _pos = new mx.transitions.Tween(img3, "_xscale", mx.transitions.easing.None.easeOut, 200, 200, 1, true);
var _pos = new mx.transitions.Tween(img3, "_yscale", mx.transitions.easing.None.easeOut, 200, 200, 1, true);

var mcs:Array = [img1, img2, img3, img4, img5];

var central:Number = 3;

function proximo() {
	var _pos = new mx.transitions.Tween(mcs[central-2], "_x", mx.transitions.easing.None.easeOut, -300, 140, 1, true);

	var _pos = new mx.transitions.Tween(mcs[central-1], "_x", mx.transitions.easing.None.easeOut, 140, 400, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central-1], "_xscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central-1], "_yscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);

	var _pos = new mx.transitions.Tween(mcs[central], "_x", mx.transitions.easing.None.easeOut, 400, 660, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central], "_xscale", mx.transitions.easing.None.easeOut, 200, 100, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central], "_yscale", mx.transitions.easing.None.easeOut, 200, 100, 1, true);

	var _pos = new mx.transitions.Tween(mcs[central+1], "_x", mx.transitions.easing.None.easeOut, 660, 900, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central+1], "_xscale", mx.transitions.easing.None.easeOut, 100, 100, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central+1], "_yscale", mx.transitions.easing.None.easeOut, 100, 100, 1, true);

	var _pos = new mx.transitions.Tween(mcs[central+2], "_x", mx.transitions.easing.None.easeOut, 900, 1300, 1, true);
	central--;
}

function anterior() {
	var _pos = new mx.transitions.Tween(mcs[central-2], "_x", mx.transitions.easing.None.easeOut, -700, -400, 1, true);

	var _pos = new mx.transitions.Tween(mcs[central-1], "_x", mx.transitions.easing.None.easeOut, 140, -400, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central-1], "_xscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central-1], "_yscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);

	var _pos = new mx.transitions.Tween(mcs[central], "_x", mx.transitions.easing.None.easeOut, 400, 140, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central], "_xscale", mx.transitions.easing.None.easeOut, 200, 100, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central], "_yscale", mx.transitions.easing.None.easeOut, 200, 100, 1, true);

	var _pos = new mx.transitions.Tween(mcs[central+1], "_x", mx.transitions.easing.None.easeOut, 660, 400, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central+1], "_xscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);
	var _pos = new mx.transitions.Tween(mcs[central+1], "_yscale", mx.transitions.easing.None.easeOut, 100, 200, 1, true);

	var _pos = new mx.transitions.Tween(mcs[central+2], "_x", mx.transitions.easing.None.easeOut, 900, 660, 1, true);
	central++;
}


btPrev.onRelease = function() {
	anterior();
};
btNext.onRelease = function() {
	proximo();
};

 

não esta 100%, você tem que validar se ja chegou no limite da variável "central" (ela não pode ser menor que 2 ou maior que o numero de fotos menos 2)

 

o codigo da função anterior() funciona, mas o da proximo() não esta correto, dê uma olhada nisso

 

 

[]´s