Practica Nro. Creando un rompecabezas

Objetivo. Crear un rompecabezas en neobook, el cual nos permitirá usar la herramienta Polígono, además de que aprenderemos a crear juegos para entretenerseSe le proporcionará los elementos necesarios en una carpeta de trabajo denominado Rompecabezas

1. Creación y Configuración del Libro

Creamos una nueva página, de 640 x 480.

Configurando libroVamos al menú Libro > Propiedades del Libro > General … (o presionamos la tecla F6),En la categoría General: Título: Rompecabezas

Autor: Escriba su nombreIcono: haga clic en Otro, esto para seleccionar un ícono para su aplicación

En la ventana Seleccionar un icono.Seleccione VR.ico, y haga clic en Abrir

Ahora ya tenemos un icono que se mostrara cuando ejecutemos o compilemos nuestro proyecto en la barra de tareasTerminamos la configuración del libro haciendo clic en Aceptar

2. Configurando la páginaRenombramos el nombre de la primera página, le colocamos el nombre de Rompecabezas Clic derecho sobre la pestaña de la páginaLuego elegimos la opción renombrar página…

En la ventana cambiamos el nombre anterior por el de Rompecabezas

(Ojo no la página maestra, además cabe indicar que no se puede renombrar)

Presionamos la tecla F5En la ventana de propiedades.1) Colocamos el título de Rompecabezas2) En fondo de página, hacemos clic en la pestaña de la lista desplegable Color Sólido

para elegir un color3) Hacemos clic en el botón Personalizar…4) En la ventana Color, ingresamos los siguientes valore en los recuadros de colores

Rojo: 255Verde: 128Azul: 50

Hacemos clic en Aceptar, otra vez en Aceptar, con lo cual tenemos nuestra página con un color.

3. Creando el área del RompecabezasEl área donde se va tener nuestro rompecabezas será un rectángulo de fondo blanco, para ello…Dibuje un rectángulo de 330 de Ancho y 250 de Alto

1

2

3

4

Entonces tomamos la herramienta rectángulo , luego trazamos el rectángulo en la parte media y superior de la página

Para poder ajustar las dimensiones del rectángulo, lo hacemos en el Panel de información del Objeto. Ingresando las siguientes medidas

Izquierda 172 y Superior 34Para que haga efecto los cambios o ajustes hacer clic en Aplicar

Cambie el fondo del rectángulo sea de color Blanco ¿ya sabe como?

Izquierda

Superior

Ancho

Alto

4. Formando el rompecabezas

Tomamos la herramienta Poligono / Zona InteractivaHacemos un clic dentro del rectángulo blanco, (o cualquier otro lugar dentro de la página) y nos aparece la ventana Seleccione un archivo de imagenElija la imagen de nombre Imagen1.gif

Haga clic en Abrir

Nos parece la imagen dentro del rectángulo (no importa exactamente el lugar)

Arrastre la imagen a la parte superior izquierda del rectángulo

Y deberá de quedar en el lugar como se muestra a continuación

O puede ingresar los siguientes valores en el panel de Información del ObjetoIzquierda: 137 Superior:95Al finalizar hacemos clic en Aplicar

Además observe que aparecen 6 marcadores, estos marcadores nos indican que están exactamente en la esquina del rectángulo blanco

Ahora haga los mismos procedimientos anteriores para insertar las siguientes imágenes y poder formar la fotografía de la cabeza de un gato

Imagen9.gif

Imagen2.gif

Imagen6.gif

Imagen8.gif

Imagen5.gif

Imagen1.gif

Imagen7.gif

Imagen4.gif

5. Dibujando los contenedores (en nuestro caso rectángulos de las mismas dimensiones da cada una de los Polígonos)Deberán de fijarse en las dimensiones y ubicaciones de cada una de las imágenesPara ver que dimensiones tiene el Polígono, hacemos clic en la primera imagen que insertamos, observaremos que tiene las siguientes características

Izquierda: 173 Superior: 35 Ancho: 137 Alto: 95

Ahora trazaremos por encima del primer Polígono o imagen un rectángulo de las mismas dimensiones, para ello…Seleccionamos la herramienta rectánguloY lo dibujamos por encima de la primera imagen (primer polígono)

Escribimos las mismas dimensiones y ubicación que de seguro se acuerda del polígono1, en el panel de Información del Objeto

Luego deberá de quitarle el color de fondo volviéndolo transparente, esta operación lo realiza en el panel patrón para el relleno elegimos la opción Hueco

6. Le cambiamos el nombre del rectángulo, la cual nos servirá para poder identificar el contenedor del primer Polígono en nuestro rompecabezas.Entonces, hacemos doble clic en el recuadro, En su ventana de Propiedades del Rectángulo en Nombre de Objeto escriba ArribaIzquierda

Y luego AceptamosY tenemos nuestro rectángulo que nos permitirá contener la primera imagen

Hacemos los mismos procedimientos para las demás imágenes:

Segundo rectánguloIzquierda: 260 Superior: 33 Ancho: 149 Alto: 100Nombre del Objeto: ArribaMedio

Tercer rectánguloIzquierda: 368 Superior: 31 Ancho: 132 Alto: 103Nombre del Objeto: ArribaDerecha

Cuarto rectánguloIzquierda: 174 Superior: 95 Ancho: 135 Alto: 117Nombre del Objeto: MedioIzquierdo

Quinto rectánguloIzquierda: 257 Superior: 100 Ancho: 154 Alto: 112Nombre del Objeto: MedioCentro

Sexto rectánguloIzquierda: 365 Superior: 100 Ancho: 137 Alto: 119Nombre del Objeto: MedioDerecha

Sétimo rectánguloIzquierda: 172 Superior: 176 Ancho: 128 Alto: 105Nombre del Objeto: AbajoIzquierda

Octavo rectánguloIzquierda: 255 Superior: 178 Ancho: 155 Alto: 103Nombre del Objeto: AbajoMedio

Noveno rectánguloIzquierda: 363 Superior: 180 Ancho: 136 Alto: 103Nombre del Objeto: AbajoIzquierda

Al final obtendremos nuestra imagen por completo.

Como hemos insertado rectángulos por encima de los polígonos, no podemos mover los polígonos, por lo tanto tenemos que enviarlo al fondo y también esconderlosPor lo tanto…Nos ubicamos en el panel de la lista de objetos.Seleccionamos todos los rectángulos, arrastramos con el puntero del ratón desde ArribaIzquierda hasta AbajoDrecha

Como observará se muestra en la página todos los rectángulos seleccionados

Ahora hacemos clic derecho sobre los nombres de los rectángulos..Del menú emergente, elegimos la opción Enviar al fondo

Hacemos una vez más clic derecho en la selección, y del menú desplegable, elegir la Opción Ocultar objeto.

7. Configurando las imágenes del rompecabezasAhora se puede elegir cada una de los polígonos ya que enviamos al fondo todos los rectángulosAhora, Como se fijará cada imagen que se ha insertado dentro del rectángulo grande tienen el nombre de Polígono1, Polígono2,…, Etc.Elegimos el primer Polígono, haciendo clic en ella

Abrimos su ventana de propiedades, haciendo doble clic sobre la mismaSeleccionamos la categoría Arrastrar & Soltar, en la opción Modo Arrastrar & Soltar, marcamos Automático

Seguidamente hacemos clic en AñadirDe la lista de objetos que se muestran, elegimos aquella que tiene de nombre ArribaIzquierda

Al hacer clic automáticamente se agrega el nombre del rectángulo que actuará de contenedor de nuestro primer polígono (esto se observará al arrastrar el objeto polígono cuando ejecutemos la aplicación)

Recordar que también deberá de marcar la casilla Traer el objeto al frente después de soltarlo

8. Insertando código en el PolígonoAhora seleccionamos la categoría Acciones, luego hacemos clic en la pestaña Arrastrar y Soltar, en ella digite el siguiente código

En este código estamos estableciendo una variable que nos permitirá arrastrar nuestro objeto y poder soltarlo dentro del rectángulo contenedor, luego…Hacemos clic en Aceptar

Realizamos los mismos procedimientos para los siguientes PolígonosLos códigos serán los mismos para todos (en la pestaña Arrastrar y Soltar)También deberemos de marcar la casilla de Traer el objeto al frente después de soltarloEn donde cambia es en el Modo Arrastrar y Soltar, en cuanto al nombre del rectángulo contenedor,…PARA EL…

Polígono2:

Polígono3:

Polígono4:

Polígono5:

Polígono6:

Polígono7:

Polígono8:

Polígono9:

9. Desordenando los polígonos de nuestro rompecabezasUna vez terminadoUbique cada uno de los Polígonos (imágenes), por fuera del rectángulo grande, todas en forma desordenada

Ahora pruebe su aplicación