Carousel problem. Start/Stop

Having trouble figuring this out: I need this to be a flad filmstrip o

Page 1 of 1

1 Replies - 1742 Views - Last Post: 09 October 2009 - 06:20 AM

#1 r0x0rcist  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 15-May 09

Carousel problem. Start/Stop

Posted 09 October 2009 - 06:06 AM

Having trouble figuring this out: I need this to be a flad filmstrip of my five images and have a mouse event start my carousel. Not to mention I can't figure out how to make it only go clockwise, not counterclockwise. Here is the XML:
<?xml version="1.0" encoding="utf-8"?>
<carousel>
 
	<number_of_images>5</number_of_images>
 
	<images>
 
		<image>
			<url>manhandcuffed1.png</url>
			//<link_to>http://tutorials.flashmymind.com</link_to>
		</image>
 
		<image>
			<url>discussion1.png</url>
			//<link_to>http://tutorials.flashmymind.com</link_to>
		</image>
 
		<image>
			<url>courthouse1.png</url>
			//<link_to>http://tutorials.flashmymind.com</link_to>
		</image>
 
		<image>
			<url>jailcells1.png</url>
			//<link_to>http://tutorials.flashmymind.com</link_to>
		</image>
 
		<image>
			<url>rehabhands1.png</url>
			//<link_to>http://tutorials.flashmymind.com</link_to>
		</image>
 
	</images>
 
</carousel>


and AND AND here is the AS3 code
//We use 70x70 sized images (change this if different for your images)
const IMAGE_WIDTH:uint = 70;
const IMAGE_HEIGHT:uint = 70;
 
//Set the focal length
var focalLength:Number = 500;
 
//Set the vanishing point
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;
 
//The 3D floor for the images
var floor:Number = 40;
 
//We calculate the angleSpeed in the ENTER_FRAME listener
var angleSpeed:Number = 0;
 
//Radius of the circle
var radius:Number = 200;
 
//Specify the path to the XML file.
//You can use my path or your own.
var xmlFilePath:String = "3Dcarouselsettings1.xml";
 
//We save the loaded XML to a variable
var xml:XML;
 
//This array will contain all the imageHolders
var imageHolders:Array = new Array();
 
//We want to know how many images have been loaded
var numberOfLoadedImages:uint = 0;
 
//The total number of images according to XML file
var numberOfImages:uint = 0;

var direction:Number = 1;
var distToTravel:Number;
 
//Load the XML file.
var loader = new URLLoader();
loader.load(new URLRequest(xmlFilePath));
 
//We call the function xmlLoaded() when the loading is complete.
loader.addEventListener(Event.COMPLETE, xmlLoaded);
 
//This function is called when the XML file is loaded
function xmlLoaded(e:Event):void {
 
	//Create a new XML object from the loaded XML data
	xml = new XML(loader.data);
	xml.ignoreWhitespace = true;
 
	//Call the function that loads the images
	loadImages();
}
 
//This function loads and creates holders for the images specified in the 3D-carousel-settings.xml
function loadImages():void {
 
	//Get the total number of images from the XML file
	numberOfImages = xml.number_of_images;
 
	//Loop through the images found in the XML file
	for each (var image:XML in xml.images.image) {
 
		//Create a new image holder for an image
		var imageHolder:MovieClip = new MovieClip();
 
		//Create a loader that will load an image
		var imageLoader = new Loader();
 
		//Add the imageLoader to the imageHolder
		imageHolder.addChild(imageLoader);
 
		//We don't want to catch any mouse events from the loader
		imageHolder.mouseChildren = false;
 
		//Position the imageLoader so that the registration point of the holder is centered
		imageLoader.x = - (IMAGE_WIDTH / 2);
		imageLoader.y = - (IMAGE_HEIGHT / 2);
 
		//Save where the imageHolder should link to
		imageHolder.linkTo = image.link_to;
 
		//Add the imageHolder to the imageHolders array
		imageHolders.push(imageHolder);
 
		//Load the image
		imageLoader.load(new URLRequest(image.url));
 
		//Listen when the image is loaded
		imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
	}
}
 
//This function is called when an image is loaded
function imageLoaded(e:Event):void {
 
	//Update the number of loaded images
	numberOfLoadedImages++;
 
	//Set the bitmap smoothing to true for the image (we know that the loader's content is a bitmap).
	e.target.content.smoothing = true;
 
	//Check to see if this is the last image loaded
	if (numberOfLoadedImages == numberOfImages) {
 
		//Set up the carousel
		initializeCarousel();
	}
}
//This function is called when all the images have been loaded.
//Now we are ready to create the 3D carousel.
function initializeCarousel():void {
 
	//Calculate the angle difference between the images (in radians)
	var angleDifference:Number = Math.PI * (360 / numberOfImages) / 180;
 
	//Loop through the images
	for (var i:uint = 0; i < imageHolders.length; i++) {
 
		//Assign the imageHolder to a local variable
		var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
 
		//Get the angle for the image (we space the images evenly)
		var startingAngle:Number = angleDifference * i;
 
		//Position the imageHolder
		imageHolder.xpos3D = radius * Math.cos(startingAngle);
		imageHolder.zpos3D = radius * Math.sin(startingAngle);
		imageHolder.ypos3D = floor;
 
		//Set a "currentAngle" attribute for the imageHolder
		imageHolder.currentAngle = startingAngle;
 
		//Calculate the scale ratio for the imageHolder (the further the image -> the smaller the scale)
		var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
 
		//Scale the imageHolder according to the scale ratio
		imageHolder.scaleX = imageHolder.scaleY = scaleRatio;
 
		//Set the alpha for the imageHolder
		imageHolder.alpha = 0.8;
 
		//We want to know when the mouse is over and out of the imageHolder
		imageHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
		imageHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
 
		//We also want to listen for the clicks
		imageHolder.addEventListener(MouseEvent.CLICK, imageClicked);
 
		//Position the imageHolder to the stage (from 3D to 2D coordinates)
		imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio;
		imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio;
 
		//Add the imageHolder to the stage
		addChild(imageHolder);
	}
 
	//Add an ENTER_FRAME for the rotation
	addEventListener(Event.ENTER_FRAME, rotateCarousel);
}
function rotateCarousel(e:Event):void {
 
	//Calculate the angleSpeed according to mouse position
	angleSpeed = (mouseX - vanishingPointX) / 4096;
 
	//Loop through the images
	for (var i:uint = 0; i < imageHolders.length; i++) {
 
		//Assign the imageHolder to a local variable
		var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
 
		//Update the imageHolder's current angle
		imageHolder.currentAngle += angleSpeed;
 
		//Set a new 3D position for the imageHolder
		imageHolder.xpos3D=radius*Math.cos(imageHolder.currentAngle);
		imageHolder.zpos3D=radius*Math.sin(imageHolder.currentAngle);
 
		//Calculate a scale ratio
		var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
 
		//Scale the imageHolder according to the scale ratio
		imageHolder.scaleX=imageHolder.scaleY=scaleRatio;
 
		//Update the imageHolder's coordinates
		imageHolder.x=vanishingPointX+imageHolder.xpos3D*scaleRatio;
		imageHolder.y=vanishingPointY+imageHolder.ypos3D*scaleRatio;
	}
 
	//Call the function that sorts the images so they overlap each others correctly
	sortZ();
}
 
//This function sorts the images so they overlap each others correctly
function sortZ():void {
 
	//Sort the array so that the image which has the highest
	//z position (= furthest away) is first in the array
	imageHolders.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
 
	//Set new child indexes for the images
	for (var i:uint = 0; i < imageHolders.length; i++) {
		setChildIndex(imageHolders[i], i);
	   
		if(imageHolders[i].zpos3D > 0) {
			//remove listeners
			imageHolders[i].removeEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
			imageHolders[i].removeEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
			imageHolders[i].removeEventListener(MouseEvent.CLICK, imageClicked);
		} else {
			//add listeners
			imageHolders[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
			imageHolders[i].addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
			imageHolders[i].addEventListener(MouseEvent.CLICK, imageClicked);
		}

	}
}
 
//This function is called when the mouse is over an imageHolder
function mouseOverImage(e:Event):void {
 
	//Set alpha to 1
	e.target.alpha=1;
}
 
//This function is called when the mouse is out of an imageHolder
function mouseOutImage(e:Event):void {
 
	//Set alpha to 0.8
	e.target.alpha=0.8;
}
 
//This function is called when an imageHolder is clicked
function imageClicked(e:Event):void {
 
	//Navigate to the URL that is in the "linkTo" variable
	navigateToURL(new URLRequest(e.target.linkTo));
}



that's it so far. it works but i can't figure the rest out. i need five parallel images (do I just put them on the stage, b/c right now their in the local folder and called by the XML file and not in the Flash library... and and and how to I get it to not rotate counter clockwise? I sort of want them flat and to have a mouseOver event type deal make it spin, then stop on mouse out... is this possible? -i'm sure anything is but i'm lost. THANKIES in advance!~

Is This A Good Question/Topic? 0
  • +

Replies To: Carousel problem. Start/Stop

#2 r0x0rcist  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 15-May 09

Re: Carousel problem. Start/Stop

Posted 09 October 2009 - 06:20 AM

is this an array method? -the start/stop part?

View Postr0x0rcist, on 9 Oct, 2009 - 07:06 AM, said:

Having trouble figuring this out: I need this to be a flad filmstrip of my five images and have a mouse event start my carousel. Not to mention I can't figure out how to make it only go clockwise, not counterclockwise. Here is the XML:
<?xml version="1.0" encoding="utf-8"?>
<carousel>
 
	<number_of_images>5</number_of_images>
 
	<images>
 
		<image>
			<url>manhandcuffed1.png</url>
			//<link_to>http://tutorials.flashmymind.com</link_to>
		</image>
 
		<image>
			<url>discussion1.png</url>
			//<link_to>http://tutorials.flashmymind.com</link_to>
		</image>
 
		<image>
			<url>courthouse1.png</url>
			//<link_to>http://tutorials.flashmymind.com</link_to>
		</image>
 
		<image>
			<url>jailcells1.png</url>
			//<link_to>http://tutorials.flashmymind.com</link_to>
		</image>
 
		<image>
			<url>rehabhands1.png</url>
			//<link_to>http://tutorials.flashmymind.com</link_to>
		</image>
 
	</images>
 
</carousel>


and AND AND here is the AS3 code
//We use 70x70 sized images (change this if different for your images)
const IMAGE_WIDTH:uint = 70;
const IMAGE_HEIGHT:uint = 70;
 
//Set the focal length
var focalLength:Number = 500;
 
//Set the vanishing point
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;
 
//The 3D floor for the images
var floor:Number = 40;
 
//We calculate the angleSpeed in the ENTER_FRAME listener
var angleSpeed:Number = 0;
 
//Radius of the circle
var radius:Number = 200;
 
//Specify the path to the XML file.
//You can use my path or your own.
var xmlFilePath:String = "3Dcarouselsettings1.xml";
 
//We save the loaded XML to a variable
var xml:XML;
 
//This array will contain all the imageHolders
var imageHolders:Array = new Array();
 
//We want to know how many images have been loaded
var numberOfLoadedImages:uint = 0;
 
//The total number of images according to XML file
var numberOfImages:uint = 0;

var direction:Number = 1;
var distToTravel:Number;
 
//Load the XML file.
var loader = new URLLoader();
loader.load(new URLRequest(xmlFilePath));
 
//We call the function xmlLoaded() when the loading is complete.
loader.addEventListener(Event.COMPLETE, xmlLoaded);
 
//This function is called when the XML file is loaded
function xmlLoaded(e:Event):void {
 
	//Create a new XML object from the loaded XML data
	xml = new XML(loader.data);
	xml.ignoreWhitespace = true;
 
	//Call the function that loads the images
	loadImages();
}
 
//This function loads and creates holders for the images specified in the 3D-carousel-settings.xml
function loadImages():void {
 
	//Get the total number of images from the XML file
	numberOfImages = xml.number_of_images;
 
	//Loop through the images found in the XML file
	for each (var image:XML in xml.images.image) {
 
		//Create a new image holder for an image
		var imageHolder:MovieClip = new MovieClip();
 
		//Create a loader that will load an image
		var imageLoader = new Loader();
 
		//Add the imageLoader to the imageHolder
		imageHolder.addChild(imageLoader);
 
		//We don't want to catch any mouse events from the loader
		imageHolder.mouseChildren = false;
 
		//Position the imageLoader so that the registration point of the holder is centered
		imageLoader.x = - (IMAGE_WIDTH / 2);
		imageLoader.y = - (IMAGE_HEIGHT / 2);
 
		//Save where the imageHolder should link to
		imageHolder.linkTo = image.link_to;
 
		//Add the imageHolder to the imageHolders array
		imageHolders.push(imageHolder);
 
		//Load the image
		imageLoader.load(new URLRequest(image.url));
 
		//Listen when the image is loaded
		imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
	}
}
 
//This function is called when an image is loaded
function imageLoaded(e:Event):void {
 
	//Update the number of loaded images
	numberOfLoadedImages++;
 
	//Set the bitmap smoothing to true for the image (we know that the loader's content is a bitmap).
	e.target.content.smoothing = true;
 
	//Check to see if this is the last image loaded
	if (numberOfLoadedImages == numberOfImages) {
 
		//Set up the carousel
		initializeCarousel();
	}
}
//This function is called when all the images have been loaded.
//Now we are ready to create the 3D carousel.
function initializeCarousel():void {
 
	//Calculate the angle difference between the images (in radians)
	var angleDifference:Number = Math.PI * (360 / numberOfImages) / 180;
 
	//Loop through the images
	for (var i:uint = 0; i < imageHolders.length; i++) {
 
		//Assign the imageHolder to a local variable
		var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
 
		//Get the angle for the image (we space the images evenly)
		var startingAngle:Number = angleDifference * i;
 
		//Position the imageHolder
		imageHolder.xpos3D = radius * Math.cos(startingAngle);
		imageHolder.zpos3D = radius * Math.sin(startingAngle);
		imageHolder.ypos3D = floor;
 
		//Set a "currentAngle" attribute for the imageHolder
		imageHolder.currentAngle = startingAngle;
 
		//Calculate the scale ratio for the imageHolder (the further the image -> the smaller the scale)
		var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
 
		//Scale the imageHolder according to the scale ratio
		imageHolder.scaleX = imageHolder.scaleY = scaleRatio;
 
		//Set the alpha for the imageHolder
		imageHolder.alpha = 0.8;
 
		//We want to know when the mouse is over and out of the imageHolder
		imageHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
		imageHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
 
		//We also want to listen for the clicks
		imageHolder.addEventListener(MouseEvent.CLICK, imageClicked);
 
		//Position the imageHolder to the stage (from 3D to 2D coordinates)
		imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio;
		imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio;
 
		//Add the imageHolder to the stage
		addChild(imageHolder);
	}
 
	//Add an ENTER_FRAME for the rotation
	addEventListener(Event.ENTER_FRAME, rotateCarousel);
}
function rotateCarousel(e:Event):void {
 
	//Calculate the angleSpeed according to mouse position
	angleSpeed = (mouseX - vanishingPointX) / 4096;
 
	//Loop through the images
	for (var i:uint = 0; i < imageHolders.length; i++) {
 
		//Assign the imageHolder to a local variable
		var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
 
		//Update the imageHolder's current angle
		imageHolder.currentAngle += angleSpeed;
 
		//Set a new 3D position for the imageHolder
		imageHolder.xpos3D=radius*Math.cos(imageHolder.currentAngle);
		imageHolder.zpos3D=radius*Math.sin(imageHolder.currentAngle);
 
		//Calculate a scale ratio
		var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
 
		//Scale the imageHolder according to the scale ratio
		imageHolder.scaleX=imageHolder.scaleY=scaleRatio;
 
		//Update the imageHolder's coordinates
		imageHolder.x=vanishingPointX+imageHolder.xpos3D*scaleRatio;
		imageHolder.y=vanishingPointY+imageHolder.ypos3D*scaleRatio;
	}
 
	//Call the function that sorts the images so they overlap each others correctly
	sortZ();
}
 
//This function sorts the images so they overlap each others correctly
function sortZ():void {
 
	//Sort the array so that the image which has the highest
	//z position (= furthest away) is first in the array
	imageHolders.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
 
	//Set new child indexes for the images
	for (var i:uint = 0; i < imageHolders.length; i++) {
		setChildIndex(imageHolders[i], i);
	   
		if(imageHolders[i].zpos3D > 0) {
			//remove listeners
			imageHolders[i].removeEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
			imageHolders[i].removeEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
			imageHolders[i].removeEventListener(MouseEvent.CLICK, imageClicked);
		} else {
			//add listeners
			imageHolders[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage);
			imageHolders[i].addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage);
			imageHolders[i].addEventListener(MouseEvent.CLICK, imageClicked);
		}

	}
}
 
//This function is called when the mouse is over an imageHolder
function mouseOverImage(e:Event):void {
 
	//Set alpha to 1
	e.target.alpha=1;
}
 
//This function is called when the mouse is out of an imageHolder
function mouseOutImage(e:Event):void {
 
	//Set alpha to 0.8
	e.target.alpha=0.8;
}
 
//This function is called when an imageHolder is clicked
function imageClicked(e:Event):void {
 
	//Navigate to the URL that is in the "linkTo" variable
	navigateToURL(new URLRequest(e.target.linkTo));
}



that's it so far. it works but i can't figure the rest out. i need five parallel images (do I just put them on the stage, b/c right now their in the local folder and called by the XML file and not in the Flash library... and and and how to I get it to not rotate counter clockwise? I sort of want them flat and to have a mouseOver event type deal make it spin, then stop on mouse out... is this possible? -i'm sure anything is but i'm lost. THANKIES in advance!~

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1