Necesito ayuda de un experto en ActionScript

lucasbanegas · #1 (**permalink**) 11/04/2010, 07:19

Estoy haciendo una animación en Flash para un Country. La animación debe tener tres carrouseles 3D dinámicos (cargan las imágenes desde un archivo xml).

Un carrousel es para mostrar vistas generales del country. Otro carrousel para mostrar las casas que se venden. Otro para mostrar avances de obras.

Encontré por la web un carrousel 3D con carga dinámica de imágenes que me gustó, pero me encuentro con un problema. El carrousel se crea mediante clases vinculadas. Una clase genera las miniaturas y la otra clase genera el carrousel. Estas clases levantan datos del XML y en base a esos datos determinan la velocidad, las dimensiones, efectos y demás. A los resultados lo envían a instancias de MovieClip dentro del FLA (mc0, mc1 y mc2)

Ahora bien, estos archivos de ActionScript están programados para enviar los resultados a esas instancias y para leer el archivo carrousel.xml

¿Que necesito?

Hacer 3 copias de los archivos Carrousel.as, Thumbnail.as y carrousel.xml
Se me ocurre que podría quedar así:

CasasCarrousel.as, CasasThumbnail.as y casascarrousel.xml
CountryCarrousel.as, CountryThumbnail.as y countrycarrousel.xml
ObrasCarrousel.as, ObrasThumbnail.as y obrascarrousel.xml

Y duplicar las instancias, que podría quedar así:

casasmc0, casasmc1 y casasmc2
countrymc0, countrymc1 y countrysmc2
obrasmc0, obrasmc1 y obrasmc2

Pero en el código ¿que debería cambiar?
Les paso abajo los códigos de cada archivo:

lucasbanegas · #2 (**permalink**) 11/04/2010, 07:20

Archivo Carrousel.as

Código:

import flash.filters.BlurFilter;
import mx.utils.Delegate;
class oxylus.carousel.Carousel extends MovieClip {
	private var node:XMLNode;
	private var _vertical:Boolean;
	private var _autoMove:Boolean;
	private var _speed:Number;
	private var _maxSpeed:Number;
	private var _radiusx:Number;
	private var _radiusy:Number;
	private var _stopOnRollover:Boolean;
	private var _allButtons:Boolean;
	private var _blurScale:Number;
	private var _hitW:Number;
	private var _hitH:Number;
	private var xml:XML;
	private var Thumbs:Array;
	private var refAngle:Number = 0;
	private var angle:Number;
	private var baseDepth:Number;
	private var once:Boolean = false;
	public function Carousel() {
		Thumbs = new Array();
		xml = new XML();
		xml.ignoreWhite = true;
		xml.onLoad = Delegate.create(this, dataLoaded);
		xml.load("carousel.xml");
	}
	private function dataLoaded(s) {
		if (!s) {
			trace("Could not load xml ! Check xml (must be carousel.xml)");
			return;
		}
		node = xml.firstChild;
		_vertical = node.attributes.vertical == "yes";
		_autoMove = node.attributes.autoMove == "yes";
		_maxSpeed = _speed=Number(node.attributes.maxSpeed);
		_radiusx = Number(node.attributes.radiusX);
		_radiusy = Number(node.attributes.radiusY);
		_blurScale = Number(node.attributes.blurScale);
		_stopOnRollover = node.attributes.stopOnRollover == "yes";
		_allButtons = node.attributes.allButtons == "yes";
		_hitW = Number(node.attributes.hitAreaWidth)/2;
		_hitH = Number(node.attributes.hitAreaHeight)/2;
		_radiusx = Number(node.attributes.radiusX);
		//
		var p:XMLNode = node.firstChild;
		var i:Number = 0;
		baseDepth = this.getNextHighestDepth();
		for (; p != null; p=p.nextSibling, i++) {
			var tn:MovieClip = this.attachMovie("Thumbnail", "tn"+i, baseDepth+i);
			tn.setData(p, node);
			if (_stopOnRollover) {
				tn.onMouseOver = Delegate.create(this, Pause);
				tn.onMouseOut = Delegate.create(this, Resume);
			}
			Thumbs.push(tn);
			//break;
		}
		angle = 360/Thumbs.length;
		if (!_autoMove) {
			spin();
			this.onMouseMove = mouseMoveHandler;
		} else {
			Resume();
		}
	}
	private function Pause() {
		delete this.onEnterFrame;
	}
	private function Resume() {
		this.onEnterFrame = spin;
	}
	private function spin() {
		for (var i = 0; i<Thumbs.length; i++) {
			var tn:MovieClip = Thumbs[i];
			var crtAngle:Number = (refAngle+i*angle)%360;
			if (crtAngle<0) {
				crtAngle += 360;
			}
			if (_vertical) {
				tn._x = Math.sin((crtAngle)/180*Math.PI)*_radiusy;
				tn._y = Math.cos((crtAngle)/180*Math.PI)*_radiusx;
			} else {
				tn._y = Math.sin((crtAngle)/180*Math.PI)*_radiusy;
				tn._x = Math.cos((crtAngle)/180*Math.PI)*_radiusx;
			}
			//
			var tAngle:Number = (crtAngle+90)%360;
			if (tAngle>180) {
				tAngle = 360-tAngle;
			}
			var minScale:Number = 50;
			var minAlpha:Number = 30;
			tn._xscale = tn._yscale=minScale+(100-minScale)*tAngle/180;
			var lim:Number = 90;
			if (tAngle<=lim) {
				tn.filters = blur(_blurScale-_blurScale*tAngle/lim);
				tn._alpha = minAlpha+(100-minAlpha)*tAngle/lim;
			} else {
				tn.filters = blur[0];
				tn._alpha = 100;
			}
			var crtDepth:Number = baseDepth+Math.floor(2*tAngle/angle);
			if (tn.getDepth() != crtDepth) {
				tn.swapDepths(crtDepth);
			}
			if (!_allButtons) {
				tn.enabled = tAngle>=90;
			}
		}
		refAngle += _speed;
	}
	private function blur(blur) {
		blur = Math.round(blur);
		if (blur<1) {
			return [];
		}
		return [new BlurFilter(blur, blur, 2)];
	}
	private function mouseMoveHandler() {
		if (_xmouse<-_hitW || _xmouse>_hitW || _ymouse<-_hitH || _ymouse>_hitH) {
			return;
		}
		if (!once) {
			once = true;
			Resume();
		}
		if (!_vertical) {
			_speed = _maxSpeed*_xmouse/_hitW;
		} else {
			_speed = _maxSpeed*_ymouse/_hitH;
		}
	}
}

lucasbanegas · #3 (**permalink**) 11/04/2010, 07:21

Archivo Thumbnail.as

Código:

import flash.display.BitmapData;
class oxylus.carousel.Thumbnail extends MovieClip {
	private var Brd:MovieClip;
	private var Msk:MovieClip;
	private var Img:MovieClip;
	private var Rfl:MovieClip;
	private var RMsk:MovieClip;
	private var Tip:MovieClip;
	private var w:Number;
	private var h:Number;
	private var _reflections:Boolean = true;
	private var _showBorder:Boolean = true;
	private var _showTooltip:Boolean = true;
	private var node:XMLNode;
	private var mcl:MovieClipLoader;
	public var onMouseOver:Function;
	public var onMouseOut:Function;
	public function Thumbnail() {
		Brd = this["mc0"];
		Msk = this["mc1"];
		Tip = this["mc2"];
		Tip._alpha = 0;
		Img = this.createEmptyMovieClip("_img_", this.getNextHighestDepth());
		Img._x = Msk._x;
		Img._y = Msk._y;
		Img._alpha = 0;
		w = Msk._width;
		h = Msk._height;
		Msk._alpha = 0;
		this.hitArea = Msk;
		Brd._alpha = 0;
		this._visible = false;
		mcl = new MovieClipLoader();
	}
	private function fadeTo(mc:MovieClip, al:Number) {
		var p:Number = 10;
		mc.onEnterFrame = function() {
			if (Math.abs(this._alpha-al)<=p) {
				this._alpha = al;
				delete this.onEnterFrame;
				return;
			}
			if (this._alpha>al) {
				this._alpha -= p;
			} else {
				this._alpha += p;
			}
		};
	}
	private function onRollOver() {
		if (_showBorder) {
			fadeTo(Brd, 100);
		}
		if (_showTooltip) {
			fadeTo(Tip, 100);
		}
		onMouseOver.call(this);
	}
	private function onRollOut() {
		if (_showBorder) {
			fadeTo(Brd, 0);
		}
		if (_showTooltip) {
			fadeTo(Tip, 0);
		}
		onMouseOut.call(this);
	}
	private function onRelease() {
		getURL(node.attributes.link, node.attributes.target);
	}
	private function onReleaseOutside() {
		onRollOut();
	}
	public function setData(n:XMLNode, s:XMLNode) {
		node = n;
		_reflections = s.attributes.reflections == "yes";
		_showBorder = s.attributes.showBorder == "yes";
		_showTooltip = s.attributes.showTooltip == "yes";
		if (_showTooltip) {
			var TipBody:MovieClip = Tip["mc0"];
			var TipText:TextField = Tip["mc1"];
			TipText.autoSize = "center";
			TipText.text = node.attributes.tooltip;
			TipBody._width = Math.round(TipText._width);
			TipBody._x = -Math.round(TipBody._width/2);
		} else {
			Tip.swapDepths(this.getNextHighestDepth());
			Tip.removeMovieClip();
		}
		var buf:MovieClip = this.createEmptyMovieClip("_buf_", this.getNextHighestDepth());
		buf._visible = false;
		mcl.addListener(this);
		mcl.loadClip(node.attributes.src, buf);
	}
	private function onLoadInit(buf) {
		var bd:BitmapData = new BitmapData(w, h, true, 0);
		bd.draw(buf);
		buf.removeMovieClip();
		Img.attachBitmap(bd, Img.getNextHighestDepth(), "auto", true);
		fadeTo(Img, 100);
		if (_reflections) {
			Rfl = this.createEmptyMovieClip("_ref_", this.getNextHighestDepth());
			Rfl.attachBitmap(bd, Rfl.getNextHighestDepth());
			Rfl._alpha = 0;
			Rfl._yscale = -100;
			Rfl._x = Img._x;
			Rfl._y = Img._y+2*h;
			Rfl.cacheAsBitmap = true;
			RMsk = this.attachMovie("TransparencyMask", "_ref_msk_", this.getNextHighestDepth());
			RMsk.cacheAsBitmap = true;
			RMsk._alpha = 20;
			RMsk._width = w;
			RMsk._height = h/3;
			RMsk._x = Img._x;
			RMsk._y = Img._y+h;
			Rfl.setMask(RMsk);
			fadeTo(Rfl, 100);
		}
		this._visible = true;
	}
	public function get width() {
		return w;
	}
	public function get height() {
		return h;
	}
}

lucasbanegas · #4 (**permalink**) 11/04/2010, 07:22

Archivo carrousel.xml

Código XML:

Ver original<!--
XML CONFIGURATION HELP
======================
 
vertical - (yes/no) vertical movement
autoMove -  (yes/no) if set to yes, the carousel will spin by default
maxSpeed - set maximum speed for the carousel
radiusX, radiusY - set carousel x/y radius (these two are inverted in vertical mode)
blurScale - set blur scale value (recomended values are powers of 2: 2 4 8 16 32 ...)
reflections - (yes/no) enable/disable reflections
showBorder - (yes/no) if set to yes, it will show a border around the image
showTooltip - (yes/no) if set to yes, it will show a tooltip above the image
stopOnRollOver - (yes/no) if set to yes, it will pause the movement when you roll over a thumbnail
allButtons - (yes/no) if set to no, the buttons in the background will not interact with the mouse
hitAreaWidth, hitAreaHeight - define the hit area where the carousel will interact with the mouse
 
-->
 
<carousel vertical="no" autoMove="yes" maxSpeed="1" radiusX="200" radiusY="20" blurScale="8" reflections="yes" showBorder="yes" showTooltip= "yes" stopOnRollover="yes" allButtons="no" hitAreaWidth="590" hitAreaHeight="300">
    <image src="img/01.png" tooltip="Ink Box" link="http://www.google.com/" target="_self" />
    <image src="img/02.png" tooltip="Forward Digital" link="http://www.google.com/" target="_self" />
    <image src="img/03.png" tooltip="Vocanet" link="http://www.google.com/" target="_self" />
    <image src="img/04.png" tooltip="Forward Digital" link="http://www.google.com/" target="_self" />
    <image src="img/05.png" tooltip="FD" link="http://www.google.com/" target="_self" />
    <image src="img/06.png" tooltip="OXYLUS Development" link="http://www.google.com/" target="_self" />
    <image src="img/07.png" tooltip="Sold Crazy" link="http://www.google.com/" target="_self" />
</carousel>

Diegoazul · #5 (**permalink**) 11/04/2010, 12:44

Mira aquí

Tutorial carrusel parte 1

(con .fla)
y aqui:

Tutorial carrusel parte 2 (con xml)
(con .fla)
Aqui hay otra opcion en Español:

carrusel AS2 sin XML

y carrusel AS3 3D

es mejor desde mi punto de vista estos tutoriales que te enseñan como hacerlo, e incluso para los ultimos dos enlaces Jose el sargento le puedes consultar tus dudas, si intentas bajar código de la web y solo cambiar variables puede tener resultado ó no también nunca podrias tenerlo.

lucasbanegas · #6 (**permalink**) 13/04/2010, 04:47

Cita:

Iniciado por Diegoazul

Mira aquí

[URL="http://www.gotoandlearn.com/play?id=32"]Tutorial carrusel parte 1[/URL]

(con .fla)
y aqui:

[URL="http://www.gotoandlearn.com/play?id=33"]Tutorial carrusel parte 2 (con xml)[/URL]
(con .fla)
Aqui hay otra opcion en Español:

[URL="http://www.sargentoweb.com/as2/?doc=14"]carrusel AS2 sin XML[/URL]

[URL="http://www.sargentoweb.com/as3/?doc=35"]y carrusel AS3 3D[/URL]

es mejor desde mi punto de vista estos tutoriales que te enseñan como hacerlo, e incluso para los ultimos dos enlaces Jose el sargento le puedes consultar tus dudas, si intentas bajar código de la web y solo cambiar variables puede tener resultado ó no también nunca podrias tenerlo.

Muchas gracias amigo