I have a carousel that makes buttons through a xml file.
Here’s the xml code
<?xml version="1.0" encoding="utf-8"?>
<carousel>
<number_of_images>10</number_of_images>
<images>
<image>
<url>icon13.png</url>
<link_to>banner.swf</link_to>
</image>
<image>
<url>Adobe Bridge.png</url>
<link_to>http://www.google.nl</link_to>
</image>
//Followed by 8 more image declarations.
</images>
</carousel>
And here’s my as code
package {
//Importeer benodigde classes
import flash.display.MovieClip;
import flash.events.Event
import flash.events.MouseEvent
import flash.net.URLLoader
import flash.net.URLRequest
import flash.display.Loader
import flash.net.navigateToURL
import flash.events.ProgressEvent;
public class Main extends MovieClip {
//Maak constructor functie
public function Main(){
//Here I use 80x80 sized images (
const IMAGE_WIDTH:uint = 80;
const IMAGE_HEIGHT:uint = 80;
//Set the focal length
var focalLength:Number = 1000;
//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 = "icons.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*);
//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.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*);
//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);
}
}
//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), "_self");
}
}
}
}
Now, I didn’t write this as completly by myself. its a modified version from a tutorial… (thats why the xml is formatted the way it is…)
Now it works fine and all. BUT, the thing i want, is instead od opening a url when one of the items is clicked. I want a swf open inside the window where the carousel is displayed…
(this could also be done by just new functions if its easyer that way)
So basicly the idea is
If you press one of the items. A new swf (of a function is called)
Which is plached on the position of the carousel… So not in a new window…
Is this possible, and if so how?
