En esta página
- Diseño de proyecto interactivo
- Fluid Boxes en Adobe Captivate
- Automatic Device Preview
- Activación de punto de ajuste para Fluid Box
- Captura interactiva
- Conversión de un proyecto vacío en un proyecto interactivo
- Creación de un dispositivo de previsualización personalizado
- Puntos de corte en proyecto interactivo
- Interacción de arrastrar y soltar
- Descargar proyectos de muestra
El diseño de un proyecto interactivo con Adobe Captivate le proporciona la
Cree una experiencia de aprendizaje atractiva para sus alumnos; haga que el aprendizaje sea interesante e interactivo.
En la versión 2017 de Adobe Captivate, Fluid Box es un modo de diseño que proporciona la organización de objetos en una diapositiva, con el fin de que los objetos se comporten de manera predecible cuando la diapositiva se adecua a diferentes dispositivos y tamaños de pantalla. Fluid Box es un modelo de diseño fácil de usar para los diseñadores de aprendizaje electrónico. Puede utilizar objetos secundarios en cualquier orientación y tener flexibilidad para adaptarse al espacio de la pantalla.
Un contenedor de Fluid Box expande los objetos para rellenar el espacio libre disponible o los contrae para impedir el desbordamiento. Los elementos de Fluid Box son independientes de la orientación. Los objetos pueden adaptarse al espacio disponible.
En Captivate, un diseño de Fluid Box se puede insertar vertical u horizontalmente en un proyecto interactivo. Según el tamaño de la pantalla, los objetos de un contenedor de Fluid Box aumentan o disminuyen sin poner en peligro la anchura de la pantalla.
En la versión 2017 de Adobe Captivate, se han incorporado dos elementos nuevos a la barra de menús Objetos.
- Diseño de Fluid Box horizontal
- Diseño de Fluid Box vertical
En este ejemplo, crea un diseño mediante Fluid Box con cuatro bolas de billar. La vista cambia cuando el proyecto se previsualiza en un dispositivo diferente.
-
-
Estático: si selecciona esta
y, , los objetos dentro de Fluid Box se solapan y se pueden mover a cualquier parte dentro de Fluid Box.Opcional: si selecciona esta
y, , un objeto desaparece si se llega a su longitud. La modalidad Opcional solo es válida con una clase de ajuste, Encoger en una fila o Encoger en una columna. -
Relleno: el relleno añade espacio en todos los lados de un objeto. Para añadir relleno horizontalmente a los objetos, especifique el valor de relleno en píxeles. No se permiten valores negativos.
Distribuir objetos de manera uniforme: haga clic en el botón para que todos los objetos de Fluid Box se coloquen de manera uniforme y tengan el mismo tamaño. Por ejemplo,
Objetos antes de la distribución
Objetos después de la distribución -
Punto de ajuste: cuando se alcanza un punto de ajuste, dicho punto ajusta o reorganiza los objetos con un cambio en la anchura del dispositivo. Por ejemplo, si el punto de ajuste está al 80%, en el 80% de la anchura de dispositivo, un objeto se reorganiza en Fluid Box conforme a las propiedades definidas en las opciones de Ajustar.
-
En este ejemplo, crea un diseño mediante Fluid Box con cuatro bolas de billar. La vista cambia cuando el proyecto se previsualiza en un dispositivo diferente.
-
En los contenedores de Fluid Box, arrastre los controles azules para ajustar el tamaño de los contenedores secundarios.
Si hace clic en cualquier otro lugar, los controles azules desaparecen. Para que se vuelvan a mostrar, efectúe una de las acciones siguientes:
- Haga clic en cualquier lugar fuera del área del escenario; a continuación, arrastre el ratón en el escenario.
- Haga clic en cualquier lugar del área del escenario y seleccione el Fluid Box principal en la sección Selector de Fluid Box. Los controles han vuelto a aparecer.
-
La imagen anterior representa un diseño para equipos de sobremesa (1024 x 627). Para comprobar el comportamiento de este diseño en otros dispositivos, desplace el control deslizante de la parte superior para observar los cambios en el diseño.
Si previsualiza el objeto en diferentes dispositivos, puede ver que los contenedores de Fluid Box se adaptan automáticamente a la anchura del dispositivo.
Si el texto especificado en un cuadro de texto se desplaza para incluir el cambio en la anchura del dispositivo, aparece un botón en la parte inferior del contenedor de texto. Haga clic en ese botón para ver todo el texto. Por ejemplo, en este caso, el texto aparece como:
Nota:
No puede copiar una diapositiva que tiene objetos en Fluid Box ypegarlaen un proyecto en blanco o interactivo. Una solución es hacer clic con el botón derecho en Fluid Box, elegir Seleccionar todo y pegar los objetos en un proyecto en blanco o interactivo.
Nota:
Si en Fluid Box solo hay un objeto, no se puede cambiar el tamaño del objeto. Puede ver los controles rojos alrededor del objeto; eso significa que no se puede cambiar el tamaño del objeto.
La anchura de una Fluid Box se puede modificar cambiando los valores del panel Posición en el inspector de propiedades.
Por ejemplo, si una anchura de una Fluid Box secundaria es un 33,3 % de la de la Fluid Box principal o 341 px, puede cambiarla a los valores que desee. Dichos cambios se reflejarán en el escenario.
Nota:
En el panel Posición, si indica un valor mayor que el valor máximo permitido, el valor se restablece en el valor original.
Hit the play button to see your content automatically change shape and form factor across the full spectrum of device sizes. See how responsive your content is on every screen size.
Click the Layout Preview button to see your content automatically wrap, scale and align across device sizes.
You can also use the same option in the Wrap properties. Change the wrap property for the Fluid Box and click the Layout Preview button to check out the new wrapping behavior.
Como se ha explicado en la sección anterior, un punto de ajuste es un nivel que, cuando se alcanza, ajusta o reorganiza los objetos con un cambio en la anchura del dispositivo.
Por ejemplo, si el punto de ajuste está al 80%, en el 80% de la anchura de dispositivo, un objeto se reorganiza en Fluid Box conforme a las propiedades definidas en las opciones de Ajustar.
A menudo, en proyectos de aprendizaje electrónico visualizados en dispositivos, se desea que los objetos se ajusten en más de un Fluid Box. Si bien se puede definir un punto de ajuste fácilmente en un Fluid Box, la capacidad de definir puntos de ajuste en varios Fluid Box confiere mayor flexibilidad al desarrollar proyectos de aprendizaje electrónico.
Para ajustar un punto en varios Fluid Box, haga clic en Editar > Preferencias o pulse Mayús+F8 para abrir el cuadro de diálogo Preferencias.
Seleccione la casilla de verificación Activar punto de ajuste
En el proyecto, al añadir varios Fluid Box y objetos en cada Fluid Box, puede ver que puede activar puntos de ajuste en cada Fluid Box.
Al mover los reguladores, los objetos se ajustan en el punto exacto donde había especificado el umbral de ajuste.
Configure los controles de la
Para ver distintos controles de la
-
cp.responsiveButtons = { //"ButtonName" : [Primary,Tablet,Mobile], "Rewind" : [true,true,false], "Backward" : [true,true,true], "Play" : [true,true,true], "Slider" : [true,true,false], "Forward" : [true,true,true], "CC" : [true,true,true], "AudioOn" : [true,false,false], "Exit" : [true,true,true], "FastForward" : [true,true,false], "TOC" : [true,true,false] }; -
Si desea que cada uno de los botones de control de la barra de reproducción aparezca en vistas de tipo Principal, Tableta y Móvil, modifique el código anterior como [true, true, true] para todos los botones. Guarde y cierre el archivo.
Por ejemplo, si quiere que el control deslizante aparezca únicamente en vistas de tipo Tableta y Móvil, defina el código como se indica a continuación:
"Slider" : [false, true, true]
Nota:
Si quiere que otra barra de reproducción sea interactiva, siga el procedimiento mencionado sobre estas líneas, pero antes copie la función interactiva en el archivo js.
La primera preferencia se asigna a las casillas situadas en Editor de aspectos. Si no están seleccionadas, no aparecen en la barra de reproducción, sea cual sea el valor de true o false del botón.
Cree una única captura de pantalla y utilícela en varias pantallas y dispositivos. Adobe Captivate le permite elegir la parte de la captura de pantalla que desea mostrar en las pantallas más pequeñas.
-
Seleccione el tipo de grabación Automático, Demostración de video o Manual, y haga clic en Grabar para capturar las pantallas.
Nota:
Utilice la grabación manual si desea obtener y seleccionar unas cuantas capturas de pantalla durante el proceso de grabación.
Cuando se graba utilizando la grabación automática, Adobe Captivate realiza las capturas de pantalla de manera automática y las coloca en diapositivas independientes. La grabación automática es el método de grabación que se utiliza con más frecuencia en Adobe Captivate.
-
Para convertir el proyecto en interactivo, haga clic en Archivo > Guardar como interactivo. Puede ver un mensaje de advertencia sobre los objetos que no son compatibles en un proyecto interactivo. Para obtener más información, consulteObjetos no admitidos en salidas con formato HTML5.
Haga clic en Guardar y guarde el proyecto como interactivo. Ahora tiene un nuevo proyecto interactivo, como se muestra a continuación:
Nuevo proyecto interactivo
-
En la diapositiva interactiva, puede insertar su propio diseño de FluidBox (FluidBox > Vertical u Horizontal) o hacer clic en Sugerir FluidBoxes para colocar los objetos de forma inteligente en contenedores interactivos. Si hace clic en Sugerir FluidBox, puede ver cómo cambia el diseño del proyecto, como se indica aquí:
Diseño de FluidBox
En cualquier proyecto interactivo, Captivate permite previsualizar el proyecto en diferentes dispositivos como el escritorio, iPhone, iPad, etcétera.
Puede crear dispositivos de previsualización personalizados, además de los que ya se proporcionan de forma predeterminada.
Para crear un dispositivo de previsualización personalizado:
-
<?xml version="1.0" encoding="UTF-8"?> <devicelist> <device name="Desktop" width="1024" height="627" candelete="0"/> <device name="iPhone6" width="375" height="667" candelete="0"/> <device name="iPad" width="768" height="1024" candelete="0"/> <device name="Galaxy S7" width="360" height="640" candelete="0"/> <device name="Nexus 5x" width="412" height="732" candelete="0"/> <device name="Galaxy S8" width="1000" height="1000" candelete="1"/> </devicelist>
Cree contenido con cinco puntos de corte:
- Escritorio con una ventanilla de 1024 x 627
- Tableta Horizontal con una ventanilla de 896 x 627
- Tableta Vertical con una ventanilla de 768 x 627
- Móvil Horizontal con una ventanilla de 667 x 410
- Móvil Vertical con una ventanilla de 360 x 460
Vea una vista previa del resultado mediante la reproducción de diapositivas en los diseños de dispositivo correspondientes. Publique el contenido en formato HTML5.
Adobe Captivate le permite arrastrar y soltar los objetos con una experiencia óptima en todas las vistas de punto de corte en proyectos interactivos.
Para obtener más información sobre las propiedades específicas de la vista del
Puede ver el panel Alinear haciendo clic en Ventana > Alinear.
-
Para desplazarse por los distintos puntos de corte, haga clic en los iconos de Escritorio, Tableta y Móvil en el diseño de proyecto interactivo.
Puede ver el área Proyecto interactivo dividida en seis puntos de corte únicos, como se muestra en las tres capturas de pantalla más abajo. Cada área de punto de corte es un espacio de creación único.
Puntos de corte disponibles
Al principio y al final de cada punto de corte, hay disponibles reguladores.
De forma predeterminada, hay cinco puntos de corte disponibles para la creación de contenido.
Si crea contenido para cualquier otro dispositivo cuyo tamaño sea mayor que el de la ventanilla del diseño para móviles, puede aumentar el tamaño arrastrando el control deslizante.
Nota:
Cualquier tamaño superior al de la ventanilla predeterminada adoptará el diseño de ventanilla siguiente.
Por ejemplo, es posible que desee cambiar la ventanilla para móviles a 450 x 450 en lugar de usar los valores predeterminados. En tal caso, puesto que este tamaño es mayor que el tamaño para Móvil y menor que el tamaño para Tableta, adoptará el diseño para Tableta.
La colocación inteligente se permite entre puntos de separación. Adobe Captivate le permite obtener una vista previa de los proyectos con una experiencia óptima en los puntos de corte. En otras palabras, los usuarios no experimentan ningún retraso en la vista previa de la salida cuando pasan de una vista a otra vista entre puntos de corte.
Puede elegir los Colores de tema predeterminados o modificar los Colores de tema para crear sus propios esquemas de color.
Defina fondos diferentes en las distintas vistas mediante la inclusión o exclusión de objetos.
También puede establecer la altura de dispositivo para cada diseño mediante la selección de la casilla Altura de dispositivo en el Inspector de propiedades. Si se selecciona Altura de dispositivo, puede ver el borde amarillo para cada diseño como se muestra en las capturas de pantalla más abajo para el diseño para Móvil.
Es posible vincular la altura de las diapositivas a la altura de los dispositivos. Para ello, basta con hacer clic en el icono de vinculación junto a Altura de diapositiva en la ventana Propiedades como se muestra en la captura de pantalla más abajo. Puede cambiar la altura de las diapositivas para una vista específica o para todas las vistas.
Adobe Captivate también le permite personalizar la altura de la ventanilla de acuerdo con la altura de los dispositivos.
La altura de Ventanilla es la altura del diseño de página para Principal (Escritorio), Tableta y Móvil. Puede ajustar esta altura de modo que se adapte a cualquier altura de dispositivo específica con la opción de Altura de diapositiva en Propiedades.
Nota:
Desvincule la altura de la diapositiva de la altura del dispositivo para modificarla.
Supongamos que la altura de la ventanilla y del dispositivo para Móvil es 415. Supongamos
En este caso, todo el contenido incluido en la altura de la ventanilla estará visible en el
Si la altura de la ventanilla es superior a la del dispositivo, el usuario final podrá el contenido que se encuentre fuera de la altura del dispositivo mediante una barra de desplazamiento.
Ahora, puede alinear cualquier objeto en el
- Inserte cualquier forma inteligente en la diapositiva del punto de corte principal.
- Haga clic en la ficha de posición de la vista y la forma inteligente en el
Inspector de propiedades. - Haga clic en Avanzadas. Puede ver las opciones de alineación horizontal y vertical como se muestra en la instantánea.
Ahora puede alinear cualquier objeto en el centro de la diapositiva en todos los puntos de corte de proyectos interactivos mediante las opciones de alineación central horizontal y vertical de Captivate.
-
Nota:
Active el panel Alinear haciendo clic en Ventana > Alinear.
Alineación central horizontal: si aplica esta alineación, puede mover el objeto solo en dirección vertical en dirección
vertical en la diapositiva. El movimiento horizontal está restringido.Alineación central vertical: si aplica esta alineación, puede mover la forma solo en dirección
horizontal en la diapositiva. El movimiento vertical está restringido.Alineación horizontal y vertical: si aplica ambas alineaciones, el
movimiento se restringe en ambas direcciones.Se admite el código de color de las opciones de alineación tanto central como vertical. El color del borde de las dos opciones de la casilla de verificación toma el esquema de color del
punto de corte en el que se eligen las opciones de alineación.
Nota:
Si dispone de varias formas, puede alinear un objeto individual en el centro de la diapositiva y vincular el resto de los objetos al objeto centrado para obtener diagramas de flujo centrados a la diapositiva en todos los puntos de corte.
Si desalinea la opción central horizontal o vertical, el objeto no regresa a su posición original.
Es posible definir distintos colores de texto de leyenda predeterminados para las vistas de punto de corte.
- Elija Editar > Administrador de estilos del objeto
- Seleccione Estilo predeterminado de pie de ilustración
- En Formato de texto, haga clic en el cuadro desplegable junto a Puntos de corte y elija Escritorio, Tableta Vertical o Móvil Vertical.
- Elija el color para cada punto de corte.
Es posible capturar las interacciones en todas las vistas y definir el enfoque automático para un área de interacción específica en las vistas. Defina una forma inteligente como imagen de fondo en Proyecto interactivo y se le permite definir el área de recorte para la imagen de fondo en las distintas vistas.
Las diapositivas de Preguntas y Resultados, así como Diapositivas patrón, son compatibles con todas las vistas del proyecto interactivo.
Es posible aplicar las propiedades y los temas interactivos a las diapositivas de Preguntas.
Los estilos modificados se indican con un símbolo de estrella en el área Texto de muestra del Inspector de propiedades.
Adobe Captivate admite interacciones de arrastrar y soltar para los proyectos interactivos.
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 soltando 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.
En un proyecto interactivo, puede ejecutar el asistente de interacción de arrastrar y soltar si selecciona Insertar > Iniciar el asistente para arrastrar y soltar. También puede seleccionar Interacciones > Arrastrar y soltar, como se muestra en la instantánea a continuación:
Todas las funciones de la interacción de arrastrar y soltar en proyectos interactivos son similares a los proyectos vacíos. Para obtener información sobre cómo crear una interacción de arrastrar y soltar, las distintas funciones de interacción y las prácticas recomendadas, consulte Interacciones de arrastrar y soltar.
De un experto: interacción con capacidad de respuesta
Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.