[Resolvido] Galeria Drag and Drop

P3rukao · Outubro 30, 2008

Galera, estou precisando desenvolver um estilo de galeria onde o usuario seleciona o arquivo e "joga" dentro de um "alvo"... para o seu conteudo ser exibido....

Eu já achei vários exemplos na net de como fazer um modelo simples.... mas é exatamente como eu quero.

Para ser mais especifico, seria assim:

» o usuario clica e arrasta um item para um alvo (até aqui tudo bem);

» o alvo vai retornar dentro dele mesmo (do alvo) um conteudo (seja uma imagem, ou um video.... ou qualquer outra coisa);

» quando escolher outro item, o conteudo que estava sendo exibido no mc "alvo" é retirado e o novo é exibido.....

Talvez não seja tão complicado assim.... mas como eu ainda apanho mto pro AS, estou me enrolando todinho....

Alguem pode me dar uma luz, de como resolver isso???? :mellow:

P3rukao · Outubro 31, 2008

se alguém souber de algum tuto interessante sobre o assunto.... seria de grande ajuda também....

eu já sei programar em outras linguagens... mas (não sei porque), quando eu vejo o AS fico mó perdido... :wacko:

Eder Fortunato · Outubro 31, 2008

bem, pra iniciar, você poderia pesquisar pela função startDrag(), para fazer o pegar e arrastar

e por hitTest(), para saber se o cara soltou a foto no alvo

tente começar a fazer algo, qualquer coisa posta ai

[]´s

P3rukao · Novembro 1, 2008

bem, pra iniciar, você poderia pesquisar pela função startDrag(), para fazer o pegar e arrastar

e por hitTest(), para saber se o cara soltou a foto no alvo

tente começar a fazer algo, qualquer coisa posta ai

[]´s

vlw pela dica Eder.....

essa parte do clicar e arrastar eu já estou sacando..... já havia quebrado a cabeça com isso..... mas vou dar uma conferida no hitTest() tbm.....

o problema maior dessa minha "galeria".... é que vai ser uma coisa dinamica........ vou ter que descobrir de alguma maneira... de como pegar esses dados de algum lugar (seja banco de dados, ou xml, ou outra coisa).... e fazer com que quando eu soltar o "ítem" dentro da área... ele pega o ID desse item e exiba o seu respectivo conteúdo......

todo esse recurso que eu imaginei..... vai servir não só pra galerias de fotos... como para exibição de vídeo, áudio e etc.... acho que se eu conseguir concluí-lo, vamos ter um novo aplicativo interessante em flash para ser usado pelo povo aí a fora.....

P3rukao · Novembro 2, 2008

eu estou estudando muito php e banco de dados no momento, daí quando eu vou ver alguma coisa de AS eu me enrolo todo......

tipo.... tem como, usando esse recurso de Drag and Drop e o hitTest, eu passar (ou capturar) um valor que vai estar referenciando um determinado movieclip ou outro objeto do meu palco????

tipo..... se eu tenho uma lista com varios moviclipes.. e cada um deles tem informações como endereço de uma imagem, titulo dessa imagem, e mais informações... tem como eu recuperar esses dados para exibir em outro MC????

Eder Fortunato · Novembro 3, 2008

um exemplo simples pra ajudar na lógica:

// guarda no botão o caminho da imagem
bt1.path = "imagem1.gif"
// arrastar
bt1.onPress = function(){
  startDrag(this)
}
// ao soltar, verifica se foi no alvo
bt1.onRelease = function(){
  if(this.hitTest(alvo)){
	 // carrega a imagem que estava guardada
	 carregaImg(this.path)
 }
}

function carregaImg(img){
loadMovie(img)
}

o processo é esse, só teria eu deixar dinâmico a atribuição da variável

[]´s

P3rukao · Novembro 3, 2008

um exemplo simples pra ajudar na lógica:

// guarda no botão o caminho da imagem
 bt1.path = "imagem1.gif"
 // arrastar
 bt1.onPress = function(){
   startDrag(this)
 }
 // ao soltar, verifica se foi no alvo
 bt1.onRelease = function(){
   if(this.hitTest(alvo)){
	  // carrega a imagem que estava guardada
	  carregaImg(this.path)
  }
 }
 
 function carregaImg(img){
 loadMovie(img)
 }

o processo é esse, só teria eu deixar dinâmico a atribuição da variável

[]´s

Vlw mais uma vez pela ajuda Eder.... eu ainda não conhecia esse comando "path"... aliás tem muitos desses detalheZINHOs que ainda não manjo muito.... mas como eu não consigo arranjar nenhum curso de flash que ensine de verdade.. o jeito eh apanhar por aqui msm http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Eu estou vendo tbm a questão do uso do xml para guardar os dados que eu terei que exibir.. (tanto para as imagens, videos e audios)..

» Dá pra usar esse comando path junto com o carregamento via XML???

• um link que eu achei bem interessante sobre FLASH + XML que eu estou usando como guia: http://www.oficinadanet.com.br/artigo/424/...uas_informacoes

P3rukao · Novembro 3, 2008

isso é muuito interessante... acho que já está começando a clarear as idéias aqui... http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

vou dar uma estudada mais nisso... e qualquer coisa estou voltando http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

P3rukao · Novembro 5, 2008

Seguinte... eu achei um tuto na net, que ensinava como fazer uma galeria de fotos (dinâmica), puxando as imagens de um arquivo xml...

Eu tentei implementar o efeito drag 'n drop e o hitTest(), mas não ficou 100%;

::: O PROBLEMA :::

» com o efeito drag 'n drop e hitTest implementados, era para a imagem ser carregada somente quando eu a soltasse no meu mc Alvo, porém ela está carregando assim que o usuário clica(onRelease) na imagem;

» O que é que eu estou fazendo de errado?

O link do tutorial: AQUI

o código eh esse aqui:

//variaveis da sequencia...
var fotos:Array = new Array;
//função de inicio do projeto...
function init():Void {
	//carregando xml...
	var loadDados:XML = new XML();
	loadDados.ignoreWhite = true;
	loadDados.onLoad = function(sucess) {
		if (sucess) {
			//primeiro nó: fotos;
			var f = this.firstChild.childNodes;
			//listando conteúdo do nó e inserindo no array de fotos
			for (var i = 0; i<f.length; i++) {
				var novaimg:Object = new Object(); //criando o objeto de cada foto
				novaimg.img_p = f[i].attributes.fp;
				novaimg.img_g = f[i].attributes.fg;
				fotos.push(novaimg); //inserindo objeto no array
			}
			//chamando função q faz a galeria...
			criaGaleria();
		}
	};
	//load no arquivo .xml
	loadDados.load("fotos.xml");
}
//função que cria a galeria
function criaGaleria():Void {
	car._visible = 0;
	//preloader de imagens grande, usando MovieClipLoader...
	//fica livre para usar como quiser...
	var mvlIMG:MovieClipLoader = new MovieClipLoader();
	var mvlOBJ:Object = new Object();
	mvlOBJ.onLoadStart = function(){
		car._visible = 1;
	}
	mvlOBJ.onLoadProgress = function(obj, bl, bt){
		var p = (Math.round(bl/bt) * 100) //porcentagem carregada da imagem
		car.p.text = "Carregando... " + p + "%";
	}
	mvlOBJ.onLoadComplete = function(){
		car._visible = 0;
	}
	mvlIMG.addListener(mvlOBJ);
	//
	//criando sistema de galeria(quantidade de fotos, fotos por pagina, colunas, altura miniatura, largura, espacamento x, e y);
	_global.galeria1 = new Distribute(fotos.length, 8, 2, 80, 60, 4, 3);
	//
	var objGal1:Object = new Object();
	objGal1.onDistStart = function() {
		//ação de inicio da distribuição das fotos...
		//verifica se o mc já está no palco, caso esteja, remove para nova página...
		if(_root.miniaturas){
			//removendo miniaturas anteriores na troca de pagina...
			_root.miniaturas.removeMovieClip();
		}
		//duplicando o mc conteiner q vai conter as miniaturas, para um novo que poder ser removido...
		_root.conteinerInicial.duplicateMovieClip("miniaturas", 1);
		//definindo onde o mcConteiner deve aparecer...
		miniaturas._x = conteinerInicial._x; // _x
		miniaturas._y = conteinerInicial._y; // _y
		//escondendo...
		miniaturas._visible = 0;
	};
	//
	objGal1.onDistUpdate = function(info:Object) {
		//puxando da bliblioteca o mc com linkage miniatura, e ja posicionando de arquivo com o _x e _y passados pelo var info...
		_root.miniaturas.attachMovie("miniatura", "fp_"+info.iObj, galeria1.nDepth(_root.miniaturas), {_x:info.x, _y:info.y});
		//informando ou passando, para miniatura, qual é sua foto grande...
		_root.miniaturas["fp_"+info.iObj].img_g = fotos[info.index].img_g;
		//criando o movie clip alvo para receber a img pequena, dentro do mc Conteiner...
		_root.miniaturas["fp_"+info.iObj].createEmptyMovieClip("img_p", 1);
		//carregando thumb via loadMovie...
		_root.miniaturas["fp_"+info.iObj].img_p.loadMovie(fotos[info.index].img_p);
		//definindo ação de clique na miniatura, para ampliar...
		
		
		
		 // Esse codigo comentado abaixo, é o original do arquivo;
		/*_root.miniaturas["fp_"+info.iObj].onRelease = function(){
			//usando o obj mvlIMG, para carregar a imagem grande...
			mvlIMG.loadClip(this.img_g, img_grande);
		}*/
		
	   //Eu acrescentei esse trecho abaixo
		_root.miniaturas["fp_"+info.iObj].onPress = function(){
		  startDrag(this);
		}
		// ao soltar, verifica se foi no alvo
		_root.miniaturas["fp_"+info.iObj].onRelease = function(){
			stopDrag();
			
			if(_root.miniaturas["fp_"+info.iObj], hitTest(_root.img_grande)){
				//usando o obj mvlIMG, para carregar a imagem grande...				
				mvlIMG.loadClip(this.img_g, img_grande);
			}
		}
		
		
			  
		
		
		
		
	};
	objGal1.onDistEnd = function(info:Object) {
		//ação de distribuição completa, exibindo mc Conteiner, chamado de miniaturas...
		miniaturas._visible = 1;
	};
	//definindo ao objeto galeria1, os objetos e eventos que deve utilizar...
	galeria1.addEventListener("onDistStart", objGal1);
	galeria1.addEventListener("onDistUpdate", objGal1);
	galeria1.addEventListener("onDistEnd", objGal1);
	//
	
	galeria1.showPage(1);
}
//
//iniciando por fim, a galeria...
init();

Eder Fortunato · Novembro 5, 2008

o problema deve ser no hitTest mesmo, veja se esse _root.img_grande não esta encostando nas miniaturas, use um trace para saber se o hit esta mostrando true ou false

[]´s

P3rukao · Novembro 5, 2008

Eu imaginei que fosse isso mesmo.... e É....

É como se o mc para a imagem grande (o alvo do hitTest) estivesse ocupando toda a area do palco.....

eu olhei todas as as linhas do código, mas não achei nada lógico que estivesse fazendo com que ele ficasse assim...

Então tentei criar um mc dinamicamente e fazê-lo o meu mc"alvo".. mas está dando um errinho.... Em alguns pontos do codigo utilizado, postado acima, o mc que eu crio dinamicamente aparece, porém a lista dos thumbs some..... em outros pontos o mc e criado e logo que os thumbs são carregados, o meu mc dinâmico some......

Aqui o código usado para criar o mc dinamico:

onEnterFrame=function(){
		this.createEmptyMovieClip("someshapes", 1);
		this.someshapes.lineStyle(2, 0x00ee00, 100);
		this.someshapes.beginFill(0x00cc00, 50);
			this.someshapes.moveTo(200, 200);
			this.someshapes.lineTo(200, 150);
			this.someshapes.lineTo(150, 150);
			this.someshapes.lineTo(150, 200);
		this.someshapes.endFill();
		
		/*var newclip6 = this.createEmptyMovieClip("someshapes", 1);
		with (newclip6) {
			lineStyle(2, 0x00ee00, 100);
			beginFill(0x00cc00, 50);
				moveTo(50, 50);
				lineTo(50, 150);
				lineTo(150, 150);
				lineTo(150, 50);
			endFill();
		}*/
	}

P3rukao · Novembro 6, 2008

Eder,

eu andei olhando esse código de "cabo a rabo", e tentando achar algum trecho que estivesse dizendo para o mc "img_grande" ocupar todo o espaço do palco, porém não achei nada.

Então o problema deve estar na distribuição das imagens pequenas (os thumbs), que de alguma forma podem estar se "espalhando" por todo o palco, já que foi feito para que os MC's desses thumbs se distribuam pelo palco de acordo com a configuração que é feita nesse trecho do código abaixo:

//criando sistema de galeria(quantidade de fotos, fotos por pagina, colunas, altura miniatura, largura, espacamento x, e y);
	_global.galeria1 = new Distribute(fotos.length, 8, 2, 80, 60, 4, 3);

no arquivo zipado desse tutorial, que eu informei mais acima, tem um script .as que é responsável pela distribuição desses thumbs pelo palco....

creio que o erro possa estar aí, mas é só uma suposição http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

tu pode me dar um help nisso????

Eder Fortunato · Novembro 6, 2008

já vi o seu erro, só percebi quando colei o flash o codigo, nessa parte

if(_root.miniaturas["fp_"+info.iObj], hitTest(_root.img_grande)){

//usando o obj mvlIMG, para carregar a imagem grande...

mvlIMG.loadClip(this.img_g, img_grande);

}

você esta usando virgula, o correto é ponto

if(_root.miniaturas["fp_"+info.iObj].hitTest(_root.img_grande)){

//usando o obj mvlIMG, para carregar a imagem grande...

mvlIMG.loadClip(this.img_g, img_grande);

}

culpa do flash que nem acusou erro se sintaxe, rs

[]´s

P3rukao · Novembro 6, 2008

aiaiaiaiaaiai..... nem acredito que não vi esse erro tbm http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

kkkkkk

eu testei aqui e deu certiiinho.... agora vou atrás dos efeitos pra deixar mais bacana ;)

o flash, apesar de todo o seu NOME e poder, ainda tem muuuitos bugs, e naum tem um negoço que eu sinto muuita falta na hora de "tentar" (rsrs) programar...... o INTELISENSE, igual o do visual studio....... <_<

mas, obrigado pela "observação", :D

Arquivado

[Resolvido] Galeria Drag and Drop

Recommended Posts

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eder Fortunato 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eder Fortunato 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eder Fortunato 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eder Fortunato 15

Compartilhar este post

Link para o post

Compartilhar em outros sites

P3rukao 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante