martes, 15 de junio de 2010

ActionScript 3: Clase para juego Simon

Hoy te traigo un jueguito muy simple pero que tiene algunas cosas interesante para analizar como listeners para teclado y mouse, setInterval() y otras yerbas que irán apareciendo en el script.

El jueguito cuenta con un variador de dificultad (3 niveles de velocidad) y, como buen simon va incrementando la cantidad de fichas en la secuencia mientras apretas bien los botones o se bloquea si fallas.

Ahora sí... vamos a ver el desarrollo:
1) Abrí una nueva película flash
2) Crea cuatro MovieClips llamados "b0","b1","b2","b3" y ponelos en el escenario con el nombre de instancia igual al del movieclip (en realidad lo que nos importa es el nombre de instancia, no el del MovieClip.
3) Crea un nuevo MovieClip llamado "bInicio" y poné 2 instancias en el escenario. La primera con el nombre de instancia "bInicio" y el segundo con nombre de instancia "dificultad_btn".
4) Coloca en la biblioteca cuatro archivos de sonido mp3 y desde la biblioteca vínculalos con los nombres "sSound0" , "sSound1", "sSound2" y "sSound3".
5) En la película, en el campo Clase del Documento ponle "Simon" que es el nombre de la clase que desarrollaremos a continuación.

lunes, 14 de junio de 2010

ActionScript 3: Gráfico circular (radial)

Hoy te traigo un jueguito muy simple pero que tiene algunas cosas interesante para analizar como listeners para teclado y mouse, setInterval() y otras yerbas que irán apareciendo en el script.
Hace un tiempo me pidieron desarrollar un gráfico circular pero no era de torta, sino que era un gráfico destinado a mostrar evoluciones (como si fuera un gráfico lineal) pero distribuído en un círculo, pues comparaba que tan distantes estaban de un punto común de inicio diferentes sucursales.
Este tipo de gráfico es standar en excel y otras planillas de cálculo y no tenía idea de como se aplicaría en actionscript 3.

Después de mucho dar vueltas y revisar algo de trigonometría llegué a una formulita (qué resultó ser bastante sencilla) pude realizar el gráfico que resultó como te lo muestro aquí.

Para que este gráfico se genere sólo bastará con completar 3 arrays y una variable:
1) Array con los valores del eje Y (en este ejemplo referencias).
2) Array con los valores del eje X (en este ejemplo los países.
3) Array con los datos a representar (valores del gráfico)
4) Variable que contendrá el simbolo de la unidad en que se representa el gráfico (%, $, MM, etc).
Además podrás manipular el tamaño del gráfico desde otra variable que luego comentaré en el código que explico a continuación:

viernes, 4 de junio de 2010

Portfolio: George Birch en Behance Network

George Birch se define como Ilustrador, Diseñador Gráfico y Cartoonista. Muy buenos los trabajos que expone en su portfolio.

Otro dato interesante es que este portfolio está publicado en una red social de diseñadores llamada Behance Networks. Esta red esta en ingles, permite crear portfolio, perfiles, "circulos" que son como grupos de amigos y tiene ofertas de empleo. Voy a probarla un poco más y luego publico un apartadito al respecto.

jueves, 3 de junio de 2010

Galería de Wallpapers para Diseñadores


El diseñador Daniel Hosoya ha desarrollado una serie de wallpapers dedicados los planteos de sus clientes. En sí muestran escenas que todos hemos vivido y que después de sacarnos un poco de rabia nos hemos reído. Más allá del humor esta muy bien la vuelta gráfica que les ha dado a estos mensajes.

Para ver el portfolio completo y descargarte los wallpapers en buena calidad podes hacer click acá.

Además podes ver sus otros wallpapers y portfolio visitando su web personal siguiendo este link.

sábado, 29 de mayo de 2010

Photoshop: Pinceles, texturas, patrones y fondos gratuitos desde Eslovenia

Starnet es un equipo formado por dos desarrolladores que, desde Eslovenia, publica en su blog una buena cantidad y variedad de contenidos gratuitos para photoshop e ilustración desarrollados por ellos mismos.

Han realizado un buen trabajo con el conjunto de pinceles de líneas gastadas. Esta librería de pinceles esta realizada en 2500 x 2500 pixels por lo cual fué dividida en dos y puede descargarse gratuitamente desde su web.


Los links para descargar las librerías de pinceles son estos:


Cada una de las librerías fué dividida en 20 pinceles de gran resolución y ocupa al rededor de 20mb cada una.

viernes, 16 de abril de 2010

ActionScript 3: Cortar imagenes con BitmapData + copyPixels

Hoy te traigo un jueguito muy simple pero que tiene algunas cosas interesante para analizar como listeners para teclado y mouse, setInterval() y otras yerbas que irán apareciendo en el script.Supongamos que queremos hacer un rompecabezas. Para ello queremos levantar una imagen y que ActionScript la desglose en piezas donde, cada pieza tiene un pedacito de imagen.



ActionScript no nos dejará cortar directamente una imagen, pero podemos usar algunas artimañas para realizarlo.

Para nuestro ejemplo usaremos ésta imagen del PezOjo! de 400px x 400px* que tenemos en la biblioteca del .fla. (porían usarse también imagenes externas o que estén en el escenario.

lunes, 22 de marzo de 2010

Lightbox - la galería de imagenes que todos vemos en html.

Se trata de una de las galerías de imagenes más utilizadas en los sitios desarrollados en dhtml.

Si bien no es un nuevo, esta herramienta desarrollada por Lokesh Dhakar, resulta una herramienta hiper-util a la hora de montar una galería de imágenes dinámica y con buena estética sin recurrir al viejo y (hoy un poco vapuleado) flash.

Simplemente basta con poner las carpetas de archivos js en tu server, incluír los .js en la página donde se mostrará la galería y modificar un poco los links de tus imagenes y ya se logra un gran efecto.

Y lo más importante: Al ser de código abierto, puede personalizarse y mejorarse tanto como quieras. Ni hablar de jugar con los estilos libremente, ya que está basado en CSS.

Podes verlo funcionando en ésta demo.


La instalación son 3 simples pasos que se detallan aquí.
El portal que comparte sus ingresos