logo
  • Home
  • Acerca
  • Autores
  • Faq
  • Rede
  Twitter   Feed-me! RSS!
Nov 22

Slide Itens em Actionscript 3.0

Escrito por Lucas Marçal em Destaque, FullSlide, interface, Tutoriais @ 11 22nd, 2009 | via http://www.lucasmarcal.com.br/blog/ | Sem comentários
Lucas Marçal
? X
  • Bookmarks

Blinkbits BlinkLists BlogLines Blogmarks Buddymarks CiteULike Co.mments Del.icio.us Digg Diigo

Fark Feed Me Links Furl Google Linkagogo ma.gnolia Mister Wong Newsvine Propeller Rawsugar

Reddit Rojo Simpy Sphinn Spurl Squidoo StumbleUpon Tailrank Technorati Yahoo

More »

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!

|

ACERCA

O que é o RedeRIA ?

O redeRIA não é nada mais que um agregador de feed's que disponibiliza o conteudo de varios blogs e autores ao redor do mundo RIA, actualmente agregamos mais de 2795 entradas vindas de 53 blogs especializados em ria’s, pelo que só fica a ganhar em assinar o feed ou seguir a comunidade no twitter.

Se acha que o seu blog ou um blog de um amigo é interessante e util para os leitores o redeRIA, faça a sua submissão aqui.

Feed: assine já
Twitter: siga-nos

GOOGLE

Votação


Deveria o RedeRia agregar conteúdo em inglês?
Ver Resultados

AUTORES


Eduardo KrausAlexandre TadashiBindableCognitiva SoluçõesDaniel LopesDaniel SchmitzDanielPedrinhaDClick TeamEbercomEdgard DavidsonElvis FernandesErko BrideeFabiel PrestesFábio Batista da SilvaFabio da SilvaFabriccio BernardesFelipe BorellaFlavia MoreiraGabriel VersalliniGabriela T. PerryIgor MusardoJanderson CardosoJoão AugustoJose Carlos FielKelps SousaLeonardo FrançaLucas MarçalLuis MessiasLuiz TarabalMario JuniorMário SantosMauro MartinsPablo SouzaPedro ClaudioreneRia BrazilriaPTRicardo CerqueiraRobson FernandesRodrigo Pereira FragaSaintBrSamuelFacchinelloSergio SouzaSilva DeveloperStefan HorochovecTech CaffeTecinforThiago BuenoVedVinícius SandimWillian ManoXAML Cast

PUBLICIDADE








Powered by Wordpress & msdevstudio.com