Fabio Biondi Blog » Blog Archive » Create an images gallery in Flash CS4 and Papervision 3D

Home » 3d parts libraries, ActionScript 3.0, Flash AS 3, Papervision 3D, _Favourites

Create an images gallery in Flash CS4 and Papervision 3D

12 October 2009 One Comment

In this article we’ll develop an image gallery in a 3d enviroment using Flash Cs4, ActionScript 3.0, Papervision 3D and Caurina Tween library.

Following you can test the final result:

This movie requires Flash Player 10

View Full Screen Version

Introduction

To create a more readable code and with the purpose to provide you just some useful info to create your own gallery I have not managed “simple”(even if needful) stuff like XML loading, scrolling and so on.

However to understand this script is necessary have an OOP knowledge in Actionscript 3.0 (inheritance, setter and getter, dispatch custom events and so on) and it also required a minimum know how on Papervision 3d (camera, materials, primitives)

Classes:

This gallery is composed from 4 classes:

1) core.Main.as: the Flash document class. It inherits the ReflectionView class from Papervision.
Usually you can use the BasicView class but, like the name suggests, ReflectionView allows to easly manage object reflections.

In the Main class we initialize Camera and reflection properties too and we’ll use a ‘for’ to display all the images from the /assets folder, creating N istances of the BitmapObject class.

2) gallery.BitmapObject.as: this class manages the images: loading, interactivity and events, displaying them applying a BitmapMaterial to a 3d plane created using Papervision3D.

3) gallery.CameraController.as: in this class we initialize the CameraObject3D properties and we create the bringToFront(item:DisplayObject) method, useful to move the camera in front of the selected object.

4) events.ObjectDataEvent.as: this custom event is dispatched from BitmapObject class when a picture is clicked and it’s used to communicate with the Main Document class. It could be very useful if you need to create custom actions or implement new features to your images gallery.

So, let’s create a new Flash Actionscript 3.0 file, defining core.Main as document class.

Source code:
Code is full-commented and it should be very easy to understand if you have basic AS3 knowledge

1) core.Main.as:

package core {
 
	import flash.display.Bitmap;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLRequest;
	import flash.filters.BlurFilter;
 
	import events.ObjectDataEvent;
	import gallery.BitmapObject;
	import gallery.CameraController;
 
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.cameras.CameraType;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.view.BasicView;
	import org.papervision3d.render.QuadrantRenderEngine;
	import org.papervision3d.core.effects.view.ReflectionView;
 
	public class Main extends ReflectionView
	{
		private var _offSetX:Number = 130;
		public static var light:PointLight3D;
		public static var _selected3DItem:DisplayObject3D;
 
		public function Main()
		{
			stage.frameRate = 40;
			super (stage.stageWidth, stage.stageHeight, true, false, CameraType.FREE)
 
			// Camera Controller
			var cameraController:CameraController = new CameraController(camera);
 
			// Render Type
			renderer = new QuadrantRenderEngine()
 
			// Enable interactity and buttonMode to viewPort (useful to create clickable items)
			viewport.interactive = true;
			viewport.buttonMode = true;
 
			// Set Light (useful for reflection)
			light = new PointLight3D(true);
			light.z = -2000;
			light.y = 300
			scene.addChild(light)
			surfaceHeight = -200; 
 
			// Reflection filters (only Blur is applied)
			viewportReflection.filters = [new BlurFilter(2,2,3)];
 
			// Set Reflection Alpha
			viewportReflection.alpha = 0.4;
 
			// Set Reflection Colors (comment to maitain original colors)
			// setReflectionColor(0.9,0.9,1, 8,  8,  2 );	
 
			// Initialize Gallery
			init();
 
			// Render EnterFrame
			addEventListener(Event.ENTER_FRAME, render); 
 
		}
 
		/**
		* Start Gallery
		*/
		private function init():void
		{	
 
			// Display image items
			// Naturally you can connect this loop to an XML object to dinamically load Clips
			for (var i:uint = 0; i &lt; 11; i++)
			{
				var bitmapObject:BitmapObject = new BitmapObject();
				bitmapObject.loadBitmap("assets/image_" + i + ".jpg")
 
				bitmapObject.addEventListener(ObjectDataEvent.CLICK, onClickImage)
 
				// Set item index
				bitmapObject.idx = i;
 
				// Set item  position (x and z)
				bitmapObject.x = (i+1) * _offSetX - 650;
				bitmapObject.z = i
 
				// add item to Display List
				scene.addChild(bitmapObject)
 
			}
 
		}
 
		/**
		* Click Image
		*/
		protected function onClickImage(e:ObjectDataEvent):void
		{
			// Selected Image
			selected3DItem = e.data.item;
 
			// Display item properties (index, item Object, zoom status)
			trace("Selected Item", e.data.idx, e.data.item, e.data.zoomed);
		}
 
		/**
		* Render
		*/
		protected function render(e:Event=null):void
		{
			singleRender()
		}
 
		/**
		* The selected Image
		*/
		public static function set selected3DItem(item:DisplayObject3D):void
		{
			_selected3DItem = item;
		}
 
		public static function get selected3DItem():DisplayObject3D
		{
			return _selected3DItem ;
		}
	}
}

2) gallery.BitmapObject.as

package gallery{
 
	import flash.display.*;
	import flash.events.*;
	import flash.net.URLRequest
 
	import core.Main;
	import events.ObjectDataEvent;
 
	import org.papervision3d.objects.*;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.materials.*;
	import org.papervision3d.events.*;
	import org.papervision3d.materials.BitmapMaterial;
 
	import caurina.transitions.*;
	import caurina.transitions.properties.CurveModifiers;
 
	public class BitmapObject  extends DisplayObject3D {
 
		private var _plane:Plane;
		private var _isZoomed:Boolean;
		private var _idx:uint
 
		public function BitmapObject():void {
 
			// Init Tweener CurveModifier (used for Zoom animations)
			CurveModifiers.init();
 
		}
 
		/**
		* Load Image
		*/
		public function loadBitmap(str:String):void {
 
			//Start loading the image and define an on complete event listener
			var imgLoader:Loader = new Loader();
			imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
			imgLoader.load(new URLRequest(str));
 
		}
 
		/**
		* Invoked when image is Loaded
		*/
		private function loadComplete(e:Event):void
		{
			// Loaded Image
			var bitmap:Bitmap = e.target.content as Bitmap;
 
			// Create new BitmapMaterial using the loaded image
			var material:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData);
			material.interactive = true;
 
			// Display the image
			// Create a 3D Plane used to display the loaded image
			_plane = new Plane(material, 0, 0, 4, 4);
			_plane.localRotationY = 30;
			_plane.addEventListener(InteractiveScene3DEvent.OBJECT_RELEASE, objectClick);
			_plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, objectRollOver);
			_plane.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, objectRollOut);
 
			addChild(_plane);
		}
 
		/**
		* Invoked when image is clicked
		*/
		private function objectClick(e:InteractiveScene3DEvent):void {
 
			// The select item
			var tweenObject:DisplayObject3D = e.displayObject3D;
 
			// The dispatch obkect
			var eventObject:Object = new Object();
 
			// if image is not zoomed
			if (!_isZoomed) {
 
				// Close previous opened items
				try {
					 BitmapObject(Main.selected3DItem).bringToOriginalPosition();
				} catch(e:*) {}
 
				// Move Camera in front of the selected item
				CameraController.bringToFront(tweenObject);
 
				// Display item in front of screen
				Tweener.addTween(_plane,{
					localRotationY:0,
					z: -600,
					time:1
				});
 
				_isZoomed = true;
 
				// object to dispatch
				eventObject.item = this;
				eventObject.zoomed = true;
 
			} else {
 
				// If Image is zoomed:
 
				// Move item to original posizion(with animation)
				bringToOriginalPosition();
 
				// Set SelectItem Reference to null
				Main.selected3DItem = null;
 
				_isZoomed = false;
 
				// object to dispatch
				eventObject.item = null;
				eventObject.zoomed = false;
 
			}
 
			eventObject.idx = _idx;
 
			// Dispatch custom event ObjectDataEvent.CLICK sending the event object
			dispatchEvent(new ObjectDataEvent(ObjectDataEvent.CLICK,eventObject));
 
		}
 
		/**
		* Invoked when Mouse is over the image
		*/
		private function objectRollOver(e:InteractiveScene3DEvent):void
		{
			// If image is not zoomed
			if (!_isZoomed) {
 
			  // Move the image for a better view
			  Tweener.addTween(_plane,{
					localRotationY:20,
					x: -80,
					z: -60,
					time:1
				});
			}
		}
 
		/**
		* Invoked when mouse roll-out the image
		*/
		private function objectRollOut(e:InteractiveScene3DEvent):void
		{
			// If image is not zoomed
			if (!_isZoomed) {
 
			 // Move Image to original posizion
			 Tweener.addTween(_plane,{
					localRotationY:30,
					x: 0,
					z: 0,
					time:0.5
				});
			}
		}
 
		/**
		* Reset Image position with Bezier animation
		*/
		public function bringToOriginalPosition():void {
 
			_isZoomed = false;
 
			// Move the image to its original values, using a Tweener Bezier animation
			Tweener.addTween(_plane,{
						localRotationY:30,
						x:0,
						y:0,
						z:0,
						_bezier:{x:-400, y:-100, z:-1000},
						time:1,
						transition:"easeInOutQuad"
						});
 
        }
 
		/**
		* The image ID
		*/
		public function set idx(value:uint):void
		{
			_idx = value;
		}
 
		public function get idx():uint
		{
			return _idx ;
		}
 
	}
 
}

3) gallery.CameraController.as

package gallery{
 
	import org.papervision3d.objects.*;
	import org.papervision3d.core.proto.CameraObject3D;
 
	import caurina.transitions.*;
 
	public class CameraController
	{
		private static var _camera:CameraObject3D;
 
		public function CameraController(camera3D:CameraObject3D)
		{
			_camera = camera3D;
			init();
		}
 
		/**
		* Init default Camera properties
		*/
		private function init():void
		{
			_camera.focus = 10;
			_camera.near = 0;
		}
 
		/**
		* Bring to Front the selected Object
		*/
		public  static function bringToFront(tweenObject:DisplayObject3D):void
		{
			Tweener.addTween(_camera,{
					x: tweenObject.sceneX,
					time:1
				});
		}
 
	}
}

4) events.ObjectDataEvent.as

package events
{
 
  import flash.events.Event;
 
  public class ObjectDataEvent extends Event
  {
		public static var CLICK:String = "onclick";
 
    public var data:Object;
 
    public function ObjectDataEvent(type:String,data:Object)
    {
 
      super(type);
      this.data = data;
    }
 
    override public function clone():Event
    {
       return new ObjectDataEvent(type, data);
    }
  }
}