Adding Content to 2D Carousel: Through ActionScript
Updated: Dec 6, 2007
Views: 1029
Description: This tutorial will show you how to use ActionScript inside of flash to load various types of content (images, movie clips, .swfs) into the 2-D Carousel AS3.0 Component.
Components Used in this Tutorial: 2D Carousel AS3.0
The Completed Project:
Complete Code
Getting the Carousel Set-up
To begin make sure that you have the Carousel Component installed using the extension manager, have created a new Flash ActionScript 3.0 File and have dragged an instance of the 2D Carousel onto the stage from the Component Panel (Window > Components).
Also make sure that you give your Carousel an instance name of myCarousel in the properties panel (Window > Properties > Properties)
Event Listener for Carousel Initialize
Items can only be loaded through ActionScript after the component has initialized. We do this by creating an event listener and calling a function in which we will use to add our content.
Creating the Data Provider
Next inside of function, we need to create our data provider this is where we add all our items to.
Adding Images to Data Provider
Adding a swf to Data Provider
Adding a Movie Clip to Data Provider
This is a two step process. First, you need to add the item to your data provider. The path will be the class name you give the movie clip in linkage. (We go through this in the next step). The type will now change from image to instance.
The other important step is exporting the Movie Clip for ActionScript. Now, inside of flash create you movie clip however you would like. Once you have create a movie clip, find it in the library (Window > Library). Right click on the movie clip and select Linkage. In the pop-up define the class as the same name you used in the XML document - DisplayObjectExample. Also make sure Export for ActionScript and Export in First Frame are both selected.
Setting Carousel's Content to Data Provider
Properties of the Carousel That Will Affect How The Content Loads
After you have successfully loaded your content in the Carousel, you may want to change how your content is appearing in the Carousel. These can also be found in the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) under the property contentStyle:
If you want to change how other things such as the containers in the Carousel, there are other properties that you can customize: 2D Carousel API.
The Completed Project:
Complete Code
import fl.data.DataProvider;
import com.afcomponents.events.CarouselEvent;
function onCarouselInit(event:CarouselEvent) {
var dp:DataProvider = new DataProvider();
dp.addItem({path:"example.jpg", type:"image", description:"My Item", data:"URL.html"});
dp.addItem({path:"example.swf", type:"image", description:"My Item", data:"URL.html"});
dp.addItem({path:"DisplayObjectExample", type:"instance", description:"My Item", data:"URL.html"});
myCarousel.content = dp;
}
myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit);
import com.afcomponents.events.CarouselEvent;
function onCarouselInit(event:CarouselEvent) {
var dp:DataProvider = new DataProvider();
dp.addItem({path:"example.jpg", type:"image", description:"My Item", data:"URL.html"});
dp.addItem({path:"example.swf", type:"image", description:"My Item", data:"URL.html"});
dp.addItem({path:"DisplayObjectExample", type:"instance", description:"My Item", data:"URL.html"});
myCarousel.content = dp;
}
myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit);
Getting the Carousel Set-up
To begin make sure that you have the Carousel Component installed using the extension manager, have created a new Flash ActionScript 3.0 File and have dragged an instance of the 2D Carousel onto the stage from the Component Panel (Window > Components).
Also make sure that you give your Carousel an instance name of myCarousel in the properties panel (Window > Properties > Properties)
Event Listener for Carousel Initialize
Items can only be loaded through ActionScript after the component has initialized. We do this by creating an event listener and calling a function in which we will use to add our content.
function onCarouselInit(event:CarouselEvent) {
//We will add our data provider and content in here
}
myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit);
//We will add our data provider and content in here
}
myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit);
Creating the Data Provider
Next inside of function, we need to create our data provider this is where we add all our items to.
var dp:DataProvider = new DataProvider();
Adding Images to Data Provider
dp.addItem({path:"example.jpg", type:"image", description:"My Item", data:"URL.html"});
Adding a swf to Data Provider
dp.addItem({path:"example.swf", type:"image", description:"My Item", data:"URL.html"});
Adding a Movie Clip to Data Provider
This is a two step process. First, you need to add the item to your data provider. The path will be the class name you give the movie clip in linkage. (We go through this in the next step). The type will now change from image to instance.
dp.addItem({path:"DisplayObjectExample", type:"instance", description:"My Item", data:"URL.html"});
The other important step is exporting the Movie Clip for ActionScript. Now, inside of flash create you movie clip however you would like. Once you have create a movie clip, find it in the library (Window > Library). Right click on the movie clip and select Linkage. In the pop-up define the class as the same name you used in the XML document - DisplayObjectExample. Also make sure Export for ActionScript and Export in First Frame are both selected.
Setting Carousel's Content to Data Provider
myCarousel.content = dp;
Properties of the Carousel That Will Affect How The Content Loads
After you have successfully loaded your content in the Carousel, you may want to change how your content is appearing in the Carousel. These can also be found in the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) under the property contentStyle:
- width to desired image width
- height to desired image height
- maintainAspectRatio to false
- scaleContent to true
- autoSize to false
myCarousel.contentStyle = {width:100, height:150, maintainAspectRatio:true, scaleContent:true, padding:10, autoSize: false};
If you want to change how other things such as the containers in the Carousel, there are other properties that you can customize: 2D Carousel API.
Other Tutorials
