blog.coconnut.com » TweenLite/TweenMax http://www.coconnut.com/blog Flex, AS3, AS2, flash, css Fri, 18 May 2012 09:12:39 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 JavaScript & ActionScript. Ejemplo con TweenMax para JavaScript http://www.coconnut.com/blog/2012/05/18/javascript-actionscript-ejemplo-con-tweenmax-para-javascript/ http://www.coconnut.com/blog/2012/05/18/javascript-actionscript-ejemplo-con-tweenmax-para-javascript/#comments Fri, 18 May 2012 09:12:39 +0000 Luis Estevez http://www.coconnut.com/blog/?p=1431 Como sabéis, Jack Doyle está convirtiendo su famosa biblioteca GreenSock en el proyecto GreenSock Animation Platform (actualmente versión 12 beta) que incorpora como gran novedad la migración de TweenLite/TweenMax, TimelineLite/TimelineMax a JavaScript.

Pues nada, aquí un ejemplo muuuuy simple de lo fácil que resulta hacer una versión JavaScript de un swf animado con GreenSock.

Ver ejemplo HTML/JavaScript >>
Ver ejemplo Flash/ActionScript >>
Descargar Proyecto JavaScript >>

En la carpeta “fla” encontrarás el archivo “fruit.fla” con el código ActionScript 3 equivalente al JavaScript que encontrarás en “src/js/test-greensock.js”. Verás que animar en JavaScript con TweenLite/TweenMax es prácticamente idéntico a hacerlo en ActionScript.

¿Para cuándo hacerle una estatua a Jack Doyle? ;)

]]> http://www.coconnut.com/blog/2012/05/18/javascript-actionscript-ejemplo-con-tweenmax-para-javascript/feed/ 0 Flash Player 10.1 Ejemplo Tablet Multitouch http://www.coconnut.com/blog/2011/02/26/flash-player-10-1-ejemplo-tablet-multitouch/ http://www.coconnut.com/blog/2011/02/26/flash-player-10-1-ejemplo-tablet-multitouch/#comments Sat, 26 Feb 2011 19:40:51 +0000 Luis Estevez http://www.coconnut.com/blog/?p=1197 Tableta Multitouch Galería imágenes Flash CS5

Ver ejemplo (requiere dispositivo multitouch y Flash Player 10.1) >>

Descargar Proyecto ActionScript completo >>

Se trata de un ejemplo con una interacción muy simple: la galería de imágenes avanza con el gesto pan hacia la izquierda/abajo, y retrocede con el gesto pan hacia la derecha/arriba.

Si no estás navegando con un dispositivo multitouch que soporte Flash Player 10.1, no vas a poder interactuar con el ejemplo.

El ejemplo lo hemos desarrollado en una tableta con Windows 7. Flash Player tiene cierta dificultad para reconocer los gestos en este sistema, por lo que hemos optado por configurar el MultitouchInputMode.TOUCH_POINT en lugar de MultitouchInputMode.GESTURE. Si alguien quiere modificarlo para una tableta con Android quizá sea más conveniente configurarlo para este último. La clase que se ocupa de gestionar la interacción multitouch se llama:

org.robotlegs.view.components.TouchView.

]]> http://www.coconnut.com/blog/2011/02/26/flash-player-10-1-ejemplo-tablet-multitouch/feed/ 1 Flash Builder. Flash CS5. Galería de vídeos con distintos frameworks http://www.coconnut.com/blog/2010/12/18/flash-builder-flash-cs5-galeria-de-videos-con-distintos-frameworks/ http://www.coconnut.com/blog/2010/12/18/flash-builder-flash-cs5-galeria-de-videos-con-distintos-frameworks/#comments Sat, 18 Dec 2010 18:38:14 +0000 Luis Estevez http://www.coconnut.com/blog/?p=1051 Hemos desarrollado el mismo ejemplo utilizando diferentes frameworks:

Robotlegs
Robotlegs&Signals
PureMVC
Parsley + Spicelib
Mate Flex Framework

Puede ser interesante compararlos para ver las diferencias/similitudes que presentan.

Ver ejemplo >>

Descargar proyecto ActionScript versión Robotlegs >>
Descargar proyecto ActionScript versión Robotlegs&Signals >>
Descargar proyecto ActionScript versión PureMVC >>
Descargar proyecto ActionScript versión Parsley >>
Descargar proyecto ActionScript versión Parsley&Signals >>
Descargar proyecto Flex 4 versión Mate Flex Framework >>
Descargar versión Robotlegs Flash CS5 >>

MUY IMPORTANTE: Como los ejemplos muestran contenidos de vídeo, para no publicarlos varias veces NO LOS LLEVAN INCLUIDOS. Descarga el siguiente enlace y descomprime su contenido en la carpeta bin-debug del ejemplo que desees:
Carpetas con los vídeos y demás assets de los ejemplos >>

Y por cierto, ya que estamos con Mate, recordar que la semana pasada se publicó la versión 0.9 de Mate, válida para Flex 3 y Flex 4 (aunque en este ejemplo hemos utilizado la versión 0.8.9)

]]> http://www.coconnut.com/blog/2010/12/18/flash-builder-flash-cs5-galeria-de-videos-con-distintos-frameworks/feed/ 12 Flash Builder 4. Galería de imágenes Robotlegs, AS3 Signals & Flight http://www.coconnut.com/blog/2010/10/17/flash-builder-4-galeria-de-imagenes-robotlegs-as3-signals-flight/ http://www.coconnut.com/blog/2010/10/17/flash-builder-4-galeria-de-imagenes-robotlegs-as3-signals-flight/#comments Sun, 17 Oct 2010 20:41:19 +0000 Luis Estevez http://www.coconnut.com/blog/?p=918 Se trata de una versión de:

Smoke&Drops. Galería de imágenes con Away3D

Hemos utilizado Robotlegs como framework principal, AS3 Signals & SignalsCommands y, finalmente, Flight framework (Flight XD) para conectar/enlazar elementos vía binding (este último framework sólo lo utilizo para hacer esta conexión).

Ver ejemplo >>

Descargar Código Fuente Proyecto ActionScript (Flash Builder 4) >>

]]> http://www.coconnut.com/blog/2010/10/17/flash-builder-4-galeria-de-imagenes-robotlegs-as3-signals-flight/feed/ 5 Flash CS4. Fash Builder 4. Efecto Paralaje. http://www.coconnut.com/blog/2010/09/04/flash-cs4-fash-builder-4-efecto-paralaje/ http://www.coconnut.com/blog/2010/09/04/flash-cs4-fash-builder-4-efecto-paralaje/#comments Sat, 04 Sep 2010 14:47:25 +0000 Luis Estevez http://www.coconnut.com/blog/?p=851

Ver ejemplo >>

Descargar proyecto ActionScript completo (Flash Builder 4) >>

Descargar versión Flash CS4 >>

Si alguien tiene alergia al código, puede descargarse esta versión realizada directamente en Flash Professional:

Descargar versión Flash CS4 escenario (sin utilizar código) >>

Las imágenes las hemos tomado prestadas del site Pepe Jeans London

]]> http://www.coconnut.com/blog/2010/09/04/flash-cs4-fash-builder-4-efecto-paralaje/feed/ 28 Flash CS4. Flash builder 4. Ejemplo de animación con TimelineMax (GreenSock). http://www.coconnut.com/blog/2010/08/29/flash-cs4-flash-builder-4-ejemplo-de-animacion-con-timelinemax-greensock/ http://www.coconnut.com/blog/2010/08/29/flash-cs4-flash-builder-4-ejemplo-de-animacion-con-timelinemax-greensock/#comments Sun, 29 Aug 2010 17:18:38 +0000 Luis Estevez http://www.coconnut.com/blog/?p=846 Coloca el puntero del ratón sobre el círculo central para lanzar la animación. Al salir del círculo, se reproduce en sentido inverso.

Ver ejemplo >>

Descargar proyecto completo Flash Builder 4 (proyecto ActionScript) >>

Descargar versión completa para Flash CS4 >>

Se trata de un ejemplo de animación con TimelineMax, que forma parte de GreenSock (TweenLite/TweenMax).

El resultado final ha quedado un “pelín” recargado ;) pero está hecho con la intención de ver cómo TimelineMax puede con todo:

- Los assets florales están animados con máscaras en la línea de tiempo.

- El cartel tiene animación de movimiento, giro y transparencia en la línea de tiempo.

- Los assets circulares están animados directamente con código.

TimelineMax ES una línea de tiempo a todos los efectos, con capacidad -como en el caso de este ejemplo-, para invertir la reproducción en cualquier momento. ¿A alguien le quedan ganas de animar movimientos en el timeline de Flash Professional? :)

]]> http://www.coconnut.com/blog/2010/08/29/flash-cs4-flash-builder-4-ejemplo-de-animacion-con-timelinemax-greensock/feed/ 0 Flash Builder 4 Flash CS5. Robotlegs & Sudoku http://www.coconnut.com/blog/2010/08/11/flash-builder-4-robotlegs-sudoku/ http://www.coconnut.com/blog/2010/08/11/flash-builder-4-robotlegs-sudoku/#comments Wed, 11 Aug 2010 14:04:10 +0000 Luis Estevez http://www.coconnut.com/blog/?p=827 Un ejemplo de utilización del framework Robotlegs. Para la ocasión hemos creado un Sudoku (originales que somos). El algoritmo de generación/resolución empleado te lo puedes descargar de aquí.

Ver ejemplo >>

Descargar Proyecto ActionScript completo (Robotlegs) >>

Descargar Proyecto ActionScript completo (Robotlegs&Signals) >>

Descargar Proyecto ActionScript completo (PureMVC) >>

Descargar Proyecto Flash CS4 completo (Robotlegs) >>

Descargar Proyecto Flash CS5 completo (Robotlegs) >>

Para los que no estén interesados en Robotlegs y sólo quieran el sudoku, una versión para Flash CS5 con el código en el fotograma 1:

Descargar versión Flash CS5 sin Robotlegs >>

Por cierto, se agradece la sugerencia de código en esta nueva versión de Flash Professional ;)

Para la interfaz hemos utilizado MinimalComps. Si no conocías estos componentes y tienes curiosidad, visita el blog BIT-101. Por lo demás, un poquito de TweenMax, para no perder la costumbre :) .

La clase principal (index.as) es sólo un preloader de la aplicación Sudoku.swf. Por tanto, la clase realmente “principal” es la que genera dicho swf: Sudoku.as.

Finalmente, los muñegotes que aparecen dibujados en la hoja los he tomado prestados, espero que el autor no se moleste. O sea, resumiendo, básicamente no he hecho más que una ensalada de cosas encontradas por la web.

]]> http://www.coconnut.com/blog/2010/08/11/flash-builder-4-robotlegs-sudoku/feed/ 9 AS3 + TweenLite RoughEase http://www.coconnut.com/blog/2010/02/01/as3-tweenlite-roughease/ http://www.coconnut.com/blog/2010/02/01/as3-tweenlite-roughease/#comments Mon, 01 Feb 2010 21:40:19 +0000 Carlos Hernández http://www.coconnut.com/blog/?p=725 Un ejemplo del nuevo RoughEase. Perfecto para hacer efectos “shake”.

Algo más de información en la página de greensock.

roughttween

Ver ejemplo>>

Ver código>>

]]> http://www.coconnut.com/blog/2010/02/01/as3-tweenlite-roughease/feed/ 1 Flex Builder 3. Flash CS4. Smoke & Drops. Galería de imágenes con Away3D. http://www.coconnut.com/blog/2010/01/25/flex-builder-3-flash-cs4-smoke-drops-galeria-de-imagenes-con-away3d/ http://www.coconnut.com/blog/2010/01/25/flex-builder-3-flash-cs4-smoke-drops-galeria-de-imagenes-con-away3d/#comments Mon, 25 Jan 2010 10:46:59 +0000 Luis Estevez http://www.coconnut.com/blog/?p=717

Ver ejemplo >>

Descargar Código Fuente Proyecto ActionScript (Flex Builder 3) >>

Descargar Código Fuente Proyecto Flash CS4 >>

Descargar Código Fuente Proyecto Flash CS5 >>

]]> http://www.coconnut.com/blog/2010/01/25/flex-builder-3-flash-cs4-smoke-drops-galeria-de-imagenes-con-away3d/feed/ 18 Papervision3D. Adobe Kuler Cube http://www.coconnut.com/blog/2009/12/20/papervision3d-adobe-kuler-cube/ http://www.coconnut.com/blog/2009/12/20/papervision3d-adobe-kuler-cube/#comments Sun, 20 Dec 2009 19:53:04 +0000 Carlos Hernández http://www.coconnut.com/blog/?p=691 Un cubo interactivo con PV3D. Para las caras he utilizado un Sprite en un MovieMaterial. Los colores los obtengo de Adobe kuler utilizando kuler AS3 Library. La animación con TweenLite.

kulercube

Actualización: He colgado una nueva versión del cubo. Ahora con Motion Blur.

Ver ejemplo >>

Ver código >>

]]> http://www.coconnut.com/blog/2009/12/20/papervision3d-adobe-kuler-cube/feed/ 0