Como hacer una revista en Flash [TUTORIAL ANIVERSARIO]

[kelofantasma]

Espero que sea de su agrado.

Algunos se preguntaran como hacer un libro digital en flash, del tipo que se pueden mover las hojas igual que una revista, para un usuario basico e incluso uno intermedio en Flash.. es dificil... pues aqui les presento una aplicacion que es muy sencilla de adaptar. ya preparada y lista para usar, muuuy expectacular! .




Megazine 3 es un recurso Flash que permite crear un catálogo o revista y hojeararlo en el navegador como si se tratara de uno impreso.

Te queda algo asi...




Aca tienen la demo del autor...

http://megazine.mightypirates.de/demo/index.html

Te quedaste con la boca abierta como yo? No? Bueno, te comento algunas características para ver si cambias de opinion...

* Está escrito en AS3 y es open source. ( si si es gratis “LGPL Licence” )
* Es muuuuy simple configurar y muy versátil. (yo lo logre! jejeje )
* Posee una barra de control que permite reproducción automática, a pantalla completa, avanzar y retroceder, etc.
* Cache de páginas para una navegación más rápida.
* Con Zoom a imágenes. (suuper )
* Habilidad de usar cualquier tipo de contenido, como mp3, video, imágenes, etc…

Ya entrando en materia les comento que estéticamente es muy simple, agradable y moderno, cumpliendo con las premisas básicas de las 3 B , bueno, bonito y barato.

Su configuración es muy sencilla. En mi caso las pruebas las realicé modificando el archivo megazine.xml, agregando dentro de la etiqueta <page></page> enlaces a imágenes.

Que no tienes nada de idea y que piensas que no puedes hacerte una revista igual ? te digo, que, si tienes ganas y te gustan los desafios, usando este código y leyendo atentamente lo que sigue, te puedes hacer una.

Manos a la obra!:
Teniendo en cuenta que este Megazine 3 lo que hace básicamente es mostrar imágenes, me dispuse a cargarle algunas.

Para hacer una prueba rápida, crea una imagen de 285 pixel de ancho por 400 pixel de alto. Nombrala “imagen1.jpg” y guardala en la carpeta llamada "paginas".
Editas el archive magazine.xml y adentro le pones lo siguiente:

Ejemplo
<book>
<chapter>
<page>
<img src="paginas/imagen1.jpg"/>
</page>
</chapter>
</book>

Guarda los cambios y dale doble click al archivo "index.html".
Y ya esta! Tienes la primera hoja de tu revista!! Viste que facil!

Ahora un ejemplo para ponerle zoom:
A la misma imagen que nombraste “imagen1.jpg” ahora creala en 750 pixels de ancho por 1056 de alto y guardala en la carpeta “paginas” con el nombre “imagen1big.jpg”
Editas el archivo magazine.xml y lo agregas de la siguiente manera:

Ejemplo con zoom
<book>
<chapter>
<page>
<img src="paginas/imagen1.jpg" hires="paginas/imagen1big.jpg"/>
</page>
</chapter>
</book>

Guardas los cambios y dale doble click al archive "index.html" !! Y? Espectacular no????
Y asi le podes ir agregando música, videos, transparencias, fijate la demo que esta en la web de ellos! esta mortal!

Para un álbum de fotos o un catalogo de productos, viene increible y les queda muy profesional.

Se puede hacer cosas sencillas como la que hicimos o mucho más profesionales con la misma excelente calidad.

Tiene muchísimas variables que se puede tocar, solo hay que probar y meter mano.

Les dejo un pdf de la versión anterior para que conozcan todas las variables en castellano y otro pdf con la nueva versión pero que solo la encontré en ingles.

Tambien les dejo unas hojas en word con un Quickstart Guide, en ingles pero muy facil de entender para que prueben algunas cosas más.

De yapa, les agrego el archivo “lang.en.xml” para que lo reemplazen por el original, ya que esta en ingles y yo lo puse en castellano (chequeenlo porque soy medio bestia escribiendo, menos mal que existe el ABC corrector de horrores ortograficos! Jejeje)

Para los menos avanzados en programas de manejos de imágenes, les recomiendo el Photoshop, cualquier versión, no hace falta tener la ultima; recuerden los tamaños por defecto que les puse mas arriba y optimizen lo mas que puedan las imagenes para que no se hagan muy pesadas a la hora de cargarlas.

DESCARGA

http://www.intercambiowarez.org/gene...vista-en-flash

Aclaración: Requiere tener instalado el plugin de Flash para que funcione (si pUdes ver bien todas las paginas de Internet y puedes ver la demo, no te hará falta instalar nada).


TIPS

Hojas mas grandes

Para cambiar de tamaño las paginas del libro, busca el archivo que se llama "megazine.xml", lo editas y donde dice "<book>" lo cambias por ejemplo por"<book pagewidth="500" pageheight="500">" donde los numeros 500 representan el tamaño de la pagina en pixels (ancho x alto), acomodalo con el tamaño que prefieras.
Y ahora si, vas a poder hacer hojas del tamaño 500x500.


La barra de navegacion se te esconde por hojas muy grandes? Aca la solucion..

Para solucionar eso, tenemos que modificar el archivo "index.html" lo editamos y buscamos la palabra "#megazine" (con el simbolo #) y con mucho cuidado de no cambiar nada mas, (hagan un copia "backup" del archivo antes de cualquier cosa), cambiamos el parametro que esta una linea mas abajo, "height:" por ejemplo por unos 150%. Hagan varias pruebas ajustando el numero hasta que quede adecuado al tamaño de las hojas, exitos!

Insertar y controlar videos

Para insertar un video dentro de la pagina, solo tenemos que modificar el archivo "megazine.xml" y poner lo siguiente:
<page>
<vid src="paginas/video.flv" left="90" top="220" width="200" height="150"/>
<img src="paginas/imagen1.jpg"/>
</page>

Donde "video.flv" pones el video en cuestion, los parametros "left", "top" lo ubican en la pagina y con "width" y "height" le dan el ancho y el alto.
Soporta varios formatos de video ademas del conocido flv como el mp4, m4a, mov, m4v, 3gp y el 3g2 (source).

Ademas si queremos le podemos agregar una barra de control play/stop, viene una dentro de la carpeta "elements" llamada "vidgui.swf" y la agregamos de la siguiente manera:
<page>
<vid src="paginas/video.flv" left="90" top="220" width="200" height="150" gui="elements/vidgui.swf"/>
<img src="paginas/imagen1.jpg"/>
</page>

Con gui="elements/vidgui.swf" agregamos la barra, pero tiene mas parametros, remitanse a la pagina 21 de la documentacion que les puse y van a encontrar, por ejemplo como detener el loop y arrancar de nuevo.


Poner rigida una pagina

La cotratapa se coloca de la misma manera que cualquier otra pagina, pero quizas te gustaria que quede rigida... como la del demo.

con <page stiff="true"> queda como si fuera un libro de tapas duras.


Poner musica a las paginas

pudes cargar un mp3 con snd dentro de <page> </page>, por ejemplo:

<page>
<snd src="musica/sonidos.mp3"/>
<img ....>
</page>

Poner musica a todo el libro

<book>
<chapter bgsound="musica/cualquier.mp3">
<page>
....
</page>
</chapter>
</book>

Donde "musica" es la carpeta donde tienes el archivo con extension mp3.

Una pequeña sugerencia, no coloques un archivo muuuy pesado, con una calidad de 32 kb mono suelen escucharse bien y no quedan grandes.

Creo que eso es todo, si hay dudas de como comenzar me envian un mensaje y tratare de solucionarlo.... Suerte y que viva el 1er Aniversario.

[Eloy58]

[cardavid]

Bue ntuto

[baduser]

gracias !!

[kelofantasma]

Mil gracias... espero que sirva de ayuda.

[Sabid Barahona]

Gracias espero pronto ponerlo en practica

Saludos!!

[Manybadilla]

Gracias...!

[ReaPeR]

[felipergueza]

Como lo puedo integrar a un cms como es el caso de Joomla.

[kelofantasma]

Iniciado por felipergueza Como lo puedo integrar a un cms como es el caso de Joomla.

Que bueno que lo preguntas... veras en el caso de Joomla es muy facil, primero que nada subes a tu servidor todo el material (index.html, la carpeta de sonidos, carpeta con tus imagenes, etc)...

luego obviamente se crea una direccion Url que apunta al index.html por ejemplo:


misitio.com/revista/index.html

donde misitio.com es tu dominio
revista es la carpeta con todo lo guardado
index.html Tu pagina con el Flash...

Lo siguiente que debes hacer es crear un Item de menu de la siguiente forma:

1.- En el administrador de Joomla escoge la pestaña Menu
2.- Elije el menu donde quieres poner tu revista
3.- Te diriges a NUEVO
4.- Escoges la opción URL Embebida(Wrapper)
5.- Le das un Titulo y un Alias
6.- En la parte de la derecha donde dice: Parámetro Básico - Envolver URL (Wrapper) es ahí donde colocaras la dirección del index.html
7.- Das a Guardar y listo...

Nota: Puedes ir probando los tamaños, ya que al estar embebida se reduce el espacio y puede que no salga todo completo... por lo que siempre recomiendo diseñar un banner que tenga la dirección de la revista en flash... y la abra en una pestaña aparte con los tamaños reales...

Espero haberme explicado, si tienes alguna otra duda me la haces saber...