Wink: creación de i-videotutoriales
Si usted quiere hacer una videodemostración o videotutorial y la tradicional película no se ajusta a sus necesidades, es posible que la herramienta que necesite sea Wink. Con este software podrá realizar vídeos de carácter interactivo: es decir, va a poder hacer que el vídeo pare para que el usuario pueda leer con tranquilidad una explicación escrita, incluir botones de navegación, puede incluir imágenes, sonidos... ya que Wink le brindará la posibilidad de trabajar con cada fotograma por separado y especificar que ocurre en él.
Las distintas posibilidades de captura permiten un ahorro considerable de recursos para que después el tiempo de carga sea más ligero (sobre todo si se va a insertar en un entorno web)En definitiva, con Wink el vídeo tutorial se eleva a una nueva categoría: el i-vídeo
Este tutorial no se hace un recorrido exhauistivo del programa pero le dará las claves para comenzar a realizar proyectos con este magnífico software.
WINK EN ESPAÑOL
Siga la línea de comandos File/Choose Languaje/Spanish; después reinicie el programa y encontrará la interfaz en español.
PREPARANDO LA CAPTURA DE PANTALLA
Mediante la tradicional línea de comandos Archivo/Nuevo accederá a un asistente para determinar las características de su proyecto.
Cuando esté acostumbrado a usar Wink es posible que quiera comenzar con un proyecto vacío; en tal caso deberá desactivar la casilla Comenzar capturando pantallas, pero por lo general querrá comenzar por hacer una captura de alguna secuencia de acontecimientos de su escritorio. Deje por tanto activada la opción Comenzar capturando pantallas y pase a determinar si quiere o no recoger el audio desde un micrófono con Record Audio. Si activa esta opción Wink le permitirá acceder a los controles de su Mic pulsando el pequeño icono de la derecha.
En el desplegable de más abajo se le ofrecen varias posibilidades para el rectángulo de la captura.
- Pantalla hará una captura de todo el escritorio.
- Ventana: una vez pulsado el botón Seleccionar el cursor se convertirá en una mano y le permitirá escoger con precisión una de las ventanas que estén en su escritorio.
- Rectángulo personalizado: el cursor se convierte en una cruz para definir el rectángulo
- El resto son rectángulos prediseñados.
Una manera extra de definir el rectángulo es por coordenadas, por ejemplo en el caso siguiente se está creando un rectángulo en el que la esquina superior izquierda está en la coordenada (176,177) y la inferior derecha en la (832, 714) También se aportas las medidas ancho por alto en píxeles.
Presione OK cuando tenga sus opciones bien definidas. Acto seguido le aparecerá este cuadro:
Es importante que memorice los atajos de teclado para poder controlar su captura y recuerde que mientras se encuentra capturando puede pasar de un modo a otro sin ningún problema:
- Pausa: crea una única captura de pantalla.
- Shift+Pausa: comienza y detiene una captura continua basada en los parámetros de Captura basada en Tiempo.
- Alt+Pause: comienza y detiene una captura controlada según se tenga activado Clic de ratón y/o Al presionar una tecla.
Algo más ha ocurrido: en la parte inferior derecha de su pantalla a aparecido el icono de Wink:
Cuando pulse el botón Minimizar esta ventana se minimizará pero NO comenzará la captura; la prueba es que el icono de Wink permanece igual. El programa se encuentra a la espera de que usted introdúzcalas ordenes del teclado (tipo de captura). Si comienza una captura continua (Shift+Pausa), por ejemplo, el icono cambiará y aparecerá de la siguiente manera:
Se realizará una captura hasta nueva orden. Si lo que le ordena es una captura controlada (Alt+Pausa) el icono cambia de formato y parpadeará cada vez que genere un frame.:
Cuando haya terminado su captura haga doble clic en el icono de Wink para poder acceder al cuadro donde se encuentra el botón Finalizar.
Wink generará inmediatamente todas las miniaturas (Thumbnails) que componen la secuencia regresando a la interfaz inicial del programa.
PREPARANDO LAS MEDIDAS DE LOS FRAMES
Le aconsejo que si va a reducir el tamaño de todos los frames para conseguir un i-vídeo que se ajuste mejor a una página web (a un iframe , por ejemplo), lo haga ahora para que el resto de las operaciones se hagan de una manera más ligera. Debe tener en cuenta, eso sí, que esta disminución (o amplición en su caso) conllevará una operación de interpolación en la que es muy posible que se produzca cierta pérdida en la calidad de la imagen. Lo mejor, sin duda, es no tener que variar el tamaño de todo el vídeo, pero si hay que hacerlo, hágalo con la secuencia de comandos Proyect/Resize All Frames.
Wink generará inmediatamente todas las miniaturas (Thumbnails) que componen la secuencia regresando a la interfaz inicial del programa.
PREPARANDO LAS MEDIDAS DE LOS FRAMES
Le aconsejo que si va a reducir el tamaño de todos los frames para conseguir un i-vídeo que se ajuste mejor a una página web (a un iframe , por ejemplo), lo haga ahora para que el resto de las operaciones se hagan de una manera más ligera. Debe tener en cuenta, eso sí, que esta disminución (o amplición en su caso) conllevará una operación de interpolación en la que es muy posible que se produzca cierta pérdida en la calidad de la imagen. Lo mejor, sin duda, es no tener que variar el tamaño de todo el vídeo, pero si hay que hacerlo, hágalo con la secuencia de comandos Proyect/Resize All Frames.
En el cuadro que se le presenta puede elegir entre un escalado porcentual (%) o darle a Wink las medidas exactas de los frames (muy útil para ajustar a un iframe en una página web) Tenga precaución con esta última opción ya que Wink no tiene la posibilidad de "mantener proporción" y la imagen puede quedar distorsionada.
Muy útil, y que también le recomiendo hacer al principio, es la opción de guillotinar por los lados con Proyect/Crop All Fremes:
Muy útil, y que también le recomiendo hacer al principio, es la opción de guillotinar por los lados con Proyect/Crop All Fremes:
Los campos editables recortan, por este orden: izquierda, arriba, derecha, abajo.
En el ejemplo de arriba vamos a quitar los bordes de la izquierda, de la derecha y el de arriba. No eliminamos la de abajo porque es necesaria para ver una parte del i-videotutorial.
En el ejemplo de arriba vamos a quitar los bordes de la izquierda, de la derecha y el de arriba. No eliminamos la de abajo porque es necesaria para ver una parte del i-videotutorial.
PREPARAR UN FRAME_PRESENTACIÓN
Pongamos por caso que tiene usted una imagen para comenzar sus i-videopresentaciones. Para insertar ese frame inicial asegúrese de tener seleccionado el frame 1 y después haga la línea de comandos Proyecto/Insertar Frames
Pongamos por caso que tiene usted una imagen para comenzar sus i-videopresentaciones. Para insertar ese frame inicial asegúrese de tener seleccionado el frame 1 y después haga la línea de comandos Proyecto/Insertar Frames
- ¿Número de frames que quiere insertar?: 1
- ¿Copia del que tiene seleccionado o uno en blanco?: lo segundo
- ¿Antes o después del frame que tiene seleccionado?: lo primero
Ahora debemos poner (y quitar) en él todo lo necesario para la cabecera. Primero una imagen...
Para ello debe ir al cuadro Propiedades para el Frame (el 1 en este caso) y buscar la imagen después de pulsar el botón Insertar imagen
Para ello debe ir al cuadro Propiedades para el Frame (el 1 en este caso) y buscar la imagen después de pulsar el botón Insertar imagen
Una vez que haya aceptado la ruta en su explorador habitual, la imagen aparecerá en el lienzo de trabajo. Ajústela a sus necesidades de localización y tamaño. Puede insertar más de una imagen.
Se habrá fijado que en el frame hay un puntero de ratón. Para eliminarlo diríjase al mismo cuadro de Propiedades para el frame y desactive la opción Cursor. Además podrá fijarse en que desde que añadió la imagen apareció una opción llamada Imagen que le permite, igual que la de Cursor, activarla o desactivarla.
Se habrá fijado que en el frame hay un puntero de ratón. Para eliminarlo diríjase al mismo cuadro de Propiedades para el frame y desactive la opción Cursor. Además podrá fijarse en que desde que añadió la imagen apareció una opción llamada Imagen que le permite, igual que la de Cursor, activarla o desactivarla.
Este cuadro durará unos segundos antes de que aparezca un cuadro de texto explicativo sobre el i-videotutorial. Señale la duración en el cuadro de Propiedades para el frame (3 segundos en nuestro caso) Esto generará un nuevo icono junto a la de Imagen en la miniatura correspondiente al frame.
Podemos hacer una copia del frame 1. Como ya aprendió el método anteriormente no debe tener problemas. Si, como es este el caso, lo que quiere es un duplicado detrás del copiado, puede recurrir al tradicional copiar/pegar. Vamos a editar este frame.
Insertamos un cuadro de texto con el icono del cuadro Propiedades para el frame:
Insertamos un cuadro de texto con el icono del cuadro Propiedades para el frame:
En el lienzo de trabajo aparecerá un cuadro preparado para el texto. Es muy posible que no se ajuste a sus necesidades y prefiera otro diseño. Para cambiar este diseño debe ir al cuadro a la parte de opciones del cuadro Propiedades para el frame y seleccionar el icono relativo a Tipo de llamada. Esto le desplegará un nuevo cuadro con un amplio abanico de posibilidades:
Dentro de este tema sobre los diseños de las llamadas merecen atención dos detalles importantes:
- Hay una de ellas que se denomina Transparent y que le hará un cuadro con posibilidad de hacer un texto sobre un fondo transparente.
- A la derecha hay un botón con la posibilidad de Crear Nueva. Esto le desplegará un editor para que sea usted el que de rienda suelta a su creatividad para crear llamadas de texto. Ese editor formará parte de otro tutorial, debido a que sobrepasa los propósitos de este.
Nosotros para este tutorial vamos a optar por la llamada Items Heredados/3D box. Si ha desaparecido el editor de textos de la parte superior de la llamada, haga doble clic sobre el cuadro de texto y aparecerá.
Seleccione todos los elementos editables para poner el texto a su gusto. En nuestro caso...
Puede acceder a un editor de texto tradicional con el botón Elegir Fuente del cuadro Propiedades para el frame; también puede elegir el tipo de alineación para el texto con el botón Alineamiento del Texto:
Por el hecho de haber copiado anteriormente el frame 1, nuestro frame 2 tiene estipulada una duración de 3 segundos. En realidad este dato va a resultar anecdótico en este segundo frame puesto que le vamos a introducir un botón de navegación para que el i-videotutorial se detenga (el propio Wink se encargará de anular el tiempo de duración del frame) Con ello el usuario podrá dedicar el tiempo necesario a leer el texto y será él el que decida cuándo continuar.
Insertamos el botón de navegación con el icono adecuado del cuadro Propiedades para el frame. En el lienzo aparece el botón que propone Wink pero usted puede convertir en botón cualquier archivo de imagen que quiera usando el navegador que surge de presionar el botón de Seleccionar imagen. En la miniatura puede comprobar cómo Wink a eliminado el reloj del tiempo en el momento de meter el icono del botón (ambos recursos son incompatibles)
Insertamos el botón de navegación con el icono adecuado del cuadro Propiedades para el frame. En el lienzo aparece el botón que propone Wink pero usted puede convertir en botón cualquier archivo de imagen que quiera usando el navegador que surge de presionar el botón de Seleccionar imagen. En la miniatura puede comprobar cómo Wink a eliminado el reloj del tiempo en el momento de meter el icono del botón (ambos recursos son incompatibles)
A lo largo del i-videotutorial, usted debe introducir cuadros y/o imágenes explicativas y en cada uno de ellos debe introducir un botón para continuar tal y como hemos visto. También puede introducir un botón hacia atrás. Eso se traducirá en que Wink repetirá el vídeo desde la última pausa.
Por diferentes formatos de i-videotutorial es posible que al hacer la pausa usted le ofrezca al usuario la posibilidad de ir a un frame determinado en lugar de continuar el vídeo de una forma lineal. En ese caso debe introducir un botón del tipo Botón de Ir a Frame. Wink le preguntará cuál es ese frame. Es de especial utilidad para ofrecer al final del tutorial la posibilidad de volver a verlo.
PREPARANDO EL I-VIDEOTUTORIAL PARA SER PRESENTADO
Haga la línea de comando Proyecto/Ajustes. Esto le desplegará un cuadro donde podrá configurar algunos aspectos de su tutorial.
Renderice el proyecto con la línea de comandos Proyeto/Generar. Dependiendo de la longitud y tamaño de los frames, esta operación llevará más tiempo. Después sin salir de Wink puede ver cómo ha quedado con Proyecto/Ver el resultado generado.
En formato flash Wink generará dos archivos: uno en formato swf y otro en htm. Sólo tiene que colocar los dos archivos en su proyecto web.
El i-videotutorial que fue realizado para poder hacer los screenshots de este tutorial puede verlo pulsando este enlace.
Y hasta aquí el tutorial. Si consideran que está incompleto, que tiene errores o quieren aportar alguna mejora, dejen su sugerencia aquí.
Por diferentes formatos de i-videotutorial es posible que al hacer la pausa usted le ofrezca al usuario la posibilidad de ir a un frame determinado en lugar de continuar el vídeo de una forma lineal. En ese caso debe introducir un botón del tipo Botón de Ir a Frame. Wink le preguntará cuál es ese frame. Es de especial utilidad para ofrecer al final del tutorial la posibilidad de volver a verlo.
Haga la línea de comando Proyecto/Ajustes. Esto le desplegará un cuadro donde podrá configurar algunos aspectos de su tutorial.
- Ruta y nombre para guardar el archivo
- Tipo de archivo de salida: puede realizar un .exe (stand alone) o un flash (swf) nosotros optamos por el formato swf (idóneo para después alojarlo en web)
- Velocidad de los frames: haga tanteos. Yo suelo optar por una velocidad entre 12 y 16 frames.
- Movimiento del cursor: sobre todo si ha hecho capturas basadas en clics y teclas el desplazamiento del cursor debe parecer lo más real posible. Haga tanteos. Yo le recomiendo el parámetro situado más o menos a un tercio.
- ¿Quiere una barra de carga mientras el usuario espera? parece lo más apropiado. Además Wink le ofrece un pequeño menú para elegir
- Mientras el usuario vé el vídeo ¿quiere una barra que le marque la progresión, además de la posibilidad de hacer pausa...? Elija una opción de las del menú.
Renderice el proyecto con la línea de comandos Proyeto/Generar. Dependiendo de la longitud y tamaño de los frames, esta operación llevará más tiempo. Después sin salir de Wink puede ver cómo ha quedado con Proyecto/Ver el resultado generado.
En formato flash Wink generará dos archivos: uno en formato swf y otro en htm. Sólo tiene que colocar los dos archivos en su proyecto web.
El i-videotutorial que fue realizado para poder hacer los screenshots de este tutorial puede verlo pulsando este enlace.
Y hasta aquí el tutorial. Si consideran que está incompleto, que tiene errores o quieren aportar alguna mejora, dejen su sugerencia aquí.
Joaclint Istgud. Con Wink 2.0