Foros de discusión
Foros de discusión  »  Como se hizo  »  http://www.framemedia.co.uk/
 Publicar nuevo tema   Responder al tema
Página 1 de 7    Ir a página 1, 2, 3, 4, 5, 6, 7  Siguiente

http://www.framemedia.co.uk/

Autor Mensaje
citruS
Publicado: Sab May 21, 2005 12:38 am Responder citando
Registrado: 19 Ago 2004 Mensajes: 76
hi, i wanna know, how to do this effect in the NEWS section:
http://www.framemedia.co.uk/

como se hizo la seción de noticias? (news?)

gracias a todos!

_________________
-------------------------------------
ps: sorry my english and español!! is very poor!!
-------------------------------------
2004, brasil
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor MSN Messenger Número ICQ
dondiegote
Publicado: Mie May 25, 2005 12:32 am Responder citando
Moderador Registrado: 26 Oct 2004 Mensajes: 2294 Ubicación: despierto Ò.ó
Hi citruS.

Really hard news section from www.framemedia.co.uk but i try to make an example:

news reader like framemedia
And the .fla

Sorry, the comments in the code are in spanish.

The code:
Código:

prof = 10; // Sigo marcandome la profundidad, no me acostumbro al getNextHighestDepth :D

// 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);
   }
}


Ahora en castellano. El fla está preparadito para construir un menú de (infinitas) noticias a partir de 2 arrays, uno con los títulos y otro con los textos, para poder combinarlo con cualquier lector de news que tengais ya hecho.

Me puse a hacerlo porque la web me moló mogollón, y estudiando el sistema de news podeis observar que no coincide la noticia donde pinchas con la que se ve, sino la anterior. He visto más lógico hacerlo sobre la que se ha picado.

La parte de las imágenes es la que veo relativamente más facil, ya que manda cargar la imagen simplemente.

Es tan definido que ahora no le veo mucha utilidad, ya que no sería original, pero lo mismo os sirve para otros desarrollos.

Y no me enrollo más, un saludo. Enjoy! Laughing

_________________
{ home } | { playground }
"trace, luego existo"
Ver perfil de usuario Enviar mensaje privado Enviar email Visitar sitio web del autor MSN Messenger
Oscar Bernal
Publicado: Mie May 25, 2005 8:33 am Responder citando
Registrado: 29 Ene 2005 Mensajes: 351 Ubicación: Paris
Me dejaste impresionado DD

Shocked Shocked Shocked

Donde aprendiste AS?
Ver perfil de usuario Enviar mensaje privado MSN Messenger
Cay
Publicado: Mie May 25, 2005 8:41 am Responder citando
Moderador Registrado: 06 Oct 2004 Mensajes: 1467 Ubicación: País Vasco
eh tiu, muy wuapo!

un detallito, cambia el prototipo del easing a esto:
Código:
MovieClip.prototype.easing = function(prop, fin, frec) {
   fin=Math.round(fin);
   this.onEnterFrame = function() {
      this[prop] += (fin - this[prop])*frec;
      this[prop] = Math.round(this[prop]);
      if(Math.abs(this[prop] - fin) < 1.1) {
         this[prop] = fin;
         delete this.onEnterFrame;
      }
   }
}

(debiera funcionar)
asi te evitas el q las pixelfonts se vean borrosas Wink

Un saludo

_________________

no-web | blog | play | work
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor
dondiegote
Publicado: Mie May 25, 2005 8:47 am Responder citando
Moderador Registrado: 26 Oct 2004 Mensajes: 2294 Ubicación: despierto Ò.ó
En un principio lo hice sin pixelFonts, pero no se deberian de ver borrosas pues tienen nºs enteros desde el principio Wink

Aún así ahí teneis una ventaja de tener un prototipillo.

Saludos y gracias por los comentarios

_________________
{ home } | { playground }
"trace, luego existo"
Ver perfil de usuario Enviar mensaje privado Enviar email Visitar sitio web del autor MSN Messenger
dondiegote
Publicado: Mie May 25, 2005 8:48 am Responder citando
Moderador Registrado: 26 Oct 2004 Mensajes: 2294 Ubicación: despierto Ò.ó
Ah!, Vent me esperaba más una corrección tuya sobre mi inglés Mr. Green

_________________
{ home } | { playground }
"trace, luego existo"
Ver perfil de usuario Enviar mensaje privado Enviar email Visitar sitio web del autor MSN Messenger
Cay
Publicado: Mie May 25, 2005 9:02 am Responder citando
Moderador Registrado: 06 Oct 2004 Mensajes: 1467 Ubicación: País Vasco
dondiegote escribió:
En un principio lo hice sin pixelFonts, pero no se deberian de ver borrosas pues tienen nºs enteros desde el principio Wink

se ven borrosas mientras se mueven por la ecuacion del easing...

dondiegote escribió:
Ah!, Vent me esperaba más una corrección tuya sobre mi inglés

nah, no soy purista del lenguaje ni mucho menos... con tal de q se entienda y aparezca la palabra 'hard' me basta xD

_________________

no-web | blog | play | work
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor
dondiegote
Publicado: Mie May 25, 2005 9:13 am Responder citando
Moderador Registrado: 26 Oct 2004 Mensajes: 2294 Ubicación: despierto Ò.ó
Ventd'Aval escribió:

se ven borrosas mientras se mueven por la ecuacion del easing...


¡¡Tio!!, ¡¡Como en la original!!

¡Se trataba de eso!

Ya me habias asustado, pensaba que cuadraban mal, pero durante el easing está hecho a drede, como en framemedia, además me gusta el efecto.

_________________
{ home } | { playground }
"trace, luego existo"
Ver perfil de usuario Enviar mensaje privado Enviar email Visitar sitio web del autor MSN Messenger
Cay
Publicado: Mie May 25, 2005 9:17 am Responder citando
Moderador Registrado: 06 Oct 2004 Mensajes: 1467 Ubicación: País Vasco
pues a mi no!, en mi TFT se ve fatal!... asi q a editar el post y menos excusas! xD Mr. Green

PD: por cierto, quizas las modificaciones q hice al prototipo puedan influir en el cierre del onEnterFrame, quizas haya q revisar eso Wink

_________________

no-web | blog | play | work
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor
dondiegote
Publicado: Mie May 25, 2005 9:27 am Responder citando
Moderador Registrado: 26 Oct 2004 Mensajes: 2294 Ubicación: despierto Ò.ó
Ahora en serio Vent, ¿en tu TFT se ve mal también la de framemedia?

Ya te digo que es un efecto hecho a conciencia, aparte de que no cuesta nada cambiarlo, pero no pienso editarlo por tu monitor :p pero tengo curiosidad de si en framemedia te pasa.

PD. Compraté un monitor de los antiguos Wink

_________________
{ home } | { playground }
"trace, luego existo"
Ver perfil de usuario Enviar mensaje privado Enviar email Visitar sitio web del autor MSN Messenger
Eliseo
Publicado: Mie May 25, 2005 9:33 am Responder citando
Registrado: 15 Nov 2004 Mensajes: 2771
Ventd'Aval escribió:

un detallito, cambia el prototipo del easing a esto:
Código:
MovieClip.prototype.easing = function(prop, fin, frec) {
   fin=Math.round(fin);
   this.onEnterFrame = function() {
      this[prop] += (fin - this[prop])*frec;
      this[prop] = Math.round(this[prop]);
      if(Math.abs(this[prop] - fin) < 1.1) {
         this[prop] = fin;
         delete this.onEnterFrame;
      }
   }
}

(debiera funcionar)
asi te evitas el q las pixelfonts se vean borrosas Wink

Sólo por aclarar, casi seguro de que no funciona, Deberíamos usar una variable temporal que va a ser real e igualar al final la propiedad. Vamos algo como
Código:

MovieClip.prototype.easing = function(prop, fin, frec) {
   this.fin=Math.round(this.fin);  //<---le falta el this
        //cojo una variable temporal
        this["t_"+prop]=this[prop]
   this.onEnterFrame = function() {
      this["t_"+prop] += (this.fin - this["t_"+prop])*frec;
      this[prop] = Math.floor(this["t_"+prop]);
      if(Math.abs(this["t_"+prop] - this.fin) < 0.5) {  //medio pixel
         this[prop] = this.fin;
         delete this.onEnterFrame;
      }
   }
}

Vamos, estamos trabajando siempre con números reales. En nuestro caso con "t"+prop
Es SÓLO a la hora de dar la propiedad cuando hacemos el Math.round -lo he cambiado por floor porque me gusta más -de hecho he estado tentado a cambiarlo por int(), pero me dijeron que la instrucción int() estaba "descatalogada" (un día le pregunto a Macromedia por qué)
Ver perfil de usuario Enviar mensaje privado
Cay
Publicado: Mie May 25, 2005 9:36 am Responder citando
Moderador Registrado: 06 Oct 2004 Mensajes: 1467 Ubicación: País Vasco
nono, si tan terrible no se ve... es solo q a mi en lo personal no me gusta cuando al terminar el movimiento hace un flicker raro y feo... feo!... esa es la palabra Razz ... en framemedia pasa lo mismo

PD: odio los TFT, de hecho en casa tengo un lindo CRT, pero tu has visto mi estacion en el curro, y comprenderas q 2 tremendos culos ya no caben Wink

_________________

no-web | blog | play | work
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor
dondiegote
Publicado: Mie May 25, 2005 9:42 am Responder citando
Moderador Registrado: 26 Oct 2004 Mensajes: 2294 Ubicación: despierto Ò.ó
jejeje, descarao tienes espacio para currar en un pda Laughing

* Ültimo off topic que me estropeas el post Mr. Green

_________________
{ home } | { playground }
"trace, luego existo"
Ver perfil de usuario Enviar mensaje privado Enviar email Visitar sitio web del autor MSN Messenger
Cay
Publicado: Mie May 25, 2005 9:48 am Responder citando
Moderador Registrado: 06 Oct 2004 Mensajes: 1467 Ubicación: País Vasco
uy uy.... como me gustan estas discusiones Very HappyVery HappyVery Happy

aver....

-no le falta el this a fin pq es una variable local...

Eliseo escribió:
Sólo por aclarar, casi seguro de que no funciona

si funciona Mr. Green
Eliseo escribió:
, Deberíamos usar una variable temporal que va a ser real e igualar al final la propiedad. Vamos algo como...
Vamos, estamos trabajando siempre con números reales. En nuestro caso con "t"+prop
Es SÓLO a la hora de dar la propiedad cuando hacemos el Math.round -lo he cambiado por floor porque me gusta más -de hecho he estado tentado a cambiarlo por int(), pero me dijeron que la instrucción int() estaba "descatalogada" (un día le pregunto a Macromedia por qué)

Esto de la variable temporal no lo entiendo... pero bueno, si lo dices es por algo... Wink

lo del int(), creo haber leido q ocupa mas recursos... igual me equivoco...
lo de round vs floor, pues a mi me acomoda mas el round, pero supongo q es cosa de gustos...

lo del 0.5 en vez de 1.1, pues es dificil de explicar... pero te insto a q pruebes con 0.5 y compruebes q se cierra siempre el onEnterFrame... con 1.1 me aseguro q siempre sera un entero de diferencia (q es la maxima diferencia q puede ocurrir por el round o el floor)... Wink

Saludos...

_________________

no-web | blog | play | work
Ver perfil de usuario Enviar mensaje privado Visitar sitio web del autor
dondiegote
Publicado: Mie May 25, 2005 10:13 am Responder citando
Moderador Registrado: 26 Oct 2004 Mensajes: 2294 Ubicación: despierto Ò.ó
Estoy ciego, Shocked perdona Eliseo no habia visto tu post (creia que vent hablaba solo)

Vent si dices que funciona, me alegro porque yo hubiera dado la razón a Eliseo con lo de this.fin, lo malo que en ese caso creamos otra variable, y si funciona de otra manera nos ahorramos una.

De todos modos, si hablamos de ahorrar el efecto borroso en el movimiento, solo haría falta:
Código:

this[prop] = Math.round(this[prop]);

después de la formula del easing, y redondearlo cuando borremos el enterFrame y ya está, no hay por qué cambiar la variable al principio, porque es solo un punto de referencia hacia donde ir, el definitivo se le da al borrar el EF.

_________________
{ home } | { playground }
"trace, luego existo"
Ver perfil de usuario Enviar mensaje privado Enviar email Visitar sitio web del autor MSN Messenger
 
Publicar nuevo tema   Responder al tema
Página 1 de 7    Ir a página 1, 2, 3, 4, 5, 6, 7  Siguiente
Todas las horas son GMT + 1 Hora
Fecha y hora actual: Mar Feb 09, 2010 1:37 pm
Puede publicar nuevos temas en este foro
No puede responder a temas en este foro
No puede editar sus mensajes en este foro
No puede borrar sus mensajes en este foro
No puede votar en encuestas en este foro