Advanced Flash Components

Adding Content: Through ActionScript

Updated: Mar 26, 2008 Views: 613

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 Flow List AS3.0 Component.

Complete Code:

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

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

Getting the 3D Flow list Set-up

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

Also make sure that you give your 3D Flow list an instance name of myFlow in the properties panel (Window > Properties > Properties)

Event Listener for 3d Flow list 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.

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

function onFlowInit(event:Event) {
//we will add data provider here
}
myFlow.addEventListener(FlowList3DEvent.INITIALIZE, onFlowInit);

Creating the Data Provider

Next inside of function, we need to create our data provider this is where we add all our items to.

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

function onFlowInit(event:Event) {
var dp:DataProvider = new DataProvider();
}
myFlow.addEventListener(FlowList3DEvent.INITIALIZE, onFlowInit);

Adding Images to Data Provider

function onFlowInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"http://www.afcomponents.com/components/3d_flow_list_as3/img_1.jpg", type:"image", description:"Image 1", data:"http://www.afcomponents.com"});
    myFlow.content = dp;
}
myFlow.addEventListener(FlowList3DEvent.INITIALIZE, onFlowInit);

Adding a swf to Data Provider

function onFlowInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"name.swf", type:"image", description:"Image 1", data:"http://www.afcomponents.com"});
    myFlow.content = dp;
}
myFlow.addEventListener(FlowList3DEvent.INITIALIZE, onFlowInit);

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 onFlowInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"DisplayObjectInstance", type:"instance", description:"Image 1", data:"http://www.afcomponents.com"});
    myFlow.content = dp;
}
myFlow.addEventListener(FlowList3DEvent.INITIALIZE, onFlowInit);

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 onFlowInit(event:Event) {
    var dp:DataProvider = new DataProvider();
    dp.addItem({path:"img_1.jpg", type:"image", description:"Image 1", data:"http://www.afcomponents.com"});
    myFlow.content = dp;
}
myFlow.addEventListener(FlowList3DEvent.INITIALIZE, onFlowInit);

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

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

angleH:Number - the horizontal angle of the 3D Flow List on either side of the selected item.
angleV:Number - the vertical angle of the 3D Flow List
displayedItemCount:Number - the number of items displayed on either side of the selected item (includes selected item)
forceRotationY:Boolean
forceRotationZ:Boolean
itemAlpha:Number - the alpha of the last displayed item, items will fade incrementally
itemDistance:Number - the distance in pixels between each item
itemRotationY:Number - the rotation of each item on the y axis
itemRotationZ:Number - the rotation of each item on the z axis
itemScale:Number - the scale of the last displayed item, other items will scale incrementally
selectedPaddingX:Number - the padding of the selected item on the x axis
selectedPaddingY:Number - the padding of the selected item on the y axis
selectedPaddingZ:Number - the padding of the selected item on the z axis
useFlatAngleV:Boolean
useFlatAngelH:Boolean

The width and height of the images inside of the 3d Flow list are controlled by the width and height of the 3d Flow list component. You change this in the properties panel when your instance of 3d Flow list is selected.
If you want to change how other things such as the containers in the 3d Flow list, there are other properties that you can customize: 3d Flow list API.

Component Info

3D Flow List

Knowledge Base

Forum