Flex 3. Efecto pageFlip con Away3D
Descargar código fuente (proyecto Flex completo) >>
Para el libro 3D he utilizado Away3D y el efecto de pasar página utiliza la library de Ruben Swieringa para Flex. Para cargar las imágenes y animar dos asiduos, BulkLoader yTweenMax. Puedes encontrar todas las libraries en la carpeta libs del proyecto.
Las páginas pueden contener cualquier tipo de elemento interactivo (botones, combos, menús, dataGrids...) aunque en el ejemplo sólo muestran imágenes jpg. En previsión de que las páginas pudiesen llevar dichos contenidos he colocado el botón de minimizar fuera del libro, en la esquina superior derecha.
Cuando el libro está minimizado, da una apariencia de "caja" poco real. Se prodría haber utilizado alguna superficie ondulada en lugar de la primitiva Cube de Away3D. También sería interesante añadirle algún efecto de sombra al libro, para que no parezca que "flota" sobre el fondo. Ya sabéis, a mejorarlo 
molaria con xml
esta genial !!
Hola:
Tengo alguna cosilla con MegaZine para Flash, que imagino es lo que andas buscando. A ver si pillo un hueco y subo un ejemplo. Pero es que ahora con el verano…
Este tiene la ventaja de que se puede maquetar “visualmente” con Flex Builder aunque en este ejemplo, para no complicarlo, directamente muestro imágenes jpg. En cada página se podría insertar un componente personalizado tan complejo como se desee.
Un saludo, y como digo, si pillo un hueco y tengo ganas…
Me pueden dar una mano por favor?
Como ajusto el height del book?
Gracias
Hola, Alex:
En index.mxml, en la etiqueta rs:Book tienes las propiedades width y height del libro (width es el ancho completo, de las dos páginas).
Por otro lado, si te has dado cuenta, este ejemplo “tiene truco”. Por un lado está el libro pageFlip y por otro el hecho con Away3D. Por tanto, si modificas el tamaño de las hojas deberías cambiar también el tamaño del libro que hay debajo: Edita la clase com.classes.Main.as y en el método onCompleteHandler encontrarás la línea:
book3d = new Book3D(loader.getBitmap(”cover”, true), 240, 300, 20);
240 es el valor que actualmente tiene el ancho de UNA HOJA, 300 el alto, y 20 el canto del libro. Cambia los 2 primeros valores hasta que el tamaño del libro Away3D coincida con el nuevo que des al libro pageFlip.
Un saludo.
P.D.: Cuando se le ve el truco a algo, pierde la gracia
P.D.: Cuando se le ve el truco a algo, pierde la gracia
JAJA Estoy de acuerdo!!
Muchas gracias por los datos
excelente, muchas gracias.
muy bueno este efecto pero como podria aumentar texto dinamico al efecto del libro, por lo que vi esta cargando solamente imagenes, y lo que desearia añadir es texto el mismo que podria cargarse de XML o una BD
Hola, Nelson:
Si abres la clase principal de la aplicación “index.mxml” verás las etiquetas rs:Book, que definen el libro y las rs:Page que definen cada página.
Actualmente dentro de cada página sólo hay un UIComponent donde muestro las imágenes. Cambialo por el que te interese (control Label o TextArea). Incluso podría generarte un componente personalizado con la maquetación de la página. Es tan sencillo como esto: imagina que rs:Page es un Canvas, puedes añadir a cada página lo que desees, incluso generar las páginas programáticamente después de procesar un xml.
Un saludo.
hola que tal, muy bueno el efecto libro, una pregunta, en el caso de que quisiera subirlo a la web, que archivos son los requeridos, todos???, gracias de ante mano.
…todos los que están en la carpeta bin-debug (o bin-release)
cuando pongo otras imagenes el libro de deforma, las imagenes tienen que tener alguna resolucion especial?
Hola, mencionas que se puede cargar sonido y/o archivos de flash…en donde declaras que es un swf…….
Hola, Pepe:
Si abres la clase principal de la aplicación “index.mxml” verás las etiquetas rs:Book, que definen el libro y las rs:Page que definen cada página. Dentro de cada página (rs:Page) puedes colocar el componente Flex que te interese. En este caso, por simplificar, sólo muestro imágenes.
Tendrías que personalizar el contenido de cada página con los componentes que estimes oportunos (un reproductor de vídeo, un swfLoader…)
Un saludo.
Hola Luis, cabría la posibilidad de crear una aplicación donde se pudiera intoducir el texto (título y contenido) a modo de formulario a rellenar con el boton típico “publicar” y que luego aparezca en el libro?
Supongo que es algo complicado este tema si se quiere publicar textos en el no?
Un saludo.
Hola, Fracto:
En principio no habría ningún problema. Las páginas del libro son componentes Flex. Como comentaba más arriba, para no complicar el ejemplo, he utilizado componentes que sólo muestran imágenes. No habría mayor problema que en una página apareciera un componente que fuese un formulario. De hecho, en el curro hicimos algo con esto y lo que se mostraban eran vídeos flv con un texto explicativo.
Lo que sí, hay que tener cuidado si cambias el tamaño del libro, ya que esto es un truco, hahría que “tantear” el tamaño del libro 3D para que coincidiera con el tamaño de las páginas pageflip.
Un saludo.
No, no me referia a eso directamente. Me referia mas bien a tener una aplicacion externa al libro, que mediante un formulario de entrada de texto luego apareciera en el libro, separado por páginas.
Algunas preguntas más me surgen tales como:
- como podemos añadir hojas?
- se puede hacer un libro mas elaborado? me refiero a, por ejemplo, mas estilo de libro antiguo (http://www.dadcando.com/Making/TheDragonry/Images/SecretBoxBook1-1000.jpg). habia pensado que se podria modelar en 3dstudio y luego pasarlo con collada o algo por el estilo.
- tanto la precarga como el fondo de pantalla se puede cambiar tambien?
un saludo!
Hola Fracto:
Si la otra aplicación de la que hablas es un Flash, podrías comunicarte con el Flash que contiene el libro con una localConnection. Si se trata de otro tipo de aplicación (java, jsp, php…) podrías comunicarla con alguna función javascript y ExternalInterface.
Este ejemplo está desarrollado con Away3D que permite cargar archivos Collada, por lo que en principio no habría excesivo problema. Lo que sí veo es que para hacer la nueva aplicación sería casi mejor empezar de cero. El libro está hecho con primitivas de Away3D animadas y poco se va a poder utilizar. Por eso casi te recomendaría empezar de cero, que intentar “reconstruir” este ejemplo.
Un saludo.
Hola Luis, lo que me gustaría es que aparecieran contenidos publicados mediante drupal o hacer algo similar para este caso. De esta manera lo que se hace es llamar funciones php como apuntas, recuperando los textos introducidos y disponiéndolos en las “páginas” del libro.
Yo podría desarrollar el libro en 3dstudio pero si te pediria, si no es molestia, una guia con los pasos que debería realizar para poder ir desarrollando el ejemplo desde un principio. Hace tiempo estube trabajando con papervision contigo (tema planetas y menu cubos) pero ahora tengo un poco abandonado el tema de flash así que me tendría que poner de nuevo al dia.
Te dejo aqui mi dirección de mail por si quieres comentarme alguna cosa. Luego si quieres lo borras del mensaje. Un saludo
fracto.eade@hotmail.com
esta genial la libreria justo lo que buscaba gracias
quiero agregar mas paginas dinamicamente sin tener que ponerlas manualmente.
urgente
Hola, Miguel:
Imagino que has intentado hacerlo con un Repeater. A mí me ha dado bastantes problemas y al final siempre he optado por hacerlo “a pelo”, o sea, crearme el libro directamente con ActionScript de toda la vida:
var book:Book = New Book();
var page:Page = New Page();
book.addChild(page)
Lo que sí, cuando acabes de añadir las páginas, haz un book.refreshGradient(); por que si no, la primera vez que se recorre el libro suele fallar el gradiente que hace el efecto de hoja ondulada.
Un saludo.
lo que pasa es que cuando carga el xml de 15 imagenes que ya estan definidas. ya que le tengo que agregar si quiero otra imagen manualmente en el xml y en el otro codigo y lo que no quiero es eso. lo que quiero es que cuando carge el xml
de 25 imagenes o mas se agregen automaticamente sin colocarlo uno x uno en el codigo, si tuvieras una solucion te lo agradeseria. urgente hay te dejo mi correo angel_123456_7@hotmail.com
hola que tal amigos saben esta excelente este ejemplo como para un libro de visitas o comentarios?? alguien ya logro hacerlo? lo voy a intentar y les cuento como va quedando va solo denme un poco de tiempo para estudiar el codigo exelente Luis y gracias por compartir..
disculpen pero tengo unproblema on error (me dice data binding no soportado en tiempo de compilacion). quisiera pasarle la “ruta” del xml en source pero me marca ese error. quisiera que me echaran la mano.
el error esta en (xml source=”{ruta}”) donde ruta sera el parameto que le quiero pasar.