Solved

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

Posted on 2009-05-18
5
1,610 Views
Last Modified: 2013-11-11
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

0
Comment
Question by:cubical38
  • 3
  • 2
5 Comments
 
LVL 22

Expert Comment

by:rascalpants
ID: 24436780

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
 

Accepted Solution

by:
cubical38 earned 0 total points
ID: 24474463
I was able to rewrite the class and get it working
0
 
LVL 22

Expert Comment

by:rascalpants
ID: 24517305
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
 

Author Comment

by:cubical38
ID: 24518483
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
 
LVL 22

Expert Comment

by:rascalpants
ID: 24518560
The community thanks you...

rp / ZA
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
I come across a lot of question about how to access things in the document class from a movieclip, or accessing something from a movieclip in the document class. It took me a while to figure this out but once I did it makes life so much easier. …
The goal of the tutorial is to teach the user how to how to record live broadcast.
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question