Galeria rotativa com controle

Diogo Moura · Abril 19, 2010

Fala aew galera será que vcs me ajudam a descobrir como eu foço uma galeria dessas no flash? http://www.todeschinisa.com.br/swf/home.swf

só quero aprender a fazer este esquema de passar as fotos prolado do jeito que ta no site.

Grande abraço peçoal conto com vcs ;D

Alguem sabe?? por favorrr.. ;D

quero saber só como fazer para as imagens deslisarem automaticamente e quando eu passar o mouse em cima de acordo com a posição do mouse as imagems se mechem ! ajudaEEww

Elektra · Abril 20, 2010

A galeria tem bug, não sei se observou isso.

No movimento antihorário, após ampliação, sobrepõe as imagens que de deveriam fica ao fundo.

Não move automaticamente, tem que clicar nas setas para ativar o deslocamento das imagens. E sobre a imagem para ampliar.

Tenho algo em loop, com imagens internas (em AS3), vou ver como fica adicionando botões de controle e ampliação.

Fica legal você informar as tentativas que já fez. Se o carregamento das imagens for dinâmico já é outra história.

Abraços

Diogo Moura · Abril 20, 2010

A galeria tem bug, não sei se observou isso.

No movimento antihorário, após ampliação, sobrepõe as imagens que de deveriam fica ao fundo.

Não move automaticamente, tem que clicar nas setas para ativar o deslocamento das imagens. E sobre a imagem para ampliar.

Tenho algo em loop, com imagens internas (em AS3), vou ver como fica adicionando botões de controle e ampliação.

Fica legal você informar as tentativas que já fez. Se o carregamento das imagens for dinâmico já é outra história.

Abraços

Então eu ainda não tentei nada estou com varios projetos em andamento estava querendo uma ajuda para poder começar este não me importo se for em AS3 só quero aprender a fazer ;D !! o que eu estou fazendo agora é isso aqui ó

//importando as classes necessarias
import mx.utils.Delegate; //classe para criar eventos dentro de outras instancias
import mx.transitions.Tween; //classe para animações via AS
import mx.transitions.easing.*; //classe para animações via AS

//Domênico Citrângulo - Top Rated Never Dies - http://www.toprated.com.br
//NENHUM direito reservado :) pode usar como quiser.

var numerodeelementos:Number; //cria variavel com numero de elementos do scroller
var tamanhodoelemento = 82; //largura de cada elemento
var largura = Stage.width; //largura total do scroller
var altura =  Stage.height; //altura total do filme
var distancia = tamanhodoelemento +60; //distancia entre cada elemento
var centerX = Stage.width/2; //centro horizontal do scroller
var centerY = Stage.height - 45; //centro vertical do scroller
var speed = 0.010; //velocidade do scroller
var home:MovieClip = this; //variavel para facilitar acesso ao _root do movie


home.cortina._alpha = 0; //escondendo a 'cortina' preta
home.comprar._alpha = 0;
home.fechar._alpha = 0;
home.tooltip._alpha = 0; //escondendo o tooltip
home.informacoes._alpha = 0; //escondendo o texto

var xml:XML = new XML(); //criando objeto XML
xml.ignoreWhite = true; //evitando a importacao de espaços desnecessários

xml.onLoad = function() //funcao que carrega o XML
{
	var nodes = this.firstChild.childNodes; //cria a variavel nodes pegando o primeiro item da arvore do XML, no caso 'itens'
	numerodeelementos = nodes.length; //cria a variavel contendo o numero de elementos dentro de nodes, no caso o número de nodes 'item'

	for (i=0; i<numerodeelementos; i++) { //inicia um loop que percorrerá cada um dos elementos
		var elemento = home.attachMovie("elemento","elemento"+i,i+1); //cria um movieclip (elemento) para o item atual
		elemento._x = (distancia * i) + tamanhodoelemento/2; //posiciona horizontalmente o elemento
		elemento._y = centerY; //posiciona verticalmente o elemento
		elemento.onEnterFrame = mover; //cria o evento onEnterFrame apontando para a funcao 'mover'
		elemento.item.inner.loadMovie(nodes[i].attributes.image); //carrega a imagem dentro do movieclip
		elemento.reflexo.inner.loadMovie(nodes[i].attributes.image); //carrega a imagem dentro do reflexo
		elemento.item.onRollOver = over; //cria o evento onRollOver apontando para a funcao 'over'
		elemento.item.onRollOut = out; //cria o evento onRollOut apontando para a funcao 'out'
		elemento.item.onRelease = go; //cria o evento onRelease apontando para a funcao 'go'
		elemento.toolText = nodes[i].attributes.tooltip; //armazena o texto do tooltip na propriedade 'tooltext'
		elemento.content = nodes[i].attributes.content; //armazena o texto mais longo na propriedade 'content'
	}

}
xml.load("itens.xml"); //executa a funcao que carrega o XML, importando o arquivo 'itens.xml'

function mover() { //cria funcao que move cada um dos itens
	var movimento = (_xmouse - (centerX)) * ((-1) * speed); //calcula a posicao do mouse (esquerda ou direita) e multiplica pela variavel 'speed'
	if ((!(elemento0._x < ((-1) * (distancia * numerodeelementos) + distancia/2 + largura) && (movimento < 0))) && (!((elemento0._x > distancia/2) && (movimento > 0)))) {
	//acima: verifica se a posição do primeiro e ultimo elemento para saber se ainda é possivel movimentar o scroller
		this._x = this._x + movimento; //movimenta o elemento
	}
}

function moveTip() { //funcao que movimenta o tooltip
	home.tooltip._x = _xmouse; //movimenta o tooltip horizontalmente seguindo o mouse
	home.tooltip._y = centerY - distancia - 90; //posiciona o tooltip acima dos elementos
}

function over() { //funcao para quando o mouse está sobre o elemento
	var tw:Tween = new Tween(this._parent,"_xscale",Strong.easeOut,this._parent._xscale,90,1,true); //aumenta a escala do elemento horizontalemente
	var tw2:Tween = new Tween(this._parent,"_yscale",Strong.easeOut,this._parent._yscale,90,1,true); //aumenta a escala do elemento verticalmente
	home.tooltip.texto.text = this._parent.toolText; //seta o texto do tooltip
	var tw3:Tween = new Tween(home.tooltip,"_alpha",Strong.easeOut,home.tooltip._alpha,100,1,true); //exibe o tooltip
	home.tooltip.onEnterFrame = Delegate.create(this,moveTip); //cria o evento onEnterFrame dentro do tooltip apontando para a funcao 'moveTip'
}

function out() { //funcao para quando o mouse deixa de estar sobre o elemento
	var tw:Tween = new Tween(this._parent,"_xscale",Strong.easeOut,this._parent._xscale,100,1,true); //retorna o elemento para a sua escala horizontal normal (100%)
	var tw2:Tween = new Tween(this._parent,"_yscale",Strong.easeOut,this._parent._yscale,100,1,true); //retorna o elemento para a sua escala vertical normal (100%)
	var tw3:Tween = new Tween(home.tooltip,"_alpha",Strong.easeOut,home.tooltip._alpha,0,1,true); //oculta o tooltip
	delete 	home.tooltip.onEnterFrame; //destroi o evento onEnterFrame do tooltip (assim liberamos memoria)
}

function go() { //funcao para exibir o texto de cada elemento quando clicamos sobre ele
	var tw:Tween = new Tween(home.tooltip,"_alpha",Strong.easeOut,home.tooltip._alpha,0,1,true); //esconde o tooltip
	for (i=0; i<numerodeelementos; i++) { //inicia um loop que percorrerá cada um dos elementos, para escondê-los
		var t:MovieClip = home["elemento","fechar"+i]; //para facilitar, guarda um atalho para o elemento dentro da variavel 't'
		t.xPos = t._x; //guarda a posição X atual do elemento - [será útil para retornar ao estado inicial]
		t.yPos = t._y; //guarda a posição Y atual do elemento - ...
		delete t.item.onRollOver; //destroi o evento onRollOver do elemento (assim liberamos memoria)
		delete t.item.onRollOut; //destroi o evento onRollOut do elemento ...
		delete t.item.onRelease; //destroi o evento onRelease do elemento ...
		delete t.onEnterFrame; //destroi o evento onEnterFrame do elemento ...
		if(t != this._parent) { //seleciona apenas os elementos que não foram clicados
			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,0,1,true); //anima a escala horizontal do elemento para 0
			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,0,1,true); //anima a escala vertical do elemento para 0
			var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,100,0,1,true); // anima o alpha do elemento para 0
			
		}
		else { //seleciona o elemento clicado
			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,t._xscale,100,1,true); //anima a escala horizontal para 100%
			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,t._yscale,100,1,true); //anima a escala vertical para 100%
			var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,215,1,true);  //anima e posiciona o element em x = 85
			var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,140,1,true); //anima e posiciona o element em y = 150
			var tw5:Tween = new Tween(home.cortina,"_alpha",Strong.easeOut,0,95,1,true); //mostra a 'cortina'
			var tw5:Tween = new Tween(home.informacoes,"_alpha",Strong.easeOut,0,100,1,true); //mostra o texto
			var tw6:Tween = new Tween(home.comprar,"_alpha",Strong.easeOut,0,95,1,true); //mostra a 'cortina'
			var tw7:Tween = new Tween(home.fechar,"_alpha",Strong.easeOut,0,95,1,true); //mostra a 'cortina'
			home.informacoes.text = t.content; //seta o texto de informações com os dados do elemento
			var s:Object = this; //cria um 'atalho' para o elemento
			tw.onMotionStopped = function()	{ //seta uma ação para quando as animações terminarem
				s.onRelease = back; //cria o evento onRelease do elemento ativo para a função 'back'
			}
		}
	}
}
function back() //função para retornar ao scroller
{
	delete this.onRelease; //deleta o evento onRelease do elemento ativo (para evitar que o usuário clique 2 vezes e ocorra erro)
	var tw:Tween = new Tween(home.informacoes,"_alpha",Strong.easeOut,100,0,0.5,true); //oculta o texto
	for(var i=0;i<numerodeelementos;i++) { //inicia um loop que percorrerá cada um dos elementos, para re-exibilos
		var t:MovieClip = home["elemento"+i]; //para facilitar, guarda um atalho para o elemento dentro da variavel 't'
		if(t != this._parent) { //seleciona apenas os elementos que não foram clicados
			var tw:Tween = new Tween(t,"_xscale",Strong.easeOut,0,100,1,true); //retorna o elemento para 100% na escala horizontal
			var tw2:Tween = new Tween(t,"_yscale",Strong.easeOut,0,100,1,true); //retorna o elemento para 100% na escala vertical
			var tw3:Tween = new Tween(t,"_alpha",Strong.easeOut,0,100,1,true); //re-exibe o elemento setando o alpha para 100%
			
		} else { //seleciona o elemento clicado
			var tw3:Tween = new Tween(t,"_x",Strong.easeOut,t._x,t.xPos,1,true); //retorna o elemento para sua posição X inicial
			var tw4:Tween = new Tween(t,"_y",Strong.easeOut,t._y,t.yPos,1,true); //retorna o elemento para sua posição Y inicial
			var tw6:Tween = new Tween(home.comprar,"_alpha",Strong.easeOut,95,0,1,true); //mostra a 'cortina'
			var tw7:Tween = new Tween(home.fechar,"_alpha",Strong.easeOut,95,0,1,true); //mostra a 'cortina'
			var tw5:Tween = new Tween(home.cortina,"_alpha",Strong.easeOut,95,0,1,true); //oculta a 'cortina'
			tw3.onMotionStopped = function() { //cria uma funcao que será executada qdo as animações acabarem
				for(var i=0;i<numerodeelementos;i++) { //inicia um loop que percorrerá cada um dos elementos, para recriar os eventos onRelease, onRollover, onRollout e onEnterFrame
					var t:MovieClip = home["elemento"+i]; //para facilitar, guarda um atalho para o elemento dentro da variavel 't'
					t.item.onRollOver = Delegate.create(t.item,over); //recria o evento onRollover apontando para a funcao 'over'
					t.item.onRollOut = Delegate.create(t.item,out); //recria o evento onRollout apontando para a funcao 'out'
					t.item.onRelease = Delegate.create(t.item,go); //recria o evento onRelease apontando para a funcao 'go'
					t.onEnterFrame = mover; //recria o evento onEnterFrame apontando para a funcao 'mover'
				}
			}
		}
	}
}

Quando eu colocar o site todo no ar eu mostro para vcs!

Só que este codigo não tem muito haver com o resultado que eu quero http://www.todeschin...br/swf/home.swf este codigo que postei é uma galeria deslizante lateral não tem controle por botão nem zoon!

Elektra · Maio 2, 2010

Vixe, não sei isso tudo ainda não.

Mesmo assim tá saindo.

Com arquivos internos, motion tween na timeline mesmo e AS3 para os controles.

Já tenho os botões next/prev em loop ao clicar para os dois lados.

Já bolei algo para o zoom, fiz alguns testes. Precisa ajustes e adicionar o action.

A lógica tá funfando, o resto eu aprendo em breve.

Falta pouco.

Diogo Moura · Maio 4, 2010

Que irado Elektra muito bom mesmo!! posta o que você ta fazendo para eu tentar ir ajudando! estou animado para fazer isso tambem! você tem msn? passa aew ;D

Vixe, não sei isso tudo ainda não.

Mesmo assim tá saindo.

Com arquivos internos, motion tween na timeline mesmo e AS3 para os controles.

Já tenho os botões next/prev em loop ao clicar para os dois lados.

Já bolei algo para o zoom, fiz alguns testes. Precisa ajustes e adicionar o action.

A lógica tá funfando, o resto eu aprendo em breve.

Falta pouco.

Elektra · Maio 5, 2010

Se eu precisar de auxílio crio um tópico para isso, antes disso, vou furungando ao limite. Faço curso de AS3 em breve, não tenho pressa.

Poste você as tentativas que já fez.

Colaboro no que estiver ao meu alcance.

Todos por aqui temos nossos compromissos, não existe possibilidade de atendimento personalizado via msn ou mp.

Abs

Diogo Moura · Maio 5, 2010

Me desculpe não queria ser interpretado dessa maneira!!! pensei em pegar o seu msn para agente bater um papo trocar uma ideias e não para ter um atendimento personalizado!! queria fazer uma amizade nova com uma pessoa que tem +- os mesmo objetivos que eu! Eu tambem vou fazer um curso com sertificação adobe em flash e action script! ok? não me entenda mal por favor!

Se eu precisar de auxílio crio um tópico para isso, antes disso, vou furungando ao limite. Faço curso de AS3 em breve, não tenho pressa.

Poste você as tentativas que já fez.

Colaboro no que estiver ao meu alcance.

Todos por aqui temos nossos compromissos, não existe possibilidade de atendimento personalizado via msn ou mp.

Abs

Elektra · Maio 5, 2010

Não interpretei mal, fique tranquilo.

Mas considere a situação, o que não falta por aqui são oportunistas que esperam ganhar o serviço de mão beijada e apressados em fazer amizades.

Abs.

Diogo Moura · Maio 5, 2010

AEUHIAUHEIAH!! VALEW ELECTRA!! assim que eu fiser eu te mostro

Não interpretei mal, fique tranquilo.

Mas considere a situação, o que não falta por aqui são oportunistas que esperam ganhar o serviço de mão beijada e apressados em fazer amizades.

Abs.

Arquivado

Galeria rotativa com controle

Recommended Posts

Diogo Moura 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elektra 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diogo Moura 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elektra 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diogo Moura 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elektra 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diogo Moura 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Elektra 102

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diogo Moura 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