Lección 3: Los objetos visuales de HAEduc (continuación…)

¿Listos para seguir?... en esta entrega le toca el turno al objeto Etiqueta, veamos sus características:

Etiqueta: Una línea de texto con fondo transparente y posibilidades de establecerle la fuente, el color, etc. Muy empleada para colocar títulos o explicaciones breves.

Sus propiedades específicas:

Propiedad	Significado	Valores posibles
Texto	El texto que se mostrará.	Cadena de caracteres
Color1	Color que mostrará en el estado normal.	Valor de los componentes rojo, verde y azul (RGB).
Color2	Color que mostrará en el estado over.	Valor de los componentes rojo, verde y azul (RGB).
Color3	Color que mostrará en el estado down.	Valor de los componentes rojo, verde y azul (RGB).
Fuente	Fuente a emplear.	Fuente instalada en el sistema.

La caja de valores es otro objeto disponible en la paleta de objetos de HAEduc.

Caja de valores: Le permite a los usuarios finales (los que usarán los productos elaborados con HAEduc) insertar valores a la aplicación en modo de ejecución.

Sus propiedades específicas:

Propiedad	Significado	Valores posibles
Texto	El texto que se mostrará inicialmente en la caja de valores.	Cadena de caracteres
Largo	Dimensiones en el eje x de este objeto.	Valores numéricos.
Fuente	Fuente a emplear en el texto.	Fuente instalada en el sistema.
Color de fuente	Color para el texto.	Valor de los componentes rojo, verde y azul (RGB).
Color de marco	Color para el borde de la caja.	Valor de los componentes rojo, verde y azul (RGB).
Fuente	Fuente a emplear.	Fuente instalada en el sistema.
Marco visible	Muestra u oculta el marco de la caja de valores.	True o False.

El objeto contenedor html.

Html: Este objeto permite visualizar e interactuar con ficheros con formato html. Estos ficheros pueden contener imágenes, hipervínculos, y demás elementos propios del lenguaje. Una de las características más interesantes de es este objeto es su posibilidad de interpretar no solo ficheros preexistentes en el disco, sino que además puede interpretar código html previamente almacenado en una variable del script. También es posible capturar los eventos del clic en los hipervínculos permitiendo personalizar el comportamiento de este objeto (esto es un adelanto, luego hablaremos de los eventos en HAEduc). Otro elemento importante es que este objeto puede cargar páginas web locales, de internet u otro servidor, siempre que la conexión a esta sea directa (sin proxy).

El objeto html se muestra como un rectángulo negro en modo de edición, mientras que al pasar a ejecución muestra la página que tiene cargada.

Sus propiedades específicas son:

Propiedad	Significado	Valores posibles
Fichero	El fichero que inicialmente cargará el objeto (puede omitirse si se le va a establecer por script)	Cadena de caracteres

Esta es una imagen de este objeto funcionando en ejecución:

Pasemos al objeto video.

Video: Reproductor de videos que permite visualizar películas en los formatos más comunes (mpg, avi, wmv, etc).

En modo de edición este objeto se muestra como un rectángulo de color negro, en ejecución visualiza el fichero de video cargado.

Sus propiedades específicas son:

Propiedad	Significado	Valores posibles
Fichero	El fichero de video que inicialmente cargará el objeto (puede omitirse si se le va a establecer por script)	Cadena de caracteres
Volumen	Volumen del sonido.	En porciento (0%-100%)
Estilo	El estilo de los controles nativos del reproductor.	SS_CONTROLES_NO Sin controles SS_CONTROLES_AVANCE Muestra la barra de posición SS_CONTROLES_VOLUMEN Muestra los controles de volumen SS_CONTROLES_PORDEFECTO Estado por defecto del sistema

Lección 2: Objetos visuales de HAEduc

Hola nuevamente… en esta entrega vamos a comenzar a hablar de los objetos visuales de HAEduc, analizaremos sus propiedades y principales características así como algunas sugerencias para su empleo. Comenzamos…

Trabajo con los objetos de la paleta

En la paleta de objetos podrás encontrar los 12 objetos que HAEduc permite insertar desde edición. Ellos son:

Veamos las características de cada uno de ellos. Para esto vamos a comenzar insertando en la única página de nuestro libro un objeto imagen. A continuación el procedimiento general que vamos a emplear para insertar cualquier objeto:

1. Seleccionamos el objeto en el panel de objetos.
2. Hacemos click en el lugar del proyector donde se vaya a insertar este, y sin liberar el botón del mouse, arrastramos para seleccionar un área, que se corresponderá con el tamaño del objeto a insertar.
3. Liberamos el botón del mouse.

 ¿Complejo verdad?

Bien vamos a insertar entonces el primer objeto, una imagen.

Imagen: El objeto imagen permite mostrar ficheros de imagen en el proyector, con posibilidades de reescalar la imagen, rotarla, modificar características como la opacidad, etc. Este además puede comportarse como una imagen de intercambio, al interactuar con el mouse, mostrando ora una imagen1 ora una imagen2 según sus propiedades.

Una característica interesante de este objeto se forma a partir de las áreas no transparentes del fichero de imagen empleado. Esto significa que si usamos una imagen con un área transparente esta no interactúa con el mouse, de forma tal que es posible crear áreas sensibles al ratón no necesariamente rectangulares, sino con la forma de la imagen seleccionada. Algo similar ocurre con el objeto botón, pero de eso aún no hablamos.

Al insertar una imagen aparece inmediatamente el siguiente diálogo:

En él seleccionaremos el fichero de imagen que se le va a establecer al objeto. HAEduc admite los formatos más comunes de imágenes (jpg, gif, png, bmp, etc). Una vez seleccionado el fichero aparecerá el siguiente dialogo:

En este diálogo se le indicará a HAEduc sobre las dimensiones que poseerá la imagen seleccionada. De responder Sí, el objeto imagen tomará las dimensiones originales del fichero de imagen, en otro caso, de responder No, el objeto imagen tomará las dimensiones que el usuario haya establecido en el rectángulo de selección al insertar el objeto.

Analicemos las propiedades de este objeto:

Todos los objetos que insertaremos tienen dos grupos de propiedades, las Generales que serán comunes para todos, y las Específicas, que son características propias para cada tipo de objeto. Es por ello que para no repetir vamos a explicar solo por esta vez las propiedades generales de los objetos.

 

Propiedad	Significado	Valores posibles
Nombre	El identificador de este objeto	Cadena de caracteres
x	Posición del objeto en el eje x	Valor numérico entero
y	Posición del objeto en el eje y	Valor numérico entero
Ancho	Dimensiones del objeto en el eje x	Valor numérico entero
Alto	Dimensiones del objeto en el eje y	Valor numérico entero
Bloqueado	Deshabilita el acceso al objeto mediante el mouse en modo de edición. Se emplea fundamentalmente para evitar mover accidentalmente el objeto.	True o False
Visible	Oculta el objeto para modo de edición y ejecución.	True o False
Cursor	Imagen del puntero del mouse al pasar sobre el objeto.	Constantes de cursores predeterminados por el sistema operativo: SS_PUNTERO_MANO Representa una mano SS_PUNTERO_EDICION Puntero de edición de texto SS_PUNTERO_PROHIBIDO Símbolo de prohibición SS_PUNTERO_INTERROGACION Símbolo de interrogación SS_PUNTERO_NSEO Flecha con dirección norte-sur y este-oeste SS_PUNTERO_NS Flecha con dirección norte-sur SS_PUNTERO_NOSE Flecha con dirección noroeste-sureste SS_PUNTERO_EO Flecha con dirección este-oeste SS_PUNTERO_CRUZ Símbolo en forma de cruz SS_PUNTERO_ESPERA Símbolo de espera SS_PUNTERO_FLECHAESPERA Símbolo de espera con flecha SS_PUNTERO_FLECHA Símbolo flecha (puntero normal) SS_PUNTERO_IZQUIERDO Símbolo flecha invertida SS_PUNTERO_DERECHO Símbolo flecha horizontal hacia la derecha
Opacidad	Nivel de transparencia que poseerá el objeto.	De 0 a 100
Rotación	Ángulo de rotación del objeto (en grados).	Valores numéricos

 Nota: Las propiedades cursos, opacidad y rotación no siempre están presentes en todos los objetos(p.e el objeto video).

Propiedad	Significado	Valores posibles
Imagen1	Ruta del fichero de imagen a mostrar por el objeto en su estado normal.	Cadena de caracteres
Imagen2	Ruta del fichero de imagen a mostrar por el objeto en su estado over, o estado down.	Cadena de caracteres
Tipo de imagen	Comportamiento del objeto imagen frente a la interacción del mouse.	SS_IMAGEN_NORMAL La imagen no cambia su apariencia al interactuar con el mouse. SS_IMAGEN_INTERCAMBIO_OVER El objeto cambia su imagen al situarse el mouse sobre él, ahora empleando el fichero de la propiedad imagen2. SS_IMAGEN_INTERCAMBIO_DOWN El objeto cambia su imagen al hacer un clic sobre él, intercambiando entre los ficheros de las propiedades  imagen1 e imagen2.
Rotación de colores	Realiza modificaciones en la distribución de los colores originales de una imagen, manteniendo los correspondientes a la escala de grises.	De 0 a 100, valor por defecto 50.

Ideas: 

1. Un objeto imagen puede ser impleado como botón aprovechando sus posibilidades con las transparencias de imágenes png.
2. También es posible obtener variantes visuales de una misma imagen explotrando la propiedad rotación de colores. 
3. Un objeto imagen con el diseño adecuado y mediante la opción SS_IMAGEN_ITERCAMBIO_DOWN en en su propiedad de tipo podía covertirse en los muy empleados check box o casillas de selección.
   

El próximo objeto de la paleta es el Botón.

Botón: permite crear botones con el empleo de hasta tres imágenes que representan sus tres estados (normal, over, down). Al igual que el objeto imagen este explota muy bien el empleo de transparencias mediante ficheros png, con los que se puede definir el área interactiva del mismo.

Al insertar un botón este se crea empleando una imagen que trae HAEduc por defecto, y que pude ser sustituida en una de sus propiedades.

Sus propiedades específicas son:

Propiedad	Significado	Valores posibles
Imagen1	La imagen que mostrará el botón en estado normal.	Cadena de caracteres
Imagen2	La imagen que mostrará el botón cuando tenga el puntero del mouse sobre él (estado over).	Cadena de caracteres
Imagen3	La imagen que mostrará el botón cuando se haya presionado un botón del mouse sobre él (estado down).	Cadena de caracteres
Texto	El texto que se mostrará como etiqueta del botón. Puede establecerse a vacio esta propiedad.	Cadena de caracteres
Color1	Color que mostrará el texto del botón en el estado normal.	Valor de los componentes rojo, verde y azul (RGB).
Color2	Color que mostrará el texto del botón en el estado over.	Valor de los componentes rojo, verde y azul (RGB).
Color3	Color que mostrará el texto del botón en el estado down.	Valor de los componentes rojo, verde y azul (RGB).
Fuente	Fuente a emplear en la etiqueta del botón.	Fuente instalada en el sistema.
Rotación de colores	Realiza modificaciones en la distribución de los colores originales del botón para sus tres estados, manteniendo los correspondientes a la escala de grises.	De 0 a 100, valor por defecto 50.