asd

21

Mar

Caurina Tweener, movimiento, transiciones desde actionscript

Publicado por: LeoBaraldi

El paquete caurina cuenta con clases escritas para actionscript 2 o 3 que nos facilitara la tarea de realizar movimientos de objetos o efectos de transiciones de manera muy fácil, cuenta con una extensa documentación de uso y también disponible para otros lenguajes como javaScript o C++. Primero lo que debemos hacer es descargar el paquete, colocamos la carpeta caurina donde tenemos nuestro archivo fla e importamos la clase.
Para el ejemplo construimos un mc con el nombre de instancia cuadrado_mc

Movimiento simple lineal

Clic para ver Texto Plano
Actionscript:
  1. //importamos la clase
  2. import caurina.transitions.Tweener;
  3. //evento del mouse sobre el cuadrado
  4. cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP,mover);
  5. //
  6. function mover(e:MouseEvent):void {
  7. //ejecutamos el movimiento en el eje x 200px desde donde se encuentre el cuadrado con una velocidad total de 1 seg . En este ejemplo el objeto a mover esta puesto “e.target” que es el cuadrado, pero podria ir el nombre de la instancia de otro objeto.
  8.  
  9. Tweener.addTween(e.target, {x:200, time:1, transition:"linear"});
  10. }

Caurina cuenta una lista muy completa de tipos de transiciones, puedes consultar dicha lista con ejemplos descargando el pdf o swf con la muestra.

Movimiento en varios ejes

Clic para ver Texto Plano
Actionscript:
  1. import caurina.transitions.Tweener;
  2. cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP,mover);
  3. function mover(e:MouseEvent):void {
  4. // simplemente se agrego un eje mas a los parametros y 100px
  5. Tweener.addTween(e.target, {x:200,y:100, time:1, transition:"linear"});
  6. }

Retrazar una propiedad en segundos

Clic para ver Texto Plano
Actionscript:
  1. import caurina.transitions.Tweener;
  2. cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP,mover);
  3. function mover(e:MouseEvent):void {
  4. Tweener.addTween(e.target, {x:200, time:0.5, transition:"easeInSine"});
  5. // la propiedad delay retraza el movimiento en y en 0.5 seg, para que se complete el recorrido en x
  6. Tweener.addTween(e.target, {y:100, time:1, transition:"easeInSine",delay:1});
  7. }

Detectar evento de inicio y finalización de la transición.

Clic para ver Texto Plano
Actionscript:
  1. import caurina.transitions.Tweener;
  2. cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP,mover);
  3. function mover(e:MouseEvent):void {
  4. Tweener.addTween(e.target, {x:200, time:1, transition:"easeOutQuint",onStart:comenzo,onComplete:finalizo});
  5. }
  6.  
  7. function comenzo ():void {
  8. trace("comenzo")
  9. }
  10. function finalizo ():void {
  11. trace("finalizo")
  12. }

Pasar parámetros a una función

Clic para ver Texto Plano
Actionscript:
  1. import caurina.transitions.Tweener;
  2. cuadrado_mc.addEventListener(MouseEvent.MOUSE_UP,mover);
  3. function mover(e:MouseEvent):void {
  4. // en este ejemplo pasamos la cadena hola cuando se completa el movimiento, también puede pasar un parámetro cuando inicia el movimiento utilizando onStartParams en ves de onCompleteParams, porsupuesto que la funcion a llamar sera con la propiedad onStart
  5. Tweener.addTween(e.target, {x:200, time:1, transition:"easeOutQuint",onComplete:finalizo,onCompleteParams:["hola"]});
  6. }
  7.  
  8. function finalizo (parametro:String) {
  9. trace(parametro)
  10. }

El paquete caurina cuenta con muchísimas mas propiedades y funciones que iré ampliando en este mismo post, mientras pueden ver la referencia completa.
En los archivos para descargar les dejo estas pruebas y sus respectivos fla en cs4, y en ver ejemplo les dejo un sitio que utiliza caurina en sus transiciones y objetos.

ver ejemplodescargar archivos
categorias: Clases Actionscript 3 Coment.: 1

21

Mar

Como utilizar o importar clases en actionscript

Publicado por: LeoBaraldi

Cuando decidí ir colocando clases tanto mías como de terceros para compartirlas con ustedes, me llegaron muchas consultas de cómo importarlas?, unos de los problemas mas grabe que cometemos los que estamos en el tema es que damos muchas cosas por sabidas y olvidamos de explicar los pasos o fundamentos básicos del porque de las cosas, así que este post es como un pedido de disculpas de cierta manera :) , voy a ir repasando los post y colocando cosas mas básicas y útiles junto a contenidos mas avanzado así es mas democrático!!!

¿Que es una clase?
Podríamos decir que una clase es un constructor de objetos que se basa en pautas ya establecidas o que se deban asignar (propiedades), pero en definitiva el resultado será un nuevo objeto con propiedades y métodos (funciones) listo para utilizar.

Por ejemplo si tuviéramos una fabrica de mesas, en vez de tener que pensar como esta compuesta la mesa a la hora de crear cada nueva mesa, e ir haciendo paso a paso el ensamblaje a medida que vamos relacionando las partes, nos daríamos cuenta que seria mucho mas útil si implementáramos un plano o croquis, donde ese plano indique los elementos básico como debe situarse por ejemplo las patas, la tapa, etc. En el mismo plano seguro que podremos indicar que partes de las mesas deberían poder ser personalizada (propiedades), por ejemplo el color. Este modelo lineal de establecer los pasos para construir una mesa podríamos repetirlo miles de veces con cada mesa logrando una serialización donde si quisiéramos agregar o modificar un paso en vez de hacerlo con cada mesa simplemente lo indicamos en el plano. De la misma manera funciona una clase, el constructor “new” siempre da origen un objeto nuevo con sus propiedades y métodos (funciones) listo para ser utilizado. Normalmente muchas veces harán uso del mismo, por ejemplo cuando creamos un movieClip desde actionscript: var miPeli:MovieClip = new MovieClip(), este es un claro ejemplo en el uso de clases, donde creamos un nuevo objeto MovieClip con todas sus propiedades y funciones listo para ser utilizado.

Aclaro que el mundo de las clases es muchisimo mas que esto, pero la idea es que mas o menos puedan entender el porque y que es una clase de manera simple.
Dado esto veremos que al programar abra tareas repetitivas donde seria bueno delegar dicha tarea a una clase, por ejemplo si requerimos hacer una mascara para un mc, sabemos que necesitamos un recuadro, no seria muy complicado crearlo, con solo unas 4 a 6 líneas estaría todo listo, pero si dichas líneas de código la implementáramos en una clase aislada para la función crear recuadro, en una sola línea podríamos implementarla, por ejemplo var mask:Recuadro = new Recuadro(100,100,0xFF0000); Esta sola línea hace referencia (instancia) a un nuevo objeto Recuadro con las propiedades 100 px de ancho, 100 px de alto y de color rojo y de esta manera podríamos crear cuantos recuadros quisiéramos de una manera mucho mas fácil y controlable.

¿Como importo una clase?
Si la clase se encuentra en la raíz de nuestro archivo fla, simplemente utilizando la sentencia: import nombredelaClase desde el panel acciones (F9), si en cambio la clase esta dentro de una carpeta deberíamos indicar la ruta de la misma: import carpeta. nombredelaClase, el punto es el conector para navegar por las carpetas.

Una vez importada la clase ya esta disponible para utilizarla, ejemplo:

Importamos la clase DrawCircle.as > import DrawCircle;
Creamos un nuevo objeto > var circulo:DrawCircle = new DrawCircle(100,100,20,0xFF0000)

Las propiedades y métodos de cada clase serán particularidades según el caso, por eso es bueno siempre al utilizarlas ver cuales son sus métodos y propiedades admitidas en los documentos de referencia.

categorias: ActionScript 3 , Clases Actionscript 3 Coment.: -

22

Feb

Numero random según rango – Number – clase de actionscript 3

Publicado por: LeoBaraldi

Clase:

Clic para ver Texto Plano
Actionscript:
  1. package {
  2.     /**
  3.      * ...
  4.      * @author LeoBaraldi
  5.      //ejemplo> Randomize.getRandom(10,100)
  6.      */
  7.     public class Randomize {
  8.         public static function Random(_min:Number, _max:Number):Number {
  9.             var num:Number = Math.floor(Math.random() * (_max - _min + 1)) + _min;
  10.             return num;
  11.         }
  12.     }
  13. }

Uso:

Clic para ver Texto Plano
Actionscript:
  1. import Randomize
  2. trace(Randomize.Random(0,100))

categorias: Clases Actionscript 3 Coment.: -

21

Feb

Dibujar circulo – Sprite – clase de actionscript 3

Publicado por: LeoBaraldi

En esta sección iré colocando todas las clases que fui recolectando tanto mías como de terceros que me parecieron útiles para automatizar los procesos de programación en Adobe Flash, Flex o AIR.
Todas las mejoras que se les ocurra estaría bueno que las compartan así las publicamos y actualizamos periódicamente.

La siguiente clase es muy simple, pero no menos importante. La misma dibuja un circulo en un Sprite pasándole posición, tamaño y color de relleno.

Clase

Clic para ver Texto Plano
Actionscript:
  1. package {
  2. import flash.display.Graphics;
  3. import flash.display.Sprite;
  4. /**
  5. * ...
  6. * @author LeoBaraldi
  7. */
  8. public class DrawCircle extends Sprite {
  9. private var clip:Sprite;
  10. private var posX:uint;
  11. private var posY:uint;
  12. private var radius:Number;
  13. private var bgColor:uint;
  14. /*
  15. param:
  16. _posX: posición en X => px
  17. _posY: posición en Y => px
  18. _radius: tamaño del circulo => px
  19. _bgColor: color del circulo => 0xFF0000
  20. */
  21. public function DrawCircle(_posX:uint, _posY:uint, _radius:Number, _bgColor:uint):void {
  22. posX=_posX;
  23. posY=_posY;
  24. radius=_radius;
  25. bgColor=_bgColor;
  26. drawCircle();
  27. }
  28. private function drawCircle():void {
  29. clip = new Sprite();
  30. clip.graphics.beginFill(bgColor);
  31. clip.graphics.drawCircle(posX, posY, radius);
  32. addChild(clip);
  33. }
  34. }
  35.  
  36. }

Ejemplo de uso:

Clic para ver Texto Plano
Actionscript:
  1. import DrawCircle;
  2. var circulo:DrawCircle = new DrawCircle(100,100,20,0xFF0000)

categorias: Clases Actionscript 3 Coment.: 3

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi