Advanced Flash Components

Adding Content: Through ActionScript

Updated: Feb 19, 2008 Views: 933

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 3d Carousel AS3.0 Component.

Complete Code:

import fl.data.DataProvider;
import com.afcomponents.events.CarouselEvent;

function onCarouselInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"img_1.jpg", type:"image", description:"Image 1", data:"http://www.url.com"});
    myCarousel.content = dp;
}
myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit);

Getting the Carousel Set-up

To begin make sure that you have the 3d Carousel Component installed using the extension manager. Create a new Flash ActionScript 3.0 File and have dragged an instance of the 3d Carousel onto the stage from the Component Panel (Window > Components).

Also make sure that you give your 3d Carouselan instance name of myCarousel in the properties panel (Window > Properties > Properties)

Event Listener for 3d 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:Event) {
//we will add data provider 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.

function onCarouselInit(event:Event) {
var dp:DataProvider = new DataProvider();
}
myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit);

Adding Images to Data Provider

function onCarouselInit(event:Event) {
var dp:DataProvider = new DataProvider();
dp.addItem({path:"img_1.jpg", type:"image", description:"Image 1", data:"http://www.url.com"});
}
myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit);

Adding a swf to Data Provider

function onCarouselInit(event:Event) {
var dp:DataProvider = new DataProvider();
dp.addItem({path:"name.swf", type:"image", description:"Image 1", data:"http://www.url.com"});
}
myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit);

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.

function onCarouselInit(event:Event) {
var dp:DataProvider = new DataProvider();
dp.addItem({path:"DisplayObjectExample", type:"instance", description:"Image 1", data:"http://www.url.com"});
}
myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit);

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

function onCarouselInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"img_1.jpg", type:"image", description:"Image 1", data:"http://www.url.com"});
    myCarousel.content = dp;
}
myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit);

Properties of the 3d Carousel That Will Affect How The Content Loads

After you have successfully loaded your content in the 3d Carousel you may want to change how your content is appearing in the 3d Carousel. These can also be found in the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) under the property displayStyle:

Horizontal Padding Number
Vertical Padding Number
maintainAspectRatio to false
scaleContent to true
autoSize to false

If you want to change how other things such as the containers in the 3d Carousel, there are other properties that you can customize: 3d Carousel's API.

AFComponents.com