Cómo se hace un lector de noticias con estas dos tecnologías.
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
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
Galileo