Visites: 7889
Mouse spark [Flash AS2.0 Tut]
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.

EJEMPLO del efecto


PASO 1: Preparando el escenario.

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.

(Imagen)


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

(Imagen)


___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.


PASO 2: Creando la partícula.

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.

(Imagen)

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:

(Imagen)


___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%.

(Imagen)

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%.

(Imagen)


___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”.

(Imagen)

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).


PASO 3: Programando.

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: 

// -- Definimos las Variables

// -- -- variable contador

var c:Number = 0;

Ú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. 

// -- Definimos la función deletePQA.

function deletePQA(pqa_mc:MovieClip) {

	trace("Removed PQA-"+pqa_mc);

	removeMovieClip(pqa_mc);

}


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. 

function makePQA(mX:Number, mY:Number, r:Number):Void {

	var rotAbs:Number;

	var rX:Number;

	var rY:Number;

	var pqa_mc:MovieClip;

	var scale:Number;

	_root.attachMovie("pqa_mc","pqa"+c+"_mc",_root.getNextHighestDepth());

	// Calcula posición:

	rotAbs = Math.floor(Math.random()*360);

	rX = Math.cos(rotAbs)*r;

	rY = Math.sin(rotAbs)*r;

	pqa_mc = eval("pqa"+c+"_mc");

	pqa_mc._x = mX+rX;

	pqa_mc._y = mY+rY;

	scale = Math.round(Math.random()*100)+20;

	pqa_mc._xscale = scale;

	pqa_mc._yscale = scale;

	trace(pqa_mc);

	c++;

	trace("PQA-"+c);

}

___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. 

this.onMouseMove = function() {

	makePQA(_root._xmouse,_root._ymouse,5);

	makePQA(_root._xmouse,_root._ymouse,10);

};

___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. 

stop();

_root.deletePQA(this);

___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).


PASO 4: Vincular.

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: 

_root.attachMovie("pqa_mc","pqa"+c+"_mc",_root.getNextHighestDepth());


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”).

(Imagen)

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

Veure l'article amb comentaris
Agefir a Menéame, a del.icio.us o envia'l per mail a un amic

separador


Avui, poesia
Autor: Mercè Català Sánchez, Publicat: 16:55:59 02/07/2008
Categories: Literatura.

___
Sens badar boca t’ofusques,
dins un bri de misèria,
a batzegades de l’existència
per mostrar teves entranyes.

Aquell qui no plora,
qui no obre busques amb la mirada,
com quan, desencantada,
segueixes desfilada del vestit la vora.

Per, tan sols preguntar-te
el perquè del dolor
de no poder delimitar un color
sense deixar d’ofegar-te.

Esquinces mans i ulls;
esborres fets i mots;
et flagel•les a clots;
i del que crees res no culls.

Claves centenars d’hores
buides de ment,
maltractant-te amb subtil pensament,
bombejant teves espores.

Intent insòlit de veure-hi tapat,
errors encreuats
qui sap quans cops trobats
del teu fracàs estrèpit tant ben forjat.

Ai, trista del teu orgull,
què en faràs si ara ja res no culls.

Mercè Català Sánchez

Veure l'article amb comentaris
Agefir a Menéame, a del.icio.us o envia'l per mail a un amic

separador


Memristor, electrònica amb memòria.
Autor: Carles Araguz López, Publicat: 00:28:36 12/06/2008
Categories: Electrònica, Ciència i tecnologia.

img/post_img/memristor.jpg___Fa uns dies, em van deixar anar una pregunta força curiosa: “quin és aquest nou component electrònic tan innovador?”. Jo, estudiant d’electrònica no en sabia res de cap nou component, així que vaig demanar a l’interessat en la resposta que em passés l’enllaç de la notícia on ho havia llegit (Barrapunto.com). Ara, després de llegir-la i de regirar una mica Internet, em disposo a escriure un article sobre el memristor (o memristència).


___L’electrònica està construïda com a base, a partir de tres elements passius fonamentals: les resistències, els condensadors, i les bobines. D’aquests tres elements, podem descriure tres característiques, la resistència (R), la capacitat (C) i la inductància (L), respectivament. Les fórmules que descriuen el comportament d’aquests elements i que relacionen el potencial i la intensitat amb aquests valors, són:
(Imagen)

On V és tensió, I corrent, q càrrega, i Φ és el flux magnètic.


___Tot això és la base de la teoria de circuits, la base de l’electrònica que qualsevol estudiant d’enginyeria aprèn a l’inici de la carrera. Tot i que no tothom ho veu tan senzill... Va ser precisament un estudiant d’enginyeria electrònica qui va plantejar la necessitat de l’existència d’un quart component bàsic. D’origen filipí, Leon O. Chua (wiki) va plantejar sobre paper les característiques d’aquest element. Fins ara, tot el que Chua havia plantejat l’any 1971 eren teories, només certes a les matemàtiques, per mitjà d’equacions. L’element del que parlava l’ara professor de la University of California, no era altra cosa que l’anomenada memristència.
A l’abril de 2008, i gràcies als avenços en nanotecnologia, l’equip d’investigadors d’HP Labs (Hewlett-Packard), van desenvolupar els primers prototips funcionals de memristències. L’anomenat “quart element”, ja ha aparegut, i com podreu comprovar, revolucionarà els fonaments de l’electrònica.


___El nom, sorgeix de la unió de les paraules memòria i resistència. El memristor és un element en què el flux magnètic (Φ), és una funció de la càrrega que flueix per aquest. Es tracta, com el seu nom indica, d’un component passiu que actua com una resistència però amb memòria, capaç de recordar la càrrega (q) total, portada pel corrent que hi passa a través. Així com anteriorment parlàvem de la resistència, la capacitat, i la inductància, també en aquest cas podem referir-nos a un valor de memristància, el qual, en aquest cas, és funció de q:
(Imagen)

En un instant donat, una memristència actua igual que una resistència. De fet, un memristor lineal (M constant), és completament indistingible d’una resistència de R = M.


___I quines són les millores, avantatges o canvis que sofrirà l’electrònica? Ningú no sap del cert com d’important serà el salt, dins d’un món molt acostumat a fer salts, però on tothom coincideix és que serà un salt de base. A partir d’ara, comptem amb un element nou a l’hora de dissenyar circuits.


___Un dels beneficis que ofereix la resistència de memòria, és el fet de poder recuperar la càrrega que hi circulava, a l’instant. A l’article que vaig llegir primer (enllaç), fins i tot es parlava de la possibilitat de fabricar ordinadors d’encès instantani. Aquesta idea parteix del fenomen de memòria que comentava: una sola memristència és capaç d’emmagatzemar un bit d’informació binària. Així (i tenint en compte que els prototips de memristència d’HP Labs no mesuraven més de 150 àtoms d’ample), es poden crear memòries no-volàtils de 100GB en un centímetre quadrat [és un dels exemples d’aplicació de resistència de memòria que han ja fabricat als laboratoris de la Hewlett]. A aquesta capacitat de concentració, 10 vegades major que la d’un bloc de memòria RAM actual, se li ha de sumar la característica de no-volatilitat que presenta el memristor.
El PC d’encès a l’instantani, és possible usant memòries RAM fabricades amb aquesta tecnologia, que no perdessin la informació en deixar de rebre corrent (mantenint la mateixa velocitat d’accés que amb una RAM actual).


___Un altre benefici que ofereixen les memristències i que ja va enunciar Leon Chua, és la possibilitat de poder generar circuits que simulin el comportament del cervell humà. Tot i que això, encara està per descobrir.


Enllaços interessants:


Veure l'article amb comentaris
Agefir a Menéame, a del.icio.us o envia'l per mail a un amic

separador


Última visita:
01:19:16 22/08/2008