hipertexto y animaciÓn dr. alejandro padilla díaz · 2012. 2. 17. · hipermedia e hipertexto el...

HIPERTEXTO Y ANIMACIÓN Dr. Alejandro Padilla Díaz

DR. ALEJANDRO PADILLA DIAZ NUEVAS TECNOLOGIAS

HIPERMEDIA E HIPERTEXTO

HIPERTXTO

En informática, es el nombre que recibe el texto que en la pantalla de un dispositivo electrónico, permite conducir a otros textos relacionados, pulsando con el ratón en ciertas zonas sensibles y destacadas. La forma más habitual de hipertexto en informática es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos (lexias). Si el usuario selecciona un hipervínculo el programa muestra el documento enlazado. Otra forma de hipertexto es el strechtext que consiste en dos indicadores o aceleradores y una pantalla.



http://es.wikipedia.org/wiki/Hiperv%C3%ADnculo

http://es.wikipedia.org/wiki/Lexia

http://es.wikipedia.org/wiki/Usuario

http://es.wikipedia.org/wiki/Programa_(computaci%C3%B3n)

El primer indicador permite que lo escrito pueda moverse de arriba hacia abajo en la pantalla. Es importante mencionar que el hipertexto no está limitado a datos textuales, podemos encontrar dibujos del elemento especificado, sonido o vídeo referido al tema. El programa que se usa para leer los documentos de hipertexto se llama “navegador”, el "browser", "visualizador" o "cliente" y cuando seguimos un enlace decimos que estamos navegando por la Web.

El hipertexto es una de las formas de la hipermedia, enfocada en diseñar, escribir y redactar texto en una media.

También se puede utilizar animación con FLASH y otros apoyos rápídos.



http://es.wikipedia.org/wiki/Hipermedia

http://es.wikipedia.org/wiki/Medios_de_comunicaci%C3%B3n_de_masas

Principios de Hipertexto e Hipervínculos

La palabra hipervínculo aparece por primera vez en el artículo No more teachers's dirty looks, de Ted Nelson en referencia a un sistema en el que los archivos de texto, voz, imágenes y vídeo pudieran interactuar con los lectores. Anteriormente, en 1945, Vannevar Bush propuso un sistema con características parecidas al que llamó memex en su artículo As We May Think, publicado en el número de julio de 1945 de la revista yorgelis moreno.



http://www.mrl.nyu.edu/~noah/nmr/book_samples/nmr-21-nelson.pdf









http://es.wikipedia.org/wiki/Ted_Nelson



http://es.wikipedia.org/wiki/Vannevar_Bush



http://es.wikipedia.org/wiki/Memex

http://es.wikipedia.org/wiki/1945

Principios de Hipertexto e Hipervínculos

En el artículo anterior hablaba de la necesidad de máquinas de procesamiento de información mecánicamente conectadas para ayudar a los científicos a procesar la gran cantidad de información que se había generado por los esfuerzos en la investigación y el desarrollo durante la Segunda Guerra Mundial, cuyo fin ya se veía cercano. En el año 1960, Douglas Engelbart y Ted Nelson, desarrollaron un programa de computador que pudiera implementar las nociones de hipermedia e hipertexto. En los años ochenta, después de que comenzaran a crearse las primeras computadores personales, IBM lanzó el sistema de guía y enlace para sus computadoras, mientras que Macintosh desarrolló la Intermedia y la HyperCard



http://es.wikipedia.org/wiki/Segunda_Guerra_Mundial





http://es.wikipedia.org/wiki/1960

http://es.wikipedia.org/wiki/Douglas_Engelbart



http://es.wikipedia.org/wiki/Hipermedia

http://es.wikipedia.org/wiki/HyperCard

Procesamiento de Hipertexto e Hipermedia

El hombre es capaz de relacionar conceptos de la misma manera que se logra en un hipertexto, no lo hace necesariamente de manera lineal, por lo tanto, podemos decir que el pensamiento humano como tal se logra de una manera hipertextual.

Lo complicado radica en plasmar esta hipertextualidad en un formato lineal como lo es un libro, ya que este formato no te permite jugar con la espacialidad de la información, la mente es como este gran hipertexto en el cual la información se encuentra en varios nodos y por medio de búsquedas relacionadas y vínculos somos capaces de llegar a la información que queremos.

DR. ALEJANDRO PADILLA DIAZ

NUEVAS TECNOLOGIAS HIPERMEDIA E HIPERTEXTO

Hipermedia y Multimedia

Multimedia es la combinación o utilización de dos o más medios de forma concurrente. El término multimedia sigue siendo confuso pues todavía no ha sido bien definido y sus límites resultan difusos. Si a finales de la década de los 70, multimedia era la integración de voz, texto, datos y gráficos, en los 90 a estos elementos se suman los gráficos interactivos, las imágenes en movimiento, las secuencias de audio yvídeo, las imágenes en tres dimensiones, la composición de documentos digitales y la realidad virtual. En principio, la cualidad multimedial no está restringida a la informática: un libro acompañado de una casete de audio es una obra multimedial, sin embargo, poco a poco, el término multimedia se ha ido generalizando para referirse a la informática y al mundo digital.



http://www.hipertexto.info/documentos/texto.htm

http://www.hipertexto.info/documentos/imagen.htm









http://www.hipertexto.info/documentos/audio.htm

http://www.hipertexto.info/documentos/video.htm








http://www.hipertexto.info/documentos/document.htm



http://www.hipertexto.info/documentos/iconic.htm



http://www.hipertexto.info/documentos/tecnologia.htm

http://www.hipertexto.info/documentos/digital.htm


Xabier Berenguer en su artículo Escribir programas interactivos dice:

"Un sistema multimedia está constituido por un conjunto de informaciones representadas en múltiples materias expresivas: texto, sonido e imágenes estáticas y en movimiento, y codificadas digitalmente, registradas en un soporte cerrado u off line, como por ejemplo el CD-ROM o el DVD".

Este mismo autor afirma que los sistemas multimediáticos pueden tildarse de "unimediáticos", entendiendo que todas las materias expresivas se reducen a bits de información.








Para Aedo, Díaz y Montero en De la multimedia a la hipermedia, multimedia consiste en integrar diferentes medios bajo una presentación interactiva, lo que proporciona una gran riqueza en los tipos de datos, dotando de mayor flexibilidad a la expresión de la información. Diferentes textos, imágenes y otros tipos de contenidos se van secuenciando de una forma dinámica.




CONCLUSIONES DE HIPERMEDIA E HIPERTEXTO

El World Web Consortium habla de hipertexto multimedia en Hypertext Terms y lo define de la siguiente forma:

"Hipermedia e hipertexto tienden a usarse uno en lugar del otro. Media no es más que texto que incluye gráficos, sonido y vídeo.

De igual forma, los teóricos del modelo de Dexter, esto es, los teóricos que diseñaron un modelo estándar para describir la arquitectura y las características del hipertexto y cuya terminología se considera estándar en el campo del hipertexto, no diferencian entre hipertexto e hipermedia.

En esta sentido amplio, incluyendo cualquier morfología de la información (texto, imágenes, audio, vídeo, otros recursos audiovisuales, etc.), todo esto se puede concebir para los enfoques EDUCATIVOS y TECNOLÓGICOS.



http://www.w3.org/

http://www.w3.org/

http://www.w3.org/

http://www.w3.org/

http://www.w3.org/

http://www.hipertexto.info/documentos/arquitec.htm





http://www.hipertexto.info/documentos/morfologias.htm

http://www.hipertexto.info/documentos/texto.htm


http://www.hipertexto.info/documentos/audio.htm

http://www.hipertexto.info/documentos/video.htm

http://www.hipertexto.info/documentos/audiovisuales.htm



HIPERMEDIA CON FLASH

El entorno de trabajo de Flash.

Herramientas de dibujo: El lápiz; rectas, óvalos y rectangulos; la pluma I y la pluma II

Retoque de formas: La flecha, enderezar y suavizar, optimizar curvas, borrado, modificar formas, ajuste y encaje, color.

Animación: Movimiento, Tamaño, Ejemplo de animación, Formas y Consejos de formas.



HIPERMEDIA CON FLASH

Botones: Botones y Acciones.

Flash medio: Movie Clips, Papel Cebolla y Máscaras.

Imágenes: Importar, Trazar mapas y Separar.

Sonido: Importación WAV MP3 y Compresión ADPCM.



El entorno de trabajo de Flash

Stage

Linea de tiempo y los frames

Layer



El entorno de trabajo de Flash

Paleta de herramientas



Herramientas de dibujo

El lápiz

Rectas, óvalos y rectangulos

La pluma



Herramientas de dibujo: El lápiz

Para dibujar líneas y formas, se utiliza la herramienta Lápiz, de manera muy similar a como se emplea un lápiz real para realizar un dibujo.



Herramientas de dibujo: El lápiz

Para dibujar con la herramienta Lápiz: Seleccione la herramienta Lápiz.

Seleccione un estilo y color de trazo.

Seleccione un modo de dibujo de las opciones de la caja de herramientas:

Seleccione Enderezar para dibujar líneas rectas y convertir figuras similares a triángulos, óvalos, círculos, rectángulos y cuadrados en estas formas geométricas.

Seleccione Suavizar para dibujar curvas suaves.

Seleccione Tinta para dibujar líneas a mano alzada sin aplicarles ninguna modificación. Líneas dibujadas con los modos Enderezar, Suavizar y Tinta.



Herramientas de dibujo: Rectas, óvalos y rectángulos

Las herramientas Línea, Óvalo y Rectángulo permiten crear fácilmente las formas geométricas habituales.

Las herramientas Óvalo y Rectángulo crean tanto formas rellenas como formas sólo definidas por el trazo.

Puede utilizar la herramienta Rectángulo para crear rectángulos con esquinas rectas o redondeadas.



Herramientas de dibujo: Rectas, óvalos y rectángulos

Para dibujar líneas rectas,óvalos o rectángulos: Seleccione las herramientas Línea, Óvalo o Rectángulo.

Seleccione los atributos de trazo y relleno. No es posible establecer

atributos de relleno para la herramienta Línea.

En la herramienta Rectángulo, haga clic en el modificador Rectángulo redondeado para especificar que desea esquinas redondeadas e indique el valor del radio del ángulo. Si el valor es cero, las esquinas son rectas.

Arrastre sobre el Escenario. Si está utilizando la herramienta Rectángulo, presione las teclas de dirección hacia arriba o abajo para ajustar el radio de la esquina redondeada. Con las herramientas Óvalo y Rectángulo, arrastre con Mayús presionada para crear sólo círculos y cuadrados. Con la herramienta Línea, arrastre con Mayús presionada para dibujar sólo líneas en ángulos múltiplos de 45 .



Herramientas de dibujo: La pluma

Para dibujar trazados precisos como líneas rectas o bien como

suaves curvas fluidas, puede utilizar la herramienta Pluma.

Puede crear segmentos de líneas rectas o curvas, y ajustar el ángulo y la longitud de los segmentos rectos, así como la pendiente de los segmentos curvos. Al dibujar con la herramienta Pluma, puede hacer clic para crear puntos en los segmentos de las líneas rectas o bien hacer clic y arrastrar para crear puntos en los segmentos de las líneas curvas.

Puede ajustar los segmentos de las líneas curvas y rectas ajustando los puntos de las líneas. Puede convertir líneas curvas en líneas rectas y viceversa. También puede mostrar los puntos de las líneas creadas con otras herramientas de dibujo de Flash, como las herramientas Lápiz, Pincel, Línea, Óvalo o Rectángulo, para ajustar estas líneas.



Establecimiento de las preferencias de la Pluma Para establecer las preferencias de la herramienta Pluma: Seleccione Edición > Preferencias y haga clic en la ficha Edición.

En Herramienta Pluma, establezca las siguientes opciones:

Seleccione Mostrar previsualización de pluma para ver una previsualización de los

segmentos de línea conforme va dibujando.

Seleccione Mostrar puntos sólidos para especificar que los puntos de anclaje no seleccionados aparezcan como puntos sólidos y que los puntos de anclaje seleccionados aparezcan como puntos huecos.

Seleccione Mostrar cursores de precisión para especificar que el puntero de la herramienta Pluma aparezca como una cruz, en lugar del icono predeterminado de la herramienta Pluma, para poder colocar así las líneas con mayor precisión.

Haga clic en Aceptar.



Dibujar rectas con la herramienta pluma

Para dibujar rectas con la herramienta Pluma:

Seleccione la herramienta Pluma. Seleccione los atributos de trazo y relleno.

Coloque el puntero en el Escenario, en el inicio de la línea recta y haga clic

para definir el primer punto de anclaje.

Vuelva a hacer clic para indicar dónde desea que termine el primer segmento de la línea recta. Haga Mayús-clic para limitar la herramienta a los ángulos múltiplos de 45 .

Siga haciendo clic para crear más segmentos rectos.



Dibujar rectas con la herramienta pluma

Para terminar el trazado como una forma abierta o cerrada, utilice uno de los siguientes procedimientos:

Para terminar un trazado abierto, haga doble clic en el último punto, haga clic en

la herramienta Pluma de la caja de herramientas o bien haga Control-clic (Windows) o Comando-clic (Macintosh) lejos del trazado.

Para cerrar un trazado, coloque la herramienta Pluma sobre el primer punto de anclaje. Al colocar correctamente la herramienta, aparecerá un pequeño bucle cerca de la punta de la pluma. Haga clic o arrastre para cerrar el trazado.

Para terminar la forma tal cual, seleccionando Edición > Anular selección de todo o bien elija otra herramienta de la caja de herramientas.



Retoque de formas: La flecha

Para remodelar una línea o el contorno de una forma, puede arrastrar cualquier punto de la línea mediante la herramienta Flecha. El puntero cambia para indicar el tipo de modificación que se puede realizar en la línea o relleno.

Flash ajusta la curva del segmento de línea para acomodarla a la posición del punto desplazado. Si se trata de un extremo, puede alargar o acortar la línea. Si se trata de un ángulo, los segmentos que lo forman se mantienen rectos al alargarse o acortarse.



Retoque de formas: Enderezar y suavizar

El enderezamiento hace los pequeños ajustes necesarios a las líneas y las curvas ya dibujadas. No tiene ningún efecto sobre los segmentos rectos.

Puede utilizar la técnica de enderezamiento para que Flash reconozca las formas. Si dibuja cualquier forma ovalada, rectangular o triangular con la opción Reconocer formas desactivada, puede utilizar la opción Enderezar para hacer las formas geométricamente perfectas.

Pero no reconoce las formas que se tocan y están conectadas con otros elementos.



Retoque de formas: Optimizar curvas

Otra forma de suavizar curvas es optimizarlas. Esto refina las líneas curvas y los contornos de relleno reduciendo el número de curvas utilizadas para definirlos.

Para optimizar curvas: Seleccione los elementos dibujados que desea optimizar y elija Modificar >

Optimizar. En el cuadro de diálogo Optimizar curvas, arrastre el control deslizante

Suavizar para especificar el grado de suavizado. Los resultados exactos dependen de las curvas seleccionadas. En general, la optimización reduce el número de curvas y el resultado es menos similar al contorno original.

Establezca las opciones adicionales: Seleccione Utilizar varias pasadas para repetir el proceso de suavizado hasta que

no pueda realizarse otra optimización; esto es lo mismo que elegir varias veces Optimizar con los mismos elementos seleccionados.

Active Mostrar mensaje con valores totales para visualizar un cuadro de alerta que indique el alcance de la optimización una vez finalizado el suavizado.

Haga clic en Aceptar.



Retoque de formas: Borrado

La herramienta Borrador permite eliminar trazos y rellenos. Puede borrar todo el Escenario con rapidez, borrar los diferentes segmentos de trazos o áreas rellenas, o borrar por arrastre.

Personalice la herramienta Borrador para borrar sólo trazos, sólo áreas rellenas o sólo una única área rellena. El borrador puede ser redondo o cuadrado y hay cinco tamaños disponibles.



Borrar con rapidez el escenario

Haga doble clic en la herramienta Borrador.



Eliminar segmentos de trazos o áreas rellenas

Seleccione la herramienta Borrador ( ) y, a continuación, haga clic en el modificador Grifo ( ).

Haga clic en el segmento de trazo o el área rellena que desea borrar.



Borrar por arrastre

Seleccione la herramienta Borrador. Haga clic en el modificador Modo Borrador y seleccione un

modo de borrado: Borrar normal borra trazos y rellenos de la misma capa. Borrar rellenos sólo borra rellenos, sin afectar a los trazos. Borrar líneas sólo borra los trazos, sin afectar a los rellenos. Borrar rellenos seleccionados sólo borra los rellenos

actualmente seleccionados y no afecta a los trazos, estén seleccionados o no. (Seleccione los rellenos que desea borrar antes de utilizar la herramienta Borrador en este modo).

Borrar dentro sólo borra el relleno en el que se ha iniciado el trazo de borrador. Si el punto de inicio de borrado está vacío, no se borra nada. Este modo no afecta a los trazos.

Haga clic en el modificador Forma de borrador y seleccione el tamaño y la forma del borrador. Asegúrese de no seleccionar el modificador Grifo.

Arrastre sobre el Escenario.



Retoque de formas: Modificar formas

Puede modificar las formas convirtiendo líneas en rellenos, expandiendo la forma de un objeto relleno o suavizando los bordes de una forma rellena modificando las curvas que la definen. La función Líneas a rellenos transforma las líneas en rellenos, lo que permite rellenar las líneas con degradados o borrar parte de una línea.

Las funciones Expandir forma y Suavizar bordes permite expandir formas rellenas y hacer borrosos los bordes de las formas. Estas funciones trabajan mejor con formas pequeñas que no contengan demasiados detalles pequeños.

Si se aplica Suavizar bordes a formas con numerosos

detalles, es posible que aumente el tamaño del archivo de una película para Flash Player.




Convertir líneas en rellenos Seleccione una o varias líneas. Seleccione Modificar > Forma > Convertir líneas en rellenos. Las

líneas seleccionadas se convertirán en formas rellenas. La conversión de líneas a rellenos incrementa el tamaño de los

archivos, pero también puede acelerar el dibujo de algunas animaciones.

Expandir la forma de un objeto relleno Seleccione una forma rellena. Este comando funciona de forma

óptima con formas rellenas de un sólo color sin trazo. Seleccione Modificar > Forma > Expandir relleno. En el cuadro de diálogo Expandir trazados, introduzca un valor en

píxeles para la distancia y seleccione la dirección Expandir o Contraer. Expandir agranda la forma y Dimensiones la reduce.




Suavizar los bordes de un objeto

Seleccione una forma rellena. Este comando funciona de forma óptima con formas con un sólo relleno sin trazo.

Seleccione Modificar > Forma > Suavizar bordes de relleno.

Establezca las siguientes opciones: Distancia es la anchura en píxeles del borde suavizado. Número de escenarios controla la cantidad de curvas utilizadas para el

efecto de suavizado de borde. Un mayor número de etapas produce un efecto más suave pero incrementa el tamaño del archivo y hace más lento su dibujo.

Expandir o Contraer controla si la forma se amplía o reduce al

suavizar los bordes.



Retoque de formas: Ajuste y encaje

Para alinear automáticamente elementos entre sí, es posible utilizar el ajuste. Se puede activar la función de ajuste mediante el modificador Ajuste de la herramienta o con el comando Ajustar a objetos del menú Ver. También puede ajustar a la cuadrícula o a las guías.

Al activar el modificador Ajustar de la herramienta Flecha, aparece un pequeño anillo negro bajo el puntero cuando se arrastra un elemento. Este anillo aumenta de tamaño cuando el objeto está dentro de la distancia de ajuste de una línea de la cuadrícula.



Retoque de formas: Color



Retoque de formas: Color

Color y layers



Ejercicio 1a

Ayuda: Dibuja primero las formas SIN RELLENO, SÓLO

CONTORNOS. Para dibujar las sobras, la del tronco, por ejemplo,

usa la Línea... así cerramos un relleno que podemos colorear de otro color (un marrón más oscuro)



Ayuda para el Ejercicio 1a



Ejercicio 1b

Ayuda: Dibuja primero las formas SIN RELLENO, SÓLO

CONTORNOS. Parte de las herramientas de Forma. Para dibujar las sobras, la del tronco, por ejemplo,

usa la Línea... así cerramos un relleno que podemos colorear de otro color (un marrón más oscuro)



Ayuda para el Ejercicio 1b



Ejercicio 1c



Ejercicio 2

Ayuda: Para realizar este dibujo te resultará más fácil si primero

haces sólo los contornos, y una vez que lo tengas todo dibujado rellenes de color.

Todas las formas están hechas modificando con el puntero óvalos y rectángulos y con la herramienta lápiz.

Los degradados que presenta el dibujo, se realizan manualmente.



Ejercicio 3. Rellenos Pon un color azul de fondo a la película. (propiedades de la

película) Configura la cuadrícula desde Ver > Cuadrícula> Editar

Cuadrícula



Ejercicio 3. Rellenos

Ayuda: Dibuja primero todas las formas (SÓLO RELLENO) ajustándolas a la

cuadrícula Con la herramienta del Encajar (el Imán) te será muy sencillo.

No intentes reproducir los colores exactos de los degradados, ya que para este ejercicio es más importante reproducir la sensación de degradado tal y como se ha conseguido en el ejemplo.

Tener en cuenta que algún degradado está formado por más de dos colores, otros tienen colores transparentes, y otros están modificados con la opción de Transformar Relleno de la herramienta Cubo de Pintura.



Ejercicio 4

Ayuda: Para realizar este dibujo te resultará más fácil si primero

haces sólo los contornos, y una vez que lo tengas todo dibujado rellenes de color.

Todas las formas están hechas modificando con el puntero óvalos y rectángulos y con la herramienta lápiz.

Hay zonas como el cuello y los coloretes que están pintados con degradados.



Ejercicio 4

Ayuda: Realiza primero los contornos utilizando las herramientas de dibujo y

selección, para luego rellenar del color deseado. Utiliza colores degradados para las ruedas y degradados con transparencia

para los cristales. Es mejor que dibujes primero el coche y por último el "conductor".

La dificultad de esta ilustración reside en la posición del "conductor" con respecto al coche. Para resolverlo, lo único que debes hacer es dibujarlo en una capa diferente y por debajo de la capa del coche.

La realización de este ejercicio nos servirá para en temas posteriores utilizar la ilustración con otros fines.



Fotogramas

Fotograma

Fotograma clave

Fotograma vacio

Fotograma clave vacio



Animación

Por animación entenderemos que los objetos que aparecen en la pantalla cambien de posición, tamaño, aspecto, color, que giren, se deformen, etc.

En Flash existen tres tipos de animación: fotograma a fotograma

interpolación de movimiento

interpolación de forma



Animación: Fotograma a fotograma

En la animación fotograma a fotograma, debemos dibujar cada uno de los fotogramas de la animación uno por uno, al estilo de las clásicas películas de dibujos animados. Permite una gran flexibilidad, pero a costa de un elevado esfuerzo.



Animación: Interpolación

Consiste en crear dos objetos diferentes, cada uno de ellos en fotogramas claves no contiguos, y hacer que Flash dibuje automáticamente los pasos intermedios.



Animación: Interpolación de movimiento

Esta interpolación se debe elegir cuando los objetos de los dos fotogramas claves sólo se diferencian en su posición, escala o rotación.

Movimiento

Tamaño

Girar un objeto

Transparencias y color

Guía de capas



Animación: Formas y Consejos de forma

Interpolación de Formas Se debe elegir cuando la diferencia entre los objetos de los fotogramas claves consiste en su forma.

Consejos de forma Para controlar cambios de forma más complejos o improbables utilice los consejos de forma. Los consejos de forma identifican puntos que deben corresponder en las formas inicial y final.



Animación: Ejercicios

Pelota que rebota

Día nublado

Ciudad Animada con diferentes Entornos, generar el proyecto.



hipertexto y animaciÓn dr. alejandro padilla díaz · 2012. 2. 17. · hipermedia e hipertexto el...

Documents