Comunidad de diseño web y desarrollo en internet online

Visor de pdf con Flash y MDM Zinc

Hola gente de Cristalab, les doy un cordial saludo agradeciendo a todos los que me han ayudado a resolver dudas cuando más lo he necesitado. Este es mi primer tip por lo que me gustaría buenos comentarios y críticas constructivas: D.

Introducción


Lo que vamos a hacer es un visor de pdf, usando el programa MDM Zinc (Si no lo conoces, es necesario que veas antes este Tip de Freddie) y Flash en cualquiera de sus versiones, que en mi caso usare la versión 8.

Comencemos...!


Abrimos nuestro Flash, creamos un nuevo documento con las siguientes propiedades:



Crearemos dos capas para dividir en cada una de ella los elementos necesarios, clickeamos 2 veces el botón y le colocamos los nombres correspondientes, como lo muestra la siguiente imagen:



En la capa barra sup ubicamos los botones del visor PDF, y la capa AS contendrá todo el código que usaremos.

Nuestro visor PDF constara de 4 botones de navegación (Principio, Anterior, Siguiente y Ultima) y de dos botones con sus respectivos cuadros de dialogo (Abrir e Imprimir). Para este Tip he creado los 4 botones en Imágenes, basta con que des click derecho a cada imagen y elijas “Guardar Como”:



¿Solo 4 botones, no eran 6 en total :S? pues si, lo que sucede es que dos de estas imágenes (Flecha “Principio” y “Anterior”) las duplicaremos en Flash y les daremos un Giro Horizontal, pero eso es mas adelante jeje…

Importaremos las imágenes, aunque lo normal es que arrastremos las imágenes al documento Flash, yo les recomiendo mejor importar las imágenes a la librería, de esta forma no se nos pixela tanto las imágenes, dando click en Archivo>Importar>Importar a librería (Si usas Flash en Ingles, vs File>Import>Import to library):



Ahora abrimos la Librería de Flash, presionamos Ctrl + L. Si vemos las imágenes es porque todo va bien. Ubicados en la capa barra sup elegimos todas las imágenes del Librería y las arrastramos al documento.

Quarterback :

Recuerda duplicar las imágenes de las flechas, seleccionas las dos flechas y vas a Modificar>Transformar>Girar horizontalmente (en Ingles, Modify>Transform>Flip Horizontal).


Ya estando allí nuestros botones los organizaremos de la Siguiente Manera:



Le puedes añadir un fondo. Con la herramienta Rectangle Tools (R) haces un Rectángulo de cualquier tamaño, después lo seleccionas y le asignas las siguientes propiedades:



Deberíamos ir así:



Ahora vamos a convertir las imágenes a botones presionando la tecla F8. Elijes el registro en el centro y con la opción “botón”, solo le vamos a cambiar el nombre dependiendo a las imágenes, y este mismo se lo pondremos de “nombre de instancia”. Hazlo de esta misma manera:







Ya teniendo todo listo, Crearemos el código Actionscript, recuerda ubicarte en el primer fotograma de la capa AS:

Código :

// Aqui creamos el pdf
var myPDF = new mdm.PDF("c", "c", "450", "500");


//FUNCIONES DEL BOTON ABRIR
btn_abrir.onRelease = function() {

mdm.Dialogs.BrowseFile.title = "Abrir Archivo .pdf";
mdm.Dialogs.BrowseFile.buttonText = "Abrir";
mdm.Dialogs.BrowseFile.type = ".pdf";
fileName = mdm.Dialogs.BrowseFile.show();
if (fileName == "false") {

} else {
// Comprobamos si existe el pdf
var fileExists = mdm.FileSystem.fileExists(fileName);
if (fileExists == true) {
// Si existe, lo abrimos
var extension = fileName.substr(-4).toLowerCase();
if (extension == ".pdf") {

// Comprobar que es un .pdf
myPDF.loadFile(fileName);

//Desactivamos la barra superior del pdf:
myPDF.toolbar = false;


//Desactivamos el "Scrollbar":
myPDF.scrollbars = false;

} else {
// Si no es un .pdf
mdm.Dialogs.prompt("El Archivo que acabas de elegir no es un PDF Valido");
}
} else {
// Si no ha escogido un archivo
mdm.Dialogs.prompt("El archivo no existe. Verifica el nombre o la direccion del archivo");
}
}
};


// RESTO DE BOTONES


// Boton de navegacion "Anterior"
btn_anterior.onRelease=function(){
myPDF.previousPage();
}


// Boton de navegacion "Siguiente"
btn_siguiente.onRelease=function(){
myPDF.nextPage();
}


// Boton de navegacion "Inicio"
btn_inicio.onRelease=function(){
myPDF.firstPage();
}


// Boton de navegacion "Ultimo"
btn_ultimo.onRelease=function(){
myPDF.setCurrentPage(500);
}


// Boton de Imprimir
btn_imprimir.onRelease=function(){
myPDF.printWithDialog();
}



Si presionamos Ctrl + Enter, no podremos ver ningún pdf. Esta es la parte en la que usaremos el MDM Zinc.

Quarterback :

Si no descargaste el mdm zinc, es hora de que lo instales, de lo contrario no podrás usar el visor PDF.


Abrimos nuestro mdm zinc, creamos un nuevo proyecto en el cual elegiremos nuestro visor, el mío se llama “mypdf.swf”. Después le damos click a BUILD y Listo! Y lo hemos copilado en zinc.

Échale un vistazo a ver si te funcionó. De lo contrario tendrás que buscar el error.

Posibles errores:

  1. Verifica los nombres de las instancias
  2. Verifica si has convertido las imágenes a botones y no a clips de película o gráficos.
  3. Que el código este posicionado en el primer fotograma de la capa AS.



Bueno, espero que les hay servido y ya saben… cualquier inconveniente lo pueden comentar.

Saludos y suerte en todos sus proyectos :D!!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate