Sistema de noticias con Flash y Actionscript

14/7/05 - Si algo echaré de menos el día que mis obligaciones no me permitan publicar, sin duda, será el tener la oportunidad de dar a conocer el grandísimo talento y conocimientos de personas que, aún siendo muy conocidas (como en este caso), en After-Hours por su entrega y dedicación, además de otros por donde habitualmente suele moverse, por razones obvias, su trabajo no siempre puede llegar a todo el mundo como sería deseable.

Me gustaría presentarles a dondiegote, moderador de los foros de AH, un amigo que según reza en su web, se presenta de esta forma... “TRABAJO MUCHO Y DUERMO POCO. HASTA QUE TENGA TIEMPO LIBRE, QUE AL MENOS ALGO MIO DESCANSE”

Para que esta frase tenga sentido para todos vosotros, lo mejor es que veamos una de sus últimas aportaciones.

Se planteó en el foro Como se hizo la sección noticias de www.framemedia.co.uk. En la web, que me parece muy buena, llama la atención sobre todo por su sencillez y por este sistema de noticias. Es cierto que esta forma de presentación recuerda mucho, la verdad es que muchísimo a www.carldekeyzer.com de los grandes www.group94.com.

El planteamiento de lo que se va a hacer es sencillo.

Divide los elementos que va a usar en 2 grupos diferentes, títulos y textos. Tiene en el escenario 2 máscaras, una para cada grupo.

La idea es crear 2 grandes MovieClips que contengan por un lado todos los títulos, y enmascararlos dentro de su espacio, y por otro lado los textos y enmascararlos también.

Los datos los pone en 2 arrays diferentes, con la idea de poder recogerlos desde un xml o txt. En el post completo hay un ejemplo de cómo añadirle un xml creado por kaax

El resto es relativamente sencillo y está explicado dentro del script. Usa un prototipo easing para hacer los movimientos y quizás lo más llamativo es la forma de controlar y mandar estos movimientos. Utiliza como referencia la noticia que se quiere mostrar, y recorre en dos bucles diferentes las noticias de arriba y las de abajo, situándolas en función de la principal.

Como curiosidad podéis observar que en framemedia no coincide la noticia donde pinchas con la que se ve, sino la anterior y en este caso, el ha visto más lógico hacerlo sobre la que se ha picado.

Ahora lo importante, el fla:
http://www.thelirios.com/ah_news_framemedia/news_framemedia.zip

Y el código:

Stage.scaleMode = "noScale";
prof = 10; // Sigo marcandome la profundidad, no me acostumbro al getNextHighestDepth

// Creo 2 arrays, uno con los títulos y otro con los textos.
// La idea es poder recogerlos desde un xml o un txt

News = new Array("noticia 1", "noticia 2", "noticia 3", "noticia 4", "noticia 5", "noticia 6", "noticia 7");
Noticias = new Array("Titulo noticia 1\n\nEste es el texto de la noticia 1", "Titulo noticia 2\n\nEste es el texto de la noticia 2", "Titulo noticia 3\n\nEste es el texto de la noticia 3", "Titulo noticia 4\n\nEste es el texto de la noticia 4", "Titulo noticia 5\n\nEste es el texto de la noticia 5", "Titulo noticia 6\n\nEste es el texto de la noticia 6", "Titulo noticia 7\n\nEste es el texto de la noticia 7");

// Hago un prototipillo para hacerme los easings
// lo uso sobre todo para _y pero le paso "prop" para usarlo en _scales
MovieClip.prototype.easing = function(prop, fin, frec) {
   this.onEnterFrame = function() {
    this[prop] += (fin - this[prop])*frec;
    if(Math.abs(this[prop] - fin) < .5) {
     this[prop] = fin;
     delete this.onEnterFrame;
    }
   }
}

// Creo un clip "mnu" que serán los botones con los títulos
this.createEmptyMovieClip("mnu", prof++);
// Lo situo donde su máscara. En la escena solo tengo 2 máscaras más el fondo, lo demás lo attacheo
this.mnu._x = msk._x;
this.mnu._y = msk._y;
// lo enmascaro
this.mnu.setMask(msk);

// Creo un clip "noticias" que serán los textos de las noticias
this.createEmptyMovieClip("noticias", prof++);
// lo coloco
this.noticias._x = msk2._x;
this.noticias._y = msk2._y;
// lo enmascaro
this.noticias.setMask(msk2);

// Empieza la juerga ...
for(n=0; n < News.length; n++) {
   // TITULOS
   // atacheo "new"
   this.mnu.attachMovie("new", "new"+n, prof++);
   // lo doy el texto correspondiente
   this.mnu["new"+n].txt.text = News[n].toUpperCase();
   // Defino una variable interna del clip new+n llamada yFin
   // en yFin almaceno el destino _y del clip y los demás se colocan en relación a los yFines
   this.mnu["new"+n].yFin = this.mnu["new"+(n-1)].yFin + this.mnu["new"+(n-1)]._height;
   // Si yFin devuelve NaN estoy en el primero, luego lo coloco donde quiero
   if(isNaN(this.mnu["new"+n].yFin)){ this.mnu["new"+n].yFin = msk2._y + msk2._height - msk._y - this.mnu["new"+n]._height};
   // le mando hacer el easing y que vaya a su sitio
   this.mnu["new"+n].easing("_y", this.mnu["new"+n].yFin, .5);

   // NOTICIAS
   // attacheo "textos"
   this.noticias.attachMovie("textos", "textos"+n, prof++);
   // les doy su texto
   this.noticias["textos"+n].txt.text = Noticias[n];
   // Defino yFin
   this.noticias["textos"+n].yFin = this.noticias["textos"+(n-1)].yFin + this.noticias["textos"+(n-1)]._height;
   // Coloco el primero
   if(isNaN(this.noticias["textos"+n].yFin)){ this.noticias["textos"+n].yFin = 0};
   // Les mando a su sitio
   this.noticias["textos"+n].easing("_y", this.noticias["textos"+n].yFin, 5);

   // ACCIONES BOTONES
   // el rollOver y el rollOut, sencillitos
   this.mnu["new"+n].rOver._alpha = 0;
   this.mnu["new"+n].onRollOver = function() {
     this.txt.textColor = 0xffffff;
     this.rOver._yscale = 0;
     this.rOver._alpha = 100;
     this.rOver.easing("_yscale", 100, 6);
   }
   this.mnu["new"+n].onRollOut = this.mnu["new"+n].onReleaseOutside = function() {
     this.txt.textColor = 0x333333;
     this.rOver._yscale = 100;
     this.rOver.easing("_alpha", 0, 15);
   }
   // onRelease
   this.mnu["new"+n].onRelease = function() {
     // La posición que van a tomar el clip de los textos de las noticias.
     // Muevo el clip "noticias" entero, pero tomo como referencia el alto de un texto
     var newpos = this._parent._parent.msk2._y - (this._parent._parent.noticias.textos1._height*substring(this._name, 4));
     // le mando a su sitio
     this._parent._parent.noticias.easing("_y", newpos, 15);
     // Llamo a la función ColocaTitulos para colocarme los botoncillos
     ColocaTitulos(substring(this._name, 4));
   }
}
// Para situar los botones cuando click en alguno
function ColocaTitulos(actual) {
   var actual = Number(actual); // transformo el String actual en número para operar con él
   // Defino yFin en el botón clickado, y le mando a su sitio (justo debajo de las noticias)
   this.mnu["new"+actual].laY = msk2._y - msk._y;
   this.mnu["new"+actual].easing("_y", this.mnu["new"+actual].laY, 5);
   // Defino y coloco los botones por encima del clickado, tomandolo como referencia
   for(n = (actual-1); n>=0; n--) {
     this.mnu["new"+n].laY = this.mnu["new"+(n+1)].laY - this.mnu["new"+n]._height;
     this.mnu["new"+n].easing("_y", this.mnu["new"+n].laY, 5);
   }
   // Defino y coloco el boton por debajo del clickado, tomando como referencia la máscara de los textos
   this.mnu["new"+(actual+1)].laY = msk2._y + msk2._height - msk._y;
   this.mnu["new"+(actual+1)].easing("_y", this.mnu["new"+(actual+1)].laY, 5);
   // Defino y coloco los botones por debajo del anterior, tomandolo como referencia
   for(n = actual+2; n < News.length; n++) {
     this.mnu["new"+n].laY = this.mnu["new"+(n-1)].laY + this.mnu["new"+(n-1)]._height;
     this.mnu["new"+n].easing("_y", this.mnu["new"+n].laY, 5);
   }
}

Se ha subido un ejemplo para verlo on-line, si queréis, podéis verlo en aquí http://www.thelirios.com/ah_news_framemedia

Autoría, licencia y acciones sobre este artículo

Informe de Galileo* Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

 Se han encontrado 4 comentarios sin revisar

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba