3D Carousel with XML and ActionScript 3

March 11, 2009 by: smonte
3D Carousel

This tutorial is an interesting one. We’ll be creating a Flash 3D carousel using XML and ActionScript 3. You can easily change the number of images seen in the carousel to fit for your needs!

Making the XML file

Let’s start by creating the XML file. In the XML file we specify three important things,

  • how many images we are using in the 3D carousel menu,
  • the URLs where the images can be found and
  • the URLs where the images should link to.

1. In your favorite text editor, type the following.

 version="1.0" encoding="utf-8"?>
>
 
        >10>
 
        >
 
                >
                        >https://flashmymind.com/3D_carousel/image1.png>
                        >http://tutorials.flashmymind.com>
                >
 
                >
                        >https://flashmymind.com/3D_carousel/image2.png>
                        >http://tutorials.flashmymind.com>
                >
 
                >
                        >https://flashmymind.com/3D_carousel/image3.png>
                        >http://tutorials.flashmymind.com>
                >
 
                >
                        >https://flashmymind.com/3D_carousel/image4.png>
                        >http://tutorials.flashmymind.com>
                >
 
                >
                        >https://flashmymind.com/3D_carousel/image5.png>
                        >http://tutorials.flashmymind.com>
                >
 
                >
                        >https://flashmymind.com/3D_carousel/image6.png>
                        >http://tutorials.flashmymind.com>
                >
 
                >
                        >https://flashmymind.com/3D_carousel/image7.png>
                        >http://tutorials.flashmymind.com>
                >
 
                >
                        >https://flashmymind.com/3D_carousel/image8.png>
                        >http://tutorials.flashmymind.com>
                >
 
                >
                        >https://flashmymind.com/3D_carousel/image9.png>
                        >http://tutorials.flashmymind.com>
                >
 
                >
                        >https://flashmymind.com/3D_carousel/image10.png>
                        >http://tutorials.flashmymind.com>
                >
 
        >
 
>

2. Save the file as “3D-carousel-settings.xml”.

Now we have our XML all ready! You are free to use your own images, just remember to make them all the same size and set the URLs to match your settings. I have used the following images (70×70).

Moving to Flash

3. Create a new Flash document of size 550×250.

4. In the first frame of your Flash movie, type the following.

//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 = "https://flashmymind.com/xml/3D-carousel-settings.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();
        }
}

As you can see we first create all the variables we are going to use in this Flash movie. Then we load the XML file. Once the XML file is loaded, we load all the images that are specified in the XML file. Finally, we call the function initializeCarousel(), which is responsible for creating the 3D carousel. Here is the function.

//This function is called when all the images have been loaded.
//Now we are ready to create the 3D carousel.
function initializeCarousel():void {
 
        //Calculate the angle difference between the images (in radians)
        var angleDifference:Number = Math.PI * (360 / numberOfImages) / 180;
 
        //Loop through the images
        for (var i:uint = 0; i < imageHolders.length; i++) {
 
                //Assign the imageHolder to a local variable
                var imageHolder:MovieClip = (MovieClip)(imageHolders[i]);
 
                //Get the angle for the image (we space the images evenly)
                var startingAngle:Number = angleDifference * i;
 
                //Position the imageHolder
                imageHolder.xpos3D = radius * Math.cos(startingAngle);
                imageHolder.zpos3D = radius * Math.sin(startingAngle);
                imageHolder.ypos3D = floor;
 
                //Set a "currentAngle" attribute for the imageHolder
                imageHolder.currentAngle = startingAngle;
 
                //Calculate the scale ratio for the imageHolder (the further the image -> the smaller the scale)
                var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D);
 
                //Scale the imageHolder according to the scale ratio
                imageHolder.scaleX = imageHolder.scaleY = scaleRatio;
 
                //Set the alpha for the imageHolder
                imageHolder.alpha = 0.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);
}

Now we have our carousel on the stage! You should have a similar looking Flash movie now.

Finally, let’s add the rotation function! Type the following.

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));
}

You are done, test your movie! Hope you enjoyed this Flash ActionScript 3 tutorial :)

Download fla.

  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. Vertical 3D Carousel with ActionScript 3 and XML
  2. XML Pages with ActionScript 3
  3. Creating a Menu via XML
  4. Colorful Menu with XML and ActionScript 3
  5. Vertical 3D Carousel with ActionScript 3



Filed under: ActionScript 3 Advanced
Tags: ,

Comments

26 Responses to “3D Carousel with XML and ActionScript 3”
  1. Mircea says:
    December 9, 2009 at 9:34 am

    I tryed your 3d carousel but not working, the page reamaing black and writing loading.
    I try it to download your carousel demo using an swf downloader but still not working.

    Log in to Reply
  2. Micael Roche says:
    September 13, 2009 at 9:22 pm

    I was wondering, is there a way of duplicating the carousel so there’s three on at once?

    Also, I couldn’t change the XML directory because there’s a code at the end of the actionscript that is preventing it from doing so;

    navigateToURL(new URLRequest(e.target.linkTo));

    Can you please tell me how to fix that.

    Thank You

    Log in to Reply
  3. Hratch says:
    August 18, 2009 at 11:28 am

    Great Tutorial,

    One comment concerning the number of images.
    I believe that it would be better to retrieve the number of the images from the xml by looking at the length of xml.images.image than to write that number in the xml file as 10…

    I just removed that line from the xml and chnged the as3 code at line 60 to
    numberOfImages = xml.images.image.length();

    Now when I Add/Remove other images to the xml or get the image list via php, the number of the images changes dynamically .

    Thank You

    Log in to Reply
  4. reevers says:
    July 7, 2009 at 7:46 am

    Hi,
    I get that fast-spinning effect too on my Mac. Clicking off the browser window causes the carousel to spin at dizzying speeds. Is there a way to fix that? Or to stop it from spinning altogether when you move your mouse off the carousel? Thanks! And great tutorial too!

    Log in to Reply
    • madfatter says:
      July 8, 2009 at 9:49 am

      I found that if I put a default speed for when the mouse was out of range of the stage the spinning problem stopped. The code (speed etc) is specific to my project but it looks like this:

      //Calculate the angleSpeed according to mouse position
      //
      if (mouseX 0) {
      angleSpeed = (mouseX – vanishingPointX) / 30000;
      }else{
      angleSpeed = 0.01;
      }

      Log in to Reply
      • madfatter says:
        July 8, 2009 at 9:52 am

        The code got changed for some reason. Here it is again:

        //Calculate the angleSpeed according to mouse position
        //
        if (mouseX 0) {
        angleSpeed = (mouseX – vanishingPointX) / 30000;
        }else{
        angleSpeed = 0.01;
        }

      • madfatter says:
        July 8, 2009 at 9:53 am

        Something is stripping the sate references out of the code :(
        Sorry

  5. madfatter says:
    June 29, 2009 at 7:49 am

    Hi,

    This code is incredibly useful. Thank you for posting it!

    I’ve noticed that in mac browsers if you select another window that puts the browser in the background the carrousel begins to spin incredibly fast. This stops if you bring the browser to the front again. Anybody know what might cause this or how to correct it?

    Thanks

    Log in to Reply
  6. BIEG says:
    June 24, 2009 at 11:19 pm

    Hi,

    First of all thumbs up fo rall the magnificant tutorials you have posted !

    Thanks for sharing :)

    I am adepting the script slightly for I want to have in the middle of the carousel a globe.
    so everything rotates around it like with saturn.

    Could you help me out with this please?
    Much appreciated!

    BIEG

    Log in to Reply
  7. Edwin says:
    May 28, 2009 at 5:11 am

    Hi,
    Excellent tutorial but when I try to open it, there is an errror showing .
    “Unexpected file format” I am using FLASH CS3, Does someone have the same problem?How can I make it work?

    Thanks,

    ps: Did I say that this is an excelent tutorial :):)

    Log in to Reply
  8. shi says:
    May 26, 2009 at 11:31 pm

    I do that u say but when I publish my .fla an error occur that say :

    Syntax error. const IMAGE_WIDTH:uint = 70

    I do’nt know what can I do to resolve it

    tanx about your excellent article :)

    pls help me sooooon :(

    Log in to Reply
  9. shi says:
    May 26, 2009 at 11:29 pm

    I do that u say but when I publish my .fla an error occur that say :

    Syntax error. const IMAGE_WIDTH:uint = 70;

    I do’nt know what can I do to resolve it

    tanx about your excellent article :)

    pls help me sooooon :(

    Log in to Reply
  10. Andrew says:
    May 22, 2009 at 8:50 am

    Hi there!

    Brilliant tutorial, but how do you make it so when the cursor is on the left or right hand side, the images come towards you, not away. Any help would be greatly appriciated.

    Thanks in advance

    Log in to Reply
  11. vic says:
    May 19, 2009 at 10:43 pm

    Hi,

    Thank for your script. 1 small question here, when i click the pic, it will open a new window.
    How can I make it open on the same window? example where can i set target=_parent?

    Thank you

    Log in to Reply
  12. Steen UM says:
    May 9, 2009 at 2:59 am

    I put the code in a layer called “script”, and it is doing fine. Then I put a picture on my “bagground” layer. And now is the problem, that the rotating menu appears behind the picture. How do I get the menu in front?

    Log in to Reply
  13. Mark Errante says:
    April 13, 2009 at 6:12 am

    I would like the menu to stop spinning when you move the mouse past its boundaries. I tried adding the condition of:

    if(mouseX 530){
    angleSpeed = 0;}

    Which is near the edge of the video. It works fine if you move the mouse slowly, but it doesn’t work if you move the mouse way to quickly, it just goes on making you dizzy. Any suggestions on how to make this work?

    Thanks.

    Log in to Reply
  14. smonte says:
    April 11, 2009 at 4:42 am

    I think it’s much better to comment on the code about what we are doing. There is more than 60 lines of comments in this tutorial and I think that counts for something.

    Log in to Reply
  15. Krix says:
    April 11, 2009 at 4:30 am

    You see, I think this doesn’t really seem to be a ‘tutorial’. I mean you must have explained the code a little bit. You just wrote “copy and paste the follwing..” this is something that I think makes it stand out from the list of tutorials.

    Log in to Reply
  16. Tudor says:
    March 30, 2009 at 9:42 am

    Does this require Flash CS4?
    When I download the file my version of cs3 won’t load it.
    I feel foolish asking this but I’m at a loss.
    Thanks,
    Tudor

    Log in to Reply
  17. Lara says:
    March 26, 2009 at 11:16 am

    Excellent well commented tutorial

    How do we spin this around to become a vertical carousel rather then horizontal?

    Log in to Reply
  18. Manny says:
    March 25, 2009 at 11:18 pm

    First post, great site, great content…
    Congrats, on yet another well written and informative tutorial…
    Always with the useful content.
    Kudos.

    Log in to Reply
  19. Eric says:
    March 25, 2009 at 5:18 pm

    Perfect. I will recreate this tutorial in video format for some of your viewers. Maybe this will help them see how all of this works. Don’t worry, all credit is yours I just think this is a perfectly written tutorial and needs to be “seen and heard” as well.

    Log in to Reply
  20. S. Hay says:
    March 23, 2009 at 6:24 am

    I am a beginner to the flash world and am looking for a way to use a rotating carousel menu for my global navigation within my Flash site.
    I would use this awesome tutorial, but i’m not sure how to change the icons so that they will correspond with my flash navigation vs. external URL’s.

    Any ideas?

    Log in to Reply
  21. Colin Jones says:
    March 21, 2009 at 5:22 am

    Trying to change the path of the xml file from your url to my hardrive but it wont detect it is there a way to do this. Oh great tutorial :)

    Log in to Reply
    • David Malenfant says:
      May 1, 2009 at 10:03 am

      Hey Colin
      Look at line 86 and you see where it saids images.url, well you need to change url to path and go into the xml file and change all the to I hope this helped.

      Log in to Reply
      • nikolai says:
        June 23, 2009 at 11:16 am

        hello,
        i am having the same problem. I am simply trying to load the xml from my url. I have tried everything i can think of but all i get is a blank page. Any ideas?
        thanks

Leave a Reply

You must be logged in to post a comment.