◊ El Blog de Lîtus ◊

Perfil

Categories

Enllaços

Publicacions recents

Idioma

Autor: Carles Araguz López, Publicat: 12:22:51 09/11/2008

Categories: Programació, Món i cultura.

___Hola estimats internautes.
Ja sé que fa temps que no us escric gaire cosa, però avui us vull presentar un dels meus treballs. Darrerament he estat treballant en en desenvolupament d'una web del meu barri: la web de l'Associació de Veïns de Sant Andreu de Palomar; una web estèticament lleugera i elegant on predomina una gama àmplia de grisos contrastada amb unes gotes de blau.

___Està desenvolupada amb XHTML i CSS, i inclou alguna aplicació Javascript.

___Per a l'associacionisme tenir un lloc a la xarxa és una eina vital, tant per a la comunicació i difusió com per a enfortir la vinculació associació-veí (en aquest cas).
Per tot això, i perquè és el projecte per al qual he estat enfeinat aquest setembre, us animo a que la visiteu:

Autor: Carles Araguz López, Publicat: 17:46:08 14/09/2008

Categories: Ciència i tecnologia.

___Les vacances a Mallorca amb els amics de tota la vida, m’han portat diverses reflexions. Entre les reflexions que ens fèiem, hi havia la pregunta: “de què fem els entrepans avui?” o “què fem per sopar?”. Fins i tot algú s’atrevia a preguntar “quin és el plan per avui?”. Totes les preguntes tenien una resposta simple, no calia encetar un debat per ninguna d’aquestes preguntes, ni per cap que s’hi assemblés. El que sí que va generar debat (i si no recordo malament, no és la primera vegada) va ser una pregunta molt relacionada amb l’ambient en el que ens movíem.


___Tothom sap que Mallorca és una illa del Mediterrani que forma part de les Illes Balears. I segurament tothom deu saber, o pot arribar a deduir, que si t’endinses una mica en les carreteres costeres de l’illa pots arribar a trobat platges “caribenques”. Les anomenades platges es caracteritzen per tenir una aigua clara i blava, a l’estil de les platges del Carib. Va ser justament aquesta aigua, la que va conduir la discussió de la que us vull parlar.


___“L’aigua, és blava?”. Aquesta va ser la pregunta que algú va formular (o no), i que va ser debatuda durant, si més no, mitja hora. A la discussió hi trobàvem dos fronts; els qui defensàvem que l’aigua era blava (noteu la meva inclusió dins el grup) i els que contradeien aquesta afirmació. M’agradaria poder-vos reproduir alguns dels arguments que ambdós grups van emprar:
Per defensar que l’aigua no és blava, l’argument central de la batalla verbal va ser afirmar que l’aigua és blava perquè el cel és blau, és una qüestió de reflexió de la llum. En certa mesura podríem estar-hi d’acord, o com a mínim ens podria fer dubtar, però si raonem aquesta resposta, ens adonarem que és falsa. L’aigua no és blava (o no es veu blava) perquè el cel sigui blau. Si això fos així l’aigua seria sempre del color del cel, i quan hi ha núvols, un dia grisós qualsevol, l’aigua no és pas gris fosc, sinó d’un color blau fosc molt poc lluminós. Si hi ha algú que arribats aquest punt de l’article, es nega rotundament a creure que l’aigua és blava, el convido a seguir llegint.


___Per altra banda, anàvem a platges on l’aigua, de color gairebé turquesa, tintava el fons d'aquest mateix color. Era difícil raonar que l’aigua era blava per la reflexió del cel, quan ens trobàvem davant d’una situació com aquesta [veieu la fotografia de l'article]. Personalment era del parer que res pot ser 100% transparent. També dèiem que si l’aigua no és blava, com era possible que des de l’espai es veiés blava? Si ens hi aturem un moment segur que recordem una imatge de qualsevol dels satèl·lits que tenim instal·lats, mostrant-nos una part de la Terra (negada per la llum del Sol, o no) en la que l’aigua dels oceans és de color blau; fosc o clar depenent de la llum. Hi havia qui deia que quan es fa fosc, que el cel és vermellós l'aigua es veu vermella, però és fals, es veu més vermella que de costum perquè el color del cel incideix sobre l'aigua, però des de l'espai, l'aigua que nosaltres estem veien vermellosa segueix sent blava. En aquest cas sí que és qüestió del color del cel, però el grau de vermellor que veiem en l'aigua no és el mateix que el que té el cel.


___La discussió degenerava en altres qüestions, un xic més físiques, com per exemple: com incideix la llum en un material i com i què se’n reflecteix per donar la sensació de color. També es va comentar que l’aigua podia no ser blava però les característiques dels oceans o els llacs així ho feien possible.


___El cert és que des de fa força temps que l’argument del cel és un dels més coneguts popularment. Però també és cert que aquest argument és fals. L’aigua és intrínsecament blava, gràcies a la seva composició química. [als enllaços hi trobareu tot el raonament]


___No cal discutir gaire, ni llegir gaire llibres per saber com es pot demostrar, simplement regirar una mica Internet, visitar piscines municipals o fer una mica el manetes construint un estri que ens ajudi a veure-ho millor.
L’aigua és químicament blava. En poques quantitats (un got d’aigua, una gerra d’aigua, una banyera, etc.) no es pot apreciar, de la mateixa manera que no podem apreciar de quin color és la Coca-Cola amb una sola gota sobre el dit: sembla transparent. Per buscar de quin color són les coses, només cal que agafem un espectroscopi (que evidentment no té ningú a casa). Aquest aparell permet conèixer la longitud d’ona que cada material absorbeix, dispersa o reflexa. En el cas de l’aigua, l’espectroscopi mostra que el color de l’aigua és el blau proper a l’indi. Si arribats a aquest punt de l’article seguiu creient que l’aigua no és blava, us recomano que seguiu llegint una mica més.


___Hi ha algunes piscines enrajolades de color blanc (s’ha de reconèixer que no gaires). Sense aigua, la superfície de la piscina es veu de color blanc, del color de la rajola. Però al afegir-hi aigua, en aquest cas en grans quantitats, podem observar com els fons de la piscina, ja no és tant blanc com el vèiem abans, sinó que adopta un color blau turquesa molt lleuger. Una altra prova que podeu fer (que és més a l’abast de la gent) és agafar un tub rígid completament opac, per exemple una canonada de metall (de coure, per exemple). El tub hauria de mesurar uns quatre metres de llargada en línia recta, i no caldria que tingués un diàmetre gaire gran, amb uns 4 o 5 cm n’hi ha de sobres. Tapeu-lo amb un vidre o un plàstic transparent per una punta i ompliu-lo d’aigua (o d’aigua destil·lada si ho preferiu). Col·loqueu un paper blanc o una superfície blanca a sota i il·lumineu-la amb llum blanca. Acte seguit, i amb l’ajuda d’una escala, mireu per la part superior del tub, deixant davant de la vostra retina la columna d’aigua, cedida del vidre i acabada a la superfície blanca. Podreu apreciar com l’aigua que aparentment semblava transparent és ara de color blau clar, igual que succeïa a la piscina de la que us parlava*.


___De fet, la afirmació de que res és transparent és, en part, certa. Afirmava que una quantitat determinada de molècules no podien ser mai completament transparents, ja que són massa (sòlida, líquida o gasosa) i com a tal, ha de tenir algun color. Això és, com us deia en certa mesura, ja que tot té un color, en el rang de llum visible, o no. L'aigua pesant (de deuteri, ió de l'hidrogen), que s'usa com a mostra comparativa per comprovar similituds amb l'aigua, és transparent, no té color "visible" però de fet si que absorbeix una determinada longitud d'ona infraroja.


___La discussió s’acaba aquí. No cal donar-hi més voltes, simplement fer la prova experimental i comparar resultat amb hipòtesi.


___Us adjunto els enllaços que m’han ajudat a entendre perquè l’aigua és blava, hi trobareu l’explicació en termes més científics i aprofundireu més en les característiques de la llum i els l’absorció espectral:

• Why is water blue?, article sobre el color de l'aigua. Explica físicament el fenomen de color blau a l'aigua i l'experiment mencionat en aquest article.
• Why water is blue? (vibrations & rotations), un article sobre el color de l'aigua el gel i deribats
• Water absortion spectrum, explicació química i física de les vibracions i l'absorció espectral de l'aigua
• Water absortion
• Color of water, article de la Wikipedia sobre el color de l'aigua
• Spectral line, informació de la Wikipedia sobre la línia espectral
• Emission spectrum, ídem
• Líneas de Fraunhofer, informació sobre el gràfic de Fraunhofer
• Color temperatura, informació de la Wikipedia sobre la temperatura del color

__________
* L'experiment està extret del primer enllaç i està redactat com per fer-lo a casa. No ho he provat amb aquests materials.

Autor: Carles Araguz López, Publicat: 23:36:34 09/07/2008

Categories: Programació, Tricks.

___Bienvenidos a la primera sesión de tutoriales Flash de pelouse sur l’océan. En estos posts encontraréis tutoriales de diseño y programación Flash (ActionScript 2.0 ó 3.0), para la creación de aplicaciones dinámicas y atractivas o efectos simples para webs o juegos Flash.

___El primer de los tutoriales es el que os enseñará cómo crear chispas alrededor del mouse, cada vez que este se desplaza. Empecemos.

___Para este tutorial podemos usar cualquier versión de Flash que incorpore ActionScript 2.0. He escogido esta versión porque aún hay muchos usuarios que usan este lenguaje en su versión 2.0, y que aún no se han atrevido a migrar a la versión 3.0. En mi caso, he usado Adobe Flash CS3 Professional para la creación de este efecto.




Para empezar, abrimos el programa y creamos un nuevo documento en blanco (Ctrl + N). Seleccionamos la capa que nos aparece por defecto y la renombramos. Llamémosla “AS”. Siempre que hagáis aplicaciones dinámicas con código (AS 1, 2 ó 3), es aconsejable que mantengáis la capa del código aislada de la del contenido, y que, además, la coloquéis en el orden superior, ya que es el que primero se carga en el Player de Flash.


___Cambiad el color de fondo a #1b0707, y la velocidad de fotogramas a 30 fps para tener mayor calidad de reproducción.


___Una vez hecho esto, guardamos el archivo en un directorio de nuestro PC. Yo lo he llamado mouse_spark.fla, vosotros podéis llamarlo como queráis. Recordad que por defecto, cuando exportamos nuestra película el archivo .swf generado estará en el mismo directorio y tendrá el mismo nombre.



Para este efecto debemos preparar antes la partícula de chispa que vamos a utilizar. Luego la repetiremos mediante ActionScript. Creamos un nuevo símbolo (Ctrl + F8), y seleccionamos “Clip de película”. El nombre que usaremos no es vinculante, en este caso; yo le he puesto pqa_mc.

Clicamos en Aceptar y veremos cómo nos aparece un nuevo elemento en nuestra biblioteca (Ctrl + L, para ver la biblioteca si la tenéis oculta). Hacemos doble clic en el icono de nuestro clip de película (Movie Clip ó MC), para acceder al espacio de trabajo de éste y a su línea de tiempo.
[strat]Una vez ahí, crearemos con la herramienta óvalo (Tecla O) un círculo cualquiera en medio de nuestro MC. Una vez tengamos nuestro óvalo, lo seleccionamos con la herramienta de selección (Tecla V) y veremos cómo en el panel de propiedades nos aparecen las características de la forma. Vayamos a cambiarlas:


___Una vez tengamos la medidas adecuadas (20 x 20 px.) y lo hayamos centrado (x: -10, y: -10), vamos a darle color. En el inspector de color (Shift + F9), abrimos el panel de colores de trazo, y marcamos la opción sin color (un cuadrado blanco con una franja roja). Seleccionamos, luego, el bote de pintura (es decir el color de fondo) y nos aparecerán unas cuantas opciones. Escogemos el tipo “Radial”. Esto nos creará un degradado radial centrado en nuestro círculo. El color que usaremos es el #ffcc33. En el centro del círculo el alpha (la opacidad) será del 5%, mientras que en los extremos será de 0%.

Podéis mover el color del extremo y situarlo un poco más adentro, para que el color no quede recortado bruscamente, aunque en muchos casos depende de la pantalla que utilicéis.

___Una vez seguidos estos pasos, tendremos en nuestro MC, un círculo con degradado radial muy desvanecido, de 20 x 20 píxeles y completamente centrado en nuestro escenario. Este será el “brillo” de nuestra chispa. Lo siguiente que vamos a hacer va a ser darle movimiento. Seleccionamos la capa dónde tenemos el círculo y creamos un fotograma clave (Keyframe, Tecla F6), en el fotograma 41 (aproximadamente). Seleccionamos el área que los separa y con el botón secundario del ratón marcamos la opción “Crear interpolación de movimiento”. Hacemos lo mismo para el último fotograma si éste no se ha vuelto de color azul. Una vez tengamos los fotogramas clave creados y la interpolación de movimiento veremos que todo el grupo de fotogramas de la capa, se vuelve azul. Nos colocamos en el último fotograma y movemos nuestro círculo unos 50 píxeles hacia abajo. Si presionamos la tecla “Enter” podemos ver cuál será el movimiento de nuestra chispa.

___Una vez tengamos esto, añadiremos un fotograma clave (F6) en medio de la línea de tiempo, alrededor del fotograma 32. No hacemos ninguna modificación en este fotograma. Volvemos de nuevo al último de nuestros fotogramas, y seleccionamos nuestro círculo. Veremos que en el panel de propiedades ya no aparecen las mismas características, pues ahora se trata de un símbolo.

___Marcamos la opción “Alpha” en el apartado Color del panel de propiedades, y le damos un valor del 0%. Lo que estamos haciendo ha sido marcar un punto de anclaje desde el que la opacidad empieza a disminuir. En el fotograma que hemos creado en medio, el alpha seguía siendo 100%, mientras que al llegar ahí empieza a disminuir hasta llegar al final, dónde será 0%.


___Es importante que hagáis esto, después de haber conseguido el movimiento, ya que sino, la partícula se movería y luego se desvanecería; cuando lo que queremos es que se mueva y se desvanezca a la vez.

___Ahora toca crear el punto de luz de la chispa. Es una cosa relativamente sencilla, veréis. Seleccionad el primer fotograma de la animación que hemos creado anteriormente. Como os he dicho, Flash ha convertido nuestro círculo en un símbolo, pero eso no significa que no podamos editarlo. Para ello, hacemos doble clic en el círculo. Esto nos conducirá al espacio de trabajo de ese símbolo. Para comprobar que estamos ahí, simplemente fijaos en la barra que se encuentra debajo de las capas (o encima, depende de la versión de Flash que usemos). Allí aparecerá algo como “Escena > pqa_mc > Animar 01”.

Esto significa que estamos editando ese símbolo. Una seguros de estar dentro, sólo veremos una capa con un solo fotograma. Crearemos otra capa encima de la que ya tenemos. En esta nueva capa, dibujaremos un circulo cualquiera como lo hicimos anteriormente. Luego le asignaremos la medidas 1 x 1 px, y el color (#ffcc33). No le vamos a dar degradado de ningún tipo. Lo centramos en la posición x: -0.5 e y: -0.5.
Ahora tenemos una capa con un degradado radial de 20 píxeles y un pequeño punto de un píxel, de color amarillo. Si vemos que estos dos círculos no están centrados, seleccionamos el circulo que no está centrado y lo volvemos a colocar, dándole la x e y correspondiente (las anteriormente mencionadas para cada uno de ellos).



Volvemos al escenario principal en el que anteriormente hemos nombrado una capa “AS”. Seleccionamos el único fotograma que tenemos y presionamos F9 en nuestro teclado. Eso nos abrirá la ventana de acciones. Ahí será donde escribiremos nuestro código.
Primero definimos las variables:


Únicamente usaremos una variable auxiliar llamada “c”, para contar el número de partículas creadas, y para darles a cada una, un número que las diferencie de las otras. Será su número de ID.
Para crear nuestras partículas de chispa alrededor del mouse, necesitamos dos funciones, makePQA(), que la crea, y deletePQA() que la elimina.
La primera que escribiremos (este orden sólo debe seguirse para AS 2.0) es deletePQA. Esta función usa una única variable de tipo MC llamada pqa_mc, para determinar qué es lo que hay que eliminar, qué chispa queremos eliminar.



Podemos suprimir la línea de código en la que se encuentra el “trace”, simplemente sirve para monitorizar la función.

___La función makePQA, usará tres variables: mX y mY, que son las coordenadas del mouse y r, que será el radio de separación máximo entre la chispa y el puntero del mouse.


___Básicamente lo que hace esta función es calcular una posición relativa, usando las coordenadas del mouse. Coloca el clip de película en el escenario y le da un nombre de instancia del tipo “pqa_i_mc”, donde la "i" es el valor del contador mencionado anteriormente. Una vez creado incrementa en uno el contador.

___Igual que para la función anterior, podemos suprimir las líneas de código en las que aparece la función “trace”.

___Por último añadimos este bloque de código, que creará dos partículas (una separada un máximo de 5 píxeles del puntero y otra un máximo de 10, cada vez que haya un movimiento de ratón. Si el ratón no se mueve no se crean estos destellos. Podríamos añadir más líneas y crear más puntos de luz a la vez, pero con esto es suficiente para no recargar el reproductor.


___Una vez escrito el código en el fotograma principal, volvamos al MC donde hay la animación de la partícula. Allí crearemos una capa nueva encima de la que ya teníamos. Crearemos también un fotograma clave (F6) al final. En este pondremos un bloque de código. Para hacerlo, seleccionamos el fotograma, y presionamos F9.


___Esto hará que al terminar la reproducción de la animación, ésta de elimine a sí misma, llamando a la función con esa finalidad (deletePQA).



Si ahora, probásemos la animación, el resultado sería nulo. Por mucho que moviésemos el ratón no veríamos ningún destello ni punto de luz. Esto sucede porque el código principal carga un MoviClip de la biblioteca con nombre pqa_mc. Fijémonos en la línea de ActionScript dedicada a ello:



Al inicio os he dicho que no hacía falta que el nombre de nuestro clip de película fuese ninguno en concreto, y es cierto. El nombre de la biblioteca sirve para distinguir los distintos elementos de nuestra librería, pero para importarlos y traerlos al escenario, debemos “vincularlos”. Esto significa de debemos darles un nombre, para que ActionScript se comunique con ellos. Para hacerlo, hacemos clic encima del símbolo de la biblioteca con el botón secundario del ratón, y seleccionamos “Vinculación” (en inglés “Linkage”).

Se nos abrirá una ventana. Allí marcamos “Exportar para ActionScript” y “Exportar en primer fotograma”. Le asignamos un nombre de Identificador. Esta vez el nombre tiene que ser “pqa_mc”, de lo contrario, ActionScript no podrá cargarlo en el escenario.

___Una vez terminado esto, ya podemos exportar nuestra película (Ctrl + Enter) y ver el efecto que acabamos de crear.

___Si al exportar la película veis que se os reproduce con mucha lentitud, no os preocupéis. Eso es debido a que el reproductor de Flash genera y elimina muchos elementos por segundo. Si probáis de abrir el archivo .swf generado, veréis que funciona perfectamente y sin trompicones.


___Espero que os haya gustado y que podáis aplicarlo en vuestras aplicaciones.
Podéis descargaros los archivos aquí: flash_tut_01.zip

Última visita:
SPAM comment: on post: 31. SPM: 8805