Añadir botones interactivos a los proyectos de Captivate

Buscar
Captivate Guía del usuario

En esta página

Se aplica a: Captivate

在中国购买的 Creative Cloud 产品不含 CC 桌面应用程序中的 Creative Cloud 移动应用程序和在线服务及相关功能。

Añadir botones interactivos a los proyectos de Adobe Captivate y añada estados a los botones.

Los botones son una de las formas más habituales de añadir un objeto estándar a las diapositivas de Captivate.

Puede añadir botones para aumentar la interactividad de los proyectos de Adobe Captivate. Para añadir un botón, puede usar el estilo de botón predeterminado (un simple rectángulo blanco). También puede importar imágenes de botón personalizado. Puede cambiar el tamaño y la posición de los botones en una diapositiva, y determinar lo que ocurrirá cuando el usuario haga clic en el botón.

Añadir un botón interactivo

En Captivate, puede añadir interacción a un botón y realizar una acción al hacer clic en él.

Para añadir un botón interactivo:

  1. En el menú principal, haga clic en Interacciones > Botón. Verá que en la diapositiva se inserta un botón.

    Button

  2. Con el botón insertado en la diapositiva, puede cambiar las propiedades del botón en el panel Inspector de propiedades.

    Button properties

    Puede cambiar el estilo del botón (transparente o imagen) y la fuente.

  3. Para añadir una acción o una interacción al botón, selecciónelo y haga clic en la ficha Acciones, como se muestra a continuación:

    Button actions

  4. Visualice las leyendas Aprobado, Suspenso y Sugerencia si es preciso.

    Button sfh
    • Aprobado: seleccione estacasilla de verificaciónpara incluir una leyenda que se mostrará cuando el usuario haga clic en el botón.
    • Aprobado: seleccione estacasilla de verificaciónpara incluir una leyenda que se mostrará cuando el usuario haga clicfueradel botón.
    • Aprobado: seleccione estacasilla de verificaciónpara especificar la sugerencia que se les va a mostrar a los usuarios. Muestra la sugerencia cuando el usuario desplaza el cursor del ratón sobre el botón.

    puede eliminar un botón en cualquier momento seleccionándolo y pulsando la tecla Eliminar. Cuando elimine un botón, también se eliminarán todos los objetos asociados (como las leyendas de aprobado y suspenso).

  5. Previsualice o publique el proyecto.

Porejemplo, cree un proyecto con un botón interactivo el cual, al hacer clic en él, oculte un objeto. Al hacer clic de nuevo en el botón, el objeto se puede ver.

Cree una variable myVar y defina su valor en cero. En el botón Aprobado, en el panel Acciones avanzadas, elija una acción condicional con una afirmación if.

La acción comprueba si el valor de myVar es cero, a continuación oculta el objeto e incrementa el valor de myVar a uno.

Añadir una forma inteligente como botón

Las formas inteligentes incluyen diversas categorías de formas listas para usar como, por ejemplo, flechas, botones o formas básicas. Estas formas son fáciles de insertar y modificar en los proyectos de Adobe Captivate.

Puede convertir una forma inteligente en botón y añadirle interactividad.

  1. Abra la diapositiva a la que vaya a añadir un botón.

  2. En el menú principal, haga clic en Formas > y elija cualquier Forma inteligente.

  3. Elija el botón y modifique sus propiedades en el panel Inspector de propiedades.

    Button Smart Shape properties

  4. Seleccione la casilla de verificación Usar como botón y defina la acción al hacer clic en el botón.

    Button Smart Shape Use as Button

  5. Previsualice o publique el proyecto.

Añadir una imagen como botón

En proyectos de aprendizaje electrónico, había situaciones en las que, como desarrollador de aprendizaje electrónico, quería importar una imagen y utilizarla como botón. En versiones anteriores de Captivate, el proceso de añadir una imagen como botón requería seguir varios pasos. Había que importar una imagen, añadirle una forma inteligente, cambiar la opacidad y utilizar la forma inteligente como botón. Más que un flujo de trabajo, se trataba de una solución alternativa.

En Captivate actualización 2 (versión 2019), se puede añadir una imagen como botón e incorporar interactividad al botón, cosa que ya hace Captivate. Puede usar el objeto como botón para activar cualquier acción y asignar estados.

Este flujo de trabajo no solo mejora la productividad, sino que también es una forma más sencilla de crear botones.

Puede utilizar imágenes vectoriales jpg o bmp como botón. A continuación, se detallan los formatos de archivo admitidos para los archivos de imagen:

·       jpeg, jpg

·       gif

·       png

·       bmp

·       ico

·       emf

·       wmf

·       pot, potx, pict

Pasos para convertir una imagen y utilizarla como botón:

 
Imagen como botón

  1. Abra un proyecto en Captivate.

  2. Para insertar una imagen, haga clic en Medios > Imagen y seleccione una imagen.

  3. En el escenario, seleccione la imagen.

  4. En el Inspector de propiedades, seleccione la opción Usar como botón.

  5. En la ficha Acciones, defina la acción después de hacer clic en el botón cuando previsualice el proyecto o lo haya publicado.

Activos

En el archivo zip siguiente se incluyen los activos para el proyecto de muestra. Descomprima el archivo y copie su  contenido en el equipo.

Descargar

Obtener archivo
Activos de imágenes como botón

Definir el escenario

  1. Cree un proyecto interactivo.

     

  2. En el proyecto, en la barra de herramientas, haga clic en Fluid Box y en dos Fluid Boxes horizontales.

     
    Fluid Boxes
    Fluid Boxes

  3. En el Fluid Box izquierdo, añada la imagen conclusion_img_bottom.png.

     
    Insertar imagen
    Insertar imagen

  4. Añada a Dave y Angie al Fluid Box izquierdo.

     
    Dave y Angie
    Dave y Angie

  5. En el Fluid Box derecho, añada una forma inteligente con el nombre Imagen como botón de demostración.

     
    Insertar forma inteligente
    Insertar forma inteligente

  6. Inserte bocadillos de diálogo para Dave y Angie. Asimismo, desbloquee los dos objetos del Fluid Box.

     
    Insertar bocadillos de diálogo
    Insertar bocadillos de diálogo

Asignar acciones a los objetos

Después de haber definido el escenario, los pasos siguientes son la creación de una variable, las acciones avanzadas y la asignación de acciones de botón a las acciones avanzadas.

 

  1. Cree una variable _toggle. El estado inicial de esta variable es 0. Al hacer clic en un botón, el estado de la variable se convierte en 1. Para obtener más información, consulte Variables en Captivate.

     
    Crear variable
    Crear variable

  2. Cree las acciones avanzadas.

     

    1. La primera acción avanzada oculta los dos bocadillos de diálogo al iniciar el proyecto. Asigne el nombre ocultar_bocadillos a la acción.

       
      Acción de ocultar bocadillos
      Acción de ocultar bocadillos

      En el inspector de propiedades, en la ficha Acciones, elija la acciónocultar_bocadillos.

       
      Elegir acción
      Elegir acción

    2. La segunda acción avanzada, toggle_Dave, cuando se invoca, revela el bocadillo de diálogo de Dave al hacer clic en Dave. La variable _toggle cambia su valor a 1 al hacer clic en Dave. Cuando desaparece el bocadillo de diálogo, el valor de _toggle pasa a ser 0.

       
      Alternar
      Alternar

    3. La tercera acción avanzada, toggle_Angie, cuando se invoca, revela el bocadillo de diálogo de Angie al hacer clic en Angie. La variable _toggle cambia su valor a 1 al hacer clic en Angie. Cuando desaparece el bocadillo de diálogo, el valor de _toggle pasa a ser 0.

       
      Alternar Angie
      Alternar Angie

  3. Convierta a Dave y Angie en botones. Elija la imagen. En el inspector de propiedades, seleccione la opción Usar como botón.

     
    Usar como botón
    Usar como botón

  4. Asigne a Dave y Angie a sus respectivas acciones avanzadas.

     

  5. Cuando termine de crear su proyecto, tendrá que ponerlo a disposición de los usuarios relevantes. Para ello, tendrá que publicar el proyecto. Adobe Captivate permite publicar un proyecto en varias ubicaciones de salida:

    ·       Su equipo

    ·       iOS o Android

    ·       Adobe Connect

     
SVG como botón

Crear SVG como botón

 

En esta actualización, también se puede crear un botó de gráfico vectorial escalable (SVG). El proceso es similar a la creación de otros tipos de botones como imagen.

 

  1. En la barra de herramientas, haga clic en Medios > SVG y seleccione cualquier SVG.

     

  2. En el inspector de propiedades, seleccione la opción Usar como botón.

     

  3. En la ficha Acciones, asigne al botón cualquier acción de la lista desplegable Si aprueba.

     

Rellenar SVG

Se puede aplicar un color de relleno a la imagen. Para aplicar relleno a la imagen:

 

  1. Seleccione el SVG en el escenario.

     

  2. En el escenario, haga doble clic en el SVG.

     

  3. En el SVG, seleccione un recorrido y aplique un color de la paleta de colores. En el SVG, puede utilizar un recorrido para crear líneas, curvas, arcos, etcétera. Un recorrido también es una combinación de varias formas, por ejemplo líneas rectas o curvas. Un recorrido puede ser tan complejo como una serie de polilíneas; por lo tanto, es importante conocer el recorrido correcto para aplicar un color. Por ejemplo, las capturas de pantalla siguientes muestran un recorrido que se ha rellenado con color. En la primera imagen, el recorrido se ha rellenado con rojo. En la segunda imagen, el recorrido se ha rellenado con verde.

    El límite azul del SVG muestra el recorrido seleccionado en el SVG; un cambio de color afectaría únicamente a ese recorrido.

     
    rojo
    verde

Añadir estados al botón

Para añadir estados al botón:

  1. Convierta una imagen en un botón.

  2. En el Inspector de propiedades, haga clic en Vista de estado.

  3. Cambie las propiedades de los estados Efecto dinámico y Abajo.

  4. Salga de la vista Estado y previsualice/publique el proyecto.

Cuando se utilicen los botones, cambiarán de estado. También puede añadir el estado Visitado y otros estados personalizados a la imagen como botón.

Referencia de propiedades del botón

Para ver las propiedades de un botón, selecciónelo en la diapositiva. El Inspector de propiedades muestra las propiedades del botón. Al cambiar las propiedades, los cambios se aplican de forma instantánea a la instancia seleccionada del botón.

Propiedades de botón interactivo

Interactive button properties
Id Descripción
1 Elija cualquiera: Texto, Transparente o Imagen.
2 La etiqueta del botón.
3 Cambie las propiedades de la fuente de la etiqueta del botón.
4 Cambie los efectos de la etiqueta del botón.
5 Cambie las propiedades de sombra y reflejo del botón.
6 Elija aplicar las propiedades a todos los objetos del mismo tipo.

Propiedades de forma inteligente como botón

Propiedad Descripción de la etiqueta

1. Cambie la forma inteligente.

2. Cambie el color de fondo y la opacidad de la forma inteligente.

3. Modifique las propiedades de trazo del botón.

4. Cambie las propiedades de fuente de la etiqueta del botón.

1. Inserte un símbolo, una variable definida por el usuario o un hipervínculo.

2. Modifique las propiedades de color de la etiqueta del botón.

3. Modifique los márgenes del botón.

4. Modifique las propiedades de sombra del botón.
  1. Seleccione la acción que se ejecutará al hacer clic en el botón.
  2. Asigne una tecla de acceso directo al botón
  3. Mostrar leyenda de aprobado/suspenso/sugerencia al hacer clic en el botón.
  4. Elija el tipo de cursor y active o desactive el sonido de clic.
  1. Elija un archivo de audio/clip que se reproduzca al hacer clic en el botón.
  2. Modifique el tamaño y la posición del botón.
  3. Cambie la posición angular del botón. Mantiene proporción entre la anchura y la altura del botón cuando se cambia el tamaño.

Uso de botones interactivos en un proyecto de interacción de arrastrar y soltar

Las interacciones de arrastrar-soltar ofrecen un modo interesante y atractivo de evaluar el conocimiento de los usuarios. Esta interacción permite a los usuarios responder a preguntas arrastrando y colocando los objetos en las áreas o los objetos designados.

Una interacción de arrastrar-soltar implica un origen de arrastre y un destino de colocación. Los usuarios arrastran los orígenes de arrastre y los sueltan en los destinos de colocación.

  1. Cree un proyecto de interacción de arrastrar y soltar especificando los orígenes de arrastre y los destinos de colocación, y las asignaciones, como se muestra a continuación.

    Para obtener más información sobre la creación de proyectos de interacción de arrastrar y soltar, consulte Interacciones de arrastrar y soltar en Adobe Captivate.

    Drag and Drop design

  2. Añada las leyendas de aprobado y suspenso pertinentes.

  3. Para añadir botones Deshacer y Restablecer al proyecto, acceda al panel Arrastrar y soltar, y active las opciones Deshacer y Restablecer.

    DnD Undo Reset 1

  4. Para añadir estados a los botones, seleccione un botón, haga clic en el Inspector de propiedades y añada propiedades de botón a los estados Efecto dinámico y Abajo.

    DnD button states

  5. Previsualice o publique el proyecto.

Uso de botones interactivos en un proyecto de prueba

En Captivate, puede añadir estados a botones de prueba. Puede añadir un estado Efecto dinámico o Abajo a los botones.

  1. Cree un proyecto de prueba con los botones, como se muestra a continuación:

    Quiz buttons

  2. Añada estados a los botones siguientes:

    • Enviar
    • Atrás
    • Omitir
    • Revisar adelante
    • Revisar atrás
    • Borrar

  3. Previsualice o publique el proyecto.

Uso de botones interactivos en una diapositiva patrón en un modo interactivo

Puede añadir estados a botones en una diapositiva patrón en modo interactivo y utilizar la diapositiva patrón en el proyecto.

  1. Cree un proyecto interactivo (Ctrl+H) e inserte una diapositiva patrón (Insertar > Diapositiva patrón de contenido) en el proyecto.

  2. Añada título, subtítulo y marcadores de posición de contenido. Añada tres formas inteligentes al proyecto y conviértalas en botones.

    Diseño interactivo de diapositiva patrón
    Diseño interactivo de diapositiva patrón

  3. Añada estados a los botones. Elija un botón; en el Inspector de propiedades, añada propiedades de botón a los estados Efecto dinámico y Abajo.

    Estados de botones
    Estados de botones

  4. Salga de la vista Diapositiva patrón. Inserte una diapositiva de contenido y, en la lista de diapositivas patrón, elija la diapositiva patrón que haya creado. Inserte título, subtítulo y contenido en la diapositiva.

    Previsualice o publique el proyecto.

  5. Para insertar Fluid Boxes en el proyecto, haga clic en Sugerir Fluid Boxes en el Inspector de propiedades. Fluid Box crea contenedores automáticamente conforme al diseño de los objetos.

    Alinee los objetos vertical u horizontalmente.

    Para obtener más información sobre Fluid Boxes, consulte Fluid Boxes en Adobe Captivate.

    Diseño de Fluid Box de diapositiva patrón
    Diseño de Fluid Box de diapositiva patrón

Cambio de tamaño automático de los botones

Puede configurar Adobe Captivate para que cambie automáticamente el tamaño de un botón o una leyenda en función de la cantidad de texto que contenga el botón. Cuando edite el texto, el botón cambiará para adaptarse al nuevo texto.

  1. En un proyecto abierto, seleccione Editar > Preferencias (en Windows) o Adobe Captivate > Preferencias (Mac OS).

  2. En el cuadro de diálogo Preferencias, seleccione Valores predet. en el menú Configuración global.

  3. Seleccione Botones de tamaño automático en el panel General situado a la derecha.

Nota:

se recomienda cambiar el tamaño de los botones antes de cambiar el del proyecto. Al cambiar el tamaño de un proyecto, el de los botones no se modifica automáticamente.

Modificación de botones en las diapositivas de pregunta

Si lo desea, puede modificar algunas de las propiedades de los botones de las diapositivas de pregunta. Los botones estándar son Borrar, Atrás, Enviar y Omitir.

  1. Seleccione el botón de pregunta que desee modificar.

  2. En el panel Propiedades de las pruebas, especifique los valores para las distintas opciones.

Nota:

cambie el tamaño de los botones antes de modificar el tamaño del proyecto. Al cambiar el tamaño de un proyecto, el de los botones no se modifica automáticamente.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea