Flashmech.net

[UPDATE: Thanks to Matt, I've added in OSX paths to the Flash Players.]

For those folks who have upgraded to Adobe Flash CS4 and also installed FDT 3 as your editor, you would have realised that when you create a new Flash project in FDT, there will no longer be a Flash_CS3 language type in the Project Language drop down. It is missing by default, but in this article, I’ll go through with you on how to get those much needed project languages back into your FDT development environment.

Step 1:

In your New Flash Project dialog, click on the “Configure defaults…” link button.

Step 2:

That will lead you to the Core Libraries dialog panel in Preferences, which you can usually access via the menu:
Window > Preferences… > FDT > Core Libraries

First, click on the AS3 Core Libraries tab, and then click on the Add button.

Step 3:

The Core Library dialog is where you will create your new core libraries. Choose Flash CS3 for type, and give your core library a name. In my case I gave it “CS4_FP9″, which stands for “Flash CS4 using Flash Player 9″. Of course, you can give any fancy name that you want. To proceed in choosing a path variable for your core library, click on the Browse button.

Step 4:

Now the Link Libraries dialog will be opened, and it is here where we can choose which library to be used for the path variable. Click on the “New…” button.

Step 5:

This is the final step. In the New Variable dialog, first give a name for your new variable. I chose to use the same convention when naming the core library, which is “CS4_FP9″. Again, it is up to your own fancy in giving it a name. In the Location field, click on the Folder button and browse to:
Windows XP: C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\FP9
OSX: /Applications/Adobe Flash CS4/Common/Configuration/ActionScript 3.0/FP9

If you are working on Windows Vista or Mac OS, please kindly let me know the path by leaving a comment below. I’ll update this post thereafter. Thanks.

That’s it! You’re done! Well almost if you ask me. We do want to be able to use Flash Player 10 in our projects too right? Click on all the OK buttons but stop when you are back in the Preferences dialog box. From here, repeat Step 2 to 5. The location for the Flash Player 10 swc is in:
Windows XP: C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\FP10
OSX: /Applications/Adobe Flash CS4/Common/Configuration/ActionScript 3.0/FP10

Done!

After finishing the above, you can now truly click on all the OK buttons to get back to the New Flash Project dialog, and see that you can now target the correct Flash Player while developing with FDT. Happy coding!

Objective

• Learn how to disable the Enter key from working in a TextArea component.
• View Demo

Files Required

• Tutorial Files

Let’s Get Started!

Now I know what you are probably thinking; why would I want to disable the Enter key in a TextArea? Well I found one use case: The information that you want your user to enter can be quite lengthy and you want to display everything that the user had typed, but TextArea allows the Enter key to work. You wish it would operate like a TextInput component.

Let’s start by examining the init() function.

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

/**
 * Initialise
 */
private function init ():void 
{
    // create the text area
    ta = new TextArea();
    ta.move(Main.PADDING, Main.PADDING);
    ta.setSize(stage.stageWidth - (Main.PADDING * 2), stage.stageHeight - (Main.PADDING * 2));
    addChild(ta);
    //
    // Add the event listeners
    ta.textField.addEventListener(TextEvent.TEXT_INPUT, ta_textInputHandler, false, 0, true);
}

After creating the TextArea, we have to listen to the TextEvent.TEXT_INPUT event to track whatever the user had just typed.

IMPORTANT NOTE: We listen to the event from the textField property of the TextArea instance, and not the TextArea instance itself. If you do otherwise, it will not work.

1
2
3
4
5
6
7
8

private function ta_textInputHandler (event:TextEvent):void
{
    // The char code for Enter is 10
    if (event.text.charCodeAt() == 10) 
    {
        event.preventDefault();
    }
}

In the event handler, we will track the text that is trying to get itself added to the textField. When the conditional is true, we simply prevent it from happening by using the preventDefault() method of event argument.

Final Note

For more information regarding preventDefault(), you can read the documentation.

UML is the kind of programmers’ lingo that I have a vague knowledge about—it involves diagrams describing classes. After hearing about it a year ago, I still only have a rough idea about it. The exact details are somehow too much for me to find out (read:mental block).

So back when Trevor McCauley (Senocular) first posted about UML and the ability to use them to generate ActionScript 3.0 classes, I was _psyched!_

The hurdle was however, still apparent.

Fundamentally, I still have no idea how something exactly describes itself in UML. To complicate things a little further, StarUML’s interface seems a bit too overwhelming to explore without some proper guidelines or tutorials.

My wish came true when Trevor posted his latest beta release of ActionScript 3.0 generation with StarUML yesterday. With it came a full tutorial on exactly how to accomplish this feat. *w00t~!*

As a self-taught programmer, I regard understanding UML highly. This explains why I’m going to invest today to soak up the article, since this knowledge will aid a long way in molding me into a better OOP programmer.

Aren’t you checking it out too?

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!