| |
| Foros de discusión » Como se hizo » http://www.framemedia.co.uk/ |
|
Página 1 de 7 Ir a página 1, 2, 3, 4, 5, 6, 7 Siguiente |
|
| Autor |
Mensaje |
| citruS |
Publicado: Sab May 21, 2005 12:38 am |
|
|
|
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 |
|
| Volver arriba |
|
| dondiegote |
Publicado: Mie May 25, 2005 12:32 am |
|
|
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!  |
_________________ { home } | { playground }
"trace, luego existo" |
|
| Volver arriba |
|
| Oscar Bernal |
Publicado: Mie May 25, 2005 8:33 am |
|
|
|
Registrado: 29 Ene 2005
Mensajes: 351
Ubicación: Paris
|
Me dejaste impresionado DD
Donde aprendiste AS? |
|
|
| Volver arriba |
|
| Cay |
Publicado: Mie May 25, 2005 8:41 am |
|
|
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
Un saludo |
_________________
no-web | blog | play | work |
|
| Volver arriba |
|
| dondiegote |
Publicado: Mie May 25, 2005 8:47 am |
|
|
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
Aún así ahí teneis una ventaja de tener un prototipillo.
Saludos y gracias por los comentarios |
_________________ { home } | { playground }
"trace, luego existo" |
|
| Volver arriba |
|
| dondiegote |
Publicado: Mie May 25, 2005 8:48 am |
|
|
Moderador
Registrado: 26 Oct 2004
Mensajes: 2294
Ubicación: despierto Ò.ó
|
Ah!, Vent me esperaba más una corrección tuya sobre mi inglés  |
_________________ { home } | { playground }
"trace, luego existo" |
|
| Volver arriba |
|
| Cay |
Publicado: Mie May 25, 2005 9:02 am |
|
|
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 
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 |
|
| Volver arriba |
|
| dondiegote |
Publicado: Mie May 25, 2005 9:13 am |
|
|
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" |
|
| Volver arriba |
|
| Cay |
Publicado: Mie May 25, 2005 9:17 am |
|
|
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
PD: por cierto, quizas las modificaciones q hice al prototipo puedan influir en el cierre del onEnterFrame, quizas haya q revisar eso  |
_________________
no-web | blog | play | work |
|
| Volver arriba |
|
| dondiegote |
Publicado: Mie May 25, 2005 9:27 am |
|
|
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  |
_________________ { home } | { playground }
"trace, luego existo" |
|
| Volver arriba |
|
| Eliseo |
Publicado: Mie May 25, 2005 9:33 am |
|
|
|
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
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é) |
|
|
| Volver arriba |
|
| Cay |
Publicado: Mie May 25, 2005 9:36 am |
|
|
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 ... 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  |
_________________
no-web | blog | play | work |
|
| Volver arriba |
|
| dondiegote |
Publicado: Mie May 25, 2005 9:42 am |
|
|
Moderador
Registrado: 26 Oct 2004
Mensajes: 2294
Ubicación: despierto Ò.ó
|
jejeje, descarao tienes espacio para currar en un pda
* Ültimo off topic que me estropeas el post  |
_________________ { home } | { playground }
"trace, luego existo" |
|
| Volver arriba |
|
| Cay |
Publicado: Mie May 25, 2005 9:48 am |
|
|
Moderador
Registrado: 06 Oct 2004
Mensajes: 1467
Ubicación: País Vasco
|
uy uy.... como me gustan estas discusiones  
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
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...
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)...
Saludos... |
_________________
no-web | blog | play | work |
|
| Volver arriba |
|
| dondiegote |
Publicado: Mie May 25, 2005 10:13 am |
|
|
Moderador
Registrado: 26 Oct 2004
Mensajes: 2294
Ubicación: despierto Ò.ó
|
Estoy ciego, 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" |
|
| Volver arriba |
|
|
|
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
|
|
|