nov 21, 2009

Posted by Lucas in Destaque, Interface, Tutoriais | 1 comment

Slide Itens em Actionscript 3.0

Slide Itens em Actionscript 3.0

Salve pessoal, durante muito tempo em uma determinada agência que eu trabalhei eu utilizei essa classe (ainda em Actionscript 2.0) para apresentar produtos, imagens, noticias etc…
Por esse motivo decidi fazer uma versão dela para Actionscript 3.0 espero que ela possa ser útil á você nos seus trabalhos assim como ela foi muito útil para mim!
Lembre-se siga-me no Twitter @lmcosta

Classe FullSlide.as

/**
 * @author  Lucas Marçal
 * @link    www.lucasmarcal.com.br/blog
 * @email   inbox@lucasmarcal.com.br
 * @version 1.0
 */
package lmcosta.slide
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import gs.*;
	import gs.easing.*;

	public class FullSlide extends MovieClip
	{
		/**
		 * DEFININDO PROPRIEDADES
		 */
		private var itensMc:Array;
		private var tipoSlide:String;
		private var posX:Number;
		private var posY:Number;
		private var distanciaItens:Number;
		private var distanciaItensFoco:Number;
		private var tempoEase:Number;
		private var distancia:Number;
		private var itemAtual:Number;
		private var itemX:Number;
		private var itemY:Number;

		public function FullSlide() {}

		/**
		 *
		 * @param	tipo:            Tipo de alinhamento X ou Y
		 * @param	arr :            Array que contém os MovieClips
		 * @param	distancia:       Distancia dos MovieClips na hora do alinhamento
		 * @param	foco:            Distancia que o item deve se mover
		 * @param	indiceAtual:     MovieClip Atual
		 * @param	posicaoX:        Posição em X
		 * @param	posicaoY:        Posição em Y
		 */
		public function setSlide(tipo:String,arr:Array,distancia:Number, foco:Number,indiceAtual:Number,posicaoX:Number,posicaoY:Number):void
		{
			this.tipoSlide = tipo;
			this.itensMc = arr;
			this.itemAtual = indiceAtual;
			this.distanciaItens = distancia;
			this.distanciaItensFoco = foco;
			this.posX = posicaoX;
			this.posY = posicaoY;
			this.tempoEase = 0.5;
			setPosItens();
		}

		private function setPosItens():void
		{

			for (var i:Number = 0; i < this.itensMc.length; i++)
			{
				if (this.tipoSlide == "Y")
				{
					this.distancia = this.itemAtual - i;
					this.itemY = this.posY + (this.distancia * - this.distanciaItens);
					this.itensMc[i].x = Math.round(this.posX);
					if (this.distancia != 0)
					{
						this.itemY += (Math.round(this.distanciaItensFoco) - Math.round(this.distanciaItens)) * (Math.round(this.distancia) > 0 ? -1 : +1);
					}
					TweenMax.to(this.itensMc[i], this.tempoEase, {y:Math.round(this.itemY),ease:Expo.easeOut});
				}
				else
				{
					this.distancia = this.itemAtual - i;
					this.itemX = this.posX + (this.distancia * - this.distanciaItens);
					this.itensMc[i].y = Math.round(this.posY);
					if (this.distancia != 0)
					{
						this.itemX += (Math.round(this.distanciaItensFoco) - Math.round(this.distanciaItens)) * (Math.round(this.distancia) > 0 ? -1 : +1);
					}
					TweenMax.to(this.itensMc[i], this.tempoEase, {x:Math.round(this.itemX),ease:Expo.easeOut});
				}
				if(i - this.itensMc.length != 1)
				{
					TweenMax.to(this.itensMc[i], this.tempoEase, { blurFilter: { blurX:10, blurY:10, quality:1 }, z:1 } );
				}
				if (this.tempoEase > 0)
				{
					TweenMax.to(this.itensMc[this.itemAtual], this.tempoEase/2, {blurFilter:{blurX:0,blurY:0, quality:2},z:1});
				}
				var refItem:MovieClip = this.itensMc[i] as MovieClip;
				refItem.buttonMode = true;
				refItem.addEventListener(MouseEvent.MOUSE_DOWN , onDown);
				refItem.addEventListener(MouseEvent.MOUSE_OVER , onOver);
				refItem.addEventListener(MouseEvent.MOUSE_OUT , onOut);
				refItem.nome = i;
			}
		}

		public function moveItens(indice:Number):void
		{
			this.setItens(this.itemAtual + indice);
		}

		private function setItens(indice:Number):void
		{

			if (indice < 0) indice = 0;
			if (indice > this.itensMc.length - 1) indice = this.itensMc.length - 1;
			if (indice != this.itemAtual)
			{
				this.itemAtual = indice;
				this.setPosItens();
			}
		}

		private function onOut(e:Event):void
		{
			TweenMax.to(e.target, 0.2, { tint:null, ease:Linear.easeNone } );
		}

		private function onOver(e:Event):void
		{
			TweenMax.to(e.target, 0.2, { tint:0xcccccc, ease:Linear.easeNone } );
		}

		private function onDown(e:Event):void
		{
			//trace("item " + e.target.nome);
			this.setItens(e.target.nome)
		}

	}

}

BotaoControle.as

/**
 * @author  Lucas Marçal
 * @link    www.lucasmarcal.com.br/blog
 * @email   inbox@lucasmarcal.com.br
 * @version 1.0
 */
package lmcosta.slide
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import lmcosta.slide.FullSlide

	public class BotaoControle extends FullSlide
	{
		internal var ref:FullSlide
		internal var indice:Number;

		public function BotaoControle(_objeto:MovieClip,_fullSlide:FullSlide,_qtdItemMove:Number)
		{
			this.ref = _fullSlide;
			this.indice = _qtdItemMove;

			_objeto.buttonMode = true;
			_objeto.addEventListener(MouseEvent.MOUSE_DOWN, onDow);
		}

		private function onDow(e:MouseEvent):void
		{
			this.ref.moveItens(this.indice);
		}
	}

}

Coloque esse código no frame de action da sua aplicação e crie os MovieClips.

import lmcosta.slide.FullSlide
import lmcosta.slide.BotaoControle;

var mySlide:FullSlide = new FullSlide()
var _arr:Array =  new Array(mc1,mc2,mc3,mc4,mc5)

this.mySlide.setSlide("X",_arr,mc1.width, mc1.width,0,184,72);
var refVai:BotaoControle = new BotaoControle(btVai.btAtiva,this.mySlide,1)
var refVem:BotaoControle = new BotaoControle(btVem.btAtiva,this.mySlide,-1)

addChild(this.mySlide);

Exemplo
Arquivos do Tutorial

Abraço a todos, semana que vem tem mais!

  1. muito bom lucas, parabéns!

    mas como faço se eu precisar adicionar um evento para quando o mc em destaque fosse clicado pela segunda vez? por exemplo, para abrir uma foto em tamanho maior ou acessar alguma secao do site?

    posso adicionar esse evento na timeline? ou vai entrar em conflito com o eventListener da classe?

    valeu!!!

Leave a Reply