Carregant...
Feedback

Disseny líquid sobre Flash: adaptar-se a qualsevol mida

 

Durant l'últim any hem estat experimentant amb webs basades en disseny liquid sobre programació en Flash. Aquí us deixem algunes de les nostres conclusions.

El disseny líquid permet que les pàgines web s'adaptin a la mida de la pantalla, fent que algunes de les seves parts es redimensionin en mida o es redistribueixin per la pantalla segons les mides que la finestra del navegador tingui en cada moment.

Encara que a primera vista, aconseguir que la pàgina web s'adapti a la pantalla de forma dinàmic pot semblar molt interessant, no sempre és una bona opció. Dependrà a cada moment del tipus de lloc web i del tipus d'informació que es vol visualitzar en el seu interior.

Tenint en compte les limitacions que poden presentar les webs desenvolupades completament en Flash, pensem que la millor forma de jugar amb disseny líquid és utilitzant imatges de fons que puguin adaptar-se a la mida de la finestra o posicionant els elements gràfics en les zones laterals de la finestra.

A continuació podeu veure algun exemple:

Un bon exemple de disseny líquid aplicat a imatges en background es pot observar en una web que hem desenvolupat conjuntament amb l'empresa de disseny gràfic Bifid, a on ha estat necessari disposar d'una àrea el més gran possible per mostrar imatges de muntanya, www.guiesnordsud.net.  El lloc web ha estat desenvolupat completament en Flash i es pot observar com en funció de la mida de la finestra del navegador, l'imatge de fons s'ajusta a la pantalla i alguns detalls gràfics es mantenen flotant per les vores de la part inferior de la pantalla a mesura que la mida de la finestra augmenta o disminueix.

 

/blog/images/flash_liquid_design.png

 

Un altre exemple de disseny líquid el podeu trobar a una altra web molt simple que vam desenvolupar l'any passat (disseny gràfic de David Clos), www.recrec.cat, a on el peu de pàgina disposa de dues zones (imatge a l'esquerra i dades de contacte a la dreta) que es reajusten automàticament a la mida de la finestra del navegador.

 

/blog/images/example_liquid_design2.png

10 comentaris

Estan muy buenos los trabajos, pero... ¿algun manual de donde aprender a hacer sitios como esos?, hace mucho he intentado con el escalado liquido y no me ha dado resultado, gracias !
Bernardo Ibarra 09.03.2010 | 06:06
Hola Bernardo, pues la verdad es que nosotros no conocemos ningún manual que explique como hacerlo. Al principio de trabajar con Flash líquido buscamos información de como hacer este tipo de formatos web y no encontramos mucha, así que al final nos decidimos por crear nuestro propio framework de código en ActionScript para poder controlar las dimensiones líquidas y posiciones relativas de los elementos en Flash. No puedo asegurártelo, pero en cuanto tengamos un rato podría pasarte el código de Actionscript que hemos utilizado con un ejemplo práctico de uso. Un saludo, Jordi.
Jordi 12.03.2010 | 19:54
Muchas gracias Jordi, la verdad te agradeceria muchisimo la ayuda que me puedas prestar con alguna informacion que me ayude a poder realizar este tipo de sitios. Quedo pendiente y gracias de nuevo !!!
Bernardo Ibarra 13.03.2010 | 00:01
Bueno, yo también estoy en la misma que Jordi, y aprovecho que parecen muy buena gente para pedirles que, de ser posible, también puedan compartir tan valioso código con migo... Muchas Gracias!
Juan Manuel Cantero 18.03.2010 | 15:00
en la misma que bernardo ja!
Juan Manuel Cantero 18.03.2010 | 21:51
Hola he visto el articulo y me ha parecido muy interesante ya que este tema me ha dado bastantes quebraderos de cabeza. Y si pudierais pasar el framework con un ejemplo de uso estaria bastante bien. gracias
zoaks 06.05.2010 | 10:43
Hola, he preparado una pequeña demo que contiene las funcionalidades básicas para posicionar de forma líquida cualquier movieclip en diferentes puntos de la ventana. Está pensada para poder funcionar a partir de Flash Player 8. Si queréis descargar la demo y leer una pequeña explicación de su funcionamiento, os dejo más información en el siguiente post: http://www.conductiva.com/es/blog/post/61
jordi 08.05.2010 | 14:11
Jordi...

Simplemente, gracias... excelente informacion y aporte para quienes hemos estado buscando como implementar ese tipo de sitios. De nuevo muchas gracias !
Bernardo Ibarra 09.05.2010 | 13:27
Jordi, te agradezco mucho por la informacíon, la verdad que me resulta mas que útil como punto de partida.
Un abrazo!!!
Juan Manuel Cantero Petryna 10.05.2010 | 15:15
thanks!
tadd 16.09.2010 | 08:50

S'han tancat els comentaris per aquest post.
 
Conductiva • © 2007-2009 Tots els drets reservats  • condicions generals