Flash lab, tutorials, papervision, AS3 and many more

Posts Tagged ‘clases’

Papervision 2 -> 3. Creando la clase Base Papervision

(Este tutorial es una traduccion del tutorial de Luke:
http://papervision2.com/3-creating-a-papervision-base-template/)

La primera cosa que debes hacer cuando creas un proyecto de Papervision 3D es crear una “Clase Base” que te servirá de plantilla para agilizar el inicio de cada proyecto Papervision que empiezes.

1) Creando un proyecto nuevo en FlashDevelop

Abre el FlashDevelop. En la pagina de inicio, pincha en New -> Project… En la parte de proyectos recientes.

La ventana de New Project aparecerá. En ActionSCript 3, pulsa Empty Project. Escribe el nombre en la caja de Name y pincha en la caja “Create Directory for Project”.

Pincha OK para cerrar el cuadro de dialogo. Veras el nuevo proyecto en la ventana de Proyecto. Necesitamos añadir un archivo al proyecto.

Lo primero que tienes que hacer en tu proyecto es importar el codigo de Papervision asi tu programa podrá usarlo. Del menú de arriba, elije Project, entonces Settings.

La caja de Project Setting aparecerña. Pulsa en la pestaña Classpaths y pincha en Añadir Classpath.

Ahora busca la carpeta donde descargaste el codigo de GreatWhite  en el tutorial anterior. Elige la carpeta de greatwhite (deberia contener carpetas llamadas org, fl and com) y pulsa OK.

Ahora deberías tener un icono que parece un ladrillo de Lego conteniendo el codigo GreatWhite en tu proyecto.

Ahora necesitas hacer un script para ser ejecutado cuando corramos nuestro programa. Click en el boton derecho y en el arbol de proyecto ve a Add > New Class.

Nombra a la clase PaperBase.as y pincha en OK. Ahora crearemos el archivo Main.as en nuestro editor. El codigo es como este:

/**
* ...
* @author Default
* @version 0.1
*/
 
package {
 
    public class PaperBase {
 
       public function PaperBase() {
 
       }
 
    }
 
}

Esta es una clase en blanco. Primero, necesitamos compilar esta clase cuando ejecutemos el proyecto. Para hacerlo, boton derecho en Main.as en el arbol de proyecto y elije “Always Compile“.

Tambien tenemos que especificar la ruta del archivo de salida SWF. Para hacerlo, en el menu de Project, elije Propiedades.

En la pestaña Output en General, veras una caja de texto llamada “Output File”. Pincha en Browse y elije donde colocar el archivo de salida.

Ahora, cambia el codigo fuente por este: (Los comentarios del codigo explican cada paso):

package  {
    // These lines make differant 'pieces' available in your code.
    import flash.display.Sprite; // To extend this class
    import flash.events.Event; // To work out when a frame is entered.
 
    import org.papervision3d.view.Viewport3D; // We need a viewport
    import org.papervision3d.cameras.*; // Import all types of camera
    import org.papervision3d.scenes.Scene3D; // We'll need at least one scene
    import org.papervision3d.render.BasicRenderEngine; // And we need a renderer
 
    public class PaperBase extends Sprite { //Must be "extends Sprite"
 
       public var viewport:Viewport3D; // The Viewport
       public var renderer:BasicRenderEngine; // Rendering engine
       // -- Scenes -- //
       public var default_scene:Scene3D; // A Scene
       // -- Cameras --//
       public var default_camera:Camera3D; // A Camera
 
       public function init(vpWidth:Number = 800, vpHeight:Number = 600):void {
         initPapervision(vpWidth, vpHeight); // Initialise papervision
         init3d(); // Initialise the 3d stuff..
         init2d(); // Initialise the interface..
         initEvents(); // Set up any event listeners..
       }
 
       protected function initPapervision(vpWidth:Number, vpHeight:Number):void {
         // Here is where we initialise everything we need to
         // render a papervision scene.
         viewport = new Viewport3D(vpWidth, vpHeight);
         // The viewport is the object added to the flash scene.
         // You 'look at' the papervision scene through the viewport
         // window, which is placed on the flash stage.
         addChild(viewport); // Add the viewport to the stage.
         // Initialise the rendering engine.
         renderer = new BasicRenderEngine();
         // -- Initialise the Scenes -- //
         default_scene = new Scene3D();
         // -- Initialise the Cameras -- //
         default_camera = new Camera3D(); // The argument passed to the camera
         // is the object that it should look at. I've passed the scene object
         // so that the camera is always pointing at the centre of the scene.
       }
 
       protected function init3d():void {
         // This function should hold all of the stages needed
         // to initialise everything used for papervision.
         // Models, materials, cameras etc.
       }
 
       protected function init2d():void {
         // This function should create all of the 2d items
         // that will be overlayed on your papervision project.
         // User interfaces, Heads up displays etc.
       }
 
       protected function initEvents():void {
         // This function makes the onFrame function get called for
         // every frame.
         addEventListener(Event.ENTER_FRAME, onEnterFrame);
         // This line of code makes the onEnterFrame function get
         // called when every frame is entered.
       }
 
       protected function processFrame():void {
         // Process any movement or animation here.
       }
 
       protected function onEnterFrame( ThisEvent:Event ):void {
         //We need to render the scene and update anything here.
         processFrame();
         renderer.renderScene(default_scene, default_camera, viewport);
       }
 
    }
 
}

Esta bien comentado, asi que deberia explicar todo lo que ocurre.

Cuando ejecutes el proyecto, veras una pantalla en blanco, esto es normal porque aún no hemos añadido nada en la escena.

Puedes descargar el archivo fuente con los comentarios o sin ellos desde este enlace: fuente

Descargar codigo fuente

Ahora usaremos este archivo como base de cualquier proyecto de Papervision que hagas, y con unas pocas lineas de codigo puedes tener muy buenos resultados.