PicLens prototype with ActionScript and Papervision3D
The Firefox Piclens (now Cooliris) plugin offeres a stunnig visual presentation of online photos. The 3D wall let’s you intuititely navigate through large amounts of pictures, zoom in and watch them in more detail. It was the trigger for programming an prototype for an image wall with ActionScript and the Papervision3D library which offers very powerful possibilties for creating interactive 3D Flash based interfaces.
Papervision scene
The Imagewall class is the base. It sets up the 3D papervision scene which contains all elements and it creates a camera object for controlling the view of the scene. It also creates the imagewall based on an array of imagenames.
_wallSprite.x = stage.stageWidth / 2;
_wallSprite.y = stage.stageHeight / 2;
addChild(_wallSprite);
_target = new DisplayObject3D();
_target.x = 0;
_target.y = 300;
_scene = new MovieScene3D(_wallSprite);
_camera = new Camera3D();
_camera.z = -200;
_camera.x = 0;
_camera.y = 300;
_camera.zoom = _zoom;
_camera.target = _target;
To create the piclens typical flow of the wall, the camera is adjusted towards a dummy DisplayObject3D. To create the wall movement, only the dummy object and camera move with a certain offset to each other. The images keep their position.
_target.x += (( _movement - _target.x)/5) / 2.2;
_camera.x += (( _movement - _camera.x)/10) / 2.2;
_camera.zoom = _zoom;
_scene.renderCamera(_camera);
}
Interaction controller
The movement of the camera and the object are controlled by an InteractionController instance which dispatches it’s own events according to hitting the arrow keys on the keyboard (or by a possible mouse movement). Encapsulating the interaction control into a seperate class totally seperates the user control from the Papervision logic as the gallery must only listen to events and dosn’t mind how they are created.
Image elements
Each image on the wall is represented by an Image object. It consits of a border or background area and a dynamically loaded image. In order to be rendered correctly by Papervision, it must be represented by a Plane object which contains a Sprite for the background, while the loaded image data is drawn as a BitmapMaterial.
_bitmap.draw(this);
_plane = new Plane(new BitmapMaterial(_bitmap), 260, 400, 2, 2);
_plane.material.smooth = true;
_plane.material.doubleSided = true;
As the image data is not available until the loading process is completed and the Plane is created upfront (for reserving the space an showing a possible loader element) the script resets the material when the onComplete-event for loading is fired. For the bttom row of the wall, the images also show a slight reflection – which has to be created before re-assigning the material as the reflection is part of the maretial.
if(_reflection != null) _reflection.render();
_bitmap.draw(this);
_plane.material.bitmap = _bitmap;
As the script is only a small prototype, there are some open things that are not implemented yet:
- image selection
- smooth zoom in / out
- dynamic image loading
- mouse based control
- image preloader element
Watch the imagewall and download the sources: Flex imagewall
One Response to “PicLens prototype with ActionScript and Papervision3D”
February 8th, 2010 at 09:44
Nice example. I like the hook with the upfront creation of the Plane and the later Bitmap replacement. Solved a problem while dealing with another pappervision and dynamic images issue.
Leave a Reply