Contenido

Elementos con Hype

Con los Elementos en Hype podemos interactuar con la animación, normalmente los botones son los que principalmente se utilizan para la interacción, pero también podemos convertir cualquier elemento en un botón.


En elementos tenemos: Texto, Botón, Botón con textura, Imagen Video, Audio, Widget HTML, Rectángulo, Rectángulo redondeado y Elipse.

071a

Estos elementos los podemos editar desde casi todas las funciones del Inspector como: Medidas, Elemento, Tipografía, Acciones, Física e Identidad, pero claro unos son específicos para cada uno como el de Tipografía.

Vamos a verlos de forma general:

Texto

Para agregar el texto podemos ir a Elementos->Texto o simplemente con la tecla “t” nos aparece un recuadro que podemos editar desde el Inspector->Tipografía. Desde ahí podemos modificar el Tipo de letra, Tamaño, Alineación, Sombra, etc.

071b

 

Botones

Tenemos dos tipos de botones, uno con un solo color y otro con degradado que se puede editar desde el Inspector->Elemento. Desde ahí mismo se pueden editar mucho más cosas como: Borde, Visibilidad, Efectos de Filtro, etc.

071c

 

Imagen

Las imágenes las podemos agregar desde Elementos->Imagen o simplemente arrastrarla a Hype. Para modificar su tamaño podemos hacerlo directamente desde uno de los círculos en las esquinas o en uno de sus lados; también la podemos editar haciendo clic en la tecla “cmd” y una de las esquinas para poderla rotar. Si queremos un poco más de opciones también desde Inspector->Medidas lo podemos hacer.

071d

 

Video

El Video igual que las imágenes lo podemos agregar desde Elementos->Imagen o simplemente arrastrarlo a Hype.

Cuando lo seleccionamos y vamos al Inspector->Elemento, podemos editar cosas específicas del video como: Propiedades (Reproducción Automática, Controles, Silenciado y Bucle) y Fondo. También podemos editar todo lo demás igual que cualquier Elemento como: Borde, Sombra, etc.

071e

 

Audio

El audio se puede editar igual que todos los otros elementos, pero para las acciones específicas como reproducir audio se editan desde el Inspector->Acciones. Ahí le podemos decir al botón que comience a reproducir o que se detenga.

071f

 

Widget HTML

Este elemento es como tener una ventana dentro de nuestro proyecto que nos permite agregar cualquier información por medio de un iframe. Puede ser información de una página web o de un servicio como un video de youtube por medio de “HTML incrustado” y “URL especificada”.

071g

 

HTML incrustado

Este se usa cuando se quiere agregar un servicio externo como YouTube, Google Maps y muchos otros servicios que dan este soporte.
Un ejemplo de este código sería:
<iframe width=»100%» height=»360″ src=»https://www.youtube.com/embed/LP89rGLXCPE» frameborder=»0″ allowfullscreen></iframe>
El cual se puede copiar directamente desde YouTube.

071h

 

URL especificada

Con esta opción es muy sencillo agregar cualquier cosa que esté en internet como un Recorrido Virtual o una Página Web Completa.
Un ejemplo sería agregar la liga:
http://digital-editorial.com/recorridos360/CdMxCorreos.html en URL especificada e inmeditatmente lo podemos ver reflejado en Hype. Una vez hecho esto simplemente tenemos que ajustar el tamaño del Widget.

071i

 

Figuras

Por último tenemos Rectángulo, Rectángulo redondeado y Elipse, la verdad no le veo la ventaja de tener el Rectángulo redondeado porque al Rectángulo se le pueden redondear las esquinas desde Inspector->Elemento->Borde->Radio, pero ahí lo tenemos.

 

Recursos

Desde Recursos podemos ver todos los elementos como imágenes, video y audio que hemos agregado a Hype. Para mostrar y ocultar esta barra le hacemos clic en el ícono de Recursos que se encuentra a un lado del botón de Inspector.

071j

Escrito por Sergio Vázquez

Hola, soy el creador de digital-editorial, donde me especializo en Publicación Digital en áreas como: elaboración de eBooks, Desarrollo Web y Cursos en Línea.