Ejercicios atrasados

A continuación se muestran algunos ejemplos de clase, el primero realizaron con movie clips uno dentro de otro para lograr una mayor sincronización y que no se vea desfasado, el segundo fue el primer ejercicio de botones con las dos funciones básicas, el play y el stop realizados con el menú acciones y on-press-play y/o stop

Proyecto extraclase!!

Regresando a actualizar, en este último mes de clase hemos visto las vinculaciones de flash con otros documentos swf para hacer que nuestra página o proyecto no pese demasiado, Esto se realiza a través de botones que se vinculan en el menú acciones y las opciones on-press-go to and play, play o load movie, está última opción es la que nos permite que un botón nos lleve a otro documento swf sin que esten en el mismo archivo. También el profesor nos explicó que en flash se puede publicar en html, al igual que en fireworks. Gracias a todo lo anterior realizé en clase de laboratorio de diseño editorial un proyecto de publicación electrónica o llamado e-book, en el que mezcle todos los programas para lograr vincularlos y que dieran un buen resultado. Así mismo me di a la tarea de investigar la inclusión de sonidos en flash para poder agregarlos al proyecto.
Ahora bien para poderlo mostrar lo he subido a internet como si fuera una página web.
He aquí la dirección: http://nocturna.webatu.com/Nocturna/ebook%20con%20intro.html

Nota: En la presentación del e-book cuenta con dos botones de lado derecho, el primero llevara a la página de inicio y el segundo es un fragmento de audiolibro del capitulo titulado "El comienzo"

Movimientos de cámara...

Después de una gran proceso de elaboración al fin se logró, en este trabajo se combinaron técnicas de cámara como: Paneo y dolly. Todas ellas hechas en flash con movie clips, y alterando el tamaño y ubicación de los elementos. En el caso del paneo los elementos se recorrieron de izquierda a derecha, de manera más lenta en cada plano, es decir en el primer plano de los arboles se mueve más lento que el sol o las nubes que están en un último plano. En la segunda animación el trabajo es el mismo pero de forma vertical y en la última se logra un efecto de close-up al agrandar los elementos desde el primer plano hasta el del final.

Ejercicios en clase...

En las ultimas clases hemos estado viendo más herramientas de flash para realizar una animación, utilizando nuestra herramienta del movie clip que es el símbolo al que convertimos un objeto dibujado para poder animarlo. Pero gracias al movie clip podemos realizar animaciones dentro de animaciones sin tener que realizar todo en nuestra escena uno que nos da por default el Flash.

En este ejercicio se aplico de forma más constante las propiedades del movie clip utilizados como en especie de capas, ya que cada pieza esta dentro de otra haciendo una cadena de elementos que facilitan el manejo de tantos elementos de la animación.

En este caso se ultilzaron guias para marcar el recorrido de nuestro objeto principal (mariposa) empleado en la zona de capas dando click derecho combirtiendo la capa en guía y después arrastrando la capa del objeto a la guía hasta que se unan.

En este caso se explora al igual que en el anterior el uso de las guías haciendo rebotes y al final se aplicó la herramienta lazo para dividirla y hacer el efecto de explosión y la animación cuadro por cuadro.

Y lo último visto en clase es el uso de máscaras que despues explicaré con más detalle.

Fondos Movibles ¡¡Flash!!

Así es..esta es una tarea que aunque se entrega un poco retrasada...(debido a problemas técnicos), muestra una opción de animación en donde el personaje principal en este caso superman queda al centro de la escena y lo que se mueve son solo los fondos haciendo la ilusión de un recorrido. Y a su vez el superman esta elaborado como movie clip y dentro de este se encuentra la animación de la capa, siendo un claro ejemplo de la comodidad y opciones que ofrece el movie clip definiendolo como una animación dentro de otra animación.

Animaciones en flash

Esta es la primera animación realizada con el programa Flash en donde en base a los simbolos y movie clips pudimos realizarla de manera más controlada, respecto al tiempo y la velocidad de nuestra animación. Así mismo utilizando las herramientas de dibujo que nos ofrece el programa se creo algo más interesante visualmente y atractivo para nuestro publico usuario.

160x600

200x200

300x160

¡¡La primera prueba!!

Y al fin se hizo un sitio web de forma más profesional (según), bueno no tanto, pero se subió a un sitio que nos ayudará a determinar la usuabilidad y funcionalidad de nuestra página web sin más preámbulos aquí esta el link...!!

http://www.karinasinc711.host22.com/Karinas%20Inc/index.html

Frames e Imagenes Animadas GIF

Recibe el nombre de Frame, aquella división de nuestro sitio web, es decir la zona que ocupa en nuestro espacio libre para el diseño, en donde se pueden color botones, imagenes centrales, créditos y legales del sitio, así como formación complementaria del sitio. La división es la siguiente:

Esto se utiliza en nuestro programa de Dreamweaver para permitir una colocacion de los elementos elaborados en Fireworks de una manera más fácil, esto quiere decir que nos ayuda a realizar una organización de nuestra página que teniamos en partes hechas en Fireworks.

Ahora bien las imagenes GIF animadas, se pueden definir como una presentacion de dos o más imagenes de forma automatica y con un periodo de tiempo. Tambien se puede hacer con gráficos realizados en el programa de fireworks como rectangulos, circulos lineas, etc.

En el primer tipo de GIF se realiza de forma muy simple, se preparan nuestras imagenes (en este caso 3) y se abren de forma conjunta seleccionando en nuestra ventana la opción de la parte de abajo que dice "Open as animation" y aparece nuestras imagenes como una sola y en la barra de la derecha estan los estados, cada uno, con una de las imagenes que seleccionamos y con un tiempo determinado de presentación que al dar doble click se puede alterar. Al final se optimiza y se guarda como GIF ANIMADO.

En el segundo caso se dibuja un objeto que se convierte a gráfico con f8 y despues se copia a donde queremos que finalice su recorrido, se selccionan ambos y damos click derecho vamos a la opción Symbol y luego Tween Instances y de la misma forma que el anterior se crearan states de los cuales podremos modificar el tiempo.

¿¿¿Una página a partir de códigos???

¡¡Asi es!! Durante los comienzos del aprendizaje del funcionamiento de Dreamweaver, se empezó con la elaboración de una pagina a partir del modo de código, en donde se colocaban comandos para crear cajas de texto, tablas y botones con imagenes.

 Los códigos tienen un inicio y un final que se debe poner de forma correcta, ya que sin estos la página no funcionara y los códigos aparecerán solo como un texto "raro" en nuestro sitio.

Así mismo los códigos se dividen dependiendo de las partes de nuestra página:

Todos estos codigos señalan la organización de nuestro contenido de la página, manteniendo un contexto claro y preciso, ya que si no se respetan estos codigos es imposible visualizar un sitio con todas sus partes.

A continuación coloco de forma más clara los codigos basicos para la laboración de un nuevo sitio en un nuevo documento de Dreamweaver:

<HTML>

<head>

<title>Aqui va el titulo de nuestra página</title>

</head>

<BODY>

</body>

</html>

¡¡Tron en Hipermedia!!

Gran película, de carácter tegnológico, así como con una gran cantidad y calidad de efectos, simplemete asombrosa en el ámbito audiovisual, me pareció un buen ejemplo para nuestra clase de multimedia, ya que explica el papel de los usuarios y de los programas, dentro de los sistemas interactivos, es decir dentro del contexto de esta  película, se muestra la gran cantidad de opciones que tiene el usuario para crear y cambiar el entorno visual en el que se desenvuelve, haciendo una interacción de mayor grado y teniendo un amplio control de su entorno.


En cuanto a la relación de estos sistemas de información con el ámbito de diseño, es de gran importancia ya que crea mayor interacción y permite una comprensión y desarrollo del tema, de una manera más profunda. Así mismo en casos de videojuegos hay un amplio contenido para desarrollar de forma creativa, como en la película en donde el diseño se encuentra desde el ambiente en el que se desarrolla la película, hasta el vestuario y look de los actores. En este punto hay que aclarar que el vestuario da un gran empuje a la historia ya que combina con los sets en donde fue grabada. El papel de los usuarios sorprende ya que, aún con el golpe de estado que le dieron los programas al creador, se sabe de su superioridad y por ello se le teme. También esta bien desarrollados los grafícos al presentar a Clu como una especie de animación para diferenciar del papá de Sam. En general es una buena película en donde se explica el funcionamiento de un videojuego con recursos audiovisuales atractivos que para el público que la ve, lo engloba de forma perfecta en la historia y lo hace sentir parte de ella.

¡¡Hipervínculo!!

El pasado viernes se comenzó a ver algunos factores importantes al momento de realizar nuestra página web, uno de ellos son los hipervínculos. Aquellos botones de nuestra página que nos permiten navegar por su contenido, mostrándonos un previo en el índex (página principal), que en nuestra página fue hecho con una parte de nuestra imagen óptima, este nos llevara a una nueva página con el contenido que deseábamos ver y con un botón que nos llevara de nuevo a la página principal. Este ultimo debe distinguirse para ayudar al usuario a regresar a nuestro menú principal. 

Entonces podemos definir a un hipervínculo como aquel botón o previo (imagenes), que nos llevará a un nuevo contenido, ya sea en la misma página o abriéndonos una nueva pestaña o ventana, a continuación se explica graficamente:

Aquí mediante la primera pagina web realizada en clase, se explica con una señalización el papel del vínculo en el sitio, después se explican los tres estados de cambio que puede tener para ser más indicativo e interactivo para el usuario, primero es solo un botón, después se pasa el mouse y puede tener un cambio, indicando una reacción y una nueva opción de página y el último estado es cuando es presionado y ahora nos dirigimos a una nueva página.

Y entonces ya en nuestra página, también nos aparecerá un hipervínculo que nos llevará de regreso a nuestro sitio principal.

¡¡Mapa mental!! " Escribir programas interactivos", Xavier Berenguer

Se coloco en el blog de profesor un articulo sobre los programas interactivos, en el se relatan sus características más importantes para un buen funcionamiento, algunos ejemplos y consejos sobre como realizar uno con éxito. A continuación se muestra un mapa en el que se rescataron los conceptos principales para entender a los programas interactivos.

Aquí esta el nuevo mapa mental con información más sintetizada, para una mayor retención de datos acerca de los programas interactivos.

Y empieza la página web!!!

Ya han pasado solo dos clases, y aunque en una no hubo la oportunidad de profundizar de lleno en el tema de las paginas web, debido a una salida inesperada del profesor, este viernes 19 de agosto al fin ¡¡se pudo!!, el profesor explico la importancia de las imágenes optimizadas para subir a un sitio web, pensando siempre en los visitantes que tendrá, por lo que una imagen optimizada será de fácil descarga al momento de acceder al sitio. Explico el proceso adecuado, una disminución en los pixeles, en la resolución y al momento de guardar en Quality, siempre cuidando que la calidad que se pierda no sea demasiada y listo. Tenemos imágenes para subir a web.

y entonces comenzamos a usar el Fireworks, se aprendió a realizar una imagen en formato png con vínculos utilizando las imágenes optimizadas anteriormente y botones para acceder a ellas, claro todo con un diseño atractivo y organizado.

Mi nueva clase.

Comienza una nueva etapa de aprendizaje y ahora el mundo de lo digital abre sus puerta para mi, en este nuevo semestre los conocimientos crecen y ahora toca el turno del ámbito de la multimedia, durante el periodo escolar se enseñara la importancia de la hiper media, que en la actualidad es de vital importancia para el diseño debido a la cantidad y calidad de experiencias que se le ha estado brindando a los consumidores de grandes marcas, haciendo que estas mantengan su estatus en la sociedad y sean conocidas por ser innovadoras y estar preocupadas por la comodidad y satisfacción de sus clientes. Nuestro principal ejemplo "El Internet" que ahora permite socializar y mantener relaciones de comunicación con las personas de nuestro alrededor, también brinda información de los productos y ofrece múltiples actividades de entretenimiento para los usuarios, siendo más atractiva y original manteniendo una innovación ante sus principales competencias.