[Resolvido] Galeria de Imagens

Freelife · Dezembro 9, 2008

Tarde Galera...

Então... to aprendendo bastante coisa com o fórum e outras pesquisas que estou fazendo, tem muita coisa na net ensinando a fazer galeria de imagens, mas eu estou tentando criar uma.

Já consegui carregar o xml e armazenar os dados em um array.

criei um MovieClip através de AS2 e usei o loadClip para carregar os dados do array(imagens) no _mc, porém quando testo o filme só aparece a primeira imagem.

A grande questão que ainda não sei, nem tenho noção como fazer é a seguinte:

1º - Como organizar as imagens para aparecerem pequenas e lado a lado? Preciso ter foto pequena e foto grande para trabalhar?

Eu ví um tuto que fazia o seguinte, em um nó do xml tinha dois atributos fp(foto pequena) e fg(foto grande) e através desses dois quando a pessoa clicava na foto pequena ele carregava a grande em outro mc. porém dá muito trabalho, você tem que ter duas fotos, uma pequena e outra grande.

Quero carregar as imagens no tamanho original, e exibir elas pequena, quando a pessoa clicar aí sim fica grande.

2º - No teste que fiz criei um mc e um MovieClipLoader e através dele carreguei a foto no mc, porém ela aparece grande, e só aparece uma imagem. Como é que faço aparecer as 4 que tenho no xml?

Bom por enquanto é só, se conseguirem me ajudar agradeço. Depois posto o resultado aqui.

Abraços

Freelife · Dezembro 10, 2008

E então galera...

o que consegui fazer até agora foi isso que postarei, se alguém puder me ajudar... o código as:

System.useCodepage = true;
image_xml = new XML();
image_xml.ignoreWhite = true;
image_xml.onLoad = function (success:Boolean){
	if(success){
		trace("Xml carregado com sucesso");
		conta();
	}
	else{
		trace("Falha ao carregar Arquivo Xml");
		break;
	}
}
image_xml.load("image.xml");

var qImages:Array = new Array();

conta = function(){
var len = image_xml.firstChild.childNodes;
trace(len);
for(var i=0; i < len.length; i++){
	qImages.push({a: len[i].firstChild.nodeValue});
	trace(qImages[i].a + " Imagens");
	trace(i + " Número de Imagens");
// Cria um clipe de filme pai para armazenar o recipiente.
	var teste_mc:MovieClip = this.createEmptyMovieClip("my"+ i +"_mc", i);
	teste_mc._xscale = 25;
	teste_mc._yscale = 25;
	teste_mc.onPress = function():Void {
	if(teste_mc._xscale == 25 && teste_mc._yscale == 25){
		teste_mc._xscale = 100;
		teste_mc._yscale = 100;
	}
	else{
		teste_mc._xscale = 25;
		teste_mc._yscale = 25;
	}
};
// Cria um clipe de filme filho em "my_mc".
// Esse é o clipe de filme que será substituído pela imagem.
	teste_mc.createEmptyMovieClip("container_mc",99);
// Use MovieClipLoader para carregar a imagem.
	var my_mcl:MovieClipLoader = new MovieClipLoader();
	my_mcl.loadClip(qImages[i].a, teste_mc.container_mc);
}
}

e o xml:

<?xml version="1.0" encoding="iso-8859-1"?>

<galeria>
	<imagens>
		<![CDATA[DCP_0730.jpg]]>
	</imagens>
	<imagens>
		<![CDATA[DCP_0731.jpg]]>
	</imagens>
	<imagens>
		<![CDATA[DCP_0732.jpg]]>
	</imagens>
	<imagens>
		<![CDATA[DCP_0733.jpg]]>
	</imagens>
</galeria>

A questão é que quando o xml é carregado ele só mostra a última foto, não sei como é que se faz para carregar uma do lado da outra.

Consegui resolver a questão do tamanho, simplesmente mudando o tamanho do mc pai.

Abraços espero que alguém possa ajudar.

vlw

Freelife · Dezembro 10, 2008

Galera...

então... mexendo aqui consegui ver que na verdade as imagens estão carregando, porém a última que carrega fica em cima das outras. eu coloquei um startDrag() para arrastar as imagens e consegui ver as outras 4.

Agora preciso que alguém me ajude a carregar elas em colunas e linhas... tipo:

imagem1 imagem2

imagem3 imagem4....

algo desse tipo...

Quando clico na imagem ela fica com o tamanho normal dela. Queri que ao mesmo tempo ela ficasse alinha ao centro do palco, e quando soltasse o botão ela voltasse à sua posição original.

eu tentei usar: this._x = _global.stageWidth/2 e this._y = _global.stageHeight/2... Mas não deu certo.

Alguém sabe como fazer?

Abraços

Freelife · Dezembro 10, 2008

Diaaa galera...

então... eu consegui resolver algumas coisas.

Consegui fazer com que a imagem fique alinhada ao centro, usei o seguinte:

peguei o tamanho do palco assim:

var stageWidth = Stage.width /2;
var stageHeight= Stage.height /2;

Depois ao clicar na imagem setei o _x e o _y;

this._x = stageWidth - (this._width / 2);
this._y = stageHeight -(this._height / 2) + 30;

até aí beleza. A outra questão que era alinhar as imagens para que não ficassem uma em cima da outra quando carregassem eu consegui resolver parcialmente.

o código da galeria é esse:

System.useCodepage = true;
image_xml = new XML();
image_xml.ignoreWhite = true;
image_xml.onLoad = function (success:Boolean){
	if(success){
		trace("Xml carregado com sucesso");
		conta();
	}
	else{
		trace("Falha ao carregar Arquivo Xml");
		break;
	}
}
image_xml.load("image.xml");

	var stageWidth = Stage.width /2;
	var stageHeight= Stage.height /2;

var qImages:Array = new Array();

conta = function(){
		var len = image_xml.firstChild.childNodes;
		trace(len);
	for(var i=0; i < len.length; i++){
			qImages.push({a: len[i].firstChild.nodeValue});
			trace(qImages[i].a + " Imagens");
			trace(i + " Número de Imagens");

// Cria um clipe de filme pai para armazenar o recipiente.
			var teste_mc:MovieClip = this.createEmptyMovieClip("my"+ i +"_mc", i);
			teste_mc._xscale = 25;
			teste_mc._yscale = 25;
			var coluna:Number = i;
			var linha:Number = 0;
			var Width = 100;
			var Height = 70;
				if(coluna > 1){
					coluna = 0;
					linha++;
				}
			teste_mc._x = Math.round(coluna * Width + coluna);
			teste_mc._y = Math.round(linha * Height + linha);
		
			teste_mc.onPress = function():Void {
				if(this._xscale == 25 && this._yscale == 25){
						this._xscale = 100;
						this._yscale = 100;
						this.iniPosX = this._x;
						this.iniPosY = this._y;
						this._x = stageWidth - (this._width / 2);
						this._y = stageHeight -(this._height / 2) + 30;
				}
				else{
						this._xscale = 25;
						this._yscale = 25;
						this._x = this.iniPosX;
						this._y = this.iniPosY;
			}

};
// Cria um clipe de filme filho em "my_mc".
// Esse é o clipe de filme que será substituído pela imagem.
		teste_mc.createEmptyMovieClip("container_mc",99);
// Use MovieClipLoader para carregar a imagem.
		var my_mcl:MovieClipLoader = new MovieClipLoader();
		my_mcl.loadClip(qImages[i].a, teste_mc.container_mc);
}

}

Nessa parte do código:

var teste_mc:MovieClip = this.createEmptyMovieClip("my"+ i +"_mc", i);
			teste_mc._xscale = 25;
			teste_mc._yscale = 25;
			var coluna:Number = i;
			var linha:Number = 0;
			var Width = 100;
			var Height = 70;
				if(coluna > 1){
					coluna = 0;
					linha++;
				}
			teste_mc._x = Math.round(coluna * Width + coluna);
			teste_mc._y = Math.round(linha * Height + linha);

se eu coloco o "i" na var coluna, ele mostra todas as imagens em coluna, mas daí não consigo quebrar a linha na condição do IF. da maneira como está ele esta mostrando as imagens assim:

image1 image2

image3...

A image4 está escondida atrás da 3. pois no "if" a variável coluna recebeu o valor 0.

Alguém pode ajudar com a lógica?

Abraços

Freelife · Dezembro 10, 2008

Então galera...

não consegui resolver esse problema das culonas ainda, e surgiu uma idéia...

quando a pessoa clica na imagem ela muda de lugar para ficar com o tamanho normal, só que o lugar onde ela estava fica vazio.

Como é que eu faço para quando a pessoa clicar na imagem ela seja duplicada e quando clicar novamente para ela voltar ao tamanho normal, remova o mc criado antes.

Abraços

Freelife · Dezembro 10, 2008

Noite galera...

caraca meu... to ficando quase louco já... não consigo implementar a lógica desse negócio...

conta = function(){

var len = image_xml.firstChild.childNodes;

trace(len);

for(var i=0; i < len.length; i++){

qImages.push({a: len.firstChild.nodeValue});

trace(qImages.a + " Imagens");

trace(i + " Número de Imagens");

// Cria um clipe de filme pai para armazenar o recipiente.

var teste_mc:MovieClip = this.createEmptyMovieClip("my"+ i +"_mc", i);

teste_mc._xscale = 25;

teste_mc._yscale = 25;

var coluna:Number = i;

var linha:Number = 0;

var Width = 100;

var Height = 70;

if(coluna > 1){

coluna = 0;

linha++;

}

teste_mc._x = Math.round(coluna * Width + coluna);

teste_mc._y = Math.round(linha * Height + linha);

com esse código as imagens aparecem assim:

image1 image2

image3 e a image4 está embaixo da image3.

não consigo corrigir esse erro, sei que tenho que iterar a var coluna (coluna++), mas não consigo fazer isso em nenhum lugar, sei que o é erro de lógica, mas não sei como corrigir.

Alguém pode dar uma ajuda?

Vlw

Kiluhty · Dezembro 11, 2008

Olá, tudo bem? eu num sei como te ajudar, mas gostaria de saber se você pode me ajudar... estou fazendo um catalago de produtos no flash, mas eu coloquei as fotos no flash e ele ficou muito pesado. Me falaram que era para eu fazer uma XML, mas eu num sei oq é isto, tem como você me ajudar?

Freelife · Dezembro 11, 2008

E aeh beleza?!

Na verdade eu não sei nada de flash e outras cossitas... mas estou aprendendo.

a estrutura básica do xml é assim:

Aqui você inicia o xml e define a codificação dele.
<?xml version="1.0" encoding="iso-8859-1"?>

Aqui você tem o nó principal.
<galeria>
esse é um nó secundário
	<imagens>
e esse o nó dentro do nó. Eu usei a tag <![CDATA[Aqui vai seu conteúdo]]> pois ela mostra os dados como estão.
		<![CDATA[DCP_0730.jpg]]>
	</imagens>
	<imagens>
		<![CDATA[DCP_0731.jpg]]>
	</imagens>
	<imagens>
		<![CDATA[DCP_0732.jpg]]>
	</imagens>
	<imagens>
		<![CDATA[DCP_0733.jpg]]>
	</imagens>
</galeria>

é só copiar isso em um bloco de notas por exemplo e salvar como .nomeDoArquivo.xml

para acessar as informações através do flash você terá que carregar o xml depois de carregado você cria um loop for que percorrerá o xml e armazenará os dados em um array para que depois você consiga exibir as imagens...

dá uma olhada no código que eu criei para a galeria de imagens, acho que dá para entender como é que armazena os dados.

e tbém tem esse tutorial que ensina bastante coisa sobre como acessar o xml:

http://imasters.com.br/artigo/4929/fla...o_xml_no_flash/

espero ter ajudado.

Abraços

Freelife · Dezembro 12, 2008

e aeh galera... Dia!

Então, ainda estou sem conseguir resolver o problema das linhas e colunas, será que alguém pode ajudar?

Abraços

Freelife · Dezembro 15, 2008

Tarde galera...

Faz duas semanas que tento resolver o problema de linha e coluna em uma galeria de imagens, será que alguém tem como ajudar?

Vlw

Abraços

Freelife · Dezembro 18, 2008

Fala galera... boa noite!

então... com a ajuda do public eu consegui resolver parte do problema, eu criei um loop que distribui imagens em linhas e colunas no palco. Porém isso só funciona quando é com mc simples...

Nessa galeria eu tentei implementar o for, fazendo que quando as imagens fossem carregadas elas ficassem com um mc de fundo, usei o método attachMovie, mas sem sucesso. se uso o código do for separado, ele faz a organização corretamente, mas dentro do código da galeria... só dá erro.

Código da galeria:

import mx.transitions.*;
import mx.transitions.easing.*;
//Aqui setamos  a linguagem que o flash aceitará nos textos, o mesmo que sistema onde o flash player está rodando.
System.useCodepage = true;
//criamos a variável image_xml
image_xml = new XML();
//falamos para ela ignorar os espaços em branco.
image_xml.ignoreWhite = true;
//usamos onLoad para que quando o xml for carregado ele dê o resultado, se sim ou se não.
image_xml.onLoad = function (success:Boolean){
//se o xml for carregado com sucesso trace...
	if(success){
		trace("Xml carregado com sucesso");
		//chamamos a função conta.
		conta();
	}
//senão trace...
	else{
		trace("Falha ao carregar Arquivo Xml");
		break;
	}
}
//carregamos o xml.
image_xml.load("image.xml");

// Aqui criamos as variáveis para determinar o centro do palco.
	var stageWidth = Stage.width /2;
	var stageHeight= Stage.height /2;
//Aqui criamos um array
var qImages:Array = new Array();

//inicia a função conta();
conta = function(){
//Criamos a variácel len que recebe o nó de nosso interesse no xml.
		var len = image_xml.firstChild.childNodes;
		
var linha:Number = 0;
var coluna:Number = 0;
var qCol:Number = 4;
var total:Number = len.length;
var j:Number = 0;

for( j=1; j <= total; j++){
			qImages.push({a: len[j].firstChild.nodeValue});
			trace(coluna +" Coluna");
			
			if(coluna <= qCol){
			var teste_mc:MovieClip = this.createEmptyMovieClip("my"+ j +"_mc", j);
			teste_mc.attachMovie("fundo", fundo, j,   {_x:(coluna * 100), _y:(linha * 70)});
			teste_mc._x = Math.round(coluna * Width + coluna);
			teste_mc._y = Math.round(linha * Height + linha);
			teste_mc._xscale = 25;
			teste_mc._yscale = 25;
			coluna++;
			}
			else{
				linha++;
				coluna=0;
				j--;
			}
/* < Aqui >
//criamos o loop para percorrer armazenar o conteúdo da var len.
	for(var i=0; i < len.length; i++){
		
//armazenamos o conteúdo o valor de cada nó de len em qImages.a
			qImages.push({a: len[i].firstChild.nodeValue});
// aqui usamo o trace apenas para testar.
			trace(qImages[i].a + " Imagens");
			trace(i + " Número de Imagens");
// Cria um clipe de filme pai para armazenar o recipiente.
			var teste_mc:MovieClip = this.createEmptyMovieClip("my"+ i +"_mc", i);
//setamos a escala/tamanho da imagem em 25% nos eixos x e y.
			teste_mc._xscale = 25;
			teste_mc._yscale = 25;

			//pegamos um movieClip criado e deixado na biblioteca e puxamos ele para servir de "porta retrato" das imagens.
			teste_mc.attachMovie("fundo", fundo, 1,   {_x:200, _y:133});
//Aqui é o problema.
//Criamos as variáveis coluna, linha, Width e Height. Bom acho que não preciso explicar as colunas...
//As vars Width e Height são usadas mais a frente
			var coluna:Number = 0;
			var linha:Number = 0;
			var Width = 102;
			var Height = 69;
//nesse IF era para determinar a posição das imagens ele faria com que ficasse assim:
//imagem1 imagem2 //como aqui é maior que 1, quebra linha e seta coluna = 0;
//imagem3 imagem4 // era o objetivo mas a imagem 4 está ficando embaixo da 3.
				if(coluna > 1){
					linha++;
					coluna = 0;
				trace(coluna+" dentro de if");
				}
//nessa parte setamos a posição da imagem conforme o valor da var coluna.
//primeiro multiplicará por 0, pois o valor de coluna é 0
//quando o valor for 1 multiplicará 1 * 102 + 1 que dará a posição da imagem no eixo x.
				teste_mc._x = Math.round(coluna * Width + coluna);
// nos primeiros teste, não há alteração no eixo Y. Mas quando 1 > 0 então linha será igual a 1.
//então 1 * 69 + 1 que será a posição Y da imagem. Com isso automaticamente as imagens
//ficarão distribuídas em linhas e colunas.
				teste_mc._y = Math.round(linha * Height + linha);

< Aqui >*/
			
//Isso aqui eu peguei do Help do próprio Flash, mas se o que faz.
// Cria um clipe de filme filho em "my_mc".
// Esse é o clipe de filme que será substituído pela imagem.
		teste_mc.createEmptyMovieClip("container_mc",99);
// Use MovieClipLoader para carregar a imagem.
		var my_mcl:MovieClipLoader = new MovieClipLoader();
		my_mcl.loadClip(qImages[j].a, teste_mc.container_mc);
		
//nessa parte quando pressionar o botão ele vai verificar se a escala/tamanho da imagem é igual
// a 25 nos eixos X eY. Se for igual então ele seta o tamanho em 100%.
			teste_mc.onPress = function() {
				trace(this.getDepth());
				if(this._xscale == 25 && this._yscale == 25){
						this.swapDepths(len.length);
						this._xscale = 100;
						this._yscale = 100;
//pega a posição inicial da imagem 
						this.iniPosX = this._x;
						this.iniPosY = this._y;
//posiciona a imagem no meio do palco usando as variáveis stageWidth e stageHeight - a metada do tamanho da imagem
//no caso do eixo Y somente adicionai + 30 por comodidade.
						this._x = stageWidth - (this._width / 2);
						this._y = stageHeight - (this._height / 2);
						trace(this._y);
						new Tween(this, "_xscale", None.easeNone, 0, 100, 1, true);
						new Tween(this, "_x", mx.transitions.easing.None.easeNone, stageWidth , this._x, 1, true);
				}
//se a escala for == 100% então...
				else{
//torna a escala/tamanho 25%
						/*this._xscale = 25;
						this._yscale = 25;*/
//volta a imagem à posição inicial.
						/*this._x = this.iniPosX;
						this._y = this.iniPosY;*/
						this.swapDepths(0);
						trace(this.getDepth());
						new Tween(this, "_xscale", None.easeNone, 100, 25, 1, true);
						new Tween(this, "_yscale", None.easeNone, 100, 25, 1, true);
						TransitionManager.start(this, {type:Rotate, direction:Transition.IN, duration:1, easing:Regular.easeIn, ccw:false, degrees:360});
						new Tween(this, "_x", mx.transitions.easing.None.easeNone, stageWidth - (this._width / 2) , this.iniPosX, 1, true);
						new Tween(this, "_y", mx.transitions.easing.None.easeNone, stageHeight - (this._height / 2) , this.iniPosY, 1, true);
				}
			};
}

}

Reparem que dois códigos aí... o primeiro é o que to tentando implementar o novo loop.

O outro que está demarcado com "< Aqui >" é o antigo que estava usando.

Alguém pode ajudar?

o link do fla e do swf: http://rapidshare.com/files/174396989/galeria3.rar.html

Vlw

Abraços

Public2004 · Dezembro 18, 2008

E ae beleza?

Qual é exatamente o resultado que pretende?

Abs.

Freelife · Dezembro 18, 2008

E aeh beleza?!

então... assim como fiz(Com sua ajuda) com a organização de colunas e linhas.

img1 img2 img3 img4

img5 img6 img7 img8... e assim por diante.

como mencionei isso é para efeito de estudo, depois pretendo implementar melhor.

Basicamente queria que as imagens ficassem distribuídas no palco da mesma maneira que no tópico colunas e linhas..: http://forum.imasters.com.br/index.php?showtopic=322205

A diferença é que teria imagens dentro do mc atachado, formando uma galeria.

Quando a pessoa clicar no mc terá então um efeito mostrando a imagem com escala = 100%.

é isso.

Se precisar hoje a noite disponibilizo o xml e tbém as imagens de teste.

Vlw...

Abraços

Public2004 · Dezembro 18, 2008

Bom, de acordo com este último cód que postou, efetuei apenas algumas alterações conforme este trecho abaixo (comentado):

EDIT: Corrigido - E repare que alterei a posição do "MovieClipLoader", joguei dentro da condição (if/else)...

var linha:Number = 0;
	var coluna:Number = 0;
	var qCol:Number = 4;
	var total:Number = len.length-1;//Subtração para evitar mc vazio no final do loop "for", pois alterei o laço.
	var j:Number = 0;
	var Width:Number = 102;//Inclui esta variável, pois será utilizada mais abaixo
	var Height:Number = 69;//Idem

//E alterei este laço "for", conforme segue...
	for(j=0; j <= total; j++){// Setei para "0" a variável "j"
		if(coluna <= qCol){
			qImages.push({a: len[j].firstChild.nodeValue});
			var teste_mc:MovieClip = this.createEmptyMovieClip("my"+ j +"_mc", j);		
			teste_mc.createEmptyMovieClip("container_mc",999);
			teste_mc.attachMovie("fundo", "fundo"+j, j);//Eliminei as posições setadas do mc "fundo" dentro do "teste_mc"
			teste_mc._x = Math.round(coluna * Width + coluna);
			teste_mc._y = Math.round(linha * Height + linha);
			teste_mc._xscale = 25;
			teste_mc._yscale = 25;
			var my_mcl:MovieClipLoader = new MovieClipLoader();
			my_mcl.loadClip(qImages[j].a, teste_mc.container_mc);
			coluna++;
		}else{
			linha++;
			coluna=0;
			j--;
		};

Testa ae.

Abs.

Freelife · Dezembro 18, 2008

valeu public...

vou testar assim que chegar em casa e se der certo vou postar o arquivo aqui...

Creio que outras pessoas tbém tenham essa dificuldade ou uma parecida.

Abraços e até +

Freelife · Dezembro 19, 2008

Galera boa Noite!!!

Então... graças a ajuda do public consegui terminar o projeto simples da galeria!

O link é esse: [Editado]http://rapidshare.com/files/174707668/Gale...e_Imagens_4.rar

é bem simples mesmo, só para testar, mas achei que para a primeira galeria ficou legal.... não sei se vcs vão concordar.

Então...

Só um resumo o problema se iniciou com a necessidade de distribuir as imagens em linhas e colunas, como não consegui resolver direto na galeria criei um arquivo separado: http://rapidshare.com/files/174709229/colunaElinha.rar

Porém quando o número total de imagens era múltiplo de 10 sempre era exibido um mc a menos ( tipo se tinha 30 no total, eram exibidos só 27). Com a ajuda do public2004 conseguimos resolver...

Implementei o código na galeria, só que não dava certo, pois, havia passado despercebido por mim as variáveis Width e Heigth que eu mesmo tinha criado no código anterior, mais uma vez com a ajuda do public2004 me mostrou o caminho.

Valeu public...

Por enquanto é isso...

Abraços e vamos estudar.

Vlw

esqueci do código para que não quiser o arquivo:

import mx.transitions.*;
import mx.transitions.easing.*;
//Aqui setamos  a linguagem que o flash aceitará nos textos, o mesmo que sistema onde o flash player está rodando.
System.useCodepage = true;
//criamos a variável image_xml
image_xml = new XML();
//falamos para ela ignorar os espaços em branco.
image_xml.ignoreWhite = true;
//usamos onLoad para que quando o xml for carregado ele dê o resultado, se sim ou se não.
image_xml.onLoad = function (success:Boolean){
//se o xml for carregado com sucesso trace...
	if(success){
		trace("Xml carregado com sucesso");
		//chamamos a função conta.
		conta();
	}
//senão trace...
	else{
		trace("Falha ao carregar Arquivo Xml");
		break;
	}
}
//carregamos o xml.
image_xml.load("image.xml");

// Aqui criamos as variáveis para determinar o centro do palco.
	var stageWidth = Stage.width /2;
	var stageHeight= Stage.height /2;
//Aqui criamos um array
var qImages:Array = new Array();

//inicia a função conta();
conta = function(){
//Criamos a variácel len que recebe o nó de nosso interesse no xml.
		var len = image_xml.firstChild.childNodes;

//Declaramos variáveis.	
var linha:Number = 1;
var coluna:Number = 1;
var qCol:Number = 4;
var total:Number = len.length;
var j:Number = 0;
var Width:Number = 102;//Inclui esta variável, pois será utilizada mais abaixo
var Height:Number = 69;//Idem

for( j=0; j <= total; j++){
			qImages.push({a: len[j].firstChild.nodeValue});
			trace(coluna +" Coluna");
//se coluna for menor ou igual a qCol(Quantidade de colunas) então...			
			if(coluna <= qCol){
			var teste_mc:MovieClip = this.createEmptyMovieClip("my"+ j +"_mc", j);
			teste_mc.attachMovie("fundo", "fundo"+j, j, {_x:200, _y:133});//Aqui colocamos o mc de funda das imgs.
//Posiciona o mc no palco.
			teste_mc._x = Math.round(coluna * Width + coluna);
			teste_mc._y = Math.round(linha * Height + linha);
//Reduz a escala para 25%.
			teste_mc._xscale = 25;
			teste_mc._yscale = 25;
//incrementa coluna.
			coluna++;
			}
//se coluna for maior que qCol.
			else{
//incrementa linha.
				linha++;
//coluna recebe 1.
				coluna=1;
//j = j-1; pois se passarmos direto ele vai pular um loop.
				j--;
			}

//Isso aqui eu peguei do Help do próprio Flash, mas se o que faz.
// Cria um clipe de filme filho em "my_mc".
// Esse é o clipe de filme que será substituído pela imagem.
		teste_mc.createEmptyMovieClip("container_mc",99);

// Use MovieClipLoader para carregar a imagem.
		var my_mcl:MovieClipLoader = new MovieClipLoader();
		my_mcl.loadClip(qImages[j].a, teste_mc.container_mc);
		
//nessa parte quando pressionar o botão ele vai verificar se a escala/tamanho da imagem é igual
// a 25 nos eixos X eY. Se for igual então ele seta o tamanho em 100%.
			teste_mc.onPress = function() {
				trace(this.getDepth());
				if(this._xscale == 25 && this._yscale == 25){
						this.swapDepths(len.length);
						this._xscale = 100;
						this._yscale = 100;
//pega a posição inicial da imagem 
						this.iniPosX = this._x;
						this.iniPosY = this._y;
//posiciona a imagem no meio do palco usando as variáveis stageWidth e stageHeight - a metada do tamanho da imagem
//no caso do eixo Y somente adicionai + 30 por comodidade.
						this._x = stageWidth - (this._width / 2);
						this._y = stageHeight - (this._height / 2);
						trace(this._y);
						new Tween(this, "_xscale", None.easeNone, 0, 100, 1, true);
						new Tween(this, "_x", mx.transitions.easing.None.easeNone, stageWidth , this._x, 1, true);
				}
//se a escala for == 100% então...
				else{
//torna a escala/tamanho 25%
						/*this._xscale = 25;
						this._yscale = 25;*/
//volta a imagem à posição inicial.
						/*this._x = this.iniPosX;
						this._y = this.iniPosY;*/
						this.swapDepths(0);
						trace(this.getDepth());
						new Tween(this, "_xscale", None.easeNone, 100, 25, 1, true);
						new Tween(this, "_yscale", None.easeNone, 100, 25, 1, true);
						TransitionManager.start(this, {type:Rotate, direction:Transition.IN, duration:1, easing:Regular.easeIn, ccw:false, degrees:360});
						new Tween(this, "_x", mx.transitions.easing.None.easeNone, stageWidth - (this._width / 2) , this.iniPosX, 1, true);
						new Tween(this, "_y", mx.transitions.easing.None.easeNone, stageHeight - (this._height / 2) , this.iniPosY, 1, true);
				}
			};
}

}

é isso...

vlw

Public2004 · Dezembro 19, 2008

http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif Parabéns!

Bom material para estudo. Código bem comentado.

http://forum.imasters.com.br/public/style_emoticons/default/natal_smile.gif Abs e Boas festas.

Freelife · Dezembro 22, 2008

Tarde Galera...

surgiu um problema sobre a questão do loop para organizar as imagens.

Na condição do for onde fazemos a organização das colunas e linhas, sempre que o loop entra no else decrementamos o "j" para que não aconteça de ficar um quadrado a menos.

O problema é que sempre que quebra uma linha, uma imagem é repetida, pois, a variável "j" foi decrementada.

Alguém dá uma idéia de como resolver?

Abraços

Public2004 · Dezembro 22, 2008

O que acontece? O "MovieClipLoader" + a função para os botões estão fora da condição, mas dentro do laço "for"! Este é o motivo da repetição!

Se você reparar no último exemplo que postei, eu alterei a posição do "MovieClipLoader", coloquei dentro da condição... e deverá fazer o mesmo para os botões (agora que reparei que você não fez a alteração). E lembre-se que para os botões funcionarem de forma individual, terá que criar um "identificador" exclusivo para cada um.

Qualquer coisa estamos aí.

http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif Abs e Boas festas!

Freelife · Dezembro 23, 2008

Bom dia galera...

Ainda não deu certo, mesmo colocando o MovieClipLoader e a ação de botão dentro do if continua repetindo uma imagem sempre que quebra uma linha.

ficou assim:

//inicia a função conta();
conta = function(){
//Criamos a variácel len que recebe o nó de nosso interesse no xml.
		var len = image_xml.firstChild.childNodes;
		
var linha:Number = 1;
var coluna:Number = 1;
var qCol:Number = 4;
var total:Number = len.length;
var j:Number = 0;
var Width:Number = 102;//Inclui esta variável, pois será utilizada mais abaixo
var Height:Number = 69;//Idem

for( j=0; j <= total; j++){
			qImages.push({a: len[j].firstChild.nodeValue});
			trace(coluna +" Coluna");
			
			if(coluna <= qCol){
			var teste_mc:MovieClip = this.createEmptyMovieClip("my"+ j +"_mc", j);
			teste_mc.attachMovie("fundo", "fundo"+j, j, {_x:200, _y:133});
			teste_mc._x = Math.round(coluna * Width + coluna);
			teste_mc._y = Math.round(linha * Height + linha);
			teste_mc._xscale = 25;
			teste_mc._yscale = 25;
//Isso aqui eu peguei do Help do próprio Flash, mas se o que faz.
// Cria um clipe de filme filho em "my_mc".
// Esse é o clipe de filme que será substituído pela imagem.
		teste_mc.createEmptyMovieClip("container_mc",99);
// Use MovieClipLoader para carregar a imagem.
		var my_mcl:MovieClipLoader = new MovieClipLoader();
		my_mcl.loadClip(qImages[j].a, teste_mc.container_mc);

//nessa parte quando pressionar o botão ele vai verificar se a escala/tamanho da imagem é igual
// a 25 nos eixos X eY. Se for igual então ele seta o tamanho em 100%.
			teste_mc.onPress = function() {
				trace(this.getDepth());
				if(this._xscale == 25 && this._yscale == 25){
						this.swapDepths(len.length);
						this._xscale = 100;
						this._yscale = 100;
//pega a posição inicial da imagem 
						this.iniPosX = this._x;
						this.iniPosY = this._y;
//posiciona a imagem no meio do palco usando as variáveis stageWidth e stageHeight - a metada do tamanho da imagem
//no caso do eixo Y somente adicionai + 30 por comodidade.
						this._x = (stageWidth - (this._width / 2))+ 12;
						this._y = (stageHeight - (this._height / 2))- 11;
						trace(this._y);
						new Tween(this, "_xscale", None.easeNone, 0, 100, 1, true);
						new Tween(this, "_x", mx.transitions.easing.None.easeNone, stageWidth , this._x, 1, true);
				}
//se a escala for == 100% então...
				else{
//torna a escala/tamanho 25%
						/*this._xscale = 25;
						this._yscale = 25;*/
//volta a imagem à posição inicial.
						/*this._x = this.iniPosX;
						this._y = this.iniPosY;*/
						this.swapDepths(0);
						trace(this.getDepth());
						new Tween(this, "_xscale", None.easeNone, 100, 25, 1, true);
						new Tween(this, "_yscale", None.easeNone, 100, 25, 1, true);
						TransitionManager.start(this, {type:Rotate, direction:Transition.IN, duration:1, easing:Regular.easeIn, ccw:false, degrees:360});
						new Tween(this, "_x", mx.transitions.easing.None.easeNone, stageWidth - (this._width / 2) , this.iniPosX, 1, true);
						new Tween(this, "_y", mx.transitions.easing.None.easeNone, stageHeight - (this._height / 2) , this.iniPosY, 1, true);
				}
			};
		
		coluna++;
			}
			else{
				linha++;
				coluna=1;
				j--;
			}

}

}

Abraços e boas festas

Arquivado

[Resolvido] Galeria de Imagens

Recommended Posts

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kiluhty 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Public2004 79

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Public2004 79

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Public2004 79

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Public2004 79

Compartilhar este post

Link para o post

Compartilhar em outros sites

Freelife 2