Saltar la navegación

JClic. Creación de actividades

PortadaEnlace a portada del curso

Módulo 2

El generador de formas

Las piezas de los puzzles pueden tener diferentes formas: piezas rectangulares, o bien con encajes que pueden ser ovalados, rectangulares o triangulares. También se pueden definir otras formas recortando partes de la imagen.

Piezas rectangulares
Piezas con unión ovalada
Piezas con unión rectangular

Rectangulares
(vienen dados por defecto)

Encajes con unión ovalada Encajes con unión rectangular

 

Piezas con unión triangular
Recortes
Encajes con unión triangular
Recortes

Las formas de las piezas se establecen con el generador de formas, escogiendo desde el menú de Selección del tipo de generador de formas del panel uno de los 5 tipos de encajes.

Cuadro selector del generador de formas

Por defecto viene definido el rectangular, que no tiene ninguna opción por configurar. Este tipo de generador de formas es el más adecuado para puzzles de intercambio o de agujero.

Por defecto viene definido el rectangular, que no tiene ninguna opción por configurar. Este tipo de generador de formas es el más adecuado para puzzles de intercambio o de agujero.

A los encajes con uniones ovalada, rectangular y triangular se puede ajustar la forma de las piezas activando la ventana Propiedades del generador de formas con el botón Botón de Propiedades del generador de formas.

Cuadro de propiedades del generador de formas

Desde esta ventana se pueden determinar la altura y la anchura de los dientes y establecer si se quiere o no la opción de distribución aleatoria. Si esta casilla no está marcada, la forma de las piezas es la misma en todas las actividades, según unos patrones establecidos. Si está marcada la posición de los dientes se combina aleatoriamente dando piezas de formas diferentes.

Un caso aparte es el tipo de generador de formas llamado Recortes. Esta herramienta permite definir piezas con diversas formas. Pueden ser formas geométricas predefinidas (rectángulos y elipses), pero también permite dibujar polígonos y transformar las líneas rectas de éstos en curvas.

Esta herramienta permite, por ejemplo, recorrer áreas concretas de una imagen para convertirlas en piezas de una actividad. También dispone de herramientas de edición para copiar, enganchar, girar o contraer y expandir.

Cuadro propiedades del apartado de recortes

En este documento se ha hablado del generador de formas en relación a los puzzles, pero también se puede utilizar en actividades de asociación, exploración, identificación o información.

 

Ejercicio 11: Creación de un puzzle doble a partir de una imagen

El objetivo de este ejercicio es crear una de las actividades más sencillas de JClic: un puzzle de modalidad doble basado en una imagen.

Para hacer esta práctica necesitarás el archivo pez.jpg que se encuentra en la carpeta archivos del material del curso.

Inicia el programa JClic autor, ve al menú Archivo|Nuevo proyecto... y, en el apartado Nombre del Proyecto, escribe modulo2 (todo junto y sin acento). Verás que en Nombre del archivo aparece el mismo nombre; déjalo como está.

En Carpeta donde dejar el proyecto, el programa habrá puesto C:\Archivos de programa\JClic\projects\modulo2 en MS-Windows, o $home/JClic/projects/modulo2 en otros sistemas. Deja el nombre del archivo y la carpeta tal como propone el programa.

Confirma con Aceptar.

Ve a la pestaña Mediateca y haz clic sobre el botón Botón añadir Objeto Mediateca para añadir una nueva imagen.

Selecciona el archivo pez.jpg, que es la imagen que utilizarás para el puzzle y que se encuentra en la carpeta archivos. Confirma con Abrir. La imagen aparece en la galería.

Ve ahora a la pestaña Actividades y haz clic sobre el botón Botón añadir actividad para añadir una nueva actividad al proyecto.

Se abre una ventana donde te pide el nombre y el tipo de la actividad nueva.

En el listado del tipo de actividades selecciona puzzle doble. En la casilla Nombre de la actividad escribe puzzle1.

Confirma con el botón Aceptar.

Selección de puzzle doble

Ve a la pestaña Panel, la última de las pestañas inferiores. Esta pestaña muestra el contenido del panel; desde aquí construirás el rompecabezas.

pestaña de panel

Haz clic en el botón Imagen Botón Imagen . Se abre una ventana donde se muestran las imágenes que tienes en la mediateca.

Selecciona la imagen pez.jpg, que en estos momentos es la única que hay, y confirma la operación con el botón Aceptar.

Cuadro de selección de objeto multimedia

Ahora indica el número de filas y columnas que quieres que tenga el puzzle. Lo puedes hacer cambiando los números en las casillas con los botones +/- o bien seleccionando el número y escribiéndolo directamente.

Selección del número de filas y columnas

En este caso indica 3 filas y 4 columnas.

El tamaño del panel y las casillas, al trabajar con una imagen definida en el panel, se ajusta automáticamente al tamaño de la imagen seleccionada. Si cambias el tamaño el resultado puede deformar la imagen. Por lo tanto, déjala como está.

Para cambiarla se hace con las casillas de anchura y altura de las casillas que se encuentran en la parte inferior de las de número de filas y columnas y que funcionan de la misma manera.

El paso siguiente es seleccionar el tipo de forma que quieres que tengan las piezas del rompecabezas.

Desplega el menú de Selección del tipo de generador de formas del panel haciendo clic sobre la flecha de la derecha.

Cuadro selector del generador de formas

Ve seleccionando los diferentes tipos de encajes y observa los resultados (JClic da 5 posibilidades). Deja seleccionada la opción Encajes con unión ovalada.

Haz clic sobre el botón Botón de Propiedades del generador de formas que hay a la derecha del menú de Selección del tipo de generador de formas del panel. Se abre una ventana donde se pueden modificar las propiedades del generador de formas que has escogido.

Modifica la altura y la anchura de los dientes. Para hacerlo desplaza las flechas de altura y anchura hacia la derecha o hacia la izquierda y observa en la Vista preliminar cómo van cambiando. Una vez has conseguido la forma deseada confirma con el botón Aceptar.

Propiedades del generador de formas

Ahora escribiremos mensajes en la actividad. Para ello iremos a la pestaña Mensajes y, de la misma manera que hicimos en el ejercicio 9, escribimos un mensaje inicial que puede ser:

Ordena las piezas de este rompecabezas

y uno final que aparezca al resolver la actividad: ¡Muy bien!

Modifica las propiedades de los mensajes (tipo de letra, tamaño y color de la letra, sombra, fondo), de manera que quede parecido al modelo que hay más abajo.

Sólo hay que cambiar los colores de las ventanas (principal y de juego) tal como lo has hecho en la práctica 3 del módulo 1.

Prueba el funcionamiento de la actividad en la ventana de pruebas con el botón [1-051.png] [ALT:Botón Probar Actividad].

La actividad tiene que quedar parecida a ésta:

Resultado del puzzle doble

Cierra la ventana de pruebas y guarda los cambios del proyecto.

Una vez realizado el puzzle con imágenes, veremos el modo de realizar otro con contenido de texto.

Ejercicio 12: Creación de un puzzle de intercambio con contenido textual

El objetivo de esta práctica es crear un puzzle de modalidad de intercambio en que el contenido de las casillas es texto y que hay que ordenar para formar una frase, en este caso una definición.

Pon en marcha JClic autor, ve al menú Archivo|Abrir el archivo y escoge el proyecto modulo2.JClic.zip que se encuentra en la carpeta C:\Archivos de programa\JClic\projects\modulo2 en MS-Windows, o $home/JClic/projects/modulo2 en otros sistemas.

Confirma con Abrir.

Ve a la pestaña Actividades y haz clic sobre el botón Botón añadir actividad para añadir una nueva actividad al proyecto.

En el listado de tipos de actividades selecciona puzzle de intercambio. En la casilla Nombre escribe el nombre de la actividad: puzzle2. Confirma con el botón Aceptar.

Ve a la pestaña Panel.

Modifica el número de filas y columnas que quieres que tenga el puzzle y la anchura y la altura de ambas, haciendo que tengan los siguientes valores:

Configuración de filas y columnas

Recuerda que se puede hacer subiendo o bajando con los botones +/- o seleccionando el número de la casilla y escribiéndolo directamente.

Las casillas también se pueden redimensionar situando el ratón en uno de los bordes del panel y, al aparecer una doble flecha, estirarlo hasta que tenga el tamaño deseado.

Ahora sitúate en el panel y haz clic sobre la primera casilla para empezar a introducir el texto que formará el puzzle.

En la ventana Contenido de la casilla, haz clic dentro del espacio para escribir el texto y escribe el primer trozo del texto del puzzle: Omnívoro y confirma con Aceptar.

Haz lo mismo para cada una de las 6 casillas del puzzle, escribiendo en cada una el fragmento de texto correspondiente. El texto que tienes que escribir es: Omnívoro: / Animal que / consume indistintamente / materia de origen / animal / y vegetal

Haz clic sobre el botón Estilo del panel y da formado al texto: tipo de letra Verdana, tamaño 16 y color azul (RGB: 51, 0, 153).

Establece el color amarillo (RGB: 204, 255, 153) como color de fondo de las casillas.

Confirma con Aceptar.

Estos cambios, hechos del botón de estilo del panel, afectan a todas las casillas.

Pulsa sobre la primera casilla para darle un formato diferente a las otras.

Con el botón Estilo de la ventana de contenido de la casilla accederás a las herramientas para modificar el estilo de la casilla seleccionada. Haz que el texto sea Verdana, tamaño 17, negrita, de color negro, y el fondo de la casilla de color naranja (RGB: 255, 153, 102).

Desmarca la casilla Borde a fin de que la separación entre las piezas del puzzle no sea visible.

Ve a la pestaña Mensajes y escribe y configura un mensaje inicial: Ordena esta definición
y uno final: ¡Correcto!

Modifica las propiedades de los mensajes y de las ventanas a fin de que la actividad sea similar al modelo.

Aspecto final del ejercicio

Comprueba el funcionamiento de la actividad en la ventana de pruebas con el botón Botón Probar Actividad .

Cierra la ventana de pruebas y guarda el proyecto.

 

Lo siguiente que haremos será cambiar la modalidad de una actividad que ya esté creada. Lógicamente, esta posibilidad viene matizada por el hecho de que la actividad anterior y la nueva sean compatibles.

 

Ejercicio 13: Cambiar el tipo de actividad creada

El objetivo de este ejercicio es ver cuál es el procedimiento para cambiar la modalidad de una actividad ya creada, en este caso un puzzle de intercambio, por un puzzle de otro tipo.

Ponemos en marcha JClic autor y abrimos el proyecto modulo2.JClic.zip.

En la pestaña Actividades, en la columna de la izquierda, selecciona la actividad puzzle2, que acabas de crear en el ejercicio 12.

Sitúate en la pestaña Opciones. Lo primero que encuentras es el tipo de actividad, en este caso puzzles.ExchangePuzzle, que corresponde al módulo Java que controla los puzzles de intercambio.

Una vez creada la actividad se puede dar el caso de que quieras cambiar de modalidad, o simplemente que quieras probar diferentes antes de decidirte por una.

Haz clic sobre el botón que hay al lado del tipo de actividad para cambiar el tipo.

Botón de tipo de actividad

Se abre una ventana donde se muestra el listado de los tipos de actividades en que puedes transformar de manera automática la que tienes seleccionada.

Cuadro de cambiar tipo de actividad

Pero fíjate que en la parte superior de la ventana hay un mensaje de advertencia. Tienes que utilizar esta utilidad con cuidado ya que el paso de un tipo de actividad a otra puede comportar la pérdida de objetos y atributos de la actividad que se está editando y te puedes encontrar que, después del cambio, no funcione como esperabas, o simplemente que no funcione.

Cambia la actividad puzzle2 por otro tipo de puzzle, por ejemplo, selecciona Puzzle de agujero.

Comprueba el funcionamiento de la actividad en la ventana de pruebas con el botón Botón Probar Actividad .

Cierra la ventana de pruebas, para volver a JClic autor.

Haz cambios por otros tipos de actividades. Ve probando el funcionamiento de cada uno de los cambios.

Fíjate que no ocasiona ningún problema si se cambia la actividad puzzle2, que es un puzzle de intercambio, por un puzzle de agujero o doble. También se puede transformar esta actividad concreta en una pantalla de información. Otros cambios, sin embargo, hacen que la actividad no funcione correctamente o que necesite hacer modificaciones en el panel.

Cierra la ventana de pruebas y JClic autor, en este caso sin guardar los cambios. Cuando el programa pregunte si quieres guardar los cambios haz clic en el botón NO.

 

El objetivo del siguiente ejercicio será crear un puzzle de modalidad doble con las piezas definidas con la opción Recortes del generador de formas.

 

Ejercicio 14: El generador de formas: recortes

Para hacer esta práctica necesitaremos los archivos casa.jpg y fondocasa.jpg que se encuentra en la carpeta archivos del material del curso.

Pon en marcha JClic autor y abre el proyecto modulo2.JClic.zip.

Ve a la pestaña Mediateca y, con el botón Botón Añadir Objeto Mediateca , añade los recursos casa.jpg y fondocasa.jpg

Ve ahora a la pestaña Actividades y haz clic sobre el botón Botón añadir actividad para añadir una nueva actividad al proyecto del tipo Puzzle doble; nómbrala puzzle3.

Activa la pestaña Panel. Haz clic en el botón Imagen Botón Imagen y, de las imágenes que tienes en la mediateca, selecciona casa.jpg. Confirma la operación con el botón Aceptar.

Despliega el menú Selección del tipo de generador de formas del panel y selecciona el tipo Recortes.

Este tipo de generador de formas es diferente a los otros.

En el ejercicio 11 trabajamos con la opción Encajes con unión ovalada, que tiene las mismas opciones y sigue el mismo procedimiento que los encajes con unión rectangular y triangular. La opción Recortes es un caso aparte. Aquí trabajarás con algunas herramientas básicas.

Una vez seleccionada la opción Recortes fíjate que en el panel la imagen ha dejado de estar dividida en piezas. Las piezas del puzzle las tienes que crear desde la ventana de Propiedades del generador de formas.

Haz clic sobre el botón Botón de Propiedades del generador de formas que hay a la derecha del menú Selección del tipo de generador de formas del panel para acceder.

Propiedades del generador de formas. Recortes

Esta ventana contiene las herramientas para recortar las formas de la imagen que se convertirán en piezas del puzzle.

Selecciona la herramienta para dibujar círculos Herramienta para dibujar círculos . Dibuja uno que coincida con la pieza redonda de la imagen.

Una vez dibujada se puede ajustar el tamaño estirando los puntos que la delimitan. También se puede mover arrastrándola con el ratón.

Hacer coincidir elipse con pieza

Una vez dibujado el primer recorte fíjate que en la columna de la derecha aparece el número 0. Este número corresponde al primer recorte que has hecho. Aparecerá un número para cada recorte y para trabajarlos posteriormente los tendrás que seleccionar desde aquí. El recorte seleccionado se verá de color azul y los puntos que lo delimitan estarán marcados con cuadrados mayores.

Escoge ahora la herramienta para dibujar rectángulos Herramienta para dibujar rectángulos y dibuja un recorte que coincida con una de las piezas cuadradas y otro con una rectangular. Ajústalos de la misma manera que la redonda.

Selecciona la herramienta para dibujar polígonos Herramienta para dibujar polígonos . Repasa la forma de una de las piezas triangulares. Ajústala de la misma manera que los anteriores.

Con esta misma herramienta haz un recorte que se ajuste a la pieza que tiene forma de un cuarto de círculo.

  • Dibuja un triángulo.

  • Selecciona el lado que tiene que ser redondo y haz clic sobre la herramienta Herramienta para convertir rectas en curvas que te ayudará a convertir la recta en curva.

  • Estira el cuadrado negro que ha aparecido en la recta hasta que tenga la forma deseada.

Adaptar triángulo a cuarto de círculo.1
Adaptar triángulo a cuarto de círculo.2
Adaptar triángulo a cuarto de círculo.3

 

Una vez dibujados los 5 recortes confirmamos con Aceptar y volvemos al panel donde tenemos la imagen con los recortes, es decir las piezas del puzzle, definidos.

Comprueba la actividad con el botón Botón Probar Actividad .

Cierra la ventana de pruebas para volver a JClic autor.

Haz clic sobre el botón Estilo del panel y haz que el Color de estado inactivo sea blanco.

Marca la opción Borde del panel y desde la ventana de Estilo aumenta un poco el grueso, a fin de que las piezas queden más delimitadas.

Aumentar el grosor del borde

Ve a la pestaña Ventana. Haz que el color de fondo de la ventana de juego también sea blanco. De esta manera se verán las piezas que has recortado pero no la forma de los recortes en el panel B.

Haz clic en el botón Imagen de la ventana principal y selecciona fondocasa.jpg. Marca la opción En mosaico y, de esta manera, la imagen se repetirá hasta rellenar toda la ventana principal.

Si quieres puedes poner mensajes.

El aspecto de la actividad tiene que ser parecido a éste.

Aspecto final del ejercicio

Vuelve a comprobar el funcionamiento de la actividad desde la ventana de pruebas con el botón Botón Probar Actividad .
Cierra la ventana de pruebas y guarda el proyecto.