Funcion para multiples clips

Buen día!

Estoy haciendo un pequeño mapa (MiMapa) que está a 100%, éste tiene varios iconos dentro, que están a una escala de 50% (Icono1, Icono2, etc...) y algunos elementos no visibles (Direccion1, Direccion2, etc...)

Cómo puede hacer una función que cambie la escala de éstos iconos (Icono1, Icono2, etc...) a 30% y 40% y muestre mis elementos no visibles (Direccion1, Direccion2, etc...) cuando la escala de MiMapa este a 300% y 500%.

Gracias anticipadas y saludos cordiales.

Postea el código que tienes hasta este momento.
Es mejor práctica tener los íconos fuera del mapa con un tamaño bueno para visibilidad y lo que se hace es que al aumentar el mapa estos se sitúen en la posición que le corresponde, así siempre presentarían el mismo tamaño.

Y los datos que tienes ocultos de que se tratan?

Hasta el momento tengo planeado resolver el zoom con un pequeño menu con tres estados (4 fotogramas) para ampliarlo a 200% 300% y 400%, con esto (para tener easing):

Código :

import mx.transitions.Tween;
import mx.transitions.easing.*;
var zoomx1:Tween;
var zoomy2:Tween;
ZoomIN.onRelease = function(){
   zoomx1 = new Tween(mapa, "_xscale", None.easeNone, 100, 200, 0.5, true);
   zoomy1 = new Tween(mapa, "_yscale", None.easeNone, 100, 200, 0.5, true);
};
ZoomOUT.onRelease = function(){
   zoomx1 = new Tween(mapa, "_xscale", None.easeNone, 200, 100, 0.5, true);
   zoomy1 = new Tween(mapa, "_yscale", None.easeNone, 200, 100, 0.5, true);
};

Para el drag del mapa (aplica si la escala del mapa es de mas del 100%):

Código :

onClipEvent (mouseDown) {
   if (this.hitTest(_root._xmouse, _root._ymouse, true) && this._xscale>100) {
      startDrag(this);
   }
}
onClipEvent (mouseUp) {
   stopDrag();
}

Estaba viendo lo de la función y creo que es con for(var i=1;i<101;i++){.

Espero ir bien encaminado o no estar tan perdido!

Saludos cordiales.

Se me olvidaba, los datos ocultos son algunos nombres de calles que al estar el mapa al 100% estan ocultos porque se ve muy saturado el mismo.

Preferiría que los iconos estén dentro del clip, para que al reducirle la escala a todos los iconos se mantengan sobre su eje.

Es parecido a esto. Lo que quiero no es tan complejo como ese, lo que necesito es sólo zoom in, zoom out y drag



Saludos.

Es mejor que hagas una función a la que le envíes el número de zoom que quieres hacer y te utilice estas mismas funciones para que no tengas que repetir el código para los botones de 300 y 400.

Y otra cosa, si son muchos íconos es mejor que utilices una librería de clases como TweenMax, TweenLite o Tweener, los Tween de Adobe a pesar de ser complicados a la hora de implementarlos, consumen muchos recursos, por lo que si tienes muchos Tween a la vez tu aplicación puede tornarse lenta.

Ahora trata de que los íconos que estén dentro del mapa estén a 100%, no a 50% para no complicar el cálculo que hay que realizar. El siguiente ejemplo lo realicé pensando que estos tienen el 100% de escala.

Imagina que los íconos dentro de tu mapa tienen nombres de instancia "icono0", "icono1", "icono2", etc... he creado una variable que te dice la cantidad de íconos llamada totalIcons, bueno debe ser algo como esto:

Código ActionScript :

import mx.transitions.Tween;
import mx.transitions.easing.*;

var zoomx1:Tween;
var zoomy2:Tween;
var zoomIconX:Tween;
var zoomIconY:Tween;

var totalIcons:Number = 4;

ZoomIN.onRelease = function():Void  {

   var escala:Number = 200;

   zoomx1 = new Tween(mapa, "_xscale", None.easeNone, 100, escala, 0.5, true);
   zoomy1 = new Tween(mapa, "_yscale", None.easeNone, 100, escala, 0.5, true);

   for (var i:Number = 0; i<totalIcons; i++) {

      zoomIconX = new Tween(mapa["icono" + i], "_xscale", None.easeNone, 100, 10000 / escala, 0.5, true);
      zoomIconY = new Tween(mapa["icono" + i], "_yscale", None.easeNone, 100, 10000 / escala, 0.5, true);

   }
   
};

ZoomOUT.onRelease = function():Void  {
   
   var escala:Number = 200;

   zoomx1 = new Tween(mapa, "_xscale", None.easeNone, escala, 100, 0.5, true);
   zoomy1 = new Tween(mapa, "_yscale", None.easeNone, escala, 100, 0.5, true);
   
   for (var i:Number = 0; i<totalIcons; i++) {

      zoomIconX = new Tween(mapa["icono" + i], "_xscale", None.easeNone, 10000 / escala, 100, 0.5, true);
      zoomIconY = new Tween(mapa["icono" + i], "_yscale", None.easeNone, 10000 / escala, 100, 0.5, true);

   }

};

Funciona todo perfectamente, creo que voy a quedarme solo con un nivel de zoom, probablemente 300% o 400%.

Solamente una molestia más, como podría regresar el mapa a _x y _y original? cuando se le da ZoomOUT? siempre con el easing? estuve probando pero no funciona.

Cuantos Tween's crees que serían muchos? por el momento creo que serán de 10 a 15.

Muchas gracias,

Para que regrese a las _x y las _y originales crea un Tween con _x y otro con _y hasta la posición original en el ZoomOut.

Si no te convencí para que utilizaras las clases que te recomendé mira un test de velocidad con todas estas clases para que veas el Tween de Adobe donde lo sitúas, si tratas de ejecutarlos para animar muchos objetos posiblemente tengas que reiniciar el explorador:

http://blog.greensock.com/tweening-speed-test/

Tienes razón, el Tween de Adobe si hizo que reiniciara mi navegador.

Ahora, cual de estas crees que me pueda servir mas? TweenMax, TweenLite o Tweener.

Saludos.

TweenMax o TweenLite son las mismas librerías lo que TweenMax tiene más métodos y propiedades, en mi opinión TweenMax.

Perdón por mi ignorancia, pero es la primera vez que uso estas librerías, estuve leyendo otros post donde tu colaboras pero no entiendo como se importa TweenMax.

Podrías ayudarme con esto?

Muchas gracias.

Pon la carpeta "gs" en el mismo lugar que tu flash, después en el primer frame de tu flash o en la clase que vayas a utilizar importas la librería:

Código ActionScript :

import gs.TweenMax;
import gs.easing.*;

Ya después puedes utilizarla en cualquier lugar, lo que hacias con el Tween de Adobe:

Código ActionScript :

zoomx1 = new Tween(mapa, "_xscale", None.easeNone, 100, escala, 0.5, true); 
zoomy1 = new Tween(mapa, "_yscale", None.easeNone, 100, escala, 0.5, true); 

Ahora lo haces así:

Código ActionScript :

TweenMax.to(mapa, .5, {_xscale:escala, _yscale:escala, ease:Linear.easeNone});

Y lo que deseabas hacer que volviera a su escala y su posición incial (si tienes los valores de la posición incial como posIniX y posIniY)

Código ActionScript :

TweenMax.to(mapa, .5, {_xscale:100, _yscale:100, _x:posIniX, _y:posIniY, ease:Linear.easeNone});

Después de intentarlo varias veces y documentarme más, logre hacerlo gracias a tu ayuda.
Habia bajado la librería de TweenMax para AS3 (ya tenia rato de no usar Flash) y me tope con algo desconocido!

Dedicandole más tiempo a ésto me di cuenta que hay una para AS2 y empece a leerlo.

Espero esté correcto, pero funciona!

Código :

import gs.TweenMax;
import gs.easing.*;
var totalIcons:Number = 30;
ZoomIN.onRelease = function():Void{
   var escala:Number = 400;
   zoom = new TweenMax.to(mapa,.3,{_xscale:escala, _yscale:escala, ease:Linear.easeNone});
   for (var i:Number = 0; i<totalIcons; i++){
      zoomi = new TweenMax.to(mapa["icono"+i],.3,{_xscale:10000/escala, _yscale:10000/escala, ease:Linear.easeNone});
   }
};
ZoomOUT.onRelease = function():Void{
   var escala:Number = 100;
   zoom = new TweenMax.to(mapa,.3,{_xscale:escala, _yscale:escala, ease:Linear.easeNone});
   inicio = new TweenMax.to(mapa, .3, {_xscale:100, _yscale:100, _x:209, _y:200, ease:Linear.easeNone});
   for (var i:Number = 0; i<totalIcons; i++){
      zoomi = new TweenMax.to(mapa["icono"+i],.3,{_xscale:10000/escala, _yscale:10000/escala, ease:Linear.easeNone});
   }
};

Si he notado la diferencia con los Tween de Adobe y creo que fue buena la decision de usar TweenMax.

Muchas gracias por tu orientación, lo de regresar el mapa a la posición original funciona perfectamente!

Sólo queda buscar algo para que cuando se arraste no se arrastre más alla del area de visivilidad.

Reitero mi agradecimiento y nos leemos en la proxima.

PS. voy a leer más para actualizarme a esto de AS3

Al más que velocidad de fotogramas me recomiendan usar, es para web.

Si lo trabajas todo a base de scripts, puedes utilizar una velocidad de fotogramas cercana a 24 o 30 fps, ahora si tienes animaciones a base de frames, te recomiendo utilizar la standar 12 fps.