CreateJS
Transcript of CreateJS
CreateJS
EaselJS TweenJS SoundJS PreloadJS
Cuatro paquetes
EaselJS
¿Qué es Canvas HTML5?
Es un contenedor para añadir gráficos a una web. Para dibujar esos gráficos se usan scripts.
EaselJSLibrería JavaScript que hace el trabajo con Canvas HTML5 más sencillo.
Ayuda para trabajar con gráficos 2D.
Familiar para los programadores de Flash (portabilidad de flash a javascript)
EaselJS
Ejemplos:
Animación usando la clase BitmapAnimation: http://www.createjs.com/#!/EaselJS/demos/spritesheet
http://www.createjs.com/#!/EaselJS/demos/drawing
Aplicación simple de dibujo
EaselJSEjemplo real: Haciendo un círculo.
Comenzamos con un cuerpo en HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script>
function init() {
// code here.
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="300">
alternate content
</canvas>
</body>
</html>
EaselJSCreamos un “Stage”
var stage = new createjs.Stage("demoCanvas");
Crea un stage y lo apunta a nuestro Canvas (pasándole el id del Canvas)
Un stage es el contenedor raíz para el contenido a mostrar
EaselJSCreamos una forma (el círculo)
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
Por último:
stage.update();
Y aquí el resultado...
TweenJS
¿Qué es “Tweening”?
Interpolación entre dos puntos, desde el punto de partida hasta el punto objetivo, “tweening” se trata de generar los valores que están entre esos dos puntos con una “ease function”, es decir, una función matemática.
TweenJS
Ejemplos de “ease function”
Lineal Elástica
TweenJS
Diseñado para integrarse con la librería EaseJS pero sin depender de ella.
Soporta multitud de propiedades de objeto y propiedades CSS
Se pueden crear interpolaciones complejas anidando funciones.
TweenJS
Ejemplo para entender el concepto usando TweenJS:
http://andysaia.com/blog/tweenjs/
SoundJS
Soporte multinavegador para sonido, uno de los puntos flacos de HTML5.
El siguiente ejemplo resume sus funcionalidades:
http://www.createjs.com/#!/SoundJS/demos/explosion
Administra y coordina la carga de contenido en nuestras aplicaciones
Preload JS
● Múltiples colas● Múltiples conexiones● Pausado de colas
Aplicación tipo “Flash-CreateJS”
Zoë
Convierte animaciones tipo .swf en sprite sheets (Hoja de sprites)
Zoë
Toolkit for CreateJS● Extensión para Flash Professional CS6
Permite la publicación de contenido rico y medianamente complejo de Flash a HTML5 haciendo uso de las librerías de CreateJS.
qlq