Solved

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

Posted on 2009-05-18
5
1,598 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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now