AS-Tuts: Tutoriales de ActionScript

Now in Active Tuts+!!

noreply@blogger.com (lalo glz) — Thu, 17 Jun 2010 18:09:00 +0000

As you may know, I have been giving you some tutorials trough this blog, but now those tutorials will be posted on the Active Tuts+ webpage. I will a post some tutorials here, and also the link to the tutorials I write for Active Tuts.

So keep an eye on this blog because there are a ton of new tutorials coming!

New Singleton Pattern Tutorial

noreply@blogger.com (lalo glz) — Thu, 17 Jun 2010 18:02:00 +0000

Do you always wanted to knoe what's a singleton? well then this is for you =). In this tutorial I explain the basic elements and usage of a singleton, it is very simple, so if you had some problems understanding this concept, this tutorial is for you:
Quick Tip: The Singleton Pattern

Build a Brilliant Binary Clock with Flash

noreply@blogger.com (lalo glz) — Thu, 17 Jun 2010 17:51:00 +0000

Check out this tutorial I made, here we are going to create a fully functional Binary Clock!, want no know more?? go to this link:
Build a Brilliant Binary Clock with Flash

Hope you like it!

Getting Started with PV3D(Papervision 3D) Part 2

noreply@blogger.com (lalo glz) — Sat, 09 Jan 2010 21:03:00 +0000

Part 1: Getting Started with PV3D (Papervision 3D)
So on the previous tutorial i explained the basics of Papervision 3D, but we just set a static cube on the 3d scene and PV3D do a lot more things. On this tutorial i will explain how you can add Movement to the objects you added.

Firs let's see what we have:

package {
   import org.papervision3d.materials.ColorMaterial;
   import org.papervision3d.materials.utils.MaterialsList;
   import org.papervision3d.objects.primitives.Cube;
   import org.papervision3d.view.BasicView;
   public class Hello3DWorld extends BasicView
   {
       private var cube:Cube;
       private var matList:MaterialsList;
       private var color:ColorMaterial;
       public function Hello3DWorld()
       {
           color = new ColorMaterial(0x000000);
           matList = new MaterialsList();
           matList.addMaterial(color, "all");
           cube = new Cube(matList);
           scene.addChild(cube);
           startRendering();
       }
   }
}

Ok now the new stuff, Inside the BasicView class, there's a functioin called "onRenderTick" wich is called with the event Enter_Frame, so basically it is called arround 30 times per second (obviously this depends on your frame rate). This function calls the render method, so it takes a photo of how the scene is looking, so if we want to change something, for example the X position, we have to put there the change we want to do.

override protected function onRenderTick(event:Event=null):void
{
   cube.x++
   super.onRenderTick(event);
}

Let me explain each part of the code:

override: This means that we will be using a function contained on the class we are extending (BasicView), or in other words, that we will use a function of BasicView, but here comes the big difference, bye using override we can add new stuff to the function, in this case changin the x value of "cube", but it can be anything. Another important fact of using the override atribute, is that you must use the same signature of the function your are overriding.

protected: This is a scope definition, which means who can see this function. Protected applies for function or variables who would be seen just by this class or classes extending this class (subclasses).

function: well I think this is obvis =P

onRenderTick: Name of the function

(event:Event=null): The parameters of the function, because it is a Event listener, it need the event as a parameter.
void: Because it doesnt return anything.

Ok that was just the fisrt part, i hope everything is clear until now, next whats inside the function.

cube.x++: This is the change we are making on the cube, we are just moving it along the x value.
super.onRenderTick(event): First, by using "super" we are accesing the original function, the function that BasicView has. This is very important, because with out this we wouldn't call te renderer and the other stuff that comes with this function, so never forget it!, also it has an Event parameter, which is the same of our function, so just pass it.

Ands thats all basically, the other stuff is up to you and your imagination, you decide what to do on every enter frame as any other project =).

This example just rotates the cube by using the yaw and roll functions.

            cube=new Cube(matList);
            scene.addChild(cube);
            startRendering();
        }

        override protected function onRenderTick(event:Event = null):void {
            cube.yaw(2);
            cube.roll(2);
            super.onRenderTick(event);
        }
    }
}

Hope you like it =), see you in another Actionscript Tutorial.

Saludos, Lalo Glz

Signature: It referrs to the name, parameter, and return value of a function.
E.g.: myFunction (name:String):Number

Getting started with SVN(Subversion)

noreply@blogger.com (Unknown) — Thu, 07 Jan 2010 07:59:00 +0000

More than once, whenever we want to download libraries from websites, we are going to have the option of using a Subversion instead of downloading a .zip, which is better, because we will be able to get the latest version of the library every time.

You see, subversion (svn) is a system created for handling repositories, which is a way of organizing every version that a project has. Within these repositories, it is likely that you’ll find a folder which contains the latest version and others with previous versions or test versions.

That’s all very nice, but, how can you use this?

Well, first of all, you need to download a program that can handle this system. For Windows, Tortoise SVN is most commonly used:

http://tortoisesvn.net/downloads

Download and install it in your PC, once you have the program, you’ll have to create a new folder where you want your stuff to be. For example, a folder named “Classes” in My Documents, My Documents >Classes.

Once you have the folder, right-click it and select the option SVN Checkout…

Now you’ll be prompted for a URL, which is given by the website that hosts the library that we want, for example, Papervision 3D:

http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/

(This website gives you the link in the trunk folder, but because we only want the code, we are going to download the folder Source, the rest include examples or extra tool in case you want to download those)

This is the URL that we are going to use:

Click OK, and that’s it, the files will be downloaded to the computer.

Once all these files are downloaded, the folder will change to this icon:

Now, every once in a while libraries will be modified, as such, if you want to be always up to date, you just have to right-click the folder and select “SVN Update”.

And that’s it =) I hope this tutorial helps,

Greetings, Lalo Glz
Translated by: JavMT

Tutorial de Subversion

noreply@blogger.com (lalo glz) — Tue, 05 Jan 2010 05:53:00 +0000

Mas de una vez, cuando querramos bajar librerías de otros sitios, vamos a tener la opción de utilizar Subversion en vez de solo bajar el .zip, lo cual es mejor ya que de esta manera podremos obtener siempre la versión más actualizada de la librería.

Verán, subversion (svn) es un sistema para el manejo de repostorios, que vendría siendo una manera de organizar todas las versiones que hay de un mismo proyecto. Dentro de los repostorios de las librerias, casi siempre encontraras un folder que contiene la versión actual y otros con las versiones anteriores o de prueba.

Bueno pero como se utiliza esto??

Primero que nada van a necesitar bajarse un programa para manejar este sistema, para windows el más utilizado y del cual haremos este tutorial es el Tortoise SVN,

http://tortoisesvn.net/downloads

Bajenlo e instalenlo en su computadora, una vez teniendo el programa, lo que van a hacer sera crear una nueva carpeta en el lugar donde van a querer tener sus cosas, por ejemplo una carpeta "Classes" en Mis documentos, Mis Documentos>Classes.

Ahora hagan click derecho en la carpeta que acaban de crear, y seleccionen la opcion Checkout:

Una vez ahi les pedira una URL, la cual es proporcionada por el sitio de la libreria que queremos bajar, por ejemplo Papervision 3D:

http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/

(La pagina te da el link en la carpeta trunk, pero como solamente queremos el codigo, solamente vamos a bajar la carpeta de Source, las otras incluyen ejemplo o utilidades extra por si tambien lo quieren bajar);

Esta es la URL que vamos a ingresar:

Presionen Ok, y listo los archivos empezaran a bajarse a la computadora.

Una vez que esten todos la carpeta cambiara a este icono:

Ahora, cada cierto tiempo se le van haciendo cambios a las librerias, por lo tanto si lo que quieren es estar siempre actualizados, simplemente tienen que hacer click derecho en el folder y luego seleccionar "SVN Update".

y eso es todo =), espero les sea de utilidad este tutorial,

Saludoos, Lalo Glz

Usando el ClassPath en Flash

noreply@blogger.com (lalo glz) — Tue, 05 Jan 2010 03:26:00 +0000

Muchas veces, si no es que la mayoria vamos a estar utilizando codigo hecho por terceros, por ejemplo Tweener, Papervision 3D,TweenLite, etc., ó inclusive clases desarolladas por nosotros mismos, para ello cuando queremos usarlas tenemos que importarlas, pero si utilizamos el metodo normal, tendriamos que agregar las carpetas de las clases que vamos a necesitar a cada proyecto, lo cual no es muy eficiente ya que tendras muchas copias de la misma carpeta, y cuando existan actualizaciones tendriamos que aplicar la nueva copia a todas las carpetas.

Esto nos quita tiempo, espacio y no es eficiente, practicas que un buen programador debe de evitar. Para esto existe el Class Path dentro de Flash y otros IDE.

Basicamente el Class Path es la dirección en donde el programa buscara las classes que importes.

Esto nos ahorra tiempo porque no tendremos que tener copias por todos lados y con actualizar la carpeta en el classpath, se actualiza todo.

Para definirlo hacemos esto:

Dentro de flash: Edit>Preferences>ActionScript>ActionScript 3.0 Settings

Dentro de este menu, añadan el folder donde tienen todas sus classes donde dice Library Paths:

Ahora cuando necesiten una libreria, importenla como siempre lo han hecho pero ahroa sin la necesidad de copiar la carpeta =)

Espero les sea de utilidad,
Saludos, Lalo Glz

Introducción a Papervision 3D

noreply@blogger.com (lalo glz) — Mon, 04 Jan 2010 21:24:00 +0000

Papervision 3D, es un gran ambiente para desarrollar escenas en 3D para flash, pero tanto codigo extraño para alguien que apenas esta empezando puede ser un poco dificil, asi que prepare esta guía para todos los que quieran empezar a crear Flash en 3D =).

Primero que nada tienen que bajarse las classes de Papervision 3D, las cuales pueden encontrar en su pagina:

http://blog.papervision3d.org/

En la parte donde estan las descargar (Downloads), pueden seleccionar bajarlo desde SubVersion, o en un zip o swc, si apenas estas empezando, te suguiero simplemente bajar el zip, luego en otro tutorial explicare lo de SubVersion.

Ya que tengan el zip, descomprimanlo en donde tienen sus otras classes (classpath), ó sino saben esto, simplemente guardenlo en el mismo folder donde estaran los archivos con los que vamos a trabajar

Con todo esto listo ahora ya podemos empezar a crear el codigo =),

Primero, creen un nuevo archivo llamado "HolaMundo3D".


package {
   public class HolaMundo3D {
       public function HolaMundo3D() {
       }
   }
}

Ok, ya tenemos la clase, pero falta agregarle la parte de Papervision 3D, esto se hace diciendole a la clase que extienda la clase BasicView de Papervision 3D. BasicView contiene todo lo que necesitamos, ya tiene una Camara, un viewport, un renderer y una escena, asi que al extender esta clase nos quitamos muchas lineas de codigo de encima. Primero que nada hay que importarla:

import org.papervision3d.view.BasicView;

y ahora si aplicarla a nuestra clase:


package {
   import org.papervision3d.view.BasicView;
   public class Hello3DWorld extends BasicView {
       public function Hello3DWorld() {
       }
   }
}

ok, we already have almost everything, but right now if you run the code, you wont see anything,
cause we haven't added anything, so lets add a simple object, for example a cube.

First import the Cube class:

import org.papervision3d.objects.primitives.Cube;

and then we create a private variable named "cube":

Ok, ya tenemos lo necesario, pero si corres el archivo no podras ver nada, eso es porque faltan dos cosas muy importantes, llamar a la funcion startRendering() para que rendere la escena, y algo que ver, como un cubo por ejemplo. Para ello importamos la clase para crear el cubo, creamos la variable, y agregamos el cubo a la escena.


package {
   import org.papervision3d.objects.primitives.Cube;
   import org.papervision3d.view.BasicView;
   public class Hello3DWorld extends BasicView {
       private var cubo:Cube;
       public function Hello3DWorld() {
           cubo=new Cube  ;
           scene.addChild(cubo);
           startRendering();
       }
   }
}

Sin embargo para poder ver bien el cubo tenemos que darle materiales, los cuales se guardan en una variable MaterialsList y se pasan al cubo como parametro, esta ves le daremos un color negro (0x000000), sin embargo le podemos poner cualquier tipo de material:


package {
   import org.papervision3d.materials.ColorMaterial;
   import org.papervision3d.materials.utils.MaterialsList;
   import org.papervision3d.objects.primitives.Cube;
   import org.papervision3d.view.BasicView;
   public class Hello3DWorld extends BasicView {
       private var cubo:Cube;
       private var lista:MaterialsList;
       private var color:ColorMaterial;
       public function Hello3DWorld() {
           color=new ColorMaterial(0x000000);
           lista=new MaterialsList  ;
           lista.addMaterial(color,"all");
           cube=new Cube(lista);
           scene.addChild(cube);
           startRendering();
       }
   }
}

En este punto ya podremos ver el cubo, pero todo estará estático, para poder ver bien el poder 3d que tiene papervision podríamos rotar el cubo, sin embargo esto lo explicare en el otro tutorial, por ahora les adelantare el resultado =)

Aqui les dejo el codigo y el swf por si lo quieren descargar =): HolaMundo3D.rar

AS-Tuts Introduction

noreply@blogger.com (lalo glz) — Sun, 03 Jan 2010 07:39:00 +0000

Hi all!

My name is Eduardo, arround 3 years ago I started learning Action Script, and since then i have been learning all I can about it, I think it is a cool lenguaje, from which you can do a lot of stuff, and so i choose to create this blog, in order to give you all the Action Script tutorials that i can.

This blog will have all you need in order to become an AS-Pro, i will start with begginers tutorials and go on until we have a complete set of knowledge of Action Script =), so keep in touch and join this blog!

Hope you like it and please feel free to give any comment or suggentions in order to have a better blog!

Adios!, Eduardo

Getting Started with PV3D (Papervision 3D)

noreply@blogger.com (lalo glz) — Sat, 02 Jan 2010 23:26:00 +0000

Part 2 is out!!

Getting Started with PV3D(Papervision 3D) Part 2

Papervision 3D is a great API for developing 3D escenarios in Flash, but it can get a little confusing at the beggining, so here is a guide for how to start your first PV3D app.

The first thing you have to do is download PV3D from their webpage:
http://blog.papervision3d.org/
and download the files, you can use subversion or just download the zip or swc containing the classes, both are ok so it is up to you =).

Once you have downloaded the file, be sure that you have the class path pointing to the files you need (If you dont know whats the class path, dont worry), or otherwise you will need to add those folders to all the swf you create.

Ok, then with all the files settled, lets start:

First we will create our class, lets call it "Hello3DWorld" (just following the tradition =),

package {
 public class Hello3DWorld {
  public function Hello3DWorld() {
  }
 }
}

But in this case we will do something different, instead of extending the sprite class, as we would normally do, we will extend the BasicView class from the papervision package, we would also have to import that class which is in:

import org.papervision3d.view.BasicView;

complete code:

package {
 import org.papervision3d.view.BasicView;
 public class Hello3DWorld extends BasicView {
  public function Hello3DWorld() {
  }
 }
}

This class has all we need to use in order to create our 3d scene, it already has a camera, a scene, a view port and a renderer, which you would have to create if you dont extend this class.

ok, we already have almost everything, but right now if you run the code, you wont see anything,
cause we haven't added anything, so lets add a simple object, for example a cube.

First import the Cube class:

import org.papervision3d.objects.primitives.Cube;

and then we create a private variable named "cube":

package {
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.view.BasicView;
 public class Hello3DWorld extends BasicView {
  private var cube:Cube;
  public function Hello3DWorld() {
   cube = new Cube();
  }
 }
}

Then add it to the scene, and start rendering it to see whats happening:

package {
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.view.BasicView;
 public class Hello3DWorld extends BasicView {
  private var cube:Cube;
  public function Hello3DWorld() {
   cube = new Cube();
   scene.addChild(cube);
   startRendering();
  }
 }
}

But in order to see the cube, we need to give some materials to it, which are holded on a materialList variable, so lets create both variables.

For the material, we will use a colorMaterial with black (0x000000).

package {
 import org.papervision3d.materials.ColorMaterial;
 import org.papervision3d.materials.utils.MaterialsList;
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.view.BasicView;
 public class Hello3DWorld extends BasicView {
  private var cube:Cube;
  private var matList:MaterialsList;
  private var color:ColorMaterial;
  public function Hello3DWorld() {
   color=new ColorMaterial(0x000000);
   matList = new MaterialsList();
   matList.addMaterial(color, "all");
   cube=new Cube(matList);
   scene.addChild(cube);
   startRendering();
  }
 }
}

Ok, so lets run the app and see the results =).

So there's the cube, but that's just a static cube. Lets make something better with it:

package {
package {
 import flash.events.Event;
 import org.papervision3d.materials.ColorMaterial;
 import org.papervision3d.materials.utils.MaterialsList;
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.view.BasicView;
 public class Hello3DWorld extends BasicView {
  private var cube:Cube;
  private var matList:MaterialsList;
  private var color:ColorMaterial;
  public function Hello3DWorld() {
   color=new ColorMaterial(0x000000);
   matList = new MaterialsList();
   matList.addMaterial(color, "all");
   cube=new Cube(matList);
   scene.addChild(cube);
   startRendering();
  }

  override protected function onRenderTick(event:Event = null):void {
   cube.yaw(2);
   cube.roll(2);
   super.onRenderTick(event);
  }
 }
}

and this is the result:

But i will explain this better on the next post, so se you there!

Getting Started with PV3D(Papervision 3D) Part 2

Here you can download the source: Hello3DWorld.rar