Conclusiones del producto para CyC

El producto que la empresa Floricultura ha realizado para la empresa CyC ya lo podemos ver en entradas anteriores, en este post explicaremos los problemas que nos hemos ido encontrando a lo largo del proyecto.

En primer lugar, tenemos que mencionar que, como ya vimos en clase, los programas de edicion de video requieren especial atencion ya que pueden ocasionar algunos problemas. En nuestro caso, se han creado los videos utilizando Movie Maker y usando Cinelerra. Al principio utilizar Movier Maker era bastante facil y no daba muchos problemas pero cuando quisimos trabajar con videos descargados de youtube para realizar otros videos nos vimos con serios problemas ya que esta herramienta se quedaba colgada y cuando conseguia responder no generaba bien el video (problemas con los formatos MP4). Aunque se cambio el formato de video a otros como AVI, MPG, WMV al provenir de youtube no se creaba un buen video.

Como alternativa pasamos a Cinelerra y nos paso de todo, a veces se nos cerraba el programa, otras veces se nos movian los elementos insertados y se desajustaba todo, etc. No obstante al final conseguimos crear los videos a base de mucho tiempo y paciencia y arreglandonoslas usando los dos editores para distintas cosas.

Por otro lado en cuanto a director, necesitabamos reproducir estos videos y no teniamos ni idea de como hacerlo, asi que tras buscar informacion nos encontramos los siguientes ejemplos en los que se describia como realizar estos efectos:

--VIDEO EN RETROCESO RAPIDO
sprite(x).movieRate=-2
--VIDEO EN PLAY HACIA ATRAS
sprite(x).movieRate=-1
--VIDEO EN STOP
sprite(x).movieRate=0
--VIDEO EN PLAY NORMAL
sprite(x).movieRate=1
--VIDEO EN AVANZA RAPIDO
sprite(x).movieRate=2
-- IR AL INICIO
sprite(x).movieTime=0 

todo bajo el evento on mouseDown

Esto nos facilito bastante la vida ya que nos costo encontrarlo pero al final lo conseguimos realizar correctamente y con buen resultado.

En resumen, lo que mas nos costo fue crear los videos y encontrar funcionalidades de macromedia director que desconociamos su codificacion, el resto del trabajo fue bastante ameno y llevadero y no ocasiono tampoco demasiados problemas.

Habitify: Diseño y Arquitectura

Habitify: Diseño y Arquitectura

Metodología

Se ha desarrollado en prototipos (con un total de 7 iteraciones), tras los cuales se obtenía feedback con la compañía comprada, Habitify. En cada uno de ellos se han desarrollado diferentes características concretas, a excepción del primero, que se consiste en un proof of concept que nos ha permitido definir los requisitos iniciales (como se puede apreciar en nuestras entradas anteriores en el blog).

Arquitectura

En la siguiente imagen se puede ver un diagrama con la arquitectura general de este programa. En primer lugar tenemos el Stage, el entorno de ejecución. El Stage está compuesto por diferente Scenes. Estas Scenes serán la página principal, la página de elección de juguetes... etc. Dichas páginas tendrán un Frame Script (típciamente consistentes en un bucle continuo de ejecución de la misma escena para que el usuario se mantenga en ella) y diferentes Sprites, que son recogidos o bien en tiempo de compilación o bien en tiempo de ejecución (como se explicará más adelante). Estos están definidos por Sprite Scripts (comportamientos específicos de una instancia del elemento) o Cast Scripts (comportamientos generales de dicho elemento, y todas instancias de ese elemento comparten). Además, todos ellos están beneficiados por una serie de funciones globales generales que sirven para definir comportamientos que pueden ocurrir en cualquier escena desde cualquier script. Dichos comportamientos están en Movie Scripts y son llamados en la inicialización del programa. Esto hace que dichas funciones queden definidas y puedan ser llamadas. El principal beneficio de esta arquitectura es que permite evitar gran parte de la repetición de funciones que puede ocurrir entre diferentes scripts.

Ejemplos

- Botones: Los botones están definidos utilizando Cast Scripts. Estos cast scripts definen tanto la acción del botón como el efecto on hover que da un efecto de profundidad. Esto funciona analizando el sprite (no el cast) sobre el que se ejecutando esa acción del ratón y reemplazándolo por otro sprite generado a través de otro cast (recurso).

- Frame Scripts: Los Frame Scripts definen los bucles de un frame (o en nuestra arquitectura, una escena). Se encargan de mantener el estado del programa. Para ello utilizan ciertas variables globales que permiten limpiar y reorganizar sprites generados dinámicamente. Por ejemplo, en la pantalla principal de generación de una habitación, tenemos lo siguiente:

 - Inicialización: La inicialización se hace utilizando movie scripts. El más importante define los diferentes canales que los sprites generados automáticamente utilizarán. Si no existieran ciertos límites, el usuario podría generar potencialmente infinitos creando un overflow. Esto además facilita la programación y el diseño general de la aplicacion, sin riesgo de que los canales se superpongan.

 - Paredes: Las paredes se seleccionan a través de una función global (setWalls) y un parámetro que depende del botón seleccionado. Su funcionamiento es sencillo: cargar la textura en alta resolución de la imagen (mismo nombre del botón pero con _orig al final del nombre para cargarlo sin necesidad de un lookup). Después, dependiendo de la perspectiva activa en el estado global de la aplicación, renderiza las paredes con el siguiente proceso:
    - Crear el sprite
    - Colocarlo en posición
    - Redimensionar el tamaño del elemento
    - Skew y rotación para adaptar la imagen a la perspectiva seleccionada

- Impresión: Esto ha causado un problema de licencias. Aunque se puede hacer una captura de pantalla e imprimir, esto requiere de un Xtra. Los Xtras no pueden ejecutarse en una versión educativa de Director. Por ejemplo, para imprimir y sacar la captura, podríamos utilizar printomatic para imprimir y ScrnXtra para capturar la pantalla. Aunque la documentación de los Xtras es clara y por licencia no se han podido hacer funcionar, se explica brevemente como sería su funcionamiento:
    - Cargar el Xtra: Utilizando la carpeta Xtras en el directorio de la aplicación con el fichero .dir
    - Realizar la captura: Utilizando ScrnXtra, llamamos a ScreenToMemberleft top right bottom (punto arriba a la izq y otro punto abajo a la derecha) memberName
    - Imprimir el cast member:
             

  set doc = new(xtra "PrintOMatic")

  newPage doc
  drawPicture doc, ourCastMember
  print doc
  set doc to void 
 
 
 

Proyecto final Divino

Proyecto final Divino

Como proyecto final nuestro objetivo era crear una aplicación para una vinoteca. El objetivo de esta aplicación es que los clientes puedan aprender sobre la existencia de diferentes vinos, ya sea por regiones o diferentes cosechas. También recomendamos vinos para diferentes tipos de comida.

Por último, hemos desarrollado un juego dinámico que aportará tanto entretenimiento como aprendizaje a nuestros clientes. Además, dará la posibilidad de poder obtener un descuento en sus compras en caso de haberlo realizado correctamente.

Antes de nada, nada mas ejecutar la aplicación se abrirá un breve video hecho en cinelerra que nos situe en el entorno de la vinoteca y nos lleve al menú.

El menú nos ofrece las distintas opciones que podemos hacer con nuestra aplicación. El objetivo de esta aplicación era ofrecer un tono amigable y cercano, que lleve a la gente que no tiene un gran conocimiento sobre vinos a sentirse cómodo al manejarla. Tanto esta interfaz como el resto están hechos con photoshop.

Si por ejemplo clicamos en el bocadillo de buscar vino para determinadas comidas nos llevará a esta nueva interfaz:

En esta podremos elegir el diferente tipo de comida con la que queramos acompañar nuestro vino. Al pulsar alguna de las opciones (carne, por decir una), nos mostrará el siguiente listado de vinos.

En todas las pantallas tendremos la opción de volver tanto a la pantalla anterior como al menú principal.

Al igual que podemos elegir el tipo de comida para el que queremos destinar el vino, de una misma manera podremos elegir que nos ofrezca una distinta variedad de vinos dependiendo de la región o cosecha a la que pertenezca.

Cada botón que pulsemos nos llevará a un listado de nuestros vinos seleccionados.

Finalmente tendremos el juego con el que los clientes podrán obtener un descuento en caso de acertar todas las preguntas. Cada vez que dejemos a medias la ejecución del juego el contador de aciertos y fallos volverá a inicializarse.

Utilizamos photoshop, director y cinelerra para realizar el proyecto. Hicimos todo conjuntamente, y conforme realizábamos algo nuevo lo implementábamos en la versión conjunta.

Tuvimos problemas para realizar un video, ya que en nuestros propios ordenadores no nos funcionaba correctamente el cinelerra, por lo que tuvimos que hacerlo el último día de clase. Debido a ello (y que durante el mismo día de clase también tuvimos problemas con este programa) terminamos sacando un video peor del que esperábamos.

Por otro lado, estuvimos pensándo en diferentes maneras para que al pulsar los botones de la aplicación estos se oscureciesen o cambiasen de color. Al final nos decidimos por hacer diferentes imágenes y que cuando se pulsase el botón la primera imagen se borrase completamente y la nueva tuviera una opacidad del 100%.

Finalmente, teníamos idea de que los usuarios guardasen los resultados de las partidas que realizasen con el juego, y que si se salían del juego en mitad que tuvieran la posibilidad de retomar la partida desde el mismo punto. Esto estuvimos buscando maneras de llevarlo a cabo, pero al final no supimos realizarlo.

Class&Food - Producto Final

Hemos simulado mediante adobe director una web explicativa para la empresa Class&Food. Ésta es una cadena de comida rápida de muy alta gama que está buscando franquiciadores para extender su negocio. Para ello hemos creado varios apartados en la “web” en los cuales se explica las siguientes características de la empresa:

•    Nuestras señas: Aquí explicaremos mediante un pequeño texto descriptivo, el estilo del local así como el del personal que atiende el mismo. Además, en este apartado se dispondrá de dos galerías de imágenes para ejemplificar lo antes expuesto

•    Nuestros platos: El funcionamiento de este apartado es muy similar al anterior, pero esta vez centrado en los platos ofrecidos por el restaurante. Al igual que antes, incluimos una pequeña descripción escrita y una galería de fotos.

 

 •    Clientes: En esta sección tendremos una breve descripción de los clientes que frecuentan Class&Food, así como una pequeña muestra de fotos de los mismos.

•    Socios: Un breve repaso de las marcas que colaboran con nosotros.

 •    Datos económicos: Aquí mostraremos la evolución económica de nuestra empresa. Incluye gráficas sobre ingresos y beneficios, cuota de mercado y evolución financiera.

•    Simulador: Debido a que está es una “web” para la captación de franquiciados dispones de un simulador para estimar el rendimiento económico de una futura franquicia. En el introduciremos los parámetros de habitantes de la zona, renta media e inversión inicial para obtener una gráfica explicativa.

Esta sección ha sido la que más tiempo y esfuerzo nos ha costado. Para empezar, los desplegables para las variables de renta per cápita, habitantes de la zona e inversión. Estos constan de varias imágenes, simulando un desplegable, y al pasar sobre una de las opciones ésta se resalta cambiando la transparencia de una imagen por otra. Una vez seleccionadas las tres variables en los desplegables aparecerá la gráfica correspondiente, hecha con el programa Matlab. Al cambiar los parámetros la transparencia de esta imagen la ponemos a 0 y a 100 la de la gráfica nueva.

 Además de estos apartados, disponemos de un pequeño video introductorio con el logo de la empresa, así como un apartado de inicio con un video que muestra un popurrí de imágenes diversas de la empresa.

Proyecto para la empresa TravelAir. Por Zulema e Iñaki

Según nos encargó la empresa TravelAir, querían que hiciéramos una aplicación para que los viajeros potenciales pudieran buscar un destino para sus vacaciones.

La aplicación funciona de dos formas: 

1. Elige un destino de entre los posibles.
   Sobre un mapamundi mostramos los destinos a los que llega la empresa y pinchando sobre estos pasamos a ver información relacionada.
2. Indica tus preferencias y te mostramos el destino que mejor se adecua a estas. Así, mostraremos de entre todos los destinos posibles uno.

Una vez elegido el destino se lo mostramos al cliente junto con el logo de la empresa para conseguir así publicidad.

En cada destino mostramos fotos de hoteles, gastronomía, festividades, deportes, etc. según lo que sea más relevante. 

Como detalle indicar que el objeto inferior, que en este caso es un autobús londinense, representa algo del destino elegido y se mueve conforme vamos pinchando en el letrero de la derecha

En todo momento, podemos volver al inicio del programa pinchando sobre el icono de la casa que está arriba a la derecha o botón Fin del Viaje si estamos en un destino.

El trabajo lo hemos ido haciendo conjuntamente. Ambos hemos hecho de todo: mientras uno trabajaba sobre Director, el otro preparaba las imágenes o sonidos que queríamos usar en nuestra aplicación. Otro día cambiábamos de trabajo. No quisimos hacer dos secciones individuales para luego juntarlas por que fuera lo más homogéneo posible. Si dividimos el trabajo, es más difícil hacer que ambas presentaciones sean idénticas. Al trabajar sobre un sólo proyecto, consiste en darle continuidad a lo que ya está hecho.

A la hora de implementar el proyecto el momento en el que mayor dificultad hemos encontrado es a la hora de conseguir el movimiento fluido del objeto representativo de cada destino (en este caso el autobús), ya que aunque conseguíamos que se moviese, cuando llegaba a una posición hacia un último movimiento hasta colocarse, es decir se deslizaba hasta un punto se paraba y volvía a avanzar unos milímetros. Nos dimos cuenta que nuestro problema era el tomar como referencia tres puntos, el inicial, medio y final. Así que decidimos finalmente implementar  tomando únicamente el punto inicial como referencia, de este modo cuando el usuario pulsa en el letrero en el segundo cartel, el objeto se mueve una distancia X (averiguada y fijada anteriormente) desde el punto inicial, y desde la posición inicial+X (cuando el objeto se encuentra en medio) se mueve otra distancia Y si se pulsa en el tercer letrero del cartel. Se repite el proceso desde la posición inicial+X+Y (cuando el objeto se encuentra totalmente a la derecha).

E4C

Durante estos meses hemos estado trabajando duro para poder ofrecer una experiencia totalmente interactiva a la par que ilustrativa sobre las energías renovables y el modelo energético que ha desarrollado la empresa E4C. Se ha explotado al máximo la estrategia de gamificación para que el usuario se sienta más cercano y amenizado a través de la interacción.

Estas son las pantallas de nuestra aplicación:

- Pantalla principal en la que tenemos un vídeo de promoción y un guia pájaro que indica a donde lleva cada una de las opciones que el usuario puede escoger.

- Pantalla en la que podrás ver que es E4C centrados en el medio ambiente. 

Dentro  de cada clase de fuente de energía, el usuario puede escoger entre diferentes medio ambientes y comprobar el impacto beneficioso de las propuestas sobre las existentes no renovables.

- En la otra pantalla podrá ver la posible planificación para llevar a cabo una instalación de sistemas de explotación renovables. El usuario puede utilizar la paleta de símbolos para realizar una simulación del coste que supondría la instalación  y el impacto que generaría al medio.

Y en los ejemplos un vídeo sobre nuestras instalaciones... Una experiencia Turing-completa en la que se invita al espectador a visitar las oficinas e instalaciones de la compañía.

El desarrollo ha sido intenso y cada una de las fases y pantallas ha requerido de nuestros más grandes esfuerzos, tanto para idear el concepto como para llevarlo a cabo en Adobe Director ®.

En un principio teníamos pensado crear una infografía interactiva para la pantalla final ejemplos. Sin embargo, llegamos a la conclusión de que sería mucho más ameno para el usuario poder ver un vídeo en el que aparecieran los responsables de la empresa explicando la misma. Dentro vídeo...

Producto extra

El equipo de diseño Class&Food también ha desarrollado por petición de su cliente Fruxotic, una papeleta informativa con la que potenciar en mayor medida la fidelización de clientes.

Dicho panfleto contiene el nombre de la comparía "Fruxotic", un eslogan "Disfruta nuestra exótica fruta" y un código QR con el que descargar la aplicación.

El resultado final se puede apreciar en la siguiente imagen.