Cree un solo diseño horizontal. Este diseño se convierte en Fluid Box principal.
El diseño de un proyecto interactivo con Adobe Captivate le proporciona la tan necesaria ventaja competitiva. Cree una sola vez y el contenido se reorganizará para las vistas de tabletas y móviles. Comience en un lienzo en blanco, grabe en un dispositivo iOS o incluso importe un guion gráfico mediante Adobe Captivate Draft. Ofrezca experiencias de aprendizaje de varias pantallas, específicas de la ubicación y que tengan en cuenta el dispositivo sin necesidad de programar.
Cree una experiencia de aprendizaje atractiva para sus alumnos; haga que el aprendizaje sea interesante e interactivo.
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.
Puede añadir Fluid Boxes en la barra de botones grande.
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.
Cree un solo diseño horizontal. Este diseño se convierte en Fluid Box principal.
Coloque las bolas de billar en Fluid Box una a una desde la biblioteca.
En el panel Inspector de propiedades, se activan las propiedades siguientes de Fluid Box:
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.
Flujo: denota la orientación en la que los objetos se colocan en Fluid Box. En un flujo horizontal, los objetos se colocan horizontalmente. Asimismo, en un flujo vertical, los objetos se colocan verticalmente.
Horizontal: elija las opciones de alineación horizontal de los objetos en el eje principal. Las opciones son:
Alineación izquierda: los objetos se alinean a la izquierda. El primer objeto se encuentra al comienzo del eje.
Alineación central: los objetos se centran en el eje.
Alineación derecha: los objetos se alinean a la derecha. El último objeto se encuentra al final del eje.
Espacio intermedio: los objetos se distribuyen en el eje de manera uniforme; el primer objeto se encuentra al comienzo del eje y el último objeto al final.
Espacio alrededor: los objetos se distribuyen en el eje de manera uniforme con el mismo espacio a su alrededor.
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,
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.
Por ejemplo, si el área de previsualización tiene una anchura de 1024 píxeles y el punto de ajuste se define al 50%, y si la anchura del dispositivo se define en 512 píxeles, los objetos se reorganizan.
Ajustar: define el momento y el modo en los que los objetos se ajustan o reorganizan en Fluid Box cuando se llega a un umbral predefinido. Las opciones siguientes están disponibles:
Ajustar a siguiente fila: cuando el punto de ajuste llega al umbral, un objeto se desplaza a la fila siguiente.
Encoger en una fila: cuando el punto de ajuste llega al umbral, los objetos no cambian de posición. Los objetos ajustan el tamaño conforme a las dimensiones del dispositivo.
Una fila/columna: cuando el punto de ajuste llega al umbral, los objetos se alinean en una columna.
Simétrica: cuando el punto de ajuste llega al umbral, los objetos se reorganizan en función de la cantidad de objetos en Fluid Box.
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 el inspector de propiedades, elija el flujo de objetos y el tipo de ajuste de objetos.
Elija la alineación horizontal de los objetos: central, izquierda o derecha.
Elija la alineación vertical de los objetos.
Alineación superior
Alineación media
Alineación inferior
Espacio intermedio
Espacio alrededor
Cree un proyecto interactivo (Archivo > Nuevo proyecto > Proyecto interactivo o pulse Ctrl+H).
En una diapositiva vacía, inserte un diseño de Fluid Box, como se muestra a continuación:
Tras insertar el diseño vertical, haga clic en cualquier parte del diseño. FB_5 es el elemento principal que representa todo el contenedor de la diapositiva. En el panel Inspector de propiedades, puede ver toda la jerarquía de cada contenedor de Fluid Box.
A medida que resalta una Fluid Box en el escenario, la Fluid Box adecuada de la jerarquía de arriba se resalta, para que pueda saber en qué Fluid Box trabaja.
Para modificar los objetos, elija el contenedor pertinente.
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:
Inserte objetos en los contenedores como se muestra a continuación:
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.
En el caso de un dispositivo de anchura menor:
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:
No puede copiar una diapositiva que tiene objetos en Fluid Box y pegarla en 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.
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.
En el panel Posición, si indica un valor mayor que el valor máximo permitido, el valor se restablece en el valor original.
Pulse el botón de reproducir para ver cómo el contenido cambia automáticamente la forma y el factor de forma en todo el espectro de tamaños de dispositivo. Vea cómo responde su contenido en cualquier tamaño de pantalla.
Haga clic en el botón Vista previa del diseño para que el contenido se ajuste, se escale y se alinee automáticamente en todos los tamaños de dispositivo.
También puede utilizar la misma opción en las propiedades de Ajustar. Cambie la propiedad de ajuste para Fluid Box y haga clic en el botón Vista previa del diseño para comprobar el nuevo comportamiento de ajuste.
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 y, a continuación, haga clic en Aceptar. Reinicie Captivate.
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 barra de reproducción para que sean interactivos. Desde Ventana > Editor de aspectos, puede crear un aspecto personalizado cambiando los barra de reproducción de la barra de reproducción y guardando los cambios como tema. Ahora puede hacer que los controles de la barra de reproducción se muestren en vistas de tipo Principal, Tableta y Móvil.
Para ver distintos controles de la barra de reproducción en cada una de las vistas Principal, Tableta y Móvil, personalice la variable cpMobilePlaybar.
Vaya a la ubicación de la barra de reproducción:
C:\Archivos de programa\Adobe\Adobe Captivate 8 x64\es_ES\Gallery\Playbars\HTML\cpPlaybarMobileStep text
La ubicación varía según el directorio de instalación en el equipo.
Cree una copia de seguridad para la barra de reproducción que desea cambiar.
Abra el archivo playbarScript.js
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]
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.
Reinicie Captivate y la barra de reproducción se actualiza.
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.
Abra un proyecto interactivo de Captivate.
Haga clic en Diapositiva > Simulación de software.
Aparece la ventana Grabar diapositivas adicionales.
Seleccione la diapositiva después de la cual quiere insertar la diapositiva grabada y haga clic en Aceptar.
Aparece la ventana de captura de pantalla.
Seleccione el tipo de grabación Automático, Demostración de video o Manual, y haga clic en Grabar para capturar las pantallas.
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.
En Proyecto interactivo, haga clic en la vista Móvil.
La captura de pantalla se realinea y aparece como se muestra aquí:
Observará que el fondo se ve sesgado.
Puede utilizar una parte de la imagen de fondo en la vista Móvil.
En el inspector de propiedades, haga clic en Usar porción de imagen de fondo.Puede mover la captura de la diapositiva a la porción de fondo que quiera.
Observe la diferencia con la vista anterior.
Cree un proyecto vacío con algunos objetos, como se muestra a continuación.
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:
Arrastre el control deslizante para ver el proyecto en las distintas vistas.
Si el texto especificado en un cuadro de texto se desplaza para incluir el cambio en la anchura del dispositivo, aparece el botón Expandir en la parte inferior del contenedor de texto. Haga clic en ese botón para ver todo el texto.
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í:
Mueva los objetos, colóquelos en el orden deseado y luego obtenga una vista previa o publique el proyecto interactivo.
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:
En primer lugar, inicie Captivate como administrador.
Después, escriba las dimensiones adecuadas, como se muestra a continuación:
Para añadir la previsualización a la lista de modos de previsualización, haga clic en + junto a los campos de dimensión. Puede ver el siguiente cuadro de diálogo:
Escriba un nombre, por ejemplo Galaxy S8, y el dispositivo de previsualización personalizado pasa a formar parte de la lista de dispositivos de previsualización.
Para eliminar un dispositivo de previsualización personalizado, selecciónelo y haga clic en - junto a los campos de dimensión.
<?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>
Añada o elimine una vista previa personalizada utilizando los atributos de nombre, anchura y altura.
Reinicie Captivate para que se reflejen los cambios en la lista desplegable Vista previa Lista desplegable
Cree contenido con cinco puntos de corte:
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 proyecto interactivo, consulte Propiedades específicas para cada vista.
Puede ver el panel Alinear haciendo clic en Ventana > Alinear.
Después de iniciar Adobe Captivate, haga clic en la primera miniatura de la pantalla de inicio, Proyecto interactivo, y haga clic en Crear.
También puede elegir Archivo > Nuevo proyecto > Proyecto interactivo.
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.
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.
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.
En la Barra de herramientas, haga clic en Temas > Colores de tema
Elija cualquiera de los Colores de tema predeterminados en el menú desplegable Seleccionar color de tema y haga clic en Personalizar. La ventana de colores de tema de que personalizar aparece como se muestra a continuación:
Seleccione el componente cuyos colores desea cambiar.
Puede cambiar los colores de todos los componentes de la diapositiva: Título, Aspecto, Subtítulo, Fondo de diapositiva.
Utilice las herramientas Sombreados, Muestras, Selector de color o Cuentagotas para elegir el color deseado.
Haga clic en el Título del tema predeterminado y utilice su propio título.
Haga clic en Guardar.
A continuación, podrá ver el color de Tema personalizado en la lista desplegable.
Utilice el icono de Rueda de configuración para gestionar los colores de tema: Eliminar, Cambiar nombre.
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.
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 que la altura del dispositivo sea 500. Puede ajustar la altura de la ventanilla moviendo el regulador vertical de la altura del dispositivo hasta que se alcance 500. De forma predeterminada, la altura del dispositivo está vinculada a la altura de la diapositiva. Puede anular el vínculo al mismo haciendo clic en el icono de vincular junto al valor de altura de la diapositiva en el inspector de propiedades.
En este caso, todo el contenido incluido en la altura de la ventanilla estará visible en el dispositivo móvil de forma predeterminada. Esta opción permite desarrollar contenidos con precisión de manera que la altura del diseño coincida con la de los dispositivos.
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 centro de la diapositiva en todos los puntos de corte de proyectos interactivos. Captivate 9 introduce opciones de alineación horizontal y vertical.
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.
Inserte cualquier forma u objeto en la diapositiva del punto de corte principal.
Selecciónelo y observe el panel Posición en el Inspector de propiedades. Haga clic en Avanzadas.
Haga clic en Avanzadas.
Puede ver las opciones de alineación horizontal y vertical como se muestra en la instantánea.
Puede elegir opciones de alineación central horizontal y vertical haciendo clic con el botón derecho en el objeto y seleccionando Alinear como se muestra aquí.
También puede utilizar los iconos del panel Alinear como se muestra aquí.
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.
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.
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.
Para obtener más información sobre Captivate y cómo crear contenido didáctico atractivo, descargue los proyectos siguientes:
Inicia sesión en tu cuenta