martes, 21 de agosto de 2012

Cristalab

Cristalab

Animar pantalla de títulos en After Effects

Posted: 21 Aug 2012 04:42 AM PDT

En este nuevo videotutorial de After Effects realizaremos una composición sencilla, para aprender las tareas básicas en la creación y el uso de las cabeceras, en este caso de presentación sobre un entorno plano, al que asignaremos dinamismo añadiendo una transición animada sobre la textura del fondo y que maquetaremos, usando formas rectangulares y texto correctamente encajado.

Sobre un entorno plano sencillo, incluiremos una imagen como textura de fondo, formas rectangulares para el contenido y efectos de transición que añadirán dinamismo.

Completaremos la labor a través de los estilos de capa, enriqueciendo los elementos junto con varios efectos para el fondo y el texto y asignaremos keyframes para crear las animaciones de entrada ajustando el timing para encajarlas.



Saludos.

Enviar comentario

Atributos básicos de los músculos en 3D Maya

Posted: 21 Aug 2012 04:34 AM PDT

En este nuevo videotutorial de 3D Maya, aprenderemos las posibilidades de refinamiento que nos aportan los atributos editables de los músculos simples, músculos avanzados y sistemas musculares, para entender cómo intervienen en las deformaciones asignadas sobre la malla que simula la piel y cómo ajustar los resultados de estos procesos, junto con las reacciones físicas que dan forma a la simulación generada y que nos permitirán, ajustar y controlar la mayoría de los aspectos que afectan a su correcta aplicación y al resultado de la animación posterior.

Realizaremos un repaso por los atributos más importantes que nos ofrece de cada tipo de músculo y sistema, y veremos cuáles son sus cualidades más importantes.

También aprenderemos una serie de ajustes específicos, que nos ayudarán a trabajar cómodamente y el uso de los módulos adecuados para realizar estos trabajos y modificar fácilmente los valores, comprobando sus reacciones y entendiendo cómo afectan al resto de los nodos.



Saludos.

Enviar comentario

Manejo de cadenas 4/4 en Python

Posted: 01 Aug 2012 04:56 AM PDT

En este videotutorial se cierra el apartado "Manejo de cadenas" en Python, analizando algunas funciones básicas bastante útiles cuando se trabaja con objetos del tipo String.

Enviar comentario

Dibujo y animación vectorial HTML5 con Raphael.js y SVG

Posted: 31 Jul 2012 03:04 PM PDT

Este tutorial es una introducción a raphael.js, una librería de Javascript que permite usar el elemento SVG de HTML5 de forma fácil e intuitiva, por lo que podrás usar gráficos vectoriales en tus aplicaciones web.

Dificultad: Media-Baja
(Lo mejor de Raphaël es que lo hace jodidamente fácil)
Compatibilidad: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ y Internet Explorer 6.0+
(WTF!?, compatible con IE6+?!)

Introducción a SVG


SVG significa Gráfico Vectorial Escalable (Scalable Vector Graphics) y se trata de un "formato" de imagen vectorial, como las imágenes de Illustrator (archivos .ai) o las de Autocad (.dwg).

Si abres un archivo SVG con un editor de texto plano verás un lenguaje de marcado, algo similar a HTML o XML.

Aunque la recomendación de la W3C sobre SVG es de hace 10 años a nadie le importó un carajo hasta que llegó HTML5 su logo 'cool' con sus importantes mejoras.

La diferencia con Canvas es que SVG maneja vectores y canvas mapas de bits. SVG sería Illustrator y canvas Photoshop.

Raphaël, javascript para vectores


Raphaël es una librería Javascript que permite manejar los elementos SVG 'like a boss'. Para usarla en nuestro proyecto sólo tenemos que descargarla de la página oficial (sólo 31kb con gzip) y cargarla en nuestro HTML como cualquier archivo js:

Código :

  <script src='http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js'></script>


El objeto Raphael

Lo primero que tenemos que crear es el objeto Raphael. Este genera un elemento SVG donde crearemos los objetos vectoriales:

Código :

  window.onload = function(){     var mesa = new Raphael(10, 15, 300, 400);  }

Así creamos un elemento SVG que estará a 10px de la izquierda y a 15px de la parte superior de la página (en posición absoluta) y que mide 300px de ancho y 400px de alto.

Si tenemos un elemento creado donde queramos embeber nuestro SVG, el constructor también acepta esta forma:

Código :

     var contenedor = document.getElementById('contenedor');     var mesa = new Raphael(contenedor, 200, 100);

Así introduce el elemento SVG dentro de la capa con id 'contenedor' con dimensiones 200px por 100px. El objeto Raphael tiene muchos métodos para manejar sus hijos, como .getById(), .remove(), o .getElementByPoint().


Los elementos

Gracias al objeto Raphael podemos crear elementos vectoriales dentro del SVG.
[nota:323fe413e8]Importante Las coordenadas que utiliza Raphael para los elementos son relativas al SVG creado, y entiende como punto 0,0 la esquina superior izquierda. Cuanto mayor es x, mayor es la distancia con el extremo izquierdo, y cuanto mayor es y, mayor es la distancia con el superior.[/nota:323fe413e8]
Existen varias formas predefinidas, por ejemplo:

  • Círculo, pasándole posición "x", posición "y" y radio

    Código :

    var circulo = mesa.circle(30, 30, 10);

  • Rectángulo, pasándole las posiciones "x" e "y" de la esquina superior izquierda y de la inferior derecha

    Código :

    var rectangulo = mesa.rect(10, 20, 50, 50);

    [nota:323fe413e8]Si le pasamos un 5º valor, indicamos el radio del borde[/nota:323fe413e8]
  • Elipse, pasándole posición "x", posición "y" y los radios horizontal y vertical

    Código :

    var elipse = mesa.ellipse(100, 100, 50, 30);

También podemos crear un elemento "path". Los paths son polilíneas de mayor complejidad que las formas básicas. Estas polilíneas se definen como Strings de la siguiente forma:

Código :

  var polilinea = mesa.path('M 50 80 120 10 230 110 130 280 z');

"M" es un comando que significa "mover a" y sitúa nuestro "cursor invisible" en el punto definido por los pares de puntos que vienen a continuación. Cada par indica la posición x e y. Los pares del ejemplo serían 50 80, 120 10, 230 110 y 130 280. "z" indica que se cierra la polilínea.

Podemos utilizar todos comandos indicados en la documentación de paths SVG de la W3C.


Atributos

Los elementos que hemos creando son elementos del DOM y podemos acceder a ellos por Javascript. Raphael nos permite cambiar los atributos de estos elementos muy fácil:

Código :

  var cir = mesa.circle(200, 200, 30);  cir.attr('fill', 'red');

Este código hará que nuestro círculo tenga relleno rojo. Si queremos cambiar varios atributos a la vez lo haremos así:

Código :

  cir.attr({'stroke-width': 10,'stroke': 'red'});

Tienes una lista de atributos en la documentación de Raphael.


Eventos y animaciones

Con Raphael.js tenemos podemos aplicar eventos a los elementos, como .click(), .dblclick(), .hover(), etc. que funcionan parecidos a los eventos de jQuery. Por ejemplo:

Código :

  cir.click(function(){     alert('Has hecho click en el círculo');  });

Además de los eventos, con Raphael tenemos un control sencillo y potente de las animaciones. Primero declaramos la animación en sí:

Código :

  var anim = new Raphael.animation({cx: 10, cy: 20}, 400, "bounce");

El primer parámetro que le pasamos son los atributos a los que queremos aplicar la animación. En este caso hemos usado cx y cy que son las variables de posición. Podríamos haber utilizado atributos como los que habíamos visto antes, por ejemplo:

Código :

  var anim = new Raphael.animation({"stroke-width":12, cx: 10, cy: 20}, 400, "bounce");

El segundo parámetro es la duración en milisegundos. El tercero la función de easing que quieras usar. Por último podemos, opcionalmente, añadir un callback.

En la web del autor hay gran cantidad de ejemplos increibles

Una vez tengamos nuestra animación, la podemos aplicar usando el método .animate() del elemento.

Código :

  cir.animate(anim);


Este es un ejemplo sencillo de todo lo que hemos visto.

En resumen


Tardé 1 hora en escribir este tutorial y 3 en reducirlo a un tamaño "normal" para un blog. Son tantas las opciones que permite Raphael y en general el SVG que podrían llenar varios capítulos de un libro. Pretendo que te sirva de introducción y que descubras con la práctica, los ejemplos y la genial documentación de la librería todo su potencial.


Bonus

En http://readysetraphael.com/ puedes convertir archivos vectoriales .SVG en Raphael.


Bonus 2

En http://g.raphaeljs.com/ encontrarás también las librerías gRaphael para la creación de gráficas a partir de raphael.js.

Si tenéis alguna duda o queréis saber más acerca de SVG y Raphaël, no dudéis en preguntarme aquí o en twitter: @ajnavajas

Enviar comentario
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)