Archives For Actionscript

AS2 y AS3, recursos y ejemplos

En el post anterior mostraba una funcion para redondear un numero a un numero especifico de decimales.

Puse esa funcion en una clase (LaoMath), y le agruege una caracteristica mas: si quisiera redondear 65.6565 a dos decimales, uso el metodo round de mi clase LaoMath:

  1. import com.innocuo.utils.LaoMath;
  2. var num:Number = 65.6565;
  3. trace(LaoMath.round(num,2)); //devuelve 65.66

Facil, verdad? ahora, si quiero mostrar el resultado con 4 decimales (en el ejemplo, el resultado deberia tener dos ceros mas al final), el codigo es:

  1. import com.innocuo.utils.LaoMath;
  2. var num:Number = 65.6565;
  3. trace(LaoMath.round(num,2,4)); //devuelve 65.6600

En el ejemplo LaoMath.round es el metodo que utilizo para redondear el numero, num es el numero que quiero redondear, 2 es la posicion decimal a la que quiero redondear, y 4 es el numero minimo de decimales que debo tener. Atencion, que es el numero minimo, asi que en este otro ejemplo, no funcionaria igual:

  1. import com.innocuo.utils.LaoMath;
  2. var num:Number = 65.6565;
  3. trace(LaoMath.round(num,2,1)); //devuelve 65.66

En este caso pido que el numero devuelto tenga como minimo 1 decimal, pero estoy redondeando a dos decimales, asi que ese parametro se ignora.

Ahora, una caracteristica especial de este metodo es que permite no solo redondear a un numero decimal, sino tambien a decenas, centenas, miles, etc. Como? simplemente asignando un numero negativo al segundo parametro (la funcion entendera que estoy redondeando hacia la izquierda). Por ejemplo:

  1. import com.innocuo.utils.LaoMath;
  2. var num:Number = 65.6565;
  3. //redondear por decenas
  4. trace(LaoMath.round(num,-1)); //devuelve 70
  5. //redondear por centenas
  6. trace(LaoMath.round(num,-2)); //devuelve 100
  7. //redondear por centenas, y mostrar el resultado con 3 decimales
  8. trace(LaoMath.round(num,-2,3)); //devuelve 100.000
  9. //OJO, si redondeo 65.6565 a miles, el resultado sera 0
  10. trace(LaoMath.round(num,-3)); //devuelve 0

Espero que estos ejemplos sean de utilidad. La clase es gratuita (si algun dia tengo tiempo, añadire otros metodos de interes).
bajar codigo: laomath.zip
documentacion: link
codigo fuente: link

Finalmente, un poco de actionscript para compartir. 🙂

En Flash, el metodo round de la clase Math nos permite redondear decimales. Pero siempre redondea al numero entero mas proximo. Y si necesitamos redondear a dos, o tres, o cuatro decimales, como hacemos? El siguiente codigo lo muestra:

  1. function round(qnum:Number, qdecimal:Number):Number {
  2.     var decimal:Number = Math.pow(10, Math.round(qdecimal));
  3.     var num:Number = Math.round(qnum*decimal)/decimal;
  4.     return num;
  5. }
  6. var num:Number = round(65.656321, 2);
  7. trace(num); //devuelve 65.66

Esta es una pequeña introduccion al siguiente post, donde añadire un par de detalles.

Me preguntaron por ahi si es que sabia como se hacen esos botones en flash, que se animan, y luego muestran mas botones dentro. Seguro que lo han visto, este efecto se usa bastante para navegacion (menu, submenu). Si no, este es un ejemplo claro de lo que estoy hablando: Plur2k (fijense en los botones de la barra de navegacion superior).

Pues ahi se me ocurrio hacer un ejemplo de este efecto en 5 minutos. Es una solucion simplificada, sin ganas de complicarme la vida. Pasen el mouse sobre la zona gris, para que lo vean.

Si les gusto, y quieren el archivo fuente, bajenlo dando click aqui

Spacializer

febrero 20, 2006

Spacializer es un experimento visual en flash realizado por Sébastien Chevrel. Su sitio está lleno de otros experimentos interesantes (la mayoría hechos con Processing). A proposito, te puedes bajar el codigo fuente de ese experimento.

Me lo encontre cuando navegaba por stumbleupon.

Ya que estoy dando links, voy a poner estos otros, que tambien valen la pena en materia de experimentos visuales:
Incomplet: galeria de experimentos de Grant Skinner y
Flight 404, galeria de proyectos en su mayoría realizados con Processing.

fCMS | flash component

febrero 16, 2006

En el blog play.ground nos cuenta su autor que acaba de sacar un componente en flashloaded: un pequeño CMS que te permite editar texto e imagenes directamente desde tu sitio Flash.

Si el precio de $129.95 no te desanima, puedes encontrar mas detalles en flashloaded, acompañado de una guia y hasta un ejemplo.

El componente trabaja con archivos xml, asi que supongo que no necesitas base de datos. Lo que si, veo que le falta la habilidad de poder agregar y quitar registros. Quien sabe, talvez despues.

Documentando el codigo

febrero 11, 2006

Uno de los errores mas graves que tengo cuando programo es que no me gusta comentar el codigo que hago. Y claro, es que pienso que gasto tiempo valioso: el tiempo que ocupo en escribir dos lineas de comentario, podria utilizarlo en crear un par de funciones, o una clase entera. Pues estoy muy equivocado. Esos pocos segundos que me ahorro por no documentar, me cuestan caro despues, cuando necesito actualizar mi codigo y no recuerdo lo que hice, que variables use, por que cree tal o cual funcion. De igual manera pasa cuando quiero reutilizar el codigo, pero no recuerdo como usarlo.

Pues bien, por eso es importantisimo documentar el codigo. Ademas, hay herramientas (para cada lenguaje de programacion) que me ayudan a crear una documentacion bonita y organizada a partir de los comentarios que he puesto en mi codigo. Hacer esto ayuda mucho, no solo para organizarte, sino tambien si deseas distribuir tu codigo: una documentacion bien realizada, facilita el uso del codigo.

En el caso de actionscript, hay varios programas, algunos estan listados en osflash. Me decidi probar dos: NaturalDocs y as2api. Cada uno tiene reglas especificas para documentar tu codigo, para luego correr un comando que parsea estos comentarios y genera la documentacion.

Me gusta NaturalDocs por el hecho de que sus reglas son mucho mas faciles de recordar. La presentacion de la documentacion es bastante elegante, y sobretodo es facil de usar. Tambien puedes configurar y crear nuevos menus a tu gusto (cambiando los archivos de documentacion). Ademas, esta herramienta no es solamente para actionscript, puedes usarla para generar documentacion de distintos lenguajes de programacion como php, java, coldfusion, python, javascript, entre otros (ver la lista de lenguajes soportados). Luego de probarlo, hay solamente dos cosas que no me gustaron: documenta tambien funciones y variables privadas (que generalmente deseas ocultarlas) y si tienes funciones getter y setter, las documenta como dos metodos distintos.

as2api es un programa solamente para actionscript. Su sintaxis y estilo de documentacion estan basados en javadoc (herramienta para java). A pesar de que apenas esta en su version 0.4, as2api es bastante completo. Sus reglas de documentacion son faciles de aprender, sobretodo si has utilizado javadoc anteriormente. Que es lo que no me gusta de esta herramienta? que la documentacion generada se ve horrible 🙂 pero todo es cuestion de jugar un poco con su hoja de estilos. La herramienta es mas basica, pero eso no significa que no sea buena.

Para muestra un boton: estoy trabajando en un proyecto del que hablare despues y que sera libre para que lo bajen. Probe ambas herramientas, y estos son los resultados:

Naturaldocs: mi documentacion (esta incompleta, pues no use sus reglas para comentar mi codigo)
As2api: mi documentacion sin modificar.
As2api: mi documentacion, despues de modificar la hoja de estilos.

En fin, me quede con as2api (con mi hoja de estilos). No es lo mejor del mundo, pero basta y sobra para mantener una buena documentacion de mi codigo.

Si programas en php, te recomiendo phpdoc

Finalmente, se que no el blog no ha estado muy activo, pero proximamente estare posteando un poco mas, sobre como utilizar as2api, utilizar clases abstractas, flickr, mi proyecto (del que acaban de ver la documentacion), entre otras cosas.

En un post anterior puse un experimento de actionscript para hacer un menu. En esta version tengo algunas mejoras, sobre todo, le di la posibilidad a los botones para ejecutar una funcion al ser oprimidos. Puedo destruir el menu llamando a un metodo. Puedo alinear el texto animado, a la derecha o bajo el menu.

  1. //primero creo una referencia global al lugar donde esta el menu
  2. _global.myroot=this
  3. //creo las functiones respectivas a cada menu
  4. function traceID(){
  5.   trace(this.uid)
  6.   //dara como resultado el id del boton aplastado
  7. }
  8.  
  9. function traceLabel(){
  10.   trace(this.qlabel)
  11.   //dara como resultado la etiqueta del boton
  12. }
  13. //destruye el menu lilmenupanel
  14. function destroyMe(){
  15.   _global.myroot.lilmenupanel.destroyMenu()
  16. }
  17. //defino el texto que el menu tiene por default
  18. this.lilmenupanel.mainlabel="blog.innocuo.com"
  19. //anado items al menu, dos parametros: titulo del boton, y descripcion
  20. //el tercer parametro es una referencia a una funcion
  21. this.lilmenupanel.addMenuItem("Home","01 Home",this.traceID)
  22. this.lilmenupanel.addMenuItem("Contact","02 Contact",this.traceLabel)
  23. this.lilmenupanel.addMenuItem("Portfolio","Mi trabajo",this.destroyMe)
  24. //puedo alinear el texto animado con "right" o "bottom"
  25. this.lilmenupanel.alignment="bottom"
  26. //una vez que termino de añadir items, puedo mostrar el menu
  27. this.lilmenupanel.renderMenu()

El siguiente es un ejemplo un poco mas complejo, donde creo y destruyo un menu secundario

Bajar el codigo fuente: dando click aqui.

En el post anterior mencionaba el sitio de Sean Kennedy Santos. Pues bien, estaba jugando en flash, y el resultado fue un menu parecido al de ese sitio.

Se basa en tres clases: menupanel (que controla el menu en general), menuitem(que corresponde a cada boton del menu) y typewritter (que es una clase para animar el texto)

Para hacerla funcionar, primero arrastro mi movieclip de menu al stage. Luego, añado las siguientes lineas de codigo:

  1. //defino el texto que el menu tiene por default
  2. this.lilmenupanel.mainlabel="blog.innocuo.com"
  3. //anado items al menu, al momento son solo dos parametros: titulo del boton, y descripcion
  4. this.lilmenupanel.addMenuItem("Home","01 Home")
  5. this.lilmenupanel.addMenuItem("Contact","02 Contact")
  6. this.lilmenupanel.addMenuItem("Portfolio","Mi trabajo")
  7. //una vez que termino de añadir items, puedo mostrar el menu
  8. this.lilmenupanel.renderMenu()

el metodo addMenuItem me permite agregar botones a mi menu, con dos parametros: el texto del boton, y la descripcion (que es la que se va a animar)
Una vez que termino de añadir items a mi menu, lo renderizo con el metodo renderMenu.

Este es solo un ejemplo, los botones no estan habilitados para realizar accion alguna (talvez siga costumizando este menu para hacer una especie de componente).

Bajar el codigo fuente: dando click aqui.