Comunidad de diseño web y desarrollo en internet online

Marquesina para mp3 player

Citar            
MensajeEscrito el 16 Nov 2010 09:39 pm
Hola!!

Quisiera que me indicaran como hacer una marquesina de texto cargado desde un xml, he visto algunos tips por ahi (que son muy pocos) pero tienen muchos efectos y cosas, no he podido extraerles lo esencial

lo unico que quiero es una marquesin basica con velocidad constante en la que permanentemente este rotando el nombre de las canciones

Les agradezco cualquier colaboracion.

Bye

:)

Por dianita666

Claber

185 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Nov 2010 11:33 pm
Pues lo que tienes que hacer es:

1. Crear un XML con las canciones
2. Cargar el XML a un Array con las Canciones
3. Crear un contenedor que será el que "rote"
4. Dentro del contenedor, debes armar una tira con todas las canciones
5. Mueves el contenedor
6. Evalúas cuando el contenedor llega al 0,0, o sea que no le quedan canciones, empiezas a duplicar el último item y ponerlo apartir de 0,0 - ancho del item, luego borras la última posición

Eso sería todo. Si tienes duda, empieza a escribir el código para darte una mejor ayuda.

Saludos, Hernán . -

Por Hernán

BOFH

6148 de clabLevel

19 tutoriales
23 articulos

Genero:Masculino   REC Desarrollador de GAIA

Marketing & IT

firefox
Citar            
MensajeEscrito el 17 Nov 2010 02:06 pm
Hola Hernan!!!
Mira estoy animando el texto dinamico que esta en el stage asi:

Código ActionScript :

private function startAnimation():void{
            TweenLite.to(mp3player_mc.title_txt, 5, {x:-mp3player_mc.title_txt.width,ease:Linear.easeNone,onComplete: completeAnimation});
         }
           
          private function completeAnimation():void{
            mp3player_mc.title_txt.x = 100;
            this.startAnimation();
         }


Si anima, el problema es que no logro que el tween se ajuste a como tengo el campo de texto dinamico de mi stage, se que el problema esta en esta parte:

Código ActionScript :

x:-mp3player_mc.title_txt.width

el negativo le da la orientacion al tween pero deberia comenzar desde el final del campo de texto y no lo he conseguido!

Espero puedas ayudarme, parece sencillo pero no le atino

Gracias
^^

Por dianita666

Claber

185 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Nov 2010 02:30 pm
Pues yo no lo haría usando TweenLite, ni ninguna libreria. Primero que nada trabajaría en mi propio handler para animar.

Saludos, Hernán . -

Por Hernán

BOFH

6148 de clabLevel

19 tutoriales
23 articulos

Genero:Masculino   REC Desarrollador de GAIA

Marketing & IT

firefox
Citar            
MensajeEscrito el 17 Nov 2010 02:40 pm
Hola!!

Mira estoy probando asi, anima pero la condicion no la coje:

Código ActionScript :

private function animarMarquesina(e:Event){
         mp3player_mc.title_txt.x-=1;
         if(x>100){
            x=0;
         }
         }

Por dianita666

Claber

185 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Nov 2010 06:41 pm
Yo lo haría así:

Código ActionScript :

import clases.delay;
private var contenedor:Sprite = new Sprite();
private var limite:Number = algun_mc_en_escena.x;
private var espacio:int = 10;
private var speed:int = 10;
private var elementos:Array = [];
private var marquesina_titles:Array = // Info desde XML
private var max:uint = marquesina_titles.length;
private var index:uint = marquesina_titles.length;
private var depth:uint = marquesina_titles.length;
private var anim:delay;
private function buildMarquesina():void{
   elementos[0] = new MC_Marquesina_Clip();
   elementos[0].x = 0;
   contenedor.addChild(elementos[0]);
   for(var i:uint = 1;i<max;i++){
      elementos[i] = new MC_Marquesina_Clip();
      elementos[i].x = elementos[i-1].width + espacio;
      contenedor.addChild(elementos[i]);
   }
}
private function handlerAnimacion(Speed:int):void{
   contenedor.x += Speed;
}
private function mantainIndex(Index:uint):uint{
   if(Index >= marquesina_titles.length){
      return 0;
   }else{
      return Index++;
   }
}
private function handlerLimit():void{
   if(contenedor.x>limite){
      index = mantainIndex(index);
      depth++;
      elementos[depth] = new MC_Marquesina_Clip();
      elementos[depth].text_field.text = marquesina_titles[index];
      elementos[depth].x = elementos[depth-max].x - elementos[depth].width - espacio;
      contenedor.addChild(elementos[depth]);
      contenedor.removeChild(DisplayObject(elementos[depth-max]));
      elementos[depth-max] = null;
   }
}
private function doMarquesina():void{
   handlerAnimacion(speed);
   handlerLimit();
}
buildMarquesina();
anim = new delay(doMarquesina,0,0);


Es pseudo código, si lo copias jamás funcionará. Pero la idea es esa.

Saludos, Hernán . -

Por Hernán

BOFH

6148 de clabLevel

19 tutoriales
23 articulos

Genero:Masculino   REC Desarrollador de GAIA

Marketing & IT

firefox
Citar            
MensajeEscrito el 19 Nov 2010 09:11 am
Hola al ver el post me acorde de un tutorial que hice hace tiempo para as1 lo he buscado y lo e reconvertido a as3.0 no es una marquesina muy suabe que digamos pero alomejro te vale

Código ActionScript :

var miCadena:String;
//Inicializamos la variable "speed" con un valor de 2
var speed:int=2;
//Pasamos el texto a la cadena "miCadena" y intercalamos un espacio en blanco esto es necesario para k el texto no aparezca directamente si no k aparezca por la derecha. Tambien podemos cargar lso datos desde un array un  xml o lo que sea
var espacio:String="                                                                                                 ";
miCadena=espacio+"Hola amigos bienvenidos a CRISTALAB, esto es una marquesina muy pero que muy sencillita, la podemos mejorar con un timer en vez de con enterframe";
//Inicializamos la variable "memoria" con el valor/texto de "miCadena" esto nos servira para recuperar el texto original cada vez de ser borrado
var memoria:String=miCadena;
//Extraemos la longitud de la cadena este valor nos servira para saber de cuantos caracteres dispone la cadena y poderlos borrar de uno en uno mas adelante
var maxCarac:int=miCadena.length-1;
var i:int=0;
var n:int=0;
//Insertamos el evento OnEnterFrame k ejecutara el codigo indefinidamente
this.addEventListener(Event.ENTER_FRAME, alEntrarFrame);
function alEntrarFrame(e:Event):void {
   n++;
   //Insertamos una condicional k comprueva si "n" es multiplo del valor de la variable "speed" k la inicializamos anteriormente con el valor 2 de esta manera podemos controlar la velocidad de desplazamiento del texto porque asi el codigo no se ejecutara por cada 1 ciclo del evento onEnterFrame si no por cada 2
if (n%speed==0) {
      //Insertamos la variable "i" k se incrementara en +1 por cada ciclo
      i++;
      //utilizamos el metodo substr para eliminar el primer caracter de la cadena "miCadena" y pasamos el resultado al texto dinamico "txtOut" de la escena, al eliminar el primer caracter del texto cada x tiempo conseguimos el efecto de desplazamiento.
      txtOut.text=miCadena.substr(i,maxCarac);
      //Insertamos otra condicional k comprovara si la variable "i" es mayor o igual k el numero maximo de caracter de la cadena "miCadena"
      if (i>=maxCarac) {
         //Si resulta cierto entonces quiere decir k todos los caracteres de la cadena "miCadena" an sido borrados por lo tanto restablecemos las variables "n" e "i" a 0 y volvemos a pasar el valor de "memoria" a la cadena "miCadena" para volver a mostrar el texto completo.
         i=0;
         n=0;
         miCadena=memoria;
      }
   }
}



codigo final

Código ActionScript :

var speed:int=2;
var i:int=0;
var n:int=0;
var espacio:String="                                                                                                 ";
var miCadena:String = espacio+"Hola amigos bienvenidos a CRISTALAB, esto es una marquesina muy pero que muy sencillita, la podemos mejorar con un timer en vez de con enterframe";
var memoria:String=miCadena;
var maxCarac:int=miCadena.length-1;
this.addEventListener(Event.ENTER_FRAME, alEntrarFrame);
function alEntrarFrame(e:Event):void {
   n++;
   if (n%speed==0) {
      i++;
      txtOut.text=miCadena.substr(i,maxCarac);
      if (i>=maxCarac) {
         i=0;
         n=0;
         miCadena=memoria;
      }
   }
}


Por giskard

110 de clabLevel



Genero:Masculino  

Programador y diseñador web

msie8
Citar            
MensajeEscrito el 19 Nov 2010 01:19 pm
Hola giskard!!!

Gracias por tu ejemplo
Tengo una duda: hay posibilidad de reducir el espacio entre el primer y el ultimo caracter? es decir que mientras a la izquierda se ve el final de la frase, a la derecha se ve el comienzo, y poder manejar ese espaciado

Gracias

Por dianita666

Claber

185 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Nov 2010 02:35 pm
se me ocurren 2 cosillas para hacer lo quieres

la primera seria controlar cuantos caracteres le faltan por eliminar, cuando falten 1 o 2 entonces concatenas de nuevo el texto almacenado en la var memoria con los 2 caracteres que aun no han sido borrados y anteponiendo el espacio de caracteres en blanco

la otra solucion mas guarrila seria utlizar 2 campos de texto para alternar con ellos cuando en el primero queden solo 2 caracteres pues introducir el texto en el segundo campo y empezar a eliminar los caracteres del segundo campo y luego repetir la jugada con el primer campo asi indefinidamente

Prueba de intentarlo por ti misma si no te sales dame un toque y mirare de hacerte un ejemplo

Por giskard

110 de clabLevel



Genero:Masculino  

Programador y diseñador web

msie8
Citar            
MensajeEscrito el 19 Nov 2010 04:27 pm
Bueno al final me entretenido en hacerlo jeje he agregado la variable capicua cuanto mas alto el valor mas se juntaran la cabeza del texto siguiente con la cola del anterior asi el texto aparece mientras todabia no ha terminado el anterior
marquesina v2.0 xD





Código ActionScript :

var speed:int=2;
var i:int=0;
var n:int=0;
var capicua:int = 25;//A mayor numero menor el espacio entre la cola del texto y la cabeza del siguiente texto
var espacio:String="                                                                                                 ";
var miCadena:String = espacio+"^.}(._.)~ Bienvenidos a CRISTALAB,      d(-_-)b        <º(((><        (^,)~~        \(^o^)/        ( . )( . ) Teticas       (+[__]·:·)      ._. -_- ¯_¯ °_° ¥_¥ ¤_¤ :Þ      (_)(_)¯¯¯¯¯¯¯¯¯¯D~~~~ \___(( 0 ))___/";
var memoria:String=miCadena;
var maxCarac:int=miCadena.length-1;
this.addEventListener(Event.ENTER_FRAME, alEntrarFrame);
function alEntrarFrame(e:Event):void {
   n++;
   if (n%speed==0) {
      i++;
      txtOut.text=miCadena.substr(i,maxCarac);
      if (i>=maxCarac-50) {
         i=0;
         n=0;
         miCadena = txtOut.text + memoria.substr(50,memoria.length-1);
         maxCarac = miCadena.length-1;
      }
   }
}

Por giskard

110 de clabLevel



Genero:Masculino  

Programador y diseñador web

msie8
Citar            
MensajeEscrito el 19 Nov 2010 04:31 pm
se me olvido sustituir 50 por la variable capicua

Código ActionScript :

var speed:int=2;
var i:int=0;
var n:int=0;
var capicua:int = 25;//A mayor numero menor el espacio entre la cola del texto y la cabeza del siguiente texto
var espacio:String="                                                                                                 ";
var miCadena:String = espacio+"^.}(._.)~ Bienvenidos a CRISTALAB,      d(-_-)b        <º(((><        (^,)~~        \(^o^)/        ( . )( . ) Teticas       (+[__]·:·)      ._. -_- ¯_¯ °_° ¥_¥ ¤_¤ :Þ      (_)(_)¯¯¯¯¯¯¯¯¯¯D~~~~ \___(( 0 ))___/";
var memoria:String=miCadena;
var maxCarac:int=miCadena.length-1;
this.addEventListener(Event.ENTER_FRAME, alEntrarFrame);
function alEntrarFrame(e:Event):void {
   n++;
   if (n%speed==0) {
      i++;
      txtOut.text=miCadena.substr(i,maxCarac);
      if (i>=maxCarac-capicua) {
         i=0;
         n=0;
         miCadena = txtOut.text + memoria.substr(capicua,memoria.length-1);
         maxCarac = miCadena.length-1;
      }
   }
}

Por giskard

110 de clabLevel



Genero:Masculino  

Programador y diseñador web

msie8

 

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