Flash and the HoloCube

I've been running some preliminary tests with my work 'We Are The World' running in a device called the Holocube. 

The Holocube is a fully integrated 3D projection platform. 

It is originally designed to display product presentations but you can project anything in it really.

I am using the FlashPlayer 10 3D capabilities to extrude the displayed text. 

And just a quick word of advice. 

If you want to mirror (the Holocube needs a mirrored image) a textfield in Flash do it like this:

var metrics : TextLineMetrics = _textfield.getLineMetrics(0);

_textfield.text = "Hello World";

_textfield.scaleY = -1;

_textfield.y = _textfield.textHeight + metrics.ascent + metrics.descent;

The Holocube and some of my other work will be showing at my exhibition at the Zebrastraat Art Center in Gent, Belgium. 

Opening next Thursday 07/05 @ 8:00 PM. 

You are now invited!

Muchas mega thanks to Jan and his crew at Holocube for the support!

Flash 3D engines: clipping benchmark test

Whenever working in Flash and 3d I always start out with the same setup.
One plane and on that plane a cube. I think that's a nice setup to get your environment ready, setting up the camera and stuff.

While using Papervision, I noticed when moving the cube some clipping occurred. The cube was disappearing under some of the plane's faces.

So I did a little test with 4 of the most used 3d packages around.
1. Papervision
2. Away3D
3. Sandy
4. Alternativa

The setup is always the same.
The regular plane object of the package with a regular colormaterial applied and a regular cube object with a bitmap material applied to it.
The tweens are done with Tweener. All the settings are default except for camera y and z positions in order to get the same cameraview, well sort of, for all the tests.

Download the sources here.








As you can see Sandy and Alternativa produce the best results.

Note that is is no speed test or a full comparison. Some of these engines have great features the other ones are lacking of and vica versa.
It also may be possible by using more advanced features of Papervision or Away3D the clipping problem could be solved, but that is out of the scope of my test. 

If anyone knows how to improve the clipping, please let me know!

Flex components in Flash: Example with source

Here's how to load a Flex component in Flash and communicate with it through events.
This can be pretty nifty if you want to use the much better components that ship with Flex in your Flash application.

Click here to see it in action.
This example uses a simple button, but you could use a more complex datagrid if you'd like.

Here's the flow:

1. Load the Flex swf into your flash
2. Wait until the loaded Flex component reaches frames 2 (all Flex swf's have 2 frames indeed)
3. Add the eventlistener (for the event defined in the flex) on the application property of the loaded object. This property is actually a property of the SystemManager class. Remeber the SystemManager class does not exist in Flash. It's a Flex thing.

Here's some sample code to use in Flash:

import flash.display.*;
import flash.events.*;
import flash.net.URLRequest;
import flash.utils.Timer;

var loader:Loader = new Loader();
var timer:Timer;
//load the Flex Component
loader.load(new URLRequest("ButtonTest.swf"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderDone);
addChild(loader);

function loaderDone(e:Event) {
timer = new Timer(100);
timer.addEventListener(TimerEvent.TIMER, handleTimer)
timer.start();
}


function handleTimer(event:TimerEvent):void {
//cast the loader.content into MovieClip to access currentFrame.
var myclip:MovieClip = loader.content as MovieClip;
if (myclip.currentFrame == 2) {
//use application property to attach the event listener
myclip.application.addEventListener("iAmClickedFromFlex", clickedFromFlex);
timer.stop();
}
}

function clickedFromFlex(event:Event):void {
trace("clicked");
}


Flex code: (just a simple button)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button x="5" y="20" label="I am a flexbutton" click="dispatchEvent(new Event('iAmClickedFromFlex'))"/>
</mx:Application>


This message has also been posted on Boulevart labs

Adobe AIR: Beta 2 drag and drop + window

Adobe released the beta 2 for AIR.

There have been some changes in the API. So if you did some projects in beta 1 you will have to change your code.

window is replaced by nativeWindow. For example:
stage.window.x is now stage.nativeWindow.x

The drag and drop API has been changed dramatically:

The classes TransferableFormats and TransferableData are gone.
You will now have to use the Clipboard and ClipboardFormats classes.
Dragging in for example:

import desktop.Clipoard;
import desktop.ClipboardFormats;

private function onDrop(e:NativeDragEvent):void {

DragManager.dropAction = DragActions.COPY;

var dropfiles:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

}

So to sum it up:

1. use clipboard.getData instead of transferable.dataForFormat.
2. use ClipboardFormats.FILE_LIST_FORMAT instead of transferableFormats.FILE_LIST_FORMAT

Take care!

Adobe AIR and Flash CS3: Demo with source

Here is an AIR demo that encapsulates some neat AIR and AS3 tricks.
It is called the Kevin Bacon Drag and Drop.
You have to drag an image file (jpg, png or gif) to the top of the screen.
When you drop the file it will fall down.
Make sure it lands on Kevin's camera and your picture will appear on the screen behind Kevin.

This a summary of all the features implemented in this demo:
1. compiled and written within Flash CS3 (not Flexbuilder)
2. the Adobe AIR drag and drop API
3. pixel perfect collision detection in AS3
4. the use of custom events and event bubbling
5. Ratio scaling for images

Thanks to Grant Skinner you can now compile AIR files from within Flash CS3.
Download and read the instructions here:
http://www.gskinner.com/blog/archives/2007/07/creating_air_pr.html

The Adobe AIR API documentation is build in the Flex3 Language reference (look for the classes with a blue dot next to them)
http://livedocs.adobe.com/labs/flex/3/langref/

Download the installer file here:
http://cases.boulevart.be/blogs/DragandDropGame.zip

Download the source files here:
http://cases.boulevart.be/blogs/DragandDropGame_source.zip

Here's a few mac and windows screenshots:

crossposted at labs.boulevart.be

Build and compile AS3, Flex2 and Apollo applications in Eclipse on Mac OS X

Tested Unit, the blog of Mister Sven Dens is online.

Sven is sitting right next to me here at the office and his first post is a litle jewel for all Flash/Flex developers.

He created a template that contains everything you need to build and run Flash/Flex/Apollo apps from ActionScript source files or MXML (Flex2) source files.

Donload the template here or visit Sven's blog for the source and more details.

Good work Sven!
Technorati Profile

Compile AS3 on OSX without FlexBuilder

A glorieus moment in time...

After 10 years it finally happend, I got myself a Mac.

I have always been very happy with my pc and spreaded the message that Mac's were used by girls or the more girlie type kinda guys...

Well now I have one myself. So yeah I am in touch with my feminin side!



I have to say that I enjoy working on this machine more and more. The keyboard lights up in the dark! How funky is that? That is actually the main reason why I got it really.

So one of the first things I had to do was setting up my development environment.
That includes playing around with AS3 yeah!

So here's a litle 'howto' on compiling AS3 on the Mac. Flexbuilder is a much more complete solution (codehinting, debugging, ...) but is not free and Flashdevelop which is great does not support Mac.

So I am using Eclipse, Ant and the Flex2 SDK.

You can download the tutorial and project files here: (project files are included)
www.seeingisbelieving.be/blog/as3onosx.zip

Thanks to Steve Nelson from BFPUG for setting up the project templates.

Papervision3D: another flash 3D engine

Thanks to self proclaimed flash evangelist Nicolas who pushed me into the flash 3D engines I started playing around with Sandy (see previous post) and Papervision3D.

Papervision is an engine written for AS2 as well as AS3.
It is still in private beta but the results are stunning. I have been goofing around with the AS3 engine and it's really performing well.

You will need flash player 9 to view this:
Check it out in a new browser window :
http://www.seeingisbelieving.be/papervision/PaperTest.html

Download the source here:
http://www.seeingisbelieving.be/papervision/PaperVisionTest.as

This demo features around 300 objects on stage with 2 sided bitmap material and a moving camera. I have never seen 3D performing like this in Flash.

Sandy is performing slower and you need the pixlib framework too.
I know it is not really fair comparing an AS2 to AS3 application when it comes to performance.
But the AS2 version of Papervision seems to be performing better than Sandy as well. Feel free to comment :-)

Sandy however supports much more primitives and methods than Papervision3d. Papervision only has mesh, plane and point while Sandy implements box, hedra, plane, sphere, cylinder, line, etc..

Anyway all the guys and girls (it seems there are too few girls doing stuff like this) who are putting things like this online deserve a big cheerio!

CHEERIO!!! and thanks to the open source flash community!