Join 307,161 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,515 people online right now. Registration is fast and FREE... Join Now!
Not sure what level this is rated, but I am most definitely a beginner. I found some code online where someone had made a three ring carousel, one inner, one middle, and one outer ring. It looked great, and it was clearer than some other tutorials/posts I'd looked at, so I thought I'd edit it. However, I first tried it with one image multiplied it 5 times and reduced the speed (he used 0.05 and I tried .3, which I liked better). The code I am posting here is for my edited one. You'll notice it says "Inner_Items" so I just kept the info for that and deleted his "middle" and "outer". I need to find a way to put a photo in each slot on one ring. I most definitely went about it the wrong way, since his is set up for what he was trying to do. If I'm not confusing anyone, please get back to me with suggestions. This is for Flash in CS4, and AS3. I am not working with AS2, and pardon my mistakes, as there will be a lot of them.
Here is his original code:
[code] //Number of items in each circles const OUTER_ITEMS:uint = 60; const MIDDLE_ITEMS:uint = 40; const INNER_ITEMS:uint = 20;
//The radiuses and floor for each carousel (floor is not constant since we change it //during the animation) const OUTER_RADIUS_X:Number = 250; const OUTER_RADIUS_Z:Number = 140;
//Set the focal length var focalLength:Number = 350;
//Set the vanishing point var vanishingPointX:Number = stage.stageWidth / 2; var vanishingPointY:Number = stage.stageHeight / 2;
//This array will contains all the items in the carousels var myItems:Array = new Array();
//The angle speed for the items var angleSpeed:Number = 0.02;
//Call the function that initializes the carousels initializeCarousels();
//This function creates and positions the carousels function initializeCarousels():void {
//We use the function "createCarousel()" to create and position the carousels. //We pass the number of items and the radiuses as parameters createCarousel(OUTER_ITEMS, OUTER_RADIUS_X, OUTER_RADIUS_Z); createCarousel(MIDDLE_ITEMS, MIDDLE_RADIUS_X, MIDDLE_RADIUS_Z); createCarousel(INNER_ITEMS, INNER_RADIUS_X, INNER_RADIUS_Z);
//Now that we have all the carousels ready, we can start to animate them //using the ENTER_FRAME listener. addEventListener(Event.ENTER_FRAME, rotateCarousels); }
//This function creates a single carousel. function createCarousel(numberOfItems:uint, xRadius:Number, zRadius:Number) {
//Calculate the angle difference between the items (in radians) var angleDifference:Number = Math.PI * (360 / numberOfItems) / 180;
//This loop creates and positions the carousel items for (var i:uint = 0; i < numberOfItems; i++) {
//Create a new item var myItem:MyItem = new MyItem();
//Make the item a bit transparent myItem.alpha = 0.6;
//Get the starting angle for the item var startingAngle:Number = angleDifference * i;
//Set a "currentAngle" attribute for the item myItem.currentAngle = startingAngle;
//Save the x and z radiuses for this item (needed in the animation) myItem.xRadius = xRadius; myItem.zRadius = zRadius;
//Calculate the scale ratio for the item (the further the image -> the smaller the scale) var scaleRatio = focalLength/(focalLength + myItem.zpos3D);
//Scale the item according to the scale ratio myItem.scaleX = myItem.scaleY = scaleRatio;
//Position the item to the stage (from 3D to 2D coordinates) myItem.x = vanishingPointX + myItem.xpos3D * scaleRatio; myItem.y = vanishingPointY + myItem.ypos3D * scaleRatio;
//Add the item to the array myItems.push(myItem);
//Add the item to the stage addChild(myItem); } }
[code]
Now, obviously I have some court processing pictures in mine, as you'll see below, and I eliminated his other rings and just used one. I'm not sure how to put multiple images into one ring, so I tried first to just input one image and see if it would rotate in a carousel and set the number of the one item to 5. So this code shows 5 of the one image revolving. This code actually worked! -it doesn't look great, but the carousel worked, rotating the one image.
[code]
//Number of items in each circles const INNER_ITEMS:uint = 5;
//The radiuses and floor for each carousel (floor is not constant since we change it //during the animation) const INNER_RADIUS_X:Number = 80; const INNER_RADIUS_Z:Number = 40;
//The floor for each item var floor:Number = 100;
//Set the focal length var focalLength:Number = 350;
//Set the vanishing point var vanishingPointX:Number = stage.stageWidth / 2; var vanishingPointY:Number = stage.stageHeight / 2;
//This array will contains all the items in the carousels var myItems:Array = new Array();
//The angle speed for the items var angleSpeed:Number = 0.05; //or 0.03 might be better
//Call the function that initializes the carousels initializeCarousels();
//This function creates and positions the carousels function initializeCarousels():void {
//We use the function "createCarousel()" to create and position the carousels. //We pass the number of items and the radiuses as parameters createCarousel(INNER_ITEMS, INNER_RADIUS_X, INNER_RADIUS_Z);
//Now that we have all the carousels ready, we can start to animate them //using the ENTER_FRAME listener. addEventListener(Event.ENTER_FRAME, rotateCarousels); }
//This function creates a single carousel. function createCarousel(numberOfItems:uint, xRadius:Number, zRadius:Number) {
//Calculate the angle difference between the items (in radians) var angleDifference:Number = Math.PI * (360 / numberOfItems) / 180;
//This loop creates and positions the carousel items for (var i:uint = 0; i < numberOfItems; i++) {
//Create a new item var myItem:MyItem = new MyItem();
//Make the item a bit transparent myItem.alpha = 0.6;
//Get the starting angle for the item var startingAngle:Number = angleDifference * i;
//Set a "currentAngle" attribute for the item myItem.currentAngle = startingAngle;
//Save the x and z radiuses for this item (needed in the animation) myItem.xRadius = xRadius; myItem.zRadius = zRadius;
//Calculate the scale ratio for the item (the further the image -> the smaller the scale) var scaleRatio = focalLength/(focalLength + myItem.zpos3D);
//Scale the item according to the scale ratio myItem.scaleX = myItem.scaleY = scaleRatio;
//Position the item to the stage (from 3D to 2D coordinates) myItem.x = vanishingPointX + myItem.xpos3D * scaleRatio; myItem.y = vanishingPointY + myItem.ypos3D * scaleRatio;
//Add the item to the array myItems.push(myItem);
//Add the item to the stage addChild(myItem); } } //This function rotates all the carousels function rotateCarousels(e:Event):void {
//Loop through all the items for (var i:uint = 0; i < myItems.length; i++) {
//Save the item to a local variable var myItem:MyItem = (MyItem)(myItems[i]);
//Update the current angle for the item myItem.currentAngle += angleSpeed;
//Set a new 3D position for the item myItem.xpos3D=myItem.xRadius*Math.cos(myItem.currentAngle); myItem.zpos3D=myItem.zRadius*Math.sin(myItem.currentAngle);
//The new 3D y coordinate can be from -200 to 200 myItem.ypos3D= (mouseY*2 / stage.stageHeight) * 200 - 200;
//Calculate a scale ratio var scaleRatio = focalLength/(focalLength + myItem.zpos3D);
//Scale the item according to the scale ratio myItem.scaleX=myItem.scaleY=scaleRatio;
//Update the item's 2D coordinates (tween to new y coordinates). myItem.x=vanishingPointX+myItem.xpos3D*scaleRatio;
} //Call the function that sorts the items so they overlap each other correctly sortZ(); }
//This function sorts the items so they overlap each others correctly function sortZ():void {
//Sort the array so that the item which has the highest //z position (= furthest away) is first in the array myItems.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
//Set new child indexes for the items for (var i:uint = 0; i < myItems.length; i++) { setChildIndex(myItems[i], i); } }
[code]
-Where is the part that I really jacked up, you ask? -Okay, I just don't plain know what I'm doing. So, this code that follows is where I "guessed" things should go, clearly guessing wrong:
[code]
//Number of items in each circles const INNER_ITEMS:uint = 5;
//The radiuses and floor for each carousel (floor is not constant since we change it //during the animation) const INNER_RADIUS_X:Number = 80; const INNER_RADIUS_Z:Number = 40;
//The floor for each item var floor:Number = 100;
//Set the focal length var focalLength:Number = 350;
//Set the vanishing point var vanishingPointX:Number = stage.stageWidth / 2; var vanishingPointY:Number = stage.stageHeight / 2;
//This array will contains all the items in the carousels var myItems:Array = new Array();
//The angle speed for the items var angleSpeed:Number = 0.05; //or 0.03 might be better
//Call the function that initializes the carousels initializeCarousels();
//This function creates and positions the carousels function initializeCarousels():void {
//We use the function "createCarousel()" to create and position the carousels. //We pass the number of items and the radiuses as parameters createCarousel(INNER_ITEMS, INNER_RADIUS_X, INNER_RADIUS_Z);
//Now that we have all the carousels ready, we can start to animate them //using the ENTER_FRAME listener. addEventListener(Event.ENTER_FRAME, rotateCarousels); }
//This function creates a single carousel. function createCarousel(numberOfItems:uint, xRadius:Number, zRadius:Number) {
//Calculate the angle difference between the items (in radians) var angleDifference:Number = Math.PI * (360 / numberOfItems) / 180;
//This loop creates and positions the carousel items for (var i:uint = 0; i < numberOfItems; i++) {
//Create a new item var myItem:MyItem = new MyItem();
//Make the item a bit transparent myItem.alpha = 0.6;
//Get the starting angle for the item var startingAngle:Number = angleDifference * i;
//Set a "currentAngle" attribute for the item myItem.currentAngle = startingAngle;
//Save the x and z radiuses for this item (needed in the animation) myItem.xRadius = xRadius; myItem.zRadius = zRadius;
//Calculate the scale ratio for the item (the further the image -> the smaller the scale) var scaleRatio = focalLength/(focalLength + myItem.zpos3D);
//Scale the item according to the scale ratio myItem.scaleX = myItem.scaleY = scaleRatio;
//Position the item to the stage (from 3D to 2D coordinates) myItem.x = vanishingPointX + myItem.xpos3D * scaleRatio; myItem.y = vanishingPointY + myItem.ypos3D * scaleRatio;
//Add the item to the array myItems.push(myItem);
//Add the item to the stage addChild(myItem); } } //This function rotates all the carousels function rotateCarousels(e:Event):void {
//Loop through all the items for (var i:uint = 0; i < myItems.length; i++) {
//Save the item to a local variable var myItem:MyItem = (MyItem)(myItems[i]);
//Update the current angle for the item myItem.currentAngle += angleSpeed;
//Set a new 3D position for the item myItem.xpos3D=myItem.xRadius*Math.cos(myItem.currentAngle); myItem.zpos3D=myItem.zRadius*Math.sin(myItem.currentAngle);
//The new 3D y coordinate can be from -200 to 200 myItem.ypos3D= (mouseY*2 / stage.stageHeight) * 200 - 200;
//Calculate a scale ratio var scaleRatio = focalLength/(focalLength + myItem.zpos3D);
//Scale the item according to the scale ratio myItem.scaleX=myItem.scaleY=scaleRatio;
//Update the item's 2D coordinates (tween to new y coordinates). myItem.x=vanishingPointX+myItem.xpos3D*scaleRatio;
} //Call the function that sorts the items so they overlap each other correctly sortZ(); }
//This function sorts the items so they overlap each others correctly function sortZ():void {
//Sort the array so that the item which has the highest //z position (= furthest away) is first in the array myItems.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
//Set new child indexes for the items for (var i:uint = 0; i < myItems.length; i++) { setChildIndex(myItems[i], i); } }
[code]
This code gives me the 1084 error (expecting right brace before end of program) 7 times in a row only, but every time I try to fix it I just get one more of the same error.
I truly apologize for how poor I am at this and if any of this was confusing. I'm not sure how to get from the 2nd code I pasted, to adding a clean cut version of it with multiple pictures. Perhaps I need to trash all of this all together.
P.S. Gotoandlearn is not working for me here at work. Any other suggestions for AS3 for Flash CS4?
When you use code tags, you need to close them properly:
The error you're getting is a straightforward syntax error suggesting that you've left a brace open somewhere, but I can't find it in the code you've provided. Here is my version of it, and this works when a movieclip exists in the library with a class of MyItem:
CODE
//Number of items in each circles const INNER_ITEMS:uint = 5;
//The radiuses and floor for each carousel (floor is not constant since we change it //during the animation) const INNER_RADIUS_X:Number = 80; const INNER_RADIUS_Z:Number = 40;
//The floor for each item var floor:Number = 100;
//Set the focal length var focalLength:Number = 350;
//Set the vanishing point var vanishingPointX:Number = stage.stageWidth / 2; var vanishingPointY:Number = stage.stageHeight / 2;
//This array will contains all the items in the carousels var myItems:Array = new Array();
//The angle speed for the items var angleSpeed:Number = 0.05; //or 0.03 might be better
//Call the function that initializes the carousels initializeCarousels();
//This function creates and positions the carousels function initializeCarousels():void {
//We use the function "createCarousel()" to create and position the carousels. //We pass the number of items and the radiuses as parameters createCarousel(INNER_ITEMS, INNER_RADIUS_X, INNER_RADIUS_Z);
//Now that we have all the carousels ready, we can start to animate them //using the ENTER_FRAME listener. addEventListener(Event.ENTER_FRAME, rotateCarousels); }
//This function creates a single carousel. function createCarousel(numberOfItems:uint, xRadius:Number, zRadius:Number) {
//Calculate the angle difference between the items (in radians) var angleDifference:Number = Math.PI * (360 / numberOfItems) / 180;
//This loop creates and positions the carousel items for (var i:uint = 0; i < numberOfItems; i++) {
//Create a new item var myItem:MyItem = new MyItem();
//Make the item a bit transparent myItem.alpha = 0.6;
//Get the starting angle for the item var startingAngle:Number = angleDifference * i;
//Set a "currentAngle" attribute for the item myItem.currentAngle = startingAngle;
//Save the x and z radiuses for this item (needed in the animation) myItem.xRadius = xRadius; myItem.zRadius = zRadius;
//Calculate the scale ratio for the item (the further the image -> the smaller the scale) var scaleRatio = focalLength/(focalLength + myItem.zpos3D);
//Scale the item according to the scale ratio myItem.scaleX = myItem.scaleY = scaleRatio;
//Position the item to the stage (from 3D to 2D coordinates) myItem.x = vanishingPointX + myItem.xpos3D * scaleRatio; myItem.y = vanishingPointY + myItem.ypos3D * scaleRatio;
//Add the item to the array myItems.push(myItem);
//Add the item to the stage addChild(myItem); } }
//This function rotates all the carousels function rotateCarousels(e:Event):void {
//Loop through all the items for (var i:uint = 0; i < myItems.length; i++) {
//Save the item to a local variable var myItem:MyItem = (MyItem)(myItems[i]);
//Update the current angle for the item myItem.currentAngle += angleSpeed;
//Set a new 3D position for the item myItem.xpos3D=myItem.xRadius*Math.cos(myItem.currentAngle); myItem.zpos3D=myItem.zRadius*Math.sin(myItem.currentAngle);
//The new 3D y coordinate can be from -200 to 200 myItem.ypos3D= (mouseY*2 / stage.stageHeight) * 200 - 200;
//Calculate a scale ratio var scaleRatio = focalLength/(focalLength + myItem.zpos3D);
//Scale the item according to the scale ratio myItem.scaleX=myItem.scaleY=scaleRatio;
//Update the item's 2D coordinates (tween to new y coordinates). myItem.x=vanishingPointX+myItem.xpos3D*scaleRatio;
} //Call the function that sorts the items so they overlap each other correctly sortZ(); }
//This function sorts the items so they overlap each others correctly function sortZ():void {
//Sort the array so that the item which has the highest //z position (= furthest away) is first in the array myItems.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
//Set new child indexes for the items for (var i:uint = 0; i < myItems.length; i++) { setChildIndex(myItems[i], i); } }
I tried to edit after to add that enclosing. Thanks for your help. Have you seen my recent post?
QUOTE(thehat @ 6 Oct, 2009 - 07:52 AM)
When you use code tags, you need to close them properly:
The error you're getting is a straightforward syntax error suggesting that you've left a brace open somewhere, but I can't find it in the code you've provided. Here is my version of it, and this works when a movieclip exists in the library with a class of MyItem:
CODE
//Number of items in each circles const INNER_ITEMS:uint = 5;
//The radiuses and floor for each carousel (floor is not constant since we change it //during the animation) const INNER_RADIUS_X:Number = 80; const INNER_RADIUS_Z:Number = 40;
//The floor for each item var floor:Number = 100;
//Set the focal length var focalLength:Number = 350;
//Set the vanishing point var vanishingPointX:Number = stage.stageWidth / 2; var vanishingPointY:Number = stage.stageHeight / 2;
//This array will contains all the items in the carousels var myItems:Array = new Array();
//The angle speed for the items var angleSpeed:Number = 0.05; //or 0.03 might be better
//Call the function that initializes the carousels initializeCarousels();
//This function creates and positions the carousels function initializeCarousels():void {
//We use the function "createCarousel()" to create and position the carousels. //We pass the number of items and the radiuses as parameters createCarousel(INNER_ITEMS, INNER_RADIUS_X, INNER_RADIUS_Z);
//Now that we have all the carousels ready, we can start to animate them //using the ENTER_FRAME listener. addEventListener(Event.ENTER_FRAME, rotateCarousels); }
//This function creates a single carousel. function createCarousel(numberOfItems:uint, xRadius:Number, zRadius:Number) {
//Calculate the angle difference between the items (in radians) var angleDifference:Number = Math.PI * (360 / numberOfItems) / 180;
//This loop creates and positions the carousel items for (var i:uint = 0; i < numberOfItems; i++) {
//Create a new item var myItem:MyItem = new MyItem();
//Make the item a bit transparent myItem.alpha = 0.6;
//Get the starting angle for the item var startingAngle:Number = angleDifference * i;
//Set a "currentAngle" attribute for the item myItem.currentAngle = startingAngle;
//Save the x and z radiuses for this item (needed in the animation) myItem.xRadius = xRadius; myItem.zRadius = zRadius;
//Calculate the scale ratio for the item (the further the image -> the smaller the scale) var scaleRatio = focalLength/(focalLength + myItem.zpos3D);
//Scale the item according to the scale ratio myItem.scaleX = myItem.scaleY = scaleRatio;
//Position the item to the stage (from 3D to 2D coordinates) myItem.x = vanishingPointX + myItem.xpos3D * scaleRatio; myItem.y = vanishingPointY + myItem.ypos3D * scaleRatio;
//Add the item to the array myItems.push(myItem);
//Add the item to the stage addChild(myItem); } }
//This function rotates all the carousels function rotateCarousels(e:Event):void {
//Loop through all the items for (var i:uint = 0; i < myItems.length; i++) {
//Save the item to a local variable var myItem:MyItem = (MyItem)(myItems[i]);
//Update the current angle for the item myItem.currentAngle += angleSpeed;
//Set a new 3D position for the item myItem.xpos3D=myItem.xRadius*Math.cos(myItem.currentAngle); myItem.zpos3D=myItem.zRadius*Math.sin(myItem.currentAngle);
//The new 3D y coordinate can be from -200 to 200 myItem.ypos3D= (mouseY*2 / stage.stageHeight) * 200 - 200;
//Calculate a scale ratio var scaleRatio = focalLength/(focalLength + myItem.zpos3D);
//Scale the item according to the scale ratio myItem.scaleX=myItem.scaleY=scaleRatio;
//Update the item's 2D coordinates (tween to new y coordinates). myItem.x=vanishingPointX+myItem.xpos3D*scaleRatio;
} //Call the function that sorts the items so they overlap each other correctly sortZ(); }
//This function sorts the items so they overlap each others correctly function sortZ():void {
//Sort the array so that the item which has the highest //z position (= furthest away) is first in the array myItems.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING);
//Set new child indexes for the items for (var i:uint = 0; i < myItems.length; i++) { setChildIndex(myItems[i], i); } }
Only the Button Functionality/Animation Flow Issues thread. Maybe you should repeat your question here?
So I have this code:
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 = "3Dcarouselsettings.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;
//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;
//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.3;
//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); } }
//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.3 e.target.alpha=0.3; }
//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)); }
which works as a perfect carousel aside from, I need to find the part that makes opacity not so light (which i believe to be the vanishing point -though not sure) and not let the images mouse effect happen when they're in the background (which they still do). AND AND AND -I need to know how to make a flat (almost filmstrip appeal) horizontal thing and then have a mouse over event to call the carousel to appear and disappear (like go back to normal) once the mouse out of the window. I have absolutely no idea of how to do this!! T_T
Please help my sorry ass!
~Rebecca (not feeling so r0x0rcist at the moment!)
Changing the opacity requires two changes. The first is in the initializeCarousel function and sets the initial opacity for each imageHolder, and looks like this:
CODE
//Set the alpha for the imageHolder imageHolder.alpha = 0.3;
The second is in the mouseOutImage function, which sets the opacity of an imageHolder when the mouse moves off it:
CODE
//Set alpha to 0.3 e.target.alpha=0.3;
The values for these are between 0 and 1, where one is fully visible.
For your second problem, each imageHolder has a zpos3D property, which tells us how far away the imageHolder is. Using this you can change the mouseOverImage function to only change the opacity when the imageHolder is at the front:
CODE
//This function is called when the mouse is over an imageHolder function mouseOverImage(e:Event):void {
w0w, i'm excited. I'll try this! -you're the bestest! -am i replying in the right way? -i've always wondered that ^_~
~R
QUOTE(thehat @ 7 Oct, 2009 - 07:54 AM)
Changing the opacity requires two changes. The first is in the initializeCarousel function and sets the initial opacity for each imageHolder, and looks like this:
CODE
//Set the alpha for the imageHolder imageHolder.alpha = 0.3;
The second is in the mouseOutImage function, which sets the opacity of an imageHolder when the mouse moves off it:
CODE
//Set alpha to 0.3 e.target.alpha=0.3;
The values for these are between 0 and 1, where one is fully visible.
For your second problem, each imageHolder has a zpos3D property, which tells us how far away the imageHolder is. Using this you can change the mouseOverImage function to only change the opacity when the imageHolder is at the front:
CODE
//This function is called when the mouse is over an imageHolder function mouseOverImage(e:Event):void {
Okay, so as far as the "if(e.target.zpos3D < 0) { //Set alpha to 1 e.target.alpha=1;"
part. What do I need to change to make it not click the farther away images?
Again, thanks so much. The opacity at .8, I think looks excellent!
QUOTE(thehat @ 7 Oct, 2009 - 07:54 AM)
Changing the opacity requires two changes. The first is in the initializeCarousel function and sets the initial opacity for each imageHolder, and looks like this:
CODE
//Set the alpha for the imageHolder imageHolder.alpha = 0.3;
The second is in the mouseOutImage function, which sets the opacity of an imageHolder when the mouse moves off it:
CODE
//Set alpha to 0.3 e.target.alpha=0.3;
The values for these are between 0 and 1, where one is fully visible.
For your second problem, each imageHolder has a zpos3D property, which tells us how far away the imageHolder is. Using this you can change the mouseOverImage function to only change the opacity when the imageHolder is at the front:
CODE
//This function is called when the mouse is over an imageHolder function mouseOverImage(e:Event):void {
You can just put the same if into the imageClicked function:
CODE
//This function is called when an imageHolder is clicked function imageClicked(e:Event):void { if(e.target.zpos3D < 0) { //Navigate to the URL that is in the "linkTo" variable navigateToURL(new URLRequest(e.target.linkTo)); } }
I've given you the required changes to stop the rollover and click actions from happening, but do you actually want to block the events from being fired? That's fairly easy to do too, using the same if loop in a different place. There is a function called sortZ:
CODE
//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); } }
The for loop you can see is setting the depth of the imageHolders based on their zpos3D property. Inside that for loop we can check if the imageHolder is in the background or the foreground, and enable or disable their event listeners as required:
CODE
//Set new child indexes for the images for (var i:uint = 0; i < imageHolders.length; i++) { setChildIndex(imageHolders[i], i); //check the zpos 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 post has been edited by thehat: 8 Oct, 2009 - 01:12 AM
you know, the second part isn't working. the second code, i mean. could you show me which part to cut and replace in my code first? -I think that might be the problem. -You'll know best. -Thank goodness for you! ^_~
~R
QUOTE(thehat @ 8 Oct, 2009 - 03:09 AM)
London
So let me make sure I understand the question...
I've given you the required changes to stop the rollover and click actions from happening, but do you actually want to block the events from being fired? That's fairly easy to do too, using the same if loop in a different place. There is a function called sortZ:
CODE
//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); } }
The for loop you can see is setting the depth of the imageHolders based on their zpos3D property. Inside that for loop we can check if the imageHolder is in the background or the foreground, and enable or disable their event listeners as required:
CODE
//Set new child indexes for the images for (var i:uint = 0; i < imageHolders.length; i++) { setChildIndex(imageHolders[i], i); //check the zpos 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); } }
Do you also know how I can get it to not go counter clockwise? -Not sure if I asked that before. So that I have the most updated code to show you, here it is:
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 = "3Dcarouselsettings.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;
//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;
//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); } }
//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)); }
QUOTE(r0x0rcist @ 8 Oct, 2009 - 09:04 AM)
you know, the second part isn't working. the second code, i mean. could you show me which part to cut and replace in my code first? -I think that might be the problem. -You'll know best. -Thank goodness for you! ^_~
~R
QUOTE(thehat @ 8 Oct, 2009 - 03:09 AM)
London
So let me make sure I understand the question...
I've given you the required changes to stop the rollover and click actions from happening, but do you actually want to block the events from being fired? That's fairly easy to do too, using the same if loop in a different place. There is a function called sortZ:
CODE
//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); } }
The for loop you can see is setting the depth of the imageHolders based on their zpos3D property. Inside that for loop we can check if the imageHolder is in the background or the foreground, and enable or disable their event listeners as required:
CODE
//Set new child indexes for the images for (var i:uint = 0; i < imageHolders.length; i++) { setChildIndex(imageHolders[i], i); //check the zpos 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); } }
Okay, so I didn't replace anything. I just added the second code sample to the end. -I know I'm frustrating. -It works still, but the only remaining problems I have (and I say ONLY lightly, though it isn't! T_T) are that I need the images to circulate only clockwise, not counter, and I need them to not be affected in the background by the mouse event, which didn't work with the last code sample. I do very much need the images to be flat and them spun into a carousel and this is, in fact, the hardest part for me to find on The Netz. -I'm so sorry to bother you again, but if you have any clue (or any of you) please let me know! -Eternally grateful.
QUOTE(r0x0rcist @ 8 Oct, 2009 - 09:13 AM)
Do you also know how I can get it to not go counter clockwise? -Not sure if I asked that before. So that I have the most updated code to show you, here it is:
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 = "3Dcarouselsettings.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;
//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;
//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); } }
//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)); }
QUOTE(r0x0rcist @ 8 Oct, 2009 - 09:04 AM)
you know, the second part isn't working. the second code, i mean. could you show me which part to cut and replace in my code first? -I think that might be the problem. -You'll know best. -Thank goodness for you! ^_~
~R
QUOTE(thehat @ 8 Oct, 2009 - 03:09 AM)
London
So let me make sure I understand the question...
I've given you the required changes to stop the rollover and click actions from happening, but do you actually want to block the events from being fired? That's fairly easy to do too, using the same if loop in a different place. There is a function called sortZ:
CODE
//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); } }
The for loop you can see is setting the depth of the imageHolders based on their zpos3D property. Inside that for loop we can check if the imageHolder is in the background or the foreground, and enable or disable their event listeners as required:
CODE
//Set new child indexes for the images for (var i:uint = 0; i < imageHolders.length; i++) { setChildIndex(imageHolders[i], i); //check the zpos 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); } }
you know, the second part isn't working. the second code, i mean. could you show me which part to cut and replace in my code first? -I think that might be the problem. -You'll know best. -Thank goodness for you! ^_~
~R
QUOTE(thehat @ 8 Oct, 2009 - 03:09 AM)
London
So let me make sure I understand the question...
I've given you the required changes to stop the rollover and click actions from happening, but do you actually want to block the events from being fired? That's fairly easy to do too, using the same if loop in a different place. There is a function called sortZ:
CODE
//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); } }
The for loop you can see is setting the depth of the imageHolders based on their zpos3D property. Inside that for loop we can check if the imageHolder is in the background or the foreground, and enable or disable their event listeners as required:
CODE
//Set new child indexes for the images for (var i:uint = 0; i < imageHolders.length; i++) { setChildIndex(imageHolders[i], i); //check the zpos 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); } }
Here's the complete code with the items in the background disabled:
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 = "3Dcarouselsettings.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;
//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;
//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);
You're the only one who has answered my questions. -You seem to be my answer! you = win.
~Rebecca
QUOTE(thehat @ 8 Oct, 2009 - 11:12 AM)
Here's the complete code with the items in the background disabled:
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 = "3Dcarouselsettings.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;
//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;
//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);
You know what I mean when I say the carousel is introduced when someone mouses over the movie -like the area? -like it's a flat film strip like image, image, image image image, until you mouse over and it's spun then. I wasn't sure if I made sense at first. LMK.
-you're such a great help! -thankies! -and anyone else may chime in, btw! -but your answers are positively ninja, though i think you're five hours different than me. -ninja as you can be...
QUOTE(r0x0rcist @ 8 Oct, 2009 - 11:58 AM)
You're the only one who has answered my questions. -You seem to be my answer! you = win.
~Rebecca
QUOTE(thehat @ 8 Oct, 2009 - 11:12 AM)
Here's the complete code with the items in the background disabled:
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 = "3Dcarouselsettings.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;
//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;
//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);
Okay, so I changed the images background so here is the latest and greatest to date. Thankies again!
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;
//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);
Did you ever get a fix for my other problem. I've been googling the frack out of it. Nobody else answers on here. I'll repost today, though.
~R
QUOTE(r0x0rcist @ 8 Oct, 2009 - 12:32 PM)
Okay, so I changed the images background so here is the latest and greatest to date. Thankies again!
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;
//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);
Forum Index:
Programming Help |
C and C++ |
VB6 |
Java |
VB.NET |
C# |
ASP.NET |
PHP |
ColdFusion |
Perl and Python |
Ruby |
Databases |
Other Languages |
Game Programming |
Mobile Development |
Software Development |
Computer Science |
Industry News |
Programming Tutorials |
C++ Tutorials |
Visual Basic Tutorials |
Java Tutorials |
VB.NET Tutorials |
C# Tutorials |
Linux Tutorials |
PHP Tutorials |
ColdFusion Tutorials |
Windows Tutorials |
HTML/JavaScript Tutorials |
CSS Tutorials |
Flash Tutorials |
Web Promotion Tutorials |
Graphic Design & Photoshop Tutorials |
Software Development Tutorials |
Database Tutorials |
Other Language Tutorials |
ASP.NET Tutorials |
Game Programming Tutorials |
WPF & Silverlight Tutorials |
| 
