Crear Presentaciones… ¡con PDF!

Lo sé, lo sé… no es ciertamente lo más usual, pero… ¿sabías que se pueden crear presentaciones utilizando el formato PDF? Y lo mejor de todo es que, si estás interesado en ello, esta es una capacidad soportada por PDFDocument. De modo que puedes crear tus espectaculares presentaciones simplemente con Xojo, incluyendo las transiciones entre diapositivas. Continúa leyendo y te mostraré cómo puedes hacerlo mediante un ejemplo sencillo.

Pero, antes de nada, ¿cuáles son las ventajas de usar PDF para tus presentaciones?

• PDF es portable, lo que significa que puedes distribuir estos archivos fácilmente con (por lo general) un tamaño de archivo realmente pequeño.
• Los contenidos son vectoriales (exceptuando el caso de las imágenes), lo que significa que continuarán viéndose genial independientemente de cual sea la resolución de salida en el monitor o proyector utilizado a la hora de reproducir la presentación.

¿Cuáles son las desventajas?

• Actualmente hay un bug en macOS donde Adobe Acrobat Reader no es capaz de aplicar las transiciones asignadas en Big Sur o posterior (aun continúan funcionando correctamente en Catalina y las versiones anteriores de macOS).

El proyecto de ejemplo que utilizaremos creará una versión “reducida” de las diapositivas utilizadas en la presentación sobre PDF que puedes ver en el evento XDC Anywhere; en total, cuatro diapositivas.

Por supuesto, tendrás que cambiar el nombre de las fuentes utilizadas (y de cualquiera de los elementos utilizados, para el caso, como por ejemplo las imágenes) por aquellos otros que quieras utilizar y que, en el caso de las fuentes, estén instaladas en tu equipo.

1 Ajustar las Opciones del Visor

Comienza creando un nuevo proyecto para la plataforma con la que te sientas más cómodo; después de todo, puedes utilizar PDFDocument en los proyectos Desktop, Web, iOS y también de Consola (incluyendo Raspberry Pi). A continuación, añade el Manejador de Evento Opening en la DesktopWindow/WebWindow/MobileScreen por defecto del proyecto… o selecciona simplemente el manejador de evento Run en el caso de que hayas optado por un proyecto de Consola.

Escribe las siguientes líneas de código en el Editor de Código asociado:

// Creamos una nueva instancia PDFDocument con
// el tamaño de página definido a la resolución HD

Var Presentation As New PDFDocument(1920, 1080)

// Vamos a asegurarnos de embeber las fuentes en el documento
// de modo que no haya problemas de visualización en el caso 
// de que no estén instaladas en el equipo sobre el cual 
// se va a reproducir la presentación

Presentation.EmbeddedFonts = True

Las siguientes líneas de código serán las responsables de definir los valores por defecto para el modo de Visualización del documento cuando se abra en Acrobat Reader o cualquier otro lector de documentos PDF. Cuando se trata de una presentación, probablemente querrás que se abra el documento en modo de Pantalla Completa por omisión, así que vamos a indicarlo:

// Creamos una nueva Instancia de la clase PDFViewerOptions

Var ViewerOptions As New PDFViewerOptions

// And set the FullScreen property to True
// so the document will set that view size
// when opened in the PDF Viewer app

ViewerOptions.FullScreen = True

2. Dibujar el Fondo de la Página

Utilizaremos un pincel (Brush) de gradiente lineal para rellenar el fondo de todas nuestras diapositivas, de modo que probablemente resulte conveniente crear un método para ello utilizando los siguientes valores en el Panel Inspector:

• Nombre: DrawPageBackground
• Parámetros: g As Graphics

Escribe el siguiente código en el Editor de Código asociado con el método:

Static backgroundfilling As LinearGradientBrush

If backgroundfilling = Nil Then
  backgroundfilling = New LinearGradientBrush
  backgroundfilling.StartPoint = New Point(g.Width/2,0)
  backgroundfilling.EndPoint = New Point(g.Width/2,g.Height)
  backgroundfilling.GradientStops.Add New Pair(0.0, &c000000)
  backgroundfilling.GradientStops.Add New Pair(0.7, &c000000)
  backgroundfilling.GradientStops.Add New pair(1.0, &ccccccc)
End If

g.Brush = backgroundfilling
g.FillRectangle(0,0,g.Width,g.Height)

Como puedes ver, el código del método es bastante sencillo. Todo lo que hace es crear una nueva instancia de LinearGradientBrush que va desde negro hasta una variación de gris al final de la página; y dado que no vamos a cambiar el gradiente cada que llamemos al método, tiene sentido asignarlo a una etiqueta Static en vez de hacerlo sobre una Variable.

A continuación se asigna LinearGradientBrush a la propiedad Brush de la instancia Graphics recibida como parámetro (la correspondiente al contexto gráfico de la página PDF sobre la cual queremos dibujar) y, por último, utilizamos la brocha como el “color de relleno” para dibujar el rectángulo rellenado.

3. Dibujar la Cabecera

Añadamos ahora el método responsable de dibujar la cabecera compartida por todas las diapositivas de nuestro ejemplo. Utiliza los siguientes valores en el Panel Inspector asociado:

• Nombre de Método: DrawTopHeader
• Parámetros: g As Graphics

Y escribe el siguiente código en el Editor de Código asociado:

Const kPDFDocumentHeader As String = "PDFDocument"

DrawUpperBand(g,0,50)

g.FontName = "Helvetica"
g.FontSize = 180
g.Bold = True

Var x As Double = g.Width/2 - g.TextWidth(kPDFDocumentHeader)/2
Var y As Double = 220

g.DrawingColor = &cC9F2C900
g.DrawText kPDFDocumentHeader, x + 4, 224

g.DrawingColor = Color.Black

Static linearGradient As LinearGradientBrush

If linearGradient = Nil Then
  Lineargradient = New LinearGradientBrush
  linearGradient.StartPoint = New point(x,y-224)
  linearGradient.EndPoint = New point(x,y)
  linearGradient.GradientStops.Add New Pair(0.0, &c00BD4E00)
  linearGradient.GradientStops.Add New pair(0.7, &c00FD1F00)
  linearGradient.GradientStops.add New pair(1.0,&c25712900 )
End If

g.Brush = LinearGradient
g.DrawText kPDFDocumentHeader,x,y

Como puedes ver, el código es muy similar al anterior. Utilizamos un nuevo gradiente lineal para el “color” de relleno del texto (“PDFDocument”, en teste caso). Pero inicialmente se llama al método DrawUpperBand. Este es el método que dibujará una imagen con un 50% de opacidad tras el texto, y también se encargará de dibujar el logotipo de XDC en la esquina inferior izquierda de cada diapositiva. Añadamos por tanto dicho método utilizando los siguientes valores:

• Nombre de Método: DrawUpperBand
• Parámetros: g As Graphics, x As Integer, y As Integer

Y escribe el siguiente fragmento de código en el Editor de Código asociado:

g.Transparency = 50.0
g.DrawPicture UpperBand,x,y
g.Transparency = 0
g.DrawPicture XDC2x, 20,g.Height-XDC2x.Height

Tanto “UpperBand” como “XDC2x” son archivos de imagen PNG que se han añadido al proyecto de ejemplo.

4. NextPage

Dado que el fondo y la cabecera son elementos comunes en todas las diapositivas, las dibujaremos cada vez que se añada una nueva diapositiva (página) a la presentación (documento). Por tanto, crea un nuevo método utilizando los siguientes valores:

• Nombre de Método: NextPage
• Parámetros: g As Graphics

Y escribe a continuación las siguientes líneas de código en el Editor de Código asociado:

g.NextPage(1920,1080)
DrawPageBackground(g)
DrawTopHeader(g)

5. Crear el Contenido para las Diapositivas

Añadamos ahora el método que será responsable de añadir el texto del tema principal en cada diapositiva:

• Nombre de Método: DrawTopic
• Parámetros: g As Graphics, topic As String

Y escribe a continuación el siguiente código en el Editor de Código asociado:

Var x, y As Double
g.FontName = "Anoxic Light"
g.FontSize = 150

x = g.Width/2 - g.TextWidth(topic) / 2
y = g.Height/2 - g.TextHeight/2

Static LinearGradient As LinearGradientBrush

If LinearGradient = Nil Then
  linearGradient = New LinearGradientBrush
  linearGradient.StartPoint = New point(x,y)
  linearGradient.EndPoint = New Point(x,y-80)
  linearGradient.GradientStops.add New pair(1.0, &c9FE1FF00 )
  linearGradient.GradientStops.add New pair(0.0, &cF6F6F600)
End If

g.Brush = linearGradient
g.DrawText topic,x,y

6. Definir las Transiciones entre Diapositivas

PDFDocument soporta todas las transiciones disponibles en el estándar PDF, incluyendo también las opciones ofrecidas por muchas de estas transiciones. En este caso vamos a utilizar la más sencilla de todas: Fade. Por tanto, crea un nuevo método con los siguientes valores:

• Nombre de Método: AddTransitions
• Parámetros: d as PDFDocument

Y escribe las siguientes líneas de código en el Editor de Código asociado:

// Nueva instancia de PDFTransition, utilizando el estilo Fade
// con un segundo de duración.

Var t As New PDFTransition(PDFTransition.Styles.Fade,1)

// Y aplícala en cada página el documento PDF, comenzando en la página 2.
If d.PageCount > 2 Then
  For n As Integer = 2 To d.PageCount
    d.TransitionAt(n) = t
  Next n
End If

7. Los Últimos Detalles

Ya tenemos todas las piezas que necesitamos para crear nuestra breve presentación en formato PDF. Vuelve al manejador de evento Opening (o Run) y escribe las siguientes líneas de código tras la última que ya estaba presente:

DrawPageBackground(g)
DrawTopHeader(g)
DrawTopic(g,"First Slide")
NextPage(g)
DrawTopic(g,"Second Slide")
NextPage(g)
DrawTopic(g,"Third Slide")
NextPage(g)
DrawTopic(g,"Fourth Slide")

AddTransitions(d)

d.Save(SpecialFolder.Desktop.Child("Presentation.pdf"))

¡Listo! Ejecuta el proyecto y el documento PDF se guardará en el Escritorio de tu equipo. Una vez que lo hayas abierto en Adobe Reader, la app detectará que el documento quiere utilizar el modo de Pantalla Completa y, tan pronto como lo confirmes, comenzará la presentación. En función de las preferencias definidas para Acrobat Reader, tendrás que utilizar el botón del ratón o las teclas de cursor para avanzar por las diapositivas o bien dejar que avance automáticamente tras el periodo de tiempo definido en los ajustes de preferencias.