Vertical 3D Carousel with ActionScript 3 and XML
In this tutorial I’ll teach you how you can create an attractive vertical 3D carousel by using XML and ActionScript 3. We first set up everything ready on the Flash stage, then make the XML file and import it to Flash.
Create a Vertical 3D Carousel with ActionScript 3 and XML
Assuming you have some basic knowledge of Flash and ActionScript, this tutorial will show you how to create a vertical 3D carousel using ActionScript 3.0 and XML.
The first thing you’ll need to do is create a new Flash document. Then, create a symbol (either a movie clip or graphic) for each item in your carousel. For this example, we’ll use six movie clips, each containing an image.
Next, on the main timeline, create six instances of your symbol, positioned vertically in a row. Make sure they’re all the same size and spaced evenly apart.
Now we’ll add some code to make our carousel interactive. Select the topmost instance of your symbol and open the Actions panel (F9). Add the following code:
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); function mouseOverHandler(event:MouseEvent):void { this.y -= 20; } function mouseOutHandler(event:MouseEvent):void { this.y += 20; }
This code will cause each instance of our symbol to move up 20 pixels when the mouse is over it, and move back down when the mouse is out. Now select each instance of your symbol and change the y property value so that they’re staggered – i.e., the second one should be y=40, the third one should be y=60, and so on.
Now we’ll add some rotation to our carousel. Select the topmost instance of your symbol again and open the Actions panel. Add the following code:
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler); var rotationSpeed:Number = 0; function enterFrameHandler(event:Event):void { this.rotationY += rotationSpeed; }
This code will cause our symbols to rotate around the y-axis at a speed determined by the rotationSpeed variable. We’ll set the rotationSpeed variable when the mouse is over each item in our carousel, so that they move at different speeds.
Select each instance of your symbol and open the Actions panel. Add the following code:
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); function mouseOverHandler(event:MouseEvent):void { rotationSpeed = Math.random() * 10 – 5; }
This code will generate a random number between -5 and 5 when the mouse is over each item, and assign it to the rotationSpeed variable. This will cause our carousel to rotate at different speeds when the mouse is over each item.
Now we’ll add some code to load our images from an XML file. Create a new ActionScript file and save it as ‘imageLoader.as’. Add the following code:
package { import flash.display.Loader; import flash.display.Sprite; import flash.events.Event; import flash.net.URLRequest; public class ImageLoader extends Sprite { private var xmlLoader:URLLoader; private var xmlData:XML; public function ImageLoader() { xmlLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded); xmlLoader.load(new URLRequest(‘images.xml’)); } private function xmlLoaded(event:Event):void { xmlData = new XML(event.target.data); trace(xmlData); loadImages(); } private function loadImages():void { for (var i:int=0; i<xmlData..image.length(); i++) { var imageLoader:Loader = new Loader(); addChild(imageLoader); imageLoader.load(new URLRequest(xmlData..image [i].@src)); imageLoader.x = int(xmlData..image[i].@x); imageLoader.y = int(xmlData..image[i].@y); } } } }
This code will load an XML file containing the paths to our images, and position them according to the x and y values in the XML file.
Create a new XML file and save it as ‘images.xml’. Add the following code:
Change the paths to your own images, and change the x and y values if necessary. You can also add more images by adding additional image tags to your XML file.
This code will load the images from your XML file and display them in your carousel. You can test your movie (Ctrl+Enter) to see it in action.
Set up the Flash Stage
To set up the Flash stage, first create a new Flash AS3 file. Then, go to File > Publish Settings. In the Publish Settings dialog box, make sure the Flash tab is selected. Next, set the width and height of the stage to 600 pixels each. Then, under the Background color drop-down menu, select ‘Transparent.’ Now that the stage is set up, you can add your assets to it.
Making the XML File
Assuming you have some basic knowledge of XML, we’ll start by creating an XML file for our carousel. This file will hold all the data that our ActionScript will use to populate the carousel.
For our example, we’ll create a simple XML file with four items. Each item will have a title, description, and image. The image will be located in a folder called ‘images’ and we’ll link to it using a relative path.
Here’s the code for our XML file:
This is the description for item 1. images/1.png This is the description for item 2. images/2.png This is the description for item 3. images/3.png
You might have noticed two things in our example:
Comments begin with . If you want to add comments to your XML file, make sure to start them with .
Each of our images is located in a folder called ‘images’. This is a good way to keep your carousel’s items organized. If you are using Flash Professional, create this folder inside your Flash project’s ‘assets’ folder.
Adding the Images
Before we test our carousel, make sure you add some images to the images folder. You can use any images you want as long as they are named correctly and are in the correct folder.
Our example XML file named its images 1.png, 2.png, and so on. We’ll need to add three images with names that match these:
images/1.png
images/2.png
images/3.png
Testing the Carousel
To test your carousel, open it in Flash Professional and press Ctrl+Enter (Cmd+Enter on Mac). If everything is set up correctly, each item should be displayed sequentially as the animation runs.
This is a basic carousel. You can add as many items to your XML file as you want, and the carousel will automatically adjust to accommodate them.
Using the XML DataList Component
In the previous section, we learned that all the data in our carousel was stored in an XML file on the server-side (the side that contains the Flash animation). This means that if we want to change something in our carousel, like the order of items or descriptions, we need to modify the XML file directly on the server.
The XML DataList Component is a Flash component designed to make working with XML data easier for Flash developers. It reads data from an XML file and displays it in a list. The DataList can be customized to display the data any way you want, and you can use ActionScript to control how your users can interact with the DataList. You can even add a scroll bar to your DataList so that users will be able to scroll through long lists of items.
Creating the DataList
Before we create our new carousel, we’ll need to add the XML DataList Component to our library. To do this:
Click on Window > Components (or press Ctrl+F7 [Cmd+F7 on Mac]) inFlash Professional’s menu bar. This will open up the Components panel if it isn’t already visible. If it is, skip ahead to step 3. Click on the User Interface tab at the top of the Components panel:
Click and drag an instance of the DataGrid Component into your workspace:
Double-click on your new datalist or press F2 to open its parameters window:
Note: In the parameters window, Flash refers to a DataList as a DataGrid. Don’t let this confuse you. They are one and the same component.
In the parameters window, make sure that you select an XML file in the source parameter:
This will load all of your XML data into the DataList. You can then use ActionScript to display it however you want.If you want to customize how your data is displayed in the DataList, click on the list area and press F3 (or choose Modify > Convert to Symbol from Flash’s menu bar). This will open up Flash’s symbol editing mode and give you access to everything inside the DataList:
The three main parts of our DataList are its header, content area and scroll bar. You can customize each of these parts using some basic HTML tags or manually adjust them with Flash Professional’s design tools. For further information on working with these components, check out our HTML Text Components tutorial series or search for ‘list’ in Adobe’s LiveDocs.
After customizing your DataList however you like, press Ctrl+Enter (Cmd+Enter on Mac) to test it out. If everything is set up correctly, your DataList should look similar to the one in our example.
You can create multiple instances of the DataList by clicking and dragging another instance from the User Interface section of the Components panel into your workspace.
Building a Carousel with the XML DataList Component
Now that we’ve learned how to use a DataList, we’ll use it to build a new carousel. To do this, we’ll assume you have some basic knowledge of HTML/XML and know how to add simple events to your ActionScript code. If you need help with this, check out our working with HTML text tutorial series or search for ‘text’ in Adobe’s LiveDocs. All the code we write will go inside Flash Professional’s actions layer:
Our first step is to add the following code right after our import statements:
var myDataList:DataGrid = new DataGrid(); var detailXML:XML = new XML(); var carousel_items:XMLList; var xmlLoader:URLLoader = new URLLoader(); xmlLoader.addEventListener(Event.COMPLETE, loadData); function loadData(eventObj:Event): void { myDataList.source = eventObj.target.data; carousel_items = myDataList.getChildren(); loadCarousel(); }
The first line of code creates an instance of the DataGrid class, which we’ll use to store our XML data. The next line creates a new XML object for our data and assigns it to the detailXML variable. We then create a new XMLList object and assign it to carousel_items . This will hold all of our carousel’s items, which we retrieve from the DataList by calling its getChildren() method.
The rest of the code sets up a URLLoader object that will load our XML file into Flash Professional when it finishes loading on the server side. Alternatively, you can call Flash Professional’s load() method in your ActionScript code or include your data directly in the script using a CDATA section:
Once the data is done loading, the URLLoader will trigger an Event.COMPLETE event, which calls our loadData() function (which we just wrote). This function assigns our XML data to our DataGrid and stores all of its children in an XMLList called carousel_items . It then calls our loadCarousel() function, which we’ll create in the next section.
Building the Carousel’s Content
In order to display our XML data in our carousel, we need a way to add new content to it. This is where our loadCarousel() function comes in:
function loadCarousel(): void { var myXMLNode:XMLNode; var myImageLoader:Loader = new Loader(); for (var i = 0; i < 3; i++) { myXMLNode = carousel_items[i]; var myImage:Bitmap = new Bitmap(); var urlRequest : URLRequest = new URLRequest(myXMLNode.childNodes[2].firstChild.nodeValue); myImageLoader.load(urlRequest); myImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, addItem); } }
The first line of code creates a new XML node called myXMLNode.
Setting up the Actionscript 3
Assuming you have a basic understanding of ActionScript 3 and understand how to set up an XML file, let’s move on to creating the carousel.
First, we need to set up our stage. For this example, we will be using a 640×480 stage size with a grey background. Then, we need to import some classes that we will be using throughout this tutorial. We will be using the following:
import fl.controls.Carousel;
import fl.data.DataProvider;
Now that we have our stage and our imports set up, let’s create our carousel. To do this, we first need to create an XML file that will hold all of our data. This data can be anything you want, but for this example, we will just be using text data. The XML file should look something like this:
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
Now that we have our XML file set up, we need to create our carousel using ActionScript 3. We will do this by creating a new Carousel and giving it a DataProvider that is linked to our XML file. To do this, we will use the following code:
var myCarousel:Carousel = new Carousel(); //Set up common properties for the carousel myCarousel.x = 30; myCarousel.y = 30; myCarousel.rotationY = -45; //Set up DataProvider var dp:DataProvider = new DataProvider(testXML); //Connect DataProvider to Carousel myCarousel.dataProvider = dp; addChild(myCarousel);
In this code, we create our carousel and set a few basic properties. We then create our DataProvider and link it to the XML file. The last line of code will populate our stage with the carousel and all of its items.
Now that we have our carousel, let’s add some styles to it so it does not look so plain. For this example, we are going to add a gradient fill and some drop shadows using ActionScript 3. To do this, we will use the following code:
myCarousel.setStyle(‘skin’,’GradientBackground’); myCarousel.setStyle(‘dropShadowEnabled’,true); myCarousel.setStyle(‘shadowDistance’,2); myCarousel.setStyle(‘shadowDirection’,270); myCarousel.setStyle(‘fontSize’,12);
The first line of this code will give our carousel a gradient fill instead of a solid color fill. The next few lines will add a drop shadow effect to the carousel. And finally, the last line will change the font size for the items in the carousel.
Now that we have our carousel set up, let’s run our code and see what it looks like
Conclusion
This carousel is a great way to display 3D content in a web page or application. It is easy to implement and can be customized to fit the needs of your project. The carousel can be used to display images, videos, or any other type of content. With its simple design and ease of use, the vertical 3D carousel is a great way to add interactivity to your web page or application.