UDD 11 by RedUSERS

ESCRITORIOS MÚLTIPLES PROPIEDAD INTELECTUAL REPRODUCTORES CREATIVOS EN FLASH VIDEO HD HTML 5 OPTIMIZAR PERFORMANCE TIPS PARA PERSONAS CREATIVAS NEGOCIOS EN COMUNIDADES ONLINE

DIBUJO TÉCNICO EN CS5 INTEGRACIÓN DE CAD CON ILLUSTRATOR

MOTION GRAPHICS SECRETOS DE UNA TÉCNICA CREATIVA Y PODEROSA

ARTE EN VIDEOJUEGOS

TENDENCIAS, TÉCNICAS Y RECURSOS DE UNA DISCIPLINA APASIONANTE

PLIEGO TAPA - UDD#11.indd 3

06/10/2010 10:15:39

soluciones software

digital

Múltiples escritorios, múltiples posibilidades Contar con más de un escritorio para trabajar nos permitirá tener una vida digital mucho más cómoda y ordenada. ¡Ahora preparemos nuestro equipo y disfrutemos del lujo de tener múltiples pantallas!

Autor Alexis Burgos aburgos@redusers.com

www.redusers.com

@licpichichus

Antes de comenzar con el tema de este artículo, quería recomendarles la nota publicada en Users Digital Design Nº 8, escrita por Javier Richarte, sobre los últimos procesadores gráficos

14-18 Escritorios multiples_ajustado.indd 14

y placas de video orientados al mundo del diseño y el retoque digital. Muchas veces, esas poderosísimas placas pueden ofrecernos más prestaciones de las que necesitamos, e incluso más de las que podemos imaginar. Una de ellas es la posibilidad de disponer de diferentes escritorios, ya sea en nuestro mismo monitor o en varios conectados a la misma placa. La buena noticia es que si contamos con un equipo portátil o con una placa de video modesta —pero decente—,

probablemente también podamos aprovechar esta funcionalidad sin comprometer el rendimiento del equipo. Veamos cómo lograrlo. ¿Para qué más escritorios? La idea de utilizar múltiples escritorios, tan común en Linux y en entornos Mac, es todavía un poco inusual en sistemas Windows. Contar con diferentes escritorios nos permite disponer de varias pantallas virtuales o reales según dispongamos o no de

9/22/10 10:56:30 PM

Disponer de más de un escritorio Esta opción nos ayuda a resolver los problemas de espacio en la pantalla, que muchas veces los usuarios intentan solucionar comprando monitores más grandes o de mayor resolución. Sin embargo, nada se compara con poseer un espacio de trabajo mucho mayor e infinitamente mejor organizado. ¡Ahora pongamos manos a la obra! Escritorios virtuales Aunque hay otras opciones, MS Desktops es nuestra herramienta preferida debido a que es muy sencilla y liviana. En un principio estaba pensada para ser incluida en el sistema operativo Windows 7, pero finalmente se distribuyó como aplicación independiente. El programa

14-18 Escritorios multiples_ajustado.indd 15

La tecnología de dos pantallas es cada vez más utilizada. Ya está presente en una infinidad de gadgets. Las consolas portátiles y los autoestéreos son los principales dispositivos que la adoptaron.

ni siquiera requiere realizar una instalación, y su interfaz es muy simple. Trabaja bajo un precepto muy claro: podemos crear hasta cuatro escritorios virtuales a los que accederemos mediante una combinación de teclas o haciendo clic sobre el icono del programa (exactamente en el área de notificación de la barra de tareas y, luego, sobre la miniatura del escritorio virtual). Sin dudas, ésta es una aplicación sumamente práctica y acertada para quienes no quieran invertir su dinero en un segundo monitor o para aquellos que no disponen de más espacio, por ejemplo, porque trabajan con un equipo portátil.

Trabajar con múltiples escritorios hace que nuestra actividad cotidiana sea más cómoda y simple.

www.redusers.com

más de un monitor. Si tenemos esa suerte, además podremos extender nuestro escritorio de modo que sea más grande y nos facilite el trabajo. En pocas palabras, ése es el objetivo de poseer más de un escritorio y su barra de tareas. Como hemos visto, existen dos maneras de aprovechar la tecnología de múltiples escritorios. La primera opción es emplear una aplicación que administre varios escritorios virtuales y que, a través de una combinación de teclas, nos permita acceder a cada uno de ellos. La segunda es disponer de un monitor extra y una placa de video con más de una salida que lo soporte. En este último caso, no sólo podemos tener dos escritorios —uno en cada monitor—, sino que, además, es posible extender el tamaño del primero. Así, por ejemplo, en uno de los monitores podemos maximizar nuestra herramienta de diseño preferida; mientras que en el segundo tenemos el cliente de correo, el de mensajería instantánea y el navegador. El puntero del mouse atravesará “la nada” existente entre ambos sin ningún inconveniente, y aparecerá en la segunda pantalla en un abrir y cerrar de ojos. Si nunca hemos probado la técnica, es hora de hacerlo: es una experiencia interesante.

digital

9/22/10 10:56:33 PM

digital

soluciones software Otras opciones Synergy es un desarrollo Open Source (http:// synergy2. sourceforge.net) que no sólo permite disponer de varios escritorios, sino que, además, nos da la posibilidad de compartir escritorios —y monitores— entre equipos que utilizan distintos sistemas operativos. Se instala sin mayores diﬁcultades y, cuando trabajamos con múltiples sistemas operativos, permite compartir las técnicas OLE y DDE entre ellos, así como el Portapapeles, el mouse y el teclado.

Paso a paso: instalar MS Desktops

Desktops instala un pequeño icono en el área de notiﬁcación de la barra de tareas, desde donde controlaremos el programa y accederemos a los diferentes escritorios. Un clic sobre cualquiera de ellos nos llevará a él.

Es recomendable marcar la casilla de veriﬁcación [Run automatically at logon] para que el programa se inicie con Windows. Además, podemos conﬁgurar nuestras propias teclas de acceso rápido para cada uno de los escritorios: en el ejemplo utilizaremos la combinación <Win + F1> para acceder al escritorio 1.

www.redusers.com

Descargamos MS Desktops desde el sitio web http://technet.microsoft.com/ en-us/sysinternals/cc817881. aspx haciendo clic en el vínculo [Download Desktops]. El programa es realmente muy liviano y no requiere instalación alguna. Alcanza con descomprimir el archivo ejecutable y copiarlo al grupo [Inicio] del menú [Inicio], para lo cual hacemos doble clic sobre el archivo descargado y luego arrastramos el contenido de la carpeta comprimida al lugar indicado.

14-18 Escritorios multiples_ajustado.indd 16

9/22/10 10:56:34 PM

digital

Cada escritorio tiene su propio conjunto de programas ejecutándose y su propia barra de tareas. Si nuestra placa de video no lo soporta, ninguno de los escritorios, excepto el primero, podrá utilizar la interfaz Aero de Windows. Desde ya, cada escritorio puede ser personalizado a gusto.

14-18 Escritorios multiples_ajustado.indd 17

Una vez que tengamos el segundo monitor en el escritorio, lo conectamos a la segunda salida de la placa de video del equipo o a la salida de video de la notebook. Siempre es preferible utilizar la conexión DVI para disponer de la mejor calidad posible.

Desde el vínculo [Conectar a un proyector] del elemento [Pantalla] del [Panel de control], podremos extender el escritorio con la opción del mismo nombre. Desde el vínculo [Resolución de pantalla] es posible deﬁnir la resolución y la orientación de cada pantalla, luego de seleccionarla.

El controlador de cada placa de video incorpora opciones múltiples para deﬁnir el aspecto de la segunda pantalla, su resolución y su orientación. En la mayoría de los casos, desde él podemos establecer múltiples escritorios, extender el nuestro y controlar la apariencia de cada uno de ellos.

www.redusers.com

Un segundo monitor en mi escritorio Las razones por las cuales podríamos desear instalar un segundo monitor en el escritorio son muchas. Una de las más importantes es que nos permitirá duplicar la cantidad de aplicaciones abiertas al mismo tiempo, en tanto podremos verlas todas de un vistazo. El ejemplo mencionado al comienzo de este artículo es perfectamente válido en este aspecto: si queremos trabajar con nuestra aplicación de diseño favorita en pantalla completa, utilizando un segundo monitor todavía podemos tener un mensajero instantáneo, un cliente de correo y el navegador abiertos, y restaurados al mismo tiempo. De igual modo, si tenemos un modelo que seguir, con dos monitores podremos tener uno que se encuentre maximizado en una pantalla, y nuestro trabajo en progreso en la otra. Contar con un segundo monitor va mucho más allá de tener múltiples escritorios. Incluso, podemos tener dos monitores y varios escritorios. La cuestión central es que con un segundo monitor podemos tener todas las aplicaciones que queramos en tamaño grande simultáneamente, de modo que podemos ver toda nuestra labor de una vez. Esto es realmente impagable, ¿no lo creen?

Hoy en día, en el trabajo de diseño, es cada vez más habitual contar con dos monitores, y en estos casos puede ser muy útil tener varios escritorios para trabajar con mayor comodidad.

9/22/10 10:56:36 PM

www.redusers.com

digital

soluciones software Es posible encontrar muchas aplicaciones en la Red para mejorar nuestra experiencia como usuarios de múltiples monitores. MaxiMon (www. mediachance.com/ free/multimon.htm), por ejemplo, nos permitirá agregar una segunda barra de tareas al monitor extra si utilizamos el software de Windows (que no agrega una barra al segundo monitor).

Palabras de un experto Francisco Erian, del área de tecnología de la agencia ThinkThanks, nos relata su experiencia como usuario de múltiples monitores en el estudio: “Trabajar con dos monitores es cada día más común en el mundo de la comunicación y el diseño. En mi caso, surgió como una necesidad: dejé la computadora de escritorio para pasar a la portátil por cuestiones de comodidad y traslado, pero después de un tiempo precisé estar frente a la pantalla en una posición más cómoda y con más espacio. Al principio, agregar una pantalla me resultaba un poco extraño, pero luego me acostumbré y amé el sistema. ”Pasó poco tiempo hasta que me di cuenta de que trabajaba más cómodamente, de manera más ordenada y de una forma que me permitía aprovechar mejor mi tiempo. Esto último es lo que busco a la hora de relacionarme con la tecnología. Creo que los dispositivos que utilizo tienen que ayudarme a hacer mis tareas con más rapidez y mejor, sin mayores inconvenientes. Poder elegir qué aplicaciones ver en cada uno de los monitores y contar con más espacio de trabajo es importante porque mi labor requiere atención y un cierto carácter ‘multitasking’. El escritorio de mi computadora es mi espacio de trabajo,

14-18 Escritorios multiples_ajustado.indd 18

Contar con un segundo monitor nos permitirá duplicar la cantidad de aplicaciones abiertas al mismo tiempo, en tanto nos dejará verlas todas de un vistazo.

y a mayor cantidad de tareas, es lógico que necesite un escritorio más grande. ”En la oficina uso un monitor de 20 pulgadas junto al de 15,4” de mi portátil. Por otro lado, después de probar con un solo monitor más grande, he descubierto que me resulta más fácil utilizar dos; aunque quizás este punto tiene que ver con las preferencias personales”. Para terminar La reducción en los precios de los monitores LCD y la amplia disponibilidad de CRT en desuso nos hace pensar que instalar un segundo monitor es una idea brillante y hasta, por qué no, económica. Este agregado mejorará nuestro trabajo e incrementará nuestra productividad. También, mejoraremos exponencialmente el orden y la organización de nuestras ventanas. Si creemos que agregar un monitor puede complicar nuestro espacio de trabajo, pero aun así queremos organizar mejor nuestras aplicaciones, las herramientas que nos permiten disponer de múltiples escritorios son una respuesta. En cualquiera de los casos —más monitores o más escritorios—, invertir algo de tiempo en estudiar el sistema supondrá una ganancia significativa en rendimiento y comodidad.

Otras opciones MaxiVista es un software muy completo y potente que permite, entre muchas otras funcionalidades, utilizar una computadora antigua o secundaria —la notebook, por ejemplo— como un segundo monitor que extienda nuestro primer escritorio (que puede ser el equipo de escritorio u otra portátil). Se consigue en www. maxivista.com, y exige la instalación de un cliente en cada equipo y de un servidor en el principal. Se ofrece en versiones pagas de entre US$ 15 y US$ 50, pero también existe una demo completamente funcional. Encontraremos un completo tutorial para usar e instalar MaxiVista en www. zakatron.com/ ftopic-19254-next. html#.

9/22/10 10:56:37 PM

Bombo - REDUSERS 4.0 - Jun 10 - EDITABLE.indd 1

28/04/2010 12:15:37

digital

La propiedad intelectual y el diseño Muchas veces, cuando presentamos un boceto o realizamos un trabajo para un cliente, tenemos dudas acerca de cuáles son nuestros derechos sobre la obra y cómo protegerla. En esta nota aclaramos estos interrogantes.

navarro@datafull.com @propintelectual

Al no ser profesionales del derecho, es común que los diseñadores tengan interrogantes sobre cómo proteger sus trabajos. Esta nota nos introducirá en el mundo de la propiedad intelectual en el diseño. Propiedad intelectual: sus orígenes El inicio de la propiedad intelectual está íntimamente relacionado con la actividad

23-24 Propiedad intelectual_Ajustado.indd 23

del diseño, ya que su origen está en la producción de libros. Esto ocurrió, precisamente, con la creación de la imprenta de tipos móviles de Gutenberg, dado que este trascendental avance hizo que el sistema de edición manual de libros pasara a ser mecanizado. Al existir un sistema mecánico que permitía editar libros, también fue necesario que hubiera un sistema legal que lo regulara. En el año 1709, en Inglaterra, se sancionó el Estatuto de la Reina Ana, que regulaba, precisamente, la edición de libros. Antes de su sanción, quien detentaba los permisos era el editor, a quien se le reconocía como un privilegio. A partir de ese momento, éste

se transformó en un derecho basado en el derecho de propiedad. El sistema se desarrolló en el mundo y dio lugar a regulaciones locales e internacionales, que tenían como principal destino al autor, al creador de la obra. Las diferentes denominaciones Al hablar de propiedad intelectual en sentido amplio, nos referimos al sistema de los derechos intelectuales, pero también lo hacemos cuando nos referimos a los derechos de autor en sentido estricto. Por el contrario, denominamos propiedad industrial a instrumentos como las marcas, las patentes, y los modelos y diseños industriales.

www.redusers.com

Autor Guillermo Navarro

9/29/10 8:56:13 AM

digital

La inscripción de una obra permite determinar una fecha cierta de creación. Este trámite puede realizarse en la Dirección Nacional del Derecho de Autor de cada país. Por ejemplo, en la Argentina es www.jus.gov.ar/derecho-de-autor.aspx.

www.redusers.com

Protección para los diseños El derecho de autor cuenta en varios países con jerarquía constitucional, y establece (con variantes) que el autor es propietario de su obra. Vale recalcar que el objeto de protección es la obra, por lo tanto, esa expresión que realiza el creador es el objeto de protección. En términos concretos, el derecho de autor protege la expresión de la obra en sentido amplio, y esto signiﬁca que este derecho se aplica a toda la producción, sin importar el método de reproducción. El tiempo de protección que tiene el derecho de autor, variable según las legislaciones, toma como base el plazo establecido por el Convenio de Berna, que es de 50 años, aunque los países pueden establecer plazos mayores. También puede ocurrir que los creadores trabajen en relación de dependencia, es decir, bajo una relación de trabajo que conﬁgure que el titular de las creaciones es una empresa o una institución u otra persona. La idea, el boceto y la protección La pregunta que debemos plantearnos ahora es ¿qué pasa con la idea? Se determina en forma concreta que se protege la expresión, por lo tanto,

23-24 Propiedad intelectual_Ajustado.indd 24

la idea no está amparada en el objeto de protección del derecho de autor. La expresión se refiere a la forma en que una idea es llevada al plano de la realidad y puede ser vista o ser percibida. La idea se refiere a la construcción mental que aún no ha sido plasmada. El derecho de autor, a diferencia de los otros derechos de propiedad intelectual, no requiere inscripción a los efectos de la protección, sino que tiene la particularidad de que su nacimiento se da con la creación misma. La función que cumple la inscripción es determinar una fecha cierta de creación y generar una prueba en caso de conflicto judicial. La cuestión es qué hacer con lo que realiza en forma diaria el diseñador ante una solicitud. ¿Qué ocurre cuando es necesario presentar un trabajo? ¿Éste está desprotegido? ¿El boceto o prueba se encuentra fuera del objeto de protección del derecho de autor por ser una “idea”? No, esto no debe analizarse así. El boceto del ejemplo es una expresión concreta del trabajo y puede protegerse. Los derechos morales y los derechos patrimoniales Dentro de las regulaciones propias del derecho de autor se mencionan

los derechos morales y patrimoniales, que son la base de la protección de los creadores. El derecho moral del autor es la posibilidad de que éste proteja su creación de usos que afecten su integridad moral o que afecten negativamente su imagen. Imaginemos el caso de que un creador desarrolle un trabajo cualquiera, pero él quiere que su nombre no ﬁgure asociado a ese material. Esto se denomina derecho al anónimo, y da la posibilidad al creador de no aparecer mencionado con su nombre. Los derechos patrimoniales son los que le permiten al autor cobrar por la actividad realizada. Es la contraprestación económica por su trabajo y, también, la posibilidad de obtener réditos a través de sociedades de gestión colectiva de derechos de autor sobre obras visuales por el uso de ellas en distintos medios. Los contratos Por usos y costumbres de la actividad de diseño, el intercambio de trabajos se maneja de manera informal. Si a un diseñador le solicitan un trabajo para un medio gráﬁco o para un cartel publicitario, ése es el uso que se le tiene que dar, y no pueden realizarse usos ulteriores sin previa autorización del creador. El contrato que se establece entre el solicitante del trabajo y el diseñador es, por lo tanto, la extensión de los derechos que ese trabajo abarcará. Por esta razón, es conveniente que exista un instrumento donde se aclare en forma expresa cuál es el trabajo solicitado. En conclusión Para completar, podemos decir que el creador conserva todos los derechos de reproducción que no cedió en los casos en que actúa en forma independiente. En caso de relación de dependencia, se estipula que el creador se desempeña bajo el contrato de trabajo y, por lo tanto, sus derechos se encuentran cedidos. El derecho de autor protege la expresión de las ideas y no las ideas en sí. De lo contrario, no existiría el conocimiento incremental que nos ofrece este precepto básico y que da lugar a este mentado crecimiento que nos permite avanzar a partir de donde llegó otra persona.

9/29/10 8:56:13 AM

FLASH REPRODUCTORES DE VIDEO

digital

Autor Ariel Recchini arte@co-po.com.ar

Herramienta utilizada Flash web

Diﬁcultad Intermedia |

Video creativo en la Web

En la edición número 8 de Digital Design, publicamos una nota escrita por Damián De Luca en la que se hablaba sobre creatividad e innovación en el mundo del diseño web. En ese artículo, vimos cómo, con la ayuda de las nuevas tecnologías existentes y un poco de ingenio, es posible lograr resultados

59-63 Video creativo en la Web_ajustado.indd 59

realmente sorprendentes. Precisamente, en esas páginas pudimos observar un video creativo que nos dejó con la boca abierta; una forma sorprendente y elocuente de presentar un video. En esta nota, veremos de qué se trata. La gente de Frito Lay creó un spot publicitario presentado en Vimeo

(www.vimeo.com) que se escapa del reproductor e invade toda la pantalla del navegador web. En este caso, es para promocionar la salsa Tostitos Restaurant Style, y en él vemos a una bailarina (¡obviamente, bailando salsa!) que sale del reproductor y viste nuestra pantalla con un escenario

www.redusers.com

En esta nota veremos una impactante técnica que nos permitirá lograr que un video supere el límite de nuestro reproductor, a pura creatividad.

9/24/10 4:22:28 PM

web

digital

FLASH REPRODUCTORES DE VIDEO repleto de vegetales y animaciones de excelente calidad. Para entender de qué estamos hablamos, es recomendable que puedan visitar el siguiente link: www.vimeo.com/9194146. Apenas comenzamos a ver el video, estamos atentos a lo que sucede dentro de él, pero transcurridos unos segundos, nos damos cuenta de que los textos, los títulos y hasta el sidebar de Vimeo se desplazan acercándose hacia nosotros, y que el reproductor comienza a moverse hacia el centro de la pantalla y la animación sale de él. El resultado que se ha logrado es destacable en todo sentido. ¿Cómo lo hicieron? Al ver el video, seguramente ésta es la primera pregunta que nos viene a la cabeza. Y si nos ponemos a analizar un poco, podemos llegar a pensar que es algo complejo y que requiere de lo último en tecnología de programación. Pero, en realidad, lo que se precisa es creatividad y perspicacia cuando se piensa en la manera de armarlo.

Ingresamos al link del video: www.vimeo.com/9194146. Veriﬁcamos que los elementos que rodean al reproductor estén maquetados en HTML. Esto puede hacerse de tres formas.

2 Una manera es hacer clic derecho con el mouse sobre cualquiera de estos elementos y comprobar que el menú contextual del navegador brinda las opciones comunes que podemos realizar sobre cualquier sitio HTML, como copiar, recargar, guardar imagen, etc.

www.redusers.com

Internet es una fuente inagotable de ideas creativas. Por este motivo es importante estar actualizado con las últimas tendencias en diseño y desarrollo web.

Nuestra hipótesis fue suponer que, al ingresar en la página con el video, efectivamente estábamos ante el típico reproductor de Vimeo. Éste se encuentra ubicado donde esperamos que esté y con todos los elementos comunes a todos los posts que se publican en el sitio. Pero en algún momento, cuando pulsamos [Play] en el reproductor, se reemplaza lo que estamos viendo en formato HTML por lo mismo, pero en una película Flash mucho más grande que abarca todo el sitio por completo. Si prestamos mucha atención, tan sólo realizando algunos pasos, podemos veriﬁcarlo y conﬁrmar nuestra hipótesis.

59-63 Video creativo en la Web_ajustado.indd 60

3 Otra forma es abarcar y seleccionar los elementos con el mouse. Si se pintan de azul y si, por ejemplo, podemos copiar los textos, entendemos que están en HTML.

9/24/10 4:22:29 PM

Realizar desarrollos web creativos implica conocer a la perfección la herramienta y también dejar volar nuestra imaginación.

web

digital

Encuentre los archivos utilizados en este tutorial en design.redusers.com

4 Para conﬁrmar lo anterior, podemos ver el código fuente del sitio, utilizando el atajo de teclado <Ctrl + U> si estamos en Firefox, o recurriendo al complemento FireBug. Si no tenemos este último instalado, podemos obtenerlo ingresando en http://getﬁrebug.com.

5 Ahora podemos presionar [Play] en el reproductor y, cuando comenzamos a ver que los elementos se mueven, lo pausamos. A continuación, con sólo hacer clic derecho sobre cualquiera de ellos, veremos que el menú contextual ya no es el mismo que se mostraba antes, sino que ahora tenemos el menú contextual típico de FlashPlayer.

¡Listo! Hemos logrado develar el misterio del video que sale del reproductor de Flash, que invade toda la pantalla del navegador y nos maravilla por su frescura y creatividad. Ahora ya sabemos de manera general cómo fue ideado y nos picará el bichito de cómo poder realizar algo similar en nuestros trabajos.

59-63 Video creativo en la Web_ajustado.indd 61

7 Seguramente, ahora nos interesará realizar un proyecto como el que acabamos de ver, sin tener que volvernos locos. Así que vamos a investigar un poco más y a hacer nuestra propia página con el video. Lo primero que haremos es la película Flash que contendrá nuestro reproductor original.

8 Para comenzar a darle forma a nuestro proyecto, vamos a crear una nueva película en Flash, estableciendo las medidas del reproductor. En nuestro caso, trabajaremos con las siguierntes dimensiones: 751 x 343 píxeles. Recordemos que este proyecto se puede decargar desde: design.redusers.com.

www.redusers.com

9/24/10 4:22:30 PM

FLASH REPRODUCTORES DE VIDEO

digital

web

Por medio de ActionScript 2.0, deﬁnimos un evento que llamará a la función JavaScript deﬁnida en el HTML, por medio de la cual ocultamos esta película y hacemos visible la más grande. Para lograrlo, seleccionamos el reproductor, abrimos el panel de acciones con <F9> y escribimos las siguientes líneas de código: on (playing) { this.stop(); getURL(“javascript:mostrar div()”); }

9 A continuación, colocamos un componente FLVPlayback en el stage y lo vinculamos a nuestro video en formato FLV ubicado en la misma carpeta que contendrá todos los archivos del proyecto.

11 Ahora trabajaremos sobre el HTML que contendrá el diseño de la página y el reproductor. Por medio de Dreamweaver o de cualquier editor HTML, creamos un nuevo documento en donde colocamos las películas, funciones JavaScript y CSS, junto con el diseño mismo de la página.

12 Dentro del <head> de la página, ponemos el siguiente código con el que deﬁnimos las funciones JavaScript que determinan la visibilidad de la película Flash más grande: <script> function mostrardiv() { div = document.getElementById(‘ﬂash_large’);

div.style.display = ’block’; } function cerrar() { div = document.getElementById(‘ﬂash_large’); div.style.display=’none’; } </script>

14 Ahora pasamos a los estilos de nuestro HTML. Cada uno de los divs que contienen las películas Flash estará identificado con un ID y, por medio de CSS, le asignaremos las siguientes propiedades, como vemos a continuación: #flash{ height:343px; float:left; margin-left:22px; width:751px; display: block; }

www.redusers.com

13 El truco para hacer visible una película u otra radica en colocar cada una de ellas en divs (<div>) diferentes, y en asignarle a aquél que contiene la película más grande una posición absoluta y una profundidad superior a la película que contiene al reproductor original. En la imagen que ilustra este paso podemos ver cómo está conformado el archivo HTML.

59-63 Video creativo en la Web_ajustado.indd 62

#ﬂash_large{ height:1072px; margin:0 auto; position:absolute; top:0; width:100%; z-index:10; display: none; } Por medio de la propiedad “display: none”, hacemos que la película más grande no se vea al ingresar en el sitio.

9/24/10 4:22:31 PM

Encuentre los archivos utilizados en este tutorial en design.redusers.com

digital

web

Creamos otra película Flash de 1024 x 343 píxeles, que contendrá el reproductor que reemplazará al original. En ella colocaremos elementos animados que simularán salir de él e invadir el sitio. En nuestro caso, ponemos un avioncito que salga del reproductor en el sidebar del site.

16 Hacemos una captura del sitio y colocamos la imagen con ella dentro del documento Flash, en la posición exacta para que, al hacer visible esta película, no se note la diferencia. En este caso, en el lugar que ocupa el reproductor de video, ubicamos la animación que simulará el efecto que deseamos conseguir.

17 Lo que hicimos fue rearmar el sidebar en Flash con diferentes movie clips, de modo que cuando el avioncito salga del espacio del reproductor y esté próximo al sidebar, éste se abra y lo deje pasar, para luego volver a su estado normal. Este efecto dará la sensación de que el elemento se escapa del escenario.

18 Lo que haremos ahora será colocar un botón al que le asignaremos el código que se observa a continuación. Por medio de él, podremos ocultar la película más grande haciendo una llamada a la segunda función JavaScript deﬁnida en el HTML. on (release) { getURL(“javascript:cerrar()”); }

Si bien nuestro ejemplo puede parecer muy simple, es la base que podemos tener como referencia para crear animaciones más complejas que interactúen con el sitio y sus elementos. En el caso particular de Vimeo, para lograr el mismo efecto, debemos tener una cuenta Vimeo Plus, que nos permita personalizar la página y el reproductor. De este modo, podremos incluir las funciones JavaScript usadas en el ejemplo y ejecutarlas al iniciar el video por medio de la interfaz.

59-63 Video creativo en la Web_ajustado.indd 63

www.redusers.com

Para culminar con nuestro análisis, vamos a recomendar otro video igualmente interesante y original como el de Tostitos. En este caso, es el del juego Mario Land: Shake It (www.youtube.com/ wariolandshakeit2008), en el que podemos ver cómo se cae en pedazos la pantalla de YouTube de un modo muy interesante, interactuando con el video.

9/24/10 4:22:32 PM

Bombo - FASC WEB DESIGN FINAL 1 PAG - Sep 10 - EDITABLE.indd 1

05/10/2010 15:10:58

BOMBO - SUSCRIPCIONES UDD NUEVO IV - Oct 10 - EDITABLE.indd 1

23/09/2010 18:09:03