Flex 3. Efecto pageFlip con Away3D
Descargar código fuente (proyecto Flex Builder 3 completo) >>
Descargar código fuente (proyecto Flash Builder 4 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.
Dios!! eres un groso, justo lo que necesitaba esta perfecto todo lo que haz escho te felicito!!
Solo una cosita cuando quiero agregar mas paginas agrego otra linea en el archivo xml pero haciendo eso no me habre el flash, tengo que editar el script tambien? y si es asi, como lo hago?? y cual script?
Hola, Hack Crack:
Se trata de un proyecto Flex, y para poder modificarlo es necesario Flash/Flex Builder (o FlashDevelop, que es gratuíto), y ciertos conocimientos básicos de Flex ( framework). Los proyectos Flex NO se pueden editar/compilar con Flash Professional.
Un saludo.
Estimado: He implementado tu ejemplo en Flex 4 con Flash Builder y me ha ocurrido un inconveniente, cuando abres el libro para ver las páginas se muestra sólo la página de la izquierda y la de la derecha aparece vacía y sin borde de página (en tu ejemplo y compilando con Flex 3, el libro muestra las primeras páginas a la izquierda y derecha).
Alguna idéa de lo que podría estar pasando?
Gracias de antemano, un Saludo
Hola, Fisad:
No sé lo que puede estar pasando, así que te doy algunas opciones:
Si se trata de un proyecto para Flex 4 deberías cambiar la cabecera del documento index.mxml (ya sabes, con los xmlns’s de 2009 xmlns:fx=”http://ns.adobe.com/mxml/2009″, etc.
También el valor del target-player, que ahora está para Flash Player 9.0.124, deberías cambiarlo para Flash Player 10.0.0.
Otra opción, si no vas a usar componentes (spark, en lugar de mx) propios de Flex 4, puedes cambiar el SDK 4 al SDK 3.5 con lo que seguro no tienes ningún problema.
De todas formas, te he subido una versión para Flash Builder 4 (y Flex SDK 4) de este ejemplo. Mira al principio del post, donde te descargaste la versión para Flex Builder 3.
Un saludo.
Hola Luis:
Gracias por tu ejemplo para FB, lo he probado y todo funciona como debe ser, el problema se provoca cuando cargas el código desde un módulo y no desde una aplicación.
Lo que estoy haciendo es tomar tu ejemplo de animación y convertirlo en un componente dinámico, con carga de contenidos desde un menu, tengo otros libros implementados, pero todos se cargan ya abiertos.
Ahora estoy viendo que parte del código se carga cuando se presenta el libro cerrado, las imágenes de la izquierda y derecha se cargan con el libro cerrado, pero al abrirlo sólo se muestra la imagen izquierda.
Cuando se expande el libro, para ver la páginas, el código carga la imagen de la derecha y todo es normal.
Gracias…
Hola, Fisad:
Posiblemente ya lo hayas encontrado, pero el método que actualiza las páginas interiores del libro (hago una captura del libro en primer plano y se lo paso como dos bitmapData) a la geometría 3D de Away3D lo encontrarás en la clase
com.controls.away3d.Book3d
y se trata de:
updatePages(leftPage:BitmapData, rightPage:BitmapData)
al que, como digo, hay que pasarle una captura (un BitmapData) de las páginas izquierda y derecha del libro.
Un saludo.
Hola,
Pregunta de principiante:
Como puede ver como está hecho el componente Page ?
Muchas Gracias.
Un saludo.
Hola, jfchampollion:
Puedes descargarte el código fuente del blog de Ruben Swieringa:
Flex book component (beta)
Source
Documentation
Un saludo.
Hola, de nuevo:
Justo debajo de la demo principar tienes un ejemplo muy básico de cómo crear un libro. Un buen comienzo:
Simple Demo
Simple Demo Source
Un saludo.
Hola que tal, te felicito, este ejemplo es excelente, lo he puesto en marcha en flex 3 y ha funcionado de maravilla.
Des pues de aver analiazdo el codigo, modifique el archivo xml y index.mxml para poder agregar mas paginas, pero al agregarle no me funcionado..
Si puedes ayudarme, te lo agradeceria muchisimo, te dejo mi correo guzmen_18_1@hotmail.com.
saludos..