Flash lab, tutorials, papervision, AS3 and many more

Posts Tagged ‘tutorial’

Papervision 2 -> 4. Uso de la clase Base

(Este tutorial es una traduccion del tutorial de Luke:
http://papervision2.com/4-basic-template-usage/)

Ahora que ya tienes creada tu clase Base, seguramente tendras mucho interés en probarla.

Vamos a empezar simplemente creando un cono rotando, algo como esto:

Usando la clase Base que has creado, puedes rapidamente hacer este simple ejemplo. Primero, crea un proyecto en FlashDevelop. Llamalo “ConeExample” o algo parecido. Ve a “Project > Properties…” y escribe cone.swf en el campo Output File. En la pestaña Classpaths, necesitas añadir 2 rutas de clases esta vez. Primero, en esa pestaña, pincha en AddClasspath…, busca el directorio de GreatWhite y pincha OK.

Ahora necesitas añadir la clase Base al proyecto. Pulsa en “Add Classpath…” de nuevo, y esta vez entra en el directorio donde guardaste la clase Base. Encuentra la carpeta que contiene PaperBase.as y pulsa OK.

Ahora necesitamos crear el codigo.

Click con el boton derecho en “ConeExample” en el arbol de proyecto, ve a Add y elige New Class.

Nombra la clase Main.as.

Click derecho en Main.as, en el arbol de proyecto y selecciona Always Compile.

Ahora estas listo para el codigo.

Primero, añadimos las siguientes lineas al Main.as, despues de la linea “package{”

import PaperBase;
import org.papervision3d.objects.primitives.Cone;

Esas lineas importarán todos los paquetes que necesitamos.

Ahora, cambia la linea:

public class Main{

por

public class Main extends PaperBase{

Esto hara que nuestro proyecto importe todas las funciones y el codigo que hemos escrito en PaperBase.as. Ahora podemos añadir unas pocas lineas de codigo para que nuestro proyecto funcione.

Necesitaremos añadir un objeto Cono al escenario. Directamente debajo de esa linea:

public class Main extends PaperBase{

insertaremos esta:

public var cone:Cone = new Cone();

Esta linea creará un objeto cono y lo alojará en la variable “cone”.

Ahora, cuando el proyecto este corriendo, el codigo en “public function Main()” sera ejecutado. Queremos inicializar nuestro esqueleto Papervision cuando ejecutemos el proyecto. Para esto, cambia la funcion para que quede asi:

public function Main(){
init();
}

Esto ejecutará la funcion init() de nuestra clase PaperBase cuando corramos el proyecto.

Ahora necesitamos anular dos funciones de PaperBase. Son init3d() y processFrame().

Necesitaremos añadir nuestro cono a la escena en init3d, entonces lo rotaremos un poco cada vez que processFrame() sea llamado. Para hacerlo añade este codigo justo debajo de la funcion Main().

override protected function init3d():void{
cone.scale = <span style="color: #0000ff;">3</span>; <span style="color: #008000;">// Make the cone bigger</span>
cone.pitch(<span style="color: #0000ff;">-40</span>); <span style="color: #008000;">// Tilt it towards the camera</span>
default_scene.addChild(cone); <span style="color: #008000;">// Add it to the scene</span>
}
 
<span style="color: #0000ff;">override protected function</span> processFrame():<span style="color: #008080;">void</span> {
cone.yaw(<span style="color: #0000ff;">5</span>); <span style="color: #008000;">// Rotate it a bit</span>
}

Estas dos funciones sobreescritas correran en lugar de las originales en PaperBase. Cuando ejecutes el proyecto, deberías ver el cono rotando! Prueba jugando con los valores, añadiendo y cambiando un poco las dos funciones que hemos comentado.

El codigo final deberia quedar como esto:

package  {
 
    import PaperBase;
    import org.papervision3d.objects.primitives.Cone;
 
    public class Main extends PaperBase {
 
       public var cone:Cone = new Cone();
 
       public function Main() {
         init();
       }
 
       override protected function init3d():void {
         cone.scale = 3;
         cone.pitch(-40)
         default_scene.addChild(cone);
       }
 
       override protected function processFrame():void {
         cone.yaw(7);
       }
 
    }
 
}

Papervision 2 -> 1. Preparando las herramientas

(Este articulo es una traduccion de Papervision2 -> 1.Preparing your tools )

Elegir un IDE

Hay varios entornos de desarrollo disponibles. El mas usado para desarrollar Papervision es Adobe Flex 2. Podeis bajaros una demo de Flex de 30 dias, o podeis comprarlo. La desventaja de esto es que es caro.

Hay una alternativa gratis si usas Windows. La gente de FlashDevelop ha creado un IDE gratuito que junto con el Flex 2 SDK, puede ser usado como una alternativa gratuita a Adobe Flex. A continuacion vamos a ver como instalar FlashDevelop.

Descargando FlashDevelop y Flex SDK

Lo primero que necesitas es descargar el Flex SDK de la pagina de Adobe.

Puedes usar este link directo: Flex 3 SDK (81 Mb)

Ahora necesitas descargar una version de FlashDevelop desde su website.
Yo estoy usando la version 3.0.0 Beta5 in estos tutoriales, pero no deberia importar que version elijas.

Puedes descargar esta version usando este link: FlashDevelop 3.0.0 Beta8 (3.4 Mb)

Intalando FlashDevelop

NOTA: Esta instalacion requiere el Java Runtime Enviroment version 1.6. Si aun no lo tienes, puedes descargarlo aqui: http://filehippo.com/download_java_runtime/

Primero, doble click en el icono del instalador de FlashDevelop. Deberia aparecer esta ventana:

Pulsa en Siguiente, lee y acepta los Terminos de Licencia, entonces veras esta pantalla:

Yo añadi la opcion para permitir multiples instancias de la aplicacion, pero eso ya es eleccion tuya.

Pulsa Siguiente, entonces Install

Ya has instalado FlashDevelop en tu sistema. Aun necesitamos configurar el Flex SDK para poder usarlo para desarrollar Papervision 3D.

Instalando Flex SDK

Primero, descomprime los archivos del zip que has descargado.

Yo he descomprimido los archivos en C:\FlexSDK\ pero tu puedes extraerlos donde quieras.

Ejecuta FlashDevelop. En el menu de arriba del todo, pulsa en Tools, ahora en el menu desplegable selecciona Program Settings. Ahora veras la ventana de Configuracion.

En la lista de la izquierda, selecciona AS3Context.

A la derecha, veras una lista de opciones de configuracion. Encuentra la opcion de “Flex SDK Location” y pulsa en la caja de texto.

Aparecera un boton con puntos suspensivos. Pulsalo y elije el directorio donde has descomprimido los archivos de Flex SDK. Asegurate de elegir la carpeta que contiene las subcarpetas “asdoc, bin, frameworks” etc…

Pulsa en OK y cierra el panel de configuracion.

FlashDevelop esta configurado y listo para usar.