NOTA: Este tutorial es continuación de este otro en el que se dan unas nociones básicas sobre pageflip. Es muy recomendable echarle un vistazo si no se ha mirado anteriormente.
En este pequeño tutorial (si se puede llamar así) voy a intentar explicar algunas cosillas para personalizar más un proyecto que se realice con pageflip. Veremos como redimensionar páginas y añadir contenido dinámico.
No soy un experto asique es posible que haya mejores métodos o que incluso no sea correcto lo que hago…pero el caso es que funciona :D. Para la realización de este tutorial he contado con la inestimable ayuda de Ricplan que ha estado trabajando en ello y nos cuenta qué se ha de hacer para redimensionar páginas con el efecto pageflip original.
Redimensionar páginas (pageflip original)
Imagínate que quieres hacer un libro de este tamaño: 180 de alto por 480 de ancho, las páginas tienen que tener este tamaño: 180 X 240. Se crean las páginas como ya se ha dicho, pero ajustándolas al tamaño que queramos (cojemos las plantillas, las modificamos y seguimos el proceso descrito). Ahora nos vamos al frame 5, dentro de Actions y modificamos los valores que se ven en la imagen:
Dichos valores se cambiarán por los deseados. En este caso pw = 240 y ph = 180. Llegados a este paso lo único que debemos hacer es exportar el proyecto con la configuración que deseemos y…
…nos daremos cuenta que el libro no esta centrado y que pasan «cosas raras». El problema está en que pageflip no redimensiona los elementos aunque tú hayas creado tus páginas al tamaño deseado y hayas cambiado también las dimensiones. Hay que retocar TODO a mano, colocando TODOS los objetos uno por uno (y son muchos), sobre todo el centro que es el más importante.
Es una tarea laboriosa que puede llevar mucho tiempo…pero es lo que hay. Nos dirigimos a la biblioteca (pulsando F11) y, haciendo doble clic sobre cada uno de los iconos que acompañan a los componentes, estos se mostrarán en el espacio de trabajo. Toca un poco de «trabajo manual».
Una vez hecho esto se finaliza redimensionando la película y listo.
Hasta aquí son los pasos necesarios para realizar páginas redimensionadas. Es un trabajo muy costoso que particularmente a mi, me quita todas las ganas de usar este efecto. Asique me puse a buscar, esperé algo de tiempo y la cosa ha mejorado bastante gracias a este chico. ¿Por qué? Porque con su versión modificada se puede: cargar contenido dinámicamente y redimensionar el proyecto de manera casi automática.
Redimensionar páginas y añadir contenido dinámico (versión modificada)
Antes de nada, nos bajamos la versión modificada. Necesitarás Flash MX 2004 para poder trastear con los archivos aunque no es estrictamente necesario para lo que te voy a contar a continuación.
¿Has descargado el archivo? Échemos un vistazo a la carpeta pages. Dentro veremos los archivos correspondientes a las páginas que tiene el pageflip: jpgs estáticos, animaciones, transparencias, etc… ¿Cómo se añaden o eliminan páginas y cómo se cambia su tamaño?
Nos vamos a la carpeta xml y veremos que hay un archivo pages.xml. Guarda una copia por si acaso y ahora lo abrimos con tu editor preferido.
Veamos un poco el código, aunque es bastante descriptivo: Width y Height, hacen referencia al tamaño de todos los componentes que se emplean en el efecto pageflip (degradados, puntos de ancla, etc…). Dichos valores deberán ir en consonancia con la altura y anchura de las páginas, es decir, si queremos páginas de 150 por 300, esos serán los valores que se han de poner en la primera línea.
hcover hace referencia a si queremos que nuestro «libro» tenga tapa dura o no. false para que no tenga y true para lo contrario. transparency se pondrá a true si alguna de nuestras páginas contiene transparencias. Es recomendable ponerlo a false en caso de que no haya para evitar problemas de rendimiento en equipos algo antiguos.
El código que aparece en la imagen de arriba muestra lo que hay que poner para añadir páginas. Por cada página, se pondrá dicho código cambiando, evidentemente, la ruta y el nombre del archivo al que hagamos alusión. Dicho archivo deberá tener las dimensiones especificadas al principio. Lo mejor de todo es que no nos veremos limitados en cuanto a tipo de archivo puesto que podremos enlazar no sólo a archivos de imagen sino que podremos «llamar» a otros swf y por lo tanto nuestro libro podrá contar con animaciones y otro tipo de contenido dinámico sin interferir en el propio código del libro.
Una vez modificado a nuestro gusto, ejecutamos el swf principal (pageflip_v213_dynamic) y si todo ha ido bien, deberá mostrarnos un libro con las páginas que queremos y con las dimensiones adecuadas. Para modificar el tamaño de la película, será necesario modificarlo desde el archivo fuente pageflip_v213_dynamic.fla, pero eso no tiene mucho misterio. También se pueden modificar cosillas como la velocidad de pasada de página en el frame 7 de la capa Actions
Carga dinámica de transparencias // hack Flash 8
Una de las novedades que trae Flash 8 es que permite la carga dinámica de archivos con transparencia como PNG o JPEG progresivos, algo que puede interesar de cara a incorporar algunos contenidos a nuestro libro, pero ¿cómo se hace?
Lo primero que hay que hacer es bajarse el reproductor e instalarlo. A continuación tendremos que saber cómo podemos exportar archivos en la versión 8 de Flash, desde el propio programa. Para ello recurrimos a un pequeño hack que se puede leer aquí.
¿Ya? Pues ahora creamos un documento nuevo con el tamaño deseado de página y en el frame 1 colocamos el siguiente código:
Evidentemente sustituiremos el nombre del archivo por el pertinente. Y lo exportaremos de acuerdo a cómo se explica en el hack anteriormente mencionado.
Ojo! La carga no se realizará correctamente si estamos visualizando el archivo en el reproductor flash. Tenemos que probar si funciona, abriendo el swf directamente en el explorador en el que tengamos instalado el Flash 8.
Para terminar…
Lo ideal ahora sería hacer una especie de índice desde el cual pudiesemos acceder a cada una de las páginas. En caso de que usemos el archivo original, haremos uso de la función gotoPage del siguiente modo: creamos una página y dentro de ella un gráfico (o texto) y lo convertimos en botón (clic derecho>>convertir en símbolo>>botón) y en el panel de acciones escribimos:
on(release) {
_root.gotoPage(X,true);
}
La X tendrá que ser sustituida por el número de la página a la que queremos saltar. La booleana que le podemos pasar opcionalmente hará que si está a true no haya transición en el salto de una página a otra, es decir, si saltamos por ejemplo de la página 3 a la 12 no se verán las páginas intermedias sino que aparecerá directamente la página 12.
Lo ideal será aprender ahora a crear algo similar en el caso de que usemos la versión modificada, pero mis conocimientos no llegan hasta tanto :D. Veremos si consigo averiguarlo. De momento, el tutorial se acaba aquí. Dudas, sugerencias y críticas serán bienvenidas. Espero que os pueda servir de algo.