4 dic. 2009

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.






    2 comentarios:

    1. Saludos una pregunta haeduc reproduce animaciones gif? ya que tengo una y no la anima

      ResponderEliminar
    2. No, solo si estas estan en una pagina web y la mustras con el objeto html

      ResponderEliminar