ISUU Cómo Funciona

ISUU Introducción: cómo funciona todo

Por: Carmen Lucia Zapata

Estas páginas de inicio le guiará a través de los conceptos básicos de la personalización de la interfaz del visor Issuu.

Funciona de la siguiente manera

Cuando alguien abre una publicación, Issuu lee un archivo de configuración llamado layout.xml . Este archivo contiene información sobre el fondo de usar, los botones para mostrar, dónde se encuentran, y así sucesivamente. Ahora Issuu sabe lo que desea mostrar y dónde conseguirlo. A continuación, obtiene todos los necesarios recursos de diseño a partir de un archivo de gráficos en algún lugar de la red.

.. Y aquí es donde entras tú

Su tarea es crear este archivo de gráficos, y luego modificar el layout.xml archivo para contar Issuu dónde colocar sus gráficos. El archivo de gráficos puede ser un archivo SWF de Flash o básicamente cualquier imagen en la web.

El diseño de su nueva interfaz (también llamado un tema) se puede utilizar con cualquier publicación Issuu incrustado en una página web o abrir en una nueva ventana .

Primeros pasos: Configuración

El primer paso en la personalización del espectador es configurar el entorno.

Subir archivos al sitio web

La manera más fácil de crear un tema nuevo es construirlo en la parte superior de uno de los temas básicos proporcionados por Issuu. Así que vamos a comenzar por descargar un tema básico que contiene todo lo necesario, y subir estos archivos a su propio sitio web. Tiene que ser accesible públicamente sitio web, de modo que el espectador puede acceder a ellos Issuu.

-Descargar el tema tutorial y descomprimir el archivo.

-Copie el crossdomain.xml archivo y la carpeta Issuu a la raíz de su sitio web.

El archivo subido debe situarse de este modo:

http://website.com/crossdomain.xml

http://website.com/issuu/basicBlue/crossdomain.xml

...

Ver que funciona

Copiar el enlace de abajo y péguelo en la barra de direcciones de su navegador web, sustituyendo el valor de la distribución del parámetro con la ruta de acceso al layout.xml archivo en su sitio web.

http://issuu.com/jesper/docs/gan_issuu?mode=embed&documentId=080311154822-183d3d833

4a544518a0d5e324f2543d4&layout=http://example.com/issuu/basicBlue/layout.xml

Al abrir esta URL en su navegador web, debe tener este aspecto: Si no se puede acceder a sus archivos, un tema gris por defecto se muestra.

Marca esta URL para más adelante.

¡Felicitaciones! Todos los archivos están trabajando. Siguiente: Conceptos básicos de IML

Introducción: Conceptos básicos IML

IML significa que ssuu M arkup L enguaje. Es un lenguaje muy similar a HTML sencillo que le dice al espectador Issuu dónde y qué botones y otros objetos para mostrar.

Entendiendo el archivo layout.xml

Antes de crear un nuevo tema, primero vamos a entender la estructura del tema de fondo que acaba de descargar.

Un tema se compone de dos archivos:

• layout.xml El archivo de formato describe el diseño del tema

• skins.swf La biblioteca piel proporciona los gráficos del tema (PNG, GIF o JPG también se puede utilizar).

Layout.xml

Vamos a abrir el archivo layout.xml para ver lo que hay dentro:

<? Xml

Vamos a examinar el código en detalle un poco más.

espectador

<Espectador xmlns = "http://www.issuu.com/viewer/1.0" BackgroundImage = "Background #" backgroundSize = "stretch" >

El espectador elemento especifica que se trata de un archivo IML para el espectador.

Los atributos de fondo, BackgroundImage y backgroundStretch , especifique el fondo para el Visor.# Background refiere a un gráfico que se utilizará como imagen de fondo, mientras que la extensiónespecifica cómo el tamaño de la imagen de fondo.

piel

<Piel fuente = "skins.swf" />

La piel elemento especifica una biblioteca de piel que se importe en el Visor. Los elementos gráficos contenidos en esta biblioteca se puede utilizar como pieles de varios objetos (botones, por ejemplo) en el visor.

botón

<button action="pagePrevious" horizontalCenter="-40" top="10"

upState="#PreviousButton_up" overState="#PreviousButton_over" downState="#PreviousButton_down"

disabledState="#PreviousButton_disabled" />

El botón de elemento se utiliza para agregar un botón que se pulse el Viewer.

La acción atributo especifica qué acción tomar cuando se pulsa el botón, en este caso pagePrevious , que cambia el documento en la página anterior.

El horizontalCenter atributo especifica la posición horizontal del botón con respecto al centro del Visor.En este caso, el botón está posicionado 40 píxeles. a la izquierda. La parte superior atributo especifica la posición vertical del botón de la parte superior del visor. En este caso, el botón está posicionado 10 píxeles.desde la parte superior.

El upState, overState, Downstate, disabledState atributos se refieren a los distintos estados del botón. Los valores de estos atributos se refieren a los gráficos que se utilizarán como pieles para estos estados.

El código para los otros dos botones, el botón de índice y el botón pageNext, es similar.

DROPP

<DROPP izquierda = "0" top = "35" derecha = "0" fondo = "10" />

Por último, la DROPP elemento especifica el tamaño y la posición del documento real. Aquí, el documento está posicionado 35 píxeles. desde la parte superior, 10 px. desde la parte inferior, y px 0. desde los bordes izquierdo y derecho del visor.

Ahora que tiene una idea acerca de cómo el lenguaje en layout.xml archivo funciona, es hora de ser creativo y modificar los gráficos. Siguiente: Modificación de los gráficos

Introducción: La modificación de los gráficos

Los activos gráficos utilizados por el espectador se almacenan en un archivo SWF de Flash llamado skins.swf .

Nota: Esta sección de la guía se supone que está utilizando Flash para crear sus gráficos. Si por el contrario desea utilizar gráficos standart de mapa de bits, por favor continúe leyendo el tutorial Personalizar utilizando un archivo de mapa de bits .

¿Qué es el archivo skins.swf?

El skins.swf archivo es un archivo SWF de Flash 9 generada por Adobe Flash Player. El tema de fondo azulque ha descargado contiene un archivo llamado skins.fla . Este es el archivo original sin comprimir, por lo que abrir este archivo en Flash para hacer cambios en el archivo SWF.

Esto es lo que el skins.fla archivo aparecerá cuando se abre en Adobe Flash:

Modificación skins.swf

La manera más fácil de crear un tema nuevo es comenzar con un tema existente (en este caso el tema azul básico) y hacer modificaciones a la misma. Vamos a crear una copia del tema básico en primer lugar:

Haga una copia de la basicBlue carpeta en / issuu y lo llaman basicGrey

Sube la carpeta de nuevo a su sitio web, en el mismo directorio / issuu

Ahora tiene un nuevo tema llamado Basic Grey que es una copia exacta del tema Blue Basic.

Cambiar el color de fondo

Ahora, para empezar, vamos a cambiar el fondo. Vamos a modificar los gráficos en Adobe Flash y exportar un nuevo skins.swf archivo.

Abierto skins.fla en Adobe Flash.

Edite los antecedentes movieclip, y cambiar el color azul degradado a un color gris degradado.

Generar un nuevo skins.swf archivo y subirlo a su sitio web en el basicGrey directorio.

Al volver a cargar el navegador, usted debería ser capaz de ver el nuevo fondo:

Cambiar el color de los botones

También vamos a modificar los botones para darles un aspecto gris similar. Un botón se compone de cuatro diferentes movieclips. Una por cada estado. Arriba, Sobre, Presionado y Deshabilitado.

Edite el PreviousButton_up movieclip.

Edite el ButtonBackground_up movieclip dentro de la PreviousButton_up. Cambiar el color azul a un color gris.

El ButtonBackground_up movieclip se utiliza en todos _up estados. Así que al cambiar el color dentro de este movieclip, automáticamente cambiar el color de todos los otros botones al mismo tiempo. LasButtonBackground movieclips se encuentran en el Activo carpeta.

Generar un nuevo skins.swf archivo y subirlo a su sitio web en el basicGrey directorio, sobrescribiendo el archivo anterior.

Ok, ahora que los gráficos se ha cambiado, el último paso es ajustar el diseño. Siguiente: Ajuste del modelo

Introducción: Ajuste del modelo

El paso final es ajustar la posición de los botones y quizás añadir algunos objetos nuevo visor a nuestro diseño. Todo esto se hace modificando ellayout.xml archivo.

Todos los botones en una caja

Objetos, tales como botones, se pueden colocar individualmente en el espacio espectador. Pero cuando empieza a tener los objetos, tiene sentido para agruparlos

...