I just got an article (first of a series) published at The Tech Labs. It basically takes you through the steps of creating and structuring classes while taking you through the basics in creating your own Web Services package with a simple Twitter API!

Have a read and lemme know what you think. Cheers!

The whole project consisted on playing a nasty prank on a friend while you sit back and enjoy the show, very DOPE!

http://www.yourotheryou.com/

Let me start off by saying that if you are going to use svn on your MT grid server the last place you want to go for installation instructions is the MediaTemple Knowledge Base. I can grantee you that will be cause of major hair loss on your part. Not only are the instructions vague and confusing, they’re just darn annoying.

I have absolutely no experience dealing with Linux servers or anything Linux for that matter but I was able to set up my svn repo with the help of a good friend. I figured I’d lay it out here for the world to see and not have to go through what I went through for the good part of my weekend. Enough venting, on to the good stuff!

First of all, the kb article over at MT is not completely messed up. You can actually go through steps 1-3 and still be in calm waters, but before you do that, there are a few things that I want to go over with you. First off, you need your server id; this usually starts with a letter followed by 5 numbers. You can find it in your “Service Activation Letter” email sent to you by MT when you first set hp your account under the FTP Login Information. You’re going to need the username and password too to log in to your server.

Also, in step 3 where it indicates <repo_name>, you have to replace that with the name of the repository on your server. This is not the name of your actual project. Let’s assume that you’ll name it myRepo.

Here’s the kb article, follow steps 1-3 and then come back.

Waiting…

…

Welcome back! At this point you should have successfully set up your svn repository on your MT grid server but we still need to add a folder for your project. Step 4 on the MT article tells you how to do that, but I found it a little confusing. So here’s a clearer explanation:

OK, so to create a folder (and sub folders) for your project we use the “mkdir” command. Let’s assume that our project name is myProject type in:

mkdir myProject
mkdir myProject/trunk
mkdir myProject/branches
mkdir myProject/tags

Now its time to import the newly created folders into the repository, remember that above we assumed that the name of our svn repository was myRepo. You’re also going to need that server id we mentioned above and replace the hashes with it. Type in:

svn import myProject file:///home/#####/data/myRepo –message “Creating initial repo.”

After pressing executing that last line you should be all set!

To access your newly created svn repo, just create a folder on your desktop (i.e.), right-click and choose “SVN Checkout”.

This is what you should put in your “URL of Repository” field; remember to change the hashes to your verver id and replace “yourdomain” with your actual domain name:

svn+ssh://serveradmin@yourdomain.com@yourdomain.com/home/#####/data/myRepo

That’s all folks! TortoiseSVN will 99.9% of the time ask you for your password. This is gonna be the same password you used on putty.

Hope this was useful!

NOTE : THE FOLLOWING CODE DID NOT WORK AND I’LL EXPLAIN WHY

[source language="Ruby"]
var fileRefList:FileReferenceList = new FileReferenceList();
fileRefList.addEventListener(Event.SELECT, selectHandler);
fileRefList.browse();
function selectHandler(event:Event):void {
var request:URLRequest = new URLRequest(”http://[mydomain].com/upload.php”);
var files:FileReferenceList = FileReferenceList(event.target);
var selectedFileArray:Array = files.fileList;
for (var i:uint = 0; i < selectedFileArray.length; i++) {
var file:FileReference;
file = FileReference(selectedFileArray[i]);
file.addEventListener(Event.COMPLETE, completeHandler);
file.addEventListener(ProgressEvent.PROGRESS, progressHandler);
file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
try {
file.upload(request);
} catch (error:Error) {
trace("Unable to upload files.");
}
}
}
function completeHandler(event:Event):void {
var file:FileReference = FileReference(event.target);
trace(file.name+" uploaded.");
}
function progressHandler(event:ProgressEvent):void {
var file:FileReference = FileReference(event.target);
trace("progressHandler: name = " + file.name + " bytesLoaded = " + event.bytesLoaded + " bytesTotal = " + event.bytesTotal);
}
function ioErrorHandler(event:IOErrorEvent):void {
trace("ioErrorHandler: " + event);
}[/source]

What I was doing in the code above was using FileReferenceList to select all the files that I wanted to upload to my server, that was fine. That fires an Event.SELECT event; in the handler for that event, I created a URLRequest passing it the url to where my server side upload script is located. The FileReferenceList basically is an Array of FileReference objects, hence I figured I could loop through it, addlisteners to each of the FileReference objects, run the upload method and that's it? NOPE! Didn't work! Even though all my traces were indicating that all my files were being uploaded succesfully, when I went to check my server, there were no files there.

It turns out that flash really CANNOT UPLOAD MORE THAN ONE FILE AT A TIME.

Basically... "Listeners receive events to indicate the progress, success, or failure of the upload. Although you can use the FileReferenceList object to let users select multiple files for upload, you must upload the files one by one; to do so, iterate through the FileReferenceList.fileList array of FileReference objects.

The FileReference.upload() and FileReference.download() functions are nonblocking. These functions return after they are called, before the file transmission is complete. In addition, if the FileReference object goes out of scope, any upload or download that is not yet completed on that object is canceled upon leaving the scope. Be sure that your FileReference object remains in scope for as long as the upload or download is expected to continue.”

In other words, what i needed to do was not a run a loop, but actually create a function that will upload a single file and on the handler for the complete event for that function, load the next file in queue. Worry not if that sounds a little confusing here’s the new and improved working code:

[source language="Ruby"]
var uploadQueue:Number = 0;
var selectedFileArray:Array = [];
var fileRefList:FileReferenceList = new FileReferenceList();
fileRefList.addEventListener(Event.SELECT, selectHandler);
fileRefList.browse();

function selectHandler(event:Event):void
{
var files:FileReferenceList = FileReferenceList(event.target);
selectedFileArray = files.fileList;
loadQueue(uploadQueue);
}
function loadQueue($index:Number):void
{
if($index < selectedFileArray.length){
var request:URLRequest = new URLRequest(”http://www.[mydomain].com/upload.php”);
var file:FileReference = FileReference(selectedFileArray[$index]);
file.addEventListener(Event.COMPLETE, completeHandler);
file.addEventListener(ProgressEvent.PROGRESS, progressHandler);
file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
try
{
file.upload(request);
}
catch (error:Error)
{
trace(”Unable to upload files.”);
}
}else{
trace(”All files uploaded.”);
}
}
function completeHandler(event:Event):void
{
var file:FileReference = FileReference(event.target);
file.removeEventListener(Event.COMPLETE, completeHandler);
file.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
file.removeEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
trace(file.name+” uploaded.”);
uploadQueue++
loadQueue(uploadQueue);
}
function progressHandler(event:ProgressEvent):void {
var file:FileReference = FileReference(event.target);
trace(”progressHandler: name = ” + file.name + ” bytesLoaded = ” + event.bytesLoaded + ” bytesTotal = ” + event.bytesTotal);
}
function ioErrorHandler(event:IOErrorEvent):void {
trace(”ioErrorHandler: ” + event);
}[/source]

And here’s the php code that i’m using server side:

[source language="Ruby"]
//path to storage
$storage = ‘images’;

//allow path to be changed dynamically
if($_GET['uploadDir'] != “”) {
$storage = $_GET['uploadDir'];
}

//path name of file for storage
$uploadfile = “$storage/” . $_FILES['Filedata']['name'];

//if the file is moved successfully
if ( move_uploaded_file( $_FILES['Filedata']['tmp_name'] , $uploadfile ) ) {
echo( ‘1 ‘ . $_FILES['Filedata']['name']);
header(”Location: http://www.google.com”);
//file failed to move
}else{
echo( ‘0′);
}[/source]

ENJOY!

Now check this out, wanted to install FlashTracer so I did and I read that in order for it to work properly, I HAD to install the debug version of the Flash Player. As soon as I ran the application on the new player, I immediately got an error message:

SecurityError: Error #2060: Security sandbox violation: ExternalInterface caller file:///C:/site.swf cannot access file:///C:/index.html.

After endless hair pulling and much reading and research I found the solution to the problem. All I had to do was add the following line to my embed code on html:

so.addParam(”allowScriptAccess”,”always”);

That did the job!

Decided to give the blog a new look considering I saw the same template a few times in one day on other blogs

After a few hours of searching, I finally decided on this one. I hope its not too crappy!

Today I found myself with the need to create a cube, but in my case, I wanted to have all the sides of the cube treated as if they were planes. Also, I wanted to have more control over the inner workings of my cube hence the birth of the Box3D class.
All this class does is create a cube out of 6 planes primitives. It works very much like the EnhancedPlane class mentioned in an earlier post .

This is the result:

You can get the source and example files here!

Tags: papervision, actionscript, papervision3d, pv3d, cube, box3d, box

I’ve received a few requests in order to make interactivity on the EnhancedPlane class a bit more simple and straight forward, [EDIT: link updated] so here it is . In order to get it working, you would have to import the InteractiveScene3DEvent event class:

import org.papervision3d.events.InteractiveScene3DEvent;

Now, set up your EnhancedPlane as so

[source language='Ruby']
var frontMaterial:MovieAssetMaterial = new MovieAssetMaterial(”front”, true);
var backMaterial:MovieAssetMaterial = new MovieAssetMaterial(”back”, true);

var materials:MaterialsList = new MaterialsList({
ront: frontMaterial,
back: backMaterial
});

doublePlane = new EnhancedPlane(materials, 250, 250, 16);
doublePlane.interactive = true;
doublePlane.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, rotatePlane);

view.scene.addChild(doublePlane);
[/source]

As you can see, the EnhancedPlane class now has an interactive property which accepts a Boolean value, then simply listen to an InteractiveScene3DEvent and your set!

[EDIT] To access each side of the plane individually, all you have to do is

[source language='Ruby']

doublePlane.front

[/source]

[source language='Ruby']

doublePlane.back

[/source]

It’s been a really long time since I posted anything and there are a ton of reasons for that including moving to New York, getting a new job and finding a new place. But you can trust that I will be posting on a more regular basis from now on

I decided to come back with a couple of classes I cerated for use with the Great White branch of PaperVision3D.

EnhancedPlane
This class allows you to create a Plane primitive with two dynamic faces to which you can add different materials. In other words, it’ll have two unique sides!

Use:

var frontMaterial:ColorMaterial = new ColorMaterial(0x00FFFF);
var backMaterial:ColorMaterial = new ColorMaterial(0xFFFF00);

var materials:MaterialsList = new MaterialsList({front:frontMaterial,	back:backMaterial});

var myEnhancedPlane:EnhancedPlane = new EnhancedPlane(materials, 250, 250, 16);
this.scene.addChild(myEnhancedPlane);

The first argument the class accepts is a MaterialList with the “front” and “back” materials specified. After that, the class accepts 4 optional arguments: width, height, segments and name.

PlaneGrid
This class allows you to create a grid of (same width, same height) planes real easily!

Use:

var planesArray:Array = new Array();
for(var a:Number = 0; a<18; a++){
     var material:ColorMaterial = new ColorMaterial(0x00FFFF);
     var plane:Plane = new Plane(material, 320, 480);
     planesArray.push(plane);
}
var planeGrid:PlaneGrid = new PlaneGrid(planesArray, 6, 3, 5, 320, 480, "left");
this.scene.addChild(planeGrid);

The first argument is an array holding the planes you would like to be in the grid, the rest of the parameters are columns, rows, spacing, plane width, plane height, and alignment respectfully. The alignment can either be: “left”, “right” or “center”.

Both of the classes extend the DisplayObject3D so you can treat them like any other 3D display object/primitive.

You can get the classes here

[EDIT]

Thanks to my good friend Matt, I fixed a small error in the the EnhancedPlane class. Thanks dude! I also uploaded an example on how to set up your EnhancedPlane to have interactivity on both sides. You can find the example here.

One thing that I strive to always keep on point is communication between classes via events. It’s really not any fun when you have a rogue event being fired from somewhere; it then being handled and you have no idea who’s doing what that’s where an “Event Control System” comes in really handy!

An Event Control System is composed basically of a pair of classes which handle all the global, project specific firing of and listening of events.

The first class I tend to call “EventCentral.as”. The EventCentral is a Singleton class which extends flash.events.EventDispatcher and is used across the project classes to dispatch and listen to project events. The project events are basically all public static constants in the second class called “ProjectEvent.as”. The ProjectEvent extends flash.events.Events.

The good thing about extending the Events class, or any class for that matter, is that you can add additional functionality. In the case of the ProjectEvent class, we add a “params” object which the custom event which is fired can carry or piggyback. Any event handler can then pull this “params” object from the event being listened to. This is an example as to how the classes would be used:

First import the class:

import EventCentral;
import ProjectEvent;

To dispatch an event, it would look like this:

EventCentral.getInstance().dispatcheEvent(new ProjectEvent(ProjectEvent.SOME_EVENT, {name:"Reynaldo"}));

To listen to and handle the event:

EventCentral.getinstance().addEventListener(ProjectEvent.SOME_EVENT, someEventhandler);
function someEventhandler($event:ProjectEvent):void
{
    trace($event.params.name)
}

Thats it! Just remember not to have a slew of events handling absolutely everything in your projects, I’ve had bad experiences when abusing this method. But enough chit chat, you can find the two classes with an example here:

CentralEventSystem.zip