Flashmech

Over at gotoAndLearn.com, Lee just posted an awesome feature tour of Flash CS4.

I’ve heard many good things about the latest features in Flash CS4, but seeing them in action is a whole new experience! I could, if I wanted to, list down all the features that were featured in the video. But why waste the time when I know you are going to watch it full length anyway?

Enjoy! And don’t forget to thank Lee for it.

Alin Dogar from jumpeyecomponents.com just dropped me an email yesterday regarding the launch of their FlashEff Pattern Creation Contest.

I have been very keen to try out FlashEff since it first launched—the things I see are really amazing. Now this contest gives me the perfect reason to steal time out from my schedule to play around with it. Watch this space in the upcoming month for some tutorials on getting started with the FlashEff SDK.

In the meanwhile, they are having a *50%* discount for September! You might just wanna get yourself a license now.

The Flash Forward Conference always happens too far away from where I live, and since I don’t have the luxury of deep pockets, I’m really glad the community always posts up information to keep the rest of us updated.

After reading Lee Brimelow’s coverage, especially on the part where “Natzke Always Inspires”, I do feel I missed something great. I still remember back in Singapore MAX 2006 when I first saw Erik’s works, they were truly awe inspiring.

Though I missed Erik’s talk, kudos to him for releasing the full source of what he showed at the Flash Forward Conference! After viewing his works, I got inspired all over again, and I can’t wait to play around with the source files!

I guess that’s what you call, _the Erik Natzke Effect_. *loL~*

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!