Tutorial Cocodrile Ict

Tutorial Crocodile ICT

Traducido y adaptado: José Manuel Ruiz Gutiérrez

1

Curso Modelado y Simulación.


José Manuel Ruiz Gutiérrez

Indice

Tutoriales de Diagramas de Flujo

Creando y mostrando un diagrama de flujo

Creando y usando una función

Recogiendo y enviando propiedades de un objeto

Usando el bloque 'On button press'

Tutoriales de los objetos “Character”

Construcción de una rutina de danza

Programación de textos

Tutoriales de Presentaciones

Creación de una animación

Tutoriales Contextuales

Configurando una aplicación

Usando varias escenas



2

Tutorial – Creando y mostrando un diagrama de flujo

Watch movie

Instrucciones

En este ejemplo veremos un sencillo ejemplo de un diagrama de flujo con un bucle.

1.Desde el panel Parts, arrastrar el bloque start.

2.Desde el panel Parts, arrastrar el bloque set variable. Dejarlo justamente debajo del bloque start (el pequeño cuadrado del terminal se pondrá en color negro al conectarlo con la salida del bloque start, en ese momento soltar el botón del ratón y ambos bloques quedan unidos).

3. Arrastrar el bloque increment variable y conectarlo directamente con el bloque set variable (utiliza el mismo procedimiento de conexión de bloques que ya hemos explicado).

4.Arrastrar el bloque test variable y conectarlo con el bloque set variable.

5.En el bloque test variable , haz clic en '0'. Esto te permitirá editar el valor.



3

Cámbialo a '10' y de esa manera el valor a testear ahora será 10.

6.Arrastra el bloque stop y conéctalo directamente con la salida 'Y' del bloque test variable.

7. Ahora marca con el cursor la salida 'N' del bloque test variable. Cuando la conexión se ponga en color negro eso indica que si dejas de pulsar el botón del ratón queda conectado

8.La conexión se deber realizar en la entrada del bloque increment variable

9.Haz clic en el botón del bloque start y observa como funciona el bucle realizando 10 ciclos y parando después.

10. Arrastra un objeto monitor box al área de trabajo. Este objeto te permite realizar el trazado de la ejecución del programa observando el valor de las variables del programa. También desde este objeto puedes variar la velocidad de ejecución de la aplicación.

11. Pon ahora la escena en modo de ejecución rápido mediante el objeto monitor box. Observa que ya son se ve el flujo de ejecución debido a la rapidez.

12. Presiona el botón run de nuevo. El diagrama de flujo se ejecuta pero no se percibe el movimiento.

13. Ahora pon el diagrama de flujo en modo pausa haciendo uso del objeto monitor box. Cuando ejecutes el programa deberás ir pulsando el botón step e ira ejecutándose paso a paso.

14. Arranca el diagrama de flujo y usando el botón step observa como se va ejecutando el programa y como va cambiando la variable x.



4

Tutorial – Creando y usando una función

Instrucciones

Construiremos una función que calculará la distancia entre el chico y la chica cada vez que sea invocada.

1.Arrastrar los objetos boy character y girl character del panel de librerías

2.Arrastrar un bloque function de la librería Flowcharts > Start and Stop Haz clic en el nombre y editalo cambiandolo por 'dist'.

3.Arrastra dos bloques get property de la librería Flowcharts > Inputs and Outputs y conectarlos uno debajo del otro debajo del bloque function .

4.Editar el bloque get property y hacer que la posicion X de girl sea almacenada en la variable girlX y la posición X del boy sea almacenada en la variable boyX. (Previamente debes conectar los bloques con cada uno de los objetos boy



5

character y girl character ).

5.Arrastrar un bloque set variable desde el panel Flowcharts > Processes y conectarlo al ultimo bloque.

6.Ahora es necesario calcular la diferencia entre las dos posiciones X Editaremos y colocaremos la expresión:

abs(boyX-girlX)

Esta expresión usa la función abs() para calcular la distancia entre los dos objetos, devolviendo un numero positivo. (Observa que los nombres de las variable son sensibles a las mayúsculas y minúsculas.)

7.Escribir esta expresión en el lado derecho de de la línea que aparece en el bloque set variable , de esta manera este valor será evaluado y asociado al valor de la variable x.

8.Para terminar la función debes seleccionar un bloque return que se encarga de cerrar el proceso. Selecciona las propiedades del bloque y en el panel elige devolver una expresión. En la caja de edición de expresión debes poner x . De esta manera el resultado de la función será devuelto cuando la función sea ejecutada.

9.Para probar que la función funciona construye el siguiente diagrama de flujo.

El diagrama utiliza un bloque start , un bloque set property y un bloque stop part. Arrastra un objeto spinbox de la libreria Pesentation, selecciona en el panel de sus propiedades 'Display Label'. Escribir una etiqueta. Finalmente unir el bloque set property con el objeto spinbox (y selecciona que enlace con la propiedad Value).

10. Ahora ejecuta el diagrama de flujo que acabas de construir y en el objeto



6

spinbox aparecerá el valor de distancia en pixels entre ambos objetos Chica y Chico

11. Mover los objetos chico y chico y comprobar como varia el valor de la distancia mostrada en la caja spinbox.



7

Tutorial – Recogiendo y enviando propiedades de un objeto

Instrucciones

En este tutorial vamos a realizar un sencillo diagrama de flujo que chequeará el estado de un sensor (interruptor) y enviará un 1 o un 0 a una alarma de humo cuya imagen también figura en la pantalla junto con la imagen del sensor (cacerola). El interruptor sensor (objeto tipo button) esta formado por dos imágenes, mientras que la alarma es un objeto animation formado también por dos imágenes.

1. Desde el panel Parts (Presentation > Context Parts > House (inside)) arrastra a



8

la escena un objeto tipo button pan y una animation smoke alarm..

2. Desde el panel Parts, añade un bloque start (libreria Flowchart->Start and Stop)

3. Necesitaremos chequear el valor del objeto button (que podrá ser on u off) y este valor a su vez activará o desactivará la alarma animation smoke alarm. Arrastra un bloque del tipo get property (recoge propiedad) desde el panel Parts y conéctalo directamente con el bloque start.

4. Asocia el bloque get property con el objeto Pan simplemente haciendo clic en 'Property' y conectando con el objeto pan seleccionando después la propiedad 'Value'.del bloque get property haciendo de esta manera que se almacene el valor de la variable x. seleccionando

5. La propiedad 'value' de un botón es de tipo Booleano, es decir es TRUE cuando el valor está presionado y FALSE cuando no está presionado. Así pues cuando el botón está presionado simulamos que hay fuego (y la imagen que muestra el objeto pan es de fuego), arrastra al área de trabajo un bloque test variable y conéctalo directamente a la salida del bloque set variable .

6. Ahora debemos cambiar el valor '0' del bloque test variable por el valor ’TRUE’. (Asegurándonos de que las letras son mayúsculas de lo contrario daría un error al ejecutarse el programa)

7. Si el valor de x no es TRUE, se deberá saltar de nuevo para preguntar el estado del botón y mientras que no sea presionado este siempre estará preguntándose por el valor de x (bucle cerrado en torno al bloque) por lo tanto la salida 'N' debe conectarse a la entrada del bloque test variable.

8. Si el valor de x es TRUE, entonces se deberá poner el estado de la alarma en modo activo (imagen 2 de la animación). (Si seleccionas la propiedades de la animación fire alarm veras que en el panel Properties la imagen segunda es precisamente la que muestra la alarma activada smoke_alarm_on.png.) Ahora debes conectar el bloque set property con la salida 'Y' del bloque test variable .

9. Asocia el bloque set property con la animación smoke alarm y en particular con la propiedad 'Current frame' . Coloca el valor '2' (lo que equivale a la segunda imagen de la animación), para ello basta que hagas clic en el '0' del bloque set property y lo cambies por '2'.

10. Añade un bloque delay desde el panel Parts y conéctalo directamente con el bloque set property .

11. Añade un nuevo bloque set property a la escena y conéctalo directamente con la salida del bloque delay. De la misma forma que hiciste con el anterior bloque conéctalo con el objeto fire alarm y selecciona la propiedad 'Current frame' poniendo el valor 1 al numero de imagen.



9

12. Añade un bloque stop y conéctalo directamente con la salida del bloque último set property .

13. Ahora arranca la simulación del diagrama de flujo. Haz clic en el botón pan para cambiar el estado y simular que se produce un incendio, la animación smoke alarm se activará durante cinco segundos y el programa finalizará.



10

Tutorial – Usando el bloque 'On button press'

Instrucciones

Vamos a crear un ejemplo que muestre las posibilidades de enviar y recibir valores entre dos o más diagramas de flujo en un mismo panel.

1.Arrastra dos objetos text boxes (cajas de texto) y sitúalos a cierta distancia en el área de trabajo.

2.Arrastra un objeto button y colócalo justo debajo de la caja de texto de la izquierda.

3.Cuando éste botón sea presionado queremos almacenar el texto que aparece en



11

la caja de la izquierda en una variable. Usaremos ahora un bloque on button press que asociaremos al botón que acabamos de dejar debajo de la caja de texto, de esta manera cuando pulsemos el botón se ejecutará el diagrama de flujo que se encarga de enviar el texto Send” .

4.Realizar la conexión del bloque on button press con el objeto button.

5.Añadir un bloque get property y conectarlo directamente al bloque on button press.

6.Asociar el bloque get property con la propiedad 'Text' del objeto text box de la izquierda.

7.De esta manera se almacena el texto que escribamos en la caja de texto de la izquierda en la variable x. A continuación debemos enviar el valor de la variable x para lo cual añadiremos un bloque send que conectamos directamente al bloque anterior get property .

8.Añade un bloque stop part y conéctalo al bloque send .

9.Ahora construiremos el segundo diagrama de flujo debajo del bloque de texto de la derecha añadiendo los siguientes bloques que conectaremos entre ellos:

� Start

� Receive

� Set property

10. Asocia el bloque set property con la caja de texto text box de la derecha y selecciona la propiedad 'Text' .

11. Ahora enlaza la salida del bloque set property con la entrada del bloque receive.

12. Ahora todo esta dispuesto para que puedas arrancar la simulación de tu modelo:

1. Arranca el segundo diagrama de flujo

2. Escribe un mensaje de texto en la caja de la izquierda.

3. Presiona el botón.

Tu mensaje aparecerá en la caja de texto de la derecha.



12

Tutorial – Construcción de una rutina de danza

Watch movie

Instrucciones

1. En la barra de herramientas haz clic sobre propiedades de escena

2. En el panel Properties en la derecha se puede ver un menú de las propiedades de escena. Selecciona 'General'.

3. En la sección Background selecciona y haz clic en el botón '+' para añadir una imagen de fondo de pantalla y selecciona una de las que aparecen en la lista.



13

4. Ahora arrastra un objeto boy de la librería Characters en el panel Parts

5. Haciendo clic con el botón derecho estando sobre el objeto se accede al menú contextual en el que seleccionamos 'Show pop-up'.

6. Ahora arrastramos dentro de la ventana que se acaba de abrir un bloque button press (de la librería Flowcharts > Start and Stop) y tres bloques call action (de la librería Flowcharts > Processes ), conectando estos tal como se muestra en la figura.

7. Los bloques call action quedan asociados al objeto boy . Si no quedarán asociados se realiza la asociación hacienda clic con el ratón moviendo y soltando sobre el objeto boy

8. En el primer bloque call action , selecciona la acción 'Ducking and diving #'. El símbolo que aparece después del nombre de la acción indica que la acción finaliza en una pose no estándar. Debemos asegurarnos de que la próxima acción comienza con la misma postura (y por consiguiente el mismo símbolo).

9. En el Segundo bloque call action , selecciona la acción '# Flair'.

10. En el tercer bloque call action , selecciona la acción 'Kneeling swivel'.

11. Como queremos esconder la venta pop-up para que no interfiera con la simulación debemos colocar un botón externo. Arrastra un objeto button de la librería Presentation en el panel Parts y ponlo en la escena (tal como se ve en la figura).

12. Ahora enlaza el bloque de control on button press con el botón que acabas de poner en la escena.

13. Cierra la ventana pop-up y presiona el botón para iniciar el baile.

14. (Nota: el borde alrededor del button solo aparece cuando este se mueva. Para ocultar el borde seleccionar la opción lock y dentro e ella marcar position



14

Tutorial – Programación de textos

Watch movie

Instrucciones

En este ejemplo construiremos un entorno que permite ser usado como un modelo de guía para el usuario. Se utilizará un objeto character que proveerá de instrucciones al usuario.

Observa que este ejemplo se encuentra en el panel Models (Examples > Character models > Avatar) si quieres verlo trabajar.



15

1.Arrastra un objeto character.

2.Selecciónalo y elige en la sección de propiedades la propiedad Speech que por defecto trae el texto 'Hello!

3.En el panel Properties , chequea la opción 'Show speech in-scene'.

4.Ahora arrastra un button de la carpeta de librerías Presentation y ponlo tal como se muestra en la figura (abajo y a la izquierda de la caja). Selecciona en su panel Properties e inserta la imagen forward.png para cada una de sus posiciones (las imágenes están en la carpeta 'Example images' ).

5.Haz clic con el botón derecho estando sobre el botón y selecciona Lock y position para que no se vea el cerco punteado alrededor del botón.

6.Haz clic con el boton derecho sobre el objeto character y accede a 'Show pop-up'.

7.Se abrirá una ventana asociada al objeto dentro de la cual colocaremos los siguientes objetos.

8.Arrastra y conecta los siguientes bloques de función que constituirán el diagrama de flujo:

� On button press

� Set variable

� Call action

� Test

� Call action

� Stop

9. Arrastra un objeto scene variables , añadiéndolo dentro de la ventana.

10. Selecciona scene variables y abre su panel Properties, haz clic en '+' para añadir nuevas variables a la escena.

11. Haz doble clic en la palabra 'Variable' para editar el nombre de la variable. Haz doble clic en 'Initial Value' para editar el valor de la variable. Añade las siguientes variables y sus valores iniciales:

Variable name Initial value stage 0

speech[1] Text of your choosing. See picture above



16

for suggestion. Make sure that you enclose your text in quotation marks: " ".

speech[2] Text of your choosing. See picture above for suggestion. Make sure that you enclose your text in quotation marks: " ".



Observar que speech es una variable tipo map.

12. Enlazar el botón con el bloque on press part.

13 Editar el bloque set variable y hacer que el valor stage se igual a stage + 1.

14 El bloque call action debe estar asociado automáticamente con el bloque character. Selecciona la acción Talk action en el primer bloque call action .

15. Ahora selecciona el mismo bloque call action y en la sección Parameters del panel selecciona el parámetro 'Speech' haciendo clic sobre el. Darle a este parámetro el valor speech[stage] (observa que no hay espacio en la cadena speech[stage]).

16. Edita la condición test en el bloque test part hacienda clic en el item,. Selecciona la condición de test:

stage = 4 ?

17. Selecciona la acción Clapping en el Segundo bloque call action.

16. Ahora graba el modelo (File > Save as...).

17. Prueba el modelo hacienda clic en el botón.

18. Usa este modelo como base para otros modelos en los que quieras usar una guía de usuario.

19. Para ampliar el modelo probara:

� Añadir un botón que ejecute hacia atrás las instrucciones

Ocuparse de los casos en los que la variable stage exceda el número de instrucciones



17

Tutorial – Creación de una animación

Semáforo

Instrucciones

El siguiente ejemplo muestra como realizar una animación de un semáforo.

1. Localiza o crea las imágenes que se requieren para realizar la aplicación. Se requieren cinco imágenes: rojo, rojo + ámbar, verde, ámbar, y negro y rojo.

Con el programa se incluye una colección de imágenes pero tu podrás crear las que necesites.

2. Haz clic en el objeto animation que pertenece al grupo de objetos Presentation y abre su panel de propiedades que aparece en la parte izquierda de la pantalla.

3. Presiona el boton '+' y añade la primera imagen de la animación.

4. Selecciona la imagen red light del lugar en donde estén almacenadas en tu ordenador

5. Repite los pasos (3) y (4) para el reto de imágenes. Ten en cuenta que la imagen final debe ser la misma que la primera para que la secuencia se lleva a cabo bien.

6. Seleccionar la opción Frame navigation en el panel de propiedades del objeto animación y seleccionar la opción Play in loop > play continuously .

7. La animación se ha completado y podrás ver como funciona.



18

Tutorial – Configurando una aplicación



19

Watch movie

Instrucciones

1.Este modelo muestra un simple ascensor. Una persona en el tercer piso de un edificio llama el ascensor y viaja al quinto piso.

2.Presiona en el botón propiedades de Scene de la barra de botones y abre la sección General del menú desplegable de popiedades

3.Abrir la sección Background (fondo de pantalla)

4.Presionar el botón '+' y de la carpeta de 'Backgrounds' selecciona la imagen 'Lift.png'. esta imagen aparecerá en el centro de la escena.

5.Del panel Parts (carpeta Presentation) arrastra un objeto animation. Selecciona animation y abre el panel menú de propiedades .

6.Presiona el botón '+' en la sección Frames y de la carpeta 'Images' selecciona la imagen "Lift_door_0.png". De esta se define la primera imagen de la animación.

7.Repetir la misma operación para añadir las siete imágenes que compondrán la animación ("Lift_door_0.png" a "Lift_door_6.png").

8.Coloca la animación justo tapando la puerta del ascensor de la imagen de fondo.

9.Arrastra un Segundo objeto animation y usa el mismo método para crear la barra indicadora de numero de piso que deberá figurar sobre la puerta usando las imágenes "Lift_floor_1.png" a "Lift_floor_5.png".

10. Coloca la animación arriba de la puerta la puerta.

11. Del panel Parts (Presentation) arrastra un objeto button. Selecciona y abre el panel de propiedades.

12. Haz clic en el objeto frames y presiona el botón '+' button en la sección Details.

13. Selecciona la imagen "Lift_up_blank.png" de la carpeta de imágenes para las opciones up-image y hover-image. (estas serán las imágenes que aparecerán en el botón cuando esté sin acercar el ratón y sin pulsar sobre el.

14. Repetir para la imagen down-image, seleccionando esta vez la imagen "Lift_up_green.png" (esta será la imagen que aparecerá en el botón cuando se



20

pulse sobre el).

15. Coloca el botón sobre el botón de la imagen de fondo del ascensor.

16. Selecciona los objetos animations y button, abre el panel Locking (botón derecho del ratón estando sobre el objeto) y marca lock y señala position en cada uno de ellos.. (de esta manera no se verá el contorno punteado del objeto)

17. Construye el siguiente diagrama de flujo:

18. Usa la opción de enlazar para asociar el objeto on button press asociándolo con el bloque on button press del comienzo del diagrama Going up que acabas de crear.

19. En el resto del diagrama de flujo asociar:

� Los dos primeros bloques set property con la animación que indica el numero de piso

� Los siguientes dos bloques get property y el siguiente set property con la animación de apertura de puerta



21

� El Segundo bloque set property con la animación de indicador de piso

19. La construcción está completa.

20. Haz clic en el botón de llamada de ascensor y observar el funcionamiento.



22

Tutorial – Usando varias escenas

Watch movie

Instrucciones

1.Iniciar un nuevo modelo.

2.Haz doble clic en la pestaña Scene1 y cambia el nombre por 'Introduction'.

3.Haz lo mismo con las pestañas scenes 2 y 3, cambiándole los nombre por 'Content' y 'Conclusion' respectivamente.



23

4.Haz clic en la pestaña Introduction y activa su escena.

5.Pulsa en el botón propiedades de la escena en la parte izquierda de la pantalla y selecciona la lista de propiedades correspondiente a General

6.Abre la sección Details y selecciona el tamaño de la escena a 500 de alto por 500 de ancho (pixels).

7.Selecciona la opción Background y selecciona el color azul de la paleta de colores que se ofrece.

8.Haz lo mismo con la escenas Content y Conclusion.

9.Selecciona la escena Introduction y arrastra a ella un objeto picture del menú Parts (Presentation).

10. Selecciona el objeto, ve a la ventana de propiedades y pulsa el boton '+' . De la carpeta 'Example images' selecciona el fichero 'forward.png'.

11. Abrir el panel Advanced y configurar la acción Mouse click asociándola a Opens scene > Content (en este caso al dar al botón se abrirá la escena cuyo nombre es Content).

12. Mover la imagen a la posición de la esquina inferior de la escena, abrir el panel Locking y seleccionar lock .

13. Abrir la escena Content y crear dos imágenes similares, atrás y adelante, en el mismo lugar. Configurar estos botones para que al pulsarlos se vaya a las escenas Introduction Conclusion respectivamente.

14. Repetir con la escena Conclusion, creando una imagen que al seleccionarla se salta a la escena Content.

15. Añadir contenidos a las escenas y presionar el botón m-model para ocultar el editor.

16. Usa los controles de navegación para crear movimientos entre las escenas.

Tutorial Cocodrile Ict

Documents

Transcript of Tutorial Cocodrile Ict