Comunidad de diseño web y desarrollo en internet online

Barra de Progreso

Citar            
MensajeEscrito el 20 Jun 2011 04:51 pm
Hola, buen día apenas me estoy migrando a AS3 y tengo un problemita que he intentado solucionar y me sigue costando, trate de buscar una solucion pero no encontre mucho.

Estoy armando un curso en el cual tengo que mostrar una barra de avances de acuerdo al progreso en el curso del alumno, es decir si el alumno va al 50% del curso, la barra de progreso debe de ir a la mitad.

Tengo 4 frames
1: Mi preload
2: Mi pantalla 1
3: Mi Pantalla 2
4: Mi pantalla 3

De mi frame 2 al 4 declaro el siguiente código:

Código ActionScript :


addEventListener(Event.ENTER_FRAME, progreso_mc.Cargar);

}


Del frame 2 al 4 tengo un Movieclip llamado, progreso_mc que dentro tiene 100 frames, dentro del MC, tengo el siguiente codigo:

Código ActionScript :

function Cargar(e:Event):void{
   
   var cuadros: int = new int();
   cuadros = MovieClip(parent).totalFrames - 1;;
   trace(cuadros);
   
   
   var porciento: Number = new Number();
   porciento = Math.ceil(100/cuadros);
   trace(porciento);
   
   
   if(this.currentFrame == porciento){
      stop();
   }
   else{
      play();
      }
}


En la primer pantalla funciona de maravilla, carga el 34% ..pero despues al pasar al siguiente frame se queda ahi, trate de hacerlo de otra manera en la que el código se reciclara con funciones para que se mandara a llamar ciclicamente pero me quede atorado cuando trato de que se tome el valor de una variable de una funcion para usarla en otra.

Este es la otra forma que intente:

Mis frames 2,3 y 4 tienen este Listener

Código ActionScript :

addEventListener(Event.ENTER_FRAME, CDatos);


Mi frame 1 tiene la siguiente función:

Código ActionScript :

function CDatos(e:Event):void{
   
var cuadros : int = new int();
cuadros = totalFrames - 1;
trace("Cuadros: "+ cuadros);

var actual : int = new int();
actual = progreso.currentFrame ;
trace("Current:" + actual);

var porciento: Number = new Number();
porciento = Math.ceil(100/cuadros);
trace("Avance: "+porciento);

progreso_mc.cargado();

}


Mi movieclip progreso_mc, tiene este código, este mc abarca del frame 2 al 4:

Código ActionScript :

function cargado(e:Event):void{
   if(currentFrame == MovieClip.(parent).porciento){
      stop();
      }
   else{
      play();
      }

}


Y no me hace ninguna carga :shock: aunque si muestra su desplazamiento por los frames, me arroja este error :roll: :

TypeError: Error #1123: Operador de filtro no admitido en el tipo class flash.display.MovieClip.


Espero haberme dado a entender :oops: , no se si lo que he hecho es lo mas optimo, sinceramente recien comienzo asi que cualquier tipo de retroalimentación es bienvenida :wink:

Por Ed_bale

4 de clabLevel



 

Soy pseudo - desarrollador xD

firefox
Citar            
MensajeEscrito el 22 Jun 2011 06:24 pm
Mmm, no me queda muy en claro lo que querés hacer. Te puedo decir que todo lo que es "porcentaje" lo podes resumir en la clásica ecuación valorActual * 100 / maximoValor, pero para trabajar más "genéricamente", tomalo en rango decimal de 0 a 1, valorActual / maximoValor y lo multiplicas por lo que necesites. Si no es muy claro, te pongo un ejemplo de cómo haría lo que entiendo que necesitas (sería muy extenso decirte cómo lo haría, porque es un approach completamente distinto): Empeza a usar clasessss... es algo forzosamente necesario tarde o temprano si progamas con AS3.

package {
import flash.display.MovieClip;

public class Porcentaje extends MovieClip {

private static var _instance : Porcentaje ;

private var _percent : Number ;
private var _primerFrame : uint ;
private var _ultimoFrame : uint ;

// tenemos que llamar a esta funcion siempre que queramos acceder a esta clase y su contenido.
public function get instance(): Porcentaje {
if ( _instance ) _instance = new Porcentaje( new Enforcer );
return _instance ;
}

// constructor.
public function Porcentaje( requerido: Enforcer ) {
if ( requerido == null ) throw new Error( "Usa Porcentaje.instance en vez de new Porcentaje()" ) ;
// seteamos los frames que se van a usar por defecto como "preloader"
ultimoFrame = this.totalFrames ;
primerFrame = 1 ;
}

public function get percent( ): Number { return _percent; }
public function set percent( value: Number ): void {
// forzamos el rango de porcentaje entre 0 y 1.
_percent = Math.max( 0, Math.min( value )) ;
// usamos el porcentaje para movernos en los frames.
this.gotoAndStop( _primerFrame + Math.round( _percent * _ultimoFrame )) ;
}

public function get primerFrame( ): uint { return _primerFrame; }
public function set primerFrame( value: uint ): void {
_primerFrame = value ;
}
public function get ultimoFrame( ): uint { return _ultimoFrame; }
public function set ultimoFrame( value: uint ): void {
_ultimoFrame = Math.max( _primerFrame, Math.min( this.totalFrames, value ) ;
}

}

}
class Enforcer{}

----------------------------------------------------------

Entonces, crea un nuevo archivo .as y pega ese codigo. Guardalo como Porcentaje.as, ponelo en la misma carpeta que el FLA. Abrí el fla, y en la librería (Ctrl+L) ubicá el movieclip del preloader (ese con 100 frames), click boton derecho > Propiedades, Chekea Exportar para ActionScript, y en el campo Clase, pone Porcentaje (esto es lo básico y necesario en Flash para linkear Elementos de la biblioteca (mp3s, tipografias, movieclips, videos, imagenes, etc) con clases.)
Ahora... básicamente necesitas agregar por código el objeto (no tirarlo en la línea de tiempo), asi tenes control sobre el objeto Porcentaje (el movieclip) y no te tira error en la compilcación (Usamos un pattern Singleton, para que puedas acceder desde cualquier lado a ese objeto usando Porcentaje.instance )...
Entonces, donde este tu movieclip "container", donde tenes los 4 frames de todas las pantallas, le pones el código:

this.addChild( Porcentaje.instance ) ;
Porcentaje.instance.x = la posición en X
Porcentaje.instance.y = la posición en Y

Porcentaje.instance.percent = 0 ; (va al frame Porcentaje.instance.primerFrame )
Porcentaje.instance.percent = 1 ; (va al frame Porcentaje.instance.ultimoFrame )

Entonces, donde vos quieras cambiar el frame de precarga... EJ, cuando vas pasando entre las pantallas.. deberías sacarle un porcentaje, que básicamente sería: pantallaActual / totalPantallas.

Entonces, tenes 8 pantallas... por ej:
en la pantalla 1, pones en el 1er frame (bah, cuando quieras cambiarle el porcentaje al movieclip de Porcentaje)
Porcentaje.instance.percent = 1 / 8

pantalla 2
Porcentaje.instance.percent = 2 / 8

pantalla 3
Porcentaje.instance.percent = 3 / 8

pantalla N
Porcentaje.instance.percent = N / 8

Eso es para mostrarte el concepto, si lo querés simplificar un poco podrías agregarle un método a Porcentaje que te tome la pantalla actual y te cambie el porcentaje...

Clase actualizada.

package {
import flash.display.MovieClip;

public class Porcentaje extends MovieClip {

private static var _instance : Porcentaje ;

private var _percent : Number ;
private var _primerFrame : uint ;
private var _ultimoFrame : uint ;
private var _maxPantallas : uint ;

// tenemos que llamar a esta funcion siempre que queramos acceder a esta clase y su contenido.
public function getInstance(): Porcentaje {
if ( _instance ) _instance = new Porcentaje( new Enforcer );
return _instance ;
}

// constructor.
public function Porcentaje( requerido: Enforcer ) {
if ( requerido == null ) throw new Error( "Usa Porcentaje.getInstance() en vez de new Porcentaje()" ) ;
// seteamos los frames que se van a usar por defecto como "preloader"
ultimoFrame = this.totalFrames ;
primerFrame = 1 ;
}

public function get percent( ): Number { return _percent; }
public function set percent( value: Number ): void {
// forzamos el rango de porcentaje entre 0 y 1.
_percent = Math.max( 0, Math.min( value )) ;
// usamos el porcentaje para movernos en los frames.
this.gotoAndStop( _primerFrame + Math.round( _percent * _ultimoFrame )) ;
}

public function get primerFrame( ): uint { return _primerFrame; }
public function set primerFrame( value: uint ): void {
_primerFrame = value ;
}
public function get ultimoFrame( ): uint { return _ultimoFrame; }
public function set ultimoFrame( value: uint ): void {
_ultimoFrame = Math.max( _primerFrame, Math.min( this.totalFrames, value ) ;
}

public function set pantalla( value: uint ): void {
this.percent = value / _maxPantallas ;
}
public function get maxPantallas( ): uint { return _maxPantallas; }
public function set maxPantallas( value: uint ): void { _maxPantallas = value ; }

}

}
class Enforcer{}

Ahora, en vez de llamar a Porcentaje.instance.percent = algo, llamamos a Porcentaje.instance.pantalla = 1 ( o 2, o 3, o 4... ).
Recordá que tenes que poner primer Porcentaje.instance.maxPantallas = n
y que siempre que asignes Porcentaje.instance.pantalla = n, el valor sea menor o igual a maxPantallas (igualmente pusimos una limitación de rango al porcentaje, para que nunca se pase del ultimo frame y no te daría errores).

Espero que te haya servido de algo, se que es difícil hacer la transición y entender el código, pero vas a tener que cambiar un poco la cabeza si queres darte maña con AS3. (Vale la pena totalmente).
Cualquier duda, preguntame.
Saludos.

Por blnkinteractive

4 de clabLevel



 

chrome
Citar            
MensajeEscrito el 27 Jun 2011 06:26 pm
Hey, muchas gracias por la respuesta, tienes razon, use estos dias para comenzar a usar clases y ya migre el 40% de mi proyecto todo con clases, veo la utiliadad y aprendo.
Estoy dejando esta parte para el ultimo, muchas gracias por la respuesta le echare una leida y si me surgen dudas te estare molestando un poco jejeje.

Saludos =)

Por Ed_bale

4 de clabLevel



 

Soy pseudo - desarrollador xD

firefox
Citar            
MensajeEscrito el 18 Jul 2011 11:15 pm
La maravilla de las clases porfin logre resolver el problema =D, gracias blnkinteractive por tu ayuda .

Por Ed_bale

4 de clabLevel



 

Soy pseudo - desarrollador xD

firefox

 

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