lashNo recuero la razón, pero esta mañana temprano pensé que necesitaba desplazar un MovieClip en Flash en diagonal, entre los puntos A y B, mediante ActionScript. Por supuesto el proceso es mucho más sencillo de lo que un perfecto inexperto como yo se temió… me temí… en un primer momento. Caray, ¡si incluso terminé buscando el viejo, obtuso y olvidado Teorema de Pitágoras! ¿Por qué?

Es fácil de entender, sobre todo si contamos con un gráfico que lo muestre en imágenes como el que he situado justo debajo de este párrafo.  Se trata básicamente de que, cada vez que unimos dos puntos mediante una línea diagonal sobre un plano, obtenemos siempre un triángulo uno de cuyos ángulos es, por cierto, ángulo recto. El triángulo está constituido por dos catetos cuyas longitudes son fáciles de calcular mediante sencillas operaciones de Flash, más una hipotenusa –¡oh, cielos, eso no!– que es casi igual de fácil calcular partiendo de las longitudes de los catetos y utilizando la fórmula la suma del cuadrado de los catetos es igual al cuadrado de la hipotenusa, esto es, h² = c² + c².

De modo que le di un par de vueltas al asunto, deseé que un cuervo viniese a sacarme los ojos y, a guisa de compensación, al menos saqué en claro una cosa: las longitudes de los lados de un triángulo, como se puede observar en la película inferior. Lástima que sólo reparé más tarde en la facilísima forma de desplazar un MovieClip en diagonal, y que tanto _x como _y lleguen a su destino casi al mismo tiempo. (Pues, de otro modo, lo que conseguimos es aproximar independientemente las coordenadas vertical y horizontal a sus destinos. Ver flash inferior: idealmente, el triángulo rojo debería ocupar todo el triángulo de borde negro.)

Calcular la hipotenusa de un triángulo haciendo uso de ActionScript no entraña ningún misterio. Veamos:

Hiponetusa² = cateto² + cateto²;

/* Math.pow(x,y) eleva el primer valor a la potencia expresada en el segundo valor. Por ejemplo:

cuatroCuadrado = Math.pow(4,2); trace(cuatroCuadrado) [16].*/

Hipotenusa2 = Math.pow(catetoA,2) + Math.pow(catetoB,2);

/* Math.sqrt(x) extrae la raíz cuadra de x. Por ejemplo: Math.sqrt(16) devuelve 4 (4*4=16).*/

Hipotenusa = Math.sqrt(Hipotenusa2);

Pero, como mencioné antes, averigüé un método tonto pero efectivo de resolver el problema sin necesidad de recurrir a los cálculos un poco más complejos del Teorema de Pitágoras. En un primer momento mi idea era recalcular alguna de las aristas del triángulo (esto es, uno de los catetos: o bien el eje X, o bien el eje Y), camino éste que no condujo a ninguna parte. El nuevo método me asaltó y, bueno, di un beso en la frente a Pitágoras y le sugerí que no volviese a aparecer en mi vida… jamás.

onClipEvent(load)

{

/* Establece aleatoriamente las coordenadas de destino: Math.random() crea un número al azar mayor que cero y menor que uno. Al multiplicarlo por 500 (el ancho de la película flash de muestra, ver arriba), obtenemos un número comprendido entre 0 y 500. Math.round() sencillamente lo redondea al número entero más cercano. En cualquier caso, podemos utilizar las coordenadas de destino que prefiramos, o calcularnas a nuestra conveniencia. */

destinoX = Math.round(Math.random()*500);

destinoY = Math.round(Math.random()*281);

/* La altura y la anchura son, de hecho, las longitudes de los catetos, pero ahora eso poco importa. La altura se calcula sustrayéndole a la posición del MovieClip la coordenada Y de su destino. Si, por ejemplo, el MovieClip se encuentra en la coordenada 100 y su destino en la 20, la altura es igual a 80. La anchura funciona de modo análogo en el eje X.*/

altura = this._y – destinoY;

anchura = this._x – destinoX;

}

onClipEvent(enterFrame)

{

/* En este ejemplo, el MovieClip se moverá verticalmente (eje Y) de pixel en pixel, y sólo se desplazará, como se ve en la siguiente condición, si su posición actual (this._y) es diferente de su destino (destinoY).

if (this._y != destinoY) {

/* La siguiente condición está formulada del modo menos amigable posible, aunque resulta un operador sumamente práctico:

(si se da la condición)? ocurre esto: si no, esto otro.

O lo que es lo mismo: si el destino de nuestro MovieClip está situado por debajo del propio MovieClip, entonces debemos moverlo hacia abajo, sumándole uno a uno hasta que las coordenadas coincidan. Por el contrario, si el destino está situado por encima del MovieClip, debemos restarle a este último, de modo que se desplace hacia arriba, hacia su destino. */

(destinoY > this._y)? z = 1: z = -1;

this._y = this._y + z;

(destinoY < this._y)? m = -1: m = 1;

/* He aquí lo más importante para mover diagonalmente nuestro MovieClip. Ya sabemos cómo desplazarlo en el eje Y; ahora necesitamos desplazarlo en X a una velocidad diferente, para que las coordenadas de destino (x, y) sean alcanzadas a la vez.

Como acabamos de ver, el MovieClip se desplaza pixel a pixel a lo largo del eje Y. Sin embargo, y siempre que la anchura y la altura contengan valores distintos, el espacio que debe recorrer el MovieClip para alcanzar su destino es diferente para X y para Y. Si Y se mueve píxel a píxel, X ha de moverse a un intervalo mayor o menor, pero no igual. Imaginemos por ejemplo a Pedro y Juan, quienes viajan en coche con intención de llegar a Madrid a la misma hora. Sin embargo, Juan partió desde Logroño, mientras que Pedro lo hizo desde Toledo, ambos en el mismo instante; dado que Logroño está mucho más lejos de Madrid que Toledo, Juan habrá de viajar a mayor velocidad a fin de cubrir mayor distancia en idéntico tiempo. Pues eso.

En este caso, la fórmula para desplazar el MovieClip a través del eje X es la siguiente: */

this._x = this._x + anchura/altura*m;

/* Como sabemos, la anchura equivale al desplazamiento de X, mientras que la altura lo hace al desplazamiento de Y. Al dividir anchura por altura, obtenemos el número de píxeles horizontales que equivalen al número de píxeles verticales. */

}

}

Y bien, básicamente esto es todo. Ahora ya disponemos al menos de un modo de desplazar diagonalmente un MovieClip a través del escenario de una película flash, e incluso aunque en este momento cause la sensación de que se trata de un conocimiento inútil, estoy convencido de que en el futuro podrá extraérsele alguna utilidad.

Nota introductoria: escribí este pequeño tutorial hace aproximadamente un año y ahora me pregunto para qué sirve. No obstante, lo subo a Graficos101 con la mejor intención.

Aunque el debate sobre las ventajas de los monitores LCD frente a los tradicionales CRT aun no está resuelto, y todavía es frecuente que algunos usuarios se lamenten de determinadas limitaciones de las pantallas de cristal líquido, como por ejemplo la cuestionable representación de los colores, el mercado ha hablado: los LCD se han impuesto y los CRT, casi, han pasado a la historia.

Quizá mi experiencia te resulte familiar: cuando mi vieja y desvencijada pantalla de tubo de rayos catódicos mordió el polvo y me vi forzado a comprar un sustituto, y cuando adquirí el sustituto en cuestión –un LCD de aspecto anodino y espectacular a un mismo tiempo– y lo instalé, exclamé:

–¡Cielo santo, ¿cómo esperan que pueda trabajar con esto?!

No recuerdo qué fue primero, si el sordo dolor de cabeza que se alojó en las paredes de mi cráneo o la frustración porque las letras no aparecían en pantalla tal y como lo hacían antes. Hace años que Microsoft desarrolló dos eficientes tecnologías para la presentación de las fuentes en soporte digital, y siempre he pensado que el «suavizado estándar» de Windows era de una de las funciones más inocentemente cómodas y poderosas del sistema operativo. Las letras se dibujan tan pulcramente en la superficie del monitor que parecen impresas en papel, y eso fue algo que siempre aprecié. Así que cuando el nuevo monitor me obligó a olvidarme del «suavizado estándar», se me cayó el alma a los pies; a fin de cuentas, paso la mayor parte del tiempo leyendo y escribiendo en el ordenador.

Supongo que algo parecido nos ha sucedido a todos. La entrada de los LCD en nuestras vidas ha impuesto un nuevo modo de hacer las cosas, por exagerar un poco. El caso es que he utilizado dos recursos de Windows para facilitar mi relación con el texto en monitores LCD. Helos aquí.

ClearType PowerToy.

ClearType es, de hecho, el segundo método de suavizado de fuentes desarrollado por Microsoft e incorporado de serie en las últimas versiones de Windows. El resultado de ClearType resulta mucho menos refinado que el viejo y bueno «suavizado estándar», pero si se le da la oportunidad, también a eso se acostumbra uno.

Hasta donde sé, ClearType viene habilitado por defecto en las distintas ediciones de Windows Vista, aunque, al menos en XP, no ofrece más que una sola posibilidad de configuración: la básica. Sin embargo, si uno desea afinar un poco más el dibujado de fuentes, tan sólo ha de descargarse gratuitamente la pequeña aplicación ClearType Tuning desde el sitio web de Microsoft. (Descargar aquí.)

El funcionamiento resulta bastante sencillo, como puede verse en la animación flash situada bajo estas líneas. Basta instalar la aplicación y acceder a ella desde el Panel de control (Mi PC > Panel de Control > ClearType Tuning). Incorpora un asistente desde el que podemos seleccionar la opción de suavizado con la que nos sintamos más confortables, algo parecido a lo que hacemos cuando acudimos al oftalmólogo y nos sentamos con gafas de empollón galáctico frente a una caja con una bombilla dentro: responder a la pregunta «¿mejor o peor?» hasta que sientes que la habitación empieza a oscilar como una peonza alrededor de tu cabeza. La buena noticia es que no debemos pagar por ClearType PowerToy, ni nos sentimos desolados cuando el doctor nos explica que nuestros malos hábitos de lectura nos han jugado una mala pasada: dos dioptrías en un año, ¡un récord del que no sentirse orgullosos!

Aumentar el tamaño de las fuentes

Hoy día, cuando las pantallas LCD de 19, 20, 22, 24 pulgadas están al alcance de casi todo el mundo en las economías desarrolladas, se ha popularizado la queja de que las fuentes se ven demasiado pequeñas. Una solución poco práctica consiste en aumentar la resolución del monitor, de modo que todo se ve más grande y, lamentablemente, mucho peor. Sin embargo, existe un método sorprendentemente sencillo y eficaz de resolver este problema. Consiste en agrandar las fuentes del sistema; por lo general, basta con aumentar dos puntos el t amaño… siguiendo las siguientes instrucciones:

Desde una zona vacía del escritorio de Windows, hacemos clic con el botón contextual del ratón –generalmente el derecho– y seleccionamos «Propiedades». A continuación cliqueamos sobre la pestaña «Apariencia» y pulsamos el botón «Opciones Avanzadas»: a partir de este momento todo es un camino de rosas. Una a una, vamos seleccionando las opciones de la lista desplegable «Elemento», y allí donde sea posible aumentamos el cuerpo de la fuente; el incremento específico es una cuestión personal. Una vez concluida la operación, hacemos clic en Aceptar hasta volver al escritorio. Ahora las fuentes son más grandes y tus ojos se esfuerzan un poco menos, ¿no os parece fantástico?

Existen diversas formas de presentar información en Flash, y ciertamente existen también maneras distintas de situar y desplazar información dinámicamente mediante ActionScript. Aquí propongo un método sumamente sencillo que quizá te saque de algún apuro: por ejemplo, cuando tengas que dibujar un mapamundi y que al colocar el cursor sobre cada país, aparezca, voilà!, el nombre del mismo…

Para poner en práctica este método es necesario un conocimiento mínimo de ActionScript, que es más o menos lo que yo tengo. Es importante estar familiarizado con los eventos de AS que conciernen a los MovieClips y a los botones, aunque en todo caso incluiré algunas notas aclaratorias cuando lo encuentre conveniente. También es importante reconocer la lógica de las iteraciones –o sea, los loops– y, al menos, mostrar cierta disposición a aprender algo sobre campos de texto en Flash (textfields) y sobre el modo en que se les aplica formato. Y si no sabes absolutamente nada de todo esto, sin problemas: Graficos101 está dirigido fundamentalmente a los principiantes, así que bienvenido…

La idea básica consiste en crear un campo de texto y modificar tanto su contenido como su ubicación siguiendo determinadas acciones desencadenadas por el usuario.

Crearemos asimismo varios movieclips –en el ejemplo, cuatro–, y al situar sobre ellos el cursor mostraremos el campo de texto, que ofrecerá determinada información y que seguirá al ratón hasta que situemos éste más allá del espacio del MovieClip: en ese momento, el campo de texto desaparecerá.

(más…)

Primera gran actualización del software estrella de Xara tras la incorporación de la compañía a las filas del especialista en productos multimedia para el mercado doméstico MAGIX. Las claves: imágenes tridimensionales, composición DTP multipágina y exportación de documentos web.

Que Xara Group Ltd. se vio forzada a adoptar una nueva actitud comercial para sobrevivir en los tiempos que corren lo demostró la espectacular bajada de precios a la que sometió hace unos pocos años a la niña de sus ojos, Xtreme, que descendió desde los ciento sesenta dólares hasta unos ochenta, prueba fehaciente de que las cosas no pintaban bien. Las actualizaciones de XX eran bastante menos frecuentes de lo que sus leales usuarios deseaban, y el futuro de esta pequeña gran joya se había convertido en un misterio. Otro síntoma de qué tal marchaban las cosas por aquel entonces fue la decisión de sus ejecutivos de sacar a la luz una edición más o menos libre, de desarrollo público, para las plataformas Mac y Linux: la idea era rentabilizar el negocio mediante la venta de servicios adicionales, como por ejemplo plantillas y complementos, mientras que la versión para Windows seguiría disponible a la venta.

(más…)

Para todos aquellos aficionados al arte digital que o bien no necesitan, o bien no pueden permitirse el un poco caro pero potentísimo Corel Painter, la compañía canadiense propietaria de WinZip, Paint Shop Pro Photo X2 y CorelDraw, por citar algunos, ofrece el pequeño y práctico Painter Essentials.

Tanto Painter como Painter Essentials constituyen hoy día el software estándar para trabajos de medios tradicionales en soporte digital. Puede que esta definición suene un tanto esotérica, pero en realidad se trata de algo bastante sencillo: los días en que los genios de la pintura estaban obligados a invertir fortunas en caballetes, pinceles, lienzos y demás utillaje han pasado a la historia. Y aunque esto último parezca un poco exagerado, no cabe duda en que Corel se está esforzando exitosamente en hacerlo cierto. La franquicia Painter ofrece a los artistas la posibilidad de utilizar todos los recursos disponibles en el mundo real… desde la pantalla del ordenador: partiendo de los lienzos texturizados y las pinturas que se comportan como sus contrapartes reales, incluyendo los tiempos de secado y el modo en que éstas interactúan con el tapiz, hasta el movimiento natural y arbitrario de las cerdas de los pinceles.

(más…)

¿Qué obtienes cuando le arrancas un par de colmillos a un monstruo de quince toneladas? Exacto, Photoshop Elements, la versión de Photoshop inocentemente mutilada y mejorada para el mercado doméstico. Pero hay más: los webmasters están de enhorabuena.

Me pregunto si existe todavía alguna compañía de software que no haya sacado al mercado su propia aplicación de retoque fotográfico: Corel  compró la legendaria JASC y se adueñó de Paint Shop Pro, y años más tarde adquirió la taiwanesa ULEAD y se apoderó de PhotoImpact (así como de un extenso conjunto de aplicaciones que han ampliado considerablemente su escaparate digital); Serif trata de hacerse un hueco en los hogares de los aficionados a la fotografía digital con PhotoPlus, mientras que Microsoft ha transformado el viejo Creature House, hoy Expression Design, en un programa híbrido más o menos capaz de desenvolverse en los terrenos del dibujo vectorial y de los gráficos de mapas de bits. Pero hay otros contendientes en este feroz coliseo, por supuesto.

Y claro, existe el Rey Photoshop, que domina el mercado profesional sin que ningún contrincante logre hacerle sombra ni arañarle el costado.

(más…)

Si el menú de navegación de tu página web contiene más enlaces que copias del sistema operativo Windows hay distribuidas por los ordenadores de todo el planeta, quizás haya llegado el momento de que utilices alguno de los métodos con que los diseñadores web cuentan para agilizar y volver un poco más navegables sus creaciones. Aunque no el único, los menús DHTML constituyen uno de los medios más comunes para jerarquizar convenientemente los vínculos de los websites de gran tamaño.

(más…)