Cómo empezar con Papervision
hola a tod@s,
soy nuevo aqui asi que perdonad si pregunto cosas que son fáciles de entender y no se aun jejeje
os cuento,
hace poco empecé en el mundo de crear páginas web. Realicé una muy sencilla para el despacho donde trabajo, a nivel muy sencillo. Luego ya he optado por crear una web para mi propio. soy arquitecto y me gustaria hacer una web impactante y interactiva donde mostrar mis trabajos.
Empecé mi web realizándola ya en flash, para poder conseguir esos efectos. Lo malo es que una vez ya tengo la estructura, me parece un poco pobre.
Asi que buscando por aqui y por alli descubrí papervision3d. Es increible lo que se puede hacer con este programa. he mirado vuestros mensajes con las realizaciones que creais y son muy muy buenas.
El problema que tengo es que no se por donde empezar. Tengo la idea clara de los efectos y la estructura que quiero crear pero me faltan los medios para realizarla.
Tengo un poco de lio en la cabeza porque veo programa por todos lados. Tengo el 3dstudio max 6.0, el photoshop 8.0, y me he descargado el swift3d, swift3d.max, flash cs...
Por eso me gustaria preguntar que programas o conocimientos necesito tener para empezar a aprender a utilizar este programa.
Muchas gracias a tod@s!!!
FR_xx
He trabajado en algo desde el mensaje anterior. Ahora estoy en este punto:
- El programa flex ya esta actualizado. Se ha solucionado el problema.
- Sigo pendiente de probar la adaptacion de flash a flex (creo que lo voy entendiendo poco a poco).
- El cubo rotando: He escrito este código. Lo pego aquí para que le des un vistazo. He rellenado el archivo mxml mirando un ejemplo de tu web.
main.mxml
<code>
<xml>
<mx>
<mx>
</mx>
<mx>
<CDATA>
</mx>
</mx>
</code>
cuboinicial.as
package jel.com.pv3d2
import jel.com.main.CanvasFlash;
import flash.display.Sprite;
import mx.containers.Canvas;
import org.papervision3d.scenes.MovieScene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.materials.BitmapColorMaterial;
import flash.events.Event;
public class cuboinicial extends CanvasFlash
{
private var escenario3D:MovieScene3D;
private var camara:Camera3D;
private var cubo:Cube;
public function cuboinicial(_width:Number, heihgt:Number)
{
this.width=_width;
this.height=_height;
var contenedor_spt:Sprite = new Sprite();
contenedor_spt.x = 0.5*_width;
contenedor_spt.y = 0.5*_height;
this.addChild(contenedor_spt);
escenario3D = new MovieScene3D(contenedor_spt);
camara = new Camera3D(DisplayObject3D.ZERO);
camara.zoom = 8;
camara.focus = 100;
camara.moveBackward(1650);
camara.moveUp(1000);
var materialCubo:BitmapColorMaterial = new BitmapColorMaterial(0xFF00FF,1);
cubo = new Cube (materialCubo,500,500,500,1,1,1,0,0);
escenario3D.addChild(cubo);
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame (evt:Event):void
{
cubo.rotationX = 1;
cubo.rotationY = 1;
cubo.rotationZ = 1;
escenario3D.renderCamera(camara);
}
}
De momento dejo el cubo con un color base. Cuando me funcione la aplicación, incorporaré la textura de las caras mediante mi logo.
Bueno, ahi queda eso.
Gracias!<code></code><fieldset></fieldset>
FR_xx
Buenas de nuevo!!
Creo que es mejor escribirte por aqui ya que me sabe mal llenaros el blog de una multitud de preguntas jejeje
No se si te habrá llegado el mensaje nuevo del blog, pero lo recupero aqui.
- He abierto hoy el Eclipse y resulta que me ha aparecido un mensaje diciendo que el plugin flex builder se me ha caducado y que tengo que poner un serial. Pensaba que era freeware como el eclipse. Sabes como puedo solucionarlo? Si lo instalo de nuevo tendre otra vez mas dias?
- Referente a la adaptación del menu cubos a un proyecto flex, cuando tenga unos minutos y pueda usar de nuevo flex, pruebo las órdenes que me has indicado en vuestro blog.
- Ahora mismo en mi web no tengo nada introducido, solo un "en construcción" y visitar el blog. He pensado que hasta que no tenga listo todo el tema de los cubos y demás contenidos, poner un cubo rotando con el logotipo de la web en cada una de las caras.
Creo que esto tan sencillo lo podré conseguir (bueno, ya veremos jejeje). Pero he visto en un ejemplo en una web donde aparece una especie de reflejo en el suelo del elemento. Creo que también aparece en el ejemplo de vuestro blog del album de fotos con papervision. Como puedo hacer esto?
- El código mxml. Cuando creo el nuevo proyecto, he visto que puedo modificar el "lienzo" base del proyecto, pero me gustaria saber como puedo enlazar el archivo .as que he creado para que funcione como las aplicaciones que colgais en la web.
Buenoooo vaya listado. Ahora ya ves porque no quiero escribirte mucho en el blog jejjeje
espero tu respuesta! Gracias!
FR_xx
he mirado lo del filezilla y no se si es lo que te voy a decir:
en el menu editar -> opciones hay un apartado llamado "accion si el fichero existe". Ahi se puede poner que se sobreescriban los archivos al subirlos o descargarlos.
Supongo que este paso ya lo habrás visto, pero por si acaso aqui dejo lo conseguido.
hasta luego!
FR_xx
buenas!
me acabo de bajar filezilla. No se muy bien como funciona pero si descubro lo que me preguntabas te lo cuento.
supongo que andarás muy ocupado porque no te veo escribir. Cuando tengas un ratillo seguimos con el aprendizaje.
Nos vemos!
FR_xx
muy buenas,
lo primero decirte que este tema de filezilla no lo controlo para nada. Lo siento!
lo segundo seria tratar del tema del globo terraqueo y la luna que tienes en tu blog. Me gustaria, si puede ser, que me ayudaras a poder construir una especie de "galaxia". Esferas que vayan girando alrededor de un sol, que se vea desde lejos y cuando pulsemos en uno de los planetas, se haga un efecto zoom al mismo.
Con tus conocimientos seguro que voy mas rápido jejeje Es que no acabo de entender como colocar los elementos en el espacio y el tema del zoom, como hiciste tambien en el menu cubos se me resiste.
tengo iniciado un sol, con un planeta y su luna. Supongo que el tema esta en el dummy, ir relacionando luna con planeta y luego con sol, y así ir creando elementos. Como puedo hacer para que le des un ojo?? Te cuelgo aqui el código para que lo mires.
package jel.com.pv3d
{
import flash.display.GradientType;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.GlowFilter;
import flash.geom.Matrix;
import jel.com.main.CanvasFlash;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.events.FileLoadEvent;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.Sphere;
import org.papervision3d.scenes.MovieScene3D;
import org.papervision3d.materials.BitmapColorMaterial;
public class EjemploA extends CanvasFlash
{
private var escenario3D:MovieScene3D;
private var camara:Camera3D;
private var tierra:Sphere;
private var esfera:Sphere;
private var atmosfera:Sphere;
private var neptuno:Sphere;
//private var dummy:DisplayObject3D;
public function EjemploA(_width:Number, _height:Number) {
this.width = _width;
this.height = _height;
//Creamos un fondo de estrellas, 400 para ser más exactos.
creaFondoEstrellas(400);
//creamos un sprite y se lo asignamos al escenario3D
//hay que centrarlo en pantalla, dando la mitad del ancho y el alto de la misma.
//de no hacer esto, los objetos aparecerían en la esquina superior izquierda de la pantalla
var contenedor_spt:Sprite = new Sprite();
contenedor_spt.x = 0.5*_width;
contenedor_spt.y = 0.5*_height;
this.addChild(contenedor_spt);
escenario3D = new MovieScene3D(contenedor_spt);
//creamos la cámara y definimos su zoom y la distancia a la que está el objetivo
camara = new Camera3D(DisplayObject3D.ZERO);
camara.zoom = 3;
camara.focus = 80;
//movemos la cámara hacia atrás y arriba para mirar al mundo desde un ángulo ligeramente picado
camara.moveBackward(1000);
camara.moveUp(900);
//creacion de la variable para el giro de los dos planetas conjuntamente
//var dummy:DisplayObject3D = new DisplayObject3D();
//escenario3D.addChild(dummy);
//creamos un material con la textura de la superficie de la Tierra, que cargamos de la carpeta imagenes
var materialSol:BitmapFileMaterial = new BitmapFileMaterial("imagenes/sol.jpg");
//creamos una esfera para simular el globo terráqueo
tierra = new Sphere(materialSol, 350, 20, 16);
escenario3D.addChild(tierra);
//creamos una esfera de un radio mayor para simular la atmósfera
atmosfera = new Sphere(new ColorMaterial(0xeeeeff, 0.1), 360, 20, 16);
escenario3D.addChild(atmosfera);
//creamos una esfera mas pequeña en el espacio y su textura
var materialLuna:BitmapFileMaterial = new BitmapFileMaterial("imagenes/luna.jpg");
esfera = new Sphere(materialLuna, 80, 20, 16);
esfera.x = 1000;
esfera.y = -300;
escenario3D.addChild(esfera);
//creo un nuevo planeta mas lejano que el resto
var materialTierra:BitmapFileMaterial = new BitmapFileMaterial("imagenes/mundo.jpg");
neptuno = new Sphere(materialTierra,250,20,16);
neptuno.x = 1500;
neptuno.y = -500;
escenario3D.addChild(neptuno);
//metemos en el escenario el dummy
//dummy.addChild(esfera);
//dummy.addChild(neptuno);
//aplicamos un filtro glow a las esferas para simular el aspecto gaseoso de la atmósfera
tierra.container.filters = [new GlowFilter(0xeeeeff, 0.50, 50, 50, 2.0, 1.0, false)];
atmosfera.container.filters = [new GlowFilter(0xeeeeff, 0.50, 50, 50, 1.5, 1.0, false)];
//declaramos esta clase como oyente del evento ENTER_FRAME
//esto hace que el método onEnterFrame sea llamado 25 veces por segundo (el frameRate de reproducción de la aplicación)
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
//método que dibuja estrellas aleatoriamente en el fondo
private function creaFondoEstrellas(num:uint):void {
var fondoEstrellas:Sprite = new Sprite();
fondoEstrellas.graphics.clear();
fondoEstrellas.graphics.beginFill(0x000000, 1.0);
fondoEstrellas.graphics.drawRect(0,0, this.width, this.height);
fondoEstrellas.graphics.endFill();
var radio:Number;
for (var i:uint=0; i<num;i++) {
radio = 1.5*Math.random();
fondoEstrellas.graphics.beginFill(0xffffff, 0.7);
fondoEstrellas.graphics.drawCircle(this.width*Math.random(), this.height*Math.random(), radio);
fondoEstrellas.graphics.endFill();
};
this.addChild(fondoEstrellas);
}
//este método es llamado cada 1/25 de segundo (cada vez que se produce un evento ENTER_FRAME)
private function onEnterFrame(evt:Event):void {
//rotamos las esferas y renderizamos el escenario para que se actualice la vista
//dummy.rotationY = 5;
tierra.rotationY -= 2;
esfera.rotationY -= 3;
neptuno.rotationY -= 4;
escenario3D.renderCamera(camara);
}
}
}
muchas gracias!
tpmmds
Hola, feliz año nuevo :-):
Sí, acabo de mirarlo y, efectivamente, la mitad de las cosas del post de la Tierra/Luna no se han actualizado a la nueva versión que me comentabas. Ya me había pasado alguna vez: utilizo Filezilla para subir las cosas y me han explicado que tiene una especie de caché que "recuerda" las cosas cuando las borras.
Esta noche borraré todos los archivos y lo subiré de nuevo.
Un saludo.
P.D.: Si sabes algún truco rápido para que cuando FileZilla sobreescriba archivos "realmente" los sobreescriba, que no sea borrar la carpeta, te lo agradecería ;-)
FR_xx
primero de todo feliz año nuevo!!
perdona por el alejamiento temporal pero ya se sabe, los compromisos familiares nos roban el poco tiempo que tenemos libre jejeje.
ahora ya poniendonos en el tema. He visitado el ejemplo de la tierra y la luna girando alrededor. He estado mirando el código del archivo ejemploA.as para ver las órdenes que has utilizado. Ahora bien, me he quedado un poco parado al ver la luna girando alrededor de la tierra, y en cambio el componente luna o el material de la luna no estan inscritos en el código.
luego al final del todo, veo que en la órden para la rotacion de la tierra aparece de esta manera:
tierra.rotationY -= 2;
escenario3D.renderCamera(camara);
el negativo antes del signo igual es asi o va despues?? no se si funciona de esta manera o es un error tipográfico jejeje
un saludo
tpmmds
Hola:
He subido al blog un ejemplo básico de cómo crear una esfera en papervision, hecho en Flex. He ido comentando cada paso para aclarar el proceso y en el zip está todo el proyecto Flex. Descomprimelo en tu carpeta workspace de Eclipse y crea un proyecto Flex con EL MISMO NOMBRE que esta carpeta, y a funcionar.
He utilizado PV3D 1.7 (no la versión 2.0 GreatWhite) porque parece que es la de ese ejemplo que has posteado.
Creo que no tendrás excesivo problema en ir creando planos y demás objetos con el ejemplo que he subido.
También te aclaro una cosa: Puedes trabajar de dos formas:
1. Un proyecto Flex donde el "elemento visual básico", por así decirlo es el canvas (el lienzo) que es equivalente al movieClip de Flash.
2. Un proyecto ActionScript, que funciona como la IDE de Flash, donde el "elemento visual básico" es el sprite, o el movieClip si va a estar animado.
Esta diferencia es fundamental, porque no son exactamente lo mismo. Si optas por el primero, generalmente tus clases deberán extender (heredar, o dicho más llanamente SER) de la clase canvas; en el segundo caso las clases deben extender de sprite/movieClip.
No te asustes, esto quiere decir que si las clases "visuales", o sea, las que van a mostrar cosas en pantalla, en el caso de Flex serán del tipo:
public class miClase extends canvas {
...
}
y en el segundo caso:
public class EjemploA extends sprite {
...
}
Un saludo.
P.D.: Me acabo de pasar por el blog y veo que no has tenido muchos problemas para utilizarla ;-):
FR_xx
Ya he copiado todo el código (de la clase ejercicio1).
Le he dado a ejecutar y me ha salido una pantalla. Solo he puesto el nombre del proyecto, a aplicar cambios y a ejecutar. Me ha aparecido una pantalla abierta en explorer, con un fondo gris degradado pero no se ve nada.
Supongo que tengo que modificar ahora otro archivo que haga referencia a este archivo de clases verdad? Es quizà el archivo que tengo mxml?? O debo realizar mas pasos??
gracias!
pd. te escribo el codigo aqui abajo para que lo compruebes:
package jel.com.pv3d2
{
import flash.display.Sprite;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.materials.BitmapColorMaterial;
import flash.events.Event;
public class Espacio3D_class extends Sprite
{
var container: Sprite;
var escena: Scene3D;
var camara: Camera3D;
var plano: Plane;
var esfera: Sphere;
private function Espacio3D_class()
{
inicio3D();
this.addEventListener(evento.ENTER_FRAME, giro3D);
}
private function inicio3D():void
{
container = new Sprite();
addChild(container);
container.x = 800;
container.y = 600;
escena = new Scene3D(container);
camara = new Camera3D();
addPlano();
addEsfera();
}
private function addPlano():void
{
var plano:Plane = new Plane (new BitmapColorMaterial(0xFF00FF, 1), 500, 300, 8, 8);
escena.addChild(plano);
}
private function addEsfera():void
{
var esfera:Sphere = new Sphere (new BitmapColorMaterial(0x0000FF), 100, 8, 6);
esfera.x=100;
esfera.y=200;
escena.addChild(esfera);
}
private function giro3D(evento:Event):void
{
esfera.yaw(5);
escena.renderCamera(camara);
}
}
}
FR_xx
hola de nuevo!
lo primero, decir que escribir con eclipse es realmente sencillo! Es cuestion de ir paso a paso. De esta manera se entiende mucho mejor para que funciona cada linea de código. Está muy bien escribir una variable (por ejemplo, un plano) y salir directamente en linea las variables que son necesarias para definir el plano (material, tamaño...). Realmente muy cómodo.
Estoy empezando por crear una aplicacion donde salga un plano y una esfera, para ir jugando con tamaños, materiales, efectos de giro, juego con las cámaras... supongo que empezar asi es bueno para no liarme con cosas mas complicadas.
A la vez, me da la sensacion que, a parte, me esta resultando mucho mas fácil de esta manera que creando las geometrias en 3d studio... aunque en un futuro me gustaria acabar de aprenderlo bien (te dare de nuevo la lata) porque si la web que creo es de arquitectura, me gustaria poder visitar las maquetas 3d de mis proyectos (como en un ejemplo de la web de mr doob).
He empezado por escribir las variables y, en efecto, se van importando las clases necesarias mientras se escribe el código (realmente bueno!).
Siguiendo con mi ejemplo, ya he creado las variables. El siguiente apartado que he visto en algunos ejemplos es crear la funcion (function) de la clase creada, donde se define la orden init3d() (supongo que se define para al final iniciar la aplicacion 3d creada) y en la siguiente linea:
this.addEventListener( Event.ENTER_FRAME, loop3D );
esta linea me crea dudas. Al escribir this, en la lista de posibilidades que se permiten, la funcion addevenlistener no me aparecia. Para que sirve esta funcion? El event he visto que es la definicion que se le da al evento de giro (loop3d), pero el ENTER_FRAME tampoco lo entiendo.
Estas lineas las he extraido de un ejemplo de una web que se llama HolaMundo (esfera rotando con imagen como textura).
Tampoco entiendo que quiere decir la orden addChild.
Hasta que me contestes, ire rellenando el resto de la aplicacion.
gracias!!
tpmmds
Hola:
Eso es lo bueno de utilizar otros editores que no sean el de la IDE de Flash: te olvidas de los imports. Tú empieza a escribir código y Eclipse se encarga de ir añadiendo los imports que vas a utilizar. Ejemplo, escribes:
var miPlano:Plane = new Plane(...
y verás cómo arriba habrá aparecido el import para el plano
Además cuando pulsas los ":" te saldrá una lista con las clases que puedes escribir, y rápidamente puedes elegirlo.
Es algo difícil de explicar pero fácil de entender, como dijo la folckórica ;-). Prueba a empezar a escribir código y verás qué fácil te resulta.
También tienes asistentes para crearte una nueva clase: Te sale una ventana donde especificas el paquete donde quieres colocarla, por ejemplo, en fracto.com.pv3d, le dices de cuál extiende ( o sea, si se va a tratar de un sprite, un movieClip, un sound, etc).
Lo que te digo, esto es empezar a escribir y verás que no te hace falta ni conocer a priori los métodos/propiedades de las clases que estás utilizando.
Un saludo.
FR_xx
muy buenas
lamento que no participes pero bueno, te dare mucha guerra entonces para aprender jejeje
ahora mismo me pongo a probar lo que me has explicado a ver que tal me sale.
Una pregunta que te querria hacer sobre la estructura de papervision:
- me he fijado que todos los archivos de clases de papervision (en las aplicaciones creadas, como la de los cubos por ejemplo):
a) import... con esto importamos las clases de papervision, flash...
b) public o private class ... hacemos mencion a la clase creada, a partir de aqui se forma el contenido de la aplicacion creada.
c) var ... definicion de las variables que forman la aplicacion
d) luego vamos agregando los elementos: escenario, geometrias, efectos de cámara...
esto creo que lo tengo claro (corrigeme si me equivoco :P).
Ahora bien. Un ejemplo simple: un cubo en entorno 3d.
a) Como se yo los elementos que tengo que importar de papervision? Hay alguna aplicacion que, segun lo que quieras hacer te los coloque o eres tu el que va diciendo: import org.papervision3d.cameras.*, import org.papervision3d.materials.* ...
b)que diferencia hay entre public y private?? es que veo diferentes aplicaciones que usan uno u otro, y otras que ni lo usan.
c)que es un sprite?
d)los efectos que se pueden hacer (cámara que al pulsar sobre un objeto haga un zoom, mover la cámara con el teclado, difuminar objetos al estar lejanos...) se pueden ver en algun listado o hay que ver los codigos de papervision e ir investigando como se usa?
supongo que es la segunda opcion, sino seria mas facil de aprender jejeej
Todo esto lo pregunto para probar de hacer una aplicacion mediante flex con papervision y empezar a escribir el código.
muchas gracias!!!
pd. he probado el ejemplo del puzzle pero tengo la duda de como girar las fichas, porque aparecen en un sentido y en la imagen es en el contrario.
tpmmds
Hola de nuevo:
Se me olvidaba, no sé si has visto que al lado del botón Source tienes otro llamado Design, lo pulsas y Flex se convierte en un entorno visual. En el centro de la pantalla te aparece un lienzo (canvas) en blanco (o gris Flex, más concretamente XD), y en la parte inferior izquierda tienes todos los componentes necesarios para hacerte tu primera aplicación: botones, ventanas, listas desplegables, campos de texto, etc. Y layouts para distribuir de forma ordenada los componentes dentro de la aplicación.
Un saludo
tpmmds
Hola:
Si quieres empezar con Flex, puedes bajarte algún ejemplo del blog. Entra al que más te guste, pulsa botón derecho y elige "View Source". Se te abrirá una ventana con código: eso es Flex. Utiliza un tipo de xml propio llamado mxml (o sea, xml de macromedia :-)).
Sigue los pasos:
1. Verás que hay un enlace a un archivo zip. Te lo descargas y lo descomprimes en la carpeta que tengas configurada como workspace de Eclipse.
2. Creas un nuevo proyecto de Flex: File/New/Flex project.
3. En la ventana "Create a Flex project" en la casilla "Project name" le das EL MISMO NOMBRE que la carpeta donde has descomprimido el zip. Por ejemplo, si te has bajado el ejemplo PuzzleClasico, que se ha descomprimido en la carpeta "PuzzleClasico" introduces en ese campo dicho nombre (es bueno hacer copy&paste para que no falle ningún carácter ;-))
4. Si vas a utilizar algún paquete de clases concreto, por ejemplo, Papervision, en la siguiente ventana, y dentro de la lengûeta Source path, pulsarías el bótón Add Folder y buscarías la ruta del paquete. Por ejemplo, si te has bajado el ejemplo del efecto de desenfoque, que utiliza papervision 1.7, tendrías que darle la ruta donde tengas el paquete con todas estas clases.
5. Pulsas el botón Finish y listo. Verás que te aparecerá una estructura de carpetas a la izquierda de la pantalla con todos los recursos que tiene ese proyecto. Pulsas Ctrl F11 y ejecutarás la aplicación; pulsando F11 sólo, la ejecutas en modo debug, para depurar el código.
Por cierto, en los ejemplos que tienen archivos de imágenes no suelo adjuntar las imágenes con el código fuente para no hacer muy pesado el archivo zip. Si te bajas alguno, por ejemplo el puzzle, bùscate unas imágenes que te gusten, editas el xml donde las lee (así practicas :-)) y le das los nombres de dichas imágenes.
Un saludo.
P.D.: Con respecto a la colaboración, muchas gracias por el ofrecimiento ;-) pero esto es mi hobby y hago cosillas en Flash/Flex para relajarme y olvidar la infografía que es a lo que dedico mi jornada laboral. La verdad es que no quiero comprometerme en algo que hago por diversión. Pero esto no quita que estamos aquí para echarte una mano en lo que haga falta, un nuevo saludo y ánimo con vuestro proyecto :-)
FR_xx
por cierto, sobre el tema del proyecto que te comenté en la post-data de un mensaje anterior.
Somos un grupo de 16 personas que nos hemos unido para crear una web. Hemos pensado en crear un entorno 3d para la misma. Estoy aprendiendo papervision por este tema y, a la vez, para hacer mi web personal mucho mas atractiva que la que habia realizado en flash (de ahi todo el tema del menu cubos).
He podido comprovar que tienes bastante dominio sobre este tema y por la forma en que te dedicas a contestar los mensajes, siempre ayudando, y el blog en el cual cuelgas aquellos experimentos realizados habia pensado en preguntarte si te gustaria formar parte. nos serias de mucha ayuda, de verdad.
Si te apetece participar o saber mas sobre el tema, enviame un mail a mi direccion y asi te cuento. Si estas muy ocupado o no te apetece no hay problema. Yo sigo aqui preguntandote jejeje asi aprendo para mi web y para el otro proyecto.
de nuevo, agradecerte toda la ayuda que me estas prestando.
muchas gracias!
FR_xx
bueno, ya tengo instalado flex y eclipse. No habia acabado aun de entender papervision y ahora a utilizar otro mas jejejeje
por lo que he probado, he creado un proyecto de flash dentro de eclipse y se me ha creado lo que yo entiendo como los archivos necesarios para el funcionamiento de la aplicacion.
mientras lo creo, me aparece una ventana con "source path" y "library path". Me podrias hacer un breve resumen de esta ventana? Supongo que es para estrucurar el proyecto.
si sigo adelante y le doy a finish, ya me aparece para escribir en el archivo creado prueba.mxml. Este era el archivo donde rellenabas la informacion de los cubos verdad? Bueno, era un archivo .xml no se si son lo mismo.
Entonces, por ejemplo, en este archivo podria escribir ahora:
<xml>
<mx>
<xml>
- <objetos>
- <cubo>
<posicion>
<rotacion>
<dimensiones>
- <texturas>
<textura>texturas/tex1.jpg</textura>
<textura>texturas/tex2.jpg</textura>
<textura>texturas/tex3.jpg</textura>
<textura>texturas/tex4.jpg</textura>
<textura>texturas/tex5.jpg</textura>
<textura>texturas/tex6.jpg</textura>
</texturas>
</cubo>
- <esfera>
<posicion>
<dimensiones>
- <textura></textura>
</esfera>
- <plano>
<posicion>...
<dimensiones>...
<textura>...
</plano>
jeejee el cubo lo se por el ejemplo, pero seria asi para una esfera, plano o cualquier otro elemento??
Es que tengo muy claro como quiero que sea mi web pero claro, el problema de no saber como hacer cada efecto hace que lo vea muy dificil. suerte que viendo que has hecho el menu de los cubos como queria en pocos dias, me anima a intentar aprender todo lo que pueda.
Lo que se refiere a crear un proyecto, no se si es de otra manera, no se como enfocarlo. Puede ser que se creen todos los archivos necesarios mientras vas cambiando el codigo de los archivos?? Seria la caña jejeje
ufff vaya listado. te dejo descansar un rato (hasta el proximo mensaje ;P)
gracias!
tpmmds
Hola:
Creo que el problema que tienes es el que comenté de la versión de Eclipse. Flex 2, creo, no se puede instalar sobe versiones de Eclipse superiores a la 3.2. Pásate por la página de Eclipse y bájate la versión 3.2. La página tiene un historial de versiones y te puedes descargar antiguas.
Un saludo.
FR_xx
nueva duda:
me he instalado eclipse version 3.3.1.1, hasta ahi todo bien.
ahora me he descargado el flex 2 plugin para eclipse, y lo he empezado a instalar.
llego al apartado donde me dice que redireccione la ruta a la carpeta donde se encuentra el archivo eclipse.exe y la carpeta configuration. Se lo indico, le digo a continuar pero me da un mensaje de error, como si no fuera correcta la ruta. raro raro no? dice que no me lo encuentra.
pd. te querria hacer una propuesta para un proyecto que llevo entre manos pero por privado.
gracias!
tpmmds
Hola:
Lo bueno es poder elegir, como decía aquel anuncio de móviles.Para gustos los colores ;-).
Flex en principio lo concibió Macromedia (antes de Adobe también había vida) como una herramienta para que los desarrolladores web pudieran utilizar la tecnología Flash sin necesidad de recurrir a editores de páginas web. Para entendernos, si utilizas Flash para hacer una página web, tienes que pasar por Dreamweaver, o programa similar, para "acabar" la página. Esto Flex lo evita.
Además, tiene la grandísima ventaja (creo que es por lo que se ha extendido algo su uso, y no la razón del párrafo anterior XD) de que es un entorno de programación bastante más amigable que el IDE de Flash. Está en inglés, pero como si estuviera en español, te ayuda muchísimo a escribir código, a depurarlo, a organizar el código de tus proyectos...
Puedes encontrar dos versiones de Flex Builder:
1. Un entorno de programación que desarrolló Macromedia (ahora Adobe :-() propio y que no utilizo, básicamente porque en el "curro" han optado por la otra opción.
2. Flex en entorno Eclipse. Te bajas Eclipse (Flex 2 no admite versiones posteriores a Eclipse 3.2) lo descomprimes e instalas Flex eligiendo la opción de instalarse como plugin de Eclipse. Y a correr.
En mi empresa, como utilizan también Java, conocían bastante bien Eclipse y optaron por esta segunda opción.
Ya dentro de Flex tienes dos opciones:
a) Hacer un proyecto Flex propiamente dicho y que es autosuficiente. Una vez acabado, lo subes a tu dominio web, y a funcionar ;-).
b) Hacer un proyecto ActionScript. Esta opción es muy parecida a la de hacer un proyecto dentro de Flash, pero con todas las ventajas de Eclipse:
- Sugerencia de código bastante más "acertada" que la que puede hacerte Flash.
- Un depurador de código que te lo enseña TODO-TODO. Casi se te olvida en socorrido "trace" ;-).
Un saludo
FR_xx
muy bien, veo que voy aprendiendo porque ya se los errores a que puede ser debidos jejeje
que me recomiendas, flex o eclipse? los dos? son fáciles de utilizar? Que diferencias hay entre Flex 2, Flex Builder, Flex 3... no se cual descargar.
saludos!
tpmmds
Hola:
El error que te da es que en el rar se me olvidó adjuntar la carpeta bin, con las texturas el xml, y "to la pesca". Esta noche lo arreglaré ;-).
El otro error puede ser que no hayas configurado la ruta a Great White, que seguirá apuntando al GreatWhite de MI ORDENADOR.
Es que estoy habituado a publicar el código con aplicaciones Flex, y con las hechas directamente en Flash tengo que hacerlo a mano, y siempre se me olvida algo.
Por otro lado, Flex/Eclipse están en inglés; no sé si hay alguien por ahí que haya hecho un plugin para pasarlo a español, o algo así. Pero vamos, estos IDE's son siempre lo mismo: que si debugger, que si Run application... :D
Un saludo.
FR_xx
bueno, he instalado el archivo nuevo de los cubos dentro del antiguo y ahora me da error en el archivo menucuboszoom.as en las lineas 167, 185 y 189 del tipo:
1046: No se encontró el tipo o no es una constante en tiempo de compilación: InteractiveScene3DEvent.
pd. me gustaria saber a que direccion te puedo enviar unos documentos (no me gustaria colgarlos aqui) o si me envias un mail a mi direccion si no quieres hacerla publica.
muchas gracias
FR_xx
ya me lo he descargado, y al probarlo (dandole la ruta de mi greatwhite), me dice que hay una ruta que no exitse haciendo referencia a un archivo menu/bin/MenuCubosFlash.swf que no existe.
otra cosa. me he descargado e instalado el eclipse. Hay alguna manera de cambiar el idioma al español? El tema de este programa es hacer lo mismo que con flash ( a lo que se refiere de código), pero no entiendo de que manera facilita la creacion de proyectos.
yo veo muy bien el ejemplo de los cubos sin collada jejeje. Voy a ver como mapeas las texturas en primitivas de pv3d mirando el código.
buff, vaya lio de programas jejeje a ver si me acabo de aclarar!
tpmmds
Hola:
Nada, al escribir el enlace se me saltó una palabra. B ájatelo de aqui
http://blog.coconnut.com/source/jel/MenuCubosFlashZoom/MenuCubosFlash.rar
Esta tarde actualizaré el enlace en el blog.
Con respecto al xml, no me expliqué muy bien. El archivo xml lo creo yo y le digo a la aplicación Flash que lo cargue. Lo que hice fue ver (pero vamos, yo mismo con mi mecanismo ;-)) las coordenadas de cada cubo y escribirlas en el xml.
Y las texturas de los cubos son "tostados" de max, como has adivinado, pero mapeadas sobre primitivas de PV3D. De hecho, puede ser así más rápido, si utilizas código, que exportar el archivo Collada. El único problemas es que los cubos no tienen biseladas las aristas, y canta un poco cuando te acercas a ellas.
Un saludo
FR_xx
muy buenas
voy a descargarme ahora mismo el eclipse a ver que tal me desenvuelvo!
- El menu cubos: Nos vamos acercando jejeje. No era exactamente lo que decia pero me parece muy bueno el efecto. Puede que incluso me guste mas que el que yo pretendia :). He intentado descargarme el codigo pero la pagina me da error.
Por cierto, una muy buena calidad en el segundo ejemplo de los cubos. En este caso tambien se crean las texturas con el tostado de las superficies?
-No he entendido muy bien la conexion que me dices del xml y 3d studio. He podido ver que no se puede exportar un archivo desde max a xml ( o por lo menos en el mio no). No se si te refieres en decir que has dibujado el elemento (cubo) en max y has cogido sus características y las has escrito en el xml.
-lo de las camaras perfecto. Lo he entendido muy bien. El ser igual que en max me ha resultado claro!!
voy a ver como me desenvuelvo. Gracias!
tpmmds
Hola:
He subido un nuevo ejemplo al blog. Ahora, cuando pulsas sobre un cubo, la cámara hace un travelling hacia él. No sé si es el efecto que vas buscando; variaciones hay miles ;-).
La geometría sigue estando generada directamente desde PV3D, he mapeado cada cara de los cubos con su textura tostada por lo que puede tardar algo más en descargarse.
Con respecto a tus "dudillas", vayamos por partes.
1. Xml. Es un formato de intercambio de datos muy extendido en Internet. No está relacionado directamente con PV3D, pero Flash lo procesa muy bien y es fácil obtener datos de cualquier xml. A poco que te mentas en este mundillo, te vas a "jartar" de verlo/utilizarlo.
Lo he empleado para pasarle las posiciones, tamaños y texturas de los cubos (estos datos ya los conocía del modelo de Max. En la ayuda de Flash puedes encontrar abundante información sobre cómo leer y procesar un xml.
2. Las cámaras en PV. Son objetos 3D como los cubos, planos, etc. Por tanto tienen las propiedades x, y, z (sus coordenadas en 3D). Además tienen un target (el mismo concepto del target de las cámaras de Max) El target es el punto hacia donde mira la cámara. Si lo mueves haces que la cámara cambie de punto de vista. También existen FreeCameras (igual que en Max) que no tienen target; esta cámara debes rotarlas en el espacio para que cambien el punto de vista. Según que casos, pueden ser más, o menos, difíciles de utilizar.
3. Los filters (glowFilter, blurFilter, etc.) se aplican a nivel de sprite. Tienes que acceder al container del objeto 3D que estés manipulando y aplicarle el filtro a su propiedad filters (igual que un sprite de Flash normal). No sé si sabes que un filtro es un array, por lo que debes meterlo entre corchetes:
<code>
miSprite.filters = [new BlurFilter(...)];
</code>
Te comenté anteriormente la posibilidad de que utilizaras un editor distinto del que trae el IDE de Flash. Hay varios. Yo utilizo Eclipse y para todo esto de ver qué métodos/propiedades tiene cada objeto es muy fácil. De hecho, la mayoría de propiedades/métodos las voy descubriendo conforme utilizo las clases. También tiene un debugger "bastante mejor" que el de Flash. Puedes consultar practicamente cualquier cosa de la aplicación que estés desarrollando en tiempo de ejecución (valores que va tomando una propiedad, cuándo se produce un evento y quién lo lanzó, etc.).
Hay más, hace tiempo utilizaba el editor SEPY, menos potente que Eclipse. No sé si actualmente habrá mejorado algo, le tengo bastante perdida la pista.
Un saludo.
FR_xx
hola de nuevo
no se si te voy a marear, pero querria comentarte otro tema, que tiene que ver con la opcion camera3D y un BlurFilter de flash.
He visto el ejemplo del blog de enfoque y desenfoque. Un poco complicado para mi entender de momento tanto código.
Para ser mas sencillo, como seria, por ejemplo, tener un plano en la lejania desenfocado (por ejemplo conteniendo una foto) y que cuando se pulse sobre el, la cámara haga un zoom al objeto, enfocandolo y acercandose a el?
Esto me servira para complementar el tema de los cubos, para poder hacer que, al pulsar en uno de los cubos me lleve a uno de los planos que esten detras desenfocados. Este efecto de zoom lo he visto en el ejemplo que me decias del carrusel3d. Le dare tambien un vistazo.
gracias de nuevo!
pd. si deseas enviarme documentacion o algun ejemplo sobre lo que comentamos por mail lo he activado para que esté visible
FR_xx
hola muchacho,
ahora mismo me pongo a trabajar.
Si, al principio te comenté lo del 3d studio porque pensaba que seria mucho mas fácil que trabajar con código. Pero claro, tener que aprender aspectos que no conocia en 3d studio y al final igualmente hay que escribir código actionscript, habia pensado en aprender el codigo y hacer los elementos con el mismo. Poco a poco, mientras lo estudio, me parece menos complicado. solo es cuestion de saber como hay que escribir el codigo y para realizar los efectos que ordenes son necesarias.
Estos dias estoy aprendiendo mucho gracias a tu ayuda, asi que seguire siendo un poco mas pesado para seguir aprendiendo este mundillo. Creo que con un buen nivel de aprendizaje se pueden hacer cosas realmente buenas.
de nuevo agradecerte tu ayuda y seguimos en contacto, porque tengo muuuuuuuchas preguntas que hacerte jejejej. pero poco a poco!!! :)
empecemos por un poco de explicacion de xml. Como funciona y en que consiste?
he visto el archivo que contiene los elementos que forman el efecto (cubos) en el archivo objetos.xml y veo muy fácil el modificar los datos relacionados con cada uno. Hay otros archivos en carpetas "notes" que no se muy bien para que funcionan.
crear simplemente una esfera, o un plano, o otro elemento es tan solo invocarlo y dar sus caracteristicas (posicion, tamaño, textura...)?
ahora toca descifrar el codigo actionscript, a ver si me es tan facil jejeje.
Te comentare a través del ejemplo de los cubos.
capitulo1: camaras.
-Camera3d.
He visto que la orden hover sirve para el movimiento de la cámara en funcion del movimiento del raton. En el ejemplo de los cubos no veo esa orden, sino una funcion EnterFrame y las variables nodo y visor. Son lo mismo las dos cosas?
-FreeCamera3d.
Con la orden TransformView, se pueden crear esos efectos de que al pulsar en un objeto lejano, la cámara se acerque? Como funciona? O este sistema se realiza con una freecamera (no depende del objeto).
camara.z se refiere a girar entorno del objeto? porque no acabo de ver mucho la diferencia entre camara.y y camara.z
gracias mil!
tpmmds
Hola:
Para crear un plano sin texturas, de un color determinado te creas un material de dicho color y se lo asignas al plano:
<code>
var miPlano:Plane = new Plane(new BitmapColorMaterial(0xff0000), 100, 100, 8, 6)
miEscenario3D.addChild(miPlano)
//para crear una esfera azul
var miEsfera:Sphere = new Sphere(new BitmapColorMaterial(0x0000ff, 100, 8, 6)
miEscenario3D.addChild(miEsfera)
</code>
Lo he escrito directamente aquí, por lo que no sé si me he saltado algo ;-)
Junto a las clases que te has bajado, puedes encotrar la documentación de toda la API. Explica las propiedades y métodos de todas las clases y sólo tienes que ir a la que quieras utilizar y ver cómo se crea.
Por otro lado, quizá es que comprendí mal tus intenciones iniciales. Me pareció que querías utilizar Max para crear la geometría y por eso cogí ese camino (que me sirvió para descubrir que en mi blog no se pueden subir archivos collada; todo en esta vida tiene un propósito ;-)). Visto lo visto he reconducido el tema y he hecho el mismo menú directamente en Papervision. La entrada está en el mismo blog:
http://blog.coconnut.com/
El archivo rar tiene la misma estructura que el que subí el otro día. Abres el archivo Fla y configuras la ruta donde están las clases GreatWhite en tu disco duro, y a correr.
El ejemplo carga la geometría de un xml. Los 6 cubos tienen las mismas texturas, pero si te creas texturas nuevas basta con cambiar el xml diciendo los nombres de las nuevas. También puedes especificar la posición, orientación y tamaño de los cubos (se crearán tantos cubos como haya en el archivo xml)
Por cierto, recuerdo que me preguntaste cuál es la orientación de los ejes en Papervision, pues... un poco peculiar, pero bastante habitual en el mundo del 3D:
Eje x: Horizontal, positivo hacia la derecha.
Eje y: Vertical, positivo hacia arriba.
Eje z: Dirección hacia el interior de la pantalla, sentido positivo alejandose del espectador.
Ahora, al pulsar sobre sobre un cubo se llama a una función javascript que está en el código html: "funciónJavascript "(qué original soy :-D). La función no hace mucho, sólo emite un mensaje con el nombre del cubo que se haya pulsado; pero puede servirte para ver cómo se utiliza la clase ExternalInterface que te comenté anteriormente.
Un saludo.
P.D.: Por cierto, las clases que estás utilizando en ese ejemplo creo que son de la versión 1.7 de Papervision; la actual 2.0 es bastante más rápida y fácil de utilizar, por eso fue que la elegí para hacer este ejemplo (que al final se ha convertido en un calvario para tí).
FR_xx
bueno, creo que he llegado a tal punto de explosion mental que voy a ir hacia atras como los cangrejos.
De momento dejare todos estos elementos 3d studio para un poco mas adelante, cuando comprenda mejor el lenguaje actionscript y papervision. Perdona por todo el follon que he armado pero me ha servido mucho para animarme a trabajar.
bueno, pues empezando por ahi (y ya que mi post era "como empezar con papervision"), he cogido uno de los archivos de ejemplo que venia con el paquete papervision y lo he simplificado, dejando solo un plano con textura. El código es este:
<code>//inicio del paquete
package
//importar aquellos elementos que hay creados ya en flash
{
import flash.display.*;
import flash.events.*;
// Importar elementos Papervision3D
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
public class main extends Sprite
{
// Creacion de variables necesarias 3D
var container :Sprite;
var scene :Scene3D;
var camera :FreeCamera3D;
// Llamada al archivo de clases main y las funciones siguientes
function main()
{
init3D();
// onEnterFrame
this.addEventListener( Event.ENTER_FRAME, loop3D );
}
// Iniciacion del conjunto de elementos que forman el D
function init3D():void
{
// Añadir contenedor (Sprite) y centrado en la pantalla
container = new Sprite();
addChild( container );
container.x = 320;
container.y = 240;
// Añadir escena
scene = new Scene3D( container );
// Añadir camera
// Hay la posibilidad de una Camera3d (movimiento del visor)
camera = new FreeCamera3D();
// Añadir plano con textura Space
addSpace();
}
// añadimos la funcion de plano y sus caracteristicas
function addSpace():void
{
// Crea textura con un bitmap de la libreria
var materialSpace :BitmapAssetMaterial = new BitmapAssetMaterial( "Space" );
// Creacion del plano
// segmentado en parrilla de 8x8
var plane:DisplayObject3D = new Plane( materialSpace, 4800, 3000, 8, 8 );
// Posicion del plano (distancia)
plane.z = 1500;
// Añadir el plano creado a la escena
scene.addChild( plane );
}
// efecto loop
function loop3D(event:Event):void
{
// Movimiento de la cámara con el raton
// para modificarlo escribir +/-container.mouseX/3 o +/-container.mouseY/3
camera.x = 0;
camera.y = 0;
// Renderizar la escena
scene.renderCamera( camera );
}
}
}
</code>
crees que son correctas todas las anotaciones? El programa funciona bien. me sale un plano fijo, que no puedo mover ahora mismo porque tengo los valores de la cámara a 0.
Ahora vienen dos preguntas, para ir practicando con este ejemplo:
- como incluir un nuevo plano (esta vez sin textura y luego con la misma textura que el anterior).
-como incluir una esfera (de momento estática).
yo de mientras voy mirando el blog de papervision a ver (ya podria estar tambien en español!!!!).