Flashmech

That’s basically my concern after reading this article by Hank Williams that The EcmaScript language standards body has killed the draft 4.0 version two days back.

What will Adobe do now with its (suddenly proprietary) ActionScript? If AS3 is now no longer base on an open standard, and if Adobe wants to adopt another standard, will it mean that AS4 will be completely different?

If indeed it’s going to be different, how many developers is Adobe going to risk alienating, or worse, losing? The number of products that Adobe owns revolving around the language is also massive, and that only means a total rewrite for them. But that’s just the centre of the ripple.

There are countless web and desktop applications that are using the Flash Platform out there, namely Flash, Flex and AIR. While I’m pretty assured that if Adobe moves on to another standard, that a new AVM3 will take care of the next generation AS4, businesses with these applications as their core is going to suffer.

The reason? Well we’ve seen how AS2 wasn’t able to leverage some of the latest advantages of the additions to AS3. If businesses with big enterprise applications don’t move on to AS4, they are in the risk of losing those advantages, whatever they might be. However, if they do, it only means a total rewrite of their applications, spending additional resources because of this.

I should really stop being a paranoid. I really want to trust Adobe to make a wise decision. Read the article and contemplate what’s going and what’s not going to be.

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;