Thierry’s Technical Tutorials

Archive for the ‘Tutorials’ Category

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;
    }
  }
}

This tutorial will show you a quick and easy way of allowing your objects to spin/rotate automaticaly.

Firstly you need to either import or create your shape.

creating a plane:

private var object:Plane;...object = new Plane(...)

If you need a more detailed explanation of creating standard shapes, please visit this tutorial for more information.

Importing a .DAE:

public class Example extends BasicView
{
var dae:DAE;
var daeFile:String;
var daeMaterialName:String;

public function Mainscale()
{
daeFile = "yourDAEfile.dae";
daeMaterialName = "YourTextureName";
dae = new DAE();
dae.load(daeFile);
dae.scale = 120;
scene.addChild(dae);
}
}

after you have imported and added your Object to the scene, you need to add a loop in the code (i.e an event listener) then call the function.
so stragiht after we have added the object to the scene i.e using scene.addChild(yourobjectName);

add an event listener:

addEventListener(Event.ENTER_FRAME, loop3D);

Then create a new function, that listens for the event:

private function loop3D(e:Event):void{
//either use
yourobjectName.yaw(2); //changing the number will increase or decrease the speed
//OR use
yourobjectName.rotationY++}

And that should do it!
need any extra help? leave a comment, and i will get back to you!

Here is an example code, of how to enable mouse and keyboard interaction within your papervision actionscript file.

May promise a better full tutorial later on….


package
{
import flash.events.Event;
import flash.display.Sprite;
import flash.geom.Point;
//Import Camera, Scene, etc..
import org.papervision3d.view.BasicView;
//Mouse Movements
import flash.events.MouseEvent;
import flash.events.KeyboardEvent;
//rotation calculations
import org.papervision3d.core.math.Matrix3D;
import org.papervision3d.core.math.Number3D;

/*
*@Author: Thierry Zoghbi
*@Date: 2009.
*/

[SWF(width="800", height="600", backgroundColor="#0066F", frameRate="25")]

public class Mainsack extends BasicView
{

private var container : DisplayObject3D;
private var previousMousePoint : Point = new Point();
private var targetScale : Number = 1;
private static const FORWARD:Number3D = new Number3D(0, 0, 1);

public function Mainsack()
{
var yourobject = new Collada("yourDAEfile.dae");

this.stage.doubleClickEnabled = true;
this.stage.addEventListener( MouseEvent.DOUBLE_CLICK, onDoubleClick );
this.stage.addEventListener( MouseEvent.MOUSE_DOWN, whenMouseDown );
this.stage.addEventListener( MouseEvent.MOUSE_WHEEL, whenMouseWheel );
this.stage.addEventListener( KeyboardEvent.KEY_DOWN, whenKeyDown );

addChild(yourobject);
resetView();
}

private function whenKeyDown( event : KeyboardEvent ) : void
{
trace( event.keyCode );
switch ( event.keyCode )
{
case 187: //
case 107: //
zoom( 3 );
break;
case 189: // –
case 109: // –
zoom( -3 );
break;
case 82: // r (reset)
resetView();
break;
}
}

private function whenMouseWheel( event : MouseEvent ) : void
{
zoom( event.delta );
}

private function onDoubleClick( event : MouseEvent ) : void
{
zoom( 10 );
}

private function whenMouseDown( event : Event ) : void
{
this.startRendering();
previousMousePoint = new Point(viewport.containerSprite.mouseX, viewport.containerSprite.mouseY);
this.stage.addEventListener( MouseEvent.MOUSE_MOVE, whenMouseMove );
this.stage.addEventListener( MouseEvent.MOUSE_UP, whenMouseUp );
}

private function whenMouseUp( event : Event ) : void
{
this.stopRendering();
this.stage.removeEventListener( MouseEvent.MOUSE_MOVE, whenMouseMove );
this.stage.removeEventListener( MouseEvent.MOUSE_UP, whenMouseUp );
}

private function whenMouseMove( event : Event ) : void
{
var currentMousePoint:Point = new Point(viewport.containerSprite.mouseX, viewport.containerSprite.mouseY);

var difference:Point = currentMousePoint.subtract(previousMousePoint);
var vector:Number3D = new Number3D(difference.x, difference.y, 0);

var rotationAxis:Number3D = Number3D.cross(vector, FORWARD);
rotationAxis.normalize();

var distance:Number = Point.distance(currentMousePoint, previousMousePoint);
var rotationMatrix:Matrix3D = Matrix3D.rotationMatrix(rotationAxis.x, -rotationAxis.y, rotationAxis.z, distance/(600*Math.pow(container.scale, 5)));
container.transform.calculateMultiply3x3(rotationMatrix, container.transform);

//this line used to apply transform to actual rotation values, so that if you change scale, the changes are persisted
container.copyTransform(container);

previousMousePoint = currentMousePoint

trace( container.rotationX, container.rotationY, container.rotationZ, container.scale );
}

private function zoom( delta : Number ) : void
{
targetScale = targetScale (delta * .01);
targetScale = Math.max( targetScale, .5 );
targetScale = Math.min( targetScale, 1.6 );
Tweener.addTween( this, {sceneScale:targetScale, time:1, transition:"easeOutQuart"} )
}

public function resetView() : void
{
Tweener.addTween( container, {time:3, rotationX:0, rotationY:0, rotationZ:0, transition:"easeOutQuart"} )
//Tweener.addTween( container, {time:3, rotationX:-45, rotationY:0, rotationZ:0, transition:"easeOutQuart"} )
Tweener.addTween( this, {sceneScale:1, time:3, transition:"easeOutQuart"} )
}

public function set sceneScale( value : Number ) : void
{
container.scale = value;
singleRender();
}

public function get sceneScale() : Number
{
return container.scale;
}

}
}

This tutorial will explain how to enable keyboard commands in Flash Actionscript 3 CS3.

Firstly we need to import the Keyboard class in flash this can be done by:

import flash.events.KeyboardEvent;

After we have imported the keyboardEvent package, it is necessary to add an event listener to the stage, otherwise Flash will not know that we are pressing a key, and will not know what to do with it.

stage.addEventListener(KeyboardEvent.KEY_DOWN, KeyPressed);

We need to create a function for our KeyPressed event listener but inside our function we create a switch statement to determine what the function should do when a certain key is pressed. Inside our parameters we have the argument evt.KeyCode this gets the key code for the key that was pressed to trigger the event.

function KeyPressed(evt:KeyboardEvent):void {switch (evt.keyCode){
case Keyboard.UP :break;case Keyboard.DOWN :break;case 
Keyboard.LEFT :break;case Keyboard.RIGHT :break;
}
}

After you have specified what keys you would like to use, you can link them for example to move something. For example, if you want a square to move in the x direction when the “up” arrow is pressed on the keyboard you would add square.y += 5;

so the code above would be modified to look like this:

case Keyboard.UP :square.y += 5;break;