Trail Effect

Some people were wondering how I achieved the tail effect, so I’ve made it into a re-usable class which you can add to your own project. The main functionality is pretty simple – basically just an array of Planes where each plane follows the one in front of it in the array during an enter frame event, with a bit of drag applied in between:

public function updatePosition(_x:Number, _y:Number, _z:Number):void {		
 
    var trail0:Plane = _trailArray[0];
    trail0.x  += (_x - trail0.x) / _length;
    trail0.y  += (_y - trail0.y) / _length;
    trail0.z  += (_z - trail0.z) / _length;
 
    for (var i:Number = 1; i < _trailArray.length; i++) {
        var t:Plane = _trailArray[i];
        t.x += (_trailArray[i - 1].x - t.x)/ _length;
        t.y += (_trailArray[i - 1].y - t.y) / _length;
        t.z += (_trailArray[i - 1].z - t.z) / _length;
    }		
 
}

Class and Sample Project:

You can download the fully commented class here and I’ve also made a sample project (based on the last post) showing how to integrate it into an away4 scene – FYI the trail is initialized in Mouse.as (line 111). You can see how when the mouse wiggles as it moves, the movement is sent through the trail.

Customization

The trail can be customized by changing the texture, size, alpha, blend mode, number of segments, distance between segments and tapering. By experimenting with these parameters you should be able generate a reasonably diverse range of trails (e.g. in this example the blend mode is ADD to give a neon glowing effect, but you can get quite different looks just by changing this param).

Please leave a comment if the source code is unclear or if you have extended the functionality of the trail class to allow for different effects etc.

Click on the image to view the flash (requires flash player 11):

If anyone like me to write a full tutorial on all this going into more detail, including the full FDT setup, and the various elements in the test please leave a comment.

Click on the image to view the flash (requires flash player 11):

Back then there were a load of steps you had to complete in your IDE to get it running, now with the new Flex 4.6 compiler some of those steps are taken out.
All I needed to do was install the Flex 4.6 SDK and latest Away3d 4 src. Once you have these create a new flash ActionScript project in FDT, set the Flex compiler to your new latest one, REMOVE the flex.swc swc from the SDK Library tab under the FDT Build Path and finally set the wmode: “direct” param in your html wrapper. You no longer need to add the ‘-swf-version=13′ compiler argument or swap out the playerglobal.swc as these are now part of the update.

Then you just need create a folder called ‘away3d’ or similar inside your projects src folder and copy the away3d/src classes into it, right click on the src folder and select ‘add to classpath’.

Project Files:

Some people have asked for the project files / source code  – click here to download a zip containing the project files. For the camera movement, basically I’m rotating an empty ObjectContainer3D located in the centre of the globe based on the mouse x and y positions using TweenMax, and then on each frame loop, applying the empty ObjectContainer3D’s transform to the camera’s transform, and moving the camera back so you can see the globe. It should make more sense hopefully if you check out the source code!

It is a fun mix of action and puzzle solving and uses the awesome box2d physics engine for realistic and responsive physics. It’s very addictive, has the ‘just one more go’ factor and guaranteed to give you hours of entertainment. It is currently 0.99$, with a free ‘Lite’ version on the way.

Make sure to like the Facebook page and follow Flick the Frog on Twitter to stay tuned for updates.

They used my track “Energetic Pumping” for the soundtrack. Here is the result:

Featuring exciting, competetive gameplay, it is the ultimate ‘tea decider’. Art and design assets by Bora Demirbilek , features music from Badadam .

Has been used for the soundtrack for the excellent video display promo “Fashion Promo 4″ by motion graphics artist Alex Zlatev. Check out his stuff, it’s great!

Whistle Blower by adamjamescuz