Flashmech

Objective

• Learn how to make your Papervision3D object interactive.

Prerequisite

• Skin A PV3D Plane Using BitmapFileMaterial

Files Required

• PV3D 2.0 Alpha: Great White Framework (learn how to get it)
• Tutorial Files (see folder structure)

Let’s Get Started!

From the last tutorial where I loaded an external image using BitmapFileMaterial, you should have guessed that this tutorial is next to come. *lol~* The purpose of breaking them up into 2 separate tutorials is to modularise them, just like programming.

First off, we have to edit our viewport instance in the init3D function.

viewport = new Viewport3D( 0, 0, true, true );

The fourth parameter, “interactive”, determines whether the viewport should listen for Mouse events. Since we want to make things interactive, we pass in true for it.

[UPDATE]: With thanks to Marco for pointing this out, to show the hand cursor when rolling over interactive objects, you can add the following line after you create the viewport instance.

viewport.containerSprite.buttonMode = true;

Next up, in our createPlane function, we have to change the interactive property of the material that we created for the plane to be true as well.

material.interactive = true;

To listen for the events, we will add the event listener in the addEventListeners function:

plane.addEventListener( InteractiveScene3DEvent.OBJECT_CLICK, __onPlaneClick );

(Note: Don’t forget to import the InteractiveScene3DEvent!)

To wrap things up, we have to create the new listener function __onPlaneClick, which for the purpose of this tutorial, navigates to my blog’s RSS feed.

private function __onPlaneClick ( e:InteractiveScene3DEvent ):void 
{
	navigateToURL( new URLRequest("http://feeds.feedburner.com/flashmech"), "_blank" );
}

Final Note

At this point of writing, it seems that there’s no easy way to make use of useHandCursor. From my research online, probably the best way to do that is from Papervision 2’s tutorial of Advanced Interactivity 2.

Hope the guys over at Papervision3D will add this functionality into the engine soon.

Objective

• Learn how to create a double-sided Plane object.
• Learn how to use an external image file as a material using BitmapFileMaterial.

Prerequisite

• Creating A PV3D Cube

Files Required

• PV3D 2.0 Alpha: Great White Framework (learn how to get it)
• Tutorial Files (see folder structure)

Let’s Get Started!

This tutorial was indirectly requested by Adrian, who left a comment asking how to load an external image file as a material. I promised him a tutorial on this, so here it is.

The main function that I want to talk about is the createPlane function, as shown below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

private function createPlane():void
{
	// Set some colors so we can see if loading is still happening,
	// or if it failed
	BitmapFileMaterial.LOADING_COLOR = 0x0000FF;
	BitmapFileMaterial.ERROR_COLOR = 0xFF0000;
	//
	var material:BitmapFileMaterial = new BitmapFileMaterial("http://blog.flashmech.net/wp-content/uploads/2008/07/flashmech-rss.gif");
	material.doubleSided = true;
	//
	plane = new Plane( material, 300, 100, 10, 10 );
	//
	scene.addChild( plane );
}

In line 8, I created a BitmapFileMaterial and in its constructor, passed in the url as a string datatype. This will now automatically takes care of the loading process of the image. How convenient!

By default, any material will only be single sided. To enable viewing the plane from both sides, just set the material’s doubleSided property to true, as with line 9.

Lastly, create the plane through the constructor, throw in the material, set some sizes and segments and you’re good to go! *w00t~*

Final Note

If you wish to change the image after loading it the first time through the constructor, a hack is available. Without explaining the intricacies of the BitmapFileMaterial class itself, you can change the texture property with a new url of string datatype.

However, since it’s a hack, the url property or your material instance will NOT BE UPDATED. Otherwise it should work just fine.

In the meanwhile, I’m still trying to figure out if it’s possible to dynamically size the Plane after the BitmapFileMaterial has successfully loaded. If anyone knows of a solution, it would be great if you could point me to it. Thanks!

Probably the last places I would have thought of stumbling onto great links to tutorials will be amazon.com, but who would have expected?

Jeff Kamerer, an engineer on the Flash Authoring team, had written an extensive article on Adobe’s Developer Center, which focuses on how to make your own AS3 components with the Flash CS3 framework.

Though it’s still work in progress, it already contains detailed information.
Contents at a glance:

1. Set up the layers and frames in your component movie clip symbol
2. Implement Live Preview for your component
3. Dispatch events
4. Support styles and easily editable skins
5. Manage drawing with the invalidation model
6. Manage focus
7. Handle keyboard input
8. Create a compiled clip shim for your ActionScript definitions
9. Deploy your component to the Components panel

(Via amazon.com >> Robert Penners Programming Macromedia Flash)

(Or Ropert Penner’s blog >> Creating AS3 Components in Flash: The Lost Chronicles - A Kamerer Adventure)

Objective

• Learn a simple way to detect location differences.
• Make something move using that difference.

Files Required

• Tutorial Files

Let’s Get Started!

In its entirety, this is a very basic tutorial. However, I’ve planned for great things through the use of this technique, so getting through the basics is necessary.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

private function __onEnterFrame ( e:Event ):void
{
	// Reposition the mc's y to the middle of stage
	mc.y = stage.stageHeight / 2;
	//
	// Find the stage's centre point
	var midPt:uint = stage.stageWidth / 2;
	//
	// Find the difference between the mouseX and midPt
	var diff:int = mouseX - midPt;
	//
	// To convert it to percentage
	var perc:Number = diff / midPt;
	//
	// Finally moving it base on the percentage
	mc.x += perc * maxSpeed;
}

The inline comments are actually pretty self-explanatory, so there’s no point in me repeating them all over again.

What I wish to highlight is that in line 10, diff may be either a positive or negative integer, depending on where the mouseX is. This is the key which determines which direction the square mc should be moving towards.

Final Note

If you like, you can alter this class variable, maxSpeed, to change the maximum movement speed of the square:

private var maxSpeed:uint = 10;

Objective

• Learn about the properties that can be used in the generic object that you pass in to the MaterialsList constructor.
• Learn how to use a movieclip as a material through its linkage id using MovieAssetMaterial.

Prerequisite

• Creating A PV3D Cube

Files Required

• PV3D 2.0 Alpha: Great White Framework (learn how to get it)
• Tutorial Files (see folder structure)

Let’s Get Started!

This is a pretty simple tutorial, which basically elaborates more on the MaterialsList class, and in combination with the MovieAssetMaterial, creates a custom skinned cube.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

private function init3D ():void
{
	// VIEWPORT
	viewport = new Viewport3D( 0, 0, true, false );
	addChild( viewport );
	//
	// RENDERER
	renderer = new BasicRenderEngine();
	//
	// SCENE
	scene = new Scene3D();
	//
	// CAMERA
	camera = new Camera3D();
	camera.zoom = 11;
	camera.focus = 100;
}

This function is generally similar with what we had in the previous tutorial, except for lines 15-16. What they do makes the cube in the scene look the same size as the movieclips that we have in the library.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

private function createCube():void
{
	var materials:MaterialsList = new MaterialsList(
	{
		front: new MovieAssetMaterial( "front" ),
		back: new MovieAssetMaterial( "back" ),
		right: new MovieAssetMaterial( "right" ),
		left: new MovieAssetMaterial( "left" ),
		top: new MovieAssetMaterial( "top" ),
		bottom: new MovieAssetMaterial( "bottom" )
	} );
	//
	cube = new Cube( materials, 100, 100, 100, 10, 10, 10 );
	//
	scene.addChild( cube );
}

The first thing that you might notice that’s different will be the other properties of the generic object that we are passing into the MaterialsList constructor. Instead of the all property, we now describe each side of the cube using front, back, right, left, top and bottom properties.

With the ability to describe each side of the cube, we can now assign different materials to them, which is exactly what we have done. Each side is now an instance of the MovieAssetMaterial class, and pulls the movieclip that is residing in our library via their linkage id.

In line 13 where we create the cube, we are also inputting several additional parameters than before. We pass in "100" for the three subsequent parameters after "materials" to describe the width, depth and height of the cube respectively. Just in case you haven’t notice, the reason why we pass in "100", and not some other number, is because the movieclips that we are going to use as materials are 100×100.

To increase the rendering quality of our cube, we pass in "10" for the next three subsequent parameters, rather than taking the default value of "1".

Final Note

If you want your materials to be animated, simply change this:

new MovieAssetMaterial( "bottom" )

to this:

new MovieAssetMaterial( "bottom", false, true )

The third parameter allows animated movieclips to play. You can check out this example that I whipped up.