Foros del web, comunidad de entusiastas web

¿Extrañas ActionScript 3?
¿El save y restore del canvas te marea?
Aquí esta tu solución

Estudiando el tag canvas de HTML5 me dispuse a armar un framework que permita programar de la misma forma que en ActionScript 3.

Application:
Equivale al Stage de AS3. Extiende de View.
En su función constructora recibe:
FPS - Velocidad del proyecto
idCanvas - El id del tag canvas
bgColor - Color de fondo
isDebugMode - Para mostrar los FPS en pantalla

View:
Equivale a los sprites de AS3. Controla el renderizado a partir de una lista de "childs" utilizando los métodos addChild y removeChild. También detecta si alguna de sus "childs" colisiona con cierto punto (usado para el control del click).
Sus principales propiedades:
x
y
alpha
rotation
scaleX
scaleY
visible
parent
childs

ViewImage:
Equivale al Bitmap de AS3. Si quieres aplicarle escala, rotación o transparencia tienes que agregarlo dentro de un View, y modificar ese View. Permite recortar la imagen en una posición determinada (función cut). En el método constructor se agrega la URL de la imágen, y cuando esta es cargada ejecuta la función onLoadComplete que puede ser reemplazada.
Con la función localToGlobal se obtiene el area de esta imágen modificada por todos los Views padres.
Sus principales propiedades son:
url
x
y
width
height
visible
maskX
maskY
maskWidth
maskHeight
parent

ViewSprite
Sirve para generar animaciones a partir de una imágen.
[img=http://www.videoscrack.com/html5/data/character/0.png]
En su función constructora se indica:
URL - Dirección de la imágen
cols - Cantidad de columnas
rows - Cantidad de filas
duration - Duración de la animación
isLoop - Si la animación se va a repetir

ViewText
Equivale al TextField de AS3 (aunque es mucho más simple). En su función constructora se indica:
text - Texto a mostrar
font - Fuente a utilizar
size - Tamaño de la fuente
fillColor - Color del texto
align - Tipo de alineamiento
Además cuenta con la función setStroke, para indicarle un borde al texto. localToGlobal también esta presente en esta clase.

Events
Esta es una simple clase para poder controlar los eventos de click a las Views. Lo único que le falta es controlar la propagación, o ver la forma de utilizar el addEventListener de javascript.

Ejemplo:
Este ejemplo es muy simple, lo hice en una hora a partir de otro proyecto que tenía como para mostrar algún resultado. Pero las capacidades del framework es mucho más grande que las de este ejemplo.

www.videoscrack.com/html5/index.html
Dibuje todo yo ^^

Descargar Framework y el Ejemplo

Al framework le faltan varias cosas todavía. Tiene un bug del click si se mueve el scroll de la web, y tampoco detecta bien el click de una View con rotación. Todavía no le agregué filtros. Habría que aumentar el performance. No tiene asignación de tamaño por width y height. No tiene una clase para controlar video. Y muchas cosas más...

Así que el que quiere ayudarme a mejorarlo será más que bienvenido ;)

creo que es un proyecto bueno, pero nadie me dio una respuesta ni opinion :P

Es un proyecto magnifico brother, gracias por compartirlo. veamos.

EXCELENTÍSIMO Framework, voy a revisarlo bien para ver si puedo ayudarte en algo, felicidades!.

Tienes algún blog o algo para seguir viendo tus avances?.

Saludos!.

holaaaaa, encontre un framework igual al que estaba armando pero mejor, se llama easeljs.
aenima_tool mi web es: www.videoscrack.com