Ir al contenido principal

Entradas

Mostrando entradas de diciembre, 2011

Animación con CSS3

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Bueno ya todos sabemos que entre HTML5 y CSS3 han generado en combinación grandes herramientas para hacer tareas que antes solamente con Flash o Javascript eran posibles. Una de estas en hacer una pequeña animación como la que se muestra a continuación (Internet Explorer y Opera no funcionan con estas características).


Lo que tenemos arriba es solamente un objeto DIV al que con aplicarle ÚNICAMENTE estilos CSS3 hemos logrado este efecto. Vamos pues a crearlo.

1.- Crear el objeto:

Solo es necesario crear dentro del body de nuestro HTML una etiqueta DIV:


<body>

<div></div>

</body>

Nota: en este ejemplo usamos un DIV, pero podemos utilizar el elemento que queramos, inclusive podemos usar clases (?) o id (?) para asignarle estas propiedades.

2.- Aplicare estilo:

Crearemos una etiqueta STYLE y de…

Efecto "Colorear" en Flash

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Hace un par de meses tuve que generar para un banner el efecto de una imagen en tonos de grises que al pasar el mouse encima se vaya "coloreando", este ejercicio me pareció divertido e interesante y por esta razón decidí colocarlo en este blog.

Puedes comenzar a iluminar la imagen de la tortuga en cuanto aparezca.

Para generar este sencillo efecto utilizaremos elementos de: máscaras dinámicas, Sprite, UILoader, además claro de MovieClips y Listeners.

Bueno, pues definamos y acotemos el problema:


Permitir que el usuario pueda "colorear" una imagen con el mouse.Se debe mostrar una imagen inicial y una final ( mo importa si son iguales o no ).Las imágenes deben de ser externas al flash para optimizar su tamaño.Cuando el usuario presione el mouse y luego lo mueva sobre la imagen inicial deberá ir …