Thierry’s Technical Tutorials

Archive for March, 2009

For one of the most basic shader examples, we will be learning about the Composite Shader, this basicaly gives your object a solid color with wireframe showing.

Composite Material Example

If you are a beginner to PV3D/Flash, My examples will be working from my initial post on Shaders which can be found here.
Otherwise please feel free to continue. 

Firstly we will need to import all necessary classes

package compositeMat {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFormat;

	import org.papervision3d.cameras.CameraType;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.WireframeMaterial;
	import org.papervision3d.materials.special.CompositeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.view.BasicView;

        import org.papervision3d.objects.parsers.DAE;
        import org.papervision3d.objects.DisplayObject3D;

Next we will pass the class, and the variables that we will be using

public class compositeMat extends Sprite
	{
		private var view:BasicView;
		private var color:ColorMaterial;
		private var wire:WireframeMaterial;
		private var composite:CompositeMaterial;
		private var sphere:Sphere;

		private var tf:TextField;
		private var format:TextFormat;

		 private var dae:DAE;
                private var daeFile:String;
                private var daeMaterialName:String;

And we will now finish off with our functions

public function compositeMat()
{
//controls camera size initialises BasicView
view = new BasicView(300, 300, false, false, CameraType.FREE);
//Sets up Rendering Engine
view.renderer = new BasicRenderEngine(); addChild(view);
//Select colours for Wireframe and object
color = new ColorMaterial(0x444444);
wire = new WireframeMaterial(0x888888);

composite = new CompositeMaterial();
composite.addMaterial(color);
composite.addMaterial(wire);
//Loading your .dae File
daeFile = "yourdaeFileName.dae";
dae = new DAE();
//adding the composite shader ontop of your DAE model
dae.load(daeFile,  new MaterialsList ( { all:composite } ));
//sometimes object needs to be scaled
dae.scale = 100;

//adding the object to the scene
view.scene.addChild(dae);

//Formating and adding text label to the scene.
format = new TextFormat("Arial", 10, 0xFFFFFF);
tf = new TextField(); tf.width = 230; tf.text = "Composite Material Shader";
tf.x = 10; tf.y = 10; tf.setTextFormat(format);
addChild(tf);

addEventListener(Event.ENTER_FRAME, onRenderViewport);
}

private function onRenderViewport(e:Event):void
{
//If you want your object to rotate on its axis
dae.rotationY++;
//Finaly render
view.singleRender();
}

Now if you are following this example on from my Introductory post on Shaders, you will need to import this .as file into you MainShader.as file by typing in the following:

package {
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.view.BasicView;

	import compositeMat.compositeMat; //IMPORTANT importing the Shader AS file
	import flash.display.Sprite;

	[SWF (width="800", height="600", framerate="25", backgroundColor="0x333333")];

	public class MainShader extends Sprite {
		private var composite:compositeMat;

		public function MainShader() {
			composite = new compositeMat();
			addChild(composite);
		}
	}
}

Now that you have imported your compositeMat.as file into you MainShader.as file, which is linked to whateveryoucallyourFLA.fla file you can press ctrl + shift + Enter to compile and debug your code or
ctrl + Enter to run your movie.

If you enjoyed this tutorial, why not Subscribe to my RSS feeds for all the latest updates on this blog, or use the Share buttons below!

This is to be the first of many tutorials on different shaders, and how they can be applied to dae files. Most tutorials you will find online explain how to add shaders to basic papervision objects, but not to DAE (COLLADA) files.

To begin with, we will start to learn about the simpler shaders, such as wireframe and solid colour shaders and work up to more complicated shaders such as envMapMaterial (environment material) shaders and Movie clip shaders.

All tutorials will be explained with the COMPLETE source code to allow you to get it going on your own machine!

Creating the initial project .Fla and .as Global files

These files will help link in all shader files so that you can learn how to add different shaders to more that one dae file, or different shaders to the same dae file.

first off, we will create an empty .FLA file (this will allow us to read the .as file we will make
and will help us run it!)

File > New (ctrl+N)
select Flash File (Actionscript3) and click ok.
Now save that under whatever name you like.

Now we need to create an Actionscript file (.as)
File > new (Ctrl+N)
select Actionscript File and click ok.
Now save this using whatever name you like – I will call it MainShader.as

It is in this MainShader.as file where we will write our code. but first we need to link
it to the .FLA file we made earlier.
click on the tab to open your .FLA file and look near the bottom of your screen, in the
properties tab, for something called Document Class in the text box to the right of it, enter
your .as file name – in this case “Shader” (without the quotes) and click on the little pencil icon to scan for the file.

You will see a pop up message, just click OK to close it. 

In this Tutorial, we now have yourfile.FLA and a MainShader.as file.

The MainShader.as file will be the Main file that will link all the other .as files

To find the Relevant Shader Tutorials, please use the drop down menu from the tabbed links at the top of this page, titled Papervision Tutorials.

This tutorial will show you how to add a Digg This icon link for all your posts automatically on Blogger so that your posts can spread like wildfire! 
follow these steps in Blogger: BACK UP YOUR CURRENT LAYOUT FIRST!

1. Go to Layout
2. Edit HTML
3. click on the “Expand template” checkbox
4. search for the line that says: <p><data:post.body/></p>
5. DIRECTLY underneath this enter in the following code

<script type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>

Update: As seen in one of the comments, it seems TEXT_INPUT is not the way to go, as it is “Dispatched after a control value is modified, unlike the textInput event, which is dispatched before the value is modified” check out the API

Acording to the Adobe API In Flash, by default a text field’s property is usualy set to “dynamic”, however if you change this property to “input” using the TextFieldType class, then it is possible to save user input for use in other parts of your appication – This is mainly useful when creating forms, or any application that need the user to define a text value somewhere else in the system.

In this tutorials example, the following code creates an imput text field called myFirstTextBox. As the user enters the text, An event is triggered, we will call this inputEvent.
To capture the string of text entered, we need an event handler – we shall call this inputCapture, it will capture the string and assign it a variable – then Flash Player or AIR displays the new text in another text field, called OutputBox.

package
{
  import flash.display.Sprite;
  import flash.display.Stage;
  import flash.text.*;
  import flash.events.*;

  public class CaptureInput extends Sprite
  {
    private var myFirstTextBox:TextField = new TextField();
    private var OutputBox:TextField = new TextField();
    private var myText:String = "Type your text here.";

    public function CaptureUserInput()
    {
      captureText();
    }

    public function captureText():void
    {
      myFirstTextBox.type = TextFieldType.INPUT;
      myFirstTextBox.background = true;
      addChild(myFirstTextBox);
      myFirstTextBox.text = myText;
      myFirstTextBox.addEventListener(TextEvent.TEXT_INPUT, inputEventCapture);
    }

    public function inputEventCapture(event:TextEvent):void
    {
      var str:String = myFirstTextBox.text;
      createOutputBox(str);
    }

    public function createOutputBox(str:String):void
    {
      OutputBox.background = true;
      OutputBox.x = 200;
      addChild(OutputBox);
      OutputBox.text = str;
    }
  }
}