Comunidad de diseño web y desarrollo en internet online

Barra de progreso con AS3

Citar            
MensajeEscrito el 19 Abr 2014 05:31 pm
Hola, tengo que hacer un juego para ipad para una asignatura de la facultad y me estoy volviendo loca con un tema en concretoa. El juego tiene una barra de progreso que figura que tiene que ir aumentando cuando con la funcion drag and drop vas poniendo objetos dentro de diferentes cajas.

Para hacer la barra de progreso he echo un simbolo que es la barra a la que he puesto como nombre de instancia progres. Esta tiene 48 fotogramas y en cada fotograma he puesto un fotograma llave, y cada uno es un poco mas largo. En el primero he peusto stop();

Despues con codigo le he dicho que cada vez que un pbjeto fuera dentro de una caja concreta el simbolo progres pasara al siguiente frame

function drop(e:MouseEvent):void{
if (alb1.hitTestObject(lilacaixa)){
progres.nextFrame();
alb1.alpha=0;
}

El problema que tengo es que funciona a medias, ya que realmente la barra avanza, pero no avanza un solo frame sino varios y claro llega a estar completa antes que los 48 objetos esten en la caja, lo he mirado todo y figura que tiene que estar bien. no entiendo lo que puede pasar. necesito ayuda!

Gracias

Por bertuka

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 19 Abr 2014 11:01 pm
No sabía que se enseñase Flash en la facultad.
Igualmente, me parece un procedimiento un tanto tedioso hacerlo por linea de tiempo.
Primero veamos que pasa con tu implementación.
Si solo pusiste stop() en el 1er keyframe, eso detiene la reproduccion del movie, pero una vez que llamas a
progres.nextFrame(); eso mueve el cabezal al 2do frame (donde no hay un stop) y se va a reproducir toda la linea de tiempo.
La forma "ideal" seria llevar el tracking con un variable del estado actual de la aplicación. Igualmente, este es un approach de diseñador digamos, es un procedimiento tedioso y poco práctico a decir verdad.

Código :

var contador:int=1;
function drop(e:MouseEvent):void{
if (alb1.hitTestObject(lilacaixa)){
++contador ;
progres.gotoAndStop(contador);
alb1.alpha=0;
}

cada vez que hagas drop, contador incrementara 1. Esto hara que te muevas a traves de la linea de tiempo 1 frame a la vez, deteniendose en ese frame.
En case de que cada "estado" del preloader tenga una animacion distinta y necesites reproducirla, podrias usar LABELS para marcar posiciones en la linea de tiempo, y guardar esos labels en un array, y usar el mismo concepto....

Código :

var labelList:Array = [ "anim1", "anim2", "anim3", "anim4", "anim5", "animN"]; // 
var contador:int=1;
function drop(e:MouseEvent):void{
if (alb1.hitTestObject(lilacaixa)){
++contador ;
if(contador >= labelList.length ) {
// significa que contador es mayor que la cantidad de items en labelList, esto te generara un error en tiempo de ejecución por tratar de acceder a un item inexistente. Podrias poner contendor=0 y volver a empezar.
return ;
}
progres.gotoAndPlay(labelList[contador]);
alb1.alpha=0;
}


Ahora, si solo necesitas una simple barra que se va "agrandando" de 1 a 100% un approach más de "programador":

Código :

// asegurate que progress tenga escala 100%.

var contador:int=0;
var maxObjetosEnCaja:uint = 48 ;

function drop(e:MouseEvent):void{
if (alb1.hitTestObject(lilacaixa)){
++contador ;
if(contador > maxObjetosEnCaja ) {
 // Podes forzar (contador=maxObjetosEnCaja) o resetear el contador (contador = 0 )
// o simplemente no hacer nada y que la barra siga creciendo mas alla del 100%
}
var porcentaje:Number = maxObjetosEnCaja / contador ; // porcentaje de 0-1
progres.scaleX = porcentaje ;
// si queres animarlo un poco, usa alguna libreria de Tweening, como TweenLite (http://www.greensock.com/tweenlite/)
//var duration:Number = 0.5 ;
//TweenLite.to(progres, duration,{ scaleX: porcentaje });
alb1.alpha=0;
}


Espero que te sirva.

Por rodrigolopezpeker

61 de clabLevel



 

chrome
Citar            
MensajeEscrito el 20 Abr 2014 06:49 pm
Hola, muchisimas gracias por tu respuesta!

Soy un poco nueva en esto de flash y realmente me he saltado algunas clases, es por eso que algunas de las cosas que hago no son del todo limpias y a veces son demasiado rebuscadas.
No quiero abusar de la ayuda pero no entiendo muy bien que seria lo que tendria que aplicar de lo que me has contestado y donde tendria que introducirlo

Esta es la pantalla que estoy programando






Y este es el codigo que tengo.
todo lo que son "alb1,alb2,peb1,peb2,pas1,pas2, etc..." son la frutas, y lo de "lilacaixa, taronjacaixa, etc..." son las cajas.


Progress es la barra verde de arriba, en la foto es gris porque es el principio de la pantalla

Código ActionScript :


import flash.events.MouseEvent;


//ALBERGINIES //

alb1.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
alb1.addEventListener(MouseEvent.MOUSE_UP, drop);
alb2.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
alb2.addEventListener(MouseEvent.MOUSE_UP, drop);
alb3.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
alb3.addEventListener(MouseEvent.MOUSE_UP, drop);
alb4.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
alb4.addEventListener(MouseEvent.MOUSE_UP, drop);
alb5.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
alb5.addEventListener(MouseEvent.MOUSE_UP, drop);
alb6.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
alb6.addEventListener(MouseEvent.MOUSE_UP, drop);
alb7.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
alb7.addEventListener(MouseEvent.MOUSE_UP, drop);
alb8.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
alb8.addEventListener(MouseEvent.MOUSE_UP, drop);

// CEBES //

ceb1.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
ceb1.addEventListener(MouseEvent.MOUSE_UP, drop);
ceb2.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
ceb2.addEventListener(MouseEvent.MOUSE_UP, drop);
ceb3.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
ceb3.addEventListener(MouseEvent.MOUSE_UP, drop);
ceb4.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
ceb4.addEventListener(MouseEvent.MOUSE_UP, drop);
ceb5.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
ceb5.addEventListener(MouseEvent.MOUSE_UP, drop);
ceb6.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
ceb6.addEventListener(MouseEvent.MOUSE_UP, drop);
ceb7.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
ceb7.addEventListener(MouseEvent.MOUSE_UP, drop);
ceb8.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
ceb8.addEventListener(MouseEvent.MOUSE_UP, drop);

// COGOMBRE //

cog1.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
cog1.addEventListener(MouseEvent.MOUSE_UP, drop);
cog2.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
cog2.addEventListener(MouseEvent.MOUSE_UP, drop);
cog3.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
cog3.addEventListener(MouseEvent.MOUSE_UP, drop);
cog4.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
cog4.addEventListener(MouseEvent.MOUSE_UP, drop);
cog5.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
cog5.addEventListener(MouseEvent.MOUSE_UP, drop);
cog6.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
cog6.addEventListener(MouseEvent.MOUSE_UP, drop);
cog7.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
cog7.addEventListener(MouseEvent.MOUSE_UP, drop);
cog8.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
cog8.addEventListener(MouseEvent.MOUSE_UP, drop);

// ENCIAM //

enc1.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
enc1.addEventListener(MouseEvent.MOUSE_UP, drop);
enc2.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
enc2.addEventListener(MouseEvent.MOUSE_UP, drop);
enc3.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
enc3.addEventListener(MouseEvent.MOUSE_UP, drop);
enc4.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
enc4.addEventListener(MouseEvent.MOUSE_UP, drop);
enc5.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
enc5.addEventListener(MouseEvent.MOUSE_UP, drop);
enc6.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
enc6.addEventListener(MouseEvent.MOUSE_UP, drop);
enc7.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
enc7.addEventListener(MouseEvent.MOUSE_UP, drop);
enc8.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
enc8.addEventListener(MouseEvent.MOUSE_UP, drop);

// PASTANAGA //

pas1.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
pas1.addEventListener(MouseEvent.MOUSE_UP, drop);
pas2.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
pas2.addEventListener(MouseEvent.MOUSE_UP, drop);
pas3.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
pas3.addEventListener(MouseEvent.MOUSE_UP, drop);
pas4.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
pas4.addEventListener(MouseEvent.MOUSE_UP, drop);
pas5.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
pas5.addEventListener(MouseEvent.MOUSE_UP, drop);
pas6.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
pas6.addEventListener(MouseEvent.MOUSE_UP, drop);
pas7.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
pas7.addEventListener(MouseEvent.MOUSE_UP, drop);
pas8.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
pas8.addEventListener(MouseEvent.MOUSE_UP, drop);

// PEBROT //

peb1.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
peb1.addEventListener(MouseEvent.MOUSE_UP, drop);
peb2.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
peb2.addEventListener(MouseEvent.MOUSE_UP, drop);
peb3.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
peb3.addEventListener(MouseEvent.MOUSE_UP, drop);
peb4.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
peb4.addEventListener(MouseEvent.MOUSE_UP, drop);
peb5.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
peb5.addEventListener(MouseEvent.MOUSE_UP, drop);
peb6.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
peb6.addEventListener(MouseEvent.MOUSE_UP, drop);
peb7.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
peb7.addEventListener(MouseEvent.MOUSE_UP, drop);
peb8.addEventListener(MouseEvent.MOUSE_DOWN, drag); 
peb8.addEventListener(MouseEvent.MOUSE_UP, drop);

function drop(e:MouseEvent):void{
   if (alb1.hitTestObject(lilacaixa)){
      progres.nextFrame();
      alb1.alpha=0;
   }
   if (alb2.hitTestObject(lilacaixa)){
      progres.nextFrame();
      alb2.alpha=0;
   }
   if (alb3.hitTestObject(lilacaixa)){
      progres.nextFrame();
      alb3.alpha=0;
   }
   if (alb4.hitTestObject(lilacaixa)){
      progres.nextFrame();
      alb4.alpha=0;
   }
   if (alb5.hitTestObject(lilacaixa)){
      progres.nextFrame();
      alb5.alpha=0;
   }
   if (alb6.hitTestObject(lilacaixa)){
      progres.nextFrame();
      alb6.alpha=0;
   }
   if (alb7.hitTestObject(lilacaixa)){
      progres.nextFrame();
      alb7.alpha=0;
   }
   if (alb8.hitTestObject(lilacaixa)){
      progres.nextFrame();
      alb8.alpha=0;
   }
   
   //CEBES//
   if (ceb1.hitTestObject(lilacaixa)){
      progres.nextFrame();
      ceb1.alpha=0;
   }
   if (ceb2.hitTestObject(lilacaixa)){
      progres.nextFrame();
      ceb2.alpha=0;
   }
   if (ceb3.hitTestObject(lilacaixa)){
      progres.nextFrame();
      ceb3.alpha=0;
   }
   if (ceb4.hitTestObject(lilacaixa)){
      progres.nextFrame();
      ceb4.alpha=0;
   }
   if (ceb5.hitTestObject(lilacaixa)){
      progres.nextFrame();
      ceb5.alpha=0;
   }
   if (ceb6.hitTestObject(lilacaixa)){
      progres.nextFrame();
      ceb6.alpha=0;
   }
   if (ceb7.hitTestObject(lilacaixa)){
      progres.nextFrame();
      ceb7.alpha=0;
   }
   if (ceb8.hitTestObject(lilacaixa)){
      progres.nextFrame();
      ceb8.alpha=0;
   }
   
   //COGOMBRES//
   
   if (cog1.hitTestObject(verdcaixa)){
      progres.nextFrame();
      cog1.alpha=0;
   }
   if (cog2.hitTestObject(verdcaixa)){
      progres.nextFrame();
      cog2.alpha=0;
   }
   if (cog3.hitTestObject(verdcaixa)){
      progres.nextFrame();
      cog3.alpha=0;
   }
   if (cog4.hitTestObject(verdcaixa)){
      progres.nextFrame();
      cog4.alpha=0;
   }
   if (cog5.hitTestObject(verdcaixa)){
      progres.nextFrame();
      cog5.alpha=0;
   }
   if (cog6.hitTestObject(verdcaixa)){
      progres.nextFrame();
      cog6.alpha=0;
   }
   if (cog7.hitTestObject(verdcaixa)){
      progres.nextFrame();
      cog7.alpha=0;
   }
   if (cog8.hitTestObject(verdcaixa)){
      progres.nextFrame();
      cog8.alpha=0;
   }
   
   //ENCIAM//
   
   if (enc1.hitTestObject(verdcaixa)){
      progres.nextFrame();
      enc1.alpha=0;
   }
   if (enc2.hitTestObject(verdcaixa)){
      progres.nextFrame();
      enc2.alpha=0;
   }
   if (enc3.hitTestObject(verdcaixa)){
      progres.nextFrame();
      enc3.alpha=0;
   }
   if (enc4.hitTestObject(verdcaixa)){
      progres.nextFrame();
      enc4.alpha=0;
   }
   if (enc5.hitTestObject(verdcaixa)){
      progres.nextFrame();
      enc5.alpha=0;
   }
   if (enc6.hitTestObject(verdcaixa)){
      progres.nextFrame();
      enc6.alpha=0;
   }
   if (enc7.hitTestObject(verdcaixa)){
      progres.nextFrame();
      enc7.alpha=0;
   }
   if (enc8.hitTestObject(verdcaixa)){
      progres.nextFrame();
      enc8.alpha=0;
   }
   
   //PASTANAGA//
   
   if (pas1.hitTestObject(taronjacaixa)){
      progres.nextFrame();
      pas1.alpha=0;
   }
   if (pas2.hitTestObject(taronjacaixa)){
      progres.nextFrame();
      pas2.alpha=0;
   }
   if (pas3.hitTestObject(taronjacaixa)){
      progres.nextFrame();
      pas3.alpha=0;
   }
   if (pas4.hitTestObject(taronjacaixa)){
      progres.nextFrame();
      pas4.alpha=0;
   }
   if (pas5.hitTestObject(taronjacaixa)){
      progres.nextFrame();
      pas5.alpha=0;
   }
   if (pas6.hitTestObject(taronjacaixa)){
      progres.nextFrame();
      pas6.alpha=0;
   }
   if (pas7.hitTestObject(taronjacaixa)){
      progres.nextFrame();
      pas7.alpha=0;
   }
   if (pas8.hitTestObject(taronjacaixa)){
      progres.nextFrame();
      pas8.alpha=0;
   }

   //PEBROT//
   
   if (peb1.hitTestObject(vermellcaixa)){
      progres.nextFrame();
      peb1.alpha=0;
   }
   if (peb2.hitTestObject(vermellcaixa)){
      progres.nextFrame();
      peb2.alpha=0;
   }
   if (peb3.hitTestObject(vermellcaixa)){
      progres.nextFrame();
      peb3.alpha=0;
   }
   if (peb4.hitTestObject(vermellcaixa)){
      progres.nextFrame();
      peb4.alpha=0;
   }
   if (peb5.hitTestObject(vermellcaixa)){
      progres.nextFrame();
      peb5.alpha=0;
   }
   if (peb6.hitTestObject(vermellcaixa)){
      progres.nextFrame();
      peb6.alpha=0;
   }
   if (peb7.hitTestObject(vermellcaixa)){
      progres.nextFrame();
      peb7.alpha=0;
   }
   if (peb8.hitTestObject(vermellcaixa)){
      progres.nextFrame();
      peb8.alpha=0;
   }
   
   stopDrag();
   
}

function drag(e:MouseEvent):void{
   e.target.startDrag();
   }




comencarhort.addEventListener(MouseEvent.CLICK, hortcomencar);
function hortcomencar(event:MouseEvent):void{
   gotoAndPlay(22, "HORT");
}




Aqui se me presenta a parte de el problema que conte en el otro mensaje dos otros problemas:

- Cuando un objeto por ejemplo "alb1" que figura que tiene programado que solo si toca el objeto "lilacaixa" suba el progreso, se pone en otra caja tambien sube la barra de progreso aunque no baja la propiedad alpha.

- Cuando el objeto toca la caja que no tiene que tocar solo se queda alli y no vuelve a su sitio (este problema se da basicamente porque no esta programado el "else" para que vuelva porque no se como tengo que hacerlo.


Muchisimas gracias de verdad!!!!

Por bertuka

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 20 Abr 2014 11:22 pm
subi el FLA y pasa el link

Por rodrigolopezpeker

61 de clabLevel



 

chrome
Citar            
MensajeEscrito el 07 May 2014 05:10 am
Lo que programes en Flash funciona en un IPAD?
Saludos

Por empardopo

71 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 May 2014 08:39 pm
si

Por rodrigolopezpeker

61 de clabLevel



 

chrome
Citar            
MensajeEscrito el 08 May 2014 05:06 am
Jor! Me he quedado anticuado entonces.
Miraré a ver como porque tenía entendido que Apple no dejaba funcionar nada en Flash aunque lo mismo entendía mal o levantaron el castigo, jeje!

¿Algún sitio/link con buena información de como hacerlo?

Thanks!

Por empardopo

71 de clabLevel



 

firefox

 

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