Centrar una película de Flash+Papervision
2 seguidores
Hola!
He realizado un cubo rotativo con opciones (a modo de menú principal) para dar acceso a mi web.
Lo he realizado con flash y Papervision3d 2.0 (greatwhite). Me funciona todo perfectamente, pero cuando lo publico y lo cuelgo me aparece un poco desplazado. En cambio, el texto que he introducido directamente en flash me aparece bien (lo he configurado en la ventana "configuración de publicación").
A parte, el efecto del cubo rotando se me entrecorta bastante. Puede ser que sea por poner las caras en smooth = true??
Gracias de antemano!
tpmmds
Hola:
La ralentización sí puede estar debida a suavizar el material. Puedes desactivarle el smooth cuando rota el cubo, y activarlo de nuevo cuando está quieto. El aliasing (los dientes de sierra) es más evidente cuando el objeto está quieto, y suele pasar más desapercibido cuando el objeto se mueve.
Un saludo.
FR_xx
Sobre lo que me comentas, tengo la duda de saber como puedo hacer para que este efecto smooth solo me funcione cuando el cubo esté quieto.
Sobre el código, tengo creado un material (por ejemplo mm) de la manera:
<code>
var mm:MovieMaterial = new MovieMaterial (face);
mm.interactive = true;
mm.animated = true;
mm.smooth = true;</code>
....................
y para el movimiento del cubo tengo:
<code>addEventListener(event.ENTER_FRAME, loop);
function loop(e:Event):void
{
var xDist: Number = mouseX - stage.stageWidth * 0.5;
var yDist: Number = mouseY - stage.stageHeight * 0.5;
cube.rotationY += xDist * 0.05;
cube.rotationX += yDist * 0.05;
renderer.renderScene(scene, camera, viewport);
}</code>
Si necesitas ver todo el código, el ejemplo lo he extraido de esta web:
http://www.gotoandlearn.com/player.php?id=68
Y sobre el centrado del cubo en la imagen que me puedes decir?
Un saludo!
Ahhh colocaré tambien el swf para que podais ver como está descentrado.
http://www.medben-arquitectura.com/pruebacubo.html
tpmmds
Hola:
Que se descuadre el texto tiene pinta de estar relacionado con que estás publicando el swf al 100% de su ancho/alto y, por tanto, cuando cambia el tamaño del navegador web cambia el tamaño del swf. Imagino que lo ves bien en Flash cuando lo compilas (Ctrl Intro), ya que no aparece dentro del html y éste no lo reescala al 100% del tamaño de la ventana.
Tienes varias opciones: hacer que el escenario no se reescale
<code>
stage.scaleMode = StageScaleMode.NO_SCALE
</code>
o darle un tamaño fijo al swf cuando se publique; no como ahora, que en la página web coge el 100%
Con respecto al cubo, si lo tienes siempre rotando, pues nada :-) .Ahora bien, parece que va excesivamente lento y puede ser debido a que has creado un cubo con una malla muy densa, prueba a darle menos densidad a las caras. Si bajas mucho la densidad de malla, la textura se distorsiona: intenta llegar a una solución de compromiso entre pocos vértices/poca distorsión del bitmap.
Un saludo.
FR_xx
muchas gracias!
Realizaré los cambios que me comentas. Ya te comentaré que resultados he obtenido.
Un saludo!
tpmmds
Hola:
Aquí tienes un ejemplo, es un proyecto actionScript de Flex, pero le he añadido un Fla por si es más cómodo editarlo desde Flash CS3
Código cubo rotando
El swf aparecerá centrado en el navegador y sin escalarse. Lo he estructurado de tal forma que sólo hay que modificar dos métodos de la clase Cubo.as (el resto, como si no quieres mirarlo :-) ):
1. Método geom3D. Aquí es donde debes crear la geometría que vas a añadir a la escena, que ya está creada y se llama scene.
2. Método update. Aquí debes colocar el código que metías en el método loop. Es el código que se actualizará cada ENTER_FRAME.
Le he añadido un método llamado suavizaMaterial que pasándole el material y el valor true/false, suaviza o no dicho material, según interese.
Un saludo.
FR_xx
He ejecutado tal como me lo has pasado desde flash y me da error en la linea 43 ( private function suavizaMaterial(material:MaterialsList, val:Boolean):void) tal como este:
1046: No se encontró el tipo o no es una constante en tiempo de compilación: MaterialsList.
Por lo que yo entiendo, sólo tengo que modificar las imágenes a las que llamo para cada cara y el efecto de rotación del cubo. Por lo que entiendo, tendría un cubo como el que he creado, pero creo que le faltaría hacer que cada una de las imágenes (caras) sean interactivas y cuando pulse sobre ellas me lleve a una web.
El ejemplo que tengo lo he modificado bajándole el tamaño (de 200 a 160), bajando tambien el número de segmentos (de 10 a 3) y ahora no se entrecorta nada. A la vez le he puesto medidas al viewport (640x480) y las mismas medidas en el archivo de flash para que coincidan, y parece ser que funciona bien. Aunque creo que la interactividad con el raton no funciona bien, porque me gira mucho mas en un sentido que en el otro.
No se si es mejor tu opción o la mia, así que te invito a que visites de nuevo el cubo que tengo colgado (ahora modificado) para comprobar con que método funciona mejor.
Un saludo muy grande y gracias!
http://www.medben-arquitectura.com/pruebacubo.html
tpmmds
Hola:
Por el mensaje que da parece que el Fla no tiene configurada la ruta a las clases de PV3D
Por otro lado, tu aplicación daba la impresión que era eso: una malla muy densa del cubo o una textura grande. Y parece que lo has solucionado. El ejemplo que posteé era básicamente un swf centrado y que no se escalaba.
Un saludo.
FR_xx
Vaya, seguro que es eso ya que no las había configurado, se me había pasado jejeje.
Igualmente, probaré tu ejemplo y me miraré el código para seguir aprendiendo sobre papervision.
Muchas gracias por tu ayuda!
FR_xx
Hola de nuevo!
He mejorado el movimiento del cubo en rotacion (cambiando variables del loop). Al cambiar las variables de la publicación (tamaño en pixels, no 100x100 porque salia muy grande) se me descentra de nuevo.
He colgado el archivo fla por si me puedes modificar lo que crees que puede estar mal, o si se ha de añadir algo nuevo.
Un saludo!
www.medben-arquitectura.com/pruebacubo.fla
FR_xx
Hola compañero!
Me he mirado tu ejemplo y sinceramente creo que está mejor jejeje en el sentido que está todo mejor estructurado. He añadido mi método loop y funciona perfectamente. He modificado las imágenes y tambien funciona.
En mi ejemplo si que sabia como hacerlo, pero en este como debo:
- Hacer interactivas las caras del cubo. Yo antes tenia definido un material por cada cara y le ponia:
<code>cara1.interactive = true;</code>
Ahora tenemos una variable material:materialList con sus caras y imágenes definidas. En este caso, lo que debería hacer es esto?
<code>material.interactive = true;</code>
- Para que cuando haga click sobre una de las caras, me direccione a una url. Yo en mi ejemplo tenia:
<code>
face4.addEventListener(MouseEvent.CLICK, face4Click);
function face4Click(e:MouseEvent):void
{
navigateToURL(new URLRequest("http://www.medben-arquitectura.com/eng/index-eng.html"));
}
</code>
Creaba un evento para cada cara (click) y luego definía la función para bavegar a la url que yo quisiera. En tu ejemplo lo puedo hacer tambien así? O como debería colocarlo?
Parece que cada dia me meto mas de lleno jejeje. Es apasionante este mundo.
Gracias de antemano y un saludo!
tpmmds
Hola:
Esta tarde te cambio la clase para que cuando pulses cada cara abra una web, y te la posteo aquí. Creo que será más rápido porque tu código estaba en el frame1 de la línea de tiempo de Flash y como escriba aquí un trozo de código nos vamos a liar ;-).
Sólo tendras que sobreescribir la clase que te postee aquí.
Un saludo.
FR_xx
Ok!
Cuando acabe con este tema creo que vamos a retomar ya (otra vez) el tema del menú cubos, que ahora parece que entiendo mas y puedo empezar a elaborar lo que será mi web.
Bueno, primero lo primero.
Un saludo!
tpmmds
Hola:
Aquí tienes todo el proyecto, con el archivo Fla. Ahora las texturas van en la biblioteca, como en el proyecto que estabas haciendo. Le he cambiado el código del método loop ya que como decías no hace un movimiento uniforme. Ahora gira más rápido cuanto más te alejas de él con el ratón.
Eso sí, el cubo cuando se le suaviza el material empieza a tironear, especialmente cuando tiene caras normales a la pantalla. En IE no tanto,pero en Firefox, que es el que utilizo habitualmente no va muy fluído con smooth=true.
Descargar código fuente Cubo interactivo
Un saludo.
FR_xx
Muy bien, ahora funciona perfectamente.!
Gracias por tu ayuda. Un saludo.
FR_xx
Bueno, que te parece si retomamos el ejemplo del menu cubo?
Ya tengo lista mi web, así que ya se los contenidos que he de introducir. Buscaré a ver si tengo el ejemplo en flash, que parece me desenvuelvo mejor. No tendré tanta facilidad con los códigos (siempre puedo escribir los códigos en flex y pasarlos a flash...)
Lo último que teníamos es que cuando pulsábamos en un cubo, nos hacia un zoom-travelling a una de las caras.
Te cuento el efecto que querría conseguir, a ver si es posible hacerlo.
- Inicialmente, el cubo que hemos estado desarrollando. Cuando pulse sobre una de las caras se irá hacia la direccion escogida (serán los diferentes idiomas en los que estará la web).
- Aparece el menú cubos. Cuando pulso sobre uno de los cubos (opción deseada) se hace un zoom alejandose y colocando el menú en el borde inferior izquierdo. En pantalla aparece una ventana donde estarán los textos y las imágenes a comentar.
Te pongo la dirección de mi web para que veas los contenidos a mostrar.
www.medben-arquitectura.com
A ver como podemos enfocarlo.
Un saludo!
FR_xx
Luis, he accedido a tu web y he visto que has colgado un ejemplo en el cual cargas un pdf en ventana.
Yo lo que busco cuando te digo que me aparezcan los contenidos de la web es algo así como un iframe sobre, por ejemplo, un plano. Esto es posible?
He hecho un esquema a ver si se entiende bien.
www.medben-arquitectura.com/esquema1.jpg
Un saludo!
tpmmds
Hola:
En principio, en teoría, no hay ningún problemas en colocar la capa sobre el swf. El problema viene después con la variedad de navegadores que hay y la forma de renderizar la página web que tienen.
Te comento, alguno de los problemas que he tenido. Empecé utilizando swfObject para colocar el swf y el iframe. Todo perfecto, maravilloso en IE6 y Firefox, pero en el nuevo IE, el de las pestañas no se mostraba el iFrame. Bueno, paso de swfObject y utilizo directamente la forma de incrustar swf de Flex. Todo perfecto hasta que se me ocurre hacer que el menú de la izquierda pueda redimensionarse: en Firefox deja una "bonita" estela el iframe al redimensionar el menú.
Al final opté por esta última opción y ocultar el iframe cuando se redimensiona. Un infierno, y creo que en algún que otro navegador no se verá correctamente, o directamente no se verá :-(
Esta solución puede ser útil en una intranet en la que haya 1 o 2 tipos de navegadores, pero para Internet creo que, o eres un "especialista" de las peculiaridades de cada navegador, o... puedes morir en el intento.
Un saludo, y eso... en teoría, funciona, la práctica es otra cosa: un dolor de cabeza :-)
FR_xx
Entonces supongo que lo mejor es colocar dentro de flash un cuadro de texto e insertar las imágenes. De esta manera creamos un "folio" que se deberá cargar cuando hayamos pulsado sobre una opcion o otra y haya acabado el efecto travelling, verdad?
FR_xx
Por cierto, dos cosas sobre el cubo anterior. Ya lo tengo colgado en la web y queda muy bien :). Ahora me gustaría dar un salto mas:
- Cuando le de a una de las caras del cubo (opciones), antes de que me salga ya la url a la que direcciono, se visualice este efecto: Las letras bajo el desaparecen y el cubo, por si solo, acelera la velocidad de rotacion y se va alejando hasta desaparecer. Entonces luego ya aparece la web.
- La web aparezca en la misma pantalla (como cuando en html, indicamos un enlace con _target).
Estoy en pleno proceso de traducción de la web a los diferentes idiomas, así voy avanzando por ambos sitios.
Un saludo y gracias de antemano!
Pd. he mirado en coconnut, en el ejemplo "deformar una malla con papervision3D" se acerca un poco a lo que quiero conseguir (tanto con el cubo inicial como en el menuCubos). En el ejemplo cuando pulsamos sobre una de las imágenes, se hace un zoom a esta. Yo en el cubo que tengo inicialmente, quiero que cuando pulse sobre una de las caras del mismo, se aleje la cámara (o se haga el cubo muy pequeño) hasta desaparecer. Estoy mirando tweener porque creo que se puede realizar con esta clase.
He importado las clases al proyecto y he escrito este código de esta manera:
<code>
private function onClickListener(evt:MouseEvent):void {
switch (evt.currentTarget.name) {
case "cara1":
navigateToURL(new URLRequest("http://www.medben-arquitectura.com/cast/index-cast.html"));
break;
Tweener.addTween(cubo, {x:(1000*(0.5-Math.random())), y:(1000*(0.5-Math.random())), z:1000, scalex:0.5, time:0.5, transition:"easeInOutQuad"});
</code>
Ya ves que he cogido una linea de uno de los ejemplos que tienes y pegado directamente, a ver si hacía algo, pero no realiza ninguna función. No se si se lo debo indicar en todas las caras o hay que hacer una variable para todas las caras.