AS3/ Papervision: when selecting a thumbnail zoom into that thumbnail and alpha the remaining

From the code listed here.  I need to select a thumbnail regardless of where it is on the stage, and once clicked the thumb should zoom to the forefront and all other thumbs should alpha out.  Meaning: Zoom in on and reveal the selected thumb in the forefront of the stage...
import gs.*;
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*;
import org.papervision3d.materials.*;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.display.Sprite;
import flash.events.MouseEvent;
 
 
var container:Sprite = new Sprite();
container.x = 360;
container.y = 225;
addChild(container);
trace(container.width);
trace("width");
trace(container.height);
trace("height");
 
var scene:Scene3D = new MovieScene3D(container);
var cam:Camera3D = new Camera3D();
cam.zoom = 6;
 
 
var p_dict:Dictionary=new Dictionary();
var pc:Plane = new Plane();
pc.visible = false;
cam.target = pc;
 
var numOfRotations:Number = 3;
var yPos:Number = 0;
var angle:Number = 0;
 
var filename_list = new Array();
var url_list = new Array();
var url_target_list:Array = new Array();
var title_list = new Array();
var description_list = new Array();
var folder:String = "thumbnails/";
 
var i:Number;
var j:Number = 0;
var k:Number = 0;
var l:Number = 0;
var m:Number = 0;
var total:Number;
var flashmo_xml:XML = new XML();
var loader:URLLoader = new URLLoader();
loader.load(new URLRequest("thumbnail_list_3.xml"));
loader.addEventListener(Event.COMPLETE, create_thumbnail);
 
function create_thumbnail(e:Event):void {
	flashmo_xml = XML(e.target.data);
	total = flashmo_xml.thumbnail.length();
	var anglePer:Number = ((Math.PI*2) * numOfRotations) / total;
 
	for (i = 0; i < total; i++) {
		url_list.push( flashmo_xml.thumbnail[i].@url.toString() );
		url_target_list.push( flashmo_xml.thumbnail[i].@target.toString() );
		title_list.push( flashmo_xml.thumbnail[i].@title.toString() );
		description_list.push( flashmo_xml.thumbnail[i].@description.toString() );
 
		var bfm:BitmapFileMaterial = new BitmapFileMaterial(
		folder + flashmo_xml.thumbnail[i].@filename.toString());
		bfm.oneSide = false;
		bfm.smooth = true;
		var p:Plane = new Plane(bfm, 60, 45, 1, 1);
		scene.addChild(p);
		var p_container:Sprite = p.container;
		p_container.name = "flashmo_" + i;
		p_dict[p_container] = p;
		p_container.buttonMode = true;
		trace(p_container.width);
		p_container.addEventListener( MouseEvent.ROLL_OVER, p_rollover );
		p_container.addEventListener( MouseEvent.ROLL_OUT, p_rollout );
		p_container.addEventListener( MouseEvent.CLICK, p_click );
 
		p.rotationY = (-i*anglePer) * (180/Math.PI) + 90;
		p.x = Math.cos(i * anglePer) * 230;
		p.z = Math.sin(i * anglePer) * 230;
		p.y = yPos;
 
		if ( (i+1) % 20 == 0 ) {
			yPos += 50;
		}
	}
}
 
function p_rollover(me:MouseEvent) {
	var sp:Sprite = me.target as Sprite;
	var tw:Tween = new Tween(sp, 'alpha', Strong.easeOut, 1, 0.5, 0.6, true);
	var s_no:Number = parseInt(sp.name.slice(8,10));
}
function p_rollout(me:MouseEvent) {
	var sp:Sprite = me.target as Sprite;
	var tw:Tween = new Tween(sp, 'alpha', Strong.easeOut, 0.5, 1, 0.6, true);
}
function p_click(me:MouseEvent) {
	var sp:Sprite = me.target as Sprite;
	var s_no:Number = parseInt(sp.name.slice(8,10));
	trace(sp);
	
	TweenLite.to(sp, .5, {scaleX:4, scaleY:4, overwrite:0, y:100, x:50, ease:Back.easeIn});
}
 
addEventListener(Event.ENTER_FRAME, render);
 
function render(e:Event):void {
	var dist2:Number = ((stage.mouseX) - 400) * 0.0001;
	angle += dist2;
	cam.x = - Math.cos(angle) * 150;
	cam.z = Math.sin(angle) * 150;
	var new_zoom = 8.5 - stage.mouseY * 0.008;
	//cam.zoom += ( new_zoom - cam.zoom ) * 0.06;
	scene.renderCamera(cam);
}

Open in new window

cubical38Asked:
Who is Participating?
 
cubical38Connect With a Mentor Author Commented:
I was able to rewrite the class and get it working
0
 
rascalpantsCommented:

what is currently happening when you click on the thumbnail?  does it run the TweenLite code?


can you give some information as to what specifically is not working in your code...

thanks


rp / ZA
0
 
rascalpantsCommented:
if you are going to accept your own comment as a solution, please provide the details as to how you solved the problem.  This way the question does not pollute the PAQs database by not actually being a solution.  It is better to just have the question deleted, if you don't want to provide the details.

Thanks

rp / Zone Advisor
0
 
cubical38Author Commented:
Below is the class I have written to work as the PPV 3D wall gallery as seen at Flash Components...
package {
 
 
	import caurina.transitions.*;
	import caurina.transitions.properties.ColorShortcuts;
	import caurina.transitions.properties.DisplayShortcuts;
 
	import flash.display.Bitmap;
	import flash.display.MovieClip;
	import flash.events.KeyboardEvent;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.utils.Dictionary;
	import flash.xml.XMLNode;
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import flash.text.TextField;
	import flash.filters.GlowFilter;
	import flash.net.navigateToURL;
 
	import org.papervision3d.core.math.Number3D;
	import org.papervision3d.core.math.Quaternion;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.parsers.Collada;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.core.render.data.RenderSessionData;
	import org.papervision3d.events.InteractiveScene3DEvent;
 
	public class carousel extends Sprite {
		private var blockImageNumber:uint;
		private var viewport:Viewport3D;
		private var scene:Scene3D;
		private var camera:Camera3D;
		private var renderer:BasicRenderEngine;
		private var primitive:Plane;
		private var holder:DisplayObject3D;
		private var XMLLoader:URLLoader = new URLLoader();
		private var imageXML:XML;
		private var imgLoader:Loader;
		private var imgNumber: int;
		private var loadedImgCount:int;
		private var list:XMLList;
		private var movieMaterialArray:Array = new Array();
		private var WALL_BLOCK_IMAGE_COUNT:int;
		private var clickedY:Number = 0;
		private var clickedX:Number = 0;
		private var clickedZ:Number = 0;
		private var clicked:Plane = new Plane();
		private var isLooking:Boolean = false;
		private var dict:Dictionary = new Dictionary();
		private var wallBlockCount:uint;
		//private var backButton:Sprite;
		private var scr:MovieClip;
		private var lastRotation:Number = 0;
		private var originals:XMLList;
		private var bigMovie:MovieClip;
		private var temp:MovieClip;
		private var isLoadingOriginal:Boolean;
 
		try {
			public function carousel():void {
 
				//backButton = new Sprite();
				//backButton.graphics.beginFill(0x000000, 0);
				//backButton.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
				//backButton.graphics.endFill();
				//backButton.addEventListener(MouseEvent.CLICK, onBackClick);
				//backButton.mouseEnabled = false;
				//addChildAt(backButton, 0);
				//trace("backButton");
				loadXML();
				ColorShortcuts.init();
				DisplayShortcuts.init();
 
			}
			private function onBackClick(e:MouseEvent):void {
				unZoom();
				trace("onBackClick");
			}
			private function loadXML():void {
				XMLLoader.load(new URLRequest("images.xml"));
				XMLLoader.addEventListener(Event.COMPLETE, onXMLComplete);
			}
			private function onXMLComplete(e:Event):void {
				imageXML = new XML(e.target.data);
				imageXML.ignoreWhiteSpace = true;
				loadedImgCount = 0;
				list = new XMLList();
				originals = new XMLList();
				list = imageXML.image.@file;
				WALL_BLOCK_IMAGE_COUNT = int(imageXML.blockImageNumber);
				originals = imageXML.image.@original;
				imgNumber = list.length();
				loadImageNum(0);
				trace(imageXML);
			}
			private function loadImageNum(num:int):void {
				var percent:uint = (num*100)/(list.length() - 1);
				loader.txt.text = percent + "%";
				imgLoader = new Loader();
				imgLoader.load(new URLRequest(list[num]));
				imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoadComplete);
			}
			private function onImageLoadComplete(e:Event):void {
				movieMaterialArray.push({movie:e.target.content,original:originals[loadedImgCount]});
				loadedImgCount++;
 
 
				if (loadedImgCount == imgNumber) {
					trace("images completed");
 
					Tweener.addTween(scroller,{ alpha:1, delay:1, time:1,transition:"easeInOutQuad" } );
					Tweener.addTween(scrBg, { alpha:1, delay:1, time:1,transition:"easeInOutQuad"  } );
					Tweener.addTween(loader, { y:stage.stageHeight/2-100,_autoAlpha:0, time:1, transition:"easeInOutQuad" } );
					viewCarousel();
				} else {
					loadImageNum(loadedImgCount);
				}
			}
			private function viewCarousel():void {
				viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, false, true);
				addChild(viewport);
				viewport.cacheAsBitmap = true;
				trace("mask_mc");
				scene = new Scene3D();
				holder = new DisplayObject3D();
				camera = new Camera3D();
				camera.cacheAsBitmap = true;
				camera.z = holder.z - 200;
				holder.cacheAsBitmap = true;
				holder.z = 100;
				holder.y = -45;
				trace();
				scene.addChild(holder);
				scene.cacheAsBitmap = true;
				addEventListener(Event.ENTER_FRAME, onEnterFrame);
				stage.addEventListener(KeyboardEvent.KEY_DOWN, _onKeyDown);
				holder.z = 200;
				Tweener.addTween(holder, { time:1 , z: 55, transition:"easeInOutQuad" } );
				viewport.alpha = 0;
				Tweener.addTween(viewport, { time:1.6 , delay:.5, alpha:1, transition:"easeInOutQuad" } );
				scr = scroller;
				scr.addEventListener(MouseEvent.MOUSE_DOWN, onScrollMouseDown);
				scr.buttonMode = true;
				renderer = new BasicRenderEngine();
				wallBlockCount = Math.round(imgNumber / WALL_BLOCK_IMAGE_COUNT);
				for (var currentWallBlock:int = 0; currentWallBlock < wallBlockCount; currentWallBlock++) {
					for (var i:int = 0; i < WALL_BLOCK_IMAGE_COUNT; i++) {
						if (i + ((currentWallBlock) * WALL_BLOCK_IMAGE_COUNT) < movieMaterialArray.length) {
							var thumb:MovieClip = new MovieClip();
							thumb.cacheAsBitmap = true;
							thumb.addChild(movieMaterialArray[i + ((currentWallBlock) * WALL_BLOCK_IMAGE_COUNT)].movie);
							var movieMaterial:MovieMaterial = new MovieMaterial(thumb, false, true);
							movieMaterial.interactive = true;
							movieMaterial.smooth = true;
							movieMaterial.tiled = true;
							primitive = new Plane(movieMaterial, 100, 70, 2, 2);
							primitive.cacheAsBitmap = true;
							primitive.y = currentWallBlock * (80);
							primitive.rotationY = 360 / (WALL_BLOCK_IMAGE_COUNT) * i;
							primitive.moveForward(200);
							if (currentWallBlock == 0) {
								var reflected:MovieClip = new MovieClip();
 
								var refMask:MovieClip = new masker() as MovieClip;
								reflected.addChild(refMask);
								refMask.y = -110;
								refMask.cacheAsBitmap = true;
 
								var bmpd:BitmapData = new BitmapData(thumb.width, thumb.height, true);
								bmpd.draw(thumb);
								var bmp:Bitmap = new Bitmap(bmpd);
								bmp.width = 100;
								bmp.height = 110;
								var bitmapHolder:MovieClip = new MovieClip();
								bitmapHolder.addChild(bmp);
								bitmapHolder.scaleY = -1;
								bitmapHolder.cacheAsBitmap = true;
 
								bitmapHolder.mask = refMask;
								reflected.addChild(bitmapHolder);
								reflected.alpha = .5;
								reflected.mouseEnabled = false;
 
								var refMat:MovieMaterial = new MovieMaterial(reflected, true, false);
								var reflectionPlane:Plane = new Plane(refMat, 100, 70, 5, 5);
 
								reflectionPlane.y = primitive.y - 70;
								reflectionPlane.rotationY = primitive.rotationY ;
								reflectionPlane.moveForward(200);
								holder.addChild(reflectionPlane);
							}
							var obj:Object = new Object ();
							obj.num = i;
							obj.block = currentWallBlock;
							obj.original = movieMaterialArray[i + ((currentWallBlock) * WALL_BLOCK_IMAGE_COUNT)].original;
							obj.material = movieMaterialArray[i + ((currentWallBlock) * WALL_BLOCK_IMAGE_COUNT)].movie;
							dict[primitive] = obj;
							primitive.name = "image" + currentWallBlock + i;
							holder.addChild(primitive);
							primitive.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onImageClick);
							primitive.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, onImageOver);
							primitive.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, onImageOut);
						}
					}
				}
			}
			private function unZoom():void {
				backToThumb();
				isLooking = false;
				Tweener.addTween(scr,{time:2, x: 55 + Math.random()*stage.stageWidth-150 });
				trace();
				//backButton.mouseEnabled = false;
				Tweener.addTween(scr, { time:.5, _autoAlpha:100 } );
				Tweener.addTween(scrBg,  {time:.5, _autoAlpha:100 } );
				Tweener.addTween(camera,{ time:1.2, z:holder.z - 200, y:0,transition:"easeInOutCubic"});
				Tweener.addTween(holder,{ time:1.2, z:100, y:-50,transition:"easeInOutCubic"});
				trace("unZoom");
			}
			private function mouseUp(event:MouseEvent):void {
 
				if (event.target == scroller) {
					event.target.stopDrag();
				} else {
					scroller.stopDrag();
				}
				stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUp);
			}
			private function onScrollMouseDown(e:MouseEvent):void {
				e.target.startDrag(false, new Rectangle(220, e.target.y, (scrBg.x /2) + 125, 0));
				stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
			}
			private function onEnterFrame(e:Event):void {
				tick();
				if (isLooking) {
					Tweener.removeTweens(holder);
					lastRotation = holder.rotationY;
				} else {
					Tweener.addTween(holder,{ time:1, rotationY:lastRotation - (scroller.x-stage.stageWidth / 2)});
				}
				renderer.renderScene(scene, camera, viewport);
			}
			function onImageClick(e:InteractiveScene3DEvent):void {
				if (isLooking == false) {
					Tweener.addTween(scr, { time:.5, _autoAlpha:0 } );
					Tweener.addTween(scrBg,  {time:.5, _autoAlpha:0 } );
					Tweener.addTween(camera,  { time:1.6, z:170, y:e.target.y - 45,
					transition:"easeInOutCubic",
					onComplete:loadOriginal,
					onCompleteParams:[dict[e.target].original]});
					isLooking = true;
					backToThumb();
					temp = new MovieClip();
					temp = MovieMaterial(e.target.material).movie as MovieClip;
					clickedY = e.target.y;
					clickedX = e.target.x;
					clickedZ = e.target.z;
					clicked = e.target as Plane;
					//backButton.mouseEnabled = true;
					trace("onImageClick");
					trace("camera" + camera.z);
					trace("holder" + holder.z);
				} else if (isLooking == true) {
 
					isLooking = false;
					Tweener.addTween(scr,{time:2, x:342});
					trace();
					//backButton.mouseEnabled = false;
					Tweener.addTween(scr, { time:.5, _autoAlpha:100 } );
					Tweener.addTween(scrBg,  {time:.5, _autoAlpha:100 } );
					Tweener.addTween(camera,{ time:1.2, z:holder.z - 200, y:0,transition:"easeInOutCubic"});
					//Tweener.addTween(holder,{ time:1.2, z:100, y:-50,transition:"easeInOutCubic"});
					trace("onImageClick get out");
					trace("camera" + camera.z);
					trace("holder" + holder.z);
				}
			}
			private function backToThumb():void {
				if (temp != null && !isLoadingOriginal) {
					clicked.material = new MovieMaterial(temp, false, true);
					clicked.material.interactive = true;
					clicked.material.doubleSided = true;
					Tweener.addTween(bigMovie,  { time:.3, _autoAlpha:0} );
				}
			}
 
			private function loadOriginal(url:String):void {
				isLoadingOriginal = true;
				imgLoader = new Loader();
				imgLoader.load(new URLRequest(url));
				imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onOriginalLoaded);
				trace("loadOriginal");
			}
			private function onOriginalLoaded(e:Event):void {
				var bg:Sprite = getChildByName("bg") as Sprite;
				Tweener.addTween(bg,  {time:.4, alpha:0, onComplete:eraser,onCompleteParams:[bg] } );
 
				isLoadingOriginal = false;
				bigMovie = new MovieClip();
				bigMovie.addChild(e.target.content);
				var btmp:BitmapData = new BitmapData(bigMovie.width,bigMovie.height, false);
				btmp.draw(bigMovie);
				var bmp:Bitmap = new Bitmap(btmp);
				bigMovie.addChild(bmp);
				clicked.material = new MovieMaterial(bigMovie, false, true);
				clicked.material.smooth = clicked.material.tiled = clicked.material.interactive = clicked.material.doubleSided = true;
 
			}
			private function lookTo(dispObject:DisplayObject3D, ray:Number3D):void {
				var ease:Number = .50;
				var mainPosition:Number3D = new Number3D(clicked.x,clicked.y,holder.z-(clicked.z));
 
				var dir:Number3D = Number3D.sub(ray, mainPosition);
				dir.normalize();
 
				var front:Number3D = new Number3D(dispObject.transform.n13, dispObject.transform.n23,dispObject.transform.n33);
				front.normalize();
 
				var cross:Number3D = Number3D.cross(dir, front);
				var dot:Number = Number3D.dot(front,dir);
 
				var angle:Number = Math.acos(dot);
 
				var targetQuat:Quaternion = Quaternion.createFromAxisAngle(cross.x, cross.y, cross.z, angle*ease);
 
				dispObject.transform.calculateMultiply3x3(dispObject.transform, targetQuat.matrix);
 
			}
			private function tick():void {
				var ray:Number3D = camera.unproject(clicked.x,clicked.y);
				var depth:Number = 0;
				ray.normalize();
				ray.multiplyEq(depth);
				ray = Number3D.add(ray, new Number3D(holder.x, clicked.y, holder.z));
				lookTo(holder,ray);
			}
			private function onImageOver(e:InteractiveScene3DEvent):void {
				0;
				Tweener.addTween(e.target.material.movie, {time:.5, _brightness:0.5});
			}
			private function onImageOut(e:InteractiveScene3DEvent):void {
				Tweener.addTween(e.target.material.movie, {time:.5, _brightness:0});
			}
			private function _onKeyDown(e:KeyboardEvent) {
 
				if (e.keyCode == 39) {
					onRightArrow();
				} else if (e.keyCode == 37) {
					onLeftArrow();
				} else if (e.keyCode == 38) {
					onUpArrow();
				} else if (e.keyCode == 40) {
					onDownArrow();
				} else if (e.keyCode == 27) {
					unZoom();
				}
			}
			private function onRightArrow() {
				var currentNum:uint = dict[clicked].num;
				var currentBlock:uint = dict[clicked].block;
				var nextNum:uint = currentNum < WALL_BLOCK_IMAGE_COUNT-1 ? currentNum + 1 : 0;
				var str:String = "image" + currentBlock.toString() + nextNum.toString();
				holder.getChildByName(str).dispatchEvent(new InteractiveScene3DEvent(InteractiveScene3DEvent.OBJECT_CLICK));
			}
			private function onLeftArrow() {
				var currentNum:uint = dict[clicked].num;
				var currentBlock:uint = dict[clicked].block;
				var prevNum:uint = currentNum > 0 ? currentNum - 1 : WALL_BLOCK_IMAGE_COUNT-1;
				var str:String = "image" + currentBlock.toString() + prevNum.toString();
				holder.getChildByName(str).dispatchEvent(new InteractiveScene3DEvent(InteractiveScene3DEvent.OBJECT_CLICK));
			}
			private function onUpArrow() {
				var currentNum:uint = dict[clicked].num;
				var currentBlock:uint = dict[clicked].block;
				var nextBlock:uint = currentBlock + 1 <= wallBlockCount ? currentBlock + 1 : wallBlockCount;
				var str:String = "image" + nextBlock + currentNum.toString();
				holder.getChildByName(str).dispatchEvent(new InteractiveScene3DEvent(InteractiveScene3DEvent.OBJECT_CLICK));
			}
			private function onDownArrow() {
				var currentNum:uint = dict[clicked].num;
				var currentBlock:uint = dict[clicked].block;
				var prevBlock:uint = currentBlock - 1 >= 0 ? currentBlock - 1 : 0;
				var str:String = "image" + prevBlock + currentNum.toString();
				holder.getChildByName(str).dispatchEvent(new InteractiveScene3DEvent(InteractiveScene3DEvent.OBJECT_CLICK));
			}
 
			private function eraser(mc:DisplayObject) {
				mc.parent.removeChild(mc);
			}
		} catch (error:TypeError) {
			trace("IOTypeError catch: " + error);
		} finally {
			trace("Finally!");
		}
	}
}

Open in new window

0
 
rascalpantsCommented:
The community thanks you...

rp / ZA
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.