Comunidad de diseño web y desarrollo en internet online

La clase Tween Parte 2

Citar            
MensajeEscrito el 23 Ene 2009 05:27 pm
estimados: estoy buscando hacer el ejemplo del siguiente link. el problema es.. prueben hacer rollOver y dejar el mouse quieto.. verán que la animación salta al primer frame. y también me gustaría que al hacerle click a alguno de los botónes el botón quede en grande y cambié al color gris.. y si haces click en otro ya habiendo presionado uno.. este cambia al color que tenia antes y se achica.. lo que sería la nimación a la inversa

Por Freeki

Claber

183 de clabLevel



Genero:Masculino  

Desarrollador Web Uy

firefox
Citar            
MensajeEscrito el 23 Ene 2009 05:39 pm
Creo que se robaron el link de tu post XD

Por gcm

Claber

557 de clabLevel

3 tutoriales

Genero:Masculino  

Diseñador Grafico y Web, Geek

firefox
Citar            
MensajeEscrito el 24 Ene 2009 06:48 pm
jeje que mal che! . este es el link

Código :

http://www.webintenta.com/la-clase-tween-parte-2-creacion-de-un-rollover-avanzado.html

Por Freeki

Claber

183 de clabLevel



Genero:Masculino  

Desarrollador Web Uy

msie
Citar            
MensajeEscrito el 24 Ene 2009 08:14 pm

Freeki escribió:

prueben hacer rollOver y dejar el mouse quieto.. verán que la animación salta al primer frame. y también me gustaría que al hacerle click a alguno de los botónes el botón quede en grande y cambié al color gris.. y si haces click en otro ya habiendo presionado uno.. este cambia al color que tenia antes y se achica.. lo que sería la nimación a la inversa


Lo mejor sera que en lo futuro postees el codigo, para que uno no tenga que estar descargando archivos para ver que codigo se uso, porfavor.

Bueno, :P pues mira, aun asi baje el archivo y reescribi el codigo, para aportar la primer funcionalidad que necesitabas, ademas de hacerlo mas simple, faltaria lo del color, pero eso te toca a ti, te doy una pista: "flash.geom.ColorTransform", si tienes dudas, las posteas en este hilo

Código ActionScript :

//COPY PASTE
import mx.transitions.Tween;
import mx.transitions.easing.*;

var Release:Function = function()
{
   this.selected = this.selected ? false : true ;
   for( var i in this._parent )
   {
      if( this._parent[i].selected == true && this._parent[i] != this)
      {
         trace(i)
         this._parent[i].selected = false;
         this._parent[i].onRollOut();
      }
   }
}
var RollOver:Function = function() {
   if( this.selected != true)
   {
      this.miXTween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 200, 1.5, true);
      this.miYTween = new Tween(this, "_yscale", Bounce.easeOut, this._xscale, 200, 1.5, true);
   }
};
var RollOut:Function = function() {
   if( this.selected != true)
   {
      this.miXTween.stop();
      this.miYTween.stop();
      this.miXTween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 100, 1.5, true);
      this.miYTween = new Tween(this, "_yscale", Bounce.easeOut, this._xscale, 100, 1.5, true);
   }
};


_root.Cuadro4_mc.onRollOut = _root.Cuadro3_mc.onRollOut = _root.Cuadro2_mc.onRollOut = _root.Cuadro1_mc.onRollOut = RollOut;
_root.Cuadro4_mc.onRollOver = _root.Cuadro3_mc.onRollOver = _root.Cuadro2_mc.onRollOver = _root.Cuadro1_mc.onRollOver = RollOver;
_root.Cuadro4_mc.onRelease = _root.Cuadro3_mc.onRelease = _root.Cuadro2_mc.onRelease = _root.Cuadro1_mc.onRelease = Release;

Suerte.

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

firefox
Citar            
MensajeEscrito el 26 Ene 2009 03:00 pm
hola.. muy bueno tu código, me gusta no se me había ocurrido guardar funciones en variables. y la verdad que ahora me parece indispensable. está muy claro, gracias! lo voy a usar.. ahora estoy intentando que si le haces por ejemplo release al cuadro_mc1 este se queda grande, pero si estando grande haces rollOver en otro cuadro este se achica y se agranda el otro como siempre.. pero si sacas el mouse de los cuadros el que seleccioneste se vuelve a agradar y queda grande. no se si me explico... haber que me aconsejas.. pienso poner un enterFrame que compruebe si hay alguno seleccionado.. y si es así que se ejecute una sola vez la funcion:

Código :

 this.miXTween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 200, 1.5, true); 
      this.miYTween = new Tween(this, "_yscale", Bounce.easeOut, this._xscale, 200, 1.5, true); 

bueno. voy a intentarlo y después te cuento.

Por Freeki

Claber

183 de clabLevel



Genero:Masculino  

Desarrollador Web Uy

firefox
Citar            
MensajeEscrito el 26 Ene 2009 03:02 pm
hola.. muy bueno tu código, me gusta no se me había ocurrido guardar funciones en variables. y la verdad que ahora me parece indispensable. está muy claro, gracias! lo voy a usar.. ahora estoy intentando que si le haces por ejemplo release al cuadro_mc1 este se queda grande, pero si estando grande haces rollOver en otro cuadro este se achica y se agranda el otro como siempre.. pero si sacas el mouse de los cuadros el que seleccioneste se vuelve a agradar y queda grande. no se si me explico... haber que me aconsejas.. pienso poner un enterFrame que compruebe si hay alguno seleccionado.. y si es así que se ejecute una sola vez la funcion:

Código :

 this.miXTween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 200, 1.5, true); 
      this.miYTween = new Tween(this, "_yscale", Bounce.easeOut, this._xscale, 200, 1.5, true); 

bueno. voy a intentarlo y después te cuento.

Por Freeki

Claber

183 de clabLevel



Genero:Masculino  

Desarrollador Web Uy

firefox
Citar            
MensajeEscrito el 26 Ene 2009 03:04 pm
con lo del color tengo que hacer que el cuadro se ponga gris.. asiquq para no complicarme mucho hice un cuadrado gris que le pongo _alpha 0 o 100 con la Tween también, después voy a investigar y estudiar bien ese código que me pasaste :wink:

Por Freeki

Claber

183 de clabLevel



Genero:Masculino  

Desarrollador Web Uy

firefox
Citar            
MensajeEscrito el 26 Ene 2009 06:27 pm

Freeki escribió:

hola.. muy bueno tu código, me gusta no se me había ocurrido guardar funciones en variables. y la verdad que ahora me parece indispensable. está muy claro, gracias! lo voy a usar.. ahora estoy intentando que si le haces por ejemplo release al cuadro_mc1 este se queda grande, pero si estando grande haces rollOver en otro cuadro este se achica y se agranda el otro como siempre.. pero si sacas el mouse de los cuadros el que seleccioneste se vuelve a agradar y queda grande. no se si me explico... haber que me aconsejas.. pienso poner un enterFrame que compruebe si hay alguno seleccionado.. y si es así que se ejecute una sola vez la funcion:

Código :

 this.miXTween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 200, 1.5, true); 
      this.miYTween = new Tween(this, "_yscale", Bounce.easeOut, this._xscale, 200, 1.5, true); 

bueno. voy a intentarlo y después te cuento.


Código ActionScript :

//COPY PASTE 
import mx.transitions.Tween; 
import mx.transitions.easing.*; 
 
var Release:Function = function() 
{ 
   this.selected = this.selected ? false : true ; 
} 
var RollOver:Function = function() { 
      this.miXTween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 200, 1.5, true); 
      this.miYTween = new Tween(this, "_yscale", Bounce.easeOut, this._xscale, 200, 1.5, true); 
}; 
var RollOut:Function = function() { 
      this.miXTween.stop(); 
      this.miYTween.stop(); 
      this.miXTween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 100, 1.5, true); 
      this.miYTween = new Tween(this, "_yscale", Bounce.easeOut, this._xscale, 100, 1.5, true); 

   for( var i in this._parent ) 
   { 
      if( this._parent[i].selected == true ) 
      { 
         trace(i) 
         this._parent[i].onRollOver(); 
         break;
      } 
   } 
};  
 
_root.Cuadro4_mc.onRollOut = _root.Cuadro3_mc.onRollOut = _root.Cuadro2_mc.onRollOut = _root.Cuadro1_mc.onRollOut = RollOut; 
_root.Cuadro4_mc.onRollOver = _root.Cuadro3_mc.onRollOver = _root.Cuadro2_mc.onRollOver = _root.Cuadro1_mc.onRollOver = RollOver; 
_root.Cuadro4_mc.onRelease = _root.Cuadro3_mc.onRelease = _root.Cuadro2_mc.onRelease = _root.Cuadro1_mc.onRelease = Release;


Hola, aqui le hice una modificacion, pruebala. Buena solucion los del gris, sencillo y justo lo que necesitas, como deben ser todas las cosas. Suerte.

Por LongeVie

Claber

1741 de clabLevel

1 tutorial

Genero:Masculino  

En un lugar, re moto.

firefox
Citar            
MensajeEscrito el 29 Ene 2009 02:54 pm
Hola longeVie noté que fuiste vos el que me dió una mano en todos mis post.. muchas gracias! :oops: estube vichando tu código y al hacerle click a los cuadrados este se queda en grande pero no vuelve a su tamaño normal..

para hacer eso usé este código:

Código :

import mx.transitions.Tween; 
import mx.transitions.easing.*; 
var Estado:Array=new Array();

for(var i=0;i<7;i++){
   
   Estado[i]=eval("_root.mc"+i);
   Estado[i].selected=false;

   trace(i)

   }
   


var Release:Function = function() {  

   this.miAlphaTween = new Tween(this.mcIn, "_alpha", Bounce.easeOut, 0, 100, 1.5, true);
  
  this.selected = this.selected ? false : true ; 
   
   for( var i in this._parent ){ 
      
    if( this._parent[i].selected == true && this._parent[i] != this){ 
      this._parent[i].selected = false; 
      this._parent[i].onRollOut(); 
      this.miAlphaTween = new Tween(this._parent[i].mcIn, "_alpha", Bounce.easeOut, 100, 0, 1.5, true);
    
     } 
   } 
} 
var RollOver:Function = function() { 
     for(var i=0;i<7;i++){
   if(_root.Estado[i].selected==true){
   _root.Estado[i].onRollOut();

 }
 
    }
    if(this.selected!= true){
      this.miXTween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 90, 1.5, true); 
     this.miYTween = new Tween(this, "_yscale", Bounce.easeOut, this._xscale, 90, 1.5, true); 
 
 }
 
}; 

var RollOut:Function = function() { 
      
   if(this.selected!= true){
     
     this.miXTween.stop(); 
      this.miYTween.stop(); 
      this.miXTween = new Tween(this, "_xscale", Bounce.easeOut, this._xscale, 60, 1.5, true); 
      this.miYTween = new Tween(this, "_yscale", Bounce.easeOut, this._xscale, 60, 1.5, true); 
   }
   
   for( var i in _root._parent ){ 
          
      _root._parent[i].selected.onRollOver(); 
 
   }
}; 

  
_root.mc0.onRollOut =_root.mc1.onRollOut = _root.mc2.onRollOut = _root.mc3.onRollOut =_root.mc4.onRollOut = _root.mc5.onRollOut = _root.mc6.onRollOut = RollOut; 
_root.mc0.onRollOver =_root.mc1.onRollOver = _root.mc2.onRollOver = _root.mc3.onRollOver =_root.mc4.onRollOver = _root.mc5.onRollOver = _root.mc6.onRollOver = RollOver; 
_root.mc0.onRelease =_root.mc1.onRelease = _root.mc2.onRelease = _root.mc3.onRelease = _root.mc4.onRelease = _root.mc5.onRelease = _root.mc6.onRelease = Release; 



les cambié los nombres de instancia como verás, pq estoy haciendo una botonera con 7 botones..
con ese código.. poniendo dentro de cada mc un mc con alpha 0 y nombre de instancia mcIn vas a ver el efecto que te digo.. hasta ahí todo funciona bien.. el tema es que al hacer roll sobre otros tiene que achicarse etc. como siempre. entendes? :) nosé si me explico bien.. cualquier cosa me decis .

pd.. también tengo problema con la profundidad.. ya que al hacer roll en un bot, este se agranda y tapa en parte a los demás.. usé this.swapDepths(1); pero dá algunos problemas.. en fin.. voy a ver que pasa. hasta luego!

Por Freeki

Claber

183 de clabLevel



Genero:Masculino  

Desarrollador Web Uy

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.